@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&display=swap");
/*! lime.css — classless build of the Lime design system (design.how/systems/lime).
Tokens copied verbatim from design.how/r/lime/theme.json. Drop in with one ; no classes.
Dark: follows the OS, or force with / data-theme="light". */
:root {
/* == Surfaces == */
--page: #ffffff; /* the page | app background */
--surface: #f6f5f2; /* warm grey: cards, wells, quiet panels | card, sidebar, table header */
--surface-2: #efeeea; /* a control at rest or a row on hover | secondary button, chip, hover */
--surface-3: #e6e4df; /* pressed, a track | pressed control, slider and switch track */
--raised: #ffffff; /* a surface that floats above the page | popover, menu, dialog, sheet */
--field: #f6f5f2; /* the fill of a text field | input, textarea, select trigger */
--scrim: rgb(15 15 13 / 0.5); /* the layer behind a dialog or sheet | dialog, sheet */
/* == Text == */
--fg: #0f0f0d; /* primary text, 17.6:1 on --surface | headings, body, labels */
--fg-2: #4a4943; /* secondary text, 9.0:1 on --page | descriptions, table cells */
--fg-3: #6b6a63; /* supporting text and icons, 5.4:1 on --page and 5.0:1 on --surface | hints, captions, placeholders */
--fg-disabled: #a6a49b; /* a disabled label; no contrast claim | disabled controls */
--fg-inverse: #ffffff; /* text on the solid ink fill | solid button, tooltip, toast */
--on-accent: #0f0f0d; /* text and icons on the lime in both themes, 15.6:1 on --accent | primary button, selected chip */
--glow-accent-fg: #0f0f0d; /* text and icons on the lime glow: ink, on the light body and the calmer dark one alike (Customize turns it white for a picked hue whose dark body runs deep) | primary button, balance chip, featured card */
/* == Lines == */
--line: #e6e4df; /* a hairline between things; decorative | card edge, divider, table rule */
--line-strong: #cfcdc6; /* a hairline that must read a little more | field edge, hovered edge */
--control: #85827a; /* the outline of a control, 3.8:1 on --page, 3.5:1 on --surface and 3.3:1 on --surface-2, all over the minimum of WCAG 1.4.11; darkened one step from #8f8c84, which fell under it on --surface-2 | checkbox, radio, switch off, slider thumb */
/* == Solid ink == */
--ink: #0f0f0d; /* the ink fill: the second action beside the lime | solid button, tooltip, toast */
--ink-hover: #2a2a26; /* ink on hover | solid button */
--ink-active: #3f3f3a; /* ink pressed | solid button */
/* == Accent: acid lime == */
--accent: #e4f222; /* the mark: the fill of a primary action, 15.6:1 with --on-accent | primary button, selected segment, switch on, slider fill, progress */
--accent-hover: #d6e41a; /* the mark on hover, 13.7:1 with --on-accent | primary button */
--accent-active: #c4d211; /* the mark pressed, 11.5:1 with --on-accent | primary button */
--accent-wash: #f5f9c4; /* a soft highlight, 17.6:1 with --fg | selected row, highlighted option, the current answer */
--accent-line: #7c8700; /* olive line step, 3.95:1 on --page and 3.62:1 on --surface | focus ring, outline, icon on white */
--ring: var(--accent-line); /* the focus ring colour | every focus-visible state */
/* == Status: three hues, each with a mark, a tint and a text step == */
--success: #1e8e4a; /* success mark, 4.2:1 on --page | status dot, progress done */
--success-tint: #e5f5ea; /* success wash | success badge, alert */
--success-text: #17703a; /* success text, 6.1:1 on --page and 5.4:1 on --success-tint | success label */
--warn: #c27a00; /* warning mark, 3.5:1 on --page | status dot */
--warn-tint: #fff3d6; /* warning wash | warning badge, alert */
--warn-text: #8a5200; /* warning text, 6.4:1 on --page and 5.8:1 on --warn-tint | warning label */
--danger: #d93636; /* error fill, 4.6:1 with --on-danger | destructive button, invalid ring */
--danger-hover: #c02c2c; /* error fill on hover, 5.8:1 with --on-danger | destructive button */
--danger-tint: #fdebeb; /* error wash | error badge, alert */
--on-danger: #ffffff; /* text on the error fill | destructive button */
--danger-text: #b42323; /* error text, 6.6:1 on --page and 5.7:1 on --danger-tint | error message, error label */
/* == Elevation: a warm ink, low alpha == */
--shadow-ink: 40 36 20; /* the shadow channel | every shadow */
--shadow-card: 0 1px 2px rgb(var(--shadow-ink) / 0.06), 0 1px 1px rgb(var(--shadow-ink) / 0.04); /* a raised card | card with the raised prop */
--shadow-menu: 0 8px 24px -6px rgb(var(--shadow-ink) / 0.16), 0 2px 6px rgb(var(--shadow-ink) / 0.06); /* a menu, popover or select popup | popover, dropdown-menu, select, combobox */
--shadow-overlay: 0 24px 48px -12px rgb(var(--shadow-ink) / 0.24), 0 4px 12px rgb(var(--shadow-ink) / 0.08); /* a dialog or sheet | dialog, alert-dialog, sheet */
--thumb: #ffffff; /* the knob of a switch, white | switch */
--switch-on: var(--accent); /* a switch's track when on | switch */
--switch-on-thumb: var(--thumb); /* a switch's knob when on: white on the lime | switch */
--shadow-thumb: 0 2px 5px rgb(var(--shadow-ink) / 0.1), 0 1px 1px rgb(var(--shadow-ink) / 0.07), 0 0 0 0.5px rgb(var(--shadow-ink) / 0.1); /* the knob's lift, like a phone's switch: a soft drop, a contact shadow and a hairline edge | switch */
/* == Glow: a lit surface == */
--glow-accent-from: #dbec1c; /* top of the lime body, black text 15.1:1 at the darkest stop | primary button, balance chip, featured card */
--glow-accent-to: #f6ff7c; /* bottom of the lime body | primary button, balance chip, featured card */
--glow-accent-edge: rgb(255 255 255 / 0.7); /* the crisp light line on the lower inner edge | glow-accent */
--glow-accent-bloom: rgb(255 255 255 / 0.28); /* the soft inner bloom | glow-accent */
--glow-accent-cast: 112 120 20; /* the olive outer cast, an RGB triplet | glow-accent */
--glow-accent-light: 1; /* strength of the white sheen and bloom on the body | glow-accent */
--glow-accent-from-lit: #e4f42c; /* top of the body when powered on (hover), black text 16.3:1 at the darkest stop | glow-accent */
--glow-accent-to-lit: #faff9c; /* bottom of the body when powered on | glow-accent */
--glow-accent-edge-lit: rgb(255 255 255 / 0.9); /* the lower edge line when powered on | glow-accent */
--glow-accent-bloom-lit: rgb(255 255 255 / 0.4); /* the inner bloom when powered on | glow-accent */
--glow-accent-from-press: #c8d915; /* top of the body while pressed, a darker body, black text 12.4:1 at the darkest stop | glow-accent */
--glow-accent-to-press: #e6f24a; /* bottom of the body while pressed | glow-accent */
--glow-danger-from: #a31f1f; /* top of the red body, white text 6.1:1 at the worst point | destructive button */
--glow-danger-to: #c42b2b; /* bottom of the red body | destructive button */
--glow-danger-edge: rgb(255 255 255 / 0.4); /* the lower edge line | glow-danger */
--glow-danger-bloom: rgb(255 255 255 / 0.16); /* the inner bloom | glow-danger */
--glow-danger-cast: 130 30 30; /* the red outer cast | glow-danger */
--glow-danger-light: 0.4; /* a dimmer sheen, so white text keeps 4.5:1 | glow-danger */
--glow-danger-from-lit: #b02424; /* top when powered on, white text 5.2:1 at the worst point | glow-danger */
--glow-danger-to-lit: #d03333; /* bottom when powered on | glow-danger */
--glow-danger-edge-lit: rgb(255 255 255 / 0.6); /* the lower edge line when powered on | glow-danger */
--glow-danger-bloom-lit: rgb(255 255 255 / 0.24); /* the inner bloom when powered on | glow-danger */
--glow-danger-from-press: #8a1818; /* top while pressed, white text 7.6:1 at the worst point | glow-danger */
--glow-danger-to-press: #a82121; /* bottom while pressed | glow-danger */
--glow-success-from: #136b35; /* top of the green body, white text 5.2:1 at the worst point | glow-success */
--glow-success-to: #1a8445; /* bottom of the green body | glow-success */
--glow-success-edge: rgb(255 255 255 / 0.4); /* the lower edge line | glow-success */
--glow-success-bloom: rgb(255 255 255 / 0.16); /* the inner bloom | glow-success */
--glow-success-cast: 20 100 55; /* the green outer cast | glow-success */
--glow-success-light: 0.4; /* a dimmer sheen, so white text keeps 4.5:1 | glow-success */
--glow-success-fg: #ffffff; /* text on the green body | glow-success */
--glow-success-from-lit: #126f39; /* top when powered on, white text 4.6:1 at the worst point | glow-success */
--glow-success-to-lit: #1a8445; /* bottom when powered on | glow-success */
--glow-success-edge-lit: rgb(255 255 255 / 0.6); /* the lower edge line when powered on | glow-success */
--glow-success-bloom-lit: rgb(255 255 255 / 0.24); /* the inner bloom when powered on | glow-success */
--glow-success-from-press: #0f5a2b; /* top while pressed, white text 6.5:1 at the worst point | glow-success */
--glow-success-to-press: #157038; /* bottom while pressed | glow-success */
/* == Type == */
--font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* every word | all text */
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code and keys only | code, shortcut */
--text-xs: 12px; /* captions, counters | badge, hint */
--text-sm: 14px; /* controls and body | button, input, menu item */
--text-base: 16px; /* prose, large controls | message, large button */
--text-lg: 18px; /* a small heading | card title, empty title */
--text-xl: 22px; /* a section or overlay heading | page section, dialog, alert-dialog and sheet titles */
--text-2xl: 28px; /* a page heading | page title */
--text-3xl: 36px; /* a display figure | account balance */
--leading-tight: 1.2; /* headings | text-lg and up */
--leading-snug: 1.35; /* labels and short copy | button, card */
--leading-normal: 1.5; /* prose | body */
--tracking-tight: -0.01em; /* large headings only; Lime never tracks out | text-xl and up */
--weight-normal: 400; /* body | prose */
--weight-medium: 500; /* controls and labels | button, label */
--weight-semibold: 600; /* headings | titles */
/* == Size: the control height ramp == */
--control-sm: 32px; /* a compact control | sm button, chip, input */
--control-md: 40px; /* the default control | button, input, select */
--control-lg: 48px; /* a primary mobile action | lg button, chat input */
/* == Radius: controls are pills, fields and panels are soft == */
--radius-sm: 6px; /* a tiny inner shape | kbd, checkbox */
--radius-md: 10px; /* a menu item | menu item, tab list inner */
--radius-field: 12px; /* a text field | input, textarea, select trigger */
--radius-panel: 16px; /* a card, popover or dialog | card, popover, dialog, alert */
--radius-sheet: 24px; /* a dialog or sheet | dialog, sheet */
--radius-control: 999px; /* a button, chip, badge, segment | button, chip, badge, segmented */
/* == Motion: short, ease-out, never decorative == */
--dur-instant: 80ms; /* hover and press colour | every control */
--dur-fast: 140ms; /* a small state change | switch, chip, checkbox */
--dur-base: 200ms; /* a popup or tab opening | popover, menu, tooltip */
--dur-slow: 280ms; /* a dialog or sheet moving | dialog, sheet */
--dur-spin: 900ms; /* one turn of the spinner, the only looping motion | spinner */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* the house curve | all transitions */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* an element leaving | closing popups */
--scale-enter: 0.97; /* a popup's starting scale | popover, menu, dialog */
--scale-press: 0.98; /* a control's scale while pressed | button, balance, keypad key */
/* == Layers: what sits above what == */
--z-dialog: 40; /* a dialog or sheet and its scrim | dialog, alert-dialog, sheet */
--z-popover: 50; /* a popup anchored to a control, above the dialog it opens from | popover, menu, select, combobox, tooltip */
--z-toast: 60; /* a toast, above everything else | toast */
/* == Layout == */
--overlay-sm: 384px; /* a small dialog | alert-dialog */
--overlay: 480px; /* the default dialog | dialog */
--overlay-lg: 640px; /* a wide dialog | dialog size lg */
--popover: 320px; /* a popover's width | popover */
--sheet: 400px; /* a side sheet's width, so the page stays in view beside it | sheet */
--popup-max: 320px; /* the tallest a list popup grows before it scrolls | select, combobox, menu */
--focus-offset: 2px; /* the gap between a control and its ring | every focus-visible state */
--line-focus: 2px; /* the ring weight | every focus-visible state */
--scrollbar-thumb: var(--line-strong); /* the scrollbar thumb | scroll-area, native scrollbars */
}
html[data-theme="dark"] {
--page: #0e0e0c;
--surface: #1a1a17;
--surface-2: #262622;
--surface-3: #32322d;
--raised: #1f1f1c;
--field: #1a1a17;
--scrim: rgb(0 0 0 / 0.64);
--fg: #f4f3ee; /* 15.7:1 on --surface */
--fg-2: #c9c7be;
--fg-3: #9a9890; /* 5.3:1 on --surface-2 */
--fg-disabled: #5e5d57;
--fg-inverse: #0f0f0d;
--on-accent: #0f0f0d;
--line: #2e2e29;
--line-strong: #3f3f39;
--control: #8a8880; /* 4.9:1 on --surface */
--ink: #f4f3ee;
--ink-hover: #e1dfd7;
--ink-active: #cfcdc4;
--accent: #cad649; /* the lime a step calmer for a dark page: 12.2:1 on --page, 12.1:1 with --on-accent */
--accent-hover: #d6e262;
--accent-active: #bac534;
--accent-wash: #2b2e0c; /* 12.6:1 with --fg */
--accent-line: #cad649; /* the line step is the mark on dark */
/* A switch's white knob on the lime needs a little more lift on a dark page. */
--shadow-thumb: 0 2px 5px rgb(0 0 0 / 0.22), 0 1px 1px rgb(0 0 0 / 0.16), 0 0 0 0.5px rgb(0 0 0 / 0.2);
--success: #4ade80;
--success-tint: #12281a;
--success-text: #6ee79b;
--warn: #ffb224;
--warn-tint: #2e2209;
--warn-text: #ffc85c;
--danger: #e5484d;
--danger-hover: #d33a3f;
--danger-tint: #2d1415;
--on-danger: #0f0f0d;
--danger-text: #ff8a8a;
--shadow-ink: 0 0 0;
--shadow-card: 0 1px 2px rgb(var(--shadow-ink) / 0.4);
--shadow-menu: 0 8px 24px -6px rgb(var(--shadow-ink) / 0.6), 0 0 0 1px var(--line);
--shadow-overlay: 0 24px 48px -12px rgb(var(--shadow-ink) / 0.7), 0 0 0 1px var(--line);
--glow-accent-cast: 0 0 0;
/* The glow on a dark page: the same calmer lime with ink on it, lit faintly, so it glows from inside instead of
shining a light rim on the page. Black text is 9.8:1 or more at the darkest (pressed) stop. */
--glow-accent-fg: #0f0f0d;
--glow-accent-from: #c2cd3f;
--glow-accent-to: #d1e376;
--glow-accent-from-lit: #c8d447;
--glow-accent-to-lit: #d8e983;
--glow-accent-from-press: #b7c230;
--glow-accent-to-press: #c6d65f;
--glow-accent-light: 0.25;
--glow-accent-edge: rgb(255 255 255 / 0.3);
--glow-accent-bloom: rgb(255 255 255 / 0.12);
--glow-accent-edge-lit: rgb(255 255 255 / 0.45);
--glow-accent-bloom-lit: rgb(255 255 255 / 0.18);
--glow-danger-from: #da474c; /* black text 4.9:1 at the worst point */
--glow-danger-to: #f36a6f;
--glow-danger-edge: rgb(255 255 255 / 0.5);
--glow-danger-bloom: rgb(255 255 255 / 0.2);
--glow-danger-cast: 0 0 0;
--glow-danger-light: 1;
--glow-danger-from-lit: #e45a5f; /* black text 5.9:1 */
--glow-danger-to-lit: #f98285;
--glow-danger-edge-lit: rgb(255 255 255 / 0.75);
--glow-danger-bloom-lit: rgb(255 255 255 / 0.3);
--glow-danger-from-press: #d24449; /* black text 4.6:1 */
--glow-danger-to-press: #ec6368;
--glow-success-from: #27a75d; /* black text 7.0:1 at the worst point */
--glow-success-to: #55d88a;
--glow-success-edge: rgb(255 255 255 / 0.5);
--glow-success-bloom: rgb(255 255 255 / 0.2);
--glow-success-cast: 0 0 0;
--glow-success-light: 1;
--glow-success-fg: #0f0f0d;
--glow-success-from-lit: #32b96b;
--glow-success-to-lit: #68e49b;
--glow-success-edge-lit: rgb(255 255 255 / 0.75);
--glow-success-bloom-lit: rgb(255 255 255 / 0.3);
--glow-success-from-press: #1f8f4d; /* black text 5.3:1 */
--glow-success-to-press: #43bf74;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) { color-scheme: dark;
--page: #0e0e0c;
--surface: #1a1a17;
--surface-2: #262622;
--surface-3: #32322d;
--raised: #1f1f1c;
--field: #1a1a17;
--scrim: rgb(0 0 0 / 0.64);
--fg: #f4f3ee; /* 15.7:1 on --surface */
--fg-2: #c9c7be;
--fg-3: #9a9890; /* 5.3:1 on --surface-2 */
--fg-disabled: #5e5d57;
--fg-inverse: #0f0f0d;
--on-accent: #0f0f0d;
--line: #2e2e29;
--line-strong: #3f3f39;
--control: #8a8880; /* 4.9:1 on --surface */
--ink: #f4f3ee;
--ink-hover: #e1dfd7;
--ink-active: #cfcdc4;
--accent: #cad649; /* the lime a step calmer for a dark page: 12.2:1 on --page, 12.1:1 with --on-accent */
--accent-hover: #d6e262;
--accent-active: #bac534;
--accent-wash: #2b2e0c; /* 12.6:1 with --fg */
--accent-line: #cad649; /* the line step is the mark on dark */
/* A switch's white knob on the lime needs a little more lift on a dark page. */
--shadow-thumb: 0 2px 5px rgb(0 0 0 / 0.22), 0 1px 1px rgb(0 0 0 / 0.16), 0 0 0 0.5px rgb(0 0 0 / 0.2);
--success: #4ade80;
--success-tint: #12281a;
--success-text: #6ee79b;
--warn: #ffb224;
--warn-tint: #2e2209;
--warn-text: #ffc85c;
--danger: #e5484d;
--danger-hover: #d33a3f;
--danger-tint: #2d1415;
--on-danger: #0f0f0d;
--danger-text: #ff8a8a;
--shadow-ink: 0 0 0;
--shadow-card: 0 1px 2px rgb(var(--shadow-ink) / 0.4);
--shadow-menu: 0 8px 24px -6px rgb(var(--shadow-ink) / 0.6), 0 0 0 1px var(--line);
--shadow-overlay: 0 24px 48px -12px rgb(var(--shadow-ink) / 0.7), 0 0 0 1px var(--line);
--glow-accent-cast: 0 0 0;
/* The glow on a dark page: the same calmer lime with ink on it, lit faintly, so it glows from inside instead of
shining a light rim on the page. Black text is 9.8:1 or more at the darkest (pressed) stop. */
--glow-accent-fg: #0f0f0d;
--glow-accent-from: #c2cd3f;
--glow-accent-to: #d1e376;
--glow-accent-from-lit: #c8d447;
--glow-accent-to-lit: #d8e983;
--glow-accent-from-press: #b7c230;
--glow-accent-to-press: #c6d65f;
--glow-accent-light: 0.25;
--glow-accent-edge: rgb(255 255 255 / 0.3);
--glow-accent-bloom: rgb(255 255 255 / 0.12);
--glow-accent-edge-lit: rgb(255 255 255 / 0.45);
--glow-accent-bloom-lit: rgb(255 255 255 / 0.18);
--glow-danger-from: #da474c; /* black text 4.9:1 at the worst point */
--glow-danger-to: #f36a6f;
--glow-danger-edge: rgb(255 255 255 / 0.5);
--glow-danger-bloom: rgb(255 255 255 / 0.2);
--glow-danger-cast: 0 0 0;
--glow-danger-light: 1;
--glow-danger-from-lit: #e45a5f; /* black text 5.9:1 */
--glow-danger-to-lit: #f98285;
--glow-danger-edge-lit: rgb(255 255 255 / 0.75);
--glow-danger-bloom-lit: rgb(255 255 255 / 0.3);
--glow-danger-from-press: #d24449; /* black text 4.6:1 */
--glow-danger-to-press: #ec6368;
--glow-success-from: #27a75d; /* black text 7.0:1 at the worst point */
--glow-success-to: #55d88a;
--glow-success-edge: rgb(255 255 255 / 0.5);
--glow-success-bloom: rgb(255 255 255 / 0.2);
--glow-success-cast: 0 0 0;
--glow-success-light: 1;
--glow-success-fg: #0f0f0d;
--glow-success-from-lit: #32b96b;
--glow-success-to-lit: #68e49b;
--glow-success-edge-lit: rgb(255 255 255 / 0.75);
--glow-success-bloom-lit: rgb(255 255 255 / 0.3);
--glow-success-from-press: #1f8f4d; /* black text 5.3:1 */
--glow-success-to-press: #43bf74;
}
}
@media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --scale-enter: 1; --scale-press: 1; } }
/* ==========================================================================
Elements. No classes: every rule targets plain HTML.
Primary action = a submit button inside a form (the one lime glow per view).
Every other button is a quiet secondary pill.
========================================================================== */
*, ::before, ::after { box-sizing: border-box; }
html {
background: var(--page);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: pretty;
color-scheme: light;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
html[data-theme="dark"] { color-scheme: dark; }
body {
margin: 0 auto;
max-width: 42rem;
padding: 32px 16px 64px;
}
@media (min-width: 640px) { body { padding: 48px 24px 96px; } }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: var(--line-focus) solid var(--ring); outline-offset: var(--focus-offset); }
a, button, summary, input, select, textarea, label {
transition-property: color, background-color, border-color, box-shadow, opacity;
transition-duration: var(--dur-instant);
transition-timing-function: var(--ease-out);
}
/* -- Page shell ---------------------------------------------------------- */
body > header, body > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body > header { margin-bottom: 40px; }
body > footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--text-sm); }
nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
nav a {
display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 12px;
border-radius: var(--radius-control); color: var(--fg-2); font-size: var(--text-sm);
font-weight: var(--weight-medium); text-decoration: none;
}
nav a:hover { background: var(--surface-2); color: var(--fg); }
nav a[aria-current] { background: var(--surface-2); color: var(--fg); }
main { display: flex; flex-direction: column; gap: 32px; }
section { display: flex; flex-direction: column; gap: 12px; }
/* -- Type ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0; font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--fg);
}
h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { font-size: var(--text-base); }
main > * + h2, article > * + h2 { margin-top: 16px; }
p, ul, ol, dl, blockquote, pre, figure, table, details { margin: 0; }
p, li, dd { color: var(--fg-2); }
strong, b { font-weight: var(--weight-semibold); color: var(--fg); }
small { font-size: var(--text-xs); color: var(--fg-3); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: 4px; }
li::marker { color: var(--fg-3); }
dt { font-weight: var(--weight-medium); color: var(--fg); }
dd { margin: 0 0 8px; }
a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-line); }
mark { background: var(--accent-wash); color: var(--fg); padding: 0 2px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; width: 100%; }
abbr[title] { text-decoration: underline dotted var(--fg-3); }
blockquote { padding: 4px 0 4px 16px; border-left: 2px solid var(--accent-line); color: var(--fg-2); }
blockquote cite { display: block; margin-top: 8px; font-size: var(--text-sm); font-style: normal; color: var(--fg-3); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }
code { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg); }
kbd {
padding: 1px 6px; border-radius: var(--radius-sm); background: var(--raised);
border: 1px solid var(--line-strong); box-shadow: inset 0 -1px 0 var(--line-strong); color: var(--fg);
}
pre { padding: 16px; border-radius: var(--radius-panel); background: var(--surface); overflow-x: auto; line-height: var(--leading-snug); }
pre code { padding: 0; background: none; }
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
figure img { border-radius: var(--radius-panel); }
figcaption { margin-top: 8px; font-size: var(--text-sm); color: var(--fg-3); }
/* -- Panels -------------------------------------------------------------- */
article, aside, details, dialog, fieldset {
border-radius: var(--radius-panel);
}
article { padding: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
article article { background: var(--page); }
article > header, article > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
article > footer { margin-top: 8px; }
aside { padding: 16px 20px; background: var(--accent-wash); color: var(--fg); }
aside p { color: var(--fg); }
details { background: var(--surface); }
summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 48px; padding: 0 20px; cursor: pointer; list-style: none;
font-weight: var(--weight-medium); border-radius: var(--radius-panel);
}
summary::-webkit-details-marker { display: none; }
summary::after {
content: ""; width: 8px; height: 8px; flex: none; margin-top: -4px;
border: solid var(--fg-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
transition: transform var(--dur-fast) var(--ease-out);
}
details[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
summary:hover { background: var(--surface-2); }
details > :not(summary) { padding: 0 20px; }
details > :last-child:not(summary) { padding-bottom: 16px; }
dialog {
width: min(var(--overlay), calc(100% - 32px)); padding: 24px; border: 0;
border-radius: var(--radius-sheet); background: var(--raised); color: var(--fg);
box-shadow: var(--shadow-overlay);
}
dialog::backdrop { background: var(--scrim); }
dialog[open] { animation: lime-enter var(--dur-slow) var(--ease-out); }
@keyframes lime-enter { from { opacity: 0; transform: scale(var(--scale-enter)); } }
/* -- Tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
caption { text-align: left; padding-bottom: 8px; color: var(--fg-3); }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--surface); color: var(--fg-2); font-weight: var(--weight-medium); }
thead th:first-child { border-top-left-radius: var(--radius-md); }
thead th:last-child { border-top-right-radius: var(--radius-md); }
thead th { border-bottom: 0; }
td { color: var(--fg); }
tbody tr:hover td { background: var(--surface); }
/* -- Buttons ------------------------------------------------------------- */
button, input[type="button"], input[type="reset"], input[type="submit"], ::file-selector-button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--control-md); padding: 0 18px; border: 0;
border-radius: var(--radius-control); background: var(--surface-2); color: var(--fg);
font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1;
white-space: nowrap; cursor: pointer;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover { background: var(--surface-3); }
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { transform: scale(var(--scale-press)); }
button:disabled, input:is([type="button"], [type="reset"], [type="submit"]):disabled {
background: var(--surface-2); background-image: none; box-shadow: none; color: var(--fg-disabled); cursor: not-allowed; transform: none;
}
/* The one lime action: a form's submit. Glow body lifted straight from Lime's .glow-accent. */
form button:not([type="button"], [type="reset"]), input[type="submit"] {
--glow-light: var(--glow-accent-light);
position: relative; isolation: isolate; overflow: hidden;
color: var(--glow-accent-fg);
background-image:
linear-gradient(180deg, rgb(255 255 255 / calc(0.3 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 45%),
radial-gradient(110% 90% at 22% 0%, rgb(255 255 255 / calc(0.24 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 60%),
radial-gradient(70% 60% at 50% 115%, rgb(255 255 255 / calc(0.32 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 70%),
linear-gradient(0deg, rgb(0 0 0 / 0.05) 0%, rgb(0 0 0 / 0) 18%),
linear-gradient(180deg, var(--glow-accent-from) 0%, var(--glow-accent-to) 100%);
box-shadow:
inset 0 1px 0 0 rgb(255 255 255 / calc(0.75 * var(--glow-light))),
inset 0 -1.5px 2px 0 var(--glow-accent-edge),
inset 0 0 0 1px rgb(255 255 255 / calc(0.2 * var(--glow-light))),
inset 0 0 12px 0 var(--glow-accent-bloom),
0 0 0 1px rgb(var(--glow-accent-cast) / 0.22);
}
form button:not([type="button"], [type="reset"]):hover, input[type="submit"]:hover {
background-image:
linear-gradient(180deg, rgb(255 255 255 / calc(0.38 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 48%),
radial-gradient(110% 95% at 22% 0%, rgb(255 255 255 / calc(0.3 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 62%),
radial-gradient(75% 65% at 50% 115%, rgb(255 255 255 / calc(0.42 * var(--glow-light))) 0%, rgb(255 255 255 / 0) 72%),
linear-gradient(180deg, var(--glow-accent-from-lit) 9%, var(--glow-accent-to-lit) 100%);
}
form button:not([type="button"], [type="reset"]):active, input[type="submit"]:active {
background-image: linear-gradient(180deg, var(--glow-accent-from-press) 0%, var(--glow-accent-to-press) 100%);
}
/* A plain button inside