/* Price Roll — step 4: the plans: the colours glide, the name rolls, the card grows.

   ---- 1. TOKENS: three layers (plus a component layer). One look for now (synth); step 6 adds two more ----
   1a PRIMITIVES (:root). Raw, hand-tuned values with no meaning: the synth night (--sy-*), the sunset (--sun-*) and
      one tonal scale 50…950 per tier hue: cyan (--syc), pink (--syp), orange (--syo).
   1b TIER ALIASES ([data-look] .stage[data-tier]). --t-50 … --t-950 point at the tier's scale. Change data-tier and
      every colour on the card follows (step 4 does that, and makes it glide).
   1c SEMANTIC TOKENS (on .stage): what each colour is for: the field, the card, the price, the slider, the controls.
   1d COMPONENT TOKENS: each component maps the semantic tokens it uses to its own names (.card { --card-ink … }).
   Component rules use only component or semantic tokens. The exceptions are transparency helpers:
   color-mix(… N%, transparent) and the `transparent` keyword. */

@property --t-50  { syntax: '<color>'; inherits: true; initial-value: #EEFCFF; }
@property --t-100 { syntax: '<color>'; inherits: true; initial-value: #D8F7FF; }
@property --t-200 { syntax: '<color>'; inherits: true; initial-value: #A8EEFF; }
@property --t-300 { syntax: '<color>'; inherits: true; initial-value: #6FE2FF; }
@property --t-400 { syntax: '<color>'; inherits: true; initial-value: #3FD3FA; }
@property --t-500 { syntax: '<color>'; inherits: true; initial-value: #18B8E6; }
@property --t-600 { syntax: '<color>'; inherits: true; initial-value: #0E8FBA; }
@property --t-700 { syntax: '<color>'; inherits: true; initial-value: #0A6A8C; }
@property --t-800 { syntax: '<color>'; inherits: true; initial-value: #064A63; }
@property --t-900 { syntax: '<color>'; inherits: true; initial-value: #032C3B; }
@property --t-950 { syntax: '<color>'; inherits: true; initial-value: #021A24; }

/* 1a · primitives */
:root {
  --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace; --round: 'Fredoka', 'Geist', system-ui, sans-serif; --neon: 'Tilt Neon', 'Geist', system-ui, sans-serif;
  --white: #FFFFFF; --black: #000000;

  /* synth: the night, the sunset, three neon hues */
  --sy-950: #07010F; --sy-900: #0E0322; --sy-850: #150530; --sy-800: #1D0840; --sy-700: #2A0B57; --sy-600: #3C1072;
  --sy-ink: #FFF4FB; --sy-ink-2: #E6D4F7; --sy-ink-3: #BFA6DE;
  --sun-1: #FFE66B; --sun-2: #FFA03C; --sun-3: #FF3D8B; --sun-4: #B81EFF; --neon-yellow: #FFE14D;
  --syc-50: #E9FEFF; --syc-100: #C8FBFC; --syc-200: #8FF4F6; --syc-300: #55EAEE; --syc-400: #2DE2E6; --syc-500: #14BFC4;
  --syc-600: #0C8E93; --syc-700: #086467; --syc-800: #053F42; --syc-900: #032426; --syc-950: #021617;
  --syp-50: #FFEAF5; --syp-100: #FFCCE6; --syp-200: #FF9CCD; --syp-300: #FF66B3; --syp-400: #FF2E97; --syp-500: #E3107C;
  --syp-600: #B00A60; --syp-700: #7D0745; --syp-800: #4E042B; --syp-900: #2C0218; --syp-950: #1A010E;
  --syo-50: #FFF3E5; --syo-100: #FFE0BD; --syo-200: #FFC285; --syo-300: #FFA44D; --syo-400: #FF8A1E; --syo-500: #E86E05;
  --syo-600: #B45303; --syo-700: #7F3A02; --syo-800: #4F2401; --syo-900: #2D1500; --syo-950: #1A0C00;
}
[data-look="synth"] { --page: var(--sy-950); }

/* 1b · tier aliases */
[data-look="synth"] :is(.stage[data-tier="starter"], .cb1) { --t-50: var(--syc-50); --t-100: var(--syc-100); --t-200: var(--syc-200); --t-300: var(--syc-300); --t-400: var(--syc-400); --t-500: var(--syc-500); --t-600: var(--syc-600); --t-700: var(--syc-700); --t-800: var(--syc-800); --t-900: var(--syc-900); --t-950: var(--syc-950); }
[data-look="synth"] :is(.stage[data-tier="pro"], .cb2) { --t-50: var(--syp-50); --t-100: var(--syp-100); --t-200: var(--syp-200); --t-300: var(--syp-300); --t-400: var(--syp-400); --t-500: var(--syp-500); --t-600: var(--syp-600); --t-700: var(--syp-700); --t-800: var(--syp-800); --t-900: var(--syp-900); --t-950: var(--syp-950); }
[data-look="synth"] :is(.stage[data-tier="team"], .cb3) { --t-50: var(--syo-50); --t-100: var(--syo-100); --t-200: var(--syo-200); --t-300: var(--syo-300); --t-400: var(--syo-400); --t-500: var(--syo-500); --t-600: var(--syo-600); --t-700: var(--syo-700); --t-800: var(--syo-800); --t-900: var(--syo-900); --t-950: var(--syo-950); }
.stage { transition: --t-50 .45s, --t-100 .45s, --t-200 .45s, --t-300 .45s, --t-400 .45s, --t-500 .45s, --t-600 .45s, --t-700 .45s, --t-800 .45s, --t-900 .45s, --t-950 .45s; }

/* 1c · semantic tokens, per look */
/* C · SYNTH: a synthwave night. A neon card over a running perspective grid; the thumb is the striped sun */
/* (unregistered, so they swap at once: one re-raster of the floor at the impact instead of 36 during a glide) */
[data-look="synth"] .stage[data-tier="starter"] { --sky-tier: var(--syc-400); --sky-foot: var(--syc-600); }
[data-look="synth"] .stage[data-tier="pro"] { --sky-tier: var(--syp-400); --sky-foot: var(--syp-600); }
[data-look="synth"] .stage[data-tier="team"] { --sky-tier: var(--syo-400); --sky-foot: var(--syo-600); }
[data-look="synth"] .stage {
  --field-bg: linear-gradient(180deg, var(--sy-950), var(--sy-950));
  --grid-major: var(--sky-tier); --grid-minor: transparent; --glow: color-mix(in oklab, var(--t-500) 30%, transparent);
  --on-field: var(--sy-ink); --on-field-muted: var(--sy-ink-2); --chip: var(--t-400); --on-chip: var(--sy-950);
  --em: linear-gradient(180deg, var(--sun-1) 10%, var(--sun-2) 50%, var(--sun-3) 90%);
  --ink: var(--sy-ink); --ink-muted: var(--sy-ink-2); --ink-faint: var(--sy-ink-3); --rule: color-mix(in oklab, var(--t-400) 45%, transparent);
  --accent: var(--t-400); --on-accent: var(--sy-950); --accent-ink: var(--t-200); --focus: var(--neon-yellow);
  --digit: var(--t-50); --digit-stroke: transparent; --digit-glow: var(--t-400);
  --well: transparent; --well-edge: transparent; --cur-ink: var(--t-200);
  --stamp: var(--neon-yellow); --on-stamp: var(--neon-yellow);
  --rail: var(--sy-700); --fill: var(--t-50); --zone-1: var(--syc-600); --zone-2: var(--syp-500); --zone-3: var(--syo-600);
  --tick: color-mix(in oklab, var(--t-300) 70%, transparent); --tick-ink: var(--sy-ink-3);
  --thumb: linear-gradient(180deg, var(--sun-1) 0%, var(--sun-2) 45%, var(--sun-3) 100%); --thumb-edge: var(--sun-1); --thumb-core: var(--sun-3);
  --bubble: var(--sy-950); --on-bubble: var(--t-100); --bubble-edge: var(--t-400);
  --seg: var(--sy-950); --seg-edge: color-mix(in oklab, var(--t-400) 60%, transparent); --seg-ink: var(--sy-ink-2); --seg-on: var(--t-400); --on-seg-on: var(--sy-950);
  --check: var(--t-400); --on-check: var(--sy-950);
  --tag-1: var(--syp-400); --on-tag-1: var(--sy-950); --tag-2: var(--syo-400); --on-tag-2: var(--sy-950);
  --av-1: var(--syc-400); --av-2: var(--syp-400); --av-3: var(--syo-400); --av-4: var(--neon-yellow); --av-5: var(--sy-ink); --av-6: #C69BFF;
  --on-av: var(--sy-950); --more: var(--sy-950); --on-more: var(--t-200);
  --pill: color-mix(in srgb, var(--sy-950) 84%, transparent); --pill-edge: color-mix(in oklab, var(--t-400) 50%, transparent);
  --on-pill: var(--sy-ink); --on-pill-muted: var(--sy-ink-2); --pill-icon: linear-gradient(135deg, var(--sun-1), var(--sun-3)); --on-pill-icon: var(--sy-950);
  --ring: var(--t-300); --lockup: none;
  --spark-1: var(--t-200); --spark-2: var(--sun-1); --spark-3: var(--t-400); --spark-4: var(--sun-3); --fx-ring: var(--t-300);
}
/* the card surface: declared on the stage and on each tier's surface layer (.cb1-3), so every layer resolves it
   against its own tier and a tier change is an opacity cross-fade on the compositor, not a repaint per frame */
[data-look="synth"] :is(.stage, .cb) {
  --surface: linear-gradient(180deg, color-mix(in srgb, var(--sy-850) 90%, transparent), color-mix(in srgb, var(--sy-900) 94%, transparent));
  --surface-edge: var(--t-400);
  --surface-shadow: 0 0 0 1px var(--t-300), 0 0 16px color-mix(in oklab, var(--t-500) 55%, transparent), inset 0 0 0 3px color-mix(in oklab, var(--t-600) 22%, transparent);
}

/* 1d · component tokens: each component names what it uses */
.title    { --title-ink: var(--on-field); --title-muted: var(--on-field-muted); --title-em: var(--em); --title-chip: var(--chip); --title-on-chip: var(--on-chip); }
.card     { --card-edge: var(--surface-edge); --card-ink: var(--ink);
            --card-muted: var(--ink-muted); --card-faint: var(--ink-faint); --card-rule: var(--rule); --card-flash: var(--accent); }
.price    { --price-digit: var(--digit); --price-stroke: var(--digit-stroke); --price-glow: var(--digit-glow); --price-well: var(--well);
            --price-well-edge: var(--well-edge); --price-cur: var(--cur-ink); --price-per: var(--ink-muted); }
.stamp    { --stamp-ink: var(--on-stamp); --stamp-bg: var(--stamp); }
.billing  { --sw-bg: var(--seg); --sw-edge: var(--seg-edge); --sw-ink: var(--seg-ink); --sw-thumb: var(--seg-on); --sw-on: var(--on-seg-on); --sw-focus: var(--focus); }
.slider   { --sl-rail: var(--rail); --sl-fill: var(--fill); --sl-zone-1: var(--zone-1); --sl-zone-2: var(--zone-2); --sl-zone-3: var(--zone-3);
            --sl-tick: var(--tick); --sl-thumb: var(--thumb); --sl-thumb-edge: var(--thumb-edge); --sl-thumb-core: var(--thumb-core); --sl-focus: var(--focus); }
.tick-labels { --tl-ink: var(--tick-ink); }
.bubble   { --bub-bg: var(--bubble); --bub-ink: var(--on-bubble); --bub-edge: var(--bubble-edge); }
.feats    { --ft-ink: var(--ink); --ft-check: var(--check); --ft-on-check: var(--on-check); }
.team     { --tm-ink: var(--on-av); --tm-more: var(--more); --tm-on-more: var(--on-more); }

/* ---- 2. the stage, the frame, ambient ---- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stage { position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: var(--field-bg), var(--page); color: var(--on-field); }
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(calc(var(--k, 1) * var(--bump, 1))); }
.amb { position: absolute; inset: 0; pointer-events: none; }
.amb > * { display: none; position: absolute; }

/* ---- 3. the frame's words ---- */
.title { position: absolute; top: 30px; left: 0; right: 0; text-align: center; z-index: 1; color: var(--title-ink); }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 -4px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--title-muted);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--title-on-chip); background: var(--title-chip); }
.title h1 { margin: 0; height: 72px; font-size: 44px; font-weight: 700; line-height: 72px; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.14em; line-height: 50px; letter-spacing: -.02em; padding: 0 .1em;
  background: var(--title-em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin: -7px 0 0; height: 20px; line-height: 20px; font-size: 14px; font-weight: 500; color: var(--title-muted); }

/* ---- 4. the card: 392 wide, its height springs with the plan (app.js). Rows sit at fixed tops. ---- */
.calc { position: absolute; inset: 0; }
.card { position: absolute; left: 20px; top: 146px; width: 392px; height: 390px; color: var(--card-ink); border-radius: var(--card-r, 28px); font-family: var(--f-ui); }
.card-bg { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* one surface per tier, each resolved against its own tier's colours; a tier change cross-fades them */
.cb { position: absolute; inset: 0; border-radius: inherit; background: var(--surface); box-shadow: var(--surface-shadow); border: 1.5px solid var(--surface-edge);
      opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; will-change: opacity; }
.stage[data-tier="starter"] .cb1, .stage[data-tier="pro"] .cb2, .stage[data-tier="team"] .cb3 { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
.head { position: absolute; left: 18px; right: 18px; top: 13px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.plan { margin: 0; height: 40px; display: flex; align-items: center; min-width: 0; }
.plan-name { position: relative; display: inline-block; height: 40px; white-space: nowrap; perspective: 260px; font-family: var(--f-plan); font-size: var(--plan-size, 28px); line-height: 40px; font-weight: 700; letter-spacing: var(--plan-track, -.02em); color: var(--card-ink); }
.slot { position: relative; display: inline-block; height: 40px; vertical-align: top; }
.face { position: absolute; left: 0; top: 0; height: 40px; transform-origin: 50% 50% -12px; backface-visibility: hidden; white-space: pre; }
.face.measure { visibility: hidden; }

/* the billing switch: native radios, a sliding thumb (it stretches as it runs) */
.billing { position: relative; display: grid; grid-template-columns: 74px 74px; height: 34px; padding: 2px; border-radius: var(--seg-r, 999px); background: var(--sw-bg); box-shadow: inset 0 0 0 1.2px var(--sw-edge); flex: none; }
.seg-thumb { position: absolute; left: 2px; top: 2px; width: 74px; height: 30px; border-radius: var(--seg-r, 999px); background: var(--sw-thumb); transform-origin: 0 50%; }
.seg { position: relative; display: grid; place-items: center; height: 30px; border-radius: var(--seg-r, 999px); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--sw-ink); transition: color .2s; }
.seg.is-on { color: var(--sw-on); }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg:has(input:focus-visible) { outline: 2.5px solid var(--sw-focus); outline-offset: 2px; }
.seg-t { position: relative; pointer-events: none; }
.rule { position: absolute; left: 18px; right: 18px; top: 324px; height: 1px; background: var(--card-rule); }
.meta { position: absolute; left: 18px; right: 18px; top: 148px; height: 18px; margin: 0; font-size: 13px; line-height: 18px; white-space: nowrap; color: var(--card-muted); }
.meta .pp { color: var(--card-ink); font-weight: 700; }
.meta .sep { font-style: normal; margin: 0 7px; }

/* ---- 5. the price: "$", the dollar wheels, the cents (yearly, Starter and Team), "/mo", and the stamp ---- */
.price { position: absolute; left: 18px; right: 18px; top: 60px; height: 84px; display: flex; align-items: flex-start; }
.cur { font-family: var(--f-num); font-size: 30px; line-height: 48px; height: 48px; margin: -2px 4px 0 0; color: var(--price-cur); font-weight: 700; }
.odo { display: flex; flex: none; }
.dollars { --cw: 52px; --dh: 84px; height: 84px; font-family: var(--f-num); font-size: var(--num-size, 76px); font-weight: 700; color: var(--price-digit); }
.ocol { position: relative; height: var(--dh); flex: none; }
.owin { display: block; position: relative; width: calc(var(--cw) - var(--gap, 0px)); height: var(--dh); margin-left: calc(var(--gap, 0px) / 2); overflow: hidden; }
.ostrip { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; }
.ostrip i { display: block; height: var(--dh); line-height: var(--dh); text-align: center; font-style: normal; }
.ostrip.ghost { opacity: 0; }
.ocol.is-moving .ostrip { will-change: transform; }
.ostreak { position: absolute; left: 50%; top: 14%; width: 3px; height: 72%; margin-left: -1.5px; border-radius: 2px; opacity: 0; background: linear-gradient(transparent, currentColor, transparent); pointer-events: none; }
.unit { display: flex; flex-direction: column; justify-content: flex-end; height: 84px; margin-left: 6px; }
.unit.has-cents { justify-content: space-between; }
.cents { display: flex; align-items: flex-start; height: 34px; overflow: hidden; font-family: var(--f-num); font-weight: 700; color: var(--price-digit); }
.cents .dot { display: block; flex: none; height: 34px; overflow: hidden; font-style: normal; font-size: 28px; line-height: 34px; padding: 0 1px; }
.cents-odo { --cw: 19px; --dh: 34px; font-size: 28px; }
.per { font-size: 14px; font-weight: 600; line-height: 18px; margin-bottom: 8px; color: var(--price-per); white-space: nowrap; }

/* ---- 7. THE SLIDER (44 tall, 356 wide; the track runs 24 → 332) and its bubble ---- */
.slider { position: absolute; left: 18px; top: 252px; width: 356px; height: 44px; border-radius: 22px; touch-action: none; cursor: grab; outline: none; }
.slider:active { cursor: grabbing; }
.slider:focus-visible:not([data-pointer]) { box-shadow: 0 0 0 2.5px var(--sl-focus); }
.track { position: absolute; left: 16px; right: 16px; top: 0; height: 44px; --bar-t: 16px; --bar-h: 12px; --zone-t: var(--bar-t); --zone-h: var(--bar-h); }
.rail, .fill-clip { position: absolute; left: 8px; right: 8px; top: var(--bar-t); height: var(--bar-h); border-radius: inherit; }
.zones { position: absolute; left: 8px; right: 8px; top: var(--zone-t); height: var(--zone-h); }
.notches { position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; }
.zone { position: absolute; top: 0; bottom: 0; }
.z1 { background: var(--sl-zone-1); } .z2 { background: var(--sl-zone-2); } .z3 { background: var(--sl-zone-3); }
.fill-clip { overflow: hidden; }
.fill { position: absolute; inset: 0; background: var(--sl-fill); will-change: transform; }   /* it only slides */
.notches i { position: absolute; top: calc(var(--bar-t) - 5px); height: calc(var(--bar-h) + 10px); width: 2px; margin-left: -1px; background: var(--sl-tick); }
.notches b { position: absolute; top: calc(var(--bar-t) + var(--bar-h) + 4px); width: 1px; height: 4px; background: var(--sl-tick); display: none; }
.thumb { position: absolute; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; will-change: transform; }   /* it only slides */
.is-anim { will-change: transform, opacity; }   /* app.js sets it only while a part rotates, scales or fades */
.thumb-body { position: absolute; inset: 0; border-radius: 50%; background: var(--sl-thumb); }
.thumb-body i { position: absolute; display: block; }
.tick-labels { position: absolute; left: 18px; top: 300px; width: 356px; height: 14px; margin: 0; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--tl-ink); }
.tick-labels span { position: absolute; top: 0; transform: translateX(-50%); }
.bubble { position: absolute; left: 18px; top: 212px; height: 37px; transform-origin: 50% 100%; }
.bub-body { position: relative; display: flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px; white-space: nowrap; background: var(--bub-bg); color: var(--bub-ink); box-shadow: inset 0 0 0 1.2px var(--bub-edge); }
.seats-odo { --cw: 11px; --dh: 20px; height: 20px; font-family: var(--f-num); font-size: 17px; font-weight: 700; }
.bub-unit { display: inline-block; overflow: hidden; margin-left: 6px; font-size: 12px; font-weight: 600; line-height: 30px; }
.bub-tail { position: absolute; left: 0; top: 29px; width: 14px; height: 8px; background: var(--bub-edge); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bub-tail::after { content: ''; position: absolute; left: 1.6px; right: 1.6px; top: 0; height: 6px; background: var(--bub-bg); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ---- 8. the features: rows slide in one by one (app.js), each check pops ---- */
.feats { position: absolute; left: 18px; right: 18px; top: 334px; height: 44px; margin: 0; padding: 0; list-style: none; }
.feat { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 18px; color: var(--ft-ink); white-space: nowrap; }
.check { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ft-check); }
.check svg { width: 13px; height: 13px; fill: none; stroke: var(--ft-on-check); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ft { flex: 1 1 auto; min-width: 0; }
.ftag { flex: none; font-size: 9.5px; line-height: 16px; height: 16px; padding: 0 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.ftag.t1 { background: var(--tag-1); color: var(--on-tag-1); } .ftag.t2 { background: var(--tag-2); color: var(--on-tag-2); }

/* =================================================================================================================
   13. LOOK C · SYNTH — neon over a running grid
   ================================================================================================================= */
[data-look="synth"] { --f-ui: var(--sans); --f-num: var(--neon); --f-plan: var(--neon); }
[data-look="synth"] .stage { --card-r: 20px; --seg-r: 10px; --plan-size: 32px; --plan-track: .01em; }
[data-look="synth"] .cb { border: 0; }
[data-look="synth"] .plan-name { color: var(--t-50); text-shadow: 0 0 4px var(--t-300), 0 0 14px var(--t-500); font-weight: 400; }
[data-look="synth"] .seg { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
[data-look="synth"] .seg-thumb { box-shadow: 0 0 12px color-mix(in oklab, var(--t-400) 80%, transparent); }
/* neon-tube digits; the window fades top and bottom so rolling digits glow in and out */
[data-look="synth"] .price::before { content: ''; position: absolute; left: -10px; top: -4px; width: 250px; height: 88px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--t-500) 34%, transparent), transparent); pointer-events: none; }
[data-look="synth"] .dollars { --cw: 48px; --num-size: 82px; font-weight: 400; text-shadow: 0 0 3px var(--t-200), 0 0 9px var(--price-glow); }
[data-look="synth"] .owin { -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
[data-look="synth"] .cents { color: var(--t-50); text-shadow: 0 0 3px var(--t-200), 0 0 8px var(--t-400); font-weight: 400; }
[data-look="synth"] .cents .dot { font-size: 26px; }
[data-look="synth"] .cur { font-weight: 400; font-size: 34px; text-shadow: 0 0 8px var(--t-400); }
/* a neon tube in three tier colours; the lit core runs to the thumb; the thumb is the striped sun */
[data-look="synth"] .track { --bar-t: 18px; --bar-h: 8px; }
[data-look="synth"] .zones { border-radius: 4px; overflow: hidden; }
[data-look="synth"] .zone { opacity: 1; }
[data-look="synth"] .rail { display: none; }
[data-look="synth"] .fill-clip { border-radius: 4px; }
[data-look="synth"] .fill { background: var(--sl-fill); }
[data-look="synth"] .notches i { top: 12px; height: 20px; width: 2px; background: var(--sy-ink); box-shadow: 0 0 6px var(--sy-ink); }
[data-look="synth"] .thumb-body { box-shadow: 0 0 10px color-mix(in srgb, var(--sun-2) 60%, transparent), 0 0 22px color-mix(in srgb, var(--sun-3) 32%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 73%, #000 73% 82%, transparent 82% 86%, #000 86%);
          mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 73%, #000 73% 82%, transparent 82% 86%, #000 86%); }
[data-look="synth"] .thumb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sun-2) 28%, transparent), transparent); }
[data-look="synth"] .bub-body { border-radius: 8px; box-shadow: inset 0 0 0 1.4px var(--bub-edge), 0 0 10px color-mix(in oklab, var(--t-400) 45%, transparent); }
[data-look="synth"] .seats-odo { font-weight: 400; font-size: 19px; color: var(--t-50); }
[data-look="synth"] .tick-labels { letter-spacing: .06em; }
[data-look="synth"] .rule { background: linear-gradient(90deg, transparent, var(--card-rule) 15%, var(--card-rule) 85%, transparent); }
[data-look="synth"] .check { background: none; box-shadow: inset 0 0 0 1.6px var(--ft-check), 0 0 7px color-mix(in oklab, var(--t-400) 60%, transparent); }
[data-look="synth"] .check svg { stroke: var(--ft-check); }