/* ------------------------------------------------------------------
   Animshelf — index, black primary
   Single file, no dependencies. Hash router stub. Reduced-motion safe.
------------------------------------------------------------------ */
:root{
  /* base — black primary */
  --bg:        #0A0A0B;     /* page */
  --bg-2:      #111114;     /* panels, sidebar */
  --bg-3:      #16161A;     /* cards, raised */
  --stage:     #08080A;     /* preview viewport interior */
  --ink:       #F4F2EC;     /* primary text on dark */
  --ink-soft:  #8A8893;     /* secondary text */
  --ink-dim:   #4A4951;     /* tertiary */
  --line:      rgba(244,242,236,.08);
  --line-2:    rgba(244,242,236,.14);
  --cobalt:    #4A6BFF;     /* motion path */
  --amber:     #FFA200;     /* playhead / now-line */
  --paper:     #EAE9E3;     /* inverted accent surface */

  --r-1: 4px;
  --r-2: 10px;
  --r-3: 18px;

  --shadow-stage: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -30px rgba(0,0,0,.7);

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --side-w: 248px;
  --topbar-h: 56px;

  --ease-curve: cubic-bezier(.22,.61,.36,1);

  --font-display: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}
::selection{ background: var(--amber); color: #0A0A0B; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

.mono{ font-family: var(--font-mono); letter-spacing: .02em; }
.display{ font-family: var(--font-display); letter-spacing: -.018em; line-height: .98; font-weight: 700; }

/* ------------------------------------------------------------ topbar */
.topbar{
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: rgba(10,10,11,.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: .14em;
  font-size: 14px;
}
.brand .mark{
  width: 22px; height: 22px; flex: 0 0 auto;
  display: block; border-radius: 6px;
}

.topnav{
  display: flex; align-items: center; gap: 22px;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--ink-soft);
}
.topnav a{ position: relative; padding: 6px 0; transition: color .18s var(--ease-curve); }
.topnav a:hover{ color: var(--ink); }
.topnav a.active{ color: var(--ink); }
.topnav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height: 2px; background: var(--amber);
}

.top-right{ display:flex; align-items:center; gap:14px; }
.search{
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 12px;
  min-width: 220px;
}
.search svg{ flex: none; }
.search .kbd{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-soft);
}
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  background: transparent;
}
.chip .dot{ width:6px; height:6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255,162,0,.18); }

.menu-btn{ display:none; }
.search{ cursor: pointer; }

/* ---- command-palette search overlay ---- */
.cmdk{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 13vh 16px 16px; }
.cmdk[hidden]{ display: none; }
.cmdk-backdrop{ position: absolute; inset: 0; background: rgba(5,5,8,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cmdk-panel{ position: relative; width: min(560px,100%); max-height: 72vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); overflow: hidden; }
.cmdk-input-wrap{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-input-wrap > svg{ width: 18px; height: 18px; color: var(--ink-soft); flex: none; }
.cmdk-input-wrap input{ flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--font-body); font-size: 16px; }
.cmdk-input-wrap input::placeholder{ color: var(--ink-dim); }
.cmdk-esc{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 6px; flex: none; }
.cmdk-list{ list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk-row{ display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-row.active{ background: rgba(74,107,255,.16); }
.cmdk-ico{ flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--ink-soft); }
.cmdk-ico svg{ width: 14px; height: 14px; }
.cmdk-row.active .cmdk-ico{ color: #cdd6ff; background: rgba(74,107,255,.25); }
.cmdk-main{ flex: 1; min-width: 0; }
.cmdk-lbl{ font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-lbl mark{ background: none; color: var(--cobalt); font-weight: 600; }
.cmdk-row.active .cmdk-lbl mark{ color: #aeb9ff; }
.cmdk-crumb{ font-size: 11.5px; color: var(--ink-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-kind{ flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.cmdk-empty{ padding: 30px 16px; text-align: center; color: var(--ink-soft); font-size: 14px; }
.cmdk-foot{ display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 920px){ .cmdk-foot{ display: none; } }

@media (max-width: 920px){
  .topnav{ display: none; }
  .search{ min-width: 0; width: 36px; padding: 0 8px; }
  .search .kbd, .search .label{ display: none; }
  .menu-btn{ display: inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line-2); border-radius:8px; }
}

/* ------------------------------------------------------------ layout */
.layout{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  gap: 36px;
}
@media (max-width: 1024px){ .layout{ grid-template-columns: 1fr; } .sidebar{ display:none; } }

/* ------------------------------------------------------------ sidebar */
.sidebar{
  position: sticky; top: calc(var(--topbar-h) + 8px);
  align-self: start;
  padding-top: 28px;
  padding-bottom: 60px;
  height: calc(100dvh - var(--topbar-h) - 8px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-dim) transparent;
}
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--ink-dim); border-radius: 3px; }
.side-h{
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 18px 8px 8px;
  display: flex; align-items: center; gap: 8px;
}
.side-h::before{
  content:""; width:6px; height:1px; background: currentColor; opacity:.6;
}
.side-h:first-child{ padding-top: 0; }
.side-sub{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); padding: 7px 8px 3px 16px;
}
/* collapsible sections */
.sidebar summary{ list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.sidebar summary::-webkit-details-marker{ display: none; }
summary.side-h{ border-radius: 6px; transition: color .14s var(--ease-curve); }
summary.side-h:hover{ color: var(--ink); }
summary.side-sub{ display: flex; align-items: center; gap: 6px; border-radius: 6px; transition: color .14s var(--ease-curve); }
summary.side-sub:hover{ color: var(--ink-soft); }
.side-count{ color: var(--amber); font-weight: 600; }
.side-chev{ flex: 0 0 auto; margin-left: auto; width: 13px; height: 13px; color: var(--ink-dim); transition: transform .25s var(--ease-curve); }
summary.side-sub .side-chev{ width: 11px; height: 11px; }
details[open] > summary .side-chev{ transform: rotate(180deg); }
.sidebar > details:first-child > summary.side-h{ padding-top: 0; }
.side-sub-sec ul a{ padding-left: 16px; }
.sidebar ul{ list-style: none; margin: 0; padding: 0; }
.sidebar a{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 13.5px;
  transition: background .14s var(--ease-curve), color .14s var(--ease-curve);
  position: relative;
}
.sidebar a:hover{ color: var(--ink); background: rgba(244,242,236,.04); }
.sidebar a.active{ color: var(--ink); background: rgba(244,242,236,.06); }
.sidebar a.active::before{
  content:""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 2px;
  background: var(--amber); border-radius: 2px;
}
.sidebar a .new{
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--amber);
  border: 1px solid currentColor; border-radius: 3px;
  padding: 1px 4px; line-height: 1;
}

/* ------------------------------------------------------------ main */
.main{ padding: 36px 0 96px; min-width: 0; }

/* ------------------------------------------------------------ hero */
.hero{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
  padding-top: 24px;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; gap: 36px; } }

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before{
  content:""; width: 26px; height: 1px; background: var(--ink-soft);
}

h1.headline{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 7.4vw, 96px);
  line-height: .94; letter-spacing: -.025em;
  margin: 18px 0 22px;
  color: var(--ink);
}
h1.headline em{
  font-style: normal;
  font-family: var(--font-display); font-weight: 800;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, rgba(255,162,0,.85) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
h1.headline em::after{
  content:""; position: absolute; left: 0; right: 0; bottom: .08em;
  height: 2px; background: var(--amber); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: hl-underline 1.4s var(--ease-curve) .35s forwards;
}
@keyframes hl-underline{ to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  h1.headline em::after{ animation: none; transform: scaleX(1); }
}

.subhead{
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 54ch;
  margin-bottom: 28px;
}

.cta-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 36px;
}
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border-radius: 10px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14.5px;
  transition: transform .18s var(--ease-curve), background .18s var(--ease-curve), border-color .18s var(--ease-curve);
}
.btn.primary{
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
}
.btn.primary:hover{ background: var(--paper); border-color: var(--paper); transform: translateY(-1px); }
.btn.secondary{
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn.secondary:hover{ border-color: var(--ink-soft); transform: translateY(-1px); }
.btn .arrow{ transition: transform .18s var(--ease-curve); }
.btn:hover .arrow{ transform: translateX(2px); }

.stat-strip{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 560px;
}
.stat-strip > div{
  background: var(--bg);
  padding: 14px 14px 16px;
}
.stat-strip .n{
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1;
  color: var(--ink);
}
.stat-strip .l{
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .12em;
  margin-top: 6px;
}

/* ------------------------------------------------------------ preview stage */
.stage-wrap{
  position: relative;
  isolation: isolate;
}
.stage-meta{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stage-meta .left{ display:flex; align-items:center; gap:10px; }
.stage-meta .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,162,0,.15);
  animation: pulse 1.6s var(--ease-curve) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
@media (prefers-reduced-motion: reduce){ .stage-meta .dot{ animation:none; } }

.stage{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--stage);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-stage);
}
.stage canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.stage .ticks{
  position: absolute; inset: 0; pointer-events: none;
}
.stage .ticks .corner{
  position: absolute; width: 18px; height: 18px;
  border-color: var(--ink-soft);
}
.stage .ticks .tl{ top: 12px; left: 12px; border-top:1px solid; border-left:1px solid; }
.stage .ticks .tr{ top: 12px; right: 12px; border-top:1px solid; border-right:1px solid; }
.stage .ticks .bl{ bottom: 12px; left: 12px; border-bottom:1px solid; border-left:1px solid; }
.stage .ticks .br{ bottom: 12px; right: 12px; border-bottom:1px solid; border-right:1px solid; }
.stage .ticks .crosshair{
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 14px; background: var(--ink-soft); opacity: .55;
  transform: translate(-50%, -50%);
}
.stage .ticks .crosshair.h{ width: 14px; height: 1px; }
.stage .center-label{
  position:absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 18px));
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--ink-soft); text-transform: uppercase; pointer-events: none;
  opacity:.6;
}

.stage-hud{
  position: absolute; inset: auto 14px 12px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}
.hud-left, .hud-right{
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .08em;
  background: rgba(8,8,10,.6);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  backdrop-filter: blur(4px);
}
.hud-left .row{ display:flex; gap:14px; align-items:center; }
.hud-left .lab{ color: var(--ink-dim); text-transform: uppercase; }
.hud-left .v{ color: var(--ink); }

.curve{
  width: 96px; height: 56px;
}
.curve text{
  font-family: var(--font-mono); font-size: 8px;
  fill: var(--ink-dim); letter-spacing: .12em;
}

/* flavor tabs */
.flavor-tabs{
  display: inline-flex; align-items: center; gap: 0;
  margin-top: 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
  background: var(--bg-2);
}
.flavor-tabs button{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: 6px;
  letter-spacing: .08em;
}
.flavor-tabs button[aria-pressed="true"]{
  background: var(--ink); color: var(--bg);
}

/* ------------------------------------------------------------ filmstrip divider */
.filmstrip{
  position: relative;
  height: 28px;
  margin: 88px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.filmstrip::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle, var(--ink-dim) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--ink-dim) 0 2px, transparent 2.5px);
  background-size: 28px 100%, 28px 100%;
  background-position: 0 50%, 14px 50%;
  background-repeat: repeat-x;
  opacity:.55;
}
.filmstrip::after{
  content:""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 1px; background: var(--line);
}

/* ------------------------------------------------------------ section heading */
.section-h{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: end;
  margin-bottom: 28px;
}
.section-h .num{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-dim); letter-spacing: .14em;
}
.section-h h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 6px 0 0;
  letter-spacing: -.02em;
}
.section-h .meta{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase;
}
.section-h .rule{ height: 1px; background: var(--line); align-self: center; }

/* ------------------------------------------------------------ now playing */
.now{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){ .now{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .now{ grid-template-columns: 1fr; } }

.specimen{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--bg-2);
  overflow: hidden;
  transition: transform .25s var(--ease-curve), border-color .25s var(--ease-curve), background .25s var(--ease-curve);
}
.specimen:hover{ transform: translateY(-2px); border-color: var(--ink-dim); }
.specimen .thumb{
  aspect-ratio: 5 / 4;
  position: relative;
  background: var(--stage);
  overflow: hidden;
}
.specimen .thumb canvas{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.specimen .thumb .corner{
  position: absolute; width: 10px; height: 10px;
  border-color: var(--ink-dim);
}
.specimen .thumb .tl{ top: 10px; left: 10px; border-top:1px solid; border-left:1px solid; }
.specimen .thumb .br{ bottom: 10px; right: 10px; border-bottom:1px solid; border-right:1px solid; }
.specimen .meta{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 14px;
}
.specimen .meta .t{
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -.01em;
}
.specimen .meta .s{
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase;
  margin-top: 2px;
}
.specimen .badge{
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-soft); letter-spacing: .12em;
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: 2px 5px;
}

/* ------------------------------------------------------------ categories */
.cats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
@media (max-width: 720px){ .cats{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .cats{ grid-template-columns: 1fr; } }
.cat{
  background: var(--bg);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
  position: relative;
  transition: background .25s var(--ease-curve);
}
.cat:hover{ background: var(--bg-2); }
.cat .num{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); letter-spacing: .14em; }
.cat .t{ font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.012em; }
.cat .c{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.cat .ex{ margin-top: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); letter-spacing: .04em; }
.cat .arrow{
  position: absolute; right: 18px; top: 22px;
  color: var(--ink-dim); transition: color .2s var(--ease-curve), transform .2s var(--ease-curve);
}
.cat:hover .arrow{ color: var(--amber); transform: translate(2px,-2px); }

/* ------------------------------------------------------------ how it works */
.how{
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px){ .how{ grid-template-columns: 1fr; gap: 28px; } }
.how .lead{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.018em;
  line-height: 1.05;
}
.steps{ display: grid; gap: 18px; }
.step{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px; align-items: start;
  padding: 18px 4px;
  border-top: 1px solid var(--line);
}
.step:last-child{ border-bottom: 1px solid var(--line); }
.step .k{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); letter-spacing: .14em; padding-top: 4px; }
.step .body .h{ font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.step .body .p{ color: var(--ink-soft); margin-top: 4px; font-size: 14.5px; max-width: 56ch; }
.step .tag{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .1em; padding-top: 6px; }

/* ------------------------------------------------------------ footer */
.footer{
  margin-top: 88px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
@media (max-width: 760px){ .footer{ grid-template-columns: 1fr 1fr; } }
.footer h4{
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 14px;
}
.footer a{ color: var(--ink-soft); font-size: 13.5px; display: block; padding: 4px 0; }
.footer a:hover{ color: var(--ink); }
.footer .colophon{
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
  letter-spacing: .1em;
}

/* ------------------------------------------------------------ sidebar progress */
.side-progress{
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--amber);
}
.side-progress > span{ color: var(--ink-dim); }

/* ------------------------------------------------------------ specimen page */
#specimenView[hidden]{ display: none; }
#specimenView{ padding: 28px 0 60px; }

.spec-crumbs{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .12em; text-transform: uppercase;
}
.spec-crumbs a{ color: var(--ink-soft); transition: color .14s var(--ease-curve); }
.spec-crumbs a:hover{ color: var(--ink); }
.spec-crumbs .sep{ color: var(--ink-dim); }
.spec-crumbs .here{ color: var(--ink); }

.spec-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin: 14px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.spec-head h1{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.6vw, 72px);
  letter-spacing: -.022em;
  line-height: .98;
  margin: 8px 0 0;
}
.spec-head .desc{
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 60ch;
}
.spec-head .label-strip{
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.spec-head .label-strip .num{
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.spec-head .label-strip .tag{
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink);
}
.spec-head .label-strip .tag .d{ width:5px; height:5px; border-radius:50%; background: var(--amber); }

@media (max-width: 720px){
  .spec-head{ grid-template-columns: 1fr; }
  .spec-head .label-strip{ align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .spec-head .label-strip .num{ font-size: 28px; }
}

/* spec workbench: stage + props */
.workbench{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1000px){
  .workbench{ grid-template-columns: 1fr; }
}

/* the spec stage uses the same .stage skeleton, but is wider/taller */
.spec-stage-wrap{ position: relative; }
.spec-stage{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--stage);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: var(--shadow-stage);
}
.spec-stage .stage-canvas-wrap{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* split-text demo styles */
.st-demo{
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .98;
  font-size: clamp(36px, 7.2vw, 96px);
  color: var(--ink);
  padding: 0 8%;
  max-width: 100%;
  user-select: none;
}
.st-demo .st-line{ display: block; padding: 2px 0; }
.st-demo[data-from="down"] .st-line,
.st-demo[data-from="up"]   .st-line{ overflow: hidden; }
.st-demo .st-piece{
  display: inline-block;
  will-change: transform, opacity, filter;
}
.st-demo .st-piece.is-space{ width: .28em; }
.st-demo em{
  font-style: normal;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.spec-stage .ticks{ position: absolute; inset: 0; pointer-events: none; }
.spec-stage .ticks .corner{ position: absolute; width: 22px; height: 22px; border-color: var(--ink-soft); }
.spec-stage .ticks .tl{ top: 14px; left: 14px; border-top:1px solid; border-left:1px solid; }
.spec-stage .ticks .tr{ top: 14px; right: 14px; border-top:1px solid; border-right:1px solid; }
.spec-stage .ticks .bl{ bottom: 14px; left: 14px; border-bottom:1px solid; border-left:1px solid; }
.spec-stage .ticks .br{ bottom: 14px; right: 14px; border-bottom:1px solid; border-right:1px solid; }

.spec-stage .stage-hud{
  position: absolute; inset: auto 14px 14px 14px;
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}

.spec-stage .stage-label{
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--ink-dim); text-transform: uppercase;
}

.spec-meta-row{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .1em; text-transform: uppercase;
}
.spec-meta-row .left{ display:flex; align-items:center; gap:10px; }
.spec-meta-row .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,162,0,.15);
  animation: pulse 1.6s var(--ease-curve) infinite;
}
@media (prefers-reduced-motion: reduce){ .spec-meta-row .dot{ animation:none; } }

.spec-flavor-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* props panel */
.props{
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--bg-2);
  padding: 18px 18px 16px;
}
.props .props-title{
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.props .props-title .name{ color: var(--ink); }
.props .row{
  margin-bottom: 16px;
}
.props .lbl{
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.props .lbl .v{ color: var(--ink); }
.seg{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 3px;
  background: var(--bg);
}
.seg button{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  padding: 7px 6px;
  border-radius: 6px;
  letter-spacing: .04em;
  text-align: center;
  transition: background .14s var(--ease-curve), color .14s var(--ease-curve);
}
.seg button:hover{ color: var(--ink); }
.seg button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }

input[type=range].slider{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent;
}
input[type=range].slider::-webkit-slider-runnable-track{
  height: 2px; background: var(--line-2); border-radius: 2px;
}
input[type=range].slider::-moz-range-track{
  height: 2px; background: var(--line-2); border-radius: 2px;
}
input[type=range].slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--amber);
  margin-top: -5px;
  cursor: grab;
}
input[type=range].slider::-moz-range-thumb{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--amber);
  cursor: grab;
}
input[type=range].slider:active::-webkit-slider-thumb{ cursor: grabbing; }

select.ease-select{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 36px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--line-2);
  background: var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238A8893' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink);
  font-family: var(--font-mono); font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}
select.ease-select:focus{ outline: none; border-color: var(--ink-soft); }

.props .replay{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform .14s var(--ease-curve), background .14s var(--ease-curve);
  margin-top: 4px;
}
.props .replay:hover{ background: var(--paper); transform: translateY(-1px); }
.props .replay svg{ transition: transform .4s var(--ease-curve); }
.props .replay:hover svg{ transform: rotate(-180deg); }

.props .signature{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: .12em; text-transform: uppercase;
}
.props .signature span{ display: block; }
.props .signature span b{ display:block; color: var(--ink-soft); font-weight: 500; }

/* code section */
.code-block{
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--bg-2);
  overflow: hidden;
}
.code-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.code-head .tabs{ display: inline-flex; gap: 0; }
.code-head .tabs button{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 6px;
  letter-spacing: .04em;
}
.code-head .tabs button[aria-pressed="true"]{ color: var(--ink); background: var(--bg-3); }

.copy-btn{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color .14s var(--ease-curve), border-color .14s var(--ease-curve);
}
.copy-btn:hover{ color: var(--ink); border-color: var(--ink-soft); }
.copy-btn.copied{ color: var(--amber); border-color: var(--amber); }

pre.code{
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-dim) transparent;
}
pre.code .k{ color: #C49EFF; }   /* keyword */
pre.code .s{ color: #FFC069; }   /* string */
pre.code .c{ color: var(--ink-dim); font-style: italic; }
pre.code .n{ color: #8FB8FF; }   /* number */
pre.code .p{ color: var(--ink-soft); }
pre.code .f{ color: #F4F2EC; }   /* fn / tag */
pre.code .a{ color: var(--amber); }
pre.code::-webkit-scrollbar{ height: 6px; }
pre.code::-webkit-scrollbar-thumb{ background: var(--ink-dim); border-radius: 3px; }

/* anatomy notes — 3-col */
.anatomy{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
@media (max-width: 800px){ .anatomy{ grid-template-columns: 1fr; } }
.anatomy .a-cell{
  background: var(--bg);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px;
}
.anatomy .a-cell .k{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); letter-spacing: .14em; }
.anatomy .a-cell .h{ font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.anatomy .a-cell .p{ color: var(--ink-soft); font-size: 14px; }
.anatomy .a-cell .diagram{
  margin-top: auto;
  height: 56px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: .14em;
  overflow: hidden;
  position: relative;
}
.anatomy .a-cell .diagram .bar{
  position: absolute; top: 50%; height: 2px; background: var(--amber); border-radius: 2px;
  transform: translateY(-50%);
}

/* sibling specimen index */
.sibling-index{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
@media (max-width: 900px){ .sibling-index{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .sibling-index{ grid-template-columns: 1fr; } }
.sib{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color .14s var(--ease-curve), background .14s var(--ease-curve), transform .14s var(--ease-curve);
}
.sib:hover{ border-color: var(--ink-dim); background: var(--bg-2); transform: translateY(-1px); }
.sib.active{ border-color: var(--amber); }
.sib .n{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); letter-spacing: .1em; min-width: 26px; }
.sib .t{ font-family: var(--font-display); font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sib .s{
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 2px 4px;
}
.sib.active .s{ color: var(--amber); border-color: var(--amber); }

/* stub specimen page */
.stub{
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.stub::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%);
  background-size: 22px 22px;
  opacity: .9;
  pointer-events: none;
}
.stub-inner{
  position: relative; z-index: 1; text-align: center;
  padding: 40px;
  background: rgba(10,10,11,.7);
  backdrop-filter: blur(2px);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.stub-inner .k{
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber);
  display: inline-flex; align-items: center; gap: 8px;
}
.stub-inner .k::before{ content:""; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,162,0,.15); }
.stub-inner .h{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.02em;
  margin: 12px 0 8px;
}
.stub-inner .p{
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
  font-size: 14.5px;
}
.stub-inner .meta{
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: .12em; text-transform: uppercase;
}

/* shared section spacer for spec page */
.spec-section{ margin-top: 76px; }
.spec-section > .section-h{ margin-bottom: 22px; }

/* ============================================================
   DEMO STYLES — one block per text animation specimen
============================================================ */

/* shared demo wrapper */
.demo-root{
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 6% 6%;
  text-align: center;
  user-select: none;
}

/* --- Blur Text */
.blt{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 7vw, 88px); letter-spacing: -.025em; line-height: 1.04;
  color: var(--ink);
}
.blt span{ display: inline-block; will-change: filter, opacity, transform; }

/* --- Circular Text */
.ct-wrap{ display: flex; align-items: center; justify-content: center; width: 100%; }
.ct{ width: min(64%, 360px); aspect-ratio: 1; transform-origin: center; }
.ct circle{ fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; }
.ct text{
  font-family: var(--font-mono); font-weight: 500;
  font-size: 22px; letter-spacing: .42em; fill: var(--ink);
  text-transform: uppercase;
}
.ct .dot{ fill: var(--amber); }

/* --- Text Type */
.tt{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 6.4vw, 76px); letter-spacing: -.018em;
  color: var(--ink); white-space: pre-wrap;
}
.tt-caret{
  display: inline-block; width: .085em; height: .82em;
  background: var(--amber); margin-left: .06em;
  vertical-align: -8%;
  animation: tt-caret 1s steps(2) infinite;
}
@keyframes tt-caret{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .tt-caret{ animation: none; } }

/* --- Shuffle / Scrambled / Decrypted (shared "mono char grid") */
.glyphs{
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(34px, 6.2vw, 72px); letter-spacing: .015em;
  color: var(--ink);
}
.glyphs span{ display: inline-block; min-width: .58em; text-align: center; }
.glyphs span.is-space{ min-width: .3em; }
.glyphs .gh-amber{ color: var(--amber); }
.glyphs .gh-cobalt{ color: var(--cobalt); }

/* --- Shiny Text */
.shiny{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(42px, 7.5vw, 96px); letter-spacing: -.022em;
  background: linear-gradient(110deg, var(--ink-dim) 32%, var(--amber) 48%, var(--ink) 56%, var(--ink-dim) 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shiny 4.2s linear infinite;
}
@keyframes shiny{ from{ background-position: 200% 0; } to{ background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce){ .shiny{ animation: none; background-position: 0 0; } }

/* --- Text Pressure / Variable Proximity */
.pres{
  font-family: 'Inter', sans-serif;
  font-size: clamp(44px, 8.2vw, 110px); line-height: 1;
  letter-spacing: -.02em; color: var(--ink);
}
.pres span{
  display: inline-block;
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings .08s linear, transform .08s linear, color .08s linear;
  will-change: font-variation-settings, transform;
}

/* --- Curved Loop */
.cl{ width: 100%; height: auto; }
.cl text{
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; fill: var(--ink); letter-spacing: -.018em;
}
.cl .path-vis{ fill: none; stroke: var(--line-2); stroke-dasharray: 2 6; }

/* --- Fuzzy Text */
.fz{ width: 80%; max-width: 560px; height: 56%; display: block; }

/* --- Backgrounds: full-bleed canvas specimens */
.bgfx{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Gradient Text */
.gr{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(50px, 9vw, 116px); letter-spacing: -.022em;
  background: linear-gradient(110deg, #4A6BFF 0%, #FFA200 30%, #F4F2EC 60%, #4A6BFF 90%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gr 6s linear infinite;
}
@keyframes gr{ to{ background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce){ .gr{ animation: none; } }

/* --- Falling Text & Text Cursor (canvas) */
.fall, .tc-canvas{ width: 100%; height: 100%; display: block; position: absolute; inset: 0; }

/* --- True Focus */
.tf{
  position: relative;
  display: flex; gap: .26em; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 6vw, 72px); letter-spacing: -.018em;
  color: var(--ink);
}
.tf > span{
  filter: blur(7px); opacity: .35;
  transition: filter .55s var(--ease-curve), opacity .55s var(--ease-curve);
}
.tf > span.focused{ filter: blur(0); opacity: 1; }
.tf-box{
  position: absolute; left: 0; top: 0; pointer-events: none;
  transition: transform .65s var(--ease-curve), width .65s var(--ease-curve), height .65s var(--ease-curve);
  width: 0; height: 0;
}
.tf-box::before, .tf-box::after,
.tf-box i::before, .tf-box i::after{
  content:""; position: absolute; width: 14px; height: 14px;
  border-color: var(--amber);
}
.tf-box::before{ top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
.tf-box::after { top: -1px; right: -1px; border-top: 1.5px solid; border-right: 1.5px solid; }
.tf-box i{ position: absolute; inset: 0; }
.tf-box i::before{ bottom: -1px; left: -1px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.tf-box i::after{ bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* --- Scroll Float / Scroll Reveal */
.srf{
  display: flex; flex-direction: column; gap: .12em; align-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 6.6vw, 76px); letter-spacing: -.02em;
  color: var(--ink);
}
.srf .row{ display: flex; gap: .25em; overflow: hidden; padding: .04em 0; }
.srf .row span{ display: inline-block; will-change: transform, opacity, filter; }

/* --- ASCII Text */
.asc{
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(7px, .9vw, 11px); line-height: 1;
  color: var(--ink); letter-spacing: .05em;
  white-space: pre;
  padding: 4px;
}

/* --- Rotating Text */
.rt{
  position: relative; display: inline-flex; align-items: center; gap: .25em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 6.6vw, 80px); letter-spacing: -.02em;
  color: var(--ink);
  perspective: 700px;
}
.rt .prefix{ color: var(--ink-soft); font-weight: 500; }
.rt .stack{
  position: relative;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  min-width: 6ch;
  display: inline-block;
  transform-style: preserve-3d;
}
.rt .stack span{
  position: absolute; left: 0; top: 0;
  line-height: 1.3;
  white-space: nowrap;
  will-change: transform, opacity;
  color: var(--amber);
}

/* --- Glitch Text */
.gl{
  position: relative;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 8.4vw, 110px); letter-spacing: -.03em;
  color: var(--ink);
  text-shadow: 0 0 0 transparent;
  display: inline-block;
}
.gl::before, .gl::after{
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden;
  mix-blend-mode: screen;
}
.gl::before{ color: var(--cobalt); animation: gl-r 2.6s steps(2,end) infinite; clip-path: inset(0 0 55% 0); }
.gl::after { color: var(--amber); animation: gl-l 2.2s steps(2,end) infinite; clip-path: inset(50% 0 0 0); }
@keyframes gl-r{ 0%,90%,100%{ transform: translate(0,0); } 92%{ transform: translate(3px,-2px); } 94%{ transform: translate(-2px,1px); } 96%{ transform: translate(2px,2px); } }
@keyframes gl-l{ 0%,85%,100%{ transform: translate(0,0); } 87%{ transform: translate(-3px,2px); } 89%{ transform: translate(2px,-1px); } 91%{ transform: translate(-2px,-2px); } }
@media (prefers-reduced-motion: reduce){ .gl::before, .gl::after{ animation: none; } }

/* --- Wave Text */
.wv{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 8vw, 104px); letter-spacing: -.01em; line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
}
.wv span{ display: inline-block; will-change: transform; }
.wv span.is-space{ width: .32em; }

/* --- Neon Flicker */
.nf{
  --nf-color: var(--cobalt);
  --nf-flicker: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 8.4vw, 110px); letter-spacing: .015em;
  text-transform: uppercase;
  color: #fff;
  animation: nf-flicker calc(4.2s / var(--nf-flicker)) steps(1, end) infinite;
}
@keyframes nf-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100%{
    color: #fff;
    text-shadow:
      0 0 4px var(--nf-color), 0 0 11px var(--nf-color),
      0 0 22px var(--nf-color), 0 0 44px var(--nf-color);
  }
  20%, 24%, 55%{ color: var(--ink-soft); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce){
  .nf{
    animation: none; color: #fff;
    text-shadow: 0 0 4px var(--nf-color), 0 0 11px var(--nf-color),
                 0 0 22px var(--nf-color), 0 0 44px var(--nf-color);
  }
}

/* --- Scroll Velocity */
.sv{
  width: 100%; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 82px); letter-spacing: -.02em;
  color: var(--ink);
}
.sv-row{
  position: relative; overflow: hidden;
  white-space: nowrap; padding: 6px 0;
  border-block: 1px solid var(--line);
}
.sv-track{ display: inline-block; will-change: transform; padding-right: 1em; }
.sv-track .em{ color: var(--amber); }

/* --- Count Up */
.cu{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(72px, 14vw, 180px); line-height: 1;
  letter-spacing: -.04em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline;
}
.cu .suffix{ font-family: var(--font-mono); font-size: .22em; color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase; margin-left: .3em; }

/* ============================================================
   ANIMATIONS — demo styles
============================================================ */

/* generic absolute-fill canvas (used by most animation specs) */
.canvas-fill{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Confetti (animation, pure CSS keyframes — no canvas) */
.cf-wrap{ position: absolute; inset: 0; overflow: hidden; }
.cf-layer{ position: absolute; inset: 0; z-index: 5; pointer-events: none; }   /* always on top of the content */
.cf-piece{ position: absolute; will-change: transform; animation: cf-burst var(--dur) cubic-bezier(.12,.66,.32,1) forwards; }   /* the outward throw */
.cf-fall{ display: block; will-change: transform, opacity; animation: cf-fall var(--dur) cubic-bezier(.45,0,.9,.55) forwards; }  /* gravity + fade */
.cf-rect{ display: block; will-change: transform; animation: cf-spin var(--dur) linear forwards; }                               /* tumble */
@keyframes cf-burst{ from{ transform: translate(0,0); } to{ transform: translate(var(--bx), var(--by)); } }
@keyframes cf-fall{ from{ transform: translateY(0); opacity: 1; } to{ transform: translateY(var(--fall)); opacity: 0; } }
@keyframes cf-spin{ from{ transform: rotate(0); } to{ transform: rotate(var(--turns)); } }
@media (prefers-reduced-motion: reduce){ .cf-piece, .cf-fall, .cf-rect{ animation: none !important; } }
.cf-origin{
  position: absolute; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  cursor: grab; user-select: none; touch-action: none; white-space: nowrap;
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.7);
  transition: border-color .14s var(--ease-curve), background .14s var(--ease-curve);
}
.cf-origin:hover{ border-color: var(--ink-soft); }
.cf-origin:active{ cursor: grabbing; }
.cf-origin .cf-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,162,0,.18); }

/* --- COMPONENT · Expanding Search */
.exs-scene{ width: 100%; height: 100%; display: grid; place-items: center; padding: 0 clamp(16px,5%,48px); }
.exs-row{ width: min(680px, 100%); display: flex; }
.exs{ --exs-accent: var(--cobalt); position: relative; display: flex; align-items: center; height: 50px; width: 50px; border-radius: 999px;
  background: rgba(255,255,255,.045); border: 1px solid var(--line-2); overflow: hidden; will-change: width;
  transition: width .48s var(--ease-curve), box-shadow .3s var(--ease-curve), border-color .3s var(--ease-curve); }
.exs[data-collapsed="compact"]{ width: 220px; }
.exs[data-origin="left"]{ margin-right: auto; }
.exs[data-origin="right"]{ margin-left: auto; }
.exs[data-origin="center"]{ margin: 0 auto; }
.exs:focus-within,
.exs:has(.exs-input:not(:placeholder-shown)){ width: 100%; border-color: transparent; box-shadow: 0 0 0 2px var(--exs-accent); }
.exs-ico{ flex: 0 0 50px; height: 50px; display: grid; place-items: center; color: var(--ink-soft); cursor: text; transition: color .2s var(--ease-curve); }
.exs:focus-within .exs-ico{ color: var(--exs-accent); }
.exs-ico svg{ width: 18px; height: 18px; }
.exs-input{ flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: var(--ink); font-family: var(--font-body); font-size: 15px; padding: 0 6px; }
.exs-input::placeholder{ color: var(--ink-soft); }
.exs-input::-webkit-search-cancel-button{ display: none; }
.exs-clear{ flex: 0 0 auto; width: 30px; height: 30px; margin-right: 8px; border: none; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--ink-soft); cursor: pointer; opacity: 0; transform: scale(.7); pointer-events: none; display: grid; place-items: center; font-size: 14px; line-height: 1; transition: opacity .2s var(--ease-curve), transform .2s var(--ease-curve), color .2s, background .2s; }
.exs-input:not(:placeholder-shown) ~ .exs-clear{ opacity: 1; transform: scale(1); pointer-events: auto; }
.exs-clear:hover{ color: var(--ink); background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce){ .exs{ transition: box-shadow .2s, border-color .2s; } }

/* --- COMPONENT · Hover Ripple */
.hrp-scene{ width: 100%; height: 100%; display: grid; place-items: center; padding: 10px; }
.hrp{ position: relative; width: min(440px, 86%); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; cursor: crosshair;
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);
  --hrp-color: rgba(255,255,255,.92); --hrp-scale: 12; --hrp-base: 16px; --hrp-dur: .95s;
  background: linear-gradient(135deg, #1f6feb, #7c3aed 46%, #ec4899); }
.hrp[data-size="sm"]{ --hrp-scale: 7; --hrp-base: 14px; --hrp-dur: .8s; }
.hrp[data-size="lg"]{ --hrp-scale: 18; --hrp-base: 20px; --hrp-dur: 1.15s; }
.hrp-label{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
  color: rgba(255,255,255,.94); font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .01em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.hrp-label small{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; opacity: .82; }
.hrp-ring{ position: absolute; width: var(--hrp-base); height: var(--hrp-base); margin-left: calc(var(--hrp-base) / -2); margin-top: calc(var(--hrp-base) / -2); border-radius: 50%; border: 2px solid var(--hrp-color); pointer-events: none; transform: scale(0); mix-blend-mode: screen; animation: hrp-pop var(--hrp-dur) var(--ease-curve) forwards; will-change: transform, opacity; }
@keyframes hrp-pop{ 0%{ transform: scale(0); opacity: .85; } 100%{ transform: scale(var(--hrp-scale)); opacity: 0; } }
.hrp[data-style="glow"] .hrp-ring{ border: none; background: radial-gradient(circle, var(--hrp-color), transparent 68%); }
@media (prefers-reduced-motion: reduce){ .hrp{ cursor: default; } }

/* --- COMPONENT · Water Ripple (WebGL) */
.wtr-scene{ width: 100%; height: 100%; display: grid; place-items: center; padding: 10px; }
.wtr{ display: block; width: min(470px, 86%); aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); cursor: crosshair; background: #0c0d12; }

/* --- COMPONENT · Spotlight Reveal */
@property --spv-r{ syntax: "<length>"; inherits: true; initial-value: 0px; }
.spv-scene{ width: 100%; height: 100%; display: grid; place-items: center; padding: 10px; }
.spv{ position: relative; width: min(460px, 86%); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); cursor: none;
  --spv-mx: 50%; --spv-my: 50%; --spv-r: 0px; --spv-ron: 130px; --spv-veil: .92; --spv-edge: 50%;
  background: linear-gradient(135deg, #1f6feb, #7c3aed 46%, #ec4899);
  transition: --spv-r .4s var(--ease-curve); }
.spv.on{ --spv-r: var(--spv-ron); }
.spv-label{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .01em; }
.spv-label small{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; opacity: .85; }
.spv-veil{ position: absolute; inset: 0; pointer-events: none; background: rgba(6,7,12, var(--spv-veil));
  -webkit-mask: radial-gradient(circle var(--spv-r) at var(--spv-mx) var(--spv-my), transparent 0, transparent var(--spv-edge), #000 100%);
  mask: radial-gradient(circle var(--spv-r) at var(--spv-mx) var(--spv-my), transparent 0, transparent var(--spv-edge), #000 100%); }
@media (prefers-reduced-motion: reduce){ .spv{ transition: none; cursor: default; } }

/* --- UI BLOCK · Spotlight Hero */
.hero-blk{
  position: relative; overflow: hidden; width: 100%; min-height: min(78vh, 560px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center; padding: 8% 9%;
  background: radial-gradient(120% 90% at 50% -10%, rgba(74,107,255,.10), transparent 60%), #0A0A0B;
}
.hero-blk[data-align="left"]{ align-items: flex-start; text-align: left; }
.hero-blk .hb-glow{
  position: absolute; left: 50%; top: -30%; width: 70%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, var(--hb-accent, #4A6BFF), transparent 62%);
  filter: blur(60px); opacity: .5; pointer-events: none;
  animation: hb-drift 9s var(--ease-curve) infinite alternate;
}
@keyframes hb-drift{ from{ transform: translate(-58%, -6%) scale(1); } to{ transform: translate(-42%, 6%) scale(1.15); } }
@media (prefers-reduced-motion: reduce){ .hero-blk .hb-glow{ animation: none; } }
.hero-blk .hb-eyebrow{
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.03);
}
.hero-blk .hb-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--hb-accent, #4A6BFF); }
.hero-blk h1{
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(30px, 6.4vw, 64px); margin: 0; max-width: 18ch; color: var(--ink);
}
.hero-blk h1 em{ font-style: normal; background: linear-gradient(100deg, var(--hb-accent, #4A6BFF), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-blk .hb-sub{ position: relative; z-index: 1; color: var(--ink-soft); font-size: clamp(14px, 2vw, 18px); max-width: 46ch; }
.hero-blk .hb-cta{ position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-blk[data-align="left"] .hb-cta{ justify-content: flex-start; }
.hero-blk .hb-btn{
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; cursor: pointer;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve), background .15s var(--ease-curve);
}
.hero-blk .hb-btn.primary{ background: var(--paper); color: #0A0A0B; border-color: var(--paper); }
.hero-blk .hb-btn.primary:hover{ transform: translateY(-2px); }
.hero-blk .hb-btn.ghost:hover{ border-color: var(--ink-soft); }

/* --- UI Blocks: full-width preview frame + grouped index */
.uib-stage{ border: 1px solid var(--line-2); border-radius: var(--r-3); overflow: hidden; background: var(--stage); box-shadow: var(--shadow-stage); }
.uib-group{ margin-top: 30px; }
.uib-group:first-child{ margin-top: 0; }
.uib-group-h{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }

/* --- UI BLOCK · Aurora Hero (light + dark, responsive) */
.hx{
  --bg:#0b0b11; --fg:#f4f2ec; --muted:#9a98a4; --line:rgba(244,242,236,.14);
  --accent:#6b8afd; --accent2:#ff7eb0; --btn:#f4f2ec; --btnfg:#0b0b11; --glow:.6;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-height: min(82vh, 600px);
  background: var(--bg); color: var(--fg);
  font-family: 'Open Sans', var(--font-body);
  transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.hx:has(.hx-theme:checked){
  --bg:#f4f3ee; --fg:#15141a; --muted:#5e5c67; --line:rgba(21,20,26,.14);
  --accent:#4a6bff; --accent2:#ff5fa2; --btn:#15141a; --btnfg:#f4f3ee; --glow:.32;
}
.hx-bg{ position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx-bg span{ position: absolute; border-radius: 50%; filter: blur(64px); opacity: var(--glow); will-change: transform; }
.hx-bg .a{ width: 48%; aspect-ratio: 1; left: -4%; top: -18%; background: radial-gradient(circle, var(--accent), transparent 60%); animation: hx-f1 15s var(--ease-curve) infinite alternate; }
.hx-bg .b{ width: 44%; aspect-ratio: 1; right: -6%; top: 6%; background: radial-gradient(circle, var(--accent2), transparent 60%); opacity: calc(var(--glow)*.7); animation: hx-f2 19s var(--ease-curve) infinite alternate; }
@keyframes hx-f1{ to{ transform: translate(14%,18%) scale(1.18); } }
@keyframes hx-f2{ to{ transform: translate(-12%,12%) scale(1.12); } }
.hx-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,44px); }
.hx-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.hx-logo .mk{ width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #fff; font-size: 13px; }
.hx-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.hx-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.hx-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.hx-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hx-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.hx-switch .hx-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hx-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.hx-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.hx:has(.hx-theme:checked) .hx-switch .knob{ transform: translateX(22px); }
.hx-navcta{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; background: var(--btn); color: var(--btnfg); text-decoration: none; }
.hx-burger, .hx-burgerbtn{ display: none; }
.hx-body{ position: relative; z-index: 1; margin: auto; width: min(820px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(24px,7vh,64px) 0; }
.hx-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hx-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hx h1{ font-family: 'Open Sans', sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(34px,6.5vw,64px); margin: 0; max-width: 18ch; }
.hx h1 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-sub{ color: var(--muted); font-size: clamp(15px,2vw,19px); max-width: 52ch; }
.hx-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.hx-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 11px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.hx-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.hx-btn.primary:hover{ transform: translateY(-2px); }
.hx-btn.ghost:hover{ border-color: var(--fg); }
.hx-body > *{ animation: hx-rise .7s var(--ease-curve) both; }
.hx-body > :nth-child(2){ animation-delay: .06s; }
.hx-body > :nth-child(3){ animation-delay: .12s; }
.hx-body > :nth-child(4){ animation-delay: .18s; }
@keyframes hx-rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@media (max-width: 760px){
  .hx-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,44px); right: clamp(16px,4vw,44px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .hx:has(.hx-burger:checked) .hx-menu{ display: flex; }
  .hx-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
  .hx-navcta{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .hx-bg span{ animation: none; } .hx-body > *{ animation: none; } }

/* --- UI BLOCK · Split Hero (light + dark, responsive) */
.hs{
  --bg:#0c0d12; --panel:#14151d; --fg:#f3f4f8; --muted:#9a9caa; --line:rgba(243,244,248,.12);
  --accent:#34d6a5; --accent2:#5b8cff; --btn:#f3f4f8; --btnfg:#0c0d12;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.hs:has(.hs-theme:checked){
  --bg:#f5f6f8; --panel:#ffffff; --fg:#12131a; --muted:#5d6170; --line:rgba(18,19,26,.12);
  --accent:#0fae84; --accent2:#3f6bff; --btn:#12131a; --btnfg:#f5f6f8;
}
.hs-grid{ position: absolute; inset: -2px; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(120% 80% at 76% 22%, #000 28%, transparent 74%);
  mask-image: radial-gradient(120% 80% at 76% 22%, #000 28%, transparent 74%);
  animation: hs-pan 26s linear infinite; }
@keyframes hs-pan{ to{ background-position: 42px 42px; } }
.hs::before{ content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -8%; top: -14%; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 60%); filter: blur(72px); opacity: .26; pointer-events: none; }
.hs-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.hs-logo{ display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.hs-logo .mk{ width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #04130d; font-size: 13px; font-weight: 900; }
.hs-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.hs-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.hs-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.hs-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hs-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.hs-switch .hs-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hs-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.hs-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.hs:has(.hs-theme:checked) .hs-switch .knob{ transform: translateX(22px); }
.hs-burger, .hs-burgerbtn{ display: none; }
.hs-main{ position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px,5vw,60px);
  padding: clamp(16px,3vh,36px) clamp(16px,4vw,48px) clamp(40px,7vh,72px); }
.hs-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; }
.hs-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hs h1{ font-family: var(--font-body); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(32px,5vw,56px); margin: 0; }
.hs h1 em{ font-style: normal; color: var(--accent); }
.hs-sub{ color: var(--muted); font-size: clamp(15px,1.6vw,18px); max-width: 46ch; }
.hs-cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.hs-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 11px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.hs-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.hs-btn.primary:hover{ transform: translateY(-2px); }
.hs-btn.ghost:hover{ border-color: var(--fg); }
.hs-trust{ display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.hs-avatars{ display: flex; }
.hs-avatars span{ width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.hs-avatars span:first-child{ margin-left: 0; }
.hs-visual{ position: relative; display: flex; justify-content: center; }
.hs-win{ position: relative; width: min(100%, 380px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); overflow: hidden; animation: hs-float 7s var(--ease-curve) infinite alternate; }
.hs-winbar{ display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hs-winbar i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.hs-winbar span{ margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.hs-winbody{ padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.hs-stat{ display: flex; align-items: baseline; justify-content: space-between; }
.hs-stat span{ font-size: 12px; color: var(--muted); } .hs-stat b{ font-size: 24px; font-weight: 800; }
.hs-chart{ display: flex; align-items: flex-end; gap: 8px; height: 116px; }
.hs-chart i{ flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  animation: hs-bar 2.8s var(--ease-curve) infinite alternate; animation-delay: var(--d); }
@keyframes hs-bar{ from{ transform: scaleY(.8); } to{ transform: scaleY(1); } }
.hs-chip{ position: absolute; left: -14px; bottom: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: #04130d; font-size: 12px; font-weight: 700; box-shadow: 0 14px 32px -10px rgba(0,0,0,.5); animation: hs-bob 4.5s var(--ease-curve) infinite alternate; }
@keyframes hs-float{ to{ transform: translateY(-12px); } }
@keyframes hs-bob{ to{ transform: translateY(-9px); } }
.hs-copy > *{ animation: hs-rise .7s var(--ease-curve) both; }
.hs-copy > :nth-child(2){ animation-delay: .06s; } .hs-copy > :nth-child(3){ animation-delay: .12s; }
.hs-copy > :nth-child(4){ animation-delay: .18s; } .hs-copy > :nth-child(5){ animation-delay: .24s; }
@keyframes hs-rise{ from{ opacity: 0; transform: translateY(14px); } }
@media (max-width: 860px){
  .hs-main{ grid-template-columns: 1fr; gap: 34px; }
  .hs-copy{ align-items: center; text-align: center; }
  .hs-visual{ order: 2; }
}
@media (max-width: 760px){
  .hs-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .hs:has(.hs-burger:checked) .hs-menu{ display: flex; }
  .hs-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
}
@media (max-width: 520px){ .hs-visual{ display: none; } }
@media (prefers-reduced-motion: reduce){ .hs-grid, .hs-win, .hs-chart i, .hs-chip, .hs-copy > *{ animation: none; } }

/* --- UI BLOCK · Beam Hero (light + dark, responsive) */
.bh{
  --bg:#0a0810; --fg:#f4f1f7; --muted:#a39bb0; --line:rgba(244,241,247,.13);
  --accent:#a855f7; --accent2:#ec4899; --btn:#f4f1f7; --btnfg:#0a0810; --glow:.55;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bh:has(.bh-theme:checked){
  --bg:#faf7fb; --fg:#1a1320; --muted:#675c70; --line:rgba(26,19,32,.12);
  --accent:#9333ea; --accent2:#db2777; --btn:#1a1320; --btnfg:#faf7fb; --glow:.30;
}
.bh-beam{ position: absolute; left: 50%; top: 36%; width: 135%; aspect-ratio: 1; transform: translate(-50%,-50%); z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0 7%, color-mix(in srgb, var(--accent) 82%, transparent) 13%, transparent 21%,
    transparent 49%, color-mix(in srgb, var(--accent2) 72%, transparent) 60%, transparent 69%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, #000 0, #000 36%, transparent 72%);
  mask: radial-gradient(closest-side, #000 0, #000 36%, transparent 72%);
  opacity: var(--glow); filter: blur(30px); animation: bh-rot 22s linear infinite; }
@keyframes bh-rot{ to{ transform: translate(-50%,-50%) rotate(1turn); } }
.bh-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.bh-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.bh-logo .mk{ width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #fff; font-size: 12px; }
.bh-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.bh-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.bh-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bh-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bh-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.bh-switch .bh-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bh-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bh-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bh:has(.bh-theme:checked) .bh-switch .knob{ transform: translateX(22px); }
.bh-navcta{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; background: var(--btn); color: var(--btnfg); text-decoration: none; }
.bh-burger, .bh-burgerbtn{ display: none; }
.bh-body{ position: relative; z-index: 1; margin: auto; width: min(820px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: clamp(20px,5vh,52px) 0; }
.bh-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bh-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bh h1{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(34px,6.6vw,68px); margin: 0; max-width: 16ch; }
.bh h1 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-sub{ color: var(--muted); font-size: clamp(15px,2vw,19px); max-width: 50ch; }
.bh-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.bh-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.bh-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.bh-btn.primary:hover{ transform: translateY(-2px); }
.bh-btn.ghost:hover{ border-color: var(--fg); }
.bh-marquee{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.bh-mq-label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bh-mq{ width: min(560px, 92%); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.bh-mq-track{ display: flex; gap: 38px; width: max-content; animation: bh-scroll 20s linear infinite; }
.bh-mq-track span{ font-weight: 700; font-size: 15px; color: var(--muted); opacity: .75; white-space: nowrap; }
@keyframes bh-scroll{ to{ transform: translateX(-50%); } }
.bh-body > *{ animation: bh-rise .7s var(--ease-curve) both; }
.bh-body > :nth-child(2){ animation-delay: .06s; } .bh-body > :nth-child(3){ animation-delay: .12s; }
.bh-body > :nth-child(4){ animation-delay: .18s; } .bh-body > :nth-child(5){ animation-delay: .24s; }
@keyframes bh-rise{ from{ opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px){
  .bh-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .bh:has(.bh-burger:checked) .bh-menu{ display: flex; }
  .bh-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
  .bh-navcta{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .bh-beam, .bh-mq-track, .bh-body > *{ animation: none; } }

/* --- UI BLOCK · Glass Hero (frosted card over a colour mesh, light + dark) */
.gh{
  --bg:#0a0b12; --fg:#f3f3f8; --muted:#a6a6b6; --line:rgba(243,243,248,.14);
  --glass:rgba(255,255,255,.06); --glass-bd:rgba(255,255,255,.16); --mesh:.55;
  --btn:#f3f3f8; --btnfg:#0a0b12;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.gh:has(.gh-theme:checked){
  --bg:#eceef5; --fg:#15141c; --muted:#5d6070; --line:rgba(21,20,28,.12);
  --glass:rgba(255,255,255,.5); --glass-bd:rgba(255,255,255,.75); --mesh:.5; --btn:#15141c; --btnfg:#eceef5;
}
.gh-mesh{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.gh-mesh span{ position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: var(--mesh); will-change: transform; }
.gh-mesh span:nth-child(1){ background: #6366f1; left: -10%; top: -16%; animation: gh-m1 16s var(--ease-curve) infinite alternate; }
.gh-mesh span:nth-child(2){ background: #06b6d4; right: -12%; top: -10%; animation: gh-m2 19s var(--ease-curve) infinite alternate; }
.gh-mesh span:nth-child(3){ background: #ec4899; left: 8%; bottom: -26%; animation: gh-m3 21s var(--ease-curve) infinite alternate; }
.gh-mesh span:nth-child(4){ background: #f59e0b; right: -4%; bottom: -22%; opacity: calc(var(--mesh)*.8); animation: gh-m4 24s var(--ease-curve) infinite alternate; }
@keyframes gh-m1{ to{ transform: translate(22%,16%) scale(1.2); } }
@keyframes gh-m2{ to{ transform: translate(-18%,14%) scale(1.15); } }
@keyframes gh-m3{ to{ transform: translate(14%,-16%) scale(1.18); } }
@keyframes gh-m4{ to{ transform: translate(-16%,-12%) scale(1.1); } }
.gh-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px;
  margin: 14px clamp(12px,3vw,28px) 0; padding: 11px 14px; border: 1px solid var(--glass-bd); border-radius: 14px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.gh-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.gh-logo .mk{ width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #ec4899); display: grid; place-items: center; color: #fff; font-size: 13px; }
.gh-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 16px; padding: 0; }
.gh-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.gh-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.gh-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.gh-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.gh-switch .gh-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gh-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.gh-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.gh:has(.gh-theme:checked) .gh-switch .knob{ transform: translateX(22px); }
.gh-navcta{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; background: var(--btn); color: var(--btnfg); text-decoration: none; }
.gh-burger, .gh-burgerbtn{ display: none; }
.gh-wrap{ position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px,6vh,64px) clamp(16px,4vw,40px); }
.gh-card{ position: relative; width: min(680px, 100%); padding: clamp(28px,5vw,54px); border: 1px solid var(--glass-bd); border-radius: 24px;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; overflow: hidden; }
.gh-card::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%); pointer-events: none; }
.gh-card > *{ position: relative; }
.gh-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--glass-bd); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gh-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: #6366f1; }
.gh h1{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(30px,5.4vw,58px); margin: 0; max-width: 15ch; }
.gh h1 em{ font-style: normal; background: linear-gradient(100deg, #6366f1, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gh-sub{ color: var(--muted); font-size: clamp(15px,1.8vw,18px); max-width: 44ch; }
.gh-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.gh-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 11px; font-size: 14px; text-decoration: none; border: 1px solid var(--glass-bd); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.gh-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.gh-btn.primary:hover{ transform: translateY(-2px); }
.gh-btn.ghost:hover{ border-color: var(--fg); }
.gh-card{ animation: gh-rise .8s var(--ease-curve) both; }
@keyframes gh-rise{ from{ opacity: 0; transform: translateY(18px) scale(.985); } }
@media (max-width: 760px){
  .gh-menu{ position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 2px; margin: 0; padding: 8px; border: 1px solid var(--glass-bd); border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); display: none; }
  .gh:has(.gh-burger:checked) .gh-menu{ display: flex; }
  .gh-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
  .gh-navcta{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .gh-mesh span, .gh-card{ animation: none; } }

/* --- UI BLOCK · Editorial Hero (typographic, light + dark, responsive) */
.eh{
  --bg:#0b0b0d; --fg:#f5f4f0; --muted:#9b9a93; --line:rgba(245,244,240,.14); --dot:rgba(245,244,240,.16);
  --accent:#ff5a36; --btn:#f5f4f0; --btnfg:#0b0b0d;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.eh:has(.eh-theme:checked){
  --bg:#f3f1ea; --fg:#16150f; --muted:#5f5d54; --line:rgba(22,21,15,.14); --dot:rgba(22,21,15,.16); --accent:#e0432a; --btn:#16150f; --btnfg:#f3f1ea;
}
.eh-dots{ position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask: linear-gradient(180deg, #000 28%, transparent 96%); mask: linear-gradient(180deg, #000 28%, transparent 96%); animation: eh-drift 28s linear infinite; }
@keyframes eh-drift{ to{ background-position: 24px 24px; } }
.eh::after{ content: ""; position: absolute; z-index: -1; right: -6%; bottom: -14%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 60%); opacity: .14; filter: blur(64px); pointer-events: none; }
.eh-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.eh-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.eh-logo .mk{ width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.eh-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.eh-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.eh-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.eh-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.eh-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.eh-switch .eh-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.eh-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.eh-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.eh:has(.eh-theme:checked) .eh-switch .knob{ transform: translateX(22px); }
.eh-burger, .eh-burgerbtn{ display: none; }
.eh-main{ position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(16px,4vh,40px) clamp(16px,5vw,56px) clamp(40px,8vh,80px); }
.eh-kicker{ display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eh-kicker::before{ content: ""; width: 46px; height: 1px; background: var(--accent); transform-origin: left; animation: eh-line 3.2s var(--ease-curve) infinite; }
@keyframes eh-line{ 0%,100%{ transform: scaleX(1); } 50%{ transform: scaleX(1.7); } }
.eh h1{ font-family: 'Open Sans', sans-serif; font-weight: 800; letter-spacing: -.025em; line-height: 1; font-size: clamp(40px,9vw,100px); margin: 0; max-width: 14ch; }
.eh h1 em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.6px var(--accent); }
.eh-sub{ color: var(--muted); font-size: clamp(15px,1.8vw,19px); max-width: 48ch; }
.eh-cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.eh-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 4px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.eh-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.eh-btn.primary:hover{ transform: translateY(-2px); }
.eh-btn.ghost:hover{ border-color: var(--fg); }
.eh-side{ position: absolute; right: clamp(12px,3vw,28px); top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.eh-main > *{ animation: eh-rise .7s var(--ease-curve) both; }
.eh-main > :nth-child(2){ animation-delay: .07s; } .eh-main > :nth-child(3){ animation-delay: .14s; } .eh-main > :nth-child(4){ animation-delay: .21s; }
@keyframes eh-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 980px){ .eh-side{ display: none; } }
@media (max-width: 760px){
  .eh-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .eh:has(.eh-burger:checked) .eh-menu{ display: flex; }
  .eh-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){ .eh-dots, .eh-kicker::before, .eh-main > *{ animation: none; } }

/* --- UI BLOCK · Terminal Hero (typing terminal, light + dark, responsive) */
.th{
  --bg:#07090b; --panel:#0e1216; --fg:#e9f1ec; --muted:#8fa39a; --line:rgba(233,241,236,.12);
  --accent:#3ddc84; --btn:#e9f1ec; --btnfg:#07090b; --glow:.4;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.th:has(.th-theme:checked){
  --bg:#f1f5f2; --panel:#ffffff; --fg:#0d1512; --muted:#5a6b62; --line:rgba(13,21,18,.12); --accent:#10a050; --btn:#0d1512; --btnfg:#f1f5f2; --glow:.18;
}
.th::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--glow);
  background: radial-gradient(78% 50% at 50% -8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); }
.th-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.th-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--fg); text-decoration: none; }
.th-logo .mk{ width: 24px; height: 24px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #04130d; font-size: 13px; font-weight: 900; }
.th-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.th-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.th-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.th-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.th-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.th-switch .th-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.th-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.th-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.th:has(.th-theme:checked) .th-switch .knob{ transform: translateX(22px); }
.th-burger, .th-burgerbtn{ display: none; }
.th-body{ position: relative; z-index: 1; margin: auto; width: min(720px, 92%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(16px,4vh,40px) 0 clamp(30px,5vh,56px); }
.th-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.th-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.th h1{ font-family: var(--font-body); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(30px,5.4vw,56px); margin: 0; max-width: 16ch; }
.th h1 em{ font-style: normal; color: var(--accent); }
.th-sub{ color: var(--muted); font-size: clamp(15px,1.8vw,18px); max-width: 46ch; }
.th-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.th-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.th-btn.primary{ background: var(--accent); color: #04130d; border-color: var(--accent); }
.th-btn.primary:hover{ transform: translateY(-2px); }
.th-btn.ghost:hover{ border-color: var(--fg); }
.th-term{ width: min(560px, 100%); margin-top: 6px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.6); font-family: var(--font-mono); font-size: 13px; }
.th-termbar{ display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.th-termbar i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.th-termbar span{ margin-left: 8px; color: var(--muted); font-size: 11px; }
.th-termbody{ padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; line-height: 1.5; }
.th-prompt{ color: var(--accent); }
.th-cmd{ display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0;
  border-right: 2px solid var(--accent); animation: th-type 2s steps(22,end) .4s forwards, th-blink .9s step-end infinite; }
@keyframes th-type{ to{ width: 22ch; } }
@keyframes th-blink{ 50%{ border-color: transparent; } }
.th-out{ color: var(--muted); opacity: 0; transform: translateY(4px); animation: th-fade .4s var(--ease-curve) forwards; }
.th-out:nth-child(2){ animation-delay: 2.7s; } .th-out:nth-child(3){ animation-delay: 2.95s; } .th-out:nth-child(4){ animation-delay: 3.25s; }
.th-out .ok{ color: var(--accent); }
@keyframes th-fade{ to{ opacity: 1; transform: none; } }
.th-body > *{ animation: th-rise .7s var(--ease-curve) both; }
.th-body > :nth-child(2){ animation-delay: .06s; } .th-body > :nth-child(3){ animation-delay: .12s; }
.th-body > :nth-child(4){ animation-delay: .18s; } .th-body > :nth-child(5){ animation-delay: .24s; }
@keyframes th-rise{ from{ opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px){
  .th-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .th:has(.th-burger:checked) .th-menu{ display: flex; }
  .th-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .th-body > *{ animation: none; }
  .th-cmd{ width: auto !important; border-color: transparent; animation: none; }
  .th-out{ opacity: 1; transform: none; animation: none; }
}

/* --- UI BLOCK · Showcase Hero (3D product window, light + dark, responsive) */
.sc{
  --bg:#0a0c14; --panel:#121624; --panel2:#0e1220; --fg:#eef0f6; --muted:#9aa0b5; --line:rgba(238,240,246,.12);
  --accent:#6d8cff; --accent2:#33d6ff; --btn:#eef0f6; --btnfg:#0a0c14; --glow:.5;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(92vh, 720px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.sc:has(.sc-theme:checked){
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f1f3f9; --fg:#10121c; --muted:#5b6076; --line:rgba(16,18,28,.1); --accent:#3b5bff; --accent2:#0bb6e0; --btn:#10121c; --btnfg:#eef1f7; --glow:.26;
}
.sc::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--glow);
  background: radial-gradient(72% 50% at 50% 80%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%); }
.sc-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.sc-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.sc-logo .mk{ width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #06121f; font-size: 13px; font-weight: 900; }
.sc-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.sc-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve), background .15s var(--ease-curve); }
.sc-menu a:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.sc-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sc-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.sc-switch .sc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.sc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.sc:has(.sc-theme:checked) .sc-switch .knob{ transform: translateX(22px); }
.sc-navcta{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; background: var(--btn); color: var(--btnfg); text-decoration: none; }
.sc-burger, .sc-burgerbtn{ display: none; }
.sc-body{ position: relative; z-index: 2; margin: 0 auto; width: min(760px,92%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(12px,3vh,30px) 0 clamp(8px,2vh,18px); }
.sc-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sc-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sc h1{ font-family: var(--font-body); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(30px,5.4vw,58px); margin: 0; max-width: 16ch; }
.sc h1 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-sub{ color: var(--muted); font-size: clamp(15px,1.8vw,18px); max-width: 46ch; }
.sc-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sc-btn{ display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .15s var(--ease-curve); }
.sc-btn.primary{ background: var(--btn); color: var(--btnfg); border-color: var(--btn); }
.sc-btn.primary:hover{ transform: translateY(-2px); }
.sc-btn.ghost:hover{ border-color: var(--fg); }
.sc-stage{ position: relative; z-index: 1; flex: 1; perspective: 1600px; display: flex; justify-content: center; align-items: flex-start; padding: clamp(18px,4vh,40px) clamp(16px,4vw,40px) 0; overflow: hidden; }
.sc-card{ width: min(880px,100%); border: 1px solid var(--line); border-top-left-radius: 14px; border-top-right-radius: 14px; background: var(--panel); overflow: hidden; transform-origin: top center; transform: rotateX(26deg);
  box-shadow: 0 -8px 80px -24px color-mix(in srgb, var(--accent) 55%, transparent), 0 40px 80px -30px rgba(0,0,0,.6);
  animation: sc-float 8s var(--ease-curve) infinite alternate; }
@keyframes sc-float{ from{ transform: rotateX(26deg) translateY(0); } to{ transform: rotateX(21deg) translateY(-12px); } }
.sc-chrome{ display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); }
.sc-chrome i{ width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.sc-chrome .url{ margin-left: 10px; height: 18px; flex: 1; max-width: 320px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.sc-app{ display: grid; grid-template-columns: 150px 1fr; min-height: 320px; }
.sc-side{ border-right: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 11px; background: var(--panel2); }
.sc-side .r{ height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.sc-side .r.lg{ width: 70%; } .sc-side .r.sm{ width: 50%; }
.sc-side .r.on{ background: var(--accent); width: 85%; }
.sc-main{ padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sc-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sc-tile{ height: 70px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.sc-tile:first-child{ background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent), transparent); border-color: transparent; }
.sc-block{ height: 116px; border-radius: 12px; border: 1px solid var(--line); background:
  radial-gradient(120% 120% at 0 0, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%), color-mix(in srgb, var(--fg) 3%, transparent); }
.sc-body > *{ animation: sc-rise .7s var(--ease-curve) both; }
.sc-body > :nth-child(2){ animation-delay: .06s; } .sc-body > :nth-child(3){ animation-delay: .12s; } .sc-body > :nth-child(4){ animation-delay: .18s; }
.sc-stage{ animation: sc-rise .9s var(--ease-curve) .2s both; }
@keyframes sc-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 760px){
  .sc-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); z-index: 4; }
  .sc:has(.sc-burger:checked) .sc-menu{ display: flex; }
  .sc-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
  .sc-navcta{ display: none; }
}
@media (max-width: 640px){ .sc-card{ transform: none !important; animation: none; } .sc-app{ grid-template-columns: 1fr; } .sc-side{ display: none; } }
@media (prefers-reduced-motion: reduce){ .sc-card{ animation: none; } .sc-body > *, .sc-stage{ animation: none; } }

/* --- UI BLOCK · Brutalist Hero (flat, bordered, hard shadows, light + dark) */
.bru{
  --bg:#181613; --fg:#f7f4ea; --muted:#a9a395; --card:#211e19; --bd:#f3efe3; --accent:#ffd83d; --accent-ink:#16140f;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(86vh, 640px); background: var(--bg); color: var(--fg);
  font-family: var(--font-body); transition: background .35s steps(4), color .35s steps(4);
}
.bru:has(.bru-theme:checked){
  --bg:#f4f1e6; --fg:#16140f; --muted:#5b574c; --card:#ffffff; --bd:#16140f;
}
.bru-deco{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bru-deco span{ position: absolute; border: 2.5px solid var(--bd); opacity: .5; }
.bru-deco .c1{ width: 150px; height: 150px; border-radius: 50%; right: 6%; top: 14%; animation: bru-d1 11s ease-in-out infinite alternate; }
.bru-deco .c2{ width: 110px; height: 110px; left: 5%; bottom: 12%; transform: rotate(12deg); animation: bru-d2 13s ease-in-out infinite alternate; }
.bru-deco .c3{ width: 0; height: 0; right: 16%; bottom: 16%; border: none; border-left: 42px solid transparent; border-right: 42px solid transparent; border-bottom: 70px solid var(--bd); opacity: .28; animation: bru-d1 15s ease-in-out infinite alternate; }
@keyframes bru-d1{ to{ transform: translateY(-16px) rotate(8deg); } }
@keyframes bru-d2{ to{ transform: translateY(14px) rotate(-6deg); } }
.bru-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; margin: 16px clamp(12px,3vw,28px) 0; padding: 10px 12px; border: 2.5px solid var(--bd); background: var(--card); box-shadow: 5px 5px 0 var(--bd); }
.bru-logo{ display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; letter-spacing: -.01em; color: var(--fg); text-decoration: none; text-transform: uppercase; }
.bru-logo .mk{ width: 26px; height: 26px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 2.5px solid var(--bd); font-size: 14px; font-weight: 900; }
.bru-menu{ display: flex; gap: 2px; list-style: none; margin: 0 0 0 14px; padding: 0; }
.bru-menu a{ display: block; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--fg); text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.bru-menu a:hover{ background: var(--accent); color: var(--accent-ink); }
.bru-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bru-switch{ position: relative; width: 54px; height: 28px; border: 2.5px solid var(--bd); background: var(--bg); display: inline-flex; align-items: center; padding: 2px; cursor: pointer; }
.bru-switch .bru-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bru-switch .knob{ width: 20px; height: 20px; background: var(--bd); transition: transform .2s steps(3); }
.bru:has(.bru-theme:checked) .bru-switch .knob{ transform: translateX(24px); background: var(--accent); }
.bru-navcta{ display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); border: 2.5px solid var(--bd); text-decoration: none; box-shadow: 3px 3px 0 var(--bd); }
.bru-burger, .bru-burgerbtn{ display: none; }
.bru-body{ position: relative; z-index: 1; margin: auto; width: min(900px, 92%); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: clamp(24px,6vh,64px) 0; }
.bru-sticker{ display: inline-block; transform: rotate(-5deg); background: var(--accent); color: var(--accent-ink); border: 2.5px solid var(--bd); box-shadow: 4px 4px 0 var(--bd); padding: 6px 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; animation: bru-wiggle 4s ease-in-out infinite; }
@keyframes bru-wiggle{ 0%,100%{ transform: rotate(-5deg); } 50%{ transform: rotate(-1deg); } }
.bru h1{ font-family: var(--font-body); font-weight: 900; letter-spacing: -.02em; line-height: .98; font-size: clamp(34px,7vw,76px); margin: 0; max-width: 15ch; }
.bru h1 em{ font-style: normal; background: var(--accent); color: var(--accent-ink); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 4px 4px 0 var(--bd); }
.bru-sub{ color: var(--muted); font-size: clamp(15px,1.9vw,19px); max-width: 50ch; font-weight: 500; }
.bru-cta{ display: flex; gap: 14px; flex-wrap: wrap; }
.bru-btn{ display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; border: 2.5px solid var(--bd); color: var(--fg); background: var(--card); box-shadow: 5px 5px 0 var(--bd); transition: transform .12s steps(2), box-shadow .12s steps(2); }
.bru-btn.primary{ background: var(--accent); color: var(--accent-ink); }
.bru-btn:hover{ transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--bd); }
.bru-body > *{ animation: bru-rise .5s steps(6) both; }
.bru-body > :nth-child(2){ animation-delay: .08s; } .bru-body > :nth-child(3){ animation-delay: .16s; } .bru-body > :nth-child(4){ animation-delay: .24s; }
@keyframes bru-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 760px){
  .bru-menu{ position: absolute; top: calc(100% + 6px); left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 6px; border: 2.5px solid var(--bd); background: var(--card); box-shadow: 5px 5px 0 var(--bd); display: none; }
  .bru:has(.bru-burger:checked) .bru-menu{ display: flex; }
  .bru-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border: 2.5px solid var(--bd); background: var(--card); cursor: pointer; color: var(--fg); font-size: 18px; }
  .bru-navcta{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .bru-deco span, .bru-sticker, .bru-body > *{ animation: none; } }

/* --- UI BLOCK · Retro Hero (synthwave sun + neon grid, light + dark) */
.syn{
  --sky1:#1b0b3a; --sky2:#4a1c7a; --horizon:#ff5fa8; --floor:#0c0826; --grid:#ff5fa8;
  --fg:#fdf2ff; --muted:#cdbbe8; --neon1:#ff5fa8; --neon2:#34e7ff; --sun1:#ffe45e; --sun2:#ff7eb3; --sun3:#b14bff;
  --line:rgba(253,242,255,.18);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: min(92vh, 720px); color: var(--fg); font-family: var(--font-body);
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 42%, var(--horizon) 56%, var(--floor) 56%);
  transition: color .5s var(--ease-curve);
}
.syn:has(.syn-theme:checked){
  --sky1:#ffe6c2; --sky2:#ffc0d8; --horizon:#ff6fa3; --floor:#f0e6ff; --grid:#c061ff;
  --fg:#2a1340; --muted:#6b4f86; --neon1:#e0457f; --neon2:#0aa6c4; --sun1:#ffd24a; --sun2:#ff8fc0; --sun3:#9d4bff;
  --line:rgba(42,19,64,.18);
}
.syn-sun{ position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); width: min(300px, 60vw); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--sun1), var(--sun2) 55%, var(--sun3));
  filter: drop-shadow(0 0 50px color-mix(in srgb, var(--neon1) 60%, transparent));
  -webkit-mask: linear-gradient(#000,#000) top/100% 50% no-repeat, repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 9px) bottom/100% 50% no-repeat;
  mask: linear-gradient(#000,#000) top/100% 50% no-repeat, repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 9px) bottom/100% 50% no-repeat;
  animation: syn-pulse 5s var(--ease-curve) infinite alternate; }
@keyframes syn-pulse{ to{ filter: drop-shadow(0 0 70px color-mix(in srgb, var(--neon1) 75%, transparent)); } }
.syn-grid{ position: absolute; left: 50%; bottom: 0; width: 260%; height: 46%; transform: translateX(-50%) perspective(380px) rotateX(68deg); transform-origin: bottom center; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 2px, transparent 2px), linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 54px 54px; opacity: .85;
  -webkit-mask: linear-gradient(transparent, #000 55%); mask: linear-gradient(transparent, #000 55%);
  animation: syn-scroll 1.5s linear infinite; }
@keyframes syn-scroll{ from{ background-position: 0 0; } to{ background-position: 0 54px; } }
.syn-nav{ position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 18px clamp(16px,4vw,48px); }
.syn-logo{ display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: .02em; color: var(--fg); text-decoration: none; text-shadow: 0 0 14px color-mix(in srgb, var(--neon1) 60%, transparent); }
.syn-logo .mk{ width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--neon1), var(--neon2)); box-shadow: 0 0 14px color-mix(in srgb, var(--neon1) 60%, transparent); }
.syn-menu{ display: flex; gap: 4px; list-style: none; margin: 0 0 0 22px; padding: 0; }
.syn-menu a{ display: block; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s var(--ease-curve); }
.syn-menu a:hover{ color: var(--fg); text-shadow: 0 0 12px var(--neon2); }
.syn-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.syn-switch{ position: relative; width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.syn-switch .syn-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.syn-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.syn-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); box-shadow: 0 0 12px color-mix(in srgb, var(--neon1) 60%, transparent); }
.syn:has(.syn-theme:checked) .syn-switch .knob{ transform: translateX(22px); }
.syn-burger, .syn-burgerbtn{ display: none; }
.syn-body{ position: relative; z-index: 1; margin: 0 auto; width: min(760px, 92%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: clamp(30px,7vh,84px) 0 0; }
.syn-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--neon2); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); box-shadow: 0 0 18px color-mix(in srgb, var(--neon2) 30%, transparent), inset 0 0 18px color-mix(in srgb, var(--neon2) 12%, transparent); }
.syn-badge .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--neon2); box-shadow: 0 0 8px var(--neon2); }
.syn h1{ font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(34px,6.6vw,70px); margin: 0; max-width: 15ch; text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--neon1) 70%, transparent), 0 0 42px color-mix(in srgb, var(--sun3) 55%, transparent); }
.syn h1 em{ font-style: normal; color: var(--neon2); text-shadow: 0 0 18px var(--neon2), 0 0 42px color-mix(in srgb, var(--neon2) 60%, transparent); }
.syn-sub{ color: var(--muted); font-size: clamp(15px,2vw,19px); max-width: 48ch; }
.syn-cta{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.syn-btn{ display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), box-shadow .2s var(--ease-curve); }
.syn-btn.primary{ background: var(--neon1); color: #fff; border-color: var(--neon1); box-shadow: 0 0 26px color-mix(in srgb, var(--neon1) 55%, transparent); }
.syn-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 0 40px color-mix(in srgb, var(--neon1) 75%, transparent); }
.syn-btn.ghost{ border-color: var(--neon2); box-shadow: inset 0 0 20px color-mix(in srgb, var(--neon2) 18%, transparent); }
.syn-btn.ghost:hover{ box-shadow: inset 0 0 20px color-mix(in srgb, var(--neon2) 30%, transparent), 0 0 24px color-mix(in srgb, var(--neon2) 30%, transparent); }
.syn-body > *{ animation: syn-rise .7s var(--ease-curve) both; }
.syn-body > :nth-child(2){ animation-delay: .06s; } .syn-body > :nth-child(3){ animation-delay: .12s; } .syn-body > :nth-child(4){ animation-delay: .18s; }
@keyframes syn-rise{ from{ opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px){
  .syn-menu{ position: absolute; top: 64px; left: clamp(16px,4vw,48px); right: clamp(16px,4vw,48px); flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--sky1); display: none; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); z-index: 4; }
  .syn:has(.syn-burger:checked) .syn-menu{ display: flex; }
  .syn-burgerbtn{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--fg); font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){ .syn-sun, .syn-grid, .syn-body > *{ animation: none; } }

/* --- UI BLOCK · Arc Carousel (trig-positioned, premium depth) */
.arc{
  --card:#16161e; --cline:rgba(255,255,255,.10); --cink:#f4f2ee; --csoft:#9b99a6; --acc:#6d8cff;
  position: relative; width: 100%; padding: 20px 0 30px; user-select: none; outline: none; touch-action: pan-y;
}
.arc-track{ position: relative; width: 100%; }
.arc-card{ position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--cline); box-shadow: 0 22px 50px -26px rgba(0,0,0,.6);
  cursor: pointer; will-change: transform, opacity, filter; transition: box-shadow .3s var(--ease-curve); }
.arc-card.is-center{ box-shadow: 0 34px 80px -28px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
.arc-thumb{ height: 58%; position: relative; }
.arc-thumb .ini{ position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3vw,42px); color: rgba(255,255,255,.95); text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.arc-meta{ flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.arc-name{ font-weight: 700; font-size: 14px; color: var(--cink); letter-spacing: -.01em; }
.arc-role{ font-size: 12px; color: var(--csoft); }
.arc-chip{ margin-top: 7px; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--cline); border-radius: 999px; color: var(--csoft); }
.arc-btn{ position: absolute; z-index: 300; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--cline); color: var(--cink); cursor: pointer; transform: translateY(-50%);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transition: transform .15s var(--ease-curve), background .15s var(--ease-curve); }
.arc-btn:hover{ background: color-mix(in srgb, var(--acc) 22%, var(--card)); transform: translateY(-50%) scale(1.08); }
.arc-btn:focus-visible{ outline: 2px solid var(--acc); outline-offset: 3px; }
.arc-prev{ left: max(10px, 3%); } .arc-next{ right: max(10px, 3%); }
.arc.dragging{ cursor: grabbing; } .arc.dragging .arc-card{ transition: none; }
.arc:focus-visible{ box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 50%, transparent); border-radius: 16px; }
.arc-live{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .arc-card{ transition: none; } }

/* --- UI BLOCK · Side Rail Menu (hidden frosted hover-rail) */
.rail{
  --ink:#f2f2f6; --muted:#9a9ba6; --glass:rgba(24,25,31,.62); --glassbd:rgba(255,255,255,.13);
  --active:rgba(255,255,255,.10); --accent:#7c8cff; --page:#0f1014; --pageln:rgba(255,255,255,.06);
  --spring:cubic-bezier(.34,1.06,.5,1);
  position: relative; height: min(78vh, 600px); overflow: hidden; border-radius: 18px; isolation: isolate;
  border: 1px solid rgba(255,255,255,.08); background: var(--page); color: var(--ink); font-family: var(--font-body);
}
.rail-page{ position: absolute; inset: 0; padding: 26px 26px 26px 44px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.rail-pbar{ display: flex; align-items: center; gap: 12px; height: 30px; color: var(--muted); font-size: 13px; font-weight: 500; }
.rail-pbar .dots{ display: flex; gap: 6px; margin-left: auto; }
.rail-pbar .dots i{ width: 10px; height: 10px; border-radius: 50%; background: var(--pageln); }
.rail-prow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rail-card{ height: 116px; border-radius: 14px; border: 1px solid var(--pageln); background: rgba(255,255,255,.025); }
.rail-card.wide{ grid-column: 1 / -1; height: 70px; }
.rail-scrim{ position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.20); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.rail-dock{ position: absolute; left: 0; top: 0; bottom: 0; width: 32px; z-index: 20; }
.rail-handle{ position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 12px; height: 130px; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border-radius: 7px; background: var(--glass); border: 1px solid var(--glassbd);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.55); transition: opacity .4s var(--spring), transform .55s var(--spring); }
.rail-handle i{ width: 3px; height: 3px; border-radius: 50%; background: var(--muted); transition: background .3s ease; }
.rail-handle:hover i{ background: var(--ink); }
.rail-handle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.rail-menu{ position: absolute; left: 10px; top: 50%; transform: translate(calc(-100% - 16px), -50%);
  width: 222px; display: flex; flex-direction: column; gap: 3px; padding: 13px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glassbd);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.65); opacity: 0; pointer-events: none;
  transition: transform .58s var(--spring), opacity .42s ease; }
.rail-mtop{ display: flex; align-items: center; gap: 10px; padding: 3px 8px 11px; }
.rail-logo{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #33d6ff); display: grid; place-items: center; color: #06121f; font-weight: 900; font-size: 13px; }
.rail-name{ font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.rail-item{ display: flex; align-items: center; gap: 13px; height: 42px; padding: 0 11px; border-radius: 11px; color: var(--muted); text-decoration: none; cursor: pointer; transition: background .2s var(--spring), color .2s ease; }
.rail-item:hover{ background: var(--active); color: var(--ink); }
.rail-item.active{ background: var(--active); color: var(--ink); }
.rail-item.active .ic{ color: var(--accent); }
.rail-item .ic{ flex: 0 0 20px; display: grid; place-items: center; color: inherit; }
.rail-item .ic svg{ width: 18px; height: 18px; }
.rail-item .lb{ font-size: 14px; opacity: 0; transform: translateX(-4px); transition: opacity .35s ease, transform .35s var(--spring); }
.rail-sep{ height: 1px; margin: 8px 8px; background: var(--glassbd); }
.rail:has(.rail-dock:hover) .rail-menu,
.rail:has(.rail-dock:focus-within) .rail-menu,
.rail:has(.rail-tap:checked) .rail-menu{ transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.rail:has(.rail-dock:hover) .rail-handle,
.rail:has(.rail-dock:focus-within) .rail-handle,
.rail:has(.rail-tap:checked) .rail-handle{ opacity: 0; transform: translateY(-50%) translateX(-8px); pointer-events: none; }
.rail:has(.rail-dock:hover) .rail-item .lb,
.rail:has(.rail-dock:focus-within) .rail-item .lb,
.rail:has(.rail-tap:checked) .rail-item .lb{ opacity: 1; transform: none; transition-delay: .16s; }
.rail:has(.rail-dock:hover) .rail-scrim,
.rail:has(.rail-dock:focus-within) .rail-scrim,
.rail:has(.rail-tap:checked) .rail-scrim{ opacity: 1; }
.rail:has(.rail-tap:checked) .rail-scrim{ pointer-events: auto; }
@media (max-width: 560px){ .rail-prow{ grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce){
  .rail-menu, .rail-handle, .rail-item .lb, .rail-scrim{ transition: opacity .2s ease; }
  .rail:has(.rail-dock:hover) .rail-menu, .rail:has(.rail-dock:focus-within) .rail-menu, .rail:has(.rail-tap:checked) .rail-menu{ transform: translate(0,-50%); }
}

/* --- UI BLOCK · Icon Rail (hover-to-expand sidebar) */
.ril{
  --ink:#f2f2f6; --muted:#9a9ba6; --glassbd:rgba(255,255,255,.10); --active:rgba(255,255,255,.10); --accent:#7c8cff; --page:#0f1014; --pageln:rgba(255,255,255,.06); --spring:cubic-bezier(.34,1.06,.5,1);
  position: relative; height: min(78vh, 600px); overflow: hidden; border-radius: 18px; isolation: isolate;
  border: 1px solid rgba(255,255,255,.08); background: var(--page); color: var(--ink); font-family: var(--font-body);
}
.ril-page{ position: absolute; inset: 0; padding: 26px 26px 26px 92px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.ril-pbar{ display: flex; align-items: center; gap: 12px; height: 30px; color: var(--muted); font-size: 13px; font-weight: 500; }
.ril-pbar .dots{ display: flex; gap: 6px; margin-left: auto; }
.ril-pbar .dots i{ width: 10px; height: 10px; border-radius: 50%; background: var(--pageln); }
.ril-prow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ril-card{ height: 116px; border-radius: 14px; border: 1px solid var(--pageln); background: rgba(255,255,255,.025); }
.ril-card.wide{ grid-column: 1 / -1; height: 70px; }
.ril-bar{ position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; width: 68px; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; overflow: hidden; white-space: nowrap;
  background: rgba(20,21,27,.94); border-right: 1px solid var(--glassbd); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: width .42s var(--spring), box-shadow .42s var(--spring); }
.ril-bar:hover, .ril-bar:focus-within{ width: 226px; box-shadow: 34px 0 64px -30px rgba(0,0,0,.7); }
.ril-top{ display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 4px; margin-bottom: 6px; }
.ril-logo{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #33d6ff); display: grid; place-items: center; color: #06121f; font-weight: 900; font-size: 13px; }
.ril-name{ font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; opacity: 0; transition: opacity .3s ease; }
.ril-item{ display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 10px; border-radius: 11px; color: var(--muted); text-decoration: none; cursor: pointer; transition: background .2s var(--spring), color .2s ease; }
.ril-item:hover{ background: var(--active); color: var(--ink); }
.ril-item.active{ background: var(--active); color: var(--ink); }
.ril-item.active .ic{ color: var(--accent); }
.ril-item .ic{ flex: 0 0 24px; display: grid; place-items: center; color: inherit; }
.ril-item .ic svg{ width: 19px; height: 19px; }
.ril-av{ width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #33d6ff, var(--accent)); color: #06121f; font-size: 10px; font-weight: 800; }
.ril-item .lb{ font-size: 14px; opacity: 0; transition: opacity .3s ease; }
.ril-bar:hover .lb, .ril-bar:focus-within .lb, .ril-bar:hover .ril-name, .ril-bar:focus-within .ril-name{ opacity: 1; transition-delay: .08s; }
.ril-sep{ height: 1px; margin: 8px 6px; background: var(--glassbd); }
.ril-foot{ margin-top: auto; }
@media (prefers-reduced-motion: reduce){ .ril-bar{ transition: width .2s ease; } .ril-item .lb, .ril-name{ transition: none; } }

/* --- UI BLOCK · Pill Rail (floating dock, sliding indicator) */
.rnv{
  --ink:#f2f2f6; --muted:#9a9ba6; --glass:rgba(24,25,31,.66); --glassbd:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff; --page:#0f1014; --pageln:rgba(255,255,255,.06); --spring:cubic-bezier(.34,1.3,.5,1); --ih:52px;
  position: relative; height: min(78vh, 600px); overflow: hidden; border-radius: 18px; isolation: isolate;
  border: 1px solid rgba(255,255,255,.08); background: var(--page); color: var(--ink); font-family: var(--font-body);
}
.rnv-page{ position: absolute; inset: 0; padding: 26px 26px 26px 108px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.rnv-pbar{ display: flex; align-items: center; gap: 12px; height: 30px; color: var(--muted); font-size: 13px; font-weight: 500; }
.rnv-pbar .dots{ display: flex; gap: 6px; margin-left: auto; }
.rnv-pbar .dots i{ width: 10px; height: 10px; border-radius: 50%; background: var(--pageln); }
.rnv-prow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rnv-card{ height: 116px; border-radius: 14px; border: 1px solid var(--pageln); background: rgba(255,255,255,.025); }
.rnv-card.wide{ grid-column: 1 / -1; height: 70px; }
.rnv-pill{ position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; padding: 8px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glassbd); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 26px 60px -26px rgba(0,0,0,.65); }
.rnv-ind{ position: absolute; left: 8px; right: 8px; top: 8px; height: var(--ih); border-radius: 16px; background: linear-gradient(140deg, var(--accent), var(--accent2)); box-shadow: 0 8px 20px -8px var(--accent); z-index: 0; transition: transform .5s var(--spring); }
.rnv-item{ position: relative; z-index: 1; width: var(--ih); height: var(--ih); display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: color .25s ease; }
.rnv-r{ position: absolute; opacity: 0; width: 0; height: 0; }
.rnv-item .ic svg{ width: 21px; height: 21px; display: block; }
.rnv-r:checked ~ .ic{ color: #fff; }
.rnv-item:hover{ color: var(--ink); }
.rnv-item .tip{ position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 5px 10px; border-radius: 8px; background: #16171f; border: 1px solid var(--glassbd); color: var(--ink); font-size: 12.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s var(--spring); }
.rnv-item .tip::before{ content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #16171f; }
.rnv-item:hover .tip{ opacity: 1; transform: translateY(-50%) translateX(0); }
.rnv-pill:has(.rnv-item:nth-of-type(1) .rnv-r:checked) .rnv-ind{ transform: translateY(0); }
.rnv-pill:has(.rnv-item:nth-of-type(2) .rnv-r:checked) .rnv-ind{ transform: translateY(var(--ih)); }
.rnv-pill:has(.rnv-item:nth-of-type(3) .rnv-r:checked) .rnv-ind{ transform: translateY(calc(var(--ih) * 2)); }
.rnv-pill:has(.rnv-item:nth-of-type(4) .rnv-r:checked) .rnv-ind{ transform: translateY(calc(var(--ih) * 3)); }
.rnv-pill:has(.rnv-item:nth-of-type(5) .rnv-r:checked) .rnv-ind{ transform: translateY(calc(var(--ih) * 4)); }
.rnv-r:focus-visible ~ .ic{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce){ .rnv-ind, .rnv-item .tip{ transition: none; } }

/* --- SLIDER · Range Slider (single value) */
.rgs{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --track:rgba(255,255,255,.13); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.rgs:has(.rgs-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --track:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.rgs-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.rgs-switch .rgs-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rgs-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.rgs-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.rgs:has(.rgs-theme:checked) .rgs-switch .knob{ transform: translateX(22px); }
.rgs-card{ width: 100%; max-width: 380px; padding: clamp(22px,3vw,30px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 64px -38px rgba(0,0,0,.6); }
.rgs-top{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.rgs-lbl{ font-size: 13px; color: var(--muted); }
.rgs-val{ font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.rgs-range{ -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p,40%), var(--track) var(--p,40%)); }
.rgs-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; transition: transform .15s var(--ease-curve), box-shadow .15s; }
.rgs-range::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.12); }
.rgs-range::-moz-range-track{ height: 8px; border-radius: 999px; background: transparent; }
.rgs-range::-moz-range-thumb{ width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; }
.rgs-range:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 999px; }
.rgs-caps{ display: flex; justify-content: space-between; margin-top: 11px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce){ .rgs-range::-webkit-slider-thumb{ transition: none; } }

/* --- SLIDER · Dual Range (min ~ max) */
.rgd{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --track:rgba(255,255,255,.13); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.rgd:has(.rgd-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --track:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.rgd-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.rgd-switch .rgd-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rgd-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.rgd-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.rgd:has(.rgd-theme:checked) .rgd-switch .knob{ transform: translateX(22px); }
.rgd-card{ width: 100%; max-width: 380px; padding: clamp(22px,3vw,30px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 64px -38px rgba(0,0,0,.6); }
.rgd-top{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.rgd-lbl{ font-size: 13px; color: var(--muted); }
.rgd-val{ font-size: 17px; font-weight: 600; }
.rgd-val b{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }
.rgd-slider{ position: relative; height: 24px; }
.rgd-trk{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 8px; border-radius: 999px; background: var(--track); }
.rgd-fill{ position: absolute; top: 50%; transform: translateY(-50%); height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.rgd-range{ position: absolute; left: 0; top: 0; width: 100%; height: 24px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.rgd-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; transition: transform .15s var(--ease-curve); }
.rgd-range::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.12); }
.rgd-range::-moz-range-track{ background: transparent; }
.rgd-range::-moz-range-thumb{ pointer-events: auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; }
.rgd-range:focus-visible{ outline: none; }
.rgd-range:focus-visible::-webkit-slider-thumb{ box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px var(--accent); }
.rgd-caps{ display: flex; justify-content: space-between; margin-top: 13px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce){ .rgd-range::-webkit-slider-thumb{ transition: none; } }

/* --- SLIDER · Stepped Range (snapping + ticks) */
.rgt{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --track:rgba(255,255,255,.13); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.rgt:has(.rgt-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --track:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.rgt-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.rgt-switch .rgt-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rgt-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.rgt-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.rgt:has(.rgt-theme:checked) .rgt-switch .knob{ transform: translateX(22px); }
.rgt-card{ width: 100%; max-width: 400px; padding: clamp(22px,3vw,30px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 64px -38px rgba(0,0,0,.6); }
.rgt-top{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.rgt-lbl{ font-size: 13px; color: var(--muted); }
.rgt-val{ font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.rgt-range{ -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p,50%), var(--track) var(--p,50%)); }
.rgt-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; transition: transform .15s var(--ease-curve); }
.rgt-range::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.12); }
.rgt-range::-moz-range-track{ height: 8px; border-radius: 999px; background: transparent; }
.rgt-range::-moz-range-thumb{ width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); cursor: grab; }
.rgt-range:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 999px; }
.rgt-ticks{ display: flex; justify-content: space-between; margin-top: 13px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.rgt-ticks span{ position: relative; padding-top: 12px; flex: 1; text-align: center; transition: color .2s var(--ease-curve); }
.rgt-ticks span:first-child{ text-align: left; }
.rgt-ticks span:last-child{ text-align: right; }
.rgt-ticks span::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 6px; border-radius: 2px; background: var(--track); }
.rgt-ticks span:first-child::before{ left: 1px; transform: none; }
.rgt-ticks span:last-child::before{ left: auto; right: 1px; transform: none; }
.rgt-ticks span.on{ color: var(--fg); font-weight: 700; }
.rgt-ticks span.on::before{ background: var(--accent); }
@media (prefers-reduced-motion: reduce){ .rgt-range::-webkit-slider-thumb{ transition: none; } }

/* --- BUTTON · Gradient Glow */
.btg{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btg:has(.btg-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.btg-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btg-switch .btg-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btg-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btg-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btg:has(.btg-theme:checked) .btg-switch .knob{ transform: translateX(22px); }
.btg-row{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.btg-btn{ border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .2s var(--ease-curve), box-shadow .3s var(--ease-curve), filter .2s var(--ease-curve); }
.btg-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--accent) 85%, transparent); filter: brightness(1.07); }
.btg-btn:active{ transform: translateY(0) scale(.98); }
.btg-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btg-ghost{ background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btg-ghost:hover{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--line)), 0 10px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); filter: none; }
@media (prefers-reduced-motion: reduce){ .btg-btn{ transition: none; } }

/* --- BUTTON · Shine Sweep */
.bts{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bts:has(.bts-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.bts-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bts-switch .bts-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bts-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bts-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bts:has(.bts-theme:checked) .bts-switch .knob{ transform: translateX(22px); }
.bts-btn{ position: relative; overflow: hidden; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 32px; border-radius: 13px; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 75%, transparent); transition: transform .2s var(--ease-curve); }
.bts-btn:hover{ transform: translateY(-1px); }
.bts-btn:active{ transform: translateY(0) scale(.98); }
.bts-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.bts-shine{ position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transition: left .65s var(--ease-curve); }
.bts-btn:hover .bts-shine{ left: 150%; }
@media (prefers-reduced-motion: reduce){ .bts-shine{ display: none; } }

/* --- BUTTON · 3D Push */
.btp{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --surf:#22242e;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btp:has(.btp-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --surf:#e3e6ef; }
.btp-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btp-switch .btp-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btp-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btp-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btp:has(.btp-theme:checked) .btp-switch .knob{ transform: translateX(22px); }
.btp-row{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.btp-btn{ border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 14px; color: #fff;
  background: var(--accent); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000); transition: transform .09s var(--ease-curve), box-shadow .09s var(--ease-curve), filter .15s; }
.btp-btn:hover{ filter: brightness(1.06); }
.btp-btn:active{ transform: translateY(5px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btp-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
.btp-alt{ color: var(--fg); background: var(--surf); box-shadow: 0 6px 0 color-mix(in srgb, var(--surf) 60%, #000); }
.btp-alt:active{ box-shadow: 0 1px 0 color-mix(in srgb, var(--surf) 60%, #000); }
@media (prefers-reduced-motion: reduce){ .btp-btn{ transition: none; } }

/* --- BUTTON · Border Draw */
.btb{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.16); --accent:#7c8cff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btb:has(.btb-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.18); --accent:#3b5bff; }
.btb-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btb-switch .btb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btb:has(.btb-theme:checked) .btb-switch .knob{ transform: translateX(22px); }
.btb-btn{ cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 32px; border-radius: 12px; border: 0; color: var(--fg);
  background-color: transparent; box-shadow: inset 0 0 0 1px var(--line);
  background-image: linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent));
  background-repeat: no-repeat;
  background-position: top left, top right, bottom right, bottom left;
  background-size: 0% 2px, 2px 0%, 0% 2px, 2px 0%;
  transition: background-size .35s var(--ease-curve), color .35s var(--ease-curve); }
.btb-btn:hover{ color: var(--fg); background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
.btb-btn:active{ transform: translateY(1px); }
.btb-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .btb-btn{ transition: none; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; } }

/* --- BUTTON · Ripple */
.btr{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btr:has(.btr-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.btr-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btr-switch .btr-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btr-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btr-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btr:has(.btr-theme:checked) .btr-switch .knob{ transform: translateX(22px); }
.btr-btn{ position: relative; overflow: hidden; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 13px; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 75%, transparent); transition: transform .15s var(--ease-curve); }
.btr-btn:active{ transform: scale(.98); }
.btr-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btr-rip{ position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); pointer-events: none; animation: btr-rip .6s ease-out; }
@keyframes btr-rip{ to{ transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .btr-rip{ animation-duration: .01s; } }

/* --- BUTTON · Arrow Slide */
.bta{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --surf:rgba(255,255,255,.05); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bta:has(.bta-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --surf:rgba(0,0,0,.04); --accent:#3b5bff; --accent2:#0bb6e0; }
.bta-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bta-switch .bta-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bta-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bta-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bta:has(.bta-theme:checked) .bta-switch .knob{ transform: translateX(22px); }
.bta-btn{ display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 999px; color: var(--fg);
  background: var(--surf); border: 1px solid var(--line); transition: transform .25s var(--ease-curve), border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.bta-btn svg{ width: 18px; height: 18px; transition: transform .3s var(--ease-curve), color .3s var(--ease-curve); }
.bta-lb{ transition: transform .3s var(--ease-curve); }
.bta-btn:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--accent) 70%, transparent); }
.bta-btn:hover svg{ transform: translateX(6px); color: var(--accent); }
.bta-btn:hover .bta-lb{ transform: translateX(2px); }
.bta-btn:active{ transform: translateY(0) scale(.98); }
.bta-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .bta-btn, .bta-btn svg, .bta-lb{ transition: none; } }

/* --- BUTTON · Outline Fill */
.bto{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.16); --accent:#7c8cff; --accent2:#33d6ff; --on:#06121f;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bto:has(.bto-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.18); --accent:#3b5bff; --accent2:#0bb6e0; --on:#ffffff; }
.bto-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bto-switch .bto-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bto-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bto-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bto:has(.bto-theme:checked) .bto-switch .knob{ transform: translateX(22px); }
.bto-btn{ position: relative; overflow: hidden; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 12px; border: 1px solid var(--accent); background: transparent; color: var(--accent); transition: color .35s var(--ease-curve), border-color .35s var(--ease-curve); }
.bto-btn span{ position: relative; z-index: 1; }
.bto-btn::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, var(--accent), var(--accent2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-curve); }
.bto-btn:hover{ color: var(--on); border-color: transparent; }
.bto-btn:hover::before{ transform: scaleX(1); }
.bto-btn:active{ transform: translateY(1px); }
.bto-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .bto-btn, .bto-btn::before{ transition: none; } }

/* --- BUTTON · Neon Flare */
.btf{
  --bg:#08070d; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --neon:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btf:has(.btf-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --neon:#0bb6e0; }
.btf-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btf-switch .btf-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btf-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btf-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btf:has(.btf-theme:checked) .btf-switch .knob{ transform: translateX(22px); }
.btf-btn{ cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .04em; padding: 15px 34px; border-radius: 12px; background: transparent; color: var(--neon);
  border: 2px solid var(--neon); text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 70%, transparent);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--neon) 60%, transparent), inset 0 0 8px -4px color-mix(in srgb, var(--neon) 60%, transparent);
  transition: color .3s var(--ease-curve), background .3s var(--ease-curve), box-shadow .3s var(--ease-curve), text-shadow .3s var(--ease-curve); }
.btf-btn:hover{ color: #04121a; background: var(--neon); text-shadow: none;
  box-shadow: 0 0 22px 0 color-mix(in srgb, var(--neon) 75%, transparent), 0 0 46px 0 color-mix(in srgb, var(--neon) 45%, transparent); }
.btf-btn:active{ transform: translateY(1px); }
.btf-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .btf-btn{ transition: none; } }

/* --- BUTTON · Magnetic */
.btm{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff; --spring:cubic-bezier(.34,1.4,.5,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btm:has(.btm-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.btm-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btm-switch .btm-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btm-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btm-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btm:has(.btm-theme:checked) .btm-switch .knob{ transform: translateX(22px); }
.btm-btn{ cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 16px 36px; border-radius: 999px; border: 0; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .4s var(--spring), box-shadow .3s var(--ease-curve); }
.btm-btn:hover{ box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.btm-lb{ display: inline-block; transition: transform .4s var(--spring); }
.btm-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce){ .btm-btn, .btm-lb{ transition: none; } }

/* --- BUTTON · Confirm */
.btx{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff; --ok:#22c55e;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btx:has(.btx-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; --ok:#16a34a; }
.btx-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btx-switch .btx-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btx-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btx-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btx:has(.btx-theme:checked) .btx-switch .knob{ transform: translateX(22px); }
.btx-btn{ position: relative; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; min-width: 170px; height: 50px; padding: 0 26px; border: 0; border-radius: 12px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 75%, transparent); transition: background .4s var(--ease-curve); }
.btx-btn[data-state="done"]{ background: var(--ok); }
.btx-lb{ position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-curve), transform .3s var(--ease-curve); }
.btx-lb svg{ width: 18px; height: 18px; }
.btx-btn[data-state="idle"] .btx-idle{ opacity: 1; transform: none; }
.btx-btn[data-state="loading"] .btx-load{ opacity: 1; transform: none; }
.btx-btn[data-state="done"] .btx-done{ opacity: 1; transform: none; }
.btx-spin{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: btx-spin .7s linear infinite; }
@keyframes btx-spin{ to{ transform: rotate(1turn); } }
.btx-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .btx-lb{ transition: opacity .2s ease; } .btx-spin{ animation-duration: 1.4s; } }

/* --- BUTTON · Icon Expand */
.bti{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff; --pink:#ff5d8f; --ease-pop:cubic-bezier(.34,1.1,.5,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bti:has(.bti-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; --pink:#e0457a; }
.bti-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bti-switch .bti-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bti-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bti-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bti:has(.bti-theme:checked) .bti-switch .knob{ transform: translateX(22px); }
.bti-row{ display: flex; gap: 16px; align-items: center; justify-content: center; }
.bti-btn{ display: inline-flex; align-items: center; height: 52px; width: 52px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; white-space: nowrap; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: width .4s var(--ease-pop), box-shadow .3s ease; }
.bti-pink{ background: linear-gradient(120deg, var(--pink), #ff9d6f); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--pink) 75%, transparent); }
.bti-btn .ic{ flex: 0 0 52px; display: grid; place-items: center; }
.bti-btn .ic svg{ width: 21px; height: 21px; }
.bti-lb{ font-weight: 700; font-size: 15px; opacity: 0; padding-right: 22px; transform: translateX(-6px); transition: opacity .3s var(--ease-pop), transform .4s var(--ease-pop); }
.bti-btn:hover, .bti-btn:focus-visible{ width: 170px; }
.bti-btn:hover .bti-lb, .bti-btn:focus-visible .bti-lb{ opacity: 1; transform: none; }
.bti-btn:focus-visible{ outline: 2px solid var(--fg); outline-offset: 3px; }
.bti-btn:active{ transform: scale(.97); }
@media (prefers-reduced-motion: reduce){ .bti-btn, .bti-lb{ transition: none; } }

/* --- BUTTON · Gradient Border */
@property --btz-a{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btz{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --face:#13141b; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btz:has(.btz-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --face:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.btz-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btz-switch .btz-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btz-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btz-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btz:has(.btz-theme:checked) .btz-switch .knob{ transform: translateX(22px); }
.btz-btn{ position: relative; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 32px; border: 0; border-radius: 13px; color: var(--fg); background: transparent; }
.btz-btn span{ position: relative; z-index: 1; }
.btz-btn::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--btz-a), var(--accent), var(--accent2), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --btz-a .8s var(--ease-curve); }
.btz-btn::after{ content: ""; position: absolute; inset: 2px; border-radius: 11px; background: var(--face); z-index: 0; }
.btz-btn:hover::before{ --btz-a: 360deg; }
.btz-btn:active{ transform: translateY(1px); }
.btz-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .btz-btn::before{ transition: none; } }

/* --- BUTTON · Glass */
.btj{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btj:has(.btj-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); }
.btj-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btj-switch .btj-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btj-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btj-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btj:has(.btj-theme:checked) .btj-switch .knob{ transform: translateX(22px); }
.btj-blob{ position: absolute; width: 230px; height: 230px; border-radius: 50%; filter: blur(46px); opacity: .75; z-index: 0; pointer-events: none; }
.btj-b1{ background: #7c8cff; left: 34%; top: 18%; }
.btj-b2{ background: #ff5d8f; right: 30%; bottom: 14%; }
.btj-row{ position: relative; z-index: 1; }
.btj-btn{ cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); transition: background .25s var(--ease-curve), transform .2s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.btj:has(.btj-theme:checked) .btj-btn{ color: #14151c; background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.7); }
.btj-btn:hover{ background: rgba(255,255,255,.24); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5); }
.btj:has(.btj-theme:checked) .btj-btn:hover{ background: rgba(255,255,255,.66); }
.btj-btn:active{ transform: translateY(0) scale(.98); }
.btj-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .btj-btn{ transition: none; } }

/* --- BUTTON · Pulse */
.btu{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btu:has(.btu-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.btu-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btu-switch .btu-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btu-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btu-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btu:has(.btu-theme:checked) .btu-switch .knob{ transform: translateX(22px); }
.btu-btn{ position: relative; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 15px 34px; border: 0; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); transition: transform .2s var(--ease-curve); }
.btu-btn::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); z-index: -1; animation: btu-pulse 2s ease-out infinite; }
@keyframes btu-pulse{ 0%{ transform: scale(1); opacity: .5; } 70%{ transform: scale(1.5); opacity: 0; } 100%{ opacity: 0; } }
.btu-btn:hover{ transform: translateY(-1px); }
.btu-btn:active{ transform: scale(.98); }
.btu-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce){ .btu-btn::before{ animation: none; opacity: 0; } }

/* --- BUTTON · Text Swap */
.bty{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff; --swap:cubic-bezier(.5,.1,.2,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bty:has(.bty-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.bty-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bty-switch .bty-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bty-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bty-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bty:has(.bty-theme:checked) .bty-switch .knob{ transform: translateX(22px); }
.bty-btn{ cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 0 34px; height: 50px; border: 0; border-radius: 12px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 75%, transparent); }
.bty-stack{ display: flex; flex-direction: column; height: 1.4em; line-height: 1.4em; overflow: hidden; }
.bty-stack span{ flex: 0 0 auto; height: 1.4em; transition: transform .35s var(--swap); }
.bty-btn:hover .bty-stack span{ transform: translateY(-1.4em); }
.bty-btn:active{ transform: scale(.98); }
.bty-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .bty-stack span{ transition: none; } }

/* --- BUTTON · Like Toggle */
.btk{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.12); --surf:rgba(255,255,255,.05); --like:#ff5d8f; --like-ease:cubic-bezier(.34,1.5,.5,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(36px,6vw,72px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.btk:has(.btk-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.14); --surf:rgba(0,0,0,.04); --like:#e0457a; }
.btk-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.btk-switch .btk-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.btk-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.btk-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.btk:has(.btk-theme:checked) .btk-switch .knob{ transform: translateX(22px); }
.btk-btn{ display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 999px; color: var(--fg);
  background: var(--surf); border: 1px solid var(--line); transition: border-color .2s ease, background .2s ease; counter-reset: likes 2400; }
.btk-btn:hover{ border-color: color-mix(in srgb, var(--like) 50%, var(--line)); }
.btk-cb{ position: absolute; opacity: 0; width: 0; height: 0; }
.btk-heart{ width: 22px; height: 22px; fill: transparent; color: var(--muted); transition: transform .35s var(--like-ease), color .2s ease, fill .2s ease; }
.btk-cb:checked ~ .btk-heart{ fill: var(--like); color: var(--like); transform: scale(1.18); }
.btk-cb:focus-visible ~ .btk-heart{ outline: 2px solid var(--like); outline-offset: 3px; border-radius: 4px; }
.btk-count::before{ content: counter(likes); }
.btk-cb:checked ~ .btk-count{ counter-reset: likes 2401; color: var(--like); }
@media (prefers-reduced-motion: reduce){ .btk-heart{ transition: fill .2s ease, color .2s ease; } }

/* --- UI BLOCK · Feature Section (grid, light + dark) */
.feat{
  --bg:#0b0c11; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.028);
  --accent:#6d8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px);
  transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.feat:has(.feat-theme:checked){
  --bg:#f6f7fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0;
}
.feat-glow{ position: absolute; left: 50%; top: -10%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%); opacity: .22; filter: blur(70px); }
.feat-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.feat-switch .feat-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.feat-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.feat-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.feat:has(.feat-theme:checked) .feat-switch .knob{ transform: translateX(22px); }
.feat-head{ position: relative; max-width: 660px; margin: 0 auto clamp(34px,5vw,54px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.feat-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.feat-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.feat h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(28px,4.4vw,48px); margin: 0; }
.feat h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feat-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,18px); max-width: 52ch; }
.feat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; }
.feat-card{ position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden;
  transition: transform .35s var(--ease-curve), border-color .35s var(--ease-curve), box-shadow .35s var(--ease-curve); }
.feat-card::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-curve);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.feat-card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--accent) 70%, transparent); }
.feat-card:hover::before{ opacity: 1; }
.feat-ic{ position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .35s var(--ease-curve); }
.feat-card:hover .feat-ic{ transform: scale(1.08) rotate(-3deg); }
.feat-ic svg{ width: 22px; height: 22px; }
.feat-card h3{ position: relative; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.feat-card p{ position: relative; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.feat-link{ position: relative; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; opacity: .9; transition: gap .25s var(--ease-curve), opacity .2s; }
.feat-link:hover{ gap: 10px; opacity: 1; }
.feat-card{ animation: feat-rise .6s var(--ease-curve) both; }
.feat-card:nth-child(2){ animation-delay: .06s; } .feat-card:nth-child(3){ animation-delay: .12s; }
.feat-card:nth-child(4){ animation-delay: .18s; } .feat-card:nth-child(5){ animation-delay: .24s; } .feat-card:nth-child(6){ animation-delay: .3s; }
@keyframes feat-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 860px){ .feat-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .feat-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .feat-card{ animation: none; } }

/* --- UI BLOCK · Bento Features (mixed-size grid, light + dark) */
.bnt{
  --bg:#0a0b10; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnt:has(.bnt-theme:checked){ --bg:#f5f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.bnt-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; }
.bnt-switch .bnt-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnt-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnt-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnt:has(.bnt-theme:checked) .bnt-switch .knob{ transform: translateX(22px); }
.bnt-head{ max-width: 620px; margin: 0 auto clamp(30px,4vw,46px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bnt-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bnt-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bnt h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(26px,4.2vw,44px); margin: 0; }
.bnt h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bnt-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 14px; max-width: 1080px; margin: 0 auto; }
.bnt-tile{ position: relative; display: flex; flex-direction: column; gap: 9px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden;
  transition: transform .35s var(--ease-curve), border-color .35s var(--ease-curve), box-shadow .35s var(--ease-curve); }
.bnt-tile::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-curve); background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); }
.bnt-tile:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--accent) 70%, transparent); }
.bnt-tile:hover::before{ opacity: 1; }
.bnt-tile.big{ grid-column: span 2; grid-row: span 2; }
.bnt-tile.wide{ grid-column: span 2; }
.bnt-ic{ position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.bnt-ic svg{ width: 20px; height: 20px; }
.bnt-title{ position: relative; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.bnt-tile.big .bnt-title{ font-size: 22px; }
.bnt-desc{ position: relative; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.bnt-tile.big .bnt-desc{ font-size: 15px; max-width: 40ch; }
.bnt-panel{ position: relative; margin-top: auto; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: rgba(127,140,255,.05); }
.bnt-panel .bar{ height: 28px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); }
.bnt-panel .body{ padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bnt-panel .ln{ height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.bnt-panel .ln.s{ width: 55%; } .bnt-panel .ln.m{ width: 78%; }
.bnt-bars{ position: relative; margin-top: auto; display: flex; align-items: flex-end; gap: 7px; height: 58px; }
.bnt-bars i{ flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); animation: bnt-bar 2.6s var(--ease-curve) infinite alternate; }
@keyframes bnt-bar{ from{ transform: scaleY(.7); } }
.bnt-stat{ position: relative; margin-top: auto; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(30px,4vw,44px); background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bnt-avs{ position: relative; margin-top: auto; display: flex; }
.bnt-avs span{ width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -9px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.bnt-avs span:first-child{ margin-left: 0; }
.bnt-chips{ position: relative; margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bnt-chips b{ font-weight: 600; font-size: 12px; color: var(--muted); padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; }
.bnt-tile{ animation: bnt-rise .6s var(--ease-curve) both; }
.bnt-tile:nth-child(2){ animation-delay: .06s; } .bnt-tile:nth-child(3){ animation-delay: .12s; }
.bnt-tile:nth-child(4){ animation-delay: .18s; } .bnt-tile:nth-child(5){ animation-delay: .24s; } .bnt-tile:nth-child(6){ animation-delay: .3s; }
@keyframes bnt-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 860px){ .bnt-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .bnt-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; } .bnt-tile, .bnt-tile.big, .bnt-tile.wide{ grid-column: auto; grid-row: auto; min-height: 160px; } }
@media (prefers-reduced-motion: reduce){ .bnt-tile, .bnt-bars i{ animation: none; } }

/* --- UI BLOCK · Feature Showcase (interactive tabs, light + dark) */
.ftb{
  --bg:#0b0c12; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.035); --hover:rgba(255,255,255,.05); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftb:has(.ftb-theme:checked){ --bg:#f5f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --hover:rgba(0,0,0,.035); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftb-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftb-switch .ftb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftb:has(.ftb-theme:checked) .ftb-switch .knob{ transform: translateX(22px); }
.ftb-wrap{ max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(26px,4vw,56px); align-items: center; }
.ftb-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftb-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ftb h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,3.6vw,40px); margin: 14px 0 0; max-width: 15ch; }
.ftb h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftb-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.ftb-r{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ftb-item{ display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: background .25s var(--ease-curve), border-color .25s var(--ease-curve); }
.ftb-item:hover{ background: var(--hover); }
.ftb-r:checked + .ftb-item{ background: var(--card); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ftb-r:focus-visible + .ftb-item{ outline: 2px solid var(--accent); outline-offset: 2px; }
.ftb-iico{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: var(--hover); border: 1px solid var(--line); transition: color .25s var(--ease-curve), background .25s var(--ease-curve), border-color .25s; }
.ftb-r:checked + .ftb-item .ftb-iico{ color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ftb-iico svg{ width: 19px; height: 19px; }
.ftb-it{ margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.ftb-id{ margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-curve), opacity .3s var(--ease-curve), margin .3s var(--ease-curve); }
.ftb-r:checked + .ftb-item .ftb-id{ max-height: 70px; opacity: 1; margin-top: 5px; }
.ftb-stage{ position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--card); min-height: 360px; overflow: hidden; box-shadow: 0 30px 70px -36px rgba(0,0,0,.6); }
.ftb-stage::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); }
.ftb-panel{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; text-align: center; opacity: 0; transform: translateY(12px) scale(.985); pointer-events: none; transition: opacity .45s var(--ease-curve), transform .55s var(--ease-curve); }
.ftb:has(#ftb-1:checked) .ftb-panel[data-i="1"],
.ftb:has(#ftb-2:checked) .ftb-panel[data-i="2"],
.ftb:has(#ftb-3:checked) .ftb-panel[data-i="3"],
.ftb:has(#ftb-4:checked) .ftb-panel[data-i="4"]{ opacity: 1; transform: none; pointer-events: auto; }
.ftb-cap{ font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.ftb-flow{ display: flex; flex-direction: column; align-items: center; }
.ftb-node{ width: 168px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.ftb-node .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ftb-node.alt .dot{ background: var(--accent2); }
.ftb-wire{ width: 2px; height: 22px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); }
.ftb-bars{ display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.ftb-bars i{ width: 26px; border-radius: 6px 6px 3px 3px; transform-origin: bottom; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); animation: ftb-bar 2.6s var(--ease-curve) infinite alternate; }
@keyframes ftb-bar{ from{ transform: scaleY(.72); } }
.ftb-avs{ display: flex; }
.ftb-avs span{ width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--card); margin-left: -13px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.ftb-avs span:first-child{ margin-left: 0; }
.ftb-rows{ display: flex; flex-direction: column; gap: 9px; width: 220px; }
.ftb-rows i{ height: 11px; border-radius: 6px; background: var(--hover); }
.ftb-rows i.s{ width: 60%; } .ftb-rows i.m{ width: 85%; }
.ftb-shield{ position: relative; width: 130px; height: 130px; display: grid; place-items: center; color: var(--accent); }
.ftb-shield svg{ width: 66px; height: 66px; position: relative; z-index: 1; }
.ftb-shield .ring{ position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%; animation: ftb-ring 3.2s var(--ease-curve) infinite; }
.ftb-shield .ring:nth-child(1){ width: 88px; height: 88px; } .ftb-shield .ring:nth-child(2){ width: 130px; height: 130px; animation-delay: 1.6s; }
@keyframes ftb-ring{ 0%{ transform: scale(.7); opacity: 0; } 30%{ opacity: .6; } 100%{ transform: scale(1.15); opacity: 0; } }
.ftb-chip{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--fg); background: var(--bg); }
@media (max-width: 820px){ .ftb-wrap{ grid-template-columns: 1fr; } .ftb-stage{ min-height: 300px; order: 2; } .ftb-left{ order: 1; } }
@media (prefers-reduced-motion: reduce){ .ftb-panel{ transition: opacity .3s ease; } .ftb-bars i, .ftb-shield .ring{ animation: none; } }

/* --- UI BLOCK · Feature Rows (alternating zig-zag, light + dark) */
.frw{
  --bg:#0b0c11; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.03); --hover:rgba(255,255,255,.06); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,88px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.frw:has(.frw-theme:checked){ --bg:#f5f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --hover:rgba(0,0,0,.04); --accent:#3b5bff; --accent2:#0bb6e0; }
.frw-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.frw-switch .frw-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.frw-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.frw-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.frw:has(.frw-theme:checked) .frw-switch .knob{ transform: translateX(22px); }
.frw-head{ max-width: 600px; margin: 0 auto clamp(36px,6vw,64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.frw-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.frw-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.frw h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(26px,4.2vw,44px); margin: 0; }
.frw h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.frw-rows{ max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(44px,6vw,84px); }
.frw-row{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.frw-row:nth-child(even) .frw-media{ order: -1; }
.frw-tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.frw-row h3{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(22px,3vw,32px); margin: 10px 0 0; }
.frw-row > div > p{ color: var(--muted); font-size: clamp(14px,1.5vw,16px); line-height: 1.6; margin: 12px 0 0; max-width: 42ch; }
.frw-checks{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.frw-checks li{ display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--fg); }
.frw-ck{ flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.frw-ck svg{ width: 12px; height: 12px; }
.frw-link{ margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; transition: gap .25s var(--ease-curve); }
.frw-link:hover{ gap: 10px; }
.frw-media{ position: relative; border: 1px solid var(--line); border-radius: 20px; background: var(--card); aspect-ratio: 4 / 3; overflow: hidden; padding: 22px; display: flex; box-shadow: 0 28px 64px -34px rgba(0,0,0,.6);
  transition: transform .4s var(--ease-curve); }
.frw-media::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); }
.frw-row:hover .frw-media{ transform: translateY(-5px); }
.frw-kan{ position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.frw-col{ background: var(--hover); border: 1px solid var(--line); border-radius: 12px; padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.frw-col .ch{ height: 6px; width: 55%; border-radius: 3px; background: var(--accent); opacity: .85; margin-bottom: 2px; }
.frw-pill{ height: 32px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.frw-pill.a{ border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }
.frw-chart{ position: relative; width: 100%; }
.frw-chart svg{ width: 100%; height: 100%; display: block; }
.frw-chart .area{ fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.frw-chart .ln{ fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.frw-statchip{ position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.frw-statchip b{ font-size: 16px; color: var(--fg); font-weight: 800; }
.frw-track{ position: relative; display: flex; align-items: flex-start; width: 100%; align-self: center; }
.frw-pt{ display: flex; flex-direction: column; align-items: center; gap: 9px; }
.frw-pt .d{ position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); }
.frw-pt .t{ font-size: 12px; color: var(--muted); }
.frw-pt.done .d{ background: var(--accent); border-color: var(--accent); }
.frw-pt.done .t, .frw-pt.live .t{ color: var(--fg); }
.frw-pt.live .d{ border-color: var(--accent); }
.frw-pt.live .d::after{ content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--accent); animation: frw-pulse 1.8s var(--ease-curve) infinite; }
.frw-bar{ flex: 1; height: 2px; margin: 8px 0 0; background: var(--line); border-radius: 2px; }
.frw-bar.done{ background: var(--accent); }
@keyframes frw-pulse{ 0%{ transform: scale(1); opacity: .8; } 100%{ transform: scale(2.1); opacity: 0; } }
.frw-ver{ position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.frw-ver .d{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); }
.frw-row{ animation: frw-rise .65s var(--ease-curve) both; }
.frw-row:nth-child(2){ animation-delay: .08s; } .frw-row:nth-child(3){ animation-delay: .16s; }
@keyframes frw-rise{ from{ opacity: 0; transform: translateY(20px); } }
@media (max-width: 760px){ .frw-row{ grid-template-columns: 1fr; gap: 22px; } .frw-row .frw-media{ order: -1; } }
@media (prefers-reduced-motion: reduce){ .frw-row, .frw-pt.live .d::after{ animation: none; } }

/* --- UI BLOCK · Feature Comparison (table, light + dark) */
.fcmp{
  --bg:#0b0c11; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.08); --card:rgba(255,255,255,.025); --hover:rgba(255,255,255,.06); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.fcmp:has(.fcmp-theme:checked){ --bg:#f5f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --hover:rgba(0,0,0,.04); --accent:#3b5bff; --accent2:#0bb6e0; }
.fcmp-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.fcmp-switch .fcmp-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fcmp-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.fcmp-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.fcmp:has(.fcmp-theme:checked) .fcmp-switch .knob{ transform: translateX(22px); }
.fcmp-head-c{ max-width: 560px; margin: 0 auto clamp(32px,5vw,50px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fcmp-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fcmp-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.fcmp h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.fcmp h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fcmp-table{ position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr; max-width: 780px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; box-shadow: 0 30px 70px -38px rgba(0,0,0,.6); animation: fcmp-rise .6s var(--ease-curve) both; }
@keyframes fcmp-rise{ from{ opacity: 0; transform: translateY(20px); } }
.fcmp-col{ display: flex; flex-direction: column; min-width: 0; }
.fcmp-col.acme{ background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.fcmp-cap{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; height: 86px; padding: 0 18px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 16px; }
.fcmp-col.acme .fcmp-cap, .fcmp-col.other .fcmp-cap{ align-items: center; text-align: center; }
.fcmp-brand{ display: inline-flex; align-items: center; gap: 8px; }
.fcmp-brand .m{ width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #06121f; font-size: 12px; font-weight: 900; }
.fcmp-rec{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fcmp-cell{ height: 54px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fcmp-col.feat .fcmp-cell{ color: var(--fg); }
.fcmp-col.acme .fcmp-cell, .fcmp-col.other .fcmp-cell{ justify-content: center; }
.fcmp-col .fcmp-cell:last-child, .fcmp-col .fcmp-cta{ border-bottom: none; }
.fcmp-cta{ height: 76px; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.fcmp-mk{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.fcmp-mk.y{ background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.fcmp-mk.y svg{ width: 13px; height: 13px; }
.fcmp-col.other .fcmp-mk.y{ background: var(--hover); color: var(--muted); }
.fcmp-mk.n{ color: var(--muted); font-size: 18px; line-height: 1; }
.fcmp-val{ font-size: 13px; color: var(--muted); }
.fcmp-col.acme .fcmp-val{ color: var(--fg); font-weight: 600; }
.fcmp-btn{ height: 40px; padding: 0 20px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s var(--ease-curve); }
.fcmp-btn:hover{ transform: translateY(-2px); }
@media (max-width: 560px){ .fcmp-table{ grid-template-columns: 1.4fr .8fr .8fr; } .fcmp-cell, .fcmp-cap{ padding: 0 10px; font-size: 13px; } .fcmp-cap{ font-size: 14px; } }
@media (prefers-reduced-motion: reduce){ .fcmp-table{ animation: none; } }

/* --- UI BLOCK · Orbiting Features (radial, animated, light + dark) */
.fo{
  --bg:#0a0b10; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:#13141b; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,80px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.fo:has(.fo-theme:checked){ --bg:#f4f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.fo-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 6; }
.fo-switch .fo-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fo-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.fo-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.fo:has(.fo-theme:checked) .fo-switch .knob{ transform: translateX(22px); }
.fo-head{ max-width: 560px; margin: 0 auto clamp(20px,4vw,36px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fo-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fo-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.fo h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.fo h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fo-scene{ --r: clamp(116px,30vw,158px); position: relative; width: calc(var(--r) * 2 + 130px); max-width: 100%; aspect-ratio: 1; margin: 10px auto 0; }
.fo-orbit{ position: absolute; top: 50%; left: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%,-50%); border: 1px dashed var(--line); border-radius: 50%; }
.fo-orbit.in{ width: calc(var(--r) * 2 - 84px); height: calc(var(--r) * 2 - 84px); opacity: .55; }
.fo-hub{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; z-index: 5;
  background: radial-gradient(circle at 50% 35%, var(--card), color-mix(in srgb, var(--card) 70%, var(--bg))); border: 1px solid var(--line); box-shadow: 0 14px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.fo-hub::after{ content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: fo-pulse 3.2s var(--ease-curve) infinite; }
@keyframes fo-pulse{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.35); opacity: 0; } }
.fo-hub .m{ width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: grid; place-items: center; color: #06121f; font-weight: 900; font-size: 20px; }
.fo-ring{ position: absolute; inset: 0; animation: fo-spin 46s linear infinite; }
@keyframes fo-spin{ to{ transform: rotate(360deg); } }
.fo-node{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1)); }
.fo-node::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: var(--r); transform: translateX(-50%); background: linear-gradient(var(--line), transparent); z-index: -1; }
.fo-keep{ animation: fo-spinrev 46s linear infinite; }
@keyframes fo-spinrev{ to{ transform: rotate(-360deg); } }
.fo-fix{ display: block; transform: rotate(calc(var(--a) * -1)); }
.fo-card{ display: flex; flex-direction: column; align-items: center; gap: 7px; width: 104px; }
.fo-ic{ width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px -12px rgba(0,0,0,.5); transition: transform .3s var(--ease-curve), border-color .3s var(--ease-curve), box-shadow .3s var(--ease-curve); }
.fo-ic svg{ width: 21px; height: 21px; }
.fo-lb{ font-size: 12.5px; font-weight: 600; color: var(--fg); }
.fo-card:hover .fo-ic{ transform: scale(1.12); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.fo-scene:hover .fo-ring, .fo-scene:hover .fo-keep{ animation-play-state: paused; }
@media (max-width: 560px){ .fo-card{ width: 84px; } .fo-lb{ font-size: 11px; } .fo-ic{ width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce){ .fo-ring, .fo-keep, .fo-hub::after{ animation: none; } }

/* --- UI BLOCK · Feature Timeline (vertical roadmap, light + dark) */
.ftl{
  --bg:#0b0c11; --fg:#f2f3f7; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,64px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftl:has(.ftl-theme:checked){ --bg:#f5f6fb; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ftl-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftl-switch .ftl-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftl-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftl-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftl:has(.ftl-theme:checked) .ftl-switch .knob{ transform: translateX(22px); }
.ftl-head{ max-width: 560px; margin: 0 auto clamp(32px,5vw,52px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ftl-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftl-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ftl h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.ftl h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftl-line{ position: relative; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px,3vw,32px); }
.ftl-spine{ position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ftl-spine::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--accent2)); transform: scaleY(0); transform-origin: top; animation: ftl-draw 1.3s var(--ease-curve) .2s forwards; }
@keyframes ftl-draw{ to{ transform: scaleY(1); } }
.ftl-item{ position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start; animation: ftl-rise .6s var(--ease-curve) both; }
.ftl-item:nth-of-type(1){ animation-delay: .2s; } .ftl-item:nth-of-type(2){ animation-delay: .35s; } .ftl-item:nth-of-type(3){ animation-delay: .5s; } .ftl-item:nth-of-type(4){ animation-delay: .65s; }
@keyframes ftl-rise{ from{ opacity: 0; transform: translateX(16px); } }
.ftl-dot{ position: relative; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); display: grid; place-items: center; color: var(--accent); }
.ftl-dot svg{ width: 13px; height: 13px; }
.ftl-dot.done{ background: var(--accent); border-color: var(--accent); color: #fff; }
.ftl-dot.live{ border-color: var(--accent); }
.ftl-dot.live .core{ width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ftl-dot.live::after{ content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ftl-pulse 1.9s var(--ease-curve) infinite; }
@keyframes ftl-pulse{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.95); opacity: 0; } }
.ftl-card{ border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 15px 18px; transition: transform .3s var(--ease-curve), border-color .3s var(--ease-curve); }
.ftl-card:hover{ transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ftl-tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ftl-card h3{ font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 0; }
.ftl-card p{ margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce){ .ftl-spine::after{ animation: none; transform: scaleY(1); } .ftl-item{ animation: none; } .ftl-dot.live::after{ animation: none; } }

/* --- UI BLOCK · CTA Banner (call to action, light + dark) */
.ctab{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctab:has(.ctab-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ctab-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctab-switch .ctab-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctab-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctab-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctab:has(.ctab-theme:checked) .ctab-switch .knob{ transform: translateX(22px); }
.ctab-card{ position: relative; max-width: 880px; margin: 0 auto; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; padding: clamp(40px,6vw,74px) clamp(24px,5vw,60px);
  background: radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), var(--panel);
  box-shadow: 0 40px 90px -44px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent); }
.ctab-orb{ position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; z-index: -1; pointer-events: none; will-change: transform; }
.ctab-orb.a{ width: 280px; height: 280px; background: var(--accent); left: -60px; top: -90px; animation: ctab-d1 16s var(--ease-curve) infinite alternate; }
.ctab-orb.b{ width: 240px; height: 240px; background: var(--accent2); right: -50px; bottom: -90px; opacity: .4; animation: ctab-d2 19s var(--ease-curve) infinite alternate; }
@keyframes ctab-d1{ to{ transform: translate(40px,30px) scale(1.15); } }
@keyframes ctab-d2{ to{ transform: translate(-30px,-20px) scale(1.1); } }
.ctab-body{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.ctab-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctab-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctab h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(28px,5vw,52px); margin: 0; max-width: 16ch; }
.ctab h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctab-sub{ color: var(--muted); font-size: clamp(15px,1.9vw,19px); max-width: 50ch; }
.ctab-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ctab-btn{ display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve), border-color .2s var(--ease-curve); }
.ctab-btn.primary{ border: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.ctab-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.ctab-btn.ghost:hover{ transform: translateY(-2px); border-color: var(--fg); }
.ctab-trust{ display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.ctab-avs{ display: flex; }
.ctab-avs span{ width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -9px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.ctab-avs span:first-child{ margin-left: 0; }
.ctab-body > *{ animation: ctab-rise .65s var(--ease-curve) both; }
.ctab-body > :nth-child(2){ animation-delay: .07s; } .ctab-body > :nth-child(3){ animation-delay: .14s; }
.ctab-body > :nth-child(4){ animation-delay: .21s; } .ctab-body > :nth-child(5){ animation-delay: .28s; }
@keyframes ctab-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce){ .ctab-orb, .ctab-body > *{ animation: none; } }

/* --- UI BLOCK · Newsletter CTA (split + email capture, light + dark) */
.ctas{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctas:has(.ctas-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ctas-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctas-switch .ctas-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctas-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctas-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctas:has(.ctas-theme:checked) .ctas-switch .knob{ transform: translateX(22px); }
.ctas-card{ position: relative; max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; padding: clamp(32px,5vw,58px) clamp(24px,5vw,56px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px,4vw,52px); align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), var(--panel) 62%); }
.ctas-card::before{ content: ""; position: absolute; right: -8%; top: -30%; width: 50%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 40%, transparent), transparent 60%); opacity: .35; filter: blur(60px); }
.ctas-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctas-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctas h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(24px,3.4vw,38px); margin: 14px 0 0; max-width: 16ch; }
.ctas h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctas-sub{ color: var(--muted); font-size: clamp(14px,1.6vw,16px); line-height: 1.6; margin: 12px 0 0; max-width: 44ch; }
.ctas-r{ display: flex; flex-direction: column; gap: 14px; }
.ctas-form{ display: flex; gap: 10px; }
.ctas-field{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: border-color .2s var(--ease-curve), box-shadow .2s var(--ease-curve); }
.ctas-field:focus-within{ border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
.ctas-field svg{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.ctas-field input{ flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: var(--fg); font-size: 15px; font-family: var(--font-body); }
.ctas-field input::placeholder{ color: var(--muted); }
.ctas-btn{ flex: 0 0 auto; height: 52px; padding: 0 24px; border: none; border-radius: 12px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.ctas-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.ctas-note{ display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.ctas-note svg{ flex: 0 0 auto; width: 14px; height: 14px; color: var(--accent); }
.ctas-l{ animation: ctas-rise .65s var(--ease-curve) both; }
.ctas-r{ animation: ctas-rise .65s var(--ease-curve) .1s both; }
@keyframes ctas-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 760px){ .ctas-card{ grid-template-columns: 1fr; } }
@media (max-width: 460px){ .ctas-form{ flex-direction: column; } .ctas-btn{ width: 100%; } }
@media (prefers-reduced-motion: reduce){ .ctas-l, .ctas-r{ animation: none; } }

/* --- UI BLOCK · Sticky CTA Bar (docked, dismissible, light + dark) */
.ctac{
  --bg:#0b0c11; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#14151d; --card:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; min-height: min(72vh, 470px); background: var(--bg); color: var(--fg); font-family: var(--font-body);
  transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctac:has(.ctac-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --card:rgba(0,0,0,.035); --accent:#3b5bff; --accent2:#0bb6e0; }
.ctac-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 30; }
.ctac-switch .ctac-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctac-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctac-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctac:has(.ctac-theme:checked) .ctac-switch .knob{ transform: translateX(22px); }
.ctac-page{ position: absolute; inset: 0; padding: 28px clamp(20px,4vw,40px); display: flex; flex-direction: column; gap: 14px; opacity: .5; pointer-events: none; }
.ctac-pbar{ display: flex; align-items: center; gap: 10px; height: 28px; }
.ctac-pbar i{ width: 84px; height: 100%; border-radius: 7px; background: var(--card); }
.ctac-pbar i:first-child{ width: 130px; }
.ctac-prow{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ctac-c{ height: 108px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ctac-c.wide{ grid-column: 1 / -1; height: 64px; }
.ctac-dock{ position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); z-index: 20; }
.ctac-bar{ display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); animation: ctac-up .6s var(--ease-curve); transition: transform .45s var(--ease-curve), opacity .4s var(--ease-curve); }
@keyframes ctac-up{ from{ transform: translateY(26px); opacity: 0; } }
.ctac:has(.ctac-x:checked) .ctac-dock{ pointer-events: none; }
.ctac:has(.ctac-x:checked) .ctac-bar{ transform: translateY(150%); opacity: 0; }
.ctac-badge{ flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.ctac-badge svg{ width: 19px; height: 19px; }
.ctac-msg{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ctac-msg b{ font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.ctac-msg span{ font-size: 12.5px; color: var(--muted); }
.ctac-btn{ flex: 0 0 auto; height: 40px; padding: 0 18px; border: none; border-radius: 10px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s var(--ease-curve); }
.ctac-btn:hover{ transform: translateY(-2px); }
.ctac-dismiss{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: color .2s var(--ease-curve), background .2s var(--ease-curve); }
.ctac-dismiss:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ctac-dismiss svg{ width: 16px; height: 16px; }
@media (max-width: 540px){ .ctac-msg span{ display: none; } .ctac-prow{ grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce){ .ctac-bar{ animation: none; } }

/* --- UI BLOCK · App Download CTA (phone + store badges, light + dark) */
.ctad{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --accent:#7c8cff; --accent2:#33d6ff;
  --badge-bg:rgba(255,255,255,.06); --badge-fg:#ffffff; --badge-bd:var(--line);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctad:has(.ctad-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; --badge-bg:#111316; --badge-fg:#fff; --badge-bd:#111316; }
.ctad-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctad-switch .ctad-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctad-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctad-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctad:has(.ctad-theme:checked) .ctad-switch .knob{ transform: translateX(22px); }
.ctad-card{ position: relative; max-width: 1000px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; padding: clamp(34px,5vw,60px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,48px); align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 62%); }
.ctad-card::before{ content: ""; position: absolute; right: -6%; top: -28%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%); opacity: .35; filter: blur(64px); }
.ctad-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctad-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctad h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4vw,42px); margin: 14px 0 0; max-width: 14ch; }
.ctad h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctad-sub{ color: var(--muted); font-size: clamp(14px,1.7vw,17px); line-height: 1.6; margin: 12px 0 0; max-width: 42ch; }
.ctad-rating{ display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.ctad-stars{ display: inline-flex; gap: 2px; color: var(--accent); }
.ctad-stars svg{ width: 15px; height: 15px; }
.ctad-badges{ display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.ctad-badge{ display: inline-flex; align-items: center; gap: 11px; height: 54px; padding: 0 18px; border-radius: 13px; background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bd); text-decoration: none; transition: transform .15s var(--ease-curve); }
.ctad-badge:hover{ transform: translateY(-2px); }
.ctad-badge svg{ flex: 0 0 auto; width: 22px; height: 22px; }
.ctad-badge .t{ display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ctad-badge .t small{ font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.ctad-badge .t b{ font-size: 15px; font-weight: 600; }
.ctad-r{ display: flex; justify-content: center; }
.ctad-phone{ position: relative; width: min(232px, 74%); aspect-ratio: 9 / 19; border-radius: 36px; background: #0a0a0c; border: 1px solid var(--line); padding: 9px; box-shadow: 0 44px 90px -34px rgba(0,0,0,.75); transform: rotate(-4deg); animation: ctad-float 6s var(--ease-curve) infinite alternate; }
.ctad-phone::before{ content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40%; height: 20px; background: #0a0a0c; border-radius: 0 0 12px 12px; z-index: 2; }
@keyframes ctad-float{ from{ transform: rotate(-4deg) translateY(0); } to{ transform: rotate(-4deg) translateY(-12px); } }
.ctad-screen{ height: 100%; border-radius: 27px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), var(--panel) 55%); }
.ctad-shead{ height: 70px; background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.ctad-sbody{ flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.ctad-srow{ display: flex; align-items: center; gap: 10px; }
.ctad-srow .av{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.ctad-srow .ln{ flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ctad-srow .ln i{ height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 13%, transparent); }
.ctad-srow .ln i.s{ width: 50%; }
.ctad-stab{ height: 52px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; background: var(--panel); }
.ctad-stab i{ width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.ctad-stab i:first-child{ background: var(--accent); }
.ctad-l{ animation: ctad-rise .65s var(--ease-curve) both; }
.ctad-r{ animation: ctad-rise .7s var(--ease-curve) .12s both; }
@keyframes ctad-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 820px){ .ctad-card{ grid-template-columns: 1fr; } .ctad-r{ order: -1; } .ctad-phone{ width: 200px; } }
@media (prefers-reduced-motion: reduce){ .ctad-phone, .ctad-l, .ctad-r{ animation: none; } }

/* --- UI BLOCK · Dual Path CTA (two option cards, light + dark) */
.ctap{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctap:has(.ctap-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ctap-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctap-switch .ctap-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctap-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctap-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctap:has(.ctap-theme:checked) .ctap-switch .knob{ transform: translateX(22px); }
.ctap-head{ max-width: 560px; margin: 0 auto clamp(30px,5vw,46px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ctap-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctap-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctap h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.ctap h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctap-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 46ch; }
.ctap-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 880px; margin: 0 auto; }
.ctap-card{ position: relative; display: flex; flex-direction: column; gap: 13px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); padding: clamp(26px,3.5vw,38px); overflow: hidden;
  transition: transform .35s var(--ease-curve), border-color .35s var(--ease-curve), box-shadow .35s var(--ease-curve); }
.ctap-card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ctap-card.feat{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent) 65%, transparent); }
.ctap-card.feat::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.ctap-pop{ position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 4px 10px; }
.ctap-ic{ position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ctap-ic svg{ width: 22px; height: 22px; }
.ctap-card h3{ position: relative; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(19px,2.4vw,24px); margin: 4px 0 0; }
.ctap-card > p{ position: relative; color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.ctap-list{ position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ctap-list li{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg); }
.ctap-list .ck{ flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ctap-list .ck svg{ width: 11px; height: 11px; }
.ctap-sp{ flex: 1 1 auto; min-height: 6px; }
.ctap-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 11px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .2s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.ctap-btn.primary{ border: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.ctap-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.ctap-btn.ghost:hover{ transform: translateY(-2px); border-color: var(--fg); }
.ctap-card{ animation: ctap-rise .6s var(--ease-curve) both; }
.ctap-card:nth-child(2){ animation-delay: .1s; }
@keyframes ctap-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 680px){ .ctap-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .ctap-card{ animation: none; } }

/* --- UI BLOCK · Stat CTA (metrics-led, light + dark) */
.ctat{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctat:has(.ctat-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ctat-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctat-switch .ctat-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctat-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctat-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctat:has(.ctat-theme:checked) .ctat-switch .knob{ transform: translateX(22px); }
.ctat-glow{ position: absolute; left: 50%; top: -12%; width: 64%; aspect-ratio: 1; transform: translateX(-50%); z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%); opacity: .22; filter: blur(72px); }
.ctat-wrap{ max-width: 840px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ctat-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctat-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctat h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(28px,4.6vw,46px); margin: 0; max-width: 17ch; }
.ctat h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctat-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,18px); max-width: 50ch; }
.ctat-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; margin: 12px 0 8px; }
.ctat-stat{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: transform .3s var(--ease-curve), border-color .3s var(--ease-curve); }
.ctat-stat:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ctat-stat .num{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(26px,4vw,40px); background: linear-gradient(120deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctat-stat .lbl{ font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }
.ctat-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.ctat-btn{ display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve), border-color .2s var(--ease-curve); }
.ctat-btn.primary{ border: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.ctat-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.ctat-btn.ghost:hover{ transform: translateY(-2px); border-color: var(--fg); }
.ctat-wrap > *{ animation: ctat-rise .6s var(--ease-curve) both; }
.ctat-wrap > :nth-child(2){ animation-delay: .06s; } .ctat-wrap > :nth-child(3){ animation-delay: .12s; }
.ctat-wrap > :nth-child(4){ animation-delay: .18s; } .ctat-wrap > :nth-child(5){ animation-delay: .24s; }
@keyframes ctat-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 640px){ .ctat-stats{ grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce){ .ctat-wrap > *{ animation: none; } }

/* --- UI BLOCK · Gradient CTA (full-bleed vivid panel, light + dark) */
.ctag{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctag:has(.ctag-theme:checked){ --bg:#eef0f6; --fg:#14151c; --line:rgba(0,0,0,.10); }
.ctag-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctag-switch .ctag-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctag-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctag-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctag:has(.ctag-theme:checked) .ctag-switch .knob{ transform: translateX(22px); }
.ctag-panel{ position: relative; max-width: 1000px; margin: 0 auto; border-radius: 28px; overflow: hidden; color: #fff;
  padding: clamp(48px,7vw,88px) clamp(28px,5vw,64px); text-align: center;
  background: linear-gradient(120deg, #5b6cff, #9b5bff 46%, #2fd0ff); background-size: 180% 180%;
  box-shadow: 0 40px 100px -40px rgba(91,108,255,.6); animation: ctag-flow 14s ease infinite; }
@keyframes ctag-flow{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
.ctag-panel::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.20) 50%, transparent 64%); transform: translateX(-60%); animation: ctag-shine 7s var(--ease-curve) infinite; }
@keyframes ctag-shine{ 0%{ transform: translateX(-60%); } 55%,100%{ transform: translateX(60%); } }
.ctag-panel::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask: radial-gradient(120% 100% at 50% 0%, #000, transparent 75%); mask: radial-gradient(120% 100% at 50% 0%, #000, transparent 75%); }
.ctag-body{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ctag-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ctag-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.ctag h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(30px,5.4vw,58px); margin: 0; max-width: 16ch; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.12); }
.ctag-sub{ color: rgba(255,255,255,.88); font-size: clamp(15px,1.9vw,19px); max-width: 50ch; }
.ctag-actions{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ctag-btn{ display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve), background .2s var(--ease-curve); }
.ctag-btn.solid{ background: #fff; color: #14152c; border: none; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); }
.ctag-btn.solid:hover{ transform: translateY(-2px); box-shadow: 0 20px 46px -14px rgba(0,0,0,.45); }
.ctag-btn.ghost{ background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ctag-btn.ghost:hover{ transform: translateY(-2px); background: rgba(255,255,255,.24); }
.ctag-body > *{ animation: ctag-rise .65s var(--ease-curve) both; }
.ctag-body > :nth-child(2){ animation-delay: .07s; } .ctag-body > :nth-child(3){ animation-delay: .14s; } .ctag-body > :nth-child(4){ animation-delay: .21s; }
@keyframes ctag-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce){ .ctag-panel, .ctag-panel::before, .ctag-body > *{ animation: none; } }

/* --- UI BLOCK · Book-a-Demo CTA (split + time-slot picker, light + dark) */
.ctae{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --card:#15161f; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctae:has(.ctae-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --card:#f4f6fb; --accent:#3b5bff; --accent2:#0bb6e0; }
.ctae-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctae-switch .ctae-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctae-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctae-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctae:has(.ctae-theme:checked) .ctae-switch .knob{ transform: translateX(22px); }
.ctae-card{ position: relative; max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; padding: clamp(30px,4.5vw,52px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,48px); align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 62%); }
.ctae-card::before{ content: ""; position: absolute; right: -6%; top: -28%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%); opacity: .32; filter: blur(64px); }
.ctae-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ctae-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ctae h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4vw,42px); margin: 14px 0 0; max-width: 13ch; }
.ctae h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ctae-sub{ color: var(--muted); font-size: clamp(14px,1.7vw,17px); line-height: 1.6; margin: 12px 0 0; max-width: 40ch; }
.ctae-host{ display: flex; align-items: center; gap: 11px; margin-top: 22px; }
.ctae-host .av{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.ctae-host .who{ display: flex; flex-direction: column; line-height: 1.3; }
.ctae-host .who b{ font-size: 14px; } .ctae-host .who span{ font-size: 12.5px; color: var(--muted); }
.ctae-sched{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 24px 56px -30px rgba(0,0,0,.6); }
.ctae-sched-h{ display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ctae-cal{ flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ctae-cal svg{ width: 19px; height: 19px; }
.ctae-dt{ display: flex; flex-direction: column; line-height: 1.3; }
.ctae-dt b{ font-size: 14px; } .ctae-dt span{ font-size: 12.5px; color: var(--muted); }
.ctae-slots{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctae-rr{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ctae-slot{ display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--fg); cursor: pointer; transition: border-color .2s var(--ease-curve), background .2s var(--ease-curve), color .2s var(--ease-curve); }
.ctae-slot:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ctae-rr:checked + .ctae-slot{ background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; }
.ctae-rr:focus-visible + .ctae-slot{ outline: 2px solid var(--accent); outline-offset: 2px; }
.ctae-confirm{ margin-top: 16px; width: 100%; height: 46px; border: none; border-radius: 11px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.ctae-confirm:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.ctae-l{ animation: ctae-rise .65s var(--ease-curve) both; }
.ctae-r{ animation: ctae-rise .7s var(--ease-curve) .12s both; }
@keyframes ctae-rise{ from{ opacity: 0; transform: translateY(16px); } }
@media (max-width: 820px){ .ctae-card{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .ctae-l, .ctae-r{ animation: none; } }

/* --- UI BLOCK · Pricing Cards (3 tiers + billing toggle, light + dark) */
.prc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.prc:has(.prc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.prc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.prc-switch .prc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.prc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.prc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.prc:has(.prc-theme:checked) .prc-switch .knob{ transform: translateX(22px); }
.prc-head{ max-width: 600px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prc-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prc-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prc h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.prc h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prc-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 46ch; }
.prc-toggle{ position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.prc-bill{ position: absolute; opacity: 0; pointer-events: none; }
.prc-thumb{ position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(120deg, var(--accent), var(--accent2)); transition: transform .3s var(--ease-curve); }
.prc:has(.prc-bill:checked) .prc-thumb{ transform: translateX(100%); }
.prc-seg{ position: relative; z-index: 1; height: 34px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .25s var(--ease-curve); }
.prc-seg b{ font-size: 11px; opacity: .85; }
.prc:not(:has(.prc-bill:checked)) .prc-seg:first-of-type{ color: #fff; }
.prc:has(.prc-bill:checked) .prc-seg:last-of-type{ color: #fff; }
.prc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.prc-card{ position: relative; display: flex; flex-direction: column; gap: 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); padding: 28px 24px; overflow: hidden;
  transition: transform .35s var(--ease-curve), border-color .35s var(--ease-curve), box-shadow .35s var(--ease-curve); }
.prc-card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.prc-card.feat{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent) 65%, transparent); }
.prc-card.feat::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.prc-pop{ position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 4px 10px; }
.prc-name{ position: relative; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--fg); }
.prc-price{ position: relative; display: flex; align-items: baseline; gap: 5px; }
.prc-price .amt{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(34px,4vw,46px); }
.prc-price .y{ display: none; } .prc:has(.prc-bill:checked) .prc-price .m{ display: none; } .prc:has(.prc-bill:checked) .prc-price .y{ display: inline; }
.prc-price .per{ font-size: 13px; color: var(--muted); }
.prc-note{ position: relative; font-size: 12px; color: var(--muted); margin-top: -8px; }
.prc-note .y{ display: none; } .prc:has(.prc-bill:checked) .prc-note .m{ display: none; } .prc:has(.prc-bill:checked) .prc-note .y{ display: inline; }
.prc-desc{ position: relative; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.prc-feats{ position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prc-feats li{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg); }
.prc-feats .ck{ flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.prc-feats .ck svg{ width: 11px; height: 11px; }
.prc-sp{ flex: 1 1 auto; min-height: 4px; }
.prc-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 11px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .2s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.prc-btn.primary{ border: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.prc-btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--accent) 90%, transparent); }
.prc-btn.ghost:hover{ transform: translateY(-2px); border-color: var(--fg); }
.prc-card{ animation: prc-rise .6s var(--ease-curve) both; }
.prc-card:nth-child(2){ animation-delay: .08s; } .prc-card:nth-child(3){ animation-delay: .16s; }
@keyframes prc-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 860px){ .prc-grid{ grid-template-columns: 1fr; max-width: 440px; } }
@media (prefers-reduced-motion: reduce){ .prc-card{ animation: none; } }

/* --- UI BLOCK · Pricing Calculator (seat-based, light + dark) */
.pcl{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --card:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.pcl:has(.pcl-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --card:rgba(0,0,0,.035); --accent:#3b5bff; --accent2:#0bb6e0; }
.pcl-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.pcl-switch .pcl-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pcl-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.pcl-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.pcl:has(.pcl-theme:checked) .pcl-switch .knob{ transform: translateX(22px); }
.pcl-head{ max-width: 560px; margin: 0 auto clamp(26px,4vw,40px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pcl-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pcl-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pcl h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.pcl h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcl-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 44ch; }
.pcl-card{ position: relative; max-width: 620px; margin: 0 auto; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; padding: clamp(26px,4vw,42px);
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 11%, var(--panel)), var(--panel) 60%); box-shadow: 0 36px 80px -40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 20px; }
.pcl-card::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%); }
.pcl-q{ position: relative; text-align: center; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.pcl-seats{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pcl-rr{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pcl-seg{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; border-radius: 10px; cursor: pointer; color: var(--muted); transition: background .2s var(--ease-curve), color .2s var(--ease-curve); }
.pcl-seg b{ font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .pcl-seg small{ font-size: 10px; letter-spacing: .04em; }
.pcl-seg:hover{ color: var(--fg); }
.pcl-rr:checked + .pcl-seg{ background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; }
.pcl-rr:focus-visible + .pcl-seg{ outline: 2px solid var(--accent); outline-offset: 2px; }
.pcl-total{ position: relative; display: flex; align-items: baseline; gap: 7px; justify-content: center; }
.pcl-amt{ display: none; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(40px,7vw,62px); background: linear-gradient(120deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcl:has(#pcl-s10:checked) .a10, .pcl:has(#pcl-s25:checked) .a25, .pcl:has(#pcl-s50:checked) .a50, .pcl:has(#pcl-s100:checked) .a100{ display: inline; }
.pcl-per{ font-size: 15px; color: var(--muted); }
.pcl-rate{ position: relative; text-align: center; font-size: 13px; color: var(--muted); margin-top: -8px; }
.pcl-rate span{ display: none; } .pcl-rate b{ color: var(--fg); font-weight: 700; }
.pcl:has(#pcl-s10:checked) .r10, .pcl:has(#pcl-s25:checked) .r25, .pcl:has(#pcl-s50:checked) .r50, .pcl:has(#pcl-s100:checked) .r100{ display: inline; }
.pcl-div{ height: 1px; background: var(--line); }
.pcl-feats{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.pcl-feats li{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg); }
.pcl-feats .ck{ flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pcl-feats .ck svg{ width: 11px; height: 11px; }
.pcl-cta{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: none; border-radius: 12px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.pcl-cta:hover{ transform: translateY(-2px); box-shadow: 0 20px 46px -14px color-mix(in srgb, var(--accent) 90%, transparent); }
.pcl-fine{ position: relative; text-align: center; font-size: 12px; color: var(--muted); }
.pcl-head, .pcl-card{ animation: pcl-rise .65s var(--ease-curve) both; }
.pcl-card{ animation-delay: .1s; }
@keyframes pcl-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 520px){ .pcl-feats{ grid-template-columns: 1fr; } .pcl-seg b{ font-size: 14px; } }
@media (prefers-reduced-motion: reduce){ .pcl-head, .pcl-card{ animation: none; } }

/* --- UI BLOCK · Single Plan (spotlight pricing, light + dark) */
.prs{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --panel:#101119; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.prs:has(.prs-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --panel:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.prs-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.prs-switch .prs-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.prs-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.prs-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.prs:has(.prs-theme:checked) .prs-switch .knob{ transform: translateX(22px); }
.prs-head{ max-width: 560px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prs-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prs-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prs h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.prs h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prs-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 46ch; }
.prs-card{ position: relative; max-width: 880px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: .92fr 1.08fr;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 60%); box-shadow: 0 36px 84px -42px rgba(0,0,0,.6); }
.prs-card::before{ content: ""; position: absolute; left: -6%; top: -30%; width: 44%; aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%); opacity: .3; filter: blur(64px); }
.prs-left{ position: relative; z-index: 1; padding: clamp(28px,4vw,40px); display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); }
.prs-right{ position: relative; z-index: 1; padding: clamp(28px,4vw,40px); }
.prs-plan{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.prs-price{ display: flex; align-items: baseline; gap: 6px; }
.prs-price .amt{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(44px,6vw,64px); }
.prs-price .per{ font-size: 15px; color: var(--muted); }
.prs-note{ font-size: 12.5px; color: var(--muted); margin-top: -6px; }
.prs-cta{ margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: none; border-radius: 12px; background: linear-gradient(120deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.prs-cta:hover{ transform: translateY(-2px); box-shadow: 0 20px 46px -14px color-mix(in srgb, var(--accent) 90%, transparent); }
.prs-guarantee{ display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.prs-guarantee svg{ flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.prs-incl{ font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: .01em; margin: 0 0 14px; }
.prs-feats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.prs-feats li{ display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fg); }
.prs-feats .ck{ flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.prs-feats .ck svg{ width: 11px; height: 11px; }
.prs-card{ animation: prs-rise .65s var(--ease-curve) both; }
@keyframes prs-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 760px){ .prs-card{ grid-template-columns: 1fr; } .prs-left{ border-right: none; border-bottom: 1px solid var(--line); } }
@media (max-width: 460px){ .prs-feats{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .prs-card{ animation: none; } }

/* --- UI BLOCK · Pricing Table (comparison, light + dark) */
.ptb{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.025); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ptb:has(.ptb-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.09); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.ptb-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ptb-switch .ptb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ptb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ptb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ptb:has(.ptb-theme:checked) .ptb-switch .knob{ transform: translateX(22px); }
.ptb-head{ max-width: 560px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ptb-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ptb-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ptb h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.ptb h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ptb-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 46ch; }
.ptb-scroll{ max-width: 900px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; }
.ptb-table{ position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; min-width: 600px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: 0 30px 70px -40px rgba(0,0,0,.6); animation: ptb-rise .6s var(--ease-curve) both; }
@keyframes ptb-rise{ from{ opacity: 0; transform: translateY(18px); } }
.ptb-col{ display: flex; flex-direction: column; min-width: 0; }
.ptb-col.pro{ background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.ptb-cap{ display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; padding: 18px 16px 16px; min-height: 138px; border-bottom: 1px solid var(--line); }
.ptb-pop{ align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 3px 9px; margin-bottom: 2px; }
.ptb-plan{ font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ptb-price{ display: flex; align-items: baseline; gap: 3px; }
.ptb-price .a{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 28px; }
.ptb-price .per{ font-size: 12px; color: var(--muted); }
.ptb-mini{ display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--fg); transition: transform .15s var(--ease-curve), border-color .2s var(--ease-curve); }
.ptb-mini.primary{ border: none; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.ptb-mini:hover{ transform: translateY(-2px); }
.ptb-mini.ghost:hover{ border-color: var(--fg); }
.ptb-col.feat .ptb-cap{ justify-content: flex-end; }
.ptb-cap-h{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ptb-cell{ height: 52px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ptb-col.feat .ptb-cell{ color: var(--fg); font-weight: 500; }
.ptb-col:not(.feat) .ptb-cell{ justify-content: center; color: var(--muted); text-align: center; }
.ptb-col.pro .ptb-cell{ color: var(--fg); }
.ptb-col .ptb-cell:last-child{ border-bottom: none; }
.ptb-y{ width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ptb-y svg{ width: 12px; height: 12px; }
.ptb-n{ color: var(--muted); font-size: 16px; line-height: 1; }
@media (prefers-reduced-motion: reduce){ .ptb-table{ animation: none; } }

/* --- UI BLOCK · Testimonials Grid (light + dark) */
.tst{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.tst:has(.tst-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.tst-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.tst-switch .tst-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tst-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.tst-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.tst:has(.tst-theme:checked) .tst-switch .knob{ transform: translateX(22px); }
.tst-head{ max-width: 600px; margin: 0 auto clamp(30px,5vw,48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tst-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tst-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tst h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.tst h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tst-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 48ch; }
.tst-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; align-items: start; }
.tst-card{ position: relative; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 24px; overflow: hidden;
  transition: transform .35s var(--ease-curve), border-color .35s var(--ease-curve), box-shadow .35s var(--ease-curve); }
.tst-card::before{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-curve); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); }
.tst-card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: 0 26px 60px -32px color-mix(in srgb, var(--accent) 60%, transparent); }
.tst-card:hover::before{ opacity: 1; }
.tst-stars{ position: relative; display: inline-flex; gap: 2px; color: var(--accent); }
.tst-stars svg{ width: 15px; height: 15px; }
.tst-q{ position: relative; flex: 1 1 auto; margin: 0; color: var(--fg); font-size: 14.5px; line-height: 1.6; }
.tst-author{ position: relative; display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.tst-av{ flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.tst-who{ display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tst-who b{ font-size: 14px; font-weight: 600; }
.tst-who span{ font-size: 12.5px; color: var(--muted); }
.tst-card{ animation: tst-rise .6s var(--ease-curve) both; }
.tst-card:nth-child(2){ animation-delay: .06s; } .tst-card:nth-child(3){ animation-delay: .12s; }
.tst-card:nth-child(4){ animation-delay: .18s; } .tst-card:nth-child(5){ animation-delay: .24s; } .tst-card:nth-child(6){ animation-delay: .3s; }
@keyframes tst-rise{ from{ opacity: 0; transform: translateY(18px); } }
@media (max-width: 900px){ .tst-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .tst-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .tst-card{ animation: none; } }

/* --- UI BLOCK · Testimonial Marquee (auto-scroll, light + dark) */
.tmq{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) 0; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.tmq:has(.tmq-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.tmq-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.tmq-switch .tmq-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tmq-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.tmq-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.tmq:has(.tmq-theme:checked) .tmq-switch .knob{ transform: translateX(22px); }
.tmq-head{ max-width: 600px; margin: 0 auto clamp(30px,5vw,46px); padding: 0 clamp(20px,5vw,56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tmq-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tmq-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tmq h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.tmq h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tmq-sub{ color: var(--muted); font-size: clamp(15px,1.7vw,17px); max-width: 48ch; }
.tmq-rows{ display: flex; flex-direction: column; gap: 16px; }
.tmq-row{ display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tmq-track{ display: flex; width: max-content; animation: tmq-scroll 46s linear infinite; }
.tmq-row.rev .tmq-track{ animation-duration: 54s; animation-direction: reverse; }
.tmq-row:hover .tmq-track{ animation-play-state: paused; }
@keyframes tmq-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.tmq-card{ flex: 0 0 clamp(280px, 80vw, 344px); margin-right: 16px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 20px 22px; }
.tmq-stars{ color: var(--accent); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.tmq-q{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg); }
.tmq-author{ display: flex; align-items: center; gap: 11px; }
.tmq-av{ flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.tmq-who{ display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tmq-who b{ font-size: 13.5px; font-weight: 600; }
.tmq-who span{ font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce){ .tmq-track{ animation: none; } .tmq-row{ overflow-x: auto; } }

/* --- UI BLOCK · Testimonial Slider (featured quote, light + dark) */
.tsl{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#9498a6; --line:rgba(255,255,255,.12); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(48px,8vw,96px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.tsl:has(.tsl-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#5d6172; --line:rgba(0,0,0,.14); --accent:#3b5bff; --accent2:#0bb6e0; }
.tsl-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.tsl-switch .tsl-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tsl-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.tsl-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.tsl:has(.tsl-theme:checked) .tsl-switch .knob{ transform: translateX(22px); }
.tsl-wrap{ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tsl-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.tsl-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tsl-stage{ position: relative; width: 100%; min-height: clamp(248px, 34vw, 300px); }
.tsl-quote{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 0; transform: translateY(12px) scale(.99); pointer-events: none; transition: opacity .5s var(--ease-curve), transform .55s var(--ease-curve); }
.tsl:has(#tsl-1:checked) .tsl-quote[data-i="1"],
.tsl:has(#tsl-2:checked) .tsl-quote[data-i="2"],
.tsl:has(#tsl-3:checked) .tsl-quote[data-i="3"],
.tsl:has(#tsl-4:checked) .tsl-quote[data-i="4"]{ opacity: 1; transform: none; pointer-events: auto; }
.tsl-mark{ font-family: var(--font-display); font-weight: 800; font-size: 60px; line-height: .5; color: var(--accent); opacity: .4; }
.tsl-text{ font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; font-size: clamp(20px,3vw,30px); color: var(--fg); max-width: 24ch; margin: 0; }
.tsl-author{ display: flex; align-items: center; justify-content: center; gap: 12px; }
.tsl-av{ flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.tsl-who{ display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.tsl-who b{ font-size: 14.5px; font-weight: 600; }
.tsl-who span{ font-size: 12.5px; color: var(--muted); }
.tsl-dots{ display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.tsl-rr{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tsl-dot{ width: 9px; height: 9px; border-radius: 999px; background: var(--line); cursor: pointer; transition: width .3s var(--ease-curve), background .3s var(--ease-curve); }
.tsl-rr:checked + .tsl-dot{ width: 26px; background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.tsl-rr:focus-visible + .tsl-dot{ outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .tsl-quote{ transition: opacity .25s ease; } }

/* --- UI BLOCK · Logo Cloud (light + dark) */
.lgc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,80px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.lgc:has(.lgc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.lgc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.lgc-switch .lgc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lgc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.lgc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.lgc:has(.lgc-theme:checked) .lgc-switch .knob{ transform: translateX(22px); }
.lgc-head{ max-width: 560px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lgc-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lgc-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lgc h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(24px,3.8vw,38px); margin: 0; }
.lgc h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lgc-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; animation: lgc-rise .6s var(--ease-curve) both; }
@keyframes lgc-rise{ from{ opacity: 0; transform: translateY(16px); } }
.lgc-logo{ display: flex; align-items: center; justify-content: center; gap: 10px; height: 66px; border-radius: 14px; color: var(--muted); text-decoration: none;
  transition: color .25s var(--ease-curve), background .25s var(--ease-curve), transform .25s var(--ease-curve); }
.lgc-logo:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); transform: translateY(-2px); }
.lgc-logo svg{ flex: 0 0 auto; width: 22px; height: 22px; transition: color .25s var(--ease-curve); }
.lgc-logo:hover svg{ color: var(--accent); }
.lgc-logo b{ font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
@media (max-width: 760px){ .lgc-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px){ .lgc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce){ .lgc-grid{ animation: none; } }

/* --- UI BLOCK · Logo Marquee (auto-scroll, light + dark) */
.lgm{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,80px) 0; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.lgm:has(.lgm-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.lgm-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.lgm-switch .lgm-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lgm-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.lgm-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.lgm:has(.lgm-theme:checked) .lgm-switch .knob{ transform: translateX(22px); }
.lgm-head{ max-width: 560px; margin: 0 auto clamp(28px,4vw,42px); padding: 0 clamp(20px,5vw,56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lgm-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lgm-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lgm h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(24px,3.8vw,36px); margin: 0; }
.lgm h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lgm-row{ display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lgm-track{ display: flex; align-items: center; width: max-content; animation: lgm-scroll 38s linear infinite; }
.lgm-row:hover .lgm-track{ animation-play-state: paused; }
@keyframes lgm-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.lgm-logo{ flex: 0 0 auto; margin-right: 54px; display: flex; align-items: center; gap: 11px; color: var(--muted); text-decoration: none; transition: color .25s var(--ease-curve); }
.lgm-logo:hover{ color: var(--fg); }
.lgm-logo svg{ flex: 0 0 auto; width: 22px; height: 22px; transition: color .25s var(--ease-curve); }
.lgm-logo:hover svg{ color: var(--accent); }
.lgm-logo b{ font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
@media (prefers-reduced-motion: reduce){ .lgm-track{ animation: none; } .lgm-row{ overflow-x: auto; } }

/* --- UI BLOCK · Logo Wall (bordered tiles, light + dark) */
.lgw{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,80px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.lgw:has(.lgw-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.lgw-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.lgw-switch .lgw-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lgw-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.lgw-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.lgw:has(.lgw-theme:checked) .lgw-switch .knob{ transform: translateX(22px); }
.lgw-head{ max-width: 560px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lgw-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lgw-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lgw h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(24px,3.8vw,38px); margin: 0; }
.lgw h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lgw-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1000px; margin: 0 auto; animation: lgw-rise .6s var(--ease-curve) both; }
@keyframes lgw-rise{ from{ opacity: 0; transform: translateY(16px); } }
.lgw-tile{ display: flex; align-items: center; justify-content: center; gap: 9px; height: 90px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--muted); text-decoration: none;
  transition: transform .3s var(--ease-curve), border-color .3s var(--ease-curve), box-shadow .3s var(--ease-curve), color .3s var(--ease-curve); }
.lgw-tile:hover{ color: var(--fg); transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 22px 50px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.lgw-tile svg{ flex: 0 0 auto; width: 23px; height: 23px; transition: color .3s var(--ease-curve); }
.lgw-tile:hover svg{ color: var(--accent); }
.lgw-tile b{ font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; }
@media (max-width: 880px){ .lgw-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px){ .lgw-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce){ .lgw-grid{ animation: none; } }

/* --- UI BLOCK · Logo Split (copy + logo grid, light + dark) */
.lgs{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.lgs:has(.lgs-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.lgs-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.lgs-switch .lgs-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lgs-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.lgs-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.lgs:has(.lgs-theme:checked) .lgs-switch .knob{ transform: translateX(22px); }
.lgs-inner{ max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,5vw,64px); align-items: center; animation: lgs-rise .6s var(--ease-curve) both; }
@keyframes lgs-rise{ from{ opacity: 0; transform: translateY(16px); } }
.lgs-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lgs-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lgs-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lgs-copy h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(26px,4vw,40px); margin: 0; }
.lgs-copy h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lgs-sub{ color: var(--muted); font-size: clamp(14px,1.6vw,16px); line-height: 1.6; max-width: 38ch; margin: 0; }
.lgs-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lgs-logo{ display: flex; align-items: center; justify-content: center; gap: 9px; height: 64px; border-radius: 12px; color: var(--muted); text-decoration: none;
  transition: color .25s var(--ease-curve), background .25s var(--ease-curve); }
.lgs-logo:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.lgs-logo svg{ flex: 0 0 auto; width: 22px; height: 22px; transition: color .25s var(--ease-curve); }
.lgs-logo:hover svg{ color: var(--accent); }
.lgs-logo b{ font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; }
@media (max-width: 820px){ .lgs-inner{ grid-template-columns: 1fr; text-align: center; } .lgs-copy{ align-items: center; } .lgs-sub{ max-width: 46ch; } }
@media (max-width: 440px){ .lgs-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce){ .lgs-inner{ animation: none; } }

/* --- UI BLOCK · Newsletter Section (centred sign-up, light + dark) */
.nls{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(48px,8vw,96px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.nls:has(.nls-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.nls-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.nls-switch .nls-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nls-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.nls-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.nls:has(.nls-theme:checked) .nls-switch .knob{ transform: translateX(22px); }
.nls-glow{ position: absolute; top: -20%; left: 50%; width: min(640px,90%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%); filter: blur(36px); z-index: 0; pointer-events: none; }
.nls-inner{ position: relative; z-index: 1; max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: nls-in .7s var(--ease-curve) both; }
.nls-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nls-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nls h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.4vw,44px); margin: 0; }
.nls h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nls-sub{ color: var(--muted); font-size: clamp(14px,1.7vw,16px); line-height: 1.6; max-width: 46ch; margin: 0; }
.nls-form{ display: flex; gap: 10px; width: 100%; max-width: 440px; margin-top: 6px; }
.nls-input{ flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 15px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.nls-input::placeholder{ color: var(--muted); }
.nls-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.nls-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 20px; border: 0; border-radius: 12px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.nls-btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-curve); }
.nls-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.nls-btn:hover svg{ transform: translateX(3px); }
.nls-fine{ display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin: 4px 0 0; }
.nls-fine svg{ width: 14px; height: 14px; }
@keyframes nls-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 480px){ .nls-form{ flex-direction: column; } .nls-btn{ justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .nls-inner{ animation: none; } }

/* --- UI BLOCK · Newsletter Split (copy + form card, light + dark) */
.nlp{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(48px,8vw,96px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.nlp:has(.nlp-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.nlp-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.nlp-switch .nlp-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nlp-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.nlp-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.nlp:has(.nlp-theme:checked) .nlp-switch .knob{ transform: translateX(22px); }
.nlp-inner{ max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,64px); align-items: center; animation: nlp-in .7s var(--ease-curve) both; }
.nlp-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.nlp-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nlp-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nlp-copy h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,42px); margin: 0; }
.nlp-copy h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nlp-sub{ color: var(--muted); font-size: clamp(14px,1.7vw,16px); line-height: 1.6; max-width: 42ch; margin: 0; }
.nlp-proof{ display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.nlp-avs{ display: flex; }
.nlp-avs span{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid var(--bg); margin-left: -9px; background: linear-gradient(140deg, var(--accent), var(--accent2)); }
.nlp-avs span:first-child{ margin-left: 0; }
.nlp-avs span:nth-child(2){ filter: hue-rotate(40deg); } .nlp-avs span:nth-child(3){ filter: hue-rotate(80deg); } .nlp-avs span:nth-child(4){ filter: hue-rotate(-40deg); }
.nlp-proof-t{ color: var(--muted); font-size: 13px; } .nlp-proof-t b{ color: var(--fg); }
.nlp-card{ position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px,3vw,30px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 60px -36px rgba(0,0,0,.6); }
.nlp-glow{ position: absolute; top: -40%; right: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 64%); filter: blur(34px); z-index: -1; pointer-events: none; }
.nlp-field{ display: flex; flex-direction: column; gap: 7px; }
.nlp-field span{ font-size: 12.5px; font-weight: 600; color: var(--muted); }
.nlp-field input{ height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 15px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.nlp-field input::placeholder{ color: var(--muted); }
.nlp-field input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.nlp-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 50px; padding: 0 20px; border: 0; border-radius: 12px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.nlp-btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-curve); }
.nlp-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.nlp-btn:hover svg{ transform: translateX(3px); }
.nlp-fine{ display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.nlp-fine svg{ width: 14px; height: 14px; }
@keyframes nlp-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 820px){ .nlp-inner{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .nlp-inner{ animation: none; } }

/* --- UI BLOCK · Newsletter Gradient (gradient panel, light + dark) */
.nlg{
  --accent:#7c8cff; --accent2:#33d6ff; --on:#ffffff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); font-family: var(--font-body);
  padding: clamp(36px,6vw,72px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve);
}
.nlg{ --bg:#0a0b10; }
.nlg:has(.nlg-theme:checked){ --bg:#eef0f6; }
.nlg-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid rgba(125,130,150,.4); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.nlg-switch .nlg-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nlg-switch svg{ width: 12px; height: 12px; color: #8a8d9c; }
.nlg-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8a8d9c; transition: transform .35s var(--ease-curve); }
.nlg:has(.nlg-theme:checked) .nlg-switch .knob{ transform: translateX(22px); }
.nlg-panel{ position: relative; isolation: isolate; overflow: hidden; max-width: 980px; margin: 0 auto; border-radius: 24px; padding: clamp(40px,6vw,72px) clamp(24px,5vw,56px); color: var(--on);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--accent) 70%, transparent); }
.nlg-grid{ position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 34px 34px;
  -webkit-mask: radial-gradient(circle at 50% 0%, #000, transparent 72%); mask: radial-gradient(circle at 50% 0%, #000, transparent 72%); }
.nlg-bloom{ position: absolute; top: -30%; right: -10%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 62%); filter: blur(30px); z-index: 0; pointer-events: none; }
.nlg-inner{ position: relative; z-index: 1; max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: nlg-in .7s var(--ease-curve) both; }
.nlg-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.nlg-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.nlg h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(28px,4.6vw,46px); margin: 0; }
.nlg h2 em{ font-style: normal; color: color-mix(in srgb, var(--on) 78%, #0a0b10); }
.nlg-sub{ color: rgba(255,255,255,.85); font-size: clamp(14px,1.7vw,16px); line-height: 1.6; max-width: 44ch; margin: 0; }
.nlg-form{ display: flex; gap: 10px; width: 100%; max-width: 440px; margin-top: 6px; }
.nlg-input{ flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.16); color: #fff; font-size: 15px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve), background .25s var(--ease-curve); }
.nlg-input::placeholder{ color: rgba(255,255,255,.75); }
.nlg-input:focus{ outline: none; border-color: #fff; background: rgba(255,255,255,.24); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.nlg-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: #fff; color: #14151c; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), box-shadow .2s var(--ease-curve); }
.nlg-btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-curve); }
.nlg-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); }
.nlg-btn:hover svg{ transform: translateX(3px); }
.nlg-fine{ color: rgba(255,255,255,.8); font-size: 12.5px; margin: 4px 0 0; }
@keyframes nlg-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 480px){ .nlg-form{ flex-direction: column; } .nlg-btn{ justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .nlg-inner{ animation: none; } }

/* --- UI BLOCK · Newsletter Bar (inline strip, light + dark) */
.nlb{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(40px,7vw,80px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.nlb:has(.nlb-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.nlb-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.nlb-switch .nlb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nlb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.nlb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.nlb:has(.nlb-theme:checked) .nlb-switch .knob{ transform: translateX(22px); }
.nlb-bar{ max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px,4vw,48px); padding: clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); animation: nlb-in .7s var(--ease-curve) both; }
.nlb-copy{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.nlb-ic{ flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nlb-ic svg{ width: 20px; height: 20px; }
.nlb-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nlb-text b{ font-family: var(--font-display); font-weight: 700; font-size: clamp(15px,2vw,17px); letter-spacing: -.01em; }
.nlb-text span{ color: var(--muted); font-size: 13px; line-height: 1.4; }
.nlb-form{ flex: 0 0 auto; display: flex; gap: 10px; }
.nlb-input{ width: clamp(180px,22vw,260px); height: 46px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 14.5px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.nlb-input::placeholder{ color: var(--muted); }
.nlb-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.nlb-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px; border: 0; border-radius: 11px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.nlb-btn svg{ width: 16px; height: 16px; transition: transform .25s var(--ease-curve); }
.nlb-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.nlb-btn:hover svg{ transform: translateX(3px); }
@keyframes nlb-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 720px){ .nlb-bar{ flex-direction: column; align-items: stretch; } .nlb-form{ flex-wrap: wrap; } .nlb-input{ flex: 1 1 auto; width: auto; } }
@media (max-width: 420px){ .nlb-btn{ flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .nlb-bar{ animation: none; } }

/* --- UI BLOCK · Newsletter Card (centred card + perks, light + dark) */
.nlc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,7vw,84px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.nlc:has(.nlc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.nlc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.nlc-switch .nlc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nlc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.nlc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.nlc:has(.nlc-theme:checked) .nlc-switch .knob{ transform: translateX(22px); }
.nlc-card{ position: relative; isolation: isolate; overflow: hidden; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; padding: clamp(28px,4vw,44px); border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 34px 70px -40px rgba(0,0,0,.6); animation: nlc-in .7s var(--ease-curve) both; }
.nlc-glow{ position: absolute; top: -50%; left: 50%; width: 80%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%); filter: blur(40px); z-index: -1; pointer-events: none; }
.nlc-eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nlc-eyebrow .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nlc h2{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(26px,4.2vw,40px); margin: 0; }
.nlc h2 em{ font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nlc-sub{ color: var(--muted); font-size: clamp(14px,1.7vw,16px); line-height: 1.6; max-width: 40ch; margin: 0; }
.nlc-form{ display: flex; gap: 10px; width: 100%; max-width: 420px; margin-top: 6px; }
.nlc-input{ flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 15px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.nlc-input::placeholder{ color: var(--muted); }
.nlc-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.nlc-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 20px; border: 0; border-radius: 12px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.nlc-btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-curve); }
.nlc-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.nlc-btn:hover svg{ transform: translateX(3px); }
.nlc-perks{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 6px 0 0; padding: 0; }
.nlc-perks li{ display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.nlc-perks svg{ width: 15px; height: 15px; color: var(--accent); }
@keyframes nlc-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 460px){ .nlc-form{ flex-direction: column; } .nlc-btn{ justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .nlc-card{ animation: none; } }

/* --- UI BLOCK · Announcement Banner (centred glow bar, light + dark) */
.bna{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --bar:#111219; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,8vw,88px) clamp(20px,5vw,40px); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bna:has(.bna-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --bar:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.bna-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bna-switch .bna-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bna-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bna-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bna:has(.bna-theme:checked) .bna-switch .knob{ transform: translateX(22px); }
.bna-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bna-bar{ position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--bar); box-shadow: 0 20px 50px -34px rgba(0,0,0,.7); animation: bna-in .6s var(--ease-curve) both; }
.bna-glow{ position: absolute; inset: -1px; z-index: -1; pointer-events: none; opacity: .75; background: radial-gradient(60% 120% at 18% 50%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 70%), radial-gradient(60% 120% at 82% 50%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 70%); }
.bna-msg{ margin: 0; font-size: 14.5px; line-height: 1.45; text-align: center; }
.bna-msg strong{ font-weight: 700; }
.bna-link{ display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--fg); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); }
.bna-link svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-curve); }
.bna-link:hover svg{ transform: translateX(3px); }
.bna-x{ position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color .2s var(--ease-curve), background .2s var(--ease-curve); }
.bna-x:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bna-x svg{ width: 16px; height: 16px; }
.bna:has(.bna-dismiss:checked) .bna-bar{ display: none; }
.bna-reset{ display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--bar); color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; cursor: pointer; }
.bna:has(.bna-dismiss:checked) .bna-reset{ display: inline-flex; }
@keyframes bna-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }
@media (max-width: 560px){ .bna-bar{ padding: 12px 46px; } .bna-msg{ font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce){ .bna-bar{ animation: none; } }

/* --- UI BLOCK · CTA Banner (left-aligned bar + button, light + dark) */
.bnc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --bar:#111219; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,8vw,88px) clamp(20px,5vw,40px); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnc:has(.bnc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --bar:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.bnc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bnc-switch .bnc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnc:has(.bnc-theme:checked) .bnc-switch .knob{ transform: translateX(22px); }
.bnc-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bnc-bar{ width: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(16px,2.4vw,24px); border: 1px solid var(--line); border-radius: 12px; background: var(--bar); box-shadow: 0 20px 50px -34px rgba(0,0,0,.7); animation: bnc-in .6s var(--ease-curve) both; }
.bnc-copy{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bnc-copy b{ font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.bnc-copy span{ color: var(--muted); font-size: 13px; line-height: 1.4; }
.bnc-act{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.bnc-btn{ display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 10px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.bnc-btn svg{ width: 16px; height: 16px; transition: transform .25s var(--ease-curve); }
.bnc-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.bnc-btn:hover svg{ transform: translateX(3px); }
.bnc-x{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); cursor: pointer; transition: color .2s var(--ease-curve), background .2s var(--ease-curve); }
.bnc-x:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bnc-x svg{ width: 17px; height: 17px; }
.bnc:has(.bnc-dismiss:checked) .bnc-bar{ display: none; }
.bnc-reset{ display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--bar); color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; cursor: pointer; }
.bnc:has(.bnc-dismiss:checked) .bnc-reset{ display: inline-flex; }
@keyframes bnc-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }
@media (max-width: 600px){ .bnc-bar{ flex-direction: column; align-items: stretch; gap: 14px; } .bnc-act{ justify-content: space-between; } .bnc-btn{ flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .bnc-bar{ animation: none; } }

/* --- UI BLOCK · Brand Banner (full-width brand bar, light + dark) */
.bnb{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,8vw,88px) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnb:has(.bnb-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.bnb-switch{ position: absolute; top: clamp(14px,3vw,22px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bnb-switch .bnb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnb:has(.bnb-theme:checked) .bnb-switch .knob{ transform: translateX(22px); }
.bnb-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bnb-bar{ position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px clamp(44px,6vw,72px); color: #fff; background: linear-gradient(100deg, var(--accent), var(--accent2)); box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--accent) 80%, transparent); animation: bnb-in .6s var(--ease-curve) both; }
.bnb-msg{ margin: 0; font-size: 14.5px; line-height: 1.45; text-align: center; }
.bnb-msg strong{ font-weight: 700; }
.bnb-link{ display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); }
.bnb-link svg{ width: 14px; height: 14px; transition: transform .25s var(--ease-curve); }
.bnb-link:hover svg{ transform: translateX(3px); }
.bnb-x{ position: absolute; right: clamp(10px,2vw,18px); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: rgba(255,255,255,.85); cursor: pointer; transition: background .2s var(--ease-curve); }
.bnb-x:hover{ background: rgba(255,255,255,.18); }
.bnb-x svg{ width: 16px; height: 16px; }
.bnb:has(.bnb-dismiss:checked) .bnb-bar{ display: none; }
.bnb-reset{ display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.bnb:has(.bnb-dismiss:checked) .bnb-reset{ display: inline-flex; }
@keyframes bnb-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }
@media (max-width: 560px){ .bnb-bar{ padding: 13px 46px; } .bnb-msg{ font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce){ .bnb-bar{ animation: none; } }

/* --- UI BLOCK · Dark Banner (full-width dark bar, light + dark) */
.bnd{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,8vw,88px) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnd:has(.bnd-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.bnd-switch{ position: absolute; top: clamp(14px,3vw,22px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bnd-switch .bnd-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnd-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnd-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnd:has(.bnd-theme:checked) .bnd-switch .knob{ transform: translateX(22px); }
.bnd-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bnd-bar{ position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 13px clamp(48px,6vw,76px); color: #f3f4f8; background: #0b0c12; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); animation: bnd-in .6s var(--ease-curve) both; }
.bnd-msg{ margin: 0; font-size: 14.5px; line-height: 1.45; text-align: center; }
.bnd-msg strong{ font-weight: 700; }
.bnd-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 9px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.bnd-btn svg{ width: 15px; height: 15px; transition: transform .25s var(--ease-curve); }
.bnd-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.bnd-btn:hover svg{ transform: translateX(3px); }
.bnd-x{ position: absolute; right: clamp(10px,2vw,18px); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: rgba(243,244,248,.7); cursor: pointer; transition: color .2s var(--ease-curve), background .2s var(--ease-curve); }
.bnd-x:hover{ color: #fff; background: rgba(255,255,255,.12); }
.bnd-x svg{ width: 16px; height: 16px; }
.bnd:has(.bnd-dismiss:checked) .bnd-bar{ display: none; }
.bnd-reset{ display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.bnd:has(.bnd-dismiss:checked) .bnd-reset{ display: inline-flex; }
@keyframes bnd-in{ from{ opacity: 0; transform: translateY(-10px); } to{ opacity: 1; transform: none; } }
@media (max-width: 620px){ .bnd-bar{ flex-direction: column; gap: 11px; padding: 14px 46px; } .bnd-msg{ font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce){ .bnd-bar{ animation: none; } }

/* --- UI BLOCK · Floating Banner (pinned bottom card, light + dark) */
.bnf{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:#13141b; --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: clamp(280px,42vh,360px); padding: clamp(24px,4vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnf:has(.bnf-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.bnf-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bnf-switch .bnf-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnf-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnf-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnf:has(.bnf-theme:checked) .bnf-switch .knob{ transform: translateX(22px); }
.bnf-hint{ color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.bnf-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bnf-card{ position: absolute; left: 50%; bottom: clamp(16px,4vw,28px); transform: translateX(-50%); width: min(560px, calc(100% - clamp(24px,8vw,56px))); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); animation: bnf-in .55s var(--ease-curve) both; }
.bnf-copy{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bnf-copy b{ font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.bnf-copy span{ color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.bnf-act{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.bnf-btn{ display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 9px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.bnf-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.bnf-x{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); cursor: pointer; transition: color .2s var(--ease-curve), background .2s var(--ease-curve); }
.bnf-x:hover{ color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bnf-x svg{ width: 17px; height: 17px; }
.bnf:has(.bnf-dismiss:checked) .bnf-card{ display: none; }
.bnf-reset{ display: none; position: absolute; left: 50%; bottom: clamp(16px,4vw,28px); transform: translateX(-50%); align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.bnf:has(.bnf-dismiss:checked) .bnf-reset{ display: inline-flex; }
@keyframes bnf-in{ from{ opacity: 0; transform: translate(-50%,16px); } to{ opacity: 1; transform: translate(-50%,0); } }
@media (max-width: 520px){ .bnf-card{ flex-direction: column; align-items: stretch; gap: 12px; } .bnf-act{ justify-content: space-between; } .bnf-btn{ flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce){ .bnf-card{ animation: none; } }

/* --- UI BLOCK · Cookie Notice (consent card, light + dark) */
.bnk{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:#13141b; --field:rgba(255,255,255,.05); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(40px,7vw,80px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.bnk:has(.bnk-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --field:rgba(0,0,0,.04); --accent:#3b5bff; --accent2:#0bb6e0; }
.bnk-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.bnk-switch .bnk-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bnk-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.bnk-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.bnk:has(.bnk-theme:checked) .bnk-switch .knob{ transform: translateX(22px); }
.bnk-dismiss{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bnk-card{ width: 100%; max-width: 720px; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 24px 56px -30px rgba(0,0,0,.7); animation: bnk-in .6s var(--ease-curve) both; }
.bnk-ic{ flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bnk-ic svg{ width: 21px; height: 21px; }
.bnk-msg{ flex: 1 1 auto; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bnk-link{ color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); }
.bnk-act{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.bnk-ghost{ display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s var(--ease-curve); }
.bnk-ghost:hover{ background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bnk-btn{ display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 10px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.bnk-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.bnk:has(.bnk-dismiss:checked) .bnk-card{ display: none; }
.bnk-reset{ display: none; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.bnk:has(.bnk-dismiss:checked) .bnk-reset{ display: inline-flex; }
@keyframes bnk-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 640px){ .bnk-card{ flex-wrap: wrap; } .bnk-msg{ flex: 1 1 100%; order: 2; } .bnk-act{ flex: 1 1 100%; order: 3; } .bnk-ghost, .bnk-btn{ flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce){ .bnk-card{ animation: none; } }

/* --- UI BLOCK · Columns Footer (brand + link columns, light + dark) */
.ftr{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,6vw,72px) clamp(20px,5vw,56px) clamp(20px,3vw,32px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftr:has(.ftr-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftr-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftr-switch .ftr-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftr-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftr-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftr:has(.ftr-theme:checked) .ftr-switch .knob{ transform: translateX(22px); }
.ftr-inner{ max-width: 1100px; margin: 0 auto; animation: ftr-in .7s var(--ease-curve) both; }
.ftr-top{ display: grid; grid-template-columns: 1.4fr 2.2fr; gap: clamp(28px,5vw,72px); padding-bottom: clamp(28px,4vw,44px); }
.ftr-brand{ display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.ftr-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.ftr-logo svg{ width: 22px; height: 22px; color: var(--accent); }
.ftr-brand p{ margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.ftr-social{ display: flex; gap: 10px; margin-top: 2px; }
.ftr-social a{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--muted); transition: color .2s var(--ease-curve), border-color .2s var(--ease-curve), transform .2s var(--ease-curve); }
.ftr-social a:hover{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.ftr-social svg{ width: 17px; height: 17px; }
.ftr-cols{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); }
.ftr-col{ display: flex; flex-direction: column; gap: 11px; }
.ftr-col h3{ margin: 0 0 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftr-col a{ color: var(--fg); text-decoration: none; font-size: 14px; opacity: .82; transition: opacity .2s var(--ease-curve), color .2s var(--ease-curve); width: fit-content; }
.ftr-col a:hover{ opacity: 1; color: var(--accent); }
.ftr-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: clamp(18px,2.5vw,24px); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ftr-legal{ display: flex; gap: 18px; }
.ftr-legal a{ color: var(--muted); text-decoration: none; transition: color .2s var(--ease-curve); }
.ftr-legal a:hover{ color: var(--fg); }
@keyframes ftr-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 860px){ .ftr-top{ grid-template-columns: 1fr; gap: 36px; } .ftr-brand{ max-width: none; } }
@media (max-width: 520px){ .ftr-cols{ grid-template-columns: repeat(2,1fr); gap: 28px 20px; } .ftr-bottom{ justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce){ .ftr-inner{ animation: none; } }

/* --- UI BLOCK · Minimal Footer (centred single row, light + dark) */
.ftm{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(40px,6vw,68px) clamp(20px,5vw,56px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftm:has(.ftm-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftm-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftm-switch .ftm-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftm-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftm-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftm:has(.ftm-theme:checked) .ftm-switch .knob{ transform: translateX(22px); }
.ftm-inner{ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; animation: ftm-in .7s var(--ease-curve) both; }
.ftm-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.ftm-logo svg{ width: 23px; height: 23px; color: var(--accent); }
.ftm-nav{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.ftm-nav a{ color: var(--fg); text-decoration: none; font-size: 14.5px; opacity: .82; transition: opacity .2s var(--ease-curve), color .2s var(--ease-curve); }
.ftm-nav a:hover{ opacity: 1; color: var(--accent); }
.ftm-social{ display: flex; gap: 10px; }
.ftm-social a{ display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); transition: color .2s var(--ease-curve), border-color .2s var(--ease-curve), transform .2s var(--ease-curve); }
.ftm-social a:hover{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.ftm-social svg{ width: 17px; height: 17px; }
.ftm-copy{ color: var(--muted); font-size: 12.5px; padding-top: 8px; border-top: 1px solid var(--line); width: 100%; }
@keyframes ftm-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .ftm-inner{ animation: none; } }

/* --- UI BLOCK · Newsletter Footer (subscribe + columns, light + dark) */
.ftn{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,6vw,72px) clamp(20px,5vw,56px) clamp(20px,3vw,32px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftn:has(.ftn-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftn-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftn-switch .ftn-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftn-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftn-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftn:has(.ftn-theme:checked) .ftn-switch .knob{ transform: translateX(22px); }
.ftn-inner{ max-width: 1100px; margin: 0 auto; animation: ftn-in .7s var(--ease-curve) both; }
.ftn-top{ display: grid; grid-template-columns: 1.5fr 1.5fr; gap: clamp(28px,5vw,72px); padding-bottom: clamp(28px,4vw,44px); }
.ftn-sub{ display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.ftn-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.ftn-logo svg{ width: 22px; height: 22px; color: var(--accent); }
.ftn-sub h2{ margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(18px,2.4vw,23px); }
.ftn-form{ display: flex; gap: 9px; }
.ftn-input{ flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 14.5px; font-family: inherit; transition: border-color .25s var(--ease-curve), box-shadow .25s var(--ease-curve); }
.ftn-input::placeholder{ color: var(--muted); }
.ftn-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.ftn-btn{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 17px; border: 0; border-radius: 11px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.ftn-btn svg{ width: 16px; height: 16px; transition: transform .25s var(--ease-curve); }
.ftn-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.ftn-btn:hover svg{ transform: translateX(3px); }
.ftn-cols{ display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,40px); }
.ftn-col{ display: flex; flex-direction: column; gap: 11px; }
.ftn-col h3{ margin: 0 0 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftn-col a{ color: var(--fg); text-decoration: none; font-size: 14px; opacity: .82; transition: opacity .2s var(--ease-curve), color .2s var(--ease-curve); width: fit-content; }
.ftn-col a:hover{ opacity: 1; color: var(--accent); }
.ftn-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: clamp(18px,2.5vw,24px); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ftn-legal{ display: flex; gap: 18px; }
.ftn-legal a{ color: var(--muted); text-decoration: none; transition: color .2s var(--ease-curve); }
.ftn-legal a:hover{ color: var(--fg); }
@keyframes ftn-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 860px){ .ftn-top{ grid-template-columns: 1fr; gap: 36px; } .ftn-sub{ max-width: none; } }
@media (max-width: 480px){ .ftn-form{ flex-direction: column; } .ftn-btn{ justify-content: center; } .ftn-bottom{ justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce){ .ftn-inner{ animation: none; } }

/* --- UI BLOCK · CTA Footer (call-to-action band + bar, light + dark) */
.ftc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(48px,7vw,84px) clamp(20px,5vw,56px) clamp(20px,3vw,32px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftc:has(.ftc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftc-switch .ftc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftc:has(.ftc-theme:checked) .ftc-switch .knob{ transform: translateX(22px); }
.ftc-inner{ max-width: 1000px; margin: 0 auto; animation: ftc-in .7s var(--ease-curve) both; }
.ftc-cta{ position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-bottom: clamp(36px,5vw,56px); }
.ftc-glow{ position: absolute; top: -40%; left: 50%; width: min(560px,80%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%); filter: blur(40px); z-index: -1; pointer-events: none; }
.ftc-cta h2{ margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(28px,5vw,46px); }
.ftc-cta p{ margin: 0; color: var(--muted); font-size: clamp(14px,1.7vw,16px); line-height: 1.6; max-width: 44ch; }
.ftc-actions{ display: flex; gap: 11px; margin-top: 6px; }
.ftc-btn{ display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 22px; border-radius: 12px; background: linear-gradient(100deg, var(--accent), var(--accent2)); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease-curve), filter .2s var(--ease-curve); }
.ftc-btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-curve); }
.ftc-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.ftc-btn:hover svg{ transform: translateX(3px); }
.ftc-ghost{ display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s var(--ease-curve); }
.ftc-ghost:hover{ background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ftc-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: clamp(18px,2.5vw,24px); border-top: 1px solid var(--line); }
.ftc-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.ftc-logo svg{ width: 20px; height: 20px; color: var(--accent); }
.ftc-nav{ display: flex; flex-wrap: wrap; gap: 10px 20px; }
.ftc-nav a{ color: var(--muted); text-decoration: none; font-size: 13.5px; transition: color .2s var(--ease-curve); }
.ftc-nav a:hover{ color: var(--fg); }
.ftc-copy{ color: var(--muted); font-size: 12.5px; }
@keyframes ftc-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 560px){ .ftc-actions{ flex-direction: column; width: 100%; max-width: 300px; } .ftc-btn, .ftc-ghost{ justify-content: center; } .ftc-bottom{ justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce){ .ftc-inner{ animation: none; } }

/* --- UI BLOCK · Download Footer (store buttons + columns, light + dark) */
.ftd{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --field:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: clamp(44px,6vw,72px) clamp(20px,5vw,56px) clamp(20px,3vw,32px); transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ftd:has(.ftd-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --field:rgba(0,0,0,.03); --accent:#3b5bff; --accent2:#0bb6e0; }
.ftd-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ftd-switch .ftd-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ftd-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ftd-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ftd:has(.ftd-theme:checked) .ftd-switch .knob{ transform: translateX(22px); }
.ftd-inner{ max-width: 1100px; margin: 0 auto; animation: ftd-in .7s var(--ease-curve) both; }
.ftd-top{ display: grid; grid-template-columns: 1.5fr 1.5fr; gap: clamp(28px,5vw,72px); padding-bottom: clamp(28px,4vw,44px); }
.ftd-brand{ display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.ftd-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.ftd-logo svg{ width: 22px; height: 22px; color: var(--accent); }
.ftd-brand p{ margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.ftd-stores{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ftd-store{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--fg); text-decoration: none; transition: border-color .2s var(--ease-curve), transform .2s var(--ease-curve); }
.ftd-store:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.ftd-store svg{ width: 22px; height: 22px; flex: 0 0 auto; }
.ftd-store span{ display: flex; flex-direction: column; line-height: 1.2; }
.ftd-store small{ font-size: 10px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.ftd-store b{ font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ftd-cols{ display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,40px); }
.ftd-col{ display: flex; flex-direction: column; gap: 11px; }
.ftd-col h3{ margin: 0 0 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ftd-col a{ color: var(--fg); text-decoration: none; font-size: 14px; opacity: .82; transition: opacity .2s var(--ease-curve), color .2s var(--ease-curve); width: fit-content; }
.ftd-col a:hover{ opacity: 1; color: var(--accent); }
.ftd-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: clamp(18px,2.5vw,24px); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ftd-legal{ display: flex; gap: 18px; }
.ftd-legal a{ color: var(--muted); text-decoration: none; transition: color .2s var(--ease-curve); }
.ftd-legal a:hover{ color: var(--fg); }
@keyframes ftd-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }
@media (max-width: 860px){ .ftd-top{ grid-template-columns: 1fr; gap: 36px; } .ftd-brand{ max-width: none; } }
@media (max-width: 420px){ .ftd-stores{ flex-direction: column; } .ftd-store{ justify-content: center; } .ftd-bottom{ justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce){ .ftd-inner{ animation: none; } }

/* --- UI BLOCK · Ring Spinner (conic-mask ring, light + dark) */
.spr{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spr:has(.spr-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; }
.spr-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spr-switch .spr-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spr-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spr-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spr:has(.spr-theme:checked) .spr-switch .knob{ transform: translateX(22px); }
.spr-row{ display: flex; align-items: center; gap: clamp(22px,5vw,46px); }
.spr-ring{ aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 90deg, transparent, var(--accent)); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--t)), #000 calc(100% - var(--t))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--t)), #000 calc(100% - var(--t))); animation: spr-spin .85s linear infinite; }
.spr-sm{ width: 26px; --t: 3px; }
.spr-md{ width: 42px; --t: 4px; }
.spr-lg{ width: 62px; --t: 5px; }
@keyframes spr-spin{ to{ transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce){ .spr-ring{ animation: none; } }

/* --- UI BLOCK · Bouncing Dots (staggered bounce, light + dark) */
.spd{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spd:has(.spd-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spd-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spd-switch .spd-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spd-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spd-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spd:has(.spd-theme:checked) .spd-switch .knob{ transform: translateX(22px); }
.spd-row{ display: flex; align-items: center; gap: clamp(26px,5vw,52px); }
.spd-set{ display: inline-flex; align-items: center; gap: var(--g); }
.spd-set i{ width: var(--s); height: var(--s); border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent2)); animation: spd-bounce 1.1s var(--ease-curve) infinite; }
.spd-set i:nth-child(2){ animation-delay: .16s; }
.spd-set i:nth-child(3){ animation-delay: .32s; }
.spd-sm{ --s: 8px; --g: 6px; }
.spd-md{ --s: 13px; --g: 9px; }
.spd-lg{ --s: 18px; --g: 12px; }
@keyframes spd-bounce{ 0%,80%,100%{ transform: translateY(0); opacity: .45; } 40%{ transform: translateY(-60%); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .spd-set i{ animation: none; opacity: 1; } }

/* --- UI BLOCK · Equalizer Bars (scaleY ripple, light + dark) */
.spb{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spb:has(.spb-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spb-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spb-switch .spb-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spb-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spb-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spb:has(.spb-theme:checked) .spb-switch .knob{ transform: translateX(22px); }
.spb-row{ display: flex; align-items: flex-end; gap: clamp(26px,5vw,52px); }
.spb-set{ display: inline-flex; align-items: flex-end; gap: 4px; height: var(--h); }
.spb-set i{ width: 5px; height: 100%; border-radius: 3px; background: linear-gradient(var(--accent2), var(--accent)); transform: scaleY(.28); transform-origin: bottom; animation: spb-stretch 1s var(--ease-curve) infinite; }
.spb-set i:nth-child(2){ animation-delay: .12s; }
.spb-set i:nth-child(3){ animation-delay: .24s; }
.spb-set i:nth-child(4){ animation-delay: .36s; }
.spb-set i:nth-child(5){ animation-delay: .48s; }
.spb-sm{ --h: 24px; }
.spb-md{ --h: 40px; }
.spb-lg{ --h: 58px; }
@keyframes spb-stretch{ 0%,100%{ transform: scaleY(.28); } 50%{ transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .spb-set i{ animation: none; transform: scaleY(.6); } }

/* --- UI BLOCK · Pulse Rings (radar ping, light + dark) */
.spp{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spp:has(.spp-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; }
.spp-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spp-switch .spp-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spp-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spp-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spp:has(.spp-theme:checked) .spp-switch .knob{ transform: translateX(22px); }
.spp-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spp-set{ position: relative; width: var(--d); height: var(--d); display: grid; place-items: center; }
.spp-set i{ position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: spp-ping 1.5s var(--ease-curve) infinite; }
.spp-set i:nth-child(2){ animation-delay: .75s; }
.spp-set b{ width: 22%; height: 22%; border-radius: 50%; background: var(--accent); }
.spp-sm{ --d: 30px; }
.spp-md{ --d: 46px; }
.spp-lg{ --d: 64px; }
@keyframes spp-ping{ 0%{ transform: scale(.2); opacity: 1; } 100%{ transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .spp-set i{ animation: none; opacity: .4; } }

/* --- UI BLOCK · Orbit (dot on a track ring, light + dark) */
.spo{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spo:has(.spo-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spo-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spo-switch .spo-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spo-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spo-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spo:has(.spo-theme:checked) .spo-switch .knob{ transform: translateX(22px); }
.spo-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spo-set{ position: relative; width: var(--d); height: var(--d); border-radius: 50%; border: var(--t) solid color-mix(in srgb, var(--accent) 18%, transparent); animation: spo-spin .9s linear infinite; }
.spo-set::before{ content: ""; position: absolute; top: calc(var(--t) / 2); left: 50%; width: var(--s); height: var(--s); border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent2)); transform: translate(-50%,-50%); }
.spo-sm{ --d: 26px; --s: 8px; --t: 3px; }
.spo-md{ --d: 42px; --s: 11px; --t: 4px; }
.spo-lg{ --d: 60px; --s: 14px; --t: 5px; }
@keyframes spo-spin{ to{ transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce){ .spo-set{ animation: none; } }

/* --- UI BLOCK · Dot Ring (chasing dots, light + dark) */
.spc{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spc:has(.spc-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; }
.spc-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spc-switch .spc-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spc-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spc-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spc:has(.spc-theme:checked) .spc-switch .knob{ transform: translateX(22px); }
.spc-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spc-set{ position: relative; width: var(--d); height: var(--d); }
.spc-set i{ position: absolute; top: 0; left: 50%; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%; background: var(--accent); transform-origin: center calc(var(--d) / 2); animation: spc-fade 1s linear infinite; }
.spc-set i:nth-child(1){ transform: rotate(0deg);   animation-delay: 0s; }
.spc-set i:nth-child(2){ transform: rotate(45deg);  animation-delay: .125s; }
.spc-set i:nth-child(3){ transform: rotate(90deg);  animation-delay: .25s; }
.spc-set i:nth-child(4){ transform: rotate(135deg); animation-delay: .375s; }
.spc-set i:nth-child(5){ transform: rotate(180deg); animation-delay: .5s; }
.spc-set i:nth-child(6){ transform: rotate(225deg); animation-delay: .625s; }
.spc-set i:nth-child(7){ transform: rotate(270deg); animation-delay: .75s; }
.spc-set i:nth-child(8){ transform: rotate(315deg); animation-delay: .875s; }
.spc-sm{ --d: 30px; --s: 5px; }
.spc-md{ --d: 46px; --s: 7px; }
.spc-lg{ --d: 64px; --s: 9px; }
@keyframes spc-fade{ 0%{ opacity: 1; } 100%{ opacity: .18; } }
@media (prefers-reduced-motion: reduce){ .spc-set i{ animation: none; opacity: .5; } }

/* --- UI BLOCK · Flip Square (two-axis flip, light + dark) */
.spf{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spf:has(.spf-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spf-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spf-switch .spf-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spf-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spf-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spf:has(.spf-theme:checked) .spf-switch .knob{ transform: translateX(22px); }
.spf-row{ display: flex; align-items: center; gap: clamp(28px,5vw,56px); }
.spf-box{ width: var(--s); height: var(--s); border-radius: 7px; background: linear-gradient(140deg, var(--accent), var(--accent2)); animation: spf-flip 1.5s var(--ease-curve) infinite; }
.spf-sm{ --s: 22px; }
.spf-md{ --s: 34px; }
.spf-lg{ --s: 48px; }
@keyframes spf-flip{ 0%{ transform: perspective(140px) rotateX(0) rotateY(0); } 50%{ transform: perspective(140px) rotateX(180deg) rotateY(0); } 100%{ transform: perspective(140px) rotateX(180deg) rotateY(180deg); } }
@media (prefers-reduced-motion: reduce){ .spf-box{ animation: none; } }

/* --- UI BLOCK · Pulse Grid (diagonal wave, light + dark) */
.spq{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spq:has(.spq-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spq-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spq-switch .spq-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spq-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spq-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spq:has(.spq-theme:checked) .spq-switch .knob{ transform: translateX(22px); }
.spq-row{ display: flex; align-items: center; gap: clamp(26px,5vw,52px); }
.spq-set{ display: grid; grid-template-columns: repeat(3, var(--s)); gap: var(--g); }
.spq-set i{ width: var(--s); height: var(--s); border-radius: 3px; background: linear-gradient(140deg, var(--accent), var(--accent2)); transform: scale(.4); animation: spq-pulse 1.3s var(--ease-curve) infinite; }
.spq-set i:nth-child(1){ animation-delay: 0s; }
.spq-set i:nth-child(2), .spq-set i:nth-child(4){ animation-delay: .1s; }
.spq-set i:nth-child(3), .spq-set i:nth-child(5), .spq-set i:nth-child(7){ animation-delay: .2s; }
.spq-set i:nth-child(6), .spq-set i:nth-child(8){ animation-delay: .3s; }
.spq-set i:nth-child(9){ animation-delay: .4s; }
.spq-sm{ --s: 8px; --g: 4px; }
.spq-md{ --s: 12px; --g: 5px; }
.spq-lg{ --s: 17px; --g: 6px; }
@keyframes spq-pulse{ 0%,70%,100%{ transform: scale(.4); opacity: .4; } 35%{ transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .spq-set i{ animation: none; transform: scale(.8); } }

/* --- UI BLOCK · Dual Ring (counter-spinning arcs, light + dark) */
.spx{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spx:has(.spx-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spx-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spx-switch .spx-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spx-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spx-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spx:has(.spx-theme:checked) .spx-switch .knob{ transform: translateX(22px); }
.spx-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spx-set{ position: relative; width: var(--d); height: var(--d); }
.spx-set::before, .spx-set::after{ content: ""; position: absolute; border-radius: 50%; border: var(--t) solid transparent; }
.spx-set::before{ inset: 0; border-top-color: var(--accent); border-right-color: var(--accent); animation: spx-spin .9s linear infinite; }
.spx-set::after{ inset: calc(var(--t) + 2px); border-bottom-color: var(--accent2); border-left-color: var(--accent2); animation: spx-spin .7s linear infinite reverse; }
.spx-sm{ --d: 28px; --t: 3px; }
.spx-md{ --d: 44px; --t: 4px; }
.spx-lg{ --d: 62px; --t: 5px; }
@keyframes spx-spin{ to{ transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce){ .spx-set::before, .spx-set::after{ animation: none; } }

/* --- UI BLOCK · Bouncing Ball (drop + squash + shadow, light + dark) */
.spz{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff; --ball-ease:cubic-bezier(.5,0,.7,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spz:has(.spz-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spz-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spz-switch .spz-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spz-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spz-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spz:has(.spz-theme:checked) .spz-switch .knob{ transform: translateX(22px); }
.spz-row{ display: flex; align-items: flex-end; gap: clamp(28px,6vw,58px); }
.spz-set{ position: relative; width: var(--d); height: calc(var(--d) * 2.2); }
.spz-ball{ position: absolute; top: 0; left: 50%; width: var(--d); height: var(--d); border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent2)); transform: translateX(-50%); transform-origin: center bottom; animation: spz-bounce .5s var(--ball-ease) infinite alternate; }
.spz-shadow{ position: absolute; bottom: 0; left: 50%; width: var(--d); height: calc(var(--d) * .2); border-radius: 50%; background: color-mix(in srgb, var(--fg) 24%, transparent); filter: blur(2px); transform: translateX(-50%); animation: spz-shadow .5s var(--ball-ease) infinite alternate; }
.spz-sm{ --d: 18px; }
.spz-md{ --d: 28px; }
.spz-lg{ --d: 40px; }
@keyframes spz-bounce{ 0%{ transform: translate(-50%,0) scaleY(1); } 88%{ transform: translate(-50%, calc(var(--d) * 1.08)) scaleY(1); } 100%{ transform: translate(-50%, calc(var(--d) * 1.16)) scaleY(.82); } }
@keyframes spz-shadow{ from{ transform: translateX(-50%) scale(.5); opacity: .28; } to{ transform: translateX(-50%) scale(1); opacity: .6; } }
@media (prefers-reduced-motion: reduce){ .spz-ball, .spz-shadow{ animation: none; } }

/* --- UI BLOCK · Wave Dots (traveling crest, light + dark) */
.spw{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spw:has(.spw-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spw-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spw-switch .spw-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spw-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spw-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spw:has(.spw-theme:checked) .spw-switch .knob{ transform: translateX(22px); }
.spw-row{ display: flex; align-items: center; gap: clamp(26px,5vw,52px); }
.spw-set{ display: inline-flex; align-items: center; gap: var(--g); }
.spw-set i{ width: var(--s); height: var(--s); border-radius: 50%; background: linear-gradient(var(--accent2), var(--accent)); animation: spw-wave 1s var(--ease-curve) infinite; }
.spw-set i:nth-child(2){ animation-delay: .1s; }
.spw-set i:nth-child(3){ animation-delay: .2s; }
.spw-set i:nth-child(4){ animation-delay: .3s; }
.spw-set i:nth-child(5){ animation-delay: .4s; }
.spw-sm{ --s: 8px; --g: 6px; }
.spw-md{ --s: 12px; --g: 8px; }
.spw-lg{ --s: 16px; --g: 11px; }
@keyframes spw-wave{ 0%,100%{ transform: translateY(0); } 30%{ transform: translateY(calc(var(--s) * -1.1)); } }
@media (prefers-reduced-motion: reduce){ .spw-set i{ animation: none; } }

/* --- UI BLOCK · Morph Blob (border-radius morph, light + dark) */
.spm{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spm:has(.spm-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spm-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spm-switch .spm-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spm-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spm-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spm:has(.spm-theme:checked) .spm-switch .knob{ transform: translateX(22px); }
.spm-row{ display: flex; align-items: center; gap: clamp(26px,5vw,52px); }
.spm-set{ width: var(--d); height: var(--d); background: linear-gradient(140deg, var(--accent), var(--accent2)); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: spm-morph 2.4s var(--ease-curve) infinite; }
.spm-sm{ --d: 26px; }
.spm-md{ --d: 42px; }
.spm-lg{ --d: 60px; }
@keyframes spm-morph{ 0%,100%{ border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0); } 50%{ border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce){ .spm-set{ animation: none; } }

/* --- UI BLOCK · Pie Sweep (conic fill via @property, light + dark) */
@property --spt-a{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.spt{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --track:rgba(124,140,255,.16);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spt:has(.spt-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --track:rgba(59,91,255,.16); }
.spt-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spt-switch .spt-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spt-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spt-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spt:has(.spt-theme:checked) .spt-switch .knob{ transform: translateX(22px); }
.spt-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spt-set{ width: var(--d); height: var(--d); border-radius: 50%; background: conic-gradient(var(--accent) var(--spt-a), var(--track) 0); -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--t)), #000 calc(100% - var(--t))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--t)), #000 calc(100% - var(--t))); animation: spt-sweep 1.2s linear infinite; }
.spt-sm{ --d: 28px; --t: 4px; }
.spt-md{ --d: 44px; --t: 5px; }
.spt-lg{ --d: 62px; --t: 7px; }
@keyframes spt-sweep{ to{ --spt-a: 360deg; } }
@media (prefers-reduced-motion: reduce){ .spt-set{ animation: none; --spt-a: 280deg; } }

/* --- UI BLOCK · Newton's Cradle (pendulum, light + dark) */
.spn{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff; --cradle-ease:cubic-bezier(.4,0,.5,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spn:has(.spn-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spn-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spn-switch .spn-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spn-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spn-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spn:has(.spn-theme:checked) .spn-switch .knob{ transform: translateX(22px); }
.spn-row{ display: flex; align-items: flex-start; gap: clamp(30px,6vw,60px); }
.spn-set{ display: inline-flex; align-items: flex-start; padding-top: var(--arm); }
.spn-set i{ position: relative; width: var(--s); height: var(--s); border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent2)); transform-origin: center calc(-1 * var(--arm)); }
.spn-set i::before{ content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--arm); background: color-mix(in srgb, var(--fg) 35%, transparent); transform: translateX(-50%); }
.spn-set i:first-child{ animation: spn-left 1.4s var(--cradle-ease) infinite; }
.spn-set i:last-child{ animation: spn-right 1.4s var(--cradle-ease) infinite; }
.spn-sm{ --s: 9px; --arm: 16px; }
.spn-md{ --s: 13px; --arm: 24px; }
.spn-lg{ --s: 17px; --arm: 30px; }
@keyframes spn-left{ 0%{ transform: rotate(0); } 25%{ transform: rotate(-48deg); } 50%,100%{ transform: rotate(0); } }
@keyframes spn-right{ 0%,50%{ transform: rotate(0); } 75%{ transform: rotate(48deg); } 100%{ transform: rotate(0); } }
@media (prefers-reduced-motion: reduce){ .spn-set i{ animation: none; } }

/* --- UI BLOCK · Progress Bar (indeterminate, light + dark) */
.spa{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --track:rgba(255,255,255,.08); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spa:has(.spa-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --track:rgba(0,0,0,.07); --accent:#3b5bff; --accent2:#0bb6e0; }
.spa-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spa-switch .spa-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spa-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spa-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spa:has(.spa-theme:checked) .spa-switch .knob{ transform: translateX(22px); }
.spa-row{ display: flex; flex-direction: column; align-items: center; gap: clamp(18px,3vw,28px); }
.spa-track{ position: relative; width: var(--w); height: var(--h); border-radius: 999px; background: var(--track); overflow: hidden; }
.spa-track i{ position: absolute; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(100deg, var(--accent), var(--accent2)); animation: spa-slide 1.5s var(--ease-curve) infinite; }
.spa-sm{ --w: 140px; --h: 5px; }
.spa-md{ --w: 200px; --h: 7px; }
.spa-lg{ --w: 260px; --h: 9px; }
@keyframes spa-slide{ 0%{ left: -45%; width: 45%; } 55%{ width: 60%; } 100%{ left: 100%; width: 45%; } }
@media (prefers-reduced-motion: reduce){ .spa-track i{ animation: none; left: 0; width: 40%; } }

/* --- UI BLOCK · Pinwheel (repeating-conic, light + dark) */
.spi{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spi:has(.spi-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spi-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spi-switch .spi-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spi-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spi-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spi:has(.spi-theme:checked) .spi-switch .knob{ transform: translateX(22px); }
.spi-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spi-set{ width: var(--d); height: var(--d); border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--accent) 0 30deg, var(--accent2) 30deg 60deg); animation: spi-spin 1s linear infinite; }
.spi-sm{ --d: 26px; }
.spi-md{ --d: 44px; }
.spi-lg{ --d: 62px; }
@keyframes spi-spin{ to{ transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce){ .spi-set{ animation: none; } }

/* --- UI BLOCK · Spin Cube (3D, light + dark) */
.spu{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spu:has(.spu-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spu-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spu-switch .spu-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spu-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spu-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spu:has(.spu-theme:checked) .spu-switch .knob{ transform: translateX(22px); }
.spu-row{ display: flex; align-items: center; gap: clamp(30px,6vw,60px); perspective: 600px; }
.spu-set{ position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: spu-spin 3.4s linear infinite; }
.spu-set i{ position: absolute; inset: 0; background: linear-gradient(140deg, var(--accent), var(--accent2)); border: 1px solid color-mix(in srgb, #fff 30%, transparent); opacity: .82; }
.spu-set i:nth-child(1){ transform: translateZ(calc(var(--s) / 2)); }
.spu-set i:nth-child(2){ transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.spu-set i:nth-child(3){ transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.spu-set i:nth-child(4){ transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.spu-set i:nth-child(5){ transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.spu-set i:nth-child(6){ transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.spu-sm{ --s: 22px; }
.spu-md{ --s: 32px; }
.spu-lg{ --s: 44px; }
@keyframes spu-spin{ from{ transform: rotateX(0) rotateY(0); } to{ transform: rotateX(360deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce){ .spu-set{ animation: none; transform: rotateX(-24deg) rotateY(36deg); } }

/* --- UI BLOCK · Binary Orbit (two dots, light + dark) */
.spy{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 240px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.spy:has(.spy-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --accent:#3b5bff; --accent2:#0bb6e0; }
.spy-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.spy-switch .spy-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.spy-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.spy-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.spy:has(.spy-theme:checked) .spy-switch .knob{ transform: translateX(22px); }
.spy-row{ display: flex; align-items: center; gap: clamp(24px,5vw,50px); }
.spy-set{ position: relative; width: var(--d); height: var(--d); animation: spy-spin .9s linear infinite; }
.spy-set i{ position: absolute; top: 50%; width: var(--s); height: var(--s); border-radius: 50%; animation: spy-pulse 1.8s var(--ease-curve) infinite; }
.spy-set i:nth-child(1){ left: 0; background: linear-gradient(140deg, var(--accent), var(--accent2)); }
.spy-set i:nth-child(2){ right: 0; background: linear-gradient(140deg, var(--accent2), var(--accent)); animation-delay: .9s; }
.spy-sm{ --d: 30px; --s: 9px; }
.spy-md{ --d: 46px; --s: 12px; }
.spy-lg{ --d: 64px; --s: 16px; }
@keyframes spy-spin{ to{ transform: rotate(1turn); } }
@keyframes spy-pulse{ 0%,100%{ transform: translateY(-50%) scale(1); } 50%{ transform: translateY(-50%) scale(.5); } }
@media (prefers-reduced-motion: reduce){ .spy-set, .spy-set i{ animation: none; } .spy-set i{ transform: translateY(-50%); } }

/* --- UI BLOCK · Checklist (tick + collapse, light + dark) */
.tdl{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 300px; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.tdl:has(.tdl-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.tdl-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.tdl-switch .tdl-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tdl-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.tdl-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.tdl:has(.tdl-theme:checked) .tdl-switch .knob{ transform: translateX(22px); }
.tdl-card{ width: 100%; max-width: 380px; padding: clamp(20px,3vw,28px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 64px -38px rgba(0,0,0,.6); }
.tdl-head h2{ margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 20px; }
.tdl-sub{ font-size: 12.5px; color: var(--muted); }
.tdl-list{ display: flex; flex-direction: column; margin-top: 10px; }
.tdl-item{ display: flex; align-items: center; gap: 13px; padding: 14px 2px; cursor: pointer; border-bottom: 1px solid var(--line); max-height: 64px; overflow: hidden;
  transition: max-height .4s var(--ease-curve) .3s, opacity .35s var(--ease-curve) .3s, padding .4s var(--ease-curve) .3s, border-color .4s var(--ease-curve) .3s; }
.tdl-item:last-child{ border-bottom: none; }
.tdl-cb{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.tdl-box{ flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 7px; display: grid; place-items: center; color: #fff; transition: background .2s var(--ease-curve), border-color .2s var(--ease-curve); }
.tdl-box svg{ width: 13px; height: 13px; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease-curve), transform .2s var(--ease-curve); }
.tdl-txt{ font-size: 15px; line-height: 1.35; transition: color .2s var(--ease-curve); }
.tdl-cb:checked ~ .tdl-box{ background: linear-gradient(140deg, var(--accent), var(--accent2)); border-color: transparent; }
.tdl-cb:checked ~ .tdl-box svg{ opacity: 1; transform: scale(1); }
.tdl-cb:checked ~ .tdl-txt{ color: var(--muted); text-decoration: line-through; }
.tdl-cb:focus-visible ~ .tdl-box{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tdl-item:has(.tdl-cb:checked){ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; }
.tdl-empty{ display: none; align-items: center; justify-content: center; gap: 9px; padding: 22px 0 6px; color: var(--muted); font-size: 14px; }
.tdl-empty svg{ width: 18px; height: 18px; color: var(--accent); }
.tdl-card:not(:has(.tdl-cb:not(:checked))) .tdl-empty{ display: flex; }
@media (prefers-reduced-motion: reduce){ .tdl-item{ transition: none; } }

/* --- UI BLOCK · Task List (rows + tags, collapse, light + dark) */
.tdk{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --accent:#7c8cff; --accent2:#33d6ff;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 320px; padding: clamp(36px,6vw,72px) clamp(20px,5vw,40px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.tdk:has(.tdk-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --card:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; }
.tdk-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.tdk-switch .tdk-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tdk-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.tdk-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.tdk:has(.tdk-theme:checked) .tdk-switch .knob{ transform: translateX(22px); }
.tdk-card{ width: 100%; max-width: 420px; padding: clamp(18px,2.6vw,24px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 30px 64px -38px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.tdk-head{ order: 0; display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tdk-logo{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.tdk-logo svg{ width: 18px; height: 18px; color: var(--accent); }
.tdk-count{ font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; }
.tdk-count::after{ content: counter(tdk-open) " open"; }
.tdk-list{ order: 1; display: flex; flex-direction: column; counter-reset: tdk-open; }
.tdk-item:has(.tdk-cb:not(:checked)){ counter-increment: tdk-open; }
.tdk-item{ display: flex; align-items: center; gap: 13px; padding: 14px 2px; cursor: pointer; border-bottom: 1px solid var(--line); max-height: 80px; overflow: hidden;
  transition: max-height .42s var(--ease-curve) .3s, opacity .35s var(--ease-curve) .3s, padding .42s var(--ease-curve) .3s, transform .42s var(--ease-curve) .3s, border-color .42s var(--ease-curve) .3s; }
.tdk-item:last-child{ border-bottom: none; }
.tdk-cb{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.tdk-ring{ flex: 0 0 auto; width: 24px; height: 24px; border: 2px solid color-mix(in srgb, var(--fg) 28%, transparent); border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background .2s var(--ease-curve), border-color .2s var(--ease-curve); }
.tdk-ring svg{ width: 13px; height: 13px; opacity: 0; transform: scale(.4); transition: opacity .2s var(--ease-curve), transform .2s var(--ease-curve); }
.tdk-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tdk-title{ font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; transition: color .2s var(--ease-curve); }
.tdk-meta{ display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.tdk-tag{ font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.tdk-design{ color: #c4b5fd; background: rgba(124,140,255,.16); }
.tdk-dev{ color: #7ee0ff; background: rgba(51,214,255,.16); }
.tdk-biz{ color: #ffd27a; background: rgba(255,162,0,.16); }
.tdk-cb:checked ~ .tdk-ring{ background: linear-gradient(140deg, var(--accent), var(--accent2)); border-color: transparent; }
.tdk-cb:checked ~ .tdk-ring svg{ opacity: 1; transform: scale(1); }
.tdk-cb:checked ~ .tdk-body .tdk-title{ color: var(--muted); text-decoration: line-through; }
.tdk-cb:focus-visible ~ .tdk-ring{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tdk-item:has(.tdk-cb:checked){ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; transform: translateX(14px); border-color: transparent; }
.tdk-empty{ order: 2; display: none; align-items: center; justify-content: center; gap: 9px; padding: 26px 0 8px; color: var(--muted); font-size: 14px; text-align: center; }
.tdk-empty svg{ width: 19px; height: 19px; color: var(--accent); }
.tdk-card:not(:has(.tdk-cb:not(:checked))) .tdk-empty{ display: flex; }
@media (prefers-reduced-motion: reduce){ .tdk-item{ transition: none; } }

/* --- UI BLOCK · Context Menu (right-click popup, light + dark) */
.ctx{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --menu:#16171f; --hover:rgba(255,255,255,.07); --accent:#7c8cff; --danger:#ff6b6b;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 340px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.ctx:has(.ctx-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --menu:#ffffff; --hover:rgba(0,0,0,.05); --accent:#3b5bff; --danger:#e5484d; }
.ctx-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.ctx-switch .ctx-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ctx-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.ctx-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.ctx:has(.ctx-theme:checked) .ctx-switch .knob{ transform: translateX(22px); }
.ctx-zone{ position: relative; width: 100%; max-width: 560px; min-height: 280px; border: 1.5px dashed var(--line); border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.ctx-hint{ display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); text-align: center; pointer-events: none; padding: 20px; }
.ctx-hint svg{ width: 30px; height: 30px; color: var(--accent); margin-bottom: 2px; }
.ctx-hint b{ font-family: var(--font-display); color: var(--fg); font-size: 15px; font-weight: 700; }
.ctx-hint span{ font-size: 12.5px; }
.ctx-menu{ position: absolute; top: 0; left: 0; min-width: 208px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--menu); box-shadow: 0 20px 50px -18px rgba(0,0,0,.55); z-index: 5;
  opacity: 0; visibility: hidden; transform: scale(.96) translateY(4px); transform-origin: top left; pointer-events: none; transition: opacity .14s var(--ease-curve), transform .14s var(--ease-curve), visibility .14s; }
.ctx-menu.open{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.ctx-item{ display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .12s var(--ease-curve); }
.ctx-item svg{ width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.ctx-item:hover{ background: var(--hover); }
.ctx-key{ margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.ctx-danger{ color: var(--danger); }
.ctx-danger svg{ color: var(--danger); }
.ctx-danger:hover{ background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ctx-sep{ height: 1px; margin: 5px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce){ .ctx-menu{ transition: none; } }

/* --- UI BLOCK · Rich Menu (glass panel + submenu, light + dark) */
.cxr{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --menu:rgba(22,23,31,.82); --hover:rgba(255,255,255,.07); --accent:#7c8cff; --danger:#ff6b6b;
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 380px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.cxr:has(.cxr-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --menu:rgba(255,255,255,.85); --hover:rgba(0,0,0,.05); --accent:#3b5bff; --danger:#e5484d; }
.cxr-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.cxr-switch .cxr-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cxr-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.cxr-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.cxr:has(.cxr-theme:checked) .cxr-switch .knob{ transform: translateX(22px); }
.cxr-zone{ position: relative; width: 100%; max-width: 560px; min-height: 320px; border: 1.5px dashed var(--line); border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.cxr-hint{ display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); text-align: center; pointer-events: none; padding: 20px; }
.cxr-hint svg{ width: 30px; height: 30px; color: var(--accent); }
.cxr-hint b{ font-family: var(--font-display); color: var(--fg); font-size: 15px; }
.cxr-hint span{ font-size: 12.5px; }
.cxr-menu{ position: absolute; top: 0; left: 0; width: 248px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--menu); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 56px -20px rgba(0,0,0,.6); z-index: 5;
  opacity: 0; visibility: hidden; transform: scale(.96) translateY(6px); transform-origin: top left; pointer-events: none; transition: opacity .15s var(--ease-curve), transform .15s var(--ease-curve), visibility .15s; }
.cxr-menu.open{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.cxr-headrow{ display: flex; align-items: center; gap: 11px; padding: 8px 9px 10px; }
.cxr-thumb{ flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cxr-thumb svg{ width: 19px; height: 19px; }
.cxr-meta{ display: flex; flex-direction: column; min-width: 0; }
.cxr-meta b{ font-family: var(--font-display); font-size: 13.5px; font-weight: 700; }
.cxr-meta small{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cxr-group{ padding: 4px 0; border-top: 1px solid var(--line); }
.cxr-label{ padding: 6px 10px 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cxr-item{ position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--fg); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: background .12s var(--ease-curve); }
.cxr-item > svg:first-child{ width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.cxr-item:hover{ background: var(--hover); }
.cxr-key{ margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cxr-caret{ margin-left: auto; width: 14px; height: 14px; color: var(--muted); }
.cxr-toggle{ cursor: pointer; }
.cxr-cb{ position: absolute; opacity: 0; width: 0; height: 0; }
.cxr-sw{ margin-left: auto; flex: 0 0 auto; width: 30px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 22%, transparent); position: relative; transition: background .2s var(--ease-curve); }
.cxr-sw::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-curve); }
.cxr-cb:checked ~ .cxr-sw{ background: linear-gradient(100deg, var(--accent), #33d6ff); }
.cxr-cb:checked ~ .cxr-sw::after{ transform: translateX(12px); }
.cxr-sub{ position: relative; }
.cxr-flyout{ position: absolute; top: -7px; left: 100%; margin-left: 5px; width: 160px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--menu); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 46px -18px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateX(-4px); pointer-events: none; transition: opacity .14s var(--ease-curve), transform .14s var(--ease-curve), visibility .14s; }
.cxr-sub:hover .cxr-flyout{ opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.cxr-danger{ color: var(--danger); }
.cxr-danger svg{ color: var(--danger) !important; }
.cxr-danger:hover{ background: color-mix(in srgb, var(--danger) 14%, transparent); }
.cxr-sep{ height: 1px; margin: 5px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce){ .cxr-menu, .cxr-flyout{ transition: none; } }

/* --- UI BLOCK · Radial Menu (pie menu, light + dark) */
.cxm{
  --bg:#0a0b10; --fg:#f3f4f8; --muted:#8a8d9c; --line:rgba(255,255,255,.10); --btn:#16171f; --accent:#7c8cff; --accent2:#33d6ff; --danger:#ff6b6b; --r:58px; --pop:cubic-bezier(.34,1.4,.5,1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-body);
  min-height: 380px; padding: clamp(32px,5vw,56px); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease-curve), color .5s var(--ease-curve);
}
.cxm:has(.cxm-theme:checked){ --bg:#eef0f6; --fg:#14151c; --muted:#7a7f8e; --line:rgba(0,0,0,.10); --btn:#ffffff; --accent:#3b5bff; --accent2:#0bb6e0; --danger:#e5484d; }
.cxm-switch{ position: absolute; top: clamp(16px,3vw,26px); right: clamp(16px,4vw,40px); width: 50px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: pointer; z-index: 3; }
.cxm-switch .cxm-theme{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cxm-switch svg{ width: 12px; height: 12px; color: var(--muted); }
.cxm-switch .knob{ position: absolute; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease-curve); }
.cxm:has(.cxm-theme:checked) .cxm-switch .knob{ transform: translateX(22px); }
.cxm-zone{ position: relative; width: 100%; max-width: 560px; min-height: 320px; border: 1.5px dashed var(--line); border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.cxm-hint{ display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); text-align: center; pointer-events: none; padding: 20px; }
.cxm-hint svg{ width: 30px; height: 30px; color: var(--accent); }
.cxm-hint b{ font-family: var(--font-display); color: var(--fg); font-size: 15px; }
.cxm-hint span{ font-size: 12.5px; }
.cxm-menu{ position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 5; pointer-events: none; }
.cxm-core{ position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%) scale(0); background: var(--accent); opacity: 0; transition: transform .2s var(--pop), opacity .2s; }
.cxm-menu.open{ pointer-events: auto; }
.cxm-menu.open .cxm-core{ transform: translate(-50%,-50%) scale(1); opacity: .9; }
.cxm-item{ position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 1px solid var(--line); border-radius: 50%; background: var(--btn); color: var(--fg); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 26px -14px rgba(0,0,0,.7);
  transform: translate(0,0) scale(.2); opacity: 0; transition: transform .28s var(--pop), opacity .2s var(--ease-curve), background .15s, color .15s, border-color .15s; }
.cxm-item svg{ width: 19px; height: 19px; }
.cxm-menu.open .cxm-item{ opacity: 1; transform: translate(calc(cos(var(--a)) * var(--r)), calc(sin(var(--a)) * var(--r))) scale(1); }
.cxm-item:hover{ background: linear-gradient(140deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; }
.cxm-item.cxm-danger:hover{ background: var(--danger); }
.cxm-menu.open .cxm-item:nth-child(2){ transition-delay: .02s; }
.cxm-menu.open .cxm-item:nth-child(3){ transition-delay: .04s; }
.cxm-menu.open .cxm-item:nth-child(4){ transition-delay: .06s; }
.cxm-menu.open .cxm-item:nth-child(5){ transition-delay: .08s; }
.cxm-menu.open .cxm-item:nth-child(6){ transition-delay: .1s; }
@media (prefers-reduced-motion: reduce){ .cxm-item, .cxm-core{ transition: none; } }

/* --- Animated / Fade Content */
.ac-stack{
  display: flex; flex-direction: column; gap: 12px;
  width: min(80%, 460px);
}
.ac-card{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.ac-card .badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--amber); color: var(--bg);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.ac-card .meta{ margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .1em; }

/* --- Glare Hover */
.glare-card{
  position: relative;
  width: min(70%, 420px);
  aspect-ratio: 5 / 3;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(135deg, #15151A, #0E0E12);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: var(--ink);
}
.glare-card .glare{
  position: absolute; pointer-events: none;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,162,0,.45), rgba(255,162,0,0) 65%);
  filter: blur(8px);
  transition: opacity .25s var(--ease-curve);
  transform: translate(-50%, -50%);
  left: 0; top: 0;
  opacity: 0;
}
.glare-card .label{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.glare-card .title{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  margin-top: 6px; letter-spacing: -.02em;
}

/* --- Logo Loop */
.logo-loop{
  width: 100%; overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 14px 0;
}
.logo-loop .track{
  display: inline-flex; gap: 56px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink-soft);
  letter-spacing: -.012em;
  white-space: nowrap;
  will-change: transform;
}
.logo-loop .track span{ display: inline-flex; align-items: center; gap: 8px; }
.logo-loop .track .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--ink-dim); }

/* --- Magnet (CSS) */
.magnet-wrap{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.magnet-btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px;
  letter-spacing: -.005em;
  will-change: transform;
  transition: transform .35s var(--ease-curve);
}
.magnet-btn .ring{
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}

/* --- Crosshair / Target Cursor (canvas based, use .canvas-fill) */

/* --- Sticker Peel */
.sticker-wrap{ perspective: 900px; width: min(60%, 340px); aspect-ratio: 1; }
.sticker{
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFA200, #FFE5B0);
  border: 1px solid var(--amber);
  color: #1A1300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  text-align: center;
  box-shadow: 0 18px 32px -16px rgba(0,0,0,.7);
  transition: transform .55s var(--ease-curve);
  transform-origin: top right;
  will-change: transform;
}
.sticker .l1{ font-size: 14px; letter-spacing: .14em; font-family: var(--font-mono); font-weight: 500; }
.sticker .l2{ font-size: clamp(36px, 5vw, 56px); line-height: .95; margin-top: 4px; }
.sticker .l3{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: rgba(26,19,0,.6); margin-top: 10px; }

/* --- Cubes (CSS 3D) */
.cubes-stage{
  display: grid; grid-template-columns: repeat(3, 80px); grid-gap: 24px;
  perspective: 700px;
}
.cube{
  width: 80px; height: 80px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.cube .face{
  position: absolute; inset: 0;
  border: 1px solid var(--line-2);
  background: rgba(244,242,236,.04);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft);
}
.cube .face.front  { transform: translateZ(40px); }
.cube .face.back   { transform: rotateY(180deg) translateZ(40px); }
.cube .face.right  { transform: rotateY(90deg)  translateZ(40px); }
.cube .face.left   { transform: rotateY(-90deg) translateZ(40px); }
.cube .face.top    { transform: rotateX(90deg)  translateZ(40px); }
.cube .face.bottom { transform: rotateX(-90deg) translateZ(40px); background: rgba(255,162,0,.06); border-color: rgba(255,162,0,.3); color: var(--amber); }

/* --- Star Border */
.star-border{
  --sb-color: #FFA200; --sb-speed: 6s;
  position: relative; display: inline-block;
  padding: 1px; border-radius: 20px; overflow: hidden;
}
.star-border .sb-top, .star-border .sb-bottom{
  position: absolute; width: 300%; height: 50%; border-radius: 50%;
  background: radial-gradient(circle, var(--sb-color), transparent 10%);
  opacity: .7; pointer-events: none; z-index: 0;
}
.star-border .sb-bottom{ bottom: -11px; right: -250%; animation: sb-move-bottom var(--sb-speed) linear infinite alternate; }
.star-border .sb-top{ top: -10px; left: -250%; animation: sb-move-top var(--sb-speed) linear infinite alternate; }
.star-border .sb-inner{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border-radius: 20px;
  background: linear-gradient(180deg, #0b0b0d, #16161a);
  border: 1px solid var(--line-2);
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--ink); letter-spacing: -.012em; white-space: nowrap;
}
@keyframes sb-move-bottom{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-100%,0); } }
@keyframes sb-move-top{ 0%{ transform: translate(0,0); } 100%{ transform: translate(100%,0); } }
@media (prefers-reduced-motion: reduce){ .star-border .sb-top, .star-border .sb-bottom{ animation: none; } }

/* --- Border Beam (animation 033) */
@property --bb-angle{ syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.bb-card{
  --bb-a: #FFA200; --bb-b: #FF4AD6; --bb-speed: 4s; --bb-arc: 80deg;
  position: relative; width: min(70%, 420px); aspect-ratio: 5 / 3; border-radius: 18px;
  background: linear-gradient(135deg, #15151A, #0E0E12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bb-card .bb-beam{
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--bb-angle), var(--bb-a), var(--bb-b) var(--bb-arc), transparent var(--bb-arc));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 4px var(--bb-a));
  animation: bb-spin var(--bb-speed) linear infinite;
}
@keyframes bb-spin{ to{ --bb-angle: 360deg; } }
.bb-card .bb-content{ position: relative; z-index: 1; text-align: center; }
.bb-card .bb-label{ font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A8893; }
.bb-card .bb-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 48px); margin-top: 6px; letter-spacing: -.02em; color: var(--ink); }
@media (prefers-reduced-motion: reduce){ .bb-card .bb-beam{ animation: none; } }

/* --- Ripple (animation 034) */
.rp-stage{
  --rp-color: #FFA200; --rp-speed: 3s;
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
}
.rp-stage .rp-rings{ position: absolute; inset: 0; display: grid; place-items: center; }
.rp-stage .rp-ring{
  grid-area: 1 / 1; width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid var(--rp-color); transform: scale(0); opacity: .8;
  animation: rp-pulse var(--rp-speed) ease-out infinite;
}
.rp-stage .rp-core{
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--rp-color) 26%, transparent), transparent 70%);
}
.rp-stage .rp-core span{ width: 13px; height: 13px; border-radius: 50%; background: var(--rp-color); box-shadow: 0 0 14px var(--rp-color); }
@keyframes rp-pulse{ 0%{ transform: scale(0); opacity: .8; } 100%{ transform: scale(6); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .rp-stage .rp-ring{ animation: none; opacity: .25; } }

/* --- Border Glow (component) */
.bg-wrap{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  width: min(86%, 640px);
}
.bg-card{
  --mx: 50%; --my: 50%; --c1: #FF4AD6; --c2: #FFA200; --c3: #4AD6FF; --bg-size: 170px; --bg-thick: 1.5px;
  position: relative; border-radius: 16px; min-height: 150px; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, #121216, #0c0c10); color: var(--ink);
}
.bg-card::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid rgba(244,242,236,.08); pointer-events: none;
}
.bg-card::before{
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: var(--bg-thick); pointer-events: none;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  -webkit-mask:
    radial-gradient(var(--bg-size) circle at var(--mx) var(--my), #fff, transparent 70%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    radial-gradient(var(--bg-size) circle at var(--mx) var(--my), #fff, transparent 70%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect, exclude;
}
.bg-card .t{ font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.bg-card .s{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .12em; margin-top: 4px; }

/* --- Tilt Card (component) */
.tilt-wrap{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  width: min(86%, 640px);
  perspective: 900px;
}
.tilt-card{
  --rx: 0deg; --ry: 0deg; --s: 1; --trs: 300ms; --gx: 50%; --gy: 50%;
  position: relative; border-radius: 16px; min-height: 160px; overflow: hidden;
  background: linear-gradient(160deg, #1c1c22, #0e0e12);
  border: 1px solid rgba(244,242,236,.10);
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform var(--trs) cubic-bezier(.22,.61,.36,1);
  cursor: pointer;
}
.tilt-glare{
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at var(--gx) var(--gy), rgba(255,255,255,.12) 0%, transparent 60%);
  transition: opacity 300ms;
}
.tilt-body{
  position: relative; height: 100%; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink);
}
.tilt-body .tilt-t{ font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.tilt-body .tilt-s{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .12em; margin-top: 4px; }

/* --- Magnetic Button (component) */
.mb-wrap{
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: center;
  width: min(86%, 560px); padding: 40px 0;
}
.mb-btn{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 32px; height: 52px; border-radius: 100px;
  background: linear-gradient(135deg, #1e1e24, #131318);
  border: 1px solid rgba(244,242,236,.16);
  color: var(--ink); cursor: pointer;
  will-change: transform;
}
.mb-btn::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 120% 120% at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.mb-label{
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; display: block; will-change: transform;
  pointer-events: none;
}

/* --- Ripple (component) */
.rpl-wrap{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.rpl-btn{
  position: relative; overflow: hidden; border-radius: 18px;
  width: 340px; height: 160px; cursor: pointer;
  background: linear-gradient(135deg, #1c1c22, #0e0e12);
  border: 1px solid rgba(244,242,236,.12); color: var(--ink);
}
.rpl-label{
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  pointer-events: none; position: relative; z-index: 1;
}
.rpl-ripple{
  position: absolute; border-radius: 50%; pointer-events: none;
  transform: scale(0); opacity: .5;
  animation: rpl-expand var(--rpl-dur, 600ms) cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes rpl-expand{ to{ transform: scale(var(--rpl-scale, 4)); opacity: 0; } }

/* --- Spotlight (component) */
.spl-wrap{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 40px;
  --mx: -400px; --my: -400px; --spl-size: 140px; --spl-edge: 40px; --spl-dim: .88;
}
.spl-wrap::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    transparent var(--spl-size),
    rgb(8 8 10 / var(--spl-dim)) calc(var(--spl-size) + var(--spl-edge))
  );
}
.spl-content{ text-align: center; }
.spl-line{
  font-family: var(--font-display); font-weight: 700; font-size: 34px;
  line-height: 1.15; letter-spacing: -.022em; color: var(--ink); margin: 0;
}
.spl-attr{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-soft); text-transform: uppercase; margin: 18px 0 0;
}

/* --- Dock (component) */
.dock-scene{
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 48px;
}
.dock-wrap{
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 16px; border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.dock-item{
  --s: 1; --trs: 250ms;
  width: 52px; height: 52px; border-radius: 13px;
  border: 1px solid rgba(244,242,236,.10);
  transform: scale(var(--s));
  transform-origin: bottom center;
  transition: transform var(--trs) cubic-bezier(.22,.61,.36,1);
  flex-shrink: 0;
}

/* --- Marquee (component) */
.mrq-wrap{
  width: 100%; overflow: hidden;
  display: flex; align-items: center; height: 100%;
  --mrq-gap: 28px;
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.mrq-track{
  display: flex; width: max-content;
  animation: mrq-scroll 22s linear infinite;
}
.mrq-wrap[data-pause="on"] .mrq-track:hover{ animation-play-state: paused; }
.mrq-set{
  display: flex; align-items: center;
  gap: var(--mrq-gap); padding-right: var(--mrq-gap);
  flex-shrink: 0;
}
.mrq-item{
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  padding: 8px 18px; border-radius: 100px;
  border: 1px solid rgba(244,242,236,.12);
  background: rgba(244,242,236,.03);
  flex-shrink: 0;
}
.mrq-item.mrq-hi{
  border-color: rgba(74,107,255,.35);
  background: rgba(74,107,255,.08);
  color: var(--ink);
}
@keyframes mrq-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .mrq-track{ animation: none; } }

/* --- Flip Card (component) */
.flp-scene{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  perspective: var(--flp-persp, 700px);
  --flp-transform: rotateY(180deg);
  --flp-back:      rotateY(180deg);
  --flp-dur:       600ms;
}
.flp-card{
  width: 280px; height: 190px; position: relative;
  transform-style: preserve-3d;
  transition: transform var(--flp-dur) cubic-bezier(.22,.61,.36,1);
  cursor: pointer;
}
.flp-scene:hover .flp-card{ transform: var(--flp-transform); }
.flp-front,.flp-back{
  position: absolute; inset: 0; border-radius: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
}
.flp-front{
  background: linear-gradient(145deg, #1c1c24, #0e0e14);
  border: 1px solid rgba(244,242,236,.12);
}
.flp-back{
  background: linear-gradient(145deg, #161e44, #0a0e22);
  border: 1px solid rgba(74,107,255,.28);
  transform: var(--flp-back);
}
.flp-t{ font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.flp-s{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; margin-top: 4px; }
.flp-front .flp-s{ color: var(--ink-soft); }
.flp-back  .flp-s{ color: rgba(130,155,255,.65); }

/* --- Accordion (component) */
.acc-wrap{
  width: min(90%, 520px);
  --acc-dur: 350ms;
}
.acc-item{ border-bottom: 1px solid var(--line-2); }
.acc-item:first-child{ border-top: 1px solid var(--line-2); }
.acc-head{
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 16px 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.acc-icon{
  font-family: var(--font-mono); font-size: 18px; font-weight: 400;
  color: var(--ink-dim); flex-shrink: 0; margin-left: 16px;
  transition: transform var(--acc-dur) cubic-bezier(.22,.61,.36,1),
              color    var(--acc-dur) cubic-bezier(.22,.61,.36,1);
}
.acc-item.open .acc-icon{ transform: rotate(45deg); color: var(--ink-soft); }
.acc-body-wrap{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-dur) cubic-bezier(.22,.61,.36,1);
}
.acc-item.open .acc-body-wrap{ grid-template-rows: 1fr; }
.acc-body{ overflow: hidden; }
.acc-body-inner{
  padding-bottom: 18px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
}

/* --- Calendar (component) */
.cal{
  --cal-accent: #FFA200;
  width: min(92%, 330px); box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 18px 18px 20px;
  font-family: var(--font-display); color: var(--ink);
}
.cal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title{ font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.cal-nav{
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink-soft); cursor: pointer;
  transition: color .15s, background .15s;
}
.cal-nav:hover{ color: var(--ink); background: rgba(244,242,236,.05); }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span{ text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); padding: 2px 0 6px; }
.cal-days button{
  aspect-ratio: 1; display: grid; place-items: center; font-size: 13px;
  border-radius: 8px; color: var(--ink-soft); cursor: pointer;
  transition: background .15s, color .15s; font-family: inherit;
}
.cal-days button:hover{ background: rgba(244,242,236,.06); color: var(--ink); }
.cal-days .cal-today{ color: var(--cal-accent); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-accent) 50%, transparent); }
.cal-days .cal-sel,
.cal-days .cal-sel:hover{ background: var(--cal-accent); color: #0A0A0B; font-weight: 700; box-shadow: none; }

/* --- Range Calendar (component) — connected band of cells */
.cal-range .cal-days{ column-gap: 0; row-gap: 3px; }
.cal-range .cal-days button{ border-radius: 0; }
.cal-range .cal-days .cal-today{ border-radius: 8px; }
.cal-range .cal-days .cal-in{ background: color-mix(in srgb, var(--cal-accent) 20%, transparent); color: var(--ink); }
.cal-range .cal-days .cal-in:hover{ background: color-mix(in srgb, var(--cal-accent) 28%, transparent); color: var(--ink); }
.cal-range .cal-days .cal-start{ background: var(--cal-accent); color: #0A0A0B; font-weight: 700; border-radius: 9px 0 0 9px; box-shadow: none; }
.cal-range .cal-days .cal-end{ background: var(--cal-accent); color: #0A0A0B; font-weight: 700; border-radius: 0 9px 9px 0; box-shadow: none; }
.cal-range .cal-days .cal-start.cal-single{ border-radius: 9px; }
.cal-range .cal-days .cal-start:hover, .cal-range .cal-days .cal-end:hover{ background: var(--cal-accent); color: #0A0A0B; }
.cal-foot{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--ink-soft); text-align: center; }

/* --- Tabs (component) */
.tabs-wrap{
  width: min(90%, 480px);
  --tabs-dur: 300ms;
}
.tabs-bar{
  position: relative; display: inline-flex; align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 4px; gap: 2px; width: 100%;
}
.tabs-indicator{
  position: absolute; top: 4px; left: 0;
  height: calc(100% - 8px); width: 0;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; pointer-events: none;
  transition: transform var(--tabs-dur) cubic-bezier(.22,.61,.36,1),
              width    var(--tabs-dur) cubic-bezier(.22,.61,.36,1);
}
.tabs-btn{
  position: relative; z-index: 1; flex: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 16px; border-radius: 8px;
  color: var(--ink-dim); transition: color var(--tabs-dur);
}
.tabs-btn.active{ color: var(--ink); }
.tabs-panels{ margin-top: 28px; position: relative; min-height: 110px; }
.tabs-panel{
  position: absolute; top: 0; left: 0; width: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1.38; letter-spacing: -.012em; color: var(--ink);
  opacity: 0; pointer-events: none;
}
.tabs-panel.active{
  opacity: 1; pointer-events: auto;
  animation: tabs-in var(--tabs-dur) cubic-bezier(.22,.61,.36,1) both;
}
@keyframes tabs-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* --- Counter (component) */
.cnt-wrap{ display: flex; flex-direction: column; align-items: center; gap: 32px; --cnt-color: var(--ink); --cnt-gap: 6px; }
.cnt-display{ display: flex; align-items: center; gap: var(--cnt-gap); font-family: var(--font-mono); font-weight: 500; font-size: clamp(44px, 10vw, 92px); line-height: 1; color: var(--cnt-color); user-select: none; }
.cnt-digit{ height: 1em; overflow: hidden; }
.cnt-col{ display: flex; flex-direction: column; }
.cnt-cell{ height: 1em; display: grid; place-items: center; min-width: .64em; font-variant-numeric: tabular-nums; }
.cnt-dot{ height: 1em; display: flex; align-items: flex-end; }
.cnt-live{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cnt-btns{ display: flex; gap: 8px; }
.cnt-btn{ font-family: var(--font-mono); font-size: 14px; min-width: 52px; height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); transition: color .14s var(--ease-curve), border-color .14s var(--ease-curve), background .14s var(--ease-curve), transform .08s var(--ease-curve); }
.cnt-btn:hover{ border-color: var(--ink-soft); background: rgba(244,242,236,.05); }
.cnt-btn:active{ transform: translateY(1px); }

/* --- Toggle Switch (component) */
.tgl-wrap{
  display: flex; flex-direction: column; gap: 22px;
  --tgl-color: #4A6BFF; --tgl-dur: 250ms;
}
.tgl-row{
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  user-select: none;
}
.tgl-input{
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.tgl-track{
  position: relative; flex-shrink: 0;
  width: 48px; height: 28px; border-radius: 100px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  transition: background var(--tgl-dur), border-color var(--tgl-dur);
}
.tgl-input:checked + .tgl-track{
  background: var(--tgl-color);
  border-color: var(--tgl-color);
}
.tgl-thumb{
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform var(--tgl-dur) cubic-bezier(.22,.61,.36,1);
}
.tgl-input:checked + .tgl-track .tgl-thumb{ transform: translateX(20px); }
.tgl-text{
  font-size: 14px; color: var(--ink-soft);
  transition: color var(--tgl-dur);
}
.tgl-input:checked ~ .tgl-text{ color: var(--ink); }

/* --- Toast (component) */
.toast-stage{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.toast-trigger{
  padding: 0 28px; height: 48px; border-radius: 100px;
  background: linear-gradient(135deg, #1e1e24, #131318);
  border: 1px solid rgba(244,242,236,.16);
  color: var(--ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.toast-shelf{
  position: absolute; display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none; z-index: 10;
}
.toast-shelf[data-pos="bottom-right"]  { bottom: 20px; right: 20px;  align-items: flex-end; }
.toast-shelf[data-pos="top-right"]     { top: 20px;    right: 20px;  align-items: flex-end; flex-direction: column; }
.toast-shelf[data-pos="bottom-center"] { bottom: 20px; left: 0; right: 0; align-items: center; }
.toast-item{
  display: flex; align-items: center; gap: 12px; pointer-events: auto;
  padding: 12px 14px 12px 16px; border-radius: 12px; max-width: 290px;
  background: rgba(26,26,32,.96); border: 1px solid rgba(244,242,236,.13);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: toast-in 280ms cubic-bezier(.22,.61,.36,1) both;
}
.toast-item.toast-out{ animation: toast-exit 220ms ease forwards; }
.toast-accent{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--amber); }
.toast-msg{
  flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft);
}
.toast-close{
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  font-size: 16px; line-height: 1; color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.toast-close:hover{ background: rgba(255,255,255,.08); color: var(--ink); }
@keyframes toast-in   { from{ opacity:0; transform:scale(.92) translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes toast-exit { to  { opacity:0; transform:scale(.88); } }

/* --- Skeleton (component) */
.skel-scene{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  --skel-dur: 1.5s; --skel-hi: rgba(255,255,255,.11);
}
.skel-card{
  width: min(88%, 300px);
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(244,242,236,.08);
}
.skel-header{ display: flex; align-items: center; gap: 12px; }
.skel-titles{ flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel-bone{
  position: relative; overflow: hidden; border-radius: 6px;
  background: rgba(255,255,255,.07);
}
.skel-bone::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skel-hi) 50%, transparent 100%);
  animation: skel-wave var(--skel-dur) linear infinite;
}
@keyframes skel-wave{ from{ transform:translateX(-100%); } to{ transform:translateX(200%); } }
.skel-avatar{ width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skel-image { height: 130px; border-radius: 10px; }
.skel-line  { height: 11px; }
.skel-btn   { height: 34px; width: 110px; border-radius: 100px; margin-top: 4px; }

/* --- Tooltip (component) */
.tip-scene{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; --tip-delay: 0ms;
}
.tip-grid{ display: grid; grid-template-columns: repeat(2, auto); gap: 24px; }
.tip-host{ position: relative; display: inline-flex; }
.tip-btn{
  width: 46px; height: 46px; border-radius: 12px; font-size: 18px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: var(--ink-dim); transition: background .15s, color .15s;
}
.tip-btn:hover{ background: rgba(255,255,255,.10); color: var(--ink); }
.tip-bubble{
  position: absolute; z-index: 20; white-space: nowrap;
  padding: 6px 10px; border-radius: 7px;
  background: rgba(22,22,28,.97); border: 1px solid rgba(244,242,236,.14);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-soft);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms, transform 150ms;
  transition-delay: var(--tip-delay);
}
.tip-host:hover .tip-bubble{ opacity: 1; }
.tip-bubble::after{
  content: ''; position: absolute; border: 5px solid transparent;
}
/* TOP (default) */
.tip-host[data-pos="top"] .tip-bubble{
  bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(5px);
}
.tip-host[data-pos="top"]:hover .tip-bubble{ transform: translateX(-50%) translateY(0); }
.tip-host[data-pos="top"] .tip-bubble::after{
  top: 100%; left: 50%; transform: translateX(-50%); border-top-color: rgba(22,22,28,.97);
}
/* BOTTOM */
.tip-host[data-pos="bottom"] .tip-bubble{
  top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-5px);
}
.tip-host[data-pos="bottom"]:hover .tip-bubble{ transform: translateX(-50%) translateY(0); }
.tip-host[data-pos="bottom"] .tip-bubble::after{
  bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: rgba(22,22,28,.97);
}
/* LEFT */
.tip-host[data-pos="left"] .tip-bubble{
  right: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(5px);
}
.tip-host[data-pos="left"]:hover .tip-bubble{ transform: translateY(-50%) translateX(0); }
.tip-host[data-pos="left"] .tip-bubble::after{
  left: 100%; top: 50%; transform: translateY(-50%); border-left-color: rgba(22,22,28,.97);
}
/* RIGHT */
.tip-host[data-pos="right"] .tip-bubble{
  left: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(-5px);
}
.tip-host[data-pos="right"]:hover .tip-bubble{ transform: translateY(-50%) translateX(0); }
.tip-host[data-pos="right"] .tip-bubble::after{
  right: 100%; top: 50%; transform: translateY(-50%); border-right-color: rgba(22,22,28,.97);
}

/* --- Carousel (component) */
.car-scene{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; width: 100%; height: 100%;
}
.car-viewport{ width: 100%; max-width: 310px; overflow: hidden; border-radius: 16px; }
.car-track{ display: flex; gap: var(--car-gap, 12px); transition: transform 420ms cubic-bezier(.22,.61,.36,1); will-change: transform; }
.car-slide{
  min-width: 0; flex-shrink: 0; box-sizing: border-box; padding: 26px 22px 22px;
  background: hsl(var(--car-hue) 28% 13%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
}
.car-chip{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .10em;
  text-transform: uppercase; color: hsl(var(--car-hue) 55% 58%); margin-bottom: 4px;
}
.car-head{ font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.car-sub{ font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.car-controls{ display: flex; align-items: center; gap: 10px; }
.car-arrow{
  width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, opacity .15s;
}
.car-arrow:hover:not(:disabled){ background: rgba(255,255,255,.12); color: var(--ink); }
.car-arrow:disabled{ opacity: .25; cursor: not-allowed; }
.car-dots{ display: flex; gap: 6px; align-items: center; }
.car-dot{
  height: 6px; width: 6px; border-radius: 100px; padding: 0;
  background: rgba(255,255,255,.20); border: none; cursor: pointer;
  transition: width .25s, background .25s;
}
.car-dot.car-on{ width: 20px; background: var(--ink-soft); }
.car-scene.car-bar .car-dot{ height: 4px; width: 22px; }
.car-scene.car-bar .car-dot.car-on{ width: 34px; background: var(--ink); }

/* --- Masonry (component) */
.mas-scene{
  width: 100%; height: 100%; overflow-y: auto; padding: 16px; box-sizing: border-box;
}
.mas-grid{ column-count: var(--mas-cols, 3); column-gap: var(--mas-gap, 8px); }
.mas-card{
  break-inside: avoid; margin-bottom: var(--mas-gap, 8px); box-sizing: border-box;
  padding: 16px 14px;
  background: hsl(var(--mas-hue, 220) 28% 13%);
  border: 1px solid rgba(255,255,255,.07); border-radius: 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.mas-chip{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .10em;
  text-transform: uppercase; color: hsl(var(--mas-hue, 220) 55% 58%); margin-bottom: 2px;
}
.mas-head{ font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); }
.mas-body{ font-size: 12px; line-height: 1.65; color: var(--ink-soft); }

/* --- Scroll Progress (component) */
.scp-scene{ display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.scp-rail{ width: 100%; background: rgba(255,255,255,.06); flex-shrink: 0; }
.scp-rail.scp-bot{ order: 2; }
.scp-bar{ height: 100%; width: 0%; background: var(--cobalt); }
.scp-scroll{
  flex: 1; overflow-y: auto; padding: 28px 24px; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.scp-scroll::-webkit-scrollbar{ width: 4px; }
.scp-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 4px; }
.scp-article{ max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.scp-section{ display: flex; flex-direction: column; gap: 9px; }
.scp-num{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.scp-h{ font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.scp-p{ font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* --- Drawer (component) */
.drw-scene{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; position:relative; overflow:hidden;
}
.drw-trigger{
  padding: 10px 24px; border-radius: 8px; font-size: 14px; font-family: var(--font-body);
  font-weight: 500; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  transition: background .15s;
}
.drw-trigger:hover{ background: rgba(255,255,255,.14); }
.drw-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.52); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition: opacity .3s;
}
.drw-backdrop.drw-open{ opacity:1; pointer-events:auto; }
.drw-panel{
  position:absolute; background: hsl(0 0% 9%);
  display:flex; flex-direction:column;
  transition: transform .36s cubic-bezier(.22,.61,.36,1);
}
/* right */
.drw-right .drw-panel{
  right:0; top:0; bottom:0; width:var(--drw-w,220px);
  border-left:1px solid rgba(255,255,255,.07);
  transform:translateX(100%);
}
.drw-right .drw-open .drw-panel{ transform:translateX(0); }
/* left */
.drw-left .drw-panel{
  left:0; top:0; bottom:0; width:var(--drw-w,220px);
  border-right:1px solid rgba(255,255,255,.07);
  transform:translateX(-100%);
}
.drw-left .drw-open .drw-panel{ transform:translateX(0); }
/* bottom */
.drw-bot .drw-panel{
  bottom:0; left:0; right:0; height:54%;
  border-top:1px solid rgba(255,255,255,.07);
  transform:translateY(100%);
}
.drw-bot .drw-open .drw-panel{ transform:translateY(0); }

.drw-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.drw-title{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); }
.drw-close{
  width:28px; height:28px; border-radius:6px; border:none;
  background:rgba(255,255,255,.06); color:var(--ink-soft); cursor:pointer;
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .14s, color .14s;
}
.drw-close:hover{ background:rgba(255,255,255,.12); color:var(--ink); }
.drw-body{ display:flex; flex-direction:column; padding:8px; flex:1; overflow-y:auto; gap:2px; }
.drw-item{
  display:flex; align-items:center; padding:9px 12px; border-radius:7px;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
  transition:background .12s, color .12s; cursor:pointer;
}
.drw-item:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.drw-divider{ height:1px; background:rgba(255,255,255,.06); margin:6px 10px; }
.drw-danger{ color:hsl(0 70% 65%); }
.drw-danger:hover{ background:rgba(248,113,113,.08); color:hsl(0 70% 70%); }

/* --- Theme Switch (component) */
.thm-scene{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; width:100%; height:100%;
  --thm-bg:    #F5F4EF; --thm-card:  #FFFFFF;
  --thm-border:rgba(0,0,0,.09); --thm-ink:   #18181A; --thm-soft:  #72717C;
  --thm-track-w:52px; --thm-track-h:28px; --thm-thumb-sz:20px;
}
.thm-scene.thm-dark{
  --thm-bg:    #111114; --thm-card:  #18181C;
  --thm-border:rgba(255,255,255,.08); --thm-ink:   #F4F2EC; --thm-soft:  #8A8893;
}
.thm-preview{
  width:260px; background:var(--thm-card); border:1px solid var(--thm-border);
  border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 4px 28px rgba(0,0,0,.08);
  transition:background .32s,border-color .32s,box-shadow .32s;
}
.thm-scene.thm-dark .thm-preview{ box-shadow:0 4px 28px rgba(0,0,0,.45); }
.thm-card-hd{ display:flex; align-items:center; gap:12px; }
.thm-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--cobalt); color:#fff;
  font-size:12px; font-weight:700; font-family:var(--font-mono);
  display:flex; align-items:center; justify-content:center;
}
.thm-meta{ flex:1; min-width:0; }
.thm-name{ font-size:14px; font-weight:600; color:var(--thm-ink); transition:color .32s; }
.thm-role{ font-size:12px; color:var(--thm-soft); transition:color .32s; }
.thm-badge-pro{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  padding:3px 8px; border-radius:99px; flex-shrink:0;
  background:rgba(74,107,255,.14); color:var(--cobalt);
}
.thm-stats{
  display:flex; border-top:1px solid var(--thm-border); padding-top:16px;
  transition:border-color .32s;
}
.thm-stat{ flex:1; text-align:center; }
.thm-stat-v{
  font-family:var(--font-display); font-size:20px; font-weight:700;
  color:var(--thm-ink); line-height:1.1; transition:color .32s;
}
.thm-stat-l{ font-size:11px; color:var(--thm-soft); margin-top:2px; transition:color .32s; }
/* switch row */
.thm-switch-row{ display:flex; align-items:center; gap:10px; }
.thm-lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-dim); transition:color .2s; }
.thm-lbl.on{ color:var(--ink); }
/* pill */
.thm-pill-wrap{ display:flex; align-items:center; gap:10px; }
.thm-pill{
  position:relative; cursor:pointer; border:none; padding:0;
  width:var(--thm-track-w); height:var(--thm-track-h); border-radius:99px;
  background:rgba(255,255,255,.10); outline:1px solid rgba(255,255,255,.14);
  transition:background .25s, outline-color .25s;
}
.thm-pill[aria-checked="true"]{ background:var(--cobalt); outline-color:transparent; }
.thm-thumb{
  position:absolute;
  top:calc((var(--thm-track-h) - var(--thm-thumb-sz)) / 2);
  left:calc((var(--thm-track-h) - var(--thm-thumb-sz)) / 2);
  width:var(--thm-thumb-sz); height:var(--thm-thumb-sz); border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), background .25s;
}
.thm-pill[aria-checked="true"] .thm-thumb{
  transform:translateX(calc(var(--thm-track-w) - var(--thm-track-h)));
  background:#fff;
}
/* segmented */
.thm-seg{
  display:none; align-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:3px; gap:3px;
}
.thm-scene.thm-style-seg .thm-seg{ display:flex; }
.thm-scene.thm-style-seg .thm-pill-wrap{ display:none; }
.thm-seg-opt{
  padding:6px 14px; border-radius:7px; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-soft); background:transparent;
  transition:background .15s, color .15s;
}
.thm-seg-opt.thm-seg-sel{ background:rgba(255,255,255,.12); color:var(--ink); }

/* --- Spotlight Grid (component) */
.spg-scene{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:20px; box-sizing:border-box;
}
.spg-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; width:100%; max-width:480px;
}
.spg-card{
  position:relative; overflow:hidden; border-radius:14px;
  padding:18px 14px; display:flex; flex-direction:column; gap:7px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.spg-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(
    var(--spg-r,180px) circle at
    calc(var(--gx,-9999px) - var(--cx,0px))
    calc(var(--gy,-9999px) - var(--cy,0px)),
    var(--spg-col,rgba(74,107,255,.3)), transparent 70%
  );
  pointer-events:none; opacity:0; transition:opacity .5s;
}
.spg-grid:hover .spg-card::before{ opacity:1; }
.spg-num{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.28);
}
.spg-head{ font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--ink); }
.spg-body{ font-size:11px; line-height:1.6; color:var(--ink-soft); }

/* --- Liquid Blob (component) */
.goo-scene{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; background:#08080A; overflow:hidden;
}
.goo-wrap{
  position:relative; width:260px; height:260px;
  filter:blur(12px) contrast(28);
}
.goo-blob{
  position:absolute; border-radius:50%; width:80px; height:80px;
  background:var(--goo-col,#4A6BFF);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-duration:var(--blob-dur, 5s);
}
.goo-blob:nth-child(1){ top:90px; left:90px;  animation-name:gooA; }
.goo-blob:nth-child(2){ top:68px; left:102px; animation-name:gooB; }
.goo-blob:nth-child(3){ top:108px;left:76px;  animation-name:gooC; }
.goo-blob:nth-child(4){ top:82px; left:118px; animation-name:gooD; }
.goo-blob:nth-child(5){ top:112px;left:104px; animation-name:gooE; }
.goo-blob:nth-child(6){ top:62px; left:84px;  animation-name:gooF; }
.goo-blob:nth-child(7){ top:98px; left:58px;  animation-name:gooG; }
@keyframes gooA{ to{ transform:translate( 52px,-46px) scale(1.10); } }
@keyframes gooB{ to{ transform:translate(-58px, 42px) scale(0.90); } }
@keyframes gooC{ to{ transform:translate( 66px, 38px) scale(1.06); } }
@keyframes gooD{ to{ transform:translate(-42px,-54px) scale(1.14); } }
@keyframes gooE{ to{ transform:translate( 58px,-28px) scale(0.94); } }
@keyframes gooF{ to{ transform:translate( 40px, 58px) scale(1.18); } }
@keyframes gooG{ to{ transform:translate(-54px,-18px) scale(0.86); } }
.goo-scene.goo-c3 .goo-blob:nth-child(n+4){ display:none; }
.goo-scene.goo-c5 .goo-blob:nth-child(n+6){ display:none; }
@media(prefers-reduced-motion:reduce){ .goo-blob{ animation:none !important; } }

/* --- Morphing Button (component) */
.mb-scene{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; width:100%; height:100%;
}
.mb-btn{
  position:relative; cursor:pointer; border:none; color:#fff;
  height:48px; width:160px; border-radius:10px;
  background:var(--cobalt);
  font-family:var(--font-body); font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:
    width    .4s  cubic-bezier(.22,.61,.36,1),
    border-radius .4s cubic-bezier(.22,.61,.36,1),
    background .28s;
}
.mb-btn:hover:not(:disabled){ filter:brightness(1.12); }
.mb-btn:disabled{ cursor:not-allowed; }
/* collapse to circle on non-idle states */
.mb-btn.mb-loading,
.mb-btn.mb-done{ width:48px; border-radius:50%; }
/* label fades out when busy */
.mb-label{ transition:opacity .18s; white-space:nowrap; }
.mb-btn.mb-loading .mb-label,
.mb-btn.mb-done    .mb-label{ opacity:0; }
/* spinner ring via ::after */
.mb-btn::after{
  content:''; position:absolute; inset:11px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff;
  opacity:0; animation:mb-spin .72s linear infinite;
  animation-play-state:paused;
}
.mb-btn.mb-loading::after{ opacity:1; animation-play-state:running; transition:opacity .15s .32s; }
@keyframes mb-spin{ to{ transform:rotate(360deg); } }
/* icon SVGs */
.mb-icon{
  position:absolute; width:20px; height:20px;
  opacity:0; transform:scale(.4);
  transition:opacity .22s, transform .34s cubic-bezier(.34,1.56,.64,1);
}
.mb-btn.mb-done .mb-icon{ opacity:1; transform:scale(1); }
/* result colours */
.mb-btn.mb-success{ background:#22c55e; }
.mb-btn.mb-error  { background:#ef4444; }
/* hint */
.mb-hint{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .2s;
}
@media(prefers-reduced-motion:reduce){
  .mb-btn,.mb-icon,.mb-label{ transition:none !important; }
  .mb-btn::after{ animation:none !important; }
}

/* --- Tag Input */
.tinp-scene{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:32px 24px; box-sizing:border-box;
}
.tinp-field{
  width:min(380px,100%); display:flex; flex-direction:column; gap:14px;
}
.tinp-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}
.tinp-input{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.20);
  border-radius:10px; padding:11px 14px;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  outline:none; caret-color:var(--cobalt); transition:border-color .15s;
}
.tinp-input::placeholder{ color:var(--ink-dim); }
.tinp-input:focus{ border-color:var(--cobalt); }
.tinp-tags{ display:flex; flex-wrap:wrap; gap:8px; min-height:28px; }
.tinp-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px 4px 12px;
  background:rgba(74,107,255,.18); border:1px solid rgba(74,107,255,.36);
  border-radius:8px; font-size:13px; color:var(--ink);
}
.tinp-lbl{ pointer-events:none; }
.tinp-rm{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:0;
  width:16px; height:16px; border-radius:4px;
  color:rgba(74,107,255,.7); font-size:14px; line-height:1;
  transition:background .1s, color .1s;
}
.tinp-rm:hover{ background:rgba(74,107,255,.25); color:var(--ink); }

/* --- Drop Zone */
.dndz-scene{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:24px; box-sizing:border-box;
}
.dndz-zone{
  position:relative; width:min(360px,100%);
  border:2px dashed rgba(255,255,255,.18); border-radius:16px;
  padding:40px 24px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dndz-zone.is-hover{
  border-color:var(--cobalt); background:rgba(74,107,255,.08);
}
.dndz-inp{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}
.dndz-icon{ color:var(--ink-dim); display:block; margin:0 auto 14px; }
.dndz-lbl{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  font-weight:500; margin-bottom:6px;
}
.dndz-sub{ font-size:13px; color:var(--ink-dim); }
.dndz-browse{
  background:none; border:none; cursor:pointer; color:var(--cobalt);
  font-size:13px; font-family:var(--font-body);
  padding:0; text-decoration:underline; text-underline-offset:2px;
}
.dndz-browse:hover{ color:var(--ink); }
.dndz-list{ text-align:left; }
.dndz-file{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.dndz-file:last-of-type{ border-bottom:none; }
.dndz-ftag{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 7px; border-radius:4px;
  background:rgba(74,107,255,.18); border:1px solid rgba(74,107,255,.32);
  color:var(--cobalt); white-space:nowrap; flex-shrink:0;
}
.dndz-fname{
  font-size:13px; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.dndz-fsize{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); flex-shrink:0;
}
.dndz-reset{
  display:block; width:100%; margin-top:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:8px; padding:8px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; color:var(--ink-dim);
  transition:background .15s, color .15s;
}
.dndz-reset:hover{ background:rgba(255,255,255,.10); color:var(--ink); }

/* --- Popover (component) */
.pop-scene{
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; overflow: visible;
  --pop-bg: rgb(24,24,30); --pop-blur: 0px;
}
.pop-host{ position: relative; display: inline-flex; }
.pop-trigger{
  padding: 0 24px; height: 42px; border-radius: 100px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--ink-soft); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background .15s, color .15s;
}
.pop-trigger:hover{ background: rgba(255,255,255,.10); color: var(--ink); }
.pop-panel{
  position: absolute; z-index: 30; width: 210px; padding: 16px;
  background: var(--pop-bg); backdrop-filter: blur(var(--pop-blur));
  border: 1px solid rgba(244,242,236,.12); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms, transform 200ms cubic-bezier(.22,.61,.36,1);
}
.pop-host.pop-open .pop-panel{ opacity: 1; pointer-events: auto; }
.pop-host[data-side="bottom"] .pop-panel{
  top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
}
.pop-host[data-side="bottom"].pop-open .pop-panel{ transform: translateX(-50%) translateY(0); }
.pop-host[data-side="top"] .pop-panel{
  bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
}
.pop-host[data-side="top"].pop-open .pop-panel{ transform: translateX(-50%) translateY(0); }
.pop-host[data-side="right"] .pop-panel{
  left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-6px);
}
.pop-host[data-side="right"].pop-open .pop-panel{ transform: translateY(-50%) translateX(0); }
.pop-av{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cobalt); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #fff;
  margin-bottom: 10px;
}
.pop-name{ font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.pop-role{ font-size: 12px; color: var(--ink-dim); margin-bottom: 14px; }
.pop-sep{ height: 1px; background: rgba(244,242,236,.08); margin-bottom: 14px; }
.pop-row{ display: flex; gap: 8px; }
.pop-btn{
  flex: 1; height: 32px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: var(--ink-soft); transition: background .15s;
}
.pop-btn:hover{ background: rgba(255,255,255,.10); }
.pop-btn-hi{ background: var(--cobalt); border-color: transparent; color: #fff; }
.pop-btn-hi:hover{ filter: brightness(1.12); }

/* --- Star Rating (component) */
.rat-scene{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  --rat-col: var(--amber); --rat-sz: 40px;
}
.rat-wrap{ display: flex; flex-direction: row-reverse; gap: 6px; }
.rat-input{ display: none; }
.rat-label{
  font-size: var(--rat-sz); line-height: 1; cursor: pointer;
  color: rgba(255,255,255,.12);
  transition: color 120ms, transform 120ms;
  user-select: none;
}
.rat-label:hover{ transform: scale(1.18); }
/* layer 1 — selected (spec 0,3,0) */
.rat-input:checked ~ .rat-label{ color: var(--rat-col); }
/* layer 2 — dim all on wrap hover, overrides selected (same spec 0,3,0, later in file) */
.rat-wrap:hover .rat-label{ color: rgba(255,255,255,.12); }
/* layer 3 — re-color hovered star + lower stars (spec 0,4,0 and 0,5,0 — beats layer 2) */
.rat-wrap:hover .rat-label:hover,
.rat-wrap:hover .rat-label:hover ~ .rat-label{ color: var(--rat-col); }

/* --- Floating Label Input (component) */
.fli-scene{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; --fli-accent: var(--cobalt);
}
.fli-stack{ display: flex; flex-direction: column; gap: 16px; width: 264px; }
.fli-field{ position: relative; }
.fli-input{
  width: 100%; height: 52px; box-sizing: border-box;
  padding: 18px 14px 6px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  outline: none; transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.fli-label{
  position: absolute; left: 14px; top: 14px; line-height: 1;
  font-family: var(--font-body); font-size: 14px; color: var(--ink-dim);
  pointer-events: none;
  transition: top 180ms, font-size 180ms, color 180ms, letter-spacing 180ms;
}
/* label floats when input is focused or has content */
.fli-input:focus + .fli-label,
.fli-input:not(:placeholder-shown) + .fli-label{
  top: 7px; font-size: 10px; letter-spacing: .05em;
}
.fli-input:focus + .fli-label{ color: var(--fli-accent); }
/* OUTLINE */
.fli-field[data-variant="outline"] .fli-input{
  background: transparent; border: 1.5px solid rgba(255,255,255,.12); border-radius: 10px;
}
.fli-field[data-variant="outline"] .fli-input:focus{
  border-color: transparent; box-shadow: 0 0 0 1.5px var(--fli-accent);
}
/* FILL */
.fli-field[data-variant="fill"] .fli-input{
  background: rgba(255,255,255,.06); border: none; border-radius: 10px;
}
.fli-field[data-variant="fill"] .fli-input:focus{
  background: rgba(255,255,255,.09); box-shadow: 0 0 0 1.5px var(--fli-accent);
}
/* LINE */
.fli-field[data-variant="line"] .fli-input{
  background: transparent; border: none;
  border-bottom: 1.5px solid rgba(255,255,255,.15);
  border-radius: 0; padding-left: 0;
}
.fli-field[data-variant="line"] .fli-input:focus{ border-bottom-color: var(--fli-accent); }
.fli-field[data-variant="line"] .fli-label{ left: 0; }

/* --- Progress Bar (component) */
.prg-scene{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.prg-panel{ display: flex; flex-direction: column; gap: 22px; width: 256px; }
.prg-row  { display: flex; flex-direction: column; gap: 9px; }
.prg-meta { display: flex; justify-content: space-between; align-items: baseline; }
.prg-name{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim);
}
.prg-pct{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.prg-track{
  height: 5px; border-radius: 100px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.prg-fill{
  height: 100%; border-radius: 100px;
  background: var(--cobalt);
  transform-origin: left;
  transform: scaleX(var(--prg-v, 0));
  transition: transform 500ms cubic-bezier(.22,.61,.36,1);
}
.prg-fill.prg-grad{
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--amber) 100%);
}
.prg-fill.prg-stripe{
  background-image: repeating-linear-gradient(
    -45deg,
    var(--cobalt) 0px, var(--cobalt) 10px,
    rgba(255,255,255,.18) 10px, rgba(255,255,255,.18) 20px
  );
  background-size: 28px 100%;
  animation: prg-march 500ms linear infinite;
}
@keyframes prg-march{ from{ background-position: 0 0; } to{ background-position: 28px 0; } }

/* --- Modal (component) */
.mdl-scene{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  --mdl-blur: 6px;
}
.mdl-trigger{
  padding: 0 26px; height: 42px; border-radius: 100px;
  background: var(--cobalt); border: none; color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transition: filter .15s;
}
.mdl-trigger:hover{ filter: brightness(1.15); }
.mdl-backdrop{
  position: absolute; inset: 0; z-index: 10;
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(var(--mdl-blur));
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms;
}
.mdl-backdrop.mdl-open{ opacity: 1; pointer-events: auto; }
.mdl-dialog{
  width: 284px; padding: 24px 24px 20px;
  background: rgb(24,24,30); border: 1px solid rgba(244,242,236,.12);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(10px);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 210ms;
}
.mdl-backdrop.mdl-open .mdl-dialog{ opacity: 1; transform: translateY(0); }
.mdl-dialog[data-anim="scale"]{ transform: scale(.93); }
.mdl-backdrop.mdl-open .mdl-dialog[data-anim="scale"]{ transform: scale(1); }
.mdl-dialog[data-anim="fade"]{ transform: none; }
.mdl-backdrop.mdl-open .mdl-dialog[data-anim="fade"]{ transform: none; }
.mdl-dh{ font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.mdl-db{ font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; }
.mdl-df{ display: flex; gap: 10px; justify-content: flex-end; }
.mdl-btn{
  padding: 0 18px; height: 36px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; transition: background .15s;
}
.mdl-cancel{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--ink-soft); }
.mdl-cancel:hover{ background: rgba(255,255,255,.10); }
.mdl-confirm{ background: rgba(192,57,43,.85); border: none; color: #fff; }
.mdl-confirm:hover{ background: rgba(231,76,60,.9); }

/* --- Gradual Blur */
.grad-blur{
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 36px 8%;
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; color: var(--ink-soft);
  line-height: 1.3;
}
.grad-blur p{ margin: 0; opacity: .85; }
.grad-blur::before, .grad-blur::after{
  content:""; position: absolute; left: 0; right: 0; height: 80px;
  pointer-events: none; z-index: 2;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.grad-blur::before{
  top: 0;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.grad-blur::after{
  bottom: 0;
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

/* --- Pixel Transition (canvas .canvas-fill) */

/* ------------------------------------------------------------ utilities */
.reveal{ opacity: 0; transform: translateY(10px); animation: rev .9s var(--ease-curve) forwards; }
.reveal.delay-1{ animation-delay: .05s; }
.reveal.delay-2{ animation-delay: .12s; }
.reveal.delay-3{ animation-delay: .2s; }
.reveal.delay-4{ animation-delay: .28s; }
.reveal.delay-5{ animation-delay: .36s; }
@keyframes rev{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .reveal{ animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ tools (full width) */
.tool-board{ margin-top: 18px; }
.tool-controls{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--bg-2);
}
.tool-ctrl{ display: flex; flex-direction: column; gap: 8px; }
.tool-ctrl .lab{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.stepper{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
}
.stepper button{
  width: 32px; height: 36px; color: var(--ink-soft);
  font-size: 17px; line-height: 1;
  transition: color .14s var(--ease-curve), background .14s var(--ease-curve);
}
.stepper button:hover{ color: var(--ink); background: rgba(244,242,236,.05); }
.stepper input{
  width: 56px; height: 36px; text-align: center;
  background: transparent; border: 0; color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.tool-spacer{ flex: 1 1 40px; }
.tool-btn{
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  transition: color .14s var(--ease-curve), border-color .14s var(--ease-curve),
              background .14s var(--ease-curve), transform .14s var(--ease-curve);
}
.tool-btn.primary{ background: var(--paper); color: #0A0A0B; border-color: var(--paper); }
.tool-btn.primary:hover{ transform: translateY(-1px); }
.tool-btn.ghost:hover{ border-color: var(--ink-soft); color: var(--ink); }

.cgg-stage{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--stage);
  box-shadow: var(--shadow-stage);
  padding: 22px;
}
.cgg-grid{ position: relative; width: 100%; min-height: 460px; touch-action: none; }
.cgg-tracks, .cgg-items{ position: absolute; inset: 0; display: grid; }
.cgg-tracks{ z-index: 1; }
.cgg-items{ z-index: 2; pointer-events: none; }
.cgg-cell{
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: rgba(244,242,236,.014);
}
.cgg-empty{
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); pointer-events: none;
  text-align: center; padding: 0 20px;
}
.cgg-item{
  pointer-events: auto; position: relative;
  margin: 2px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(74,107,255,.30), rgba(74,107,255,.14));
  border: 1px solid rgba(74,107,255,.65);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none; overflow: hidden;
  min-width: 0; min-height: 0;
  transition: box-shadow .14s var(--ease-curve);
}
.cgg-item:hover{ box-shadow: 0 0 0 1px rgba(74,107,255,.5), 0 12px 34px -16px rgba(74,107,255,.8); }
.cgg-item.dragging{ cursor: grabbing; z-index: 6; box-shadow: 0 0 0 1px var(--amber), 0 12px 34px -14px rgba(255,162,0,.6); }
.cgg-item .cgg-name{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--ink); pointer-events: none;
}
.cgg-item .cgg-span{
  position: absolute; left: 8px; bottom: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  color: rgba(244,242,236,.6); pointer-events: none;
}
.cgg-item .cgg-del{
  position: absolute; top: 4px; right: 5px;
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); line-height: 1;
  transition: color .14s var(--ease-curve), background .14s var(--ease-curve);
}
.cgg-item .cgg-del:hover{ color: var(--amber); background: rgba(0,0,0,.3); }
.cgg-item .cgg-handle{
  position: absolute; right: 0; bottom: 0;
  width: 20px; height: 20px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 46%, rgba(74,107,255,.95) 46%);
  border-bottom-right-radius: 8px;
}
.cgg-item .cgg-handle::after{
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(10,10,11,.8); border-bottom: 1.5px solid rgba(10,10,11,.8);
}
.cgg-hint{
  margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-dim); text-transform: uppercase;
}
.cgg-hint b{ color: var(--ink-soft); font-weight: 500; }
.tool-code-wrap{ margin-top: 22px; }

/* gradient generator */
.grad-stage{
  position: relative;
  border: 1px solid var(--line-2); border-top: 0;
  min-height: 360px;
  background: #222;
}
.grad-rail-wrap{
  border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--bg-2);
  padding: 24px 24px 22px;
}
.grad-rail{
  position: relative; height: 30px;
  border: 1px solid var(--line-2); border-radius: 8px;
  cursor: copy; touch-action: none;
  margin: 6px 9px 30px;
}
.grad-stop{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
  cursor: grab; touch-action: none;
}
.grad-stop::after{
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid #fff;
}
.grad-stop.sel{ border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber), 0 2px 8px rgba(0,0,0,.5); z-index: 3; }
.grad-stop.sel::after{ border-top-color: var(--amber); }
.grad-stop.dragging{ cursor: grabbing; }
.grad-editor{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.grad-swatch{
  width: 42px; height: 36px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: transparent; cursor: pointer; overflow: hidden;
}
.grad-swatch::-webkit-color-swatch-wrapper{ padding: 0; }
.grad-swatch::-webkit-color-swatch{ border: 0; border-radius: 6px; }
.grad-swatch::-moz-color-swatch{ border: 0; border-radius: 6px; }
.grad-field{ display: flex; flex-direction: column; gap: 5px; }
.grad-field .lab{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.grad-field .val{ font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.grad-editor .spacer{ flex: 1 1 30px; }
.tool-ctrl.grad-angle{ width: 210px; }
.tool-ctrl.grad-angle.hidden{ display: none; }
.tool-ctrl.grad-angle .slider{ width: 100%; }

/* glassmorphism generator */
.tool-ctrl.range{ width: 172px; }
.tool-ctrl.range .slider{ width: 100%; }
.glass-stage{
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 var(--r-3) var(--r-3);
  min-height: 460px;
  background-size: cover; background-position: center;
}
.glass-card{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 300px; min-height: 188px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; justify-content: center;
  padding: 28px 30px;
  cursor: grab; user-select: none; touch-action: none;
}
.glass-card.dragging{ cursor: grabbing; }
.glass-card .gc-dot{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.35); margin-bottom: 4px; pointer-events: none; }
.glass-card .gc-title{ font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: #fff; pointer-events: none; }
.glass-card .gc-sub{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); pointer-events: none; }

/* easing / cubic-bezier editor */
.ease-main{
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 var(--r-3) var(--r-3);
  background: var(--bg-2);
  overflow: hidden;
}
@media (max-width: 840px){ .ease-main{ grid-template-columns: 1fr; } }
.ease-curve-pane{
  padding: 24px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
@media (max-width: 840px){ .ease-curve-pane{ border-right: 0; border-bottom: 1px solid var(--line); } }
.ease-svg{ width: 100%; max-width: 300px; height: auto; overflow: visible; touch-action: none; user-select: none; }
.ease-svg .unit-box{ fill: rgba(244,242,236,.02); stroke: var(--line-2); stroke-width: 1; }
.ease-svg .grid-line{ stroke: var(--line); stroke-width: 1; }
.ease-svg .guide-1{ stroke: var(--cobalt); stroke-width: 1.5; opacity: .55; }
.ease-svg .guide-2{ stroke: var(--amber); stroke-width: 1.5; opacity: .55; }
.ease-svg .curve{ fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; }
.ease-svg .endpoint{ fill: var(--ink-soft); }
.ease-svg .handle{ cursor: grab; touch-action: none; }
.ease-svg .handle:active{ cursor: grabbing; }
.ease-svg .handle.dragging circle{ r: 9; }
.ease-readout{
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  letter-spacing: .01em; text-align: center; word-break: break-word;
}
.ease-readout b{ color: var(--cobalt); font-weight: 500; }
.ease-preview-pane{ padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ease-track .tk-lab{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 9px;
}
.ease-track .tk-lab.gap{ margin-top: 14px; }
.ease-rail{ position: relative; height: 34px; }
.ease-rail.scale-rail{ height: 84px; display: flex; align-items: center; justify-content: center; }
.ease-ball{ position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; left: 0; }
.ease-ball.eased{ width: 28px; height: 28px; background: linear-gradient(135deg, var(--cobalt), #8aa0ff); box-shadow: 0 4px 16px -2px rgba(74,107,255,.7); }
.ease-ball.ghost{ width: 20px; height: 20px; background: rgba(255,162,0,.22); border: 1px solid rgba(255,162,0,.5); }
.ease-scalebox{ width: 66px; height: 66px; border-radius: 16px; background: linear-gradient(135deg, var(--cobalt), var(--amber)); box-shadow: 0 10px 30px -10px rgba(74,107,255,.6); }