/* ============================================================================
   CETREAL · chrome tokens
   One design system for the website and every demo, always in the CETREAL brand palette (brand manual,
   lib/styles/brand.dart): Brand Blue #2E5BFF (primary, the CET mark) · Blue dark #1E3FCC · Blue light #6B8AFF ·
   Black #0A0A0A · White #FFFFFF · Cream #F5F1EB / #E8E4DE · Gray #6B7280 / #A8AFBA · Accent Teal #00D4AA (active & focus).
     · data-look    (set by /world/look.js, a new one every day): typography, shape, light or dark, hero and details —
                    never new hues.
     · data-palette="brand" (set on each demo's <html>): the light brand surfaces for the tools, whatever the look.
   Tokens: --c-* colours, --f-* fonts, --s-* shape. --c-hi is the highlight used for text and glowing lines (Brand Blue
   on light, Blue light or Teal on dark). The demos' own variables (--blue, --cream, --black, --gray, --teal, --accent…)
   are remapped onto the palette at the end of this block, so their inline styles follow it too.
   Also here: the shared sign-in gate, account chip, profile sheet and toast (all prefixed .cx-).
   ========================================================================== */

:root {
  --b-blue: #2E5BFF; --b-blue-dark: #1E3FCC; --b-blue-light: #6B8AFF; --b-black: #0A0A0A; --b-white: #FFFFFF;
  --b-cream: #F5F1EB; --b-cream-dark: #E8E4DE; --b-gray: #6B7280; --b-gray-light: #A8AFBA; --b-teal: #00D4AA;
  --c-bg: var(--b-cream); --c-bg2: var(--b-cream-dark); --c-surface: var(--b-white); --c-surface2: var(--b-cream); --c-glass: rgba(255, 255, 255, .8);
  --c-ink: var(--b-black); --c-ink2: rgba(10, 10, 10, .78); --c-ink3: var(--b-gray); --c-line: rgba(10, 10, 10, .12); --c-line2: rgba(10, 10, 10, .06);
  --c-accent: var(--b-blue); --c-accent2: var(--b-teal); --c-on-accent: var(--b-white); --c-glow: var(--b-blue); --c-hi: var(--b-blue);
  --c-ok: #00A884; --c-warn: #E0A800; --c-danger: #E23B3B;
  --f-display: 'Manrope', system-ui, sans-serif; --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; --f-brand: 'Orbitron', 'Manrope', sans-serif;
  --s-r: 18px; --s-r-sm: 12px; --s-pill: 999px; --s-bw: 1px;
  --s-shadow: 0 2px 10px rgba(10, 10, 10, .06), 0 18px 40px -18px rgba(10, 10, 10, .22);
  --s-shadow-sm: 0 1px 3px rgba(10, 10, 10, .08);
  --s-blur: saturate(170%) blur(16px);
  --s-ease: cubic-bezier(.16, 1, .3, 1);
  --s-display-case: none; --s-display-track: -0.02em; --s-display-weight: 700;
}
/* the dark side of the palette: black, pure white type (REAL is pure white on dark), Blue light highlights */
:root[data-scheme="dark"] {
  color-scheme: dark;
  --c-bg: var(--b-black); --c-bg2: #111111; --c-surface: #141414; --c-surface2: #1B1B1B; --c-glass: rgba(20, 20, 20, .62);
  --c-ink: var(--b-white); --c-ink2: var(--b-gray-light); --c-ink3: var(--b-gray); --c-line: rgba(255, 255, 255, .13); --c-line2: rgba(255, 255, 255, .06);
  --c-glow: var(--b-blue); --c-hi: var(--b-blue-light);
  --s-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 26px 60px -26px rgba(0, 0, 0, .9);
  --s-shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
}
:root[data-scheme="light"] { color-scheme: light; }

/* ------------------------------------------------------------------ looks (type · shape · details) */
/* 1 · Aurora — dark; a Blue/Blue-light/Teal nebula, wide display type, frosted glass */
:root[data-look="aurora"] {
  --f-display: 'Unbounded', 'Manrope', sans-serif; --f-body: 'Manrope', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --s-r: 22px; --s-r-sm: 14px; --s-pill: 999px; --s-bw: 1px; --s-display-weight: 600; --s-display-track: -0.03em;
  --s-blur: saturate(160%) blur(18px);
}
/* 2 · Blueprint — cream drafting paper, black ink, Brand Blue dimensions, condensed caps, squared corners */
:root[data-look="blueprint"] {
  --f-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif; --f-body: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --s-r: 6px; --s-r-sm: 4px; --s-pill: 6px; --s-bw: 1px; --s-display-weight: 700; --s-display-track: -0.01em; --s-display-case: uppercase;
  --s-shadow: 0 1px 0 rgba(10, 10, 10, .08), 0 14px 30px -20px rgba(10, 10, 10, .3);
  --s-shadow-sm: 0 1px 0 rgba(10, 10, 10, .1);
}
/* 3 · Terminal — dark console, all monospace; the Teal accent is the phosphor */
:root[data-look="terminal"] {
  --c-hi: var(--b-teal); --c-glow: var(--b-teal);
  --f-display: 'Martian Mono', 'JetBrains Mono', monospace; --f-body: 'JetBrains Mono', ui-monospace, monospace; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --s-r: 4px; --s-r-sm: 3px; --s-pill: 4px; --s-bw: 1px; --s-display-weight: 700; --s-display-track: -0.04em;
}
/* 4 · Swiss Lab — cream, black rules, heavy grotesk, Brand Blue blocks (like the CET mark), hard offset shadows */
:root[data-look="swiss"] {
  --c-surface2: #FAF8F5; --c-glass: rgba(255, 255, 255, .95); --c-line: var(--b-black); --c-line2: rgba(10, 10, 10, .14);
  --f-display: 'Archivo Black', 'Archivo', sans-serif; --f-body: 'Archivo', system-ui, sans-serif; --f-mono: 'DM Mono', ui-monospace, monospace;
  --s-r: 0px; --s-r-sm: 0px; --s-pill: 0px; --s-bw: 2px; --s-display-weight: 400; --s-display-track: -0.035em;
  --s-shadow: 6px 6px 0 var(--b-black); --s-shadow-sm: 3px 3px 0 var(--b-black);
  --s-blur: none;
}
/* 5 · Cinema — dark theatre, film grain, serif headlines, our projects on a curved screen */
:root[data-look="cinema"] {
  --f-display: 'Fraunces', Georgia, serif; --f-body: 'Manrope', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --s-r: 14px; --s-r-sm: 10px; --s-pill: 999px; --s-bw: 1px; --s-display-weight: 500; --s-display-track: -0.025em;
}
/* 6 · Holo — cream light, a pearl blob with Blue/Teal iridescence, rounded glass, playful grotesk */
:root[data-look="holo"] {
  --c-glass: rgba(255, 255, 255, .6); --c-glow: var(--b-blue-light);
  --f-display: 'Syne', 'DM Sans', sans-serif; --f-body: 'DM Sans', system-ui, sans-serif; --f-mono: 'DM Mono', ui-monospace, monospace;
  --s-r: 28px; --s-r-sm: 18px; --s-pill: 999px; --s-bw: 1px; --s-display-weight: 800; --s-display-track: -0.035em;
  --s-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 60px -28px rgba(46, 91, 255, .4);
  --s-shadow-sm: 0 1px 3px rgba(46, 91, 255, .14);
  --s-blur: saturate(180%) blur(22px);
}
/* 7 · Páramo — dark night over the páramo ridges, serif italics, Teal light (a nod to Paramoverso) */
:root[data-look="paramo"] {
  --c-hi: var(--b-teal); --c-glow: var(--b-teal);
  --f-display: 'Instrument Serif', Georgia, serif; --f-body: 'Manrope', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --s-r: 24px; --s-r-sm: 14px; --s-pill: 999px; --s-bw: 1px; --s-display-weight: 400; --s-display-track: -0.02em;
}

/* --------------------------------------------------------------- the tools */
/* Every demo sets data-palette="brand": light brand surfaces (cream, white, black type, Brand Blue, Teal) under its
   own 3D world, whatever the look of the day; type and shape still follow the look. */
:root[data-palette] {
  color-scheme: light;
  --c-bg: var(--b-cream); --c-bg2: var(--b-cream-dark); --c-surface: var(--b-white); --c-surface2: var(--b-cream); --c-glass: rgba(255, 255, 255, .86);
  --c-ink: var(--b-black); --c-ink2: rgba(10, 10, 10, .78); --c-ink3: var(--b-gray); --c-line: rgba(10, 10, 10, .13); --c-line2: rgba(10, 10, 10, .07);
  --c-accent: var(--b-blue); --c-accent2: var(--b-teal); --c-on-accent: var(--b-white); --c-glow: var(--b-blue); --c-hi: var(--b-blue);
  --s-shadow: 0 2px 10px rgba(10, 10, 10, .06), 0 18px 40px -18px rgba(10, 10, 10, .22);
  --s-shadow-sm: 0 1px 3px rgba(10, 10, 10, .08);
}
:root[data-palette][data-look="swiss"] { --c-line: var(--b-black); --s-shadow: 6px 6px 0 var(--b-black); --s-shadow-sm: 3px 3px 0 var(--b-black); }

/* the demos' own variables follow the palette (their inline :root rules are less specific) */
:root[data-palette] {
  --blue: var(--b-blue); --blue-dark: var(--b-blue-dark); --blue-light: var(--b-blue-light);
  --black: var(--b-black); --white: var(--b-white); --cream: var(--b-cream); --cream-dark: var(--b-cream-dark);
  --gray: var(--b-gray); --teal: var(--b-teal); --accent: var(--b-teal); --list: var(--b-cream-dark);
}
/* the demos' type follows the look of the day */
:root[data-palette] body { font-family: var(--f-body); }

/* ------------------------------------------------------------ sign-in gate */
.cx-gate {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--c-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  animation: cx-fade .35s var(--s-ease);
  font-family: var(--f-body); color: var(--c-ink);
}
.cx-gate[hidden] { display: none !important; }
.cx-card {
  width: 100%; max-width: 420px; background: var(--c-surface); color: var(--c-ink);
  border: var(--s-bw) solid var(--c-line); border-radius: calc(var(--s-r) + 4px); box-shadow: var(--s-shadow);
  padding: 26px 24px 20px; position: relative; overflow: hidden;
  animation: cx-rise .5s var(--s-ease);
}
.cx-card::before {
  content: ''; position: absolute; inset: -40% -30% auto auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-glow) 30%, transparent), transparent 70%); pointer-events: none;
}
:root[data-look="swiss"] .cx-card::before, :root[data-look="blueprint"] .cx-card::before { display: none; }
.cx-app { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; }
.cx-mark { display: inline-flex; gap: 3px; align-items: center; font-family: var(--f-brand); font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.cx-mark .c { background: var(--b-blue); color: var(--b-white); padding: 3px 6px; border-radius: 4px; }
.cx-mark .r { color: var(--c-ink); }
.cx-app__name { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink3); }
.cx-title { font-family: var(--f-display); font-weight: var(--s-display-weight); letter-spacing: var(--s-display-track); text-transform: var(--s-display-case); font-size: 26px; line-height: 1.1; margin: 0 0 6px; position: relative; }
.cx-sub { font-size: 13.5px; line-height: 1.5; color: var(--c-ink3); margin: 0 0 18px; position: relative; }
.cx-btn {
  width: 100%; min-height: 44px; border-radius: var(--s-pill); border: var(--s-bw) solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink); font: 600 14px/1 var(--f-body); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  transition: transform .12s var(--s-ease), background .16s, border-color .16s, box-shadow .16s;
  -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.cx-btn:hover { border-color: color-mix(in srgb, var(--c-ink) 35%, transparent); }
.cx-btn:active { transform: translateY(1px); }
.cx-btn:disabled { opacity: .5; cursor: default; }
.cx-btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--c-accent) 80%, transparent); }
.cx-btn.primary:hover { filter: brightness(1.06); }
.cx-btn.ghost { background: transparent; }
.cx-btn.sm { min-height: 34px; font-size: 12.5px; width: auto; padding: 0 12px; gap: 6px; }
:root[data-look="swiss"] .cx-btn { box-shadow: var(--s-shadow-sm); }
:root[data-look="swiss"] .cx-btn.primary { box-shadow: var(--s-shadow-sm); }
.cx-btn svg { width: 18px; height: 18px; flex: none; }
.cx-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--c-ink3); font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.cx-or::before, .cx-or::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.cx-field { display: block; width: 100%; margin: 0 0 9px; }
.cx-field input {
  width: 100%; min-height: 44px; border-radius: var(--s-r-sm); border: var(--s-bw) solid var(--c-line); background: var(--c-surface2);
  color: var(--c-ink); font: 14px var(--f-body); padding: 0 14px; box-sizing: border-box; outline: none; box-shadow: none;
}
.cx-field input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); }
.cx-links { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 2px; font-size: 12.5px; }
.cx-links a { color: var(--c-accent); cursor: pointer; text-decoration: none; }
.cx-links a:hover { text-decoration: underline; }
.cx-msg { font-size: 12.5px; line-height: 1.45; margin: 10px 0 0; padding: 9px 11px; border-radius: var(--s-r-sm); background: color-mix(in srgb, var(--c-danger) 10%, transparent); color: color-mix(in srgb, var(--c-danger) 80%, var(--c-ink)); }
.cx-msg.ok { background: color-mix(in srgb, var(--c-ok) 12%, transparent); color: color-mix(in srgb, var(--c-ok) 70%, var(--c-ink)); }
.cx-msg[hidden] { display: none; }
.cx-foot { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--c-ink3); text-align: center; }
.cx-foot a { color: inherit; }
.cx-lang { position: absolute; top: 14px; right: 14px; z-index: 1; }
.cx-lang select { min-height: 30px; font-size: 12px; border-radius: var(--s-pill); border: var(--s-bw) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); padding: 0 26px 0 10px; }

/* ---------------------------------------------------------- account chip */
.cx-me { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 3px 12px 3px 3px; border-radius: var(--s-pill); border: var(--s-bw) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); cursor: pointer; font: 600 12.5px var(--f-body); box-shadow: var(--s-shadow-sm); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.cx-me:hover { border-color: color-mix(in srgb, var(--c-ink) 32%, transparent); }
.cx-me.icon { padding: 3px; }
.cx-me .cx-me__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.cx-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 11px var(--f-body); overflow: hidden; flex: none; background: var(--c-accent); }
.cx-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-av.lg { width: 64px; height: 64px; font-size: 22px; }
.cx-av.guest { background: color-mix(in srgb, var(--c-ink) 55%, transparent); }

/* -------------------------------------------------------- profile sheet */
.cx-sheet { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000 42%, transparent); animation: cx-fade .25s var(--s-ease); font-family: var(--f-body); }
.cx-sheet[hidden] { display: none !important; }
.cx-sheet .cx-card { max-width: 440px; }
.cx-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: var(--s-bw) solid var(--c-line); background: var(--c-surface); color: var(--c-ink); cursor: pointer; font-size: 15px; display: grid; place-items: center; z-index: 1; }
.cx-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-label { font: 600 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink3); margin: 16px 0 7px; }
.cx-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.cx-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cx-swatches button.on { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-surface) inset; }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--f-body); padding: 6px 10px; border-radius: var(--s-pill); border: var(--s-bw) solid var(--c-line); background: var(--c-surface2); color: var(--c-ink2); }
.cx-chip.on { border-color: color-mix(in srgb, var(--c-ok) 60%, transparent); color: color-mix(in srgb, var(--c-ok) 70%, var(--c-ink)); }

/* ------------------------------------------------------------------ toast */
.cx-toast { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-8px); z-index: 9200; background: var(--c-ink); color: var(--c-bg); font: 500 13px var(--f-body); padding: 10px 16px; border-radius: var(--s-pill); box-shadow: var(--s-shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--s-ease); max-width: 90vw; text-align: center; }
.cx-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .cx-gate, .cx-card, .cx-sheet { animation: none; } }