html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
/* hand-surreal fonts — sourced from Google Fonts.
   NOTE: Google-hosted webfonts, not bundled binaries. Requires network.
   Display  = Syne (sharp, angular display — techno/experimental)
   UI/Body  = Space Grotesk (quirky geometric grotesque)
   Mono/LCD = Space Mono (fixed-width data + digital readouts) */
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a9.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a12.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* hand-surreal — COLOR TOKENS  (DARK / PSYCHEDELIC)
   Concept: "luminous ink on black stock." The paper is now near-black,
   violet-tinted; the ink is a bright luminous pigment; accents are neon.
   Token NAMES are kept stable across themes:
     --paper-*  = the (dark) stock / surfaces
     --ink-*    = the (light) pigment / lines & text
     accents    = neon (cobalt→violet, lime→acid, pink→magenta, sun→amber, …) */
:root {
  /* ---- Ink (luminous pigment — lines, text) ---- */
  --ink-900: #f4f0ff;
  --ink-800: #e6dffb;
  --ink-700: #c8bfe9;
  --ink-500: #9086b0;
  --ink-400: #736a92;
  --ink-300: #544c70;

  /* ---- Paper (black stock — surfaces). Not strictly light→dark ordered;
          roles: 100 = page, 000 = card surface, 200 = raised inset ---- */
  --paper-000: #181327;  /* card / input surface */
  --paper-100: #0d0a16;  /* page background */
  --paper-200: #241d3c;  /* inset / track / raised chip */
  --paper-300: #322850;  /* muted bars */
  --paper-400: #443970;  /* soft border */

  /* ---- Accents (neon) — names stable, values re-tuned ---- */
  --cobalt: #7a46ff;       /* primary — electric violet */
  --cobalt-deep: #5e2fe0;
  --lime: #b4f221;         /* go / perform — acid */
  --lime-deep: #8fcc00;
  --pink: #ff2e88;         /* active / love — magenta */
  --pink-deep: #e00f6c;
  --sun: #ff9e1f;          /* warn / highlight — amber */
  --sun-deep: #e07e00;
  --cyan: #1fe0da;
  --lilac: #b45cff;        /* grape */
  --coral: #ff4d2e;

  /* ---- Support ---- */
  --grass: #35d07a;        /* success (neon) */
  --white: #ffffff;
  --void: #05040a;         /* deepest stage / transport */

  /* =====================================================
     SEMANTIC ALIASES — reach for these in product code
     ===================================================== */
  --bg-page: var(--paper-100);
  --bg-surface: var(--paper-000);
  --bg-inset: var(--paper-200);
  --bg-ink: var(--void);
  --bg-overlay: rgba(6, 4, 12, 0.72);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-ink: var(--ink-900);       /* text on the deep stage */
  --text-on-accent: #0b0812;           /* dark text on neon fills */
  --on-accent: #0b0812;

  --border-ink: var(--ink-900);        /* luminous line on dark surfaces */
  --edge-dark: #0b0812;                /* dark line on neon fills */
  --border-soft: var(--paper-400);

  --accent-primary: var(--cobalt);
  --accent-primary-press: var(--cobalt-deep);
  --accent-play: var(--lime);
  --accent-hot: var(--pink);
  --accent-warn: var(--sun);

  --success: var(--grass);
  --danger: var(--coral);
  --info: var(--cobalt);

  /* selection */
  --selection-bg: var(--pink);
  --selection-fg: #0b0812;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }
/* hand-surreal — TYPOGRAPHY TOKENS */
:root {
  /* families */
  --font-display: "Syne", "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type scale (px) — generous, poster-ish display sizes */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;

  /* weights */
  --w-light: 300;   /* @kind other */
  --w-regular: 400; /* @kind other */
  --w-medium: 500;  /* @kind other */
  --w-bold: 700;    /* @kind other */
  --w-black: 800;   /* @kind other */

  /* line heights */
  --lh-tight: 1.02;  /* @kind other */
  --lh-snug: 1.18;   /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-loose: 1.65;  /* @kind other */

  /* tracking */
  --track-tight: -0.02em; /* @kind other */
  --track-normal: 0em;    /* @kind other */
  --track-wide: 0.06em;   /* @kind other */
  --track-caps: 0.14em;   /* @kind other */
}

/* Convenience utility classes (optional, tokens preferred) */
.hs-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
}
.hs-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hs-lcd {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
}
/* hand-surreal — SPACING & SIZING TOKENS (4px base grid) */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* touch / control sizing */
  --control-h-sm: 34px;
  --control-h-md: 44px;   /* min hit target */
  --control-h-lg: 56px;

  /* content widths */
  --width-prose: 62ch;
  --width-app: 1120px;
}
/* hand-surreal — EFFECTS: borders, radii, neon hard-offset shadows, textures (DARK) */
:root {
  /* corner radii — chunky, hand-cut */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ink borders — luminous outline on dark surfaces */
  --border-w: 2.5px;      /* @kind other */
  --border-w-bold: 3.5px; /* @kind other */
  --border-ink-line: var(--border-w) solid var(--ink-900);
  --border-ink-bold: var(--border-w-bold) solid var(--ink-900);

  /* hard offset drop shadows — now NEON so they read on black (the sticker glow) */
  --shadow-hard-xs: 2px 2px 0 var(--cobalt);
  --shadow-hard-sm: 3px 3px 0 var(--cobalt);
  --shadow-hard: 5px 5px 0 var(--cobalt);
  --shadow-hard-lg: 8px 8px 0 var(--cobalt);

  /* colored variants for playful stacking */
  --shadow-hard-pink: 5px 5px 0 var(--pink);
  --shadow-hard-cobalt: 5px 5px 0 var(--cyan);

  /* soft ambient neon bloom — for floating sheets over the void */
  --shadow-soft: 0 14px 44px rgba(122, 70, 255, 0.4);

  /* focus ring */
  --focus-ring: 0 0 0 3px var(--paper-100), 0 0 0 6px var(--cobalt);

  /* motion — snappy with a touch of bounce */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur: 180ms;      /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* violet dot-grid texture on the black stock */
  --dot-color: rgba(180, 150, 255, 0.14);
  --texture-dots:
    radial-gradient(var(--dot-color) 1.4px, transparent 1.5px);
  --texture-dots-size: 18px 18px;
}

/* Reusable helpers */
.hs-paper {
  background-color: var(--paper-100);
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
}
.hs-sticker {
  border: var(--border-ink-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  background: var(--bg-surface);
}
/* hand-surreal design system — global entry point.
   Consumers link THIS file. Import order matters: fonts, then tokens. */
/* hand-surreal fonts — sourced from Google Fonts.
   NOTE: Google-hosted webfonts, not bundled binaries. Requires network.
   Display  = Syne (sharp, angular display — techno/experimental)
   UI/Body  = Space Grotesk (quirky geometric grotesque)
   Mono/LCD = Space Mono (fixed-width data + digital readouts) */
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/a2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a9.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a12.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a15.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/a17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* hand-surreal — COLOR TOKENS  (DARK / PSYCHEDELIC)
   Concept: "luminous ink on black stock." The paper is now near-black,
   violet-tinted; the ink is a bright luminous pigment; accents are neon.
   Token NAMES are kept stable across themes:
     --paper-*  = the (dark) stock / surfaces
     --ink-*    = the (light) pigment / lines & text
     accents    = neon (cobalt→violet, lime→acid, pink→magenta, sun→amber, …) */
:root {
  /* ---- Ink (luminous pigment — lines, text) ---- */
  --ink-900: #f4f0ff;
  --ink-800: #e6dffb;
  --ink-700: #c8bfe9;
  --ink-500: #9086b0;
  --ink-400: #736a92;
  --ink-300: #544c70;

  /* ---- Paper (black stock — surfaces). Not strictly light→dark ordered;
          roles: 100 = page, 000 = card surface, 200 = raised inset ---- */
  --paper-000: #181327;  /* card / input surface */
  --paper-100: #0d0a16;  /* page background */
  --paper-200: #241d3c;  /* inset / track / raised chip */
  --paper-300: #322850;  /* muted bars */
  --paper-400: #443970;  /* soft border */

  /* ---- Accents (neon) — names stable, values re-tuned ---- */
  --cobalt: #7a46ff;       /* primary — electric violet */
  --cobalt-deep: #5e2fe0;
  --lime: #b4f221;         /* go / perform — acid */
  --lime-deep: #8fcc00;
  --pink: #ff2e88;         /* active / love — magenta */
  --pink-deep: #e00f6c;
  --sun: #ff9e1f;          /* warn / highlight — amber */
  --sun-deep: #e07e00;
  --cyan: #1fe0da;
  --lilac: #b45cff;        /* grape */
  --coral: #ff4d2e;

  /* ---- Support ---- */
  --grass: #35d07a;        /* success (neon) */
  --white: #ffffff;
  --void: #05040a;         /* deepest stage / transport */

  /* =====================================================
     SEMANTIC ALIASES — reach for these in product code
     ===================================================== */
  --bg-page: var(--paper-100);
  --bg-surface: var(--paper-000);
  --bg-inset: var(--paper-200);
  --bg-ink: var(--void);
  --bg-overlay: rgba(6, 4, 12, 0.72);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-ink: var(--ink-900);       /* text on the deep stage */
  --text-on-accent: #0b0812;           /* dark text on neon fills */
  --on-accent: #0b0812;

  --border-ink: var(--ink-900);        /* luminous line on dark surfaces */
  --edge-dark: #0b0812;                /* dark line on neon fills */
  --border-soft: var(--paper-400);

  --accent-primary: var(--cobalt);
  --accent-primary-press: var(--cobalt-deep);
  --accent-play: var(--lime);
  --accent-hot: var(--pink);
  --accent-warn: var(--sun);

  --success: var(--grass);
  --danger: var(--coral);
  --info: var(--cobalt);

  /* selection */
  --selection-bg: var(--pink);
  --selection-fg: #0b0812;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* hand-surreal — TYPOGRAPHY TOKENS */
:root {
  /* families */
  --font-display: "Syne", "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type scale (px) — generous, poster-ish display sizes */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;

  /* weights */
  --w-light: 300;   /* @kind other */
  --w-regular: 400; /* @kind other */
  --w-medium: 500;  /* @kind other */
  --w-bold: 700;    /* @kind other */
  --w-black: 800;   /* @kind other */

  /* line heights */
  --lh-tight: 1.02;  /* @kind other */
  --lh-snug: 1.18;   /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-loose: 1.65;  /* @kind other */

  /* tracking */
  --track-tight: -0.02em; /* @kind other */
  --track-normal: 0em;    /* @kind other */
  --track-wide: 0.06em;   /* @kind other */
  --track-caps: 0.14em;   /* @kind other */
}

/* Convenience utility classes (optional, tokens preferred) */
.hs-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
}
.hs-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hs-lcd {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
}

/* hand-surreal — SPACING & SIZING TOKENS (4px base grid) */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* touch / control sizing */
  --control-h-sm: 34px;
  --control-h-md: 44px;   /* min hit target */
  --control-h-lg: 56px;

  /* content widths */
  --width-prose: 62ch;
  --width-app: 1120px;
}

/* hand-surreal — EFFECTS: borders, radii, neon hard-offset shadows, textures (DARK) */
:root {
  /* corner radii — chunky, hand-cut */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ink borders — luminous outline on dark surfaces */
  --border-w: 2.5px;      /* @kind other */
  --border-w-bold: 3.5px; /* @kind other */
  --border-ink-line: var(--border-w) solid var(--ink-900);
  --border-ink-bold: var(--border-w-bold) solid var(--ink-900);

  /* hard offset drop shadows — now NEON so they read on black (the sticker glow) */
  --shadow-hard-xs: 2px 2px 0 var(--cobalt);
  --shadow-hard-sm: 3px 3px 0 var(--cobalt);
  --shadow-hard: 5px 5px 0 var(--cobalt);
  --shadow-hard-lg: 8px 8px 0 var(--cobalt);

  /* colored variants for playful stacking */
  --shadow-hard-pink: 5px 5px 0 var(--pink);
  --shadow-hard-cobalt: 5px 5px 0 var(--cyan);

  /* soft ambient neon bloom — for floating sheets over the void */
  --shadow-soft: 0 14px 44px rgba(122, 70, 255, 0.4);

  /* focus ring */
  --focus-ring: 0 0 0 3px var(--paper-100), 0 0 0 6px var(--cobalt);

  /* motion — snappy with a touch of bounce */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur: 180ms;      /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* violet dot-grid texture on the black stock */
  --dot-color: rgba(180, 150, 255, 0.14);
  --texture-dots:
    radial-gradient(var(--dot-color) 1.4px, transparent 1.5px);
  --texture-dots-size: 18px 18px;
}

/* Reusable helpers */
.hs-paper {
  background-color: var(--paper-100);
  background-image: var(--texture-dots);
  background-size: var(--texture-dots-size);
}
.hs-sticker {
  border: var(--border-ink-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  background: var(--bg-surface);
}
/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a18.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a19.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/a20.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body { margin: 0; padding: 0; }
  body {
    background-color: var(--paper-100);
    background-image: var(--texture-dots);
    background-size: var(--texture-dots-size);
    color: var(--ink-800);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  a:hover { color: var(--lime); }

/* guest chips — hoisted off the markup, see index.html */
.guest-chip{display: inline-flex; align-items: center; height: 38px; padding: 0px 16px; background: var(--paper-200); color: var(--ink-900); border: 2px solid var(--ink-900); border-radius: var(--radius-pill); font-size: 16px; font-weight: 600;}