/* ============================================================
   BENTO LIBRARY · Ink Components
   3 systems: Verdant (green), Cobalt (blue), Ember (orange)
============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
button{font:inherit}

:root{
  --font-sans:'General Sans','Satoshi',ui-sans-serif,system-ui,sans-serif;
  --font-display:'Satoshi','General Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --page-bg:#050607;
  --page-fg:#E8ECEF;
  --page-mute:#8A9199;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
}

body{
  font-family:var(--font-sans);
  background:
    radial-gradient(1200px 700px at 15% -5%, rgba(15,191,122,.06), transparent 60%),
    radial-gradient(1000px 700px at 85% 30%, rgba(102,168,255,.05), transparent 60%),
    radial-gradient(1200px 800px at 50% 110%, rgba(255,138,66,.05), transparent 60%),
    #050607;
  color:var(--page-fg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  letter-spacing:-0.005em;
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
  background:rgba(6,7,9,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:-0.01em;color:#F5F7FA}
.brand svg{color:#F5F7FA}
.nav{display:flex;gap:6px;margin-left:auto}
.pill{
  font-size:12.5px;color:#C3CAD1;text-decoration:none;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.02);
  transition:.2s ease;
}
.pill:hover{background:rgba(255,255,255,.06);color:#fff;border-color:var(--border-strong)}
.meta{font-family:var(--font-mono);font-size:11px;color:var(--page-mute);letter-spacing:.02em}

/* Layout */
.wrap{max-width:1360px;margin:0 auto;padding:56px 28px 96px;display:flex;flex-direction:column;gap:96px}
.showcase{scroll-margin-top:80px}
.showcase__head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;max-width:720px}
.showcase__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--page-mute);
}
.showcase__eyebrow .dot{width:8px;height:8px;border-radius:99px;background:var(--dot,#5EF3B4);box-shadow:0 0 12px var(--dot,#5EF3B4)}
.showcase__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-0.025em;
  margin:0;color:#F5F7FA;
}
.showcase__desc{color:#98A0A8;font-size:15.5px;line-height:1.55;margin:0;max-width:60ch}

/* Bento grid - 5 tiles, row1: 2fr 3fr, row2: 1fr 1fr 1fr */
.bento{
  display:grid;gap:18px;
  grid-template-columns:2fr 3fr;
  grid-template-rows:auto auto;
}
.bento .card--tall{grid-column:1/2}
.bento .card--tall + .card{grid-column:2/3}
.bento > .card:nth-child(n+3){grid-column:auto}
.bento > .card:nth-child(3),
.bento > .card:nth-child(4),
.bento > .card:nth-child(5){grid-column:auto}

/* Second row spans all 3 columns */
.bento{grid-template-columns:2fr 1.5fr 1.5fr}
.bento > .card:nth-child(1){grid-column:1/2;grid-row:1/2}
.bento > .card:nth-child(2){grid-column:2/4;grid-row:1/2}
.bento > .card:nth-child(3){grid-column:1/2;grid-row:2/3}
.bento > .card:nth-child(4){grid-column:2/3;grid-row:2/3}
.bento > .card:nth-child(5){grid-column:3/4;grid-row:2/3}

@media (max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .bento > .card:nth-child(1),
  .bento > .card:nth-child(2){grid-column:1/-1;grid-row:auto}
  .bento > .card:nth-child(3),
  .bento > .card:nth-child(4),
  .bento > .card:nth-child(5){grid-column:auto;grid-row:auto}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bento > .card{grid-column:1/-1 !important}
}

/* Card base */
.card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  min-height:320px;
  padding:26px 26px 22px;
  border:1px solid var(--card-border,rgba(255,255,255,.08));
  background:var(--card-bg,#0B0E12);
  display:flex;flex-direction:column;gap:16px;
  isolation:isolate;
}
.card--tall{min-height:440px}
.bento > .card:nth-child(2){min-height:440px}

/* Neumorphic grids: let cards size to content instead of forcing 440px */
[data-theme="halo"] .bento > .card:nth-child(2),
[data-theme="sable"] .bento > .card:nth-child(2),
[data-theme="amber"] .bento > .card:nth-child(2){min-height:auto}
[data-theme="halo"] .card--tall,
[data-theme="sable"] .card--tall,
[data-theme="amber"] .card--tall{min-height:auto}
.card__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;max-width:36ch}
.eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--eyebrow,rgba(255,255,255,.55));
}
.h{
  font-family:var(--font-display);font-weight:600;
  font-size:26px;line-height:1.08;letter-spacing:-0.025em;
  margin:0;color:#F6F8FA;
}
.h--sm{font-size:19px;letter-spacing:-0.02em}
.card--tall .h{font-size:34px}
.p{color:#9BA3AC;font-size:14px;line-height:1.55;margin:4px 0 0;max-width:34ch}
.p--sm{font-size:13px}

/* ============================================================
   THEME 01 · VERDANT (Emerald aurora)
============================================================ */
[data-theme="verdant"]{--dot:#5EF3B4}

.verdant .card{
  --card-bg:linear-gradient(180deg,#061711 0%,#03110C 100%);
  --card-border:rgba(94,243,180,.14);
  --eyebrow:rgba(184,255,223,.7);
}
.verdant .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(94,243,180,.05),transparent 40%);
  z-index:1;
}
.eyebrow--v{color:#B8FFDF}

/* Aurora bleed */
.v-aurora{
  position:absolute;left:-10%;right:-10%;bottom:-40%;height:80%;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(94,243,180,.55), transparent 70%),
    radial-gradient(40% 40% at 30% 100%, rgba(15,191,122,.45), transparent 70%),
    radial-gradient(40% 40% at 70% 100%, rgba(120,255,190,.4), transparent 70%);
  filter:blur(30px);
  z-index:0;pointer-events:none;
}
.v-aurora--soft{opacity:.55}
.v-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(94,243,180,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,243,180,.08) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 80% at 50% 100%,#000,transparent 70%);
  z-index:0;pointer-events:none;
}

/* Verdant hero canvas mock (birds-eye of a single Verdant workspace) */
.v-hero{padding-bottom:0}
.v-canvas{
  position:absolute;left:0;right:0;bottom:0;
  height:58%;z-index:1;pointer-events:none;
  padding:0 22px 20px;
  filter:drop-shadow(0 0 32px rgba(94,243,180,.28));
}
.v-canvas svg{display:block;width:100%;height:100%;overflow:visible}
@media (max-width:900px){.v-canvas{height:52%;padding:0 14px 14px}}

/* Task mock */
.v-mock{
  position:relative;flex:1;min-height:200px;margin-top:8px;
}
.mock-card{
  position:absolute;border-radius:14px;
  background:linear-gradient(180deg,rgba(9,32,24,.85),rgba(4,15,11,.85));
  border:1px solid rgba(94,243,180,.22);
  padding:12px 14px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6),0 0 40px rgba(94,243,180,.18);
  backdrop-filter:blur(10px);
  color:#DFFFEE;font-size:12px;
  min-width:220px;
}
.mock-card--a{left:2%;top:8%;transform:rotate(-2deg)}
.mock-card--b{right:2%;top:30%;transform:rotate(2deg)}
.mock-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#B8FFDF;font-weight:500;padding-bottom:8px;border-bottom:1px solid rgba(94,243,180,.15)}
.mock-title{flex:1}
.mock-actions{color:rgba(184,255,223,.6);font-size:12px}
.mock-row{margin:8px 0}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:rgba(94,243,180,.15);color:#B8FFDF;font-size:10.5px;font-family:var(--font-mono)}
.tag em{opacity:.6;font-style:normal}
.mock-line{color:#EAFDF3;font-weight:500;margin:6px 0 2px}
.mock-sub{color:rgba(184,255,223,.55);font-size:11px;margin-bottom:8px}
.mock-progress{display:flex;flex-direction:column;gap:6px;font-size:11px;color:rgba(184,255,223,.6)}
.mock-progress .bar{height:3px;border-radius:99px;background:rgba(94,243,180,.14);overflow:hidden}
.mock-progress .bar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#5EF3B4,#B8FFDF);box-shadow:0 0 12px #5EF3B4}
.mock-foot{display:flex;justify-content:space-between;font-size:10.5px;color:rgba(184,255,223,.5);margin-top:8px;font-family:var(--font-mono)}

/* Checklist chips */
.chips{list-style:none;padding:0;margin:auto 0 4px;position:relative;height:140px}
.chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  background:linear-gradient(180deg,rgba(9,32,24,.9),rgba(4,15,11,.85));
  border:1px solid rgba(94,243,180,.3);
  color:#DFFFEE;font-size:11.5px;
  box-shadow:0 0 22px rgba(94,243,180,.18);
  white-space:nowrap;
}
.chip .chk{width:16px;height:16px;border-radius:99px;background:#5EF3B4;color:#03110C;display:grid;place-items:center;font-size:10px;font-weight:800}
.chip--left{left:0;top:0}
.chip--right{right:0;top:34px}
.chip--left2{left:12px;top:70px}
.chip--right2{right:12px;top:104px}
.chip::before{
  content:"";position:absolute;top:50%;width:60px;height:1px;background:linear-gradient(90deg,transparent,#5EF3B4);
}
.chip--left::before,.chip--left2::before{right:-56px}
.chip--right::before,.chip--right2::before{left:-56px;background:linear-gradient(90deg,#5EF3B4,transparent)}

/* Workspaces stack */
.stack{position:relative;margin:auto auto 8px;width:180px;height:130px}
.stack-card{
  position:absolute;left:0;right:0;height:78px;border-radius:14px;
  background:linear-gradient(180deg,rgba(94,243,180,.28),rgba(94,243,180,.06));
  border:1px solid rgba(94,243,180,.4);
  backdrop-filter:blur(8px);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6),0 0 24px rgba(94,243,180,.18);
}
.s1{bottom:34px;transform:translateY(0) scale(1);z-index:3;display:grid;place-items:center;color:#B8FFDF;font-size:22px}
.s2{bottom:18px;transform:scale(.92);z-index:2;opacity:.85}
.s3{bottom:2px;transform:scale(.84);z-index:1;opacity:.7}

/* Radar */
.radar{position:relative;margin:auto auto 8px;width:200px;height:200px}
.ring{position:absolute;inset:0;border-radius:99px;border:1px solid rgba(94,243,180,.35);pointer-events:none}
.ring.r2{inset:22px}
.ring.r3{inset:44px}
.sweep{
  position:absolute;inset:0;border-radius:99px;
  background:conic-gradient(from 180deg,transparent 0deg,rgba(94,243,180,.45) 60deg,transparent 90deg);
  mask:radial-gradient(circle,transparent 20px,#000 22px);
  -webkit-mask:radial-gradient(circle,transparent 20px,#000 22px);
}
.core{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:99px;background:radial-gradient(circle,#5EF3B4,#0FBF7A);display:grid;place-items:center;color:#03110C;box-shadow:0 0 24px #5EF3B4}
.blip{position:absolute;color:#B8FFDF;filter:drop-shadow(0 0 8px #5EF3B4)}
.b1{top:10px;right:22px}
.b2{bottom:16px;left:6px}
.b3{bottom:28px;right:8px}

/* ============================================================
   THEME 02 · COBALT (Electric blue mesh)
============================================================ */
[data-theme="cobalt"]{--dot:#7DE3FF}

.cobalt .card{
  --card-bg:linear-gradient(180deg,#050912 0%,#02040A 100%);
  --card-border:rgba(125,227,255,.16);
  --eyebrow:rgba(180,224,255,.75);
}
.cobalt .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(125,227,255,.05),transparent 40%);
  z-index:1;
}
.eyebrow--c{color:#B4E0FF}

/* Cobalt mesh gradient */
.c-mesh{
  position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(35% 45% at 20% 20%, rgba(102,168,255,.55), transparent 60%),
    radial-gradient(30% 40% at 90% 15%, rgba(125,227,255,.45), transparent 60%),
    radial-gradient(45% 40% at 70% 90%, rgba(66,120,220,.5), transparent 60%),
    radial-gradient(30% 30% at 10% 100%, rgba(180,120,255,.3), transparent 60%);
  filter:blur(40px);
  opacity:.7;
}
.c-mesh--soft{opacity:.4}

/* Scan line */
.c-scan{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(0deg,transparent 0 49%,rgba(125,227,255,.06) 50%,transparent 51% 100%);
  background-size:100% 6px;
  mask-image:radial-gradient(120% 80% at 80% 20%,#000,transparent 70%);
}

/* Agent graph */
.c-hero{padding-bottom:20px}
.c-graph{position:relative;margin-top:auto;width:100%;max-width:520px;color:#7DE3FF}

/* Eval mock */
.c-eval-mock{
  margin-top:auto;padding:16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(6,14,28,.75),rgba(2,8,20,.85));
  border:1px solid rgba(125,227,255,.2);
  backdrop-filter:blur(10px);
  box-shadow:0 0 40px rgba(102,168,255,.14);
  display:flex;flex-direction:column;gap:12px;
  font-family:var(--font-mono);
}
.c-eval-mock__head{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid rgba(125,227,255,.15);font-size:10.5px;color:rgba(180,224,255,.65);letter-spacing:.06em}
.c-eval-mock__head b{color:#E6F1FF;font-weight:500}
.c-eval-mock__foot{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid rgba(125,227,255,.15);font-size:10.5px;color:rgba(180,224,255,.55)}
.c-eval-mock__foot span:last-child{color:#5EF3B4}
.c-eval-mock .row{display:grid;grid-template-columns:1fr auto 90px;gap:12px;align-items:center;font-size:11.5px;color:#B4E0FF}
.c-eval-mock .lbl{color:#8AA8CC}
.c-eval-mock .num{color:#E6F1FF;font-variant-numeric:tabular-nums}
.c-eval-mock .bar{height:4px;border-radius:99px;background:rgba(125,227,255,.14);overflow:hidden}
.c-eval-mock .bar i{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#6EA8FF,#7DE3FF);box-shadow:0 0 8px #7DE3FF}
.c-eval-mock .row--warn .num{color:#FF9A55}
.c-eval-mock .row--warn .bar i{background:linear-gradient(90deg,#FF7A2A,#FF9A55);box-shadow:0 0 8px #FF9A55}

/* Memory viz */
.c-memory-viz{margin:auto auto 4px;width:220px;aspect-ratio:1/1;filter:drop-shadow(0 0 10px rgba(125,227,255,.4))}

/* Tools grid */
.c-tools-grid{margin:auto auto 4px;display:grid;grid-template-columns:repeat(3,54px);gap:8px}
.c-tools-grid .tile{
  width:54px;height:54px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(6,14,28,.9),rgba(2,8,20,.9));
  border:1px solid rgba(125,227,255,.22);
  color:#B4E0FF;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  position:relative;
}
.c-tools-grid .tile::after{
  content:"";position:absolute;inset:1px;border-radius:11px;
  background:radial-gradient(60% 60% at 50% 0%,rgba(125,227,255,.15),transparent 70%);
  pointer-events:none;
}
.c-tools-grid .tile--on{
  background:linear-gradient(180deg,#7DE3FF,#6EA8FF);color:#03080F;border-color:#B4E0FF;
  box-shadow:0 0 20px rgba(125,227,255,.6);
}

/* Terminal */
.c-term{
  margin-top:auto;border-radius:12px;overflow:hidden;
  border:1px solid rgba(125,227,255,.2);
  background:linear-gradient(180deg,rgba(3,8,16,.95),rgba(2,4,10,.95));
  box-shadow:0 0 40px rgba(102,168,255,.16);
  font-family:var(--font-mono);
}
.c-term__bar{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
  border-bottom:1px solid rgba(125,227,255,.15);
  background:rgba(125,227,255,.04);
  font-size:10.5px;color:rgba(180,224,255,.7);
}
.c-term__bar span{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.15)}
.c-term__bar span:nth-child(1){background:#FF7A5C}
.c-term__bar span:nth-child(2){background:#F3C24B}
.c-term__bar span:nth-child(3){background:#5EF3B4}
.c-term__bar em{margin-left:auto;font-style:normal;letter-spacing:.06em}
.c-term pre{
  margin:0;padding:12px 14px;font-size:11.5px;line-height:1.65;color:#B4E0FF;white-space:pre-wrap;
}
.mono-dim{color:#5E7A98}
.mono-hi{color:#7DE3FF}
.mono-ok{color:#5EF3B4}

/* ============================================================
   THEME 03 · EMBER (Sunset gradient / warm charcoal)
============================================================ */
[data-theme="ember"]{--dot:#FF9A55}

.ember .card{
  --card-bg:linear-gradient(180deg,#120906 0%,#080302 100%);
  --card-border:rgba(255,138,60,.18);
  --eyebrow:rgba(255,178,122,.75);
}
.ember .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,154,85,.06),transparent 40%);
  z-index:1;
}
.eyebrow--e{color:#FFB27A}

/* Ember glow */
.e-glow{
  position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(35% 55% at 15% 100%, rgba(255,122,42,.55), transparent 65%),
    radial-gradient(40% 60% at 85% 90%, rgba(255,154,85,.35), transparent 65%),
    radial-gradient(30% 40% at 100% 20%, rgba(255,90,30,.28), transparent 65%);
  filter:blur(36px);
  opacity:.9;
}
.e-glow--soft{opacity:.5}

.e-noise{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(135deg,rgba(255,180,120,.05) 0 2px,transparent 2px 8px);
  mask-image:radial-gradient(120% 80% at 10% 100%,#000,transparent 70%);
}

/* Ember hero radar */
.e-hero{padding-bottom:24px}
.e-radar{position:relative;flex:1;min-height:200px;margin-top:auto;display:flex;align-items:flex-end}
.e-radar svg{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(255,122,42,.4))}
.e-cards{position:absolute;right:16px;top:18px;display:flex;flex-direction:column;gap:8px}
.e-c{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 12px;min-width:180px;border-radius:10px;
  background:linear-gradient(180deg,rgba(31,15,7,.85),rgba(14,6,3,.85));
  border:1px solid rgba(255,138,60,.35);
  color:#FFE1C7;font-size:11.5px;
  backdrop-filter:blur(6px);
  box-shadow:0 0 24px rgba(255,122,42,.18);
}
.e-c em{opacity:.6;font-style:normal;font-family:var(--font-mono);font-size:10.5px}
.e-c--dim{opacity:.55}

/* Scale panel */
.e-panel{
  margin-top:auto;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,138,60,.28);
  background:linear-gradient(180deg,rgba(20,10,5,.85),rgba(10,4,2,.9));
  backdrop-filter:blur(8px);
  box-shadow:0 0 40px rgba(255,122,42,.14);
}
.e-agents{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid rgba(255,138,60,.18)}
.e-agent-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,138,60,.05);border:1px solid rgba(255,138,60,.14);font-size:11px;color:#FFE1C7}
.e-agent-row .av{width:22px;height:22px;border-radius:99px;background:radial-gradient(circle,#FF9A55,#B84A15);flex-shrink:0}
.e-agent-row .nm{flex:1;font-family:var(--font-sans)}
.e-agent-row .st{font-family:var(--font-mono);font-size:10px;padding:2px 7px;border-radius:99px;background:rgba(94,243,180,.15);color:#5EF3B4}
.e-agent-row .st--pause{background:rgba(255,138,60,.14);color:#FFB27A}
.e-agent-row .st--off{background:rgba(255,255,255,.06);color:rgba(255,225,199,.5)}
.e-panel__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border-bottom:1px solid rgba(255,138,60,.18);
  font-size:11px;color:rgba(255,225,199,.7);font-family:var(--font-mono);letter-spacing:.04em;
}
.e-panel__body{padding:12px;display:flex;flex-direction:column;gap:10px}
.e-panel__row{display:flex;gap:8px}
.e-tag{padding:5px 10px;border-radius:99px;font-size:10.5px;background:rgba(255,138,60,.15);color:#FFE1C7;border:1px solid rgba(255,138,60,.3);font-family:var(--font-mono)}
.e-tag--dim{opacity:.6;background:transparent}
.e-scale-block{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,138,60,.08),rgba(255,138,60,.02));
  border:1px solid rgba(255,138,60,.2);
}
.e-scale-title{color:#FFE1C7;font-size:12.5px;line-height:1.15}
.e-scale-title em{font-style:normal;font-weight:600;color:#fff}
.e-dots{display:flex;gap:5px}
.e-dots .d{
  width:22px;height:22px;border-radius:99px;
  display:grid;place-items:center;
  font-size:8.5px;font-family:var(--font-mono);color:rgba(255,225,199,.5);
  background:rgba(255,138,60,.06);border:1px solid rgba(255,138,60,.2);
}
.e-dots .d.on{background:radial-gradient(circle,#FF9A55,#B84A15);color:#0F0805;border-color:#FFB27A;box-shadow:0 0 10px rgba(255,154,85,.55)}
.e-list{display:flex;flex-direction:column;gap:5px}
.e-list .e-li{height:8px;border-radius:99px;background:rgba(255,138,60,.08)}

/* Chat mock */
.e-chat-mock{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.msg{
  padding:8px 12px;border-radius:12px;font-size:11.5px;line-height:1.4;color:#FFE1C7;
  border:1px solid rgba(255,138,60,.28);
  background:linear-gradient(180deg,rgba(31,15,7,.85),rgba(14,6,3,.85));
  max-width:88%;backdrop-filter:blur(4px);
}
.msg b{display:block;font-size:10.5px;color:#FFB27A;margin-bottom:2px;font-family:var(--font-mono);letter-spacing:.04em}
.msg--in{align-self:flex-start}
.msg--out{align-self:flex-end;background:linear-gradient(180deg,rgba(255,138,60,.22),rgba(255,138,60,.08));border-color:rgba(255,178,122,.5)}
.msg--file{font-family:var(--font-mono);font-size:10.5px}

/* Planet atlas */
.e-planet{position:relative;margin:auto auto 4px;width:100%;filter:drop-shadow(0 0 20px rgba(255,122,42,.35))}
.e-badge{
  position:absolute;right:8px;top:8px;
  padding:5px 10px;border-radius:99px;font-family:var(--font-mono);font-size:10.5px;
  color:#FFE1C7;background:rgba(31,15,7,.85);border:1px solid rgba(255,138,60,.35);
  backdrop-filter:blur(4px);
}

/* Price mock */
.e-price-mock{
  margin-top:auto;padding:14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,10,5,.85),rgba(10,4,2,.9));
  border:1px solid rgba(255,138,60,.28);
  display:flex;flex-direction:column;gap:8px;
  backdrop-filter:blur(6px);
  box-shadow:0 0 40px rgba(255,122,42,.14);
}
.e-price-num{
  font-family:var(--font-display);font-weight:700;
  font-size:34px;color:#FFE1C7;letter-spacing:-0.03em;line-height:1;
  display:flex;align-items:flex-start;gap:2px;
}
.e-price-num em{font-style:normal;font-size:16px;color:#FFB27A;margin-top:6px}
.e-price-num span{font-size:16px;color:rgba(255,225,199,.55);margin-top:6px;margin-left:2px}
.e-price-cap{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,178,122,.7);letter-spacing:.06em;margin-top:-4px}
.e-price-bar{height:5px;border-radius:99px;background:rgba(255,138,60,.14);overflow:hidden;margin-top:2px}
.e-price-bar .fill{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,#FF7A2A,#FFB27A);box-shadow:0 0 12px #FF9A55}
.e-price-row{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,225,199,.7)}
.e-price-row b{color:#FFE1C7;font-family:var(--font-mono);font-weight:500}

/* Footer */
.foot{
  display:flex;justify-content:space-between;gap:16px;
  padding-top:24px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;color:var(--page-mute);letter-spacing:.04em;
}
@media (max-width:640px){.foot{flex-direction:column;gap:6px}}

/* ============================================================
   NEUMORPHIC BASE (shared for Halo / Sable / Amber)
============================================================ */
.neu-card{background:linear-gradient(180deg,var(--surface-lift,#111318) 0%,var(--surface-deep,#0A0B10) 100%);border:1px solid rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 40px 80px -30px rgba(0,0,0,.7),0 12px 30px -18px rgba(0,0,0,.6)}
.neu-card .card__body{gap:10px}
.neu-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#8A93A0;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;font-weight:600;font-family:'JetBrains Mono',monospace}
.neu-eyebrow .pip{width:6px;height:6px;border-radius:99px;background:var(--dot);box-shadow:0 0 10px var(--dot)}
.neu-cta{align-self:flex-start;margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:linear-gradient(180deg,#1B1E25,#12141A);border:1px solid rgba(255,255,255,.06);color:#D6DBE3;font-size:12.5px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px -6px rgba(0,0,0,.5)}
.neu-cta .arr{color:var(--dot);opacity:.9}
.neu-circuit{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen}
.neu-circuit svg{width:100%;height:100%;display:block}
.neu-halo{position:absolute;inset:0;background:radial-gradient(600px 260px at 50% 30%,color-mix(in oklab,var(--dot) 8%,transparent) 0%,transparent 60%);pointer-events:none}

/* Floating hardware puck (reusable) */
.puck{position:relative;width:120px;height:120px;border-radius:26px;background:linear-gradient(160deg,#22262E 0%,#0E1015 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.09),inset 0 -12px 30px rgba(0,0,0,.55),0 28px 40px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.puck::before{content:"";position:absolute;inset:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.puck .core{position:relative;width:34px;height:34px;border-radius:99px;background:radial-gradient(circle at 50% 40%,color-mix(in oklab,var(--dot) 60%,#0A0B10),#0A0B10 70%);box-shadow:0 0 0 4px rgba(0,0,0,.45),0 0 24px color-mix(in oklab,var(--dot) 40%,transparent),inset 0 0 0 1px rgba(255,255,255,.08)}
.puck .core::after{content:"";position:absolute;inset:36% 44% 46% 44%;background:color-mix(in oklab,var(--dot) 70%,white);border-radius:99px;box-shadow:0 0 8px color-mix(in oklab,var(--dot) 60%,transparent)}

/* Ghost orbit rings (reusable, absolute inside card) */
.orbits{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:.55}
.orbits .ring{position:absolute;border-radius:99px;border:1px solid rgba(255,255,255,.06)}
.orbits .ring.r1{width:170px;height:170px}
.orbits .ring.r2{width:260px;height:260px}
.orbits .ring.r3{width:360px;height:360px}
.orbits .ring.r4{width:480px;height:480px;border-color:rgba(255,255,255,.035)}
.orbits .blip{position:absolute;width:8px;height:8px;border-radius:99px;background:var(--dot);box-shadow:0 0 12px var(--dot)}

/* ============================================================
   HALO · Observability · deep blue neumorphic
============================================================ */
[data-theme="halo"]{--dot:#5AA9FF}
[data-theme="halo"] .showcase__eyebrow{color:#7C8493}
[data-theme="halo"] .h{color:#EEF1F6}
[data-theme="halo"] .p{color:#8B929E}

.h-hero{position:relative;overflow:hidden}
.h-hero .puck{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:112px;height:112px}
.h-hero{padding-top:22px}
.h-hero .card__body{position:relative;margin-top:150px}
.h-hero .orbits{top:-40px;bottom:auto;height:340px}

.h-latency{position:relative;overflow:hidden;display:flex;flex-direction:column}
.h-latency .card__body{position:relative;z-index:2}
.h-lat-mock{position:relative;margin-top:18px;display:flex;flex-direction:column;gap:11px;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.h-lat-mock__head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7C8493}
.h-lat-mock__head b{color:#EEF1F6;font-weight:600}
.h-lat-row{display:grid;grid-template-columns:44px 1fr 62px;align-items:center;gap:12px}
.h-lat-row .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#8B929E}
.h-lat-row .track{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden;box-shadow:inset 0 1px 0 rgba(0,0,0,.4)}
.h-lat-row .track i{position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:99px;background:linear-gradient(90deg,color-mix(in oklab,var(--dot) 30%,#1a2230),var(--dot))}
.h-lat-row .v{text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;color:#EEF1F6;font-weight:600}
.h-lat-row.h-lat-row--warn .v{color:#FFB27A}
.h-lat-row.h-lat-row--warn .track i{background:linear-gradient(90deg,#3a2a1a,#FFB27A)}
.h-lat-mock__foot{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7C8493;padding-top:6px;border-top:1px dashed rgba(255,255,255,.05)}
.h-lat-mock__foot .ok{color:var(--dot)}
.h-map-dots{position:absolute;inset:20px 22px auto auto;display:flex;gap:6px;align-items:center;color:#7C8493;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.h-map-dots i{width:5px;height:5px;border-radius:99px;background:var(--dot);opacity:.8;box-shadow:0 0 8px var(--dot)}
.h-map-dots i:nth-child(2){opacity:.5}
.h-map-dots i:nth-child(3){opacity:.3}

.h-trace{position:relative;overflow:hidden}
.h-trace-mock{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.h-trace-row{display:grid;grid-template-columns:106px 1fr 52px;gap:10px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#8B929E}
.h-trace-row .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-trace-row .bar{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(0,0,0,.4)}
.h-trace-row .bar i{position:absolute;height:100%;border-radius:4px;left:var(--o,0%);width:var(--w,40%);background:linear-gradient(90deg,color-mix(in oklab,var(--dot) 25%,#1a2230),var(--dot));box-shadow:0 0 8px color-mix(in oklab,var(--dot) 40%,transparent)}
.h-trace-row .ms{text-align:right;color:#EEF1F6}
.h-trace-row.warn .bar i{background:linear-gradient(90deg,#3a1a1a,#FF7A7A)}
.h-trace-row.warn .ms{color:#FF9A9A}

.h-logs{position:relative;overflow:hidden}
.h-log-grid{margin-top:14px;display:grid;grid-template-columns:repeat(20,1fr);gap:4px}
.h-log-grid i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.05)}
.h-log-grid i.ok{background:rgba(255,255,255,.09)}
.h-log-grid i.warn{background:color-mix(in oklab,var(--dot) 60%,#0A0B10);box-shadow:0 0 6px color-mix(in oklab,var(--dot) 40%,transparent)}
.h-log-grid i.err{background:#FF7A7A;box-shadow:0 0 6px rgba(255,122,122,.5)}
.h-log-foot{margin-top:10px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7C8493}
.h-log-foot b{color:#EEF1F6}

.h-alerts{position:relative;overflow:hidden}
.h-alert-mock{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.h-alert-row{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.045)}
.h-alert-row .sev{width:8px;height:8px;border-radius:99px;background:var(--dot);box-shadow:0 0 8px var(--dot)}
.h-alert-row .txt{font-size:12.5px;color:#D6DBE3}
.h-alert-row .txt small{display:block;color:#7C8493;font-family:'JetBrains Mono',monospace;font-size:10.5px;margin-top:2px}
.h-alert-row .ch{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#8B929E;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.h-alert-row.crit .sev{background:#FF7A7A;box-shadow:0 0 8px rgba(255,122,122,.6)}
.h-alert-row.warn .sev{background:#FFB27A;box-shadow:0 0 8px rgba(255,178,122,.5)}
.h-alert-row.info .sev{opacity:.5;box-shadow:none}

/* ============================================================
   SABLE · Dev toolkit · warm charcoal + emerald
============================================================ */
[data-theme="sable"]{--dot:#4BE39C}
[data-theme="sable"] .h{color:#EEF1F6}
[data-theme="sable"] .p{color:#8A9099}

.s-hero{position:relative;overflow:hidden}
.s-keycap{position:absolute;top:32px;left:50%;transform:translateX(-50%);width:210px;height:158px;border-radius:24px;background:linear-gradient(158deg,#2A2E37 0%,#0B0C10 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -18px 36px rgba(0,0,0,.75),0 42px 60px -18px rgba(0,0,0,.75),0 18px 30px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05);display:flex;flex-direction:column;padding:18px 20px;font-family:'JetBrains Mono',monospace}
.s-keycap::before{content:"";position:absolute;inset:10px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);pointer-events:none}
.s-keycap__head{display:flex;justify-content:space-between;font-size:9.5px;color:#8A9099;text-transform:uppercase;letter-spacing:.14em}
.s-keycap__head i{width:6px;height:6px;border-radius:99px;background:var(--dot);box-shadow:0 0 8px var(--dot)}
.s-keycap__body{margin-top:14px;font-size:12px;line-height:1.55;color:#B5BAC4}
.s-keycap__body .cmd{color:var(--dot)}
.s-keycap__body .flag{color:#D6DBE3}
.s-keycap__body .cursor{display:inline-block;width:6px;height:12px;background:var(--dot);vertical-align:middle;margin-left:2px;animation:s-blink 1.2s steps(1) infinite}
@keyframes s-blink{50%{opacity:0}}
.s-hero{padding-top:22px}
.s-hero .card__body{position:relative;margin-top:170px}

.s-pipe{position:relative;overflow:hidden;display:flex;flex-direction:column}
.s-pipe .card__body{position:relative;z-index:2}
.s-pipe-mock{margin-top:18px;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;gap:13px}
.s-pipe-mock__head{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#7C8493}
.s-pipe-mock__head b{color:#EEF1F6}
.s-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:center}
.s-stage{position:relative;padding:9px 8px 8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.05);text-align:center}
.s-stage .name{font-family:'JetBrains Mono',monospace;font-size:10px;color:#B5BAC4;letter-spacing:.06em}
.s-stage .dur{font-size:9.5px;color:#7C8493;font-family:'JetBrains Mono',monospace;margin-top:3px}
.s-stage.on{border-color:color-mix(in oklab,var(--dot) 40%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--dot) 30%,transparent),0 0 20px color-mix(in oklab,var(--dot) 20%,transparent)}
.s-stage.on .name{color:var(--dot)}
.s-stage.retry{border-color:rgba(255,178,122,.35)}
.s-stage.retry .name{color:#FFB27A}
.s-stages .conn{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}
.s-pipe-mock__foot{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7C8493;padding-top:6px;border-top:1px dashed rgba(255,255,255,.05)}
.s-pipe-mock__foot .ok{color:var(--dot)}

.s-preview{position:relative;overflow:hidden}
.s-branch-stack{margin-top:14px;position:relative;height:200px}
.s-branch{position:absolute;left:0;right:0;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,#171A21,#0E1015);border:1px solid rgba(255,255,255,.05);box-shadow:0 12px 20px -8px rgba(0,0,0,.5);font-family:'JetBrains Mono',monospace;font-size:11px;color:#B5BAC4;display:flex;justify-content:space-between;align-items:center}
.s-branch .name{color:#EEF1F6}
.s-branch .ok{color:var(--dot);font-size:10px}
.s-branch:nth-child(1){top:0;transform:rotate(-1.5deg)}
.s-branch:nth-child(2){top:44px;transform:rotate(.8deg);z-index:2}
.s-branch:nth-child(3){top:88px;transform:rotate(-.5deg)}
.s-branch:nth-child(4){top:132px;transform:rotate(1deg);opacity:.72}

.s-vault{position:relative;overflow:hidden}
.s-vault-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.s-key{aspect-ratio:1;border-radius:12px;background:linear-gradient(180deg,#171A21,#0D0F14);border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 16px -8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#7C8493;position:relative}
.s-key::before{content:"";width:14px;height:10px;border:1.5px solid #7C8493;border-radius:2px;position:absolute;top:16px}
.s-key::after{content:"";width:6px;height:6px;border-radius:99px;background:#7C8493;position:absolute;top:22px}
.s-key span{position:absolute;bottom:12px;font-size:9px;letter-spacing:.08em}
.s-key.on::before{border-color:var(--dot)}
.s-key.on::after{background:var(--dot);box-shadow:0 0 6px var(--dot)}
.s-key.on span{color:var(--dot)}

.s-cost{position:relative;overflow:hidden}
.s-cost-stat{margin-top:14px;display:flex;align-items:baseline;gap:10px}
.s-cost-stat .big{font-family:'Satoshi',sans-serif;font-size:44px;font-weight:700;color:#EEF1F6;letter-spacing:-.02em;line-height:1}
.s-cost-stat .unit{color:#8A9099;font-size:13px}
.s-cost-stat .delta{color:var(--dot);font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 8px;border-radius:99px;background:color-mix(in oklab,var(--dot) 8%,transparent);border:1px solid color-mix(in oklab,var(--dot) 20%,transparent)}
.s-cost-bars{margin-top:14px;display:flex;align-items:flex-end;gap:5px;height:60px}
.s-cost-bars i{flex:1;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border-radius:3px 3px 0 0;height:var(--h,40%)}
.s-cost-bars i.hi{background:linear-gradient(180deg,color-mix(in oklab,var(--dot) 60%,#0A0B10),var(--dot))}
.s-cost-foot{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#7C8493;display:flex;justify-content:space-between}

/* ============================================================
   AMBER · Home OS · warm charcoal + burnt orange
============================================================ */
[data-theme="amber"]{--dot:#FF9A55}
[data-theme="amber"] .neu-card{background:linear-gradient(180deg,#141210 0%,#0B0A08 100%)}
[data-theme="amber"] .h{color:#F1EDE6}
[data-theme="amber"] .p{color:#948C82}

.a-hero{position:relative;overflow:hidden}
.a-hero .orbits{top:0;bottom:auto;height:100%}
.a-hero .puck{position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:3}
.a-hero{padding-top:22px}
.a-hero .puck{top:70px}
.a-hero .card__body{position:relative;margin-top:180px;z-index:4}
.a-hero .blip{position:absolute}
.a-hero .b1{top:130px;left:calc(50% - 130px)}
.a-hero .b2{top:200px;left:calc(50% + 120px)}
.a-hero .b3{top:70px;left:calc(50% + 80px);width:6px;height:6px}

.a-scenes{position:relative;overflow:hidden;display:flex;flex-direction:column}
.a-scenes .card__body{position:relative;z-index:2}
.a-scene-mock{margin-top:18px;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;gap:14px}
.a-scene-mock__head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#948C82}
.a-scene-mock__head b{color:#F1EDE6}
.a-scene-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.a-scene{padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:8px}
.a-scene .name{font-family:'General Sans',sans-serif;font-size:12px;color:#F1EDE6;font-weight:500}
.a-scene .t{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#948C82;letter-spacing:.06em}
.a-scene .track{height:5px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden;position:relative}
.a-scene .track i{position:absolute;inset:0 auto 0 0;width:var(--w,40%);border-radius:99px;background:linear-gradient(90deg,#5A3524,var(--dot))}
.a-scene.on{border-color:color-mix(in oklab,var(--dot) 30%,transparent);box-shadow:0 0 24px color-mix(in oklab,var(--dot) 12%,transparent)}
.a-scene-mock__foot{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#948C82;padding-top:6px;border-top:1px dashed rgba(255,255,255,.05)}
.a-scene-mock__foot .live{color:var(--dot)}

.a-energy{position:relative;overflow:hidden}
.a-energy-stat{margin-top:14px;display:flex;align-items:baseline;gap:10px}
.a-energy-stat .big{font-family:'Satoshi',sans-serif;font-size:44px;font-weight:700;color:#F1EDE6;letter-spacing:-.02em;line-height:1}
.a-energy-stat .unit{color:#948C82;font-size:13px}
.a-energy-arc{margin-top:14px;position:relative;height:80px}
.a-energy-arc svg{width:100%;height:100%;display:block}
.a-energy-foot{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#948C82;display:flex;justify-content:space-between}
.a-energy-foot .now{color:var(--dot)}

.a-rooms{position:relative;overflow:hidden}
.a-room-grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a-room{padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.22));border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:6px}
.a-room .name{font-family:'General Sans',sans-serif;font-size:12px;color:#F1EDE6;font-weight:500}
.a-room .stat{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:#948C82}
.a-room .stat b{color:#F1EDE6}
.a-room .dots{display:flex;gap:3px}
.a-room .dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.15)}
.a-room .dots i.on{background:var(--dot);box-shadow:0 0 6px var(--dot)}

.a-voice{position:relative;overflow:hidden}
.a-voice-log{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.a-voice-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));border:1px solid rgba(255,255,255,.05)}
.a-voice-row .t{font-family:'JetBrains Mono',monospace;font-size:10px;color:#948C82}
.a-voice-row .said{font-size:12px;color:#F1EDE6}
.a-voice-row .st{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dot);padding:3px 8px;border-radius:99px;background:color-mix(in oklab,var(--dot) 8%,transparent);border:1px solid color-mix(in oklab,var(--dot) 20%,transparent)}
.a-voice-row.pending .st{color:#948C82;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05)}



/* ============================================================
   HORIZON · Treasury · colour-block on paper (light island)
   Design DNA: Framer developer bento + Linear editorial
============================================================ */
[data-theme="horizon"]{
  --dot:#2563EB;
  --paper:#F5F1E8;
  --ink:#141310;
  --ink-2:#5C574E;
  --blue:#1D4ED8;
  --mustard:#E0B44A;
  --graphite:#CFCBC1;
  --charcoal:#17171A;
  background:var(--paper);
  border-radius:26px;
  padding:52px 40px 44px;
  scroll-margin-top:96px;
}
[data-theme="horizon"] .showcase__eyebrow{color:#6B6558}
[data-theme="horizon"] .showcase__eyebrow .dot{box-shadow:none}
[data-theme="horizon"] .showcase__title{color:var(--ink);font-size:clamp(30px,3.6vw,46px)}
[data-theme="horizon"] .showcase__desc{color:var(--ink-2)}
[data-theme="horizon"] .bento{gap:16px}

.hz-c{
  border-radius:20px;border:1px solid rgba(20,19,16,.06);
  padding:24px 24px 20px;gap:14px;
  background:#fff;
}
.hz-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.hz-label--dim{opacity:.62}
.hz-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hz-state{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.hz-state i{width:6px;height:6px;border-radius:99px;background:var(--dot)}
.hz-h{font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.08;letter-spacing:-0.026em;margin:2px 0 0}
.hz-h--sm{font-size:19px;letter-spacing:-0.02em}
.hz-foot{margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;opacity:.66}

/* card 1 · royal blue forecast */
.hz-c--blue{background:var(--blue);border-color:rgba(255,255,255,.1);color:#fff;justify-content:flex-start}
.hz-c--blue .hz-label,.hz-c--blue .hz-state{color:rgba(255,255,255,.72)}
.hz-c--blue .hz-state i{background:#fff}
.hz-figure{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.hz-big{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,4vw,52px);line-height:.94;letter-spacing:-0.04em;color:#fff;font-variant-numeric:tabular-nums}
.hz-runway{width:100%;height:150px;margin-top:14px}
.hz-axis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-top:8px}
.hz-c--blue .hz-foot{color:rgba(255,255,255,.6)}

/* card 2 · cream ledger */
.hz-c--cream{background:#FBF8F1;color:var(--ink)}
.hz-c--cream .hz-label{color:#6B6558}
.hz-ledger{margin-top:6px;display:flex;flex-direction:column}
.hz-net{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px}
.hz-net-cell{display:flex;flex-direction:column;gap:6px}
.hz-net-cell .hz-label{color:#8A8478}
.hz-net-cell b{font-family:var(--font-mono);font-weight:500;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.hz-row{
  display:grid;grid-template-columns:52px 1fr 16px minmax(120px,auto) 68px;
  align-items:center;gap:12px;
  padding:13px 2px;border-bottom:1px solid rgba(20,19,16,.09);
}
.hz-row:first-child{border-top:1px solid rgba(20,19,16,.09)}
.hz-cur{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink)}
.hz-name{font-size:13px;color:#57524A}
.hz-arrow{font-size:12px;text-align:center;color:#8A8478}
.hz-arrow--in{color:var(--dot)}
.hz-amt{font-family:var(--font-mono);font-size:14px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.hz-delta{font-family:var(--font-mono);font-size:11px;text-align:right;color:#8A8478}
.hz-delta--up{color:var(--dot)}
.hz-foot--dark{color:#6B6558}

/* card 3 · mustard intents */
.hz-c--mustard{background:var(--mustard);border-color:rgba(20,19,16,.1);color:#241C08}
.hz-c--mustard .hz-label{color:rgba(36,28,8,.72)}
.hz-intents{margin-top:4px;display:flex;flex-direction:column;gap:8px}
.hz-intent{
  display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:center;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.42);border:1px solid rgba(36,28,8,.08);
}
.hz-intent__who{font-size:12.5px;line-height:1.2;color:#241C08}
.hz-intent__who small{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;color:rgba(36,28,8,.6)}
.hz-intent__amt{font-family:var(--font-mono);font-size:13px;text-align:right;color:#241C08;font-variant-numeric:tabular-nums}
.hz-pill{
  justify-self:start;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:rgba(36,28,8,.08);color:rgba(36,28,8,.72);
}
.hz-pill--ok{background:color-mix(in oklab,var(--dot) 14%,transparent);color:#12379E;border:1px solid color-mix(in oklab,var(--dot) 34%,transparent)}
.hz-intent__eta{font-family:var(--font-mono);font-size:9.5px;text-align:right;color:rgba(36,28,8,.6)}

/* card 4 · graphite exposure */
.hz-c--graphite{background:var(--graphite);border-color:rgba(20,19,16,.08);color:#16150F}
.hz-c--graphite .hz-label{color:rgba(22,21,15,.66)}
.hz-bars{margin-top:8px;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px}
.hz-bar{display:grid;grid-template-columns:38px 1fr 44px;align-items:center;gap:10px}
.hz-bar .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:rgba(22,21,15,.72)}
.hz-bar .t{height:7px;border-radius:99px;background:rgba(22,21,15,.12);position:relative;overflow:hidden}
.hz-bar .t i{position:absolute;inset:0 auto 0 0;width:var(--w,30%);border-radius:99px;background:#16150F}
.hz-bar:first-child .t i{background:var(--dot)}
.hz-bar .v{font-family:var(--font-mono);font-size:11.5px;text-align:right;color:#16150F;font-variant-numeric:tabular-nums}
.hz-exp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(22,21,15,.12)}
.hz-exp-foot .hz-label{color:rgba(22,21,15,.62)}
.hz-drift{font-family:var(--font-mono);font-size:12px;color:#16150F}

/* card 5 · charcoal approvals */
.hz-c--charcoal{background:var(--charcoal);border-color:rgba(255,255,255,.08);color:#F2F1EE}
.hz-c--charcoal .hz-label{color:rgba(242,241,238,.58)}
.hz-c--charcoal .hz-h{color:#F5F4F1}
.hz-c--charcoal .hz-state{color:rgba(242,241,238,.6)}
.hz-queue{margin-top:2px;display:flex;flex-direction:column}
.hz-appr{
  display:grid;grid-template-columns:26px 1fr auto;column-gap:10px;row-gap:6px;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.hz-appr:last-child{border-bottom:0}
.hz-av{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;
  background:rgba(255,255,255,.07);color:#D9D7D2;
}
.hz-appr__act{font-size:12.5px;line-height:1.2;color:#EDEBE7}
.hz-appr__act small{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;color:rgba(242,241,238,.46)}
.hz-appr__amt{font-family:var(--font-mono);font-size:12.5px;color:#EDEBE7;font-variant-numeric:tabular-nums}
.hz-appr__cta{grid-column:2/4;justify-self:end;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dot)}

/* ============================================================
   SIGNAL · Creator OS · node diagram on near-black
   Design DNA: Mixpanel metric tree + Linear editorial
============================================================ */
[data-theme="signal"]{--dot:#34D399;--ink:#EDF1EE;--ink-2:#7E8985}
[data-theme="signal"] .showcase__eyebrow{color:#7E8985}
[data-theme="signal"] .showcase__title{color:#F3F6F4}
[data-theme="signal"] .showcase__desc{color:#8B958F}
[data-theme="signal"] .bento{gap:16px}

.sg-c{
  background:#0A0A0B;border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:22px 22px 20px;gap:12px;
}
.sg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sg-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8A948F}
.sg-label--dim{color:#5D6663;letter-spacing:.06em;text-transform:none}
.sg-state{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A948F}
.sg-state i{width:6px;height:6px;border-radius:99px;background:var(--dot)}
.sg-h{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.1;letter-spacing:-0.024em;margin:2px 0 0;color:var(--ink)}
.sg-h--sm{font-size:18px}
.sg-foot{margin-top:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:#5D6663}

/* hero · metric constellation */
.sg-hero{position:relative;overflow:hidden}
.sg-dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 40%, transparent 78%);
}
.sg-hero > *{position:relative;z-index:1}
.sg-figure{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sg-big{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,4vw,50px);line-height:.94;letter-spacing:-0.04em;color:#F5F8F6;font-variant-numeric:tabular-nums}
.sg-unit{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:#7E8985}
.sg-graph{position:relative;margin-top:16px;height:212px}
.sg-wires{position:absolute;inset:0;width:100%;height:100%}
.sg-node{
  position:absolute;display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;border-radius:12px;
  background:#101112;border:1px solid rgba(255,255,255,.09);
  min-width:126px;
}
.sg-node--a{top:6px;left:0}
.sg-node--b{top:96px;left:44%}
.sg-node--c{bottom:0;left:16%}
.sg-node__k{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6E7874}
.sg-node__v{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-0.03em;color:#F1F5F3;font-variant-numeric:tabular-nums}
.sg-node__d{font-family:var(--font-mono);font-size:9.5px;color:#7E8985}
.sg-up{color:var(--dot)}
.sg-down{color:#C9CFCB}
.sg-render{margin-top:auto;padding-top:16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.07)}
.sg-render-track{height:5px;border-radius:99px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.sg-render-track i{position:absolute;inset:0 auto 0 0;width:var(--w,50%);border-radius:99px;background:var(--dot);opacity:.85}
.sg-render-v{font-family:var(--font-mono);font-size:10.5px;color:#B7C0BB;font-variant-numeric:tabular-nums}
.sg-chip{
  position:absolute;top:-11px;right:-46px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  padding:4px 9px;border-radius:6px 6px 6px 0;
  background:color-mix(in oklab,var(--dot) 16%,#0A0A0B);
  border:1px solid color-mix(in oklab,var(--dot) 40%,transparent);
  color:var(--dot);
}

/* editor timeline */
.sg-timeline{margin-top:12px}
.sg-wave{position:relative;display:flex;align-items:flex-end;gap:3px;height:76px;padding:0 2px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.sg-wave > span{flex:1;height:var(--h,50%);border-radius:2px;background:rgba(255,255,255,.2)}
.sg-wave > span:nth-child(-n+13){background:rgba(255,255,255,.34)}
.sg-play{position:absolute!important;top:0;bottom:0;width:2px;height:auto!important;flex:none!important;border-radius:0!important;background:var(--dot)!important;box-shadow:0 0 0 1px rgba(10,10,11,.9)}
.sg-chapters{position:relative;height:16px;margin-top:8px}
.sg-chapters span{position:absolute;top:0;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:#6E7874;padding-left:7px}
.sg-chapters span::before{content:"";position:absolute;left:0;top:3px;width:1px;height:9px;background:rgba(255,255,255,.22)}
.sg-queue-inline{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.sg-clip,.sg-pub-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.sg-thumb{width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#1A1C1D,#0E0F10);border:1px solid rgba(255,255,255,.07)}
.sg-clip__t,.sg-pub-t{font-size:12.5px;color:#DFE5E2;line-height:1.2}
.sg-clip__t small,.sg-pub-t small{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;color:#6E7874}
.sg-clip__st{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dot)}
.sg-clip__st--off{color:#6E7874}

/* retention */
.sg-curve{width:100%;flex:1;min-height:120px;margin-top:12px}
.sg-mark{fill:var(--dot)}
.sg-ret-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.07)}
.sg-ret-note{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:#6E7874}
.sg-ret-val{font-family:var(--font-mono);font-size:12px;color:#DFE5E2}

/* publish queue */
.sg-pub-list{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.sg-plats{display:flex;gap:4px}
.sg-plats b{font-family:var(--font-mono);font-weight:500;font-size:8.5px;letter-spacing:.08em;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#9BA5A0}

/* comment triage */
.sg-com-list{margin-top:8px;display:flex;flex-direction:column}
.sg-com-row{display:grid;grid-template-columns:8px 1fr auto;align-items:start;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.sg-com-row:last-child{border-bottom:0}
.sg-sent{width:7px;height:7px;border-radius:99px;margin-top:5px}
.sg-sent--pos{background:var(--dot)}
.sg-sent--mid{background:#D9A85C}
.sg-sent--neg{background:#C7635A}
.sg-com-t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:#9BA5A0}
.sg-com-t small{display:block;margin-top:4px;font-family:var(--font-sans);font-size:12.5px;letter-spacing:0;color:#DFE5E2;line-height:1.35}
.sg-reply{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6E7874}

/* ============================================================
   PRISM · Design system · editorial ultra-minimal
   Design DNA: Linear feature grid, stripped of fill
============================================================ */
[data-theme="prism"]{--dot:#F97316}
[data-theme="prism"] .showcase__eyebrow{color:#7A7873}
[data-theme="prism"] .showcase__eyebrow .dot{box-shadow:none;width:7px;height:7px}
[data-theme="prism"] .showcase__title{color:#FAFAF9;font-size:clamp(30px,3.8vw,50px);letter-spacing:-0.03em}
[data-theme="prism"] .showcase__desc{color:#83817C}
[data-theme="prism"] .bento{gap:0;background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:0}

.pr-c{
  background:transparent;
  border:0;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;box-shadow:none;
  padding:34px 30px 30px;gap:0;
  display:flex;flex-direction:column;
}
[data-theme="prism"] .card{min-height:300px}
[data-theme="prism"] .card--tall,[data-theme="prism"] .bento > .card:nth-child(2){min-height:400px}
[data-theme="prism"] .bento > .card:nth-child(2),
[data-theme="prism"] .bento > .card:nth-child(5){border-right:0}
[data-theme="prism"] .bento > .card:nth-child(3),
[data-theme="prism"] .bento > .card:nth-child(4),
[data-theme="prism"] .bento > .card:nth-child(5){border-bottom:0}
.pr-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6C6A65}
.pr-h{
  font-family:var(--font-display);font-weight:600;
  font-size:26px;line-height:1.06;letter-spacing:-0.032em;
  margin:26px 0 0;color:#FAFAF9;max-width:22ch;
}
.pr-h--xl{font-size:clamp(32px,3vw,42px);margin-top:auto}
.pr-h--sm{font-size:21px;letter-spacing:-0.026em}
.pr-p{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:#8B8983;max-width:34ch}
.pr-p--sm{font-size:12.5px}

.pr-swatches{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:16px}
.pr-sw{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:#7A7873}
.pr-sw i{width:10px;height:10px;border-radius:3px;border:1px solid rgba(255,255,255,.14)}
.pr-sw i.s1{background:var(--dot);border-color:transparent}
.pr-sw i.s2{background:transparent;border-style:dashed}
.pr-sw i.s3{background:transparent;border-radius:5px}

.pr-wire{margin-top:auto;padding-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pr-wire figure{margin:0;display:flex;flex-direction:column;gap:9px}
.pr-wire svg{width:100%;height:auto;stroke:rgba(255,255,255,.26);stroke-width:1.2;fill:none}
.pr-wire figcaption{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6C6A65}

.pr-curves{width:100%;height:84px;margin-top:auto}
.pr-meta{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:#6C6A65}

.pr-wcag{margin-top:auto;display:flex;flex-direction:column;gap:11px;padding-top:22px}
.pr-wcag-row{display:grid;grid-template-columns:1fr 54px auto;align-items:center;gap:10px}
.pr-wcag-row .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:#7A7873}
.pr-wcag-row .t{height:5px;background:rgba(255,255,255,.09);position:relative}
.pr-wcag-row .t i{position:absolute;inset:0 auto 0 0;width:var(--w,40%);background:rgba(255,255,255,.5)}
.pr-wcag-row .v{font-family:var(--font-mono);font-size:10px;color:#C9C7C1;font-variant-numeric:tabular-nums}

.pr-diff{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:3px}
.pr-diff-row{position:relative;display:grid;grid-template-columns:22px 12px 1fr;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:5px 8px;border-left:1px solid rgba(255,255,255,.08)}
.pr-diff-row .ln{color:#5C5A56;font-size:9.5px}
.pr-diff-row .sg{color:#6C6A65}
.pr-diff-row code{color:#B7B5AF}
.pr-diff-row--del{opacity:.55}
.pr-diff-row--del code{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.24)}
.pr-diff-row--add{background:rgba(255,255,255,.03)}
.pr-diff-row--add code{color:#EDEBE6}
.pr-dot{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:99px;background:var(--dot)}

@media (max-width:960px){
  [data-theme="horizon"]{padding:40px 22px 32px}
  [data-theme="prism"] .bento{border-radius:0}
  .sg-graph{height:236px}
}
@media (max-width:640px){
  .hz-row{grid-template-columns:44px 1fr auto;row-gap:4px}
  .hz-row .hz-arrow{display:none}
  .hz-row .hz-delta{grid-column:2/4;text-align:right}
  .sg-node--b{left:36%}
}


/* ============================================================
   CEDRO · Onchain AI · vertical marquee columns (lavender island)
   Two outer columns loop upward on a fixed 24s cycle, the centre
   column holds a static mark, orbit ring, and background wordmark.
============================================================ */
[data-theme="cedro"]{
  --cd-canvas:#0B0819;
  --cd-canvas-lift:#141032;
  --cd-card:#171232;
  --cd-card-2:#1D1740;
  --cd-line:rgba(155,140,255,.10);
  --cd-line-2:rgba(155,140,255,.16);
  --cd-ink:#F3EEFF;
  --cd-ink-2:#A79CC9;
  --cd-ink-3:#7C7099;
  --cd-purple:#7C5CFF;
  --cd-purple-lt:#9B85FF;
  --cd-purple-deep:#4A34C7;
  --cd-lime:#CDEB6B;
  --dot:#9B85FF;
  position:relative;
  background:
    radial-gradient(880px 560px at 50% 68%, rgba(124,92,255,.22), transparent 66%),
    radial-gradient(700px 520px at 92% 6%, rgba(124,92,255,.12), transparent 68%),
    radial-gradient(600px 440px at 8% 12%, rgba(75,52,199,.14), transparent 66%),
    var(--cd-canvas);
  border-radius:32px;
  padding:60px 40px 48px;
  scroll-margin-top:96px;
  overflow:hidden;
}
[data-theme="cedro"] .cd-grain{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(155,140,255,.14) 0.5px, transparent 0.6px);
  background-size:4px 4px;
  opacity:.55;
  mix-blend-mode:screen;
}
[data-theme="cedro"] .showcase__head{position:relative;z-index:2}
[data-theme="cedro"] .showcase__eyebrow{color:#B8ADD6}
[data-theme="cedro"] .showcase__eyebrow .dot{box-shadow:none;width:7px;height:7px;background:var(--cd-purple-lt)}
[data-theme="cedro"] .showcase__title{color:var(--cd-ink);font-size:clamp(30px,3.6vw,46px)}
[data-theme="cedro"] .showcase__desc{color:var(--cd-ink-2)}

[data-theme="cedro"] .bento-cedro{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:24px;
  height:720px;
  overflow:hidden;
}

/* ---- marquee mechanics ---- */
.cd-viewport{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
}
.cd-track{
  display:flex;flex-direction:column;
  animation:cd-marquee 24s linear infinite;
  will-change:transform;
}
.cd-track--offset{animation-delay:-14s} /* half cycle plus half a card */
@keyframes cd-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-50%,0)}
}

/* ---- card shell ---- */
.cd-card{
  position:relative;
  flex:0 0 auto;
  height:320px;
  margin-bottom:24px;      /* margin, not gap, so -50% lands on an exact cycle */
  border-radius:24px;
  border:1px solid var(--cd-line-2);
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(155,140,255,.12), transparent 60%),
    linear-gradient(180deg,var(--cd-card-2),var(--cd-card));
  box-shadow:0 24px 48px -14px rgba(0,0,0,.55), 0 8px 16px -8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  isolation:isolate;
}

/* ---- shared atoms ---- */
.cd-puck{
  position:absolute;z-index:6;
  display:grid;place-items:center;
  border-radius:999px;
  background:radial-gradient(120% 120% at 30% 22%, #B7A3FF 0%, #7C5CFF 44%, #4A34C7 100%);
  color:#fff;
  font-family:var(--font-display);font-weight:600;letter-spacing:.01em;
  box-shadow:0 18px 40px -10px rgba(74,52,199,.7), 0 6px 12px -6px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.cd-tag{
  position:absolute;z-index:6;
  padding:9px 16px;border-radius:999px;
  background:linear-gradient(180deg,#1F1946,#171232);
  border:1px solid var(--cd-line-2);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;
  color:#E8E0FF;white-space:nowrap;
}
.cd-win{
  position:absolute;z-index:4;
  border-radius:12px;
  background:linear-gradient(180deg,#1F1946 0%,#181235 100%);
  border:1px solid var(--cd-line-2);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.65), 0 4px 10px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.cd-win__head{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--cd-line);
}
.cd-win__head--tight{padding:6px 8px}
.cd-dots{display:inline-flex;gap:4px}
.cd-dots i{width:5px;height:5px;border-radius:99px;background:rgba(155,140,255,.35)}
.cd-addr{
  flex:1;font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;
  color:rgba(200,190,240,.55);
  background:rgba(155,140,255,.08);border-radius:99px;padding:3px 8px;
}
.cd-win__body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px}
.cd-win__body--tight{padding:8px}
.cd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cd-win__title{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.01em;color:#F0E9FF}
.cd-win__title--xs{font-size:9px;font-weight:500;letter-spacing:0;color:#B0A3D6}
.cd-switch{
  width:30px;height:17px;border-radius:99px;flex:0 0 auto;
  background:linear-gradient(180deg,#9B85FF,#5B44D9);
  position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 0 12px rgba(124,92,255,.35);
}
.cd-switch i{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:99px;background:#F5EFFF;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.cd-bars{display:flex;align-items:flex-end;gap:3px;height:46px}
.cd-bars i{
  flex:1;height:var(--h,50%);border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg,rgba(155,140,255,.95),rgba(124,92,255,.55));
}
.cd-bars i.lime{background:linear-gradient(180deg,#DEEE7C,rgba(205,235,107,.7))}
.cd-bars--mini{height:30px;gap:2px}
.cd-bars--mini i{border-radius:1px}
.cd-bars__curve{position:absolute;left:12px;right:12px;bottom:14px;height:46px;pointer-events:none}
.cd-lines{position:absolute;inset:0;z-index:5;pointer-events:none}
.cd-skel{display:block;height:6px;border-radius:99px;background:rgba(155,140,255,.18)}
.cd-skel--w70{width:70%}
.cd-skel--w50{width:50%}
.cd-panel{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;
  padding:8px;border-radius:8px;background:rgba(75,60,155,.28);
  border:1px solid rgba(155,140,255,.10);
}

/* ---- card 1 · chain liquidity ---- */
.cd-card--liq .cd-arcs{
  position:absolute;left:-96px;top:-34px;width:340px;height:340px;border-radius:999px;
  background:
    radial-gradient(closest-side, transparent 62%, rgba(155,140,255,.22) 63% 72%, transparent 73%),
    radial-gradient(closest-side, transparent 40%, rgba(155,140,255,.17) 41% 50%, transparent 51%),
    radial-gradient(closest-side, rgba(155,140,255,.12) 26%, transparent 27%);
}
.cd-win--liq{left:21%;top:15%;right:5%}
.cd-win--liq .cd-win__body{position:relative}
.cd-puck--liq{left:3%;top:30%;width:74px;height:74px;font-size:24px}
.cd-tag--usage{left:10%;top:56%}
.cd-tag--res{left:36%;top:72%}

/* ---- card 2 · sequencer chip ---- */
.cd-card--chip{background:
  radial-gradient(90% 70% at 22% 8%, rgba(155,140,255,.20), transparent 62%),
  linear-gradient(165deg,#1F1946 0%,#120E2A 100%)}
.cd-card--chip .cd-chip__art{position:absolute;left:0;top:-22px;width:100%;height:100%}
.cd-card--chip .cd-chip__glow{
  position:absolute;left:50%;top:-24%;width:74%;height:70%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(155,140,255,.55), transparent 70%);
}
.cd-chip__beam{
  position:absolute;top:-6%;width:74px;height:56%;
  background:linear-gradient(180deg, rgba(155,140,255,.42), rgba(155,140,255,0));
  filter:blur(2px);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
}
.cd-chip__beam--a{left:30%}
.cd-chip__beam--b{left:52%;width:52px;opacity:.6}
.cd-chip__label{
  position:absolute;left:24px;bottom:20px;z-index:5;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,190,240,.55);
}

/* ---- card 3 · radar ---- */
.cd-card--radar{background:
  radial-gradient(110% 90% at 26% 74%, rgba(124,92,255,.30), transparent 60%),
  radial-gradient(90% 70% at 86% 6%, rgba(155,140,255,.15), transparent 62%),
  linear-gradient(180deg,var(--cd-card-2),var(--cd-card))}
.cd-ripple{
  position:absolute;left:34%;top:62%;border-radius:999px;
  border:1px solid rgba(155,140,255,.50);
  background:radial-gradient(closest-side, rgba(155,140,255,.22), rgba(124,92,255,.08) 80%, rgba(75,52,199,.04) 88%);
  transform:translate(-50%,-50%);
  animation:cd-pulse 3s ease-in-out infinite;
}
.cd-ripple--1{width:132px;height:132px}
.cd-ripple--2{width:222px;height:222px;animation-delay:.6s;border-color:rgba(155,140,255,.38)}
.cd-ripple--3{width:312px;height:312px;animation-delay:1.2s;border-color:rgba(155,140,255,.28)}
.cd-ripple--4{width:402px;height:402px;animation-delay:1.8s;border-color:rgba(155,140,255,.18)}
@keyframes cd-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(.98);opacity:.75}
  50%{transform:translate(-50%,-50%) scale(1.03);opacity:1}
}
.cd-puck--radar{left:34%;top:62%;transform:translate(-50%,-50%);width:82px;height:82px;font-size:26px}
.cd-search{
  position:absolute;z-index:6;left:44%;top:22%;
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;
  background:linear-gradient(180deg,#1F1946,#171232);
  border:1px solid var(--cd-line-2);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.cd-search__txt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.02em;color:rgba(210,200,245,.7);white-space:nowrap}
.cd-search__caret{width:1px;height:11px;background:rgba(200,190,240,.9);animation:cd-caret 1.1s steps(1) infinite}
@keyframes cd-caret{50%{opacity:0}}
.cd-radar__label{
  position:absolute;left:24px;bottom:20px;z-index:6;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(200,190,240,.55);
}

/* ---- card 4 · dual window ---- */
.cd-win--back{right:3%;top:13%;width:50%}
.cd-win--front{left:6%;top:37%;right:16%;z-index:5;overflow:visible}
.cd-win__body--split{flex-direction:row;gap:8px;align-items:stretch}
.cd-social{
  position:absolute;z-index:7;left:-12px;top:34px;
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(180deg,#9B85FF,#5B44D9);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.55), 0 0 18px rgba(124,92,255,.4);
}
.cd-social__label{
  position:absolute;z-index:7;left:22px;top:41px;
  font-family:var(--font-sans);font-size:9.5px;font-weight:500;color:#C4B8E8;
}
.cd-puck--dual{left:37%;top:26%;width:62px;height:62px;font-size:20px}
.cd-area{width:100%;height:44px}

/* ---- card 5 · topology ---- */
.cd-card--topo .cd-topo__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(155,140,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155,140,255,.08) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 40%, #000 30%, transparent 82%);
  mask-image:radial-gradient(120% 100% at 60% 40%, #000 30%, transparent 82%);
}
.cd-topo__wires{position:absolute;inset:0;z-index:3}
.cd-node{
  position:absolute;z-index:4;display:grid;place-items:center;
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(160deg,#2A2158,#161034);
  border:1px solid var(--cd-line-2);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.cd-node::after{
  content:"";position:absolute;inset:-9px;border-radius:999px;
  border:1px solid rgba(155,140,255,.14);
}
.cd-node--a{left:8%;top:20%}
.cd-node--b{right:11%;top:26%}
.cd-node--c{left:19%;bottom:16%}
.cd-node--d{right:6%;bottom:24%;width:34px;height:34px;border-radius:11px}
.cd-tag--layer{left:44%;top:50%;transform:translate(-50%,-50%);font-size:13.5px;padding:11px 18px}

/* ---- card 6 · agent thread ---- */
.cd-card--chat .cd-chat__circuit{position:absolute;inset:0;z-index:2}
.cd-chat{position:absolute;z-index:4;left:16px;top:26px;width:64%;display:flex;flex-direction:column;gap:10px}
.cd-chat__row{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;
  background:linear-gradient(180deg,#1F1946,#171232);
  border:1px solid var(--cd-line);
  box-shadow:0 10px 20px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.cd-chat__row--dim{opacity:.42;transform:scale(.94);transform-origin:left center}
.cd-chat__av{
  flex:0 0 auto;width:22px;height:22px;border-radius:999px;
  background:rgba(155,140,255,.22);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:9px;font-weight:600;color:#F5EFFF;
}
.cd-chat__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cd-chat__name{font-family:var(--font-sans);font-size:9.5px;font-weight:500;color:#B4A6D8}
.cd-chat__lines{display:flex;flex-direction:column;gap:4px}
.cd-chat__l{height:3px;border-radius:99px;background:rgba(155,140,255,.22)}
.cd-chat__l--short{width:56%}
.cd-chat__row--on{
  background:linear-gradient(180deg,#2A2158,#1D1740);
  border-color:rgba(155,140,255,.28);
  box-shadow:0 18px 30px -16px rgba(74,52,199,.55), 0 0 20px rgba(124,92,255,.2);
}
.cd-chat__row--on .cd-chat__av{background:radial-gradient(120% 120% at 30% 22%,#B7A3FF,#5B44D9)}
.cd-chat__l--lime{
  width:0;background:var(--cd-lime);
  animation:cd-underline 1.5s ease-out infinite;
}
@keyframes cd-underline{
  0%{width:0;opacity:.4}
  70%{width:82%;opacity:1}
  100%{width:82%;opacity:0}
}
.cd-chat__cursor{position:absolute;right:-6px;bottom:-4px}

/* ---- centre column ---- */
.cd-center{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  overflow:visible;
}
.cd-wordmark{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(96px,11vw,148px);line-height:.82;letter-spacing:-.05em;
  color:rgba(180,165,255,.10);
  white-space:nowrap;pointer-events:none;z-index:0;
}
.cd-center{overflow:hidden}
.cd-hero{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:520px;height:520px;z-index:1;pointer-events:none;
  display:grid;place-items:center;
}
.cd-rings{position:absolute;inset:0;width:100%;height:100%}
.cd-orbit{
  position:absolute;inset:0;width:100%;height:100%;
  animation:cd-orbit 60s linear infinite;
}
.cd-orbit--inner{animation-duration:84s;animation-direction:reverse}
.cd-orbit__txt--inner{font-size:11.5px;fill:rgba(180,165,255,.22)}
@keyframes cd-orbit{to{transform:rotate(360deg)}}
.cd-orbit__txt{
  font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;
  fill:rgba(180,165,255,.30);
}
.cd-puck--hero{
  position:relative;width:240px;height:240px;
  box-shadow:0 46px 80px -26px rgba(74,52,199,.7), 0 14px 30px -14px rgba(74,52,199,.5),
             0 0 60px rgba(124,92,255,.35),
             inset 0 2px 0 rgba(255,255,255,.24);
  animation:cd-breathe 4s ease-in-out infinite;
}
.cd-puck--hero svg{width:124px;height:124px}
@keyframes cd-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}
.cd-credit{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(200,190,240,.5);white-space:nowrap;z-index:2;
}

@media (prefers-reduced-motion:reduce){
  .cd-track,.cd-track--offset{animation:none}
  .cd-orbit,.cd-puck--hero,.cd-ripple,.cd-chat__l--lime,.cd-search__caret{animation:none}
  .cd-chat__l--lime{width:82%}
}

@media (max-width:1100px){
  .cd-wordmark{font-size:clamp(84px,10vw,110px)}
  .cd-hero{width:460px;height:460px}
  .cd-puck--hero{width:180px;height:180px}
  .cd-puck--hero svg{width:94px;height:94px}
}
@media (max-width:860px){
  [data-theme="cedro"]{padding:40px 22px 34px}
  [data-theme="cedro"] .bento-cedro{grid-template-columns:1fr;height:auto;gap:32px}
  [data-theme="cedro"] .bento-cedro .cd-viewport:last-child{display:none}
  .cd-viewport{height:640px}
  .cd-center{height:520px}
  .cd-hero{width:380px;height:380px}
  .cd-puck--hero{width:150px;height:150px}
  .cd-puck--hero svg{width:78px;height:78px}
  .cd-wordmark{font-size:96px;top:0}
}


/* ============ LINEN ============ */
/* Grid 11 · Linen · sage + blush editorial (warm paper island)
   Product: booking, formulations, inventory and journal for
   independent skincare studios. Light mode, prefix .ln-
   Radius scale: 26px section, 20px cards, 12px inner blocks,
   999px pills. Display serif: Instrument Serif (headings only).
============================================================ */

[data-theme="linen"]{
  --dot:#8AA893;
  --ln-paper:#F7F2EA;
  --ln-surface:#FDFAF3;
  --ln-ink:#1D1A17;
  --ln-mute:#6B6357;
  --ln-sage:#8AA893;
  --ln-blush:#E6BFB6;
  --ln-ochre:#C79A5B;
  --ln-line:rgba(29,26,23,.08);
  --ln-line-soft:rgba(29,26,23,.05);
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  background:var(--ln-paper);
  border-radius:26px;
  padding:52px 40px 46px;
  scroll-margin-top:96px;
}
[data-theme="linen"] .showcase__eyebrow{color:#7A7161}
[data-theme="linen"] .showcase__eyebrow .dot{box-shadow:none;background:var(--ln-sage)}
[data-theme="linen"] .showcase__title{
  font-family:var(--font-serif);font-weight:400;
  color:var(--ln-ink);
  font-size:clamp(32px,4vw,50px);line-height:1.04;letter-spacing:-0.012em;
}
[data-theme="linen"] .showcase__desc{color:var(--ln-mute)}
[data-theme="linen"] .bento{gap:16px}

/* card shell */
.linen .card{
  border-radius:20px;
  background:var(--ln-surface);
  border:1px solid var(--ln-line);
  padding:24px 24px 20px;
  gap:14px;
  box-shadow:0 1px 0 rgba(29,26,23,.02),0 12px 28px -22px rgba(29,26,23,.18);
}
.linen .card--tall{min-height:460px}
.linen .card{min-height:340px}
.linen .card__body{gap:7px;max-width:34ch}
.linen .ln-body--wide{max-width:44ch}
.linen .eyebrow{color:#8B8271;letter-spacing:.2em}
.linen .h{
  font-family:var(--font-serif);font-weight:400;
  color:var(--ln-ink);
  font-size:27px;line-height:1.1;letter-spacing:-0.008em;
}
.linen .card--tall .h{font-size:38px;line-height:1.06}
.linen .h--sm{font-size:23px;letter-spacing:-0.004em}
.linen .p{color:var(--ln-mute);font-size:14px;line-height:1.6;max-width:38ch}
.linen .p--sm{font-size:13px}

.ln-foot{
  margin-top:auto;padding-top:16px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#918878;
}

/* chips, pips, notes (shared product chrome) */
.ln-chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.ln-chip--sage{color:#41604C;background:rgba(138,168,147,.16);border-color:rgba(138,168,147,.4)}
.ln-chip--blush{color:#8A4B41;background:rgba(230,191,182,.26);border-color:rgba(230,191,182,.62)}
.ln-pip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#4E6B57;
}
.ln-pip i{width:6px;height:6px;border-radius:999px;background:var(--ln-sage)}
.ln-note{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#9A9080;white-space:nowrap;
}

/* ---- card 1 · offset paper stack ------------------------- */
.ln-c--hero{padding-bottom:20px}
.ln-stack{
  position:relative;
  margin:22px 0 0 4px;
  height:236px;
}
.ln-sheet{
  position:absolute;
  width:min(84%,268px);
  border-radius:12px;
  background:#FFFDF8;
  border:1px solid var(--ln-line);
  padding:12px 13px 13px;
  box-shadow:0 10px 24px -20px rgba(29,26,23,.4);
}
.ln-sheet--3,.ln-sheet--2{height:50px;overflow:hidden}
.ln-sheet--3{top:0;left:36px;transform:rotate(-1.6deg);opacity:.9}
.ln-sheet--2{top:44px;left:18px;transform:rotate(.9deg);opacity:.95}
.ln-sheet--1{top:90px;left:0;border-color:rgba(29,26,23,.12);box-shadow:0 18px 34px -24px rgba(29,26,23,.5)}
.ln-sheet__lines{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ln-sheet__lines i{height:5px;border-radius:999px;background:rgba(29,26,23,.07)}
.ln-sheet__lines i.short{width:52%}
.ln-sheet__rows{display:flex;flex-direction:column;margin-top:9px}
.ln-sheet__rows span{
  display:flex;gap:9px;align-items:center;
  font-size:11.5px;color:var(--ln-mute);
  padding:6px 0;border-top:1px solid var(--ln-line-soft);
}
.ln-sheet__rows span:first-child{border-top:0}
.ln-sheet__rows b{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ln-ink)}

/* ---- card 2 · week strip + appointments ------------------ */
.ln-week{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin-top:18px;
}
.ln-day{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 6px 10px;border-radius:12px;
  border:1px solid var(--ln-line);background:rgba(29,26,23,.015);
}
.ln-day__d{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9A9080}
.ln-day__n{font-family:var(--font-mono);font-size:16px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-density{display:flex;gap:3px}
.ln-density i{width:4px;height:4px;border-radius:999px;background:var(--ln-sage)}
.ln-density i.off{background:rgba(29,26,23,.1)}
.ln-day.is-today{background:rgba(230,191,182,.2);border-color:rgba(230,191,182,.7)}
.ln-day.is-today .ln-day__d{color:#8A4B41}
.ln-day.is-today .ln-density i{background:#C58A7C}
.ln-day.is-today .ln-density i.off{background:rgba(138,75,65,.18)}

.ln-appts{margin-top:16px;display:flex;flex-direction:column}
.ln-c--week .ln-foot{border-top:1px solid var(--ln-line);margin-top:auto}
.ln-appt{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;
  padding:13px 2px;border-top:1px solid var(--ln-line);
}
.ln-appt:first-child{border-top:0}
.ln-time{font-family:var(--font-mono);font-size:12px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-who{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-who small{font-size:12px;color:var(--ln-mute);letter-spacing:0}

/* ---- card 3 · journal entry ------------------------------ */
.ln-entry{
  margin-top:16px;padding:15px 15px 13px;
  border-radius:12px;border:1px solid var(--ln-line);
  background:rgba(138,168,147,.06);
}
.ln-entry__top{display:flex;align-items:center;gap:10px}
.ln-initials{
  width:30px;height:30px;flex:none;border-radius:999px;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  color:#41604C;background:rgba(138,168,147,.28);border:1px solid rgba(138,168,147,.5);
}
.ln-entry__who{display:flex;flex-direction:column;gap:1px;font-size:13.5px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-entry__who small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#928979}
.ln-entry__body{margin:11px 0 0;font-size:13px;line-height:1.62;color:#4A443B}
.ln-entry__foot{display:flex;gap:6px;margin-top:13px;padding-top:11px;border-top:1px solid var(--ln-line)}
.ln-tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#7A7161;padding:3px 8px;border-radius:999px;border:1px solid var(--ln-line);
}

/* ---- card 4 · formulation -------------------------------- */
.ln-form{
  margin-top:16px;padding:14px 15px 12px;
  border-radius:12px;border:1px solid var(--ln-line);background:rgba(29,26,23,.015);
}
.ln-form__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--ln-line)}
.ln-form__title{font-size:13.5px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-ing{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:10px;row-gap:2px;
  padding:10px 0;border-bottom:1px solid var(--ln-line-soft);
}
.ln-ing__n{font-size:13px;color:var(--ln-ink)}
.ln-ing__d{font-family:var(--font-mono);font-size:11.5px;color:var(--ln-ochre);letter-spacing:-0.01em}
.ln-ing__r{
  grid-column:1/-1;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#948B7B;
}
.ln-form__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px}
.ln-batch{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:#41604C;
  padding:4px 9px;border-radius:999px;background:rgba(138,168,147,.14);border:1px solid rgba(138,168,147,.36);
}

/* ---- card 5 · inventory ---------------------------------- */
.ln-inv{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ln-tile{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;
  border:1px solid var(--ln-line);background:rgba(29,26,23,.015);
}
.ln-tile__n{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ln-ink);letter-spacing:-0.01em}
.ln-tile__n small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#948B7B}
.ln-tile__q{font-family:var(--font-mono);font-size:11px;color:var(--ln-mute);white-space:nowrap}

/* ---- responsive ----------------------------------------- */
@media (max-width:960px){
  [data-theme="linen"]{padding:40px 22px 34px}
  .linen .card--tall{min-height:auto}
  .ln-stack{height:228px}
  .ln-sheet{width:min(80%,262px)}
}
@media (max-width:640px){
  .linen .card{min-height:auto}
  .ln-week{grid-template-columns:repeat(5,1fr);gap:6px}
  .ln-day{padding:9px 3px}
  .ln-appt{grid-template-columns:48px 1fr;row-gap:6px}
  .ln-appt > :nth-child(3){grid-column:2/3;justify-self:start}
  .ln-tile{grid-template-columns:1fr auto;row-gap:6px}
  .ln-tile .ln-chip{grid-column:2/3;justify-self:end}
  .ln-stack{height:232px}
  .ln-sheet{width:min(92%,270px)}
}


/* ============ MARLOW ============ */
/* Grid 12 · Editorial CMS for indie magazines. Warm cream paper, terracotta
   and deep petrol accents, Instrument Serif display, square-ish shapes. */

[data-theme="marlow"]{
  --dot:#C2410C;
  --mw-paper:#FAF6EC;
  --mw-surface:#FFFDF6;
  --mw-kraft:#EBE1CE;
  --mw-ink:#1C1815;
  --mw-mute:#6B5F52;
  --mw-terra:#C2410C;
  --mw-petrol:#2F5B4F;
  --mw-line:rgba(28,24,21,.09);
  --mw-serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  background:var(--mw-paper);
  border-radius:26px;
  padding:52px 40px 44px;
  scroll-margin-top:96px;
}

/* section head */
[data-theme="marlow"] .showcase__eyebrow{color:var(--mw-mute)}
[data-theme="marlow"] .showcase__eyebrow .dot{box-shadow:none;border-radius:2px;background:var(--mw-terra)}
[data-theme="marlow"] .showcase__title{
  font-family:var(--mw-serif);font-weight:400;
  font-size:clamp(32px,3.9vw,50px);line-height:1.08;letter-spacing:-0.015em;
  color:var(--mw-ink);
}
[data-theme="marlow"] .showcase__title em{font-style:italic;color:var(--mw-terra)}
[data-theme="marlow"] .showcase__desc{color:var(--mw-mute)}
[data-theme="marlow"] .bento{gap:16px}

/* card shell */
[data-theme="marlow"] .card--tall{min-height:auto}
[data-theme="marlow"] .bento > .card:nth-child(2){min-height:auto}
.mw-c{
  border-radius:18px;
  border:1px solid var(--mw-line);
  background:var(--mw-surface);
  padding:24px 24px 20px;
  gap:18px;
  color:var(--mw-ink);
  box-shadow:0 1px 0 rgba(28,24,21,.03);
}
.mw-c .card__body{gap:9px;max-width:34ch}
.mw-body--wide{max-width:46ch}
.mw-eyebrow{color:var(--mw-mute);letter-spacing:.2em}
.mw-h{
  font-family:var(--mw-serif);font-weight:400;
  font-size:31px;line-height:1.1;letter-spacing:-0.012em;
  color:var(--mw-ink);
}
.mw-h--sm{font-size:24px;line-height:1.14}
.mw-h em{font-style:italic;color:var(--mw-terra);padding-bottom:.04em}
.mw-p{color:var(--mw-mute);font-size:13.5px;line-height:1.55;margin:0}

/* shared mono bits */
.mw-mono,.mw-wds,.mw-toc__page{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}

/* square-ish chips, no pills in this grid */
.mw-chip{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;
  background:var(--mw-kraft);color:#584C3E;border:1px solid rgba(28,24,21,.08);
}
.mw-chip--terra{background:rgba(194,65,12,.1);color:var(--mw-terra);border-color:rgba(194,65,12,.26)}
.mw-chip--petrol{background:rgba(47,91,79,.1);color:var(--mw-petrol);border-color:rgba(47,91,79,.26)}

/* ---- card 1 · issue cover mock ---- */
.mw-cover{
  margin-top:2px;display:flex;flex-direction:column;gap:14px;
  padding:16px;border-radius:14px;
  background:var(--mw-paper);border:1px solid var(--mw-line);
}
.mw-cover__masthead{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid rgba(28,24,21,.16);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mw-mute);
}
.mw-cover__title{
  font-family:var(--mw-serif);font-size:19px;letter-spacing:-0.01em;text-transform:none;
  color:var(--mw-ink);line-height:1;
}
.mw-cover__slash{color:rgba(28,24,21,.32)}
.mw-cover__plate{padding:0}
.mw-cover__frame{
  aspect-ratio:3/2;border-radius:6px;
  background:
    repeating-linear-gradient(115deg, rgba(28,24,21,.035) 0 12px, transparent 12px 26px),
    var(--mw-kraft);
  border:1px solid rgba(28,24,21,.34);
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  padding:12px 13px;
}
.mw-cover__plate-label{
  font-family:var(--mw-serif);font-size:15px;color:var(--mw-ink);line-height:1.1;
}
.mw-cover__plate-spec{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(28,24,21,.5);
}
.mw-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mw-toc__row{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--mw-line);
}
.mw-toc__row:last-child{border-bottom:0;padding-bottom:2px}
.mw-toc__title{
  font-family:var(--mw-serif);font-size:16.5px;line-height:1.2;color:var(--mw-ink);
  flex:1;
}
.mw-toc__page{font-size:11px;letter-spacing:.06em;color:var(--mw-mute)}

/* ---- card 2 · stage board ---- */
.mw-board{
  flex:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  align-items:stretch;
}
.mw-story{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 13px 12px;border-radius:12px;
  background:var(--mw-paper);border:1px solid var(--mw-line);
}
.mw-story__deck{
  font-family:var(--mw-serif);font-size:13.5px;line-height:1.35;color:var(--mw-mute);
  margin-top:4px;
}
.mw-story__due{
  margin-top:auto;padding-top:12px;
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(28,24,21,.44);
}
.mw-story:nth-child(3){background:var(--mw-kraft);border-color:rgba(28,24,21,.13)}
.mw-story__stage{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(28,24,21,.42);
}
.mw-story__title{
  font-family:var(--mw-serif);font-weight:400;font-size:17px;line-height:1.16;letter-spacing:-0.01em;
  margin:2px 0 0;color:var(--mw-ink);
}
.mw-story__byline{font-size:12px;color:var(--mw-ink);opacity:.82}
.mw-story__editor{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--mw-mute)}
.mw-story__foot{
  padding-top:11px;border-top:1px solid var(--mw-line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.mw-wds{font-size:10.5px;letter-spacing:.04em;color:var(--mw-mute)}
.mw-board__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--mw-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mw-mute);
}

/* ---- card 3 · contributor ---- */
.mw-contrib{
  margin-top:auto;flex:1;justify-content:center;display:flex;flex-direction:column;gap:14px;
  padding:16px;border-radius:14px;background:var(--mw-paper);border:1px solid var(--mw-line);
}
.mw-contrib__head{display:flex;align-items:center;gap:12px}
.mw-avatar{
  width:42px;height:42px;border-radius:99px;flex:none;
  display:grid;place-items:center;
  background:var(--mw-kraft);border:1px solid rgba(28,24,21,.14);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:#4E4237;
}
.mw-contrib__id{display:flex;flex-direction:column;gap:3px}
.mw-contrib__id b{font-family:var(--mw-serif);font-weight:400;font-size:17.5px;line-height:1.1;color:var(--mw-ink)}
.mw-contrib__id small{font-size:11.5px;color:var(--mw-mute)}
.mw-contrib__stats{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:11px 0 0;border-top:1px solid var(--mw-line);
}
.mw-contrib__stats span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:#4E4237;
  padding:4px 7px;border-radius:5px;background:rgba(28,24,21,.04);
  font-variant-numeric:tabular-nums;
}
.mw-contrib__next{display:flex;align-items:center;gap:10px}
.mw-contrib__recent{display:flex;flex-direction:column;gap:0;padding-top:2px}
.mw-contrib__recent div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--mw-line);
}
.mw-contrib__recent b{font-family:var(--mw-serif);font-weight:400;font-size:14.5px;color:var(--mw-ink)}
.mw-contrib__recent span{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mw-mute);flex:none}
.mw-next__label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;
  background:rgba(47,91,79,.1);color:var(--mw-petrol);border:1px solid rgba(47,91,79,.24);
}
.mw-next__body{font-size:12px;color:var(--mw-ink);opacity:.86}

/* ---- card 4 · type specimen ---- */
.mw-spec{
  margin-top:auto;display:flex;flex-direction:column;
  padding:14px 16px 12px;border-radius:14px;
  background:var(--mw-paper);border:1px solid var(--mw-line);
}
.mw-spec__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--mw-line);
}
.mw-serif{font-family:var(--mw-serif);font-weight:400;color:var(--mw-ink);letter-spacing:-0.02em}
.mw-serif--48{font-size:48px;line-height:1.02}
.mw-serif--28{font-size:28px;line-height:1.14}
.mw-serif--16{font-size:16px;line-height:1.52;letter-spacing:0;flex:1}
.mw-spec__meta{
  flex:none;text-align:right;display:flex;flex-direction:column;gap:3px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mw-mute);
}
.mw-spec__meta i{font-style:normal;font-size:9.5px;letter-spacing:.06em;color:rgba(28,24,21,.42);text-transform:none}
.mw-spec__foot{
  padding-top:11px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--mw-terra);
}

/* ---- card 5 · distribution ---- */
.mw-dist{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.mw-dist__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:10px;
  background:var(--mw-paper);border:1px solid var(--mw-line);
}
.mw-dist__row--live{background:var(--mw-kraft);border-color:rgba(28,24,21,.14)}
.mw-dist__ch{font-family:var(--mw-serif);font-size:17px;line-height:1.1;color:var(--mw-ink)}
.mw-dist__st{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mw-mute);
  text-align:right;
}
.mw-dist__row--live .mw-dist__st{color:#4E4237}
.mw-arrow{flex:none;color:var(--mw-terra)}
.mw-dist__foot{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--mw-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mw-mute);
}

/* ---- responsive ---- */
@media (max-width:960px){
  [data-theme="marlow"]{padding:40px 24px 34px}
  .mw-board{grid-template-columns:repeat(4,minmax(160px,1fr))}
}
@media (max-width:640px){
  [data-theme="marlow"]{padding:32px 18px 28px}
  .mw-h{font-size:26px}
  .mw-board{grid-template-columns:1fr;overflow-x:visible}
  .mw-serif--48{font-size:40px}
}


/* ============================================================
   ECRU · Paper + petrol hairlines · calm longform reading app
   Sharpest grid in the set: 8px cards, 4px inner blocks,
   0px dividers. Fraunces for display, General Sans for body,
   JetBrains Mono for metadata.
============================================================ */
[data-theme="ecru"]{
  --dot:#1F4E5B;
  --paper:#FAF9F5;
  --surface:#FFFFFE;
  --ink:#0F0F0E;
  --mute:#8B857C;
  --petrol:#1F4E5B;
  --ochre:#E4C572;
  --kraft:#C7B396;
  --hair:rgba(15,15,14,.09);
  --font-serif:'Fraunces','Iowan Old Style',Georgia,serif;
  background:var(--paper);
  border-radius:26px;
  padding:54px 40px 46px;
  scroll-margin-top:96px;
}
[data-theme="ecru"] .showcase__eyebrow{color:var(--mute)}
[data-theme="ecru"] .showcase__eyebrow .dot{background:var(--petrol);box-shadow:none;border-radius:0}
[data-theme="ecru"] .showcase__title{
  font-family:var(--font-serif);font-weight:400;color:var(--ink);
  font-size:clamp(30px,3.6vw,46px);letter-spacing:-0.02em;line-height:1.06;
  font-variation-settings:'opsz' 110,'wght' 400,'SOFT' 0,'WONK' 0;
}
[data-theme="ecru"] .showcase__desc{color:#6E6961}
[data-theme="ecru"] .bento{gap:16px}
[data-theme="ecru"] .card--tall,
[data-theme="ecru"] .bento > .card:nth-child(2){min-height:auto}

/* card shell */
.ec-c{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:8px;
  padding:26px 26px 22px;
  gap:18px;
  color:var(--ink);
}
.ec-c .eyebrow{color:var(--mute);letter-spacing:.16em}
.ec-h{
  font-family:var(--font-serif);font-weight:400;color:var(--ink);
  letter-spacing:-0.018em;line-height:1.1;
  font-variation-settings:'opsz' 72,'wght' 400,'SOFT' 0,'WONK' 0;
}
.ec-c--hero .ec-h{
  font-size:36px;line-height:1.08;padding-bottom:2px;
  font-variation-settings:'opsz' 132,'wght' 400,'SOFT' 0,'WONK' 0;
}
.ec-h--sm{font-size:21px;letter-spacing:-0.012em}
.ec-h--it em{font-style:italic;font-weight:400;line-height:1.14;display:inline-block;padding-bottom:2px}
.ec-p{color:#6E6961;max-width:38ch}
.ec-c .card__body{max-width:40ch;gap:9px}

/* ---------- card 1 · hero shelf ---------- */
.ec-c--hero{justify-content:space-between}
.ec-shelf-wrap{margin-top:26px}
.ec-stat{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--petrol);
  display:inline-block;padding:7px 10px;border-radius:4px;
  background:rgba(31,78,91,.05);border:1px solid rgba(31,78,91,.14);
  margin-bottom:16px;
}
.ec-shelf{position:relative;display:flex;align-items:flex-end;gap:10px;padding-bottom:10px}
.ec-shelf__board{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(15,15,14,.22)}
.ec-spine{
  border-radius:4px 4px 0 0;
  position:relative;
  box-shadow:inset -1px 0 0 rgba(15,15,14,.07);
}
.ec-spine__band{position:absolute;left:0;right:0;top:14px;height:1px;background:rgba(255,255,255,.42)}
.ec-spine--kraft{width:34px;height:148px;background:var(--kraft)}
.ec-spine--petrol{
  width:56px;height:208px;background:var(--petrol);
  display:flex;align-items:flex-end;justify-content:center;padding:13px 0 15px;
}
.ec-spine--ochre{width:24px;height:124px;background:var(--ochre)}
.ec-spine--grey{width:40px;height:174px;background:#B4AEA4}
.ec-spine__title{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;line-height:1.7;
  color:rgba(255,255,255,.92);max-height:100%;
}

/* ---------- card 2 · reading pane ---------- */
.ec-pane{border:1px solid var(--hair);border-radius:4px;padding:20px 22px 18px;background:#FCFBF8;flex:1;display:flex;flex-direction:column}
.ec-pane__head{padding-bottom:12px;border-bottom:1px solid var(--hair)}
.ec-article__title{
  font-family:var(--font-serif);font-weight:500;font-size:22px;line-height:1.16;
  letter-spacing:-0.012em;margin:0 0 7px;color:var(--ink);
  font-variation-settings:'opsz' 90,'wght' 500,'SOFT' 0,'WONK' 0;
}
.ec-byline{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
.ec-body{
  display:grid;grid-template-columns:minmax(0,1fr) 116px;column-gap:16px;
  padding-top:14px;
}
.ec-para{
  grid-column:1;margin:0;color:#282724;max-width:62ch;
  font-family:var(--font-serif);font-weight:400;font-size:13.5px;line-height:1.76;
  font-variation-settings:'opsz' 14,'wght' 400,'SOFT' 0,'WONK' 0;
}
.ec-para + .ec-para{margin-top:11px}
.ec-mark{
  background:rgba(228,197,114,.42);
  box-shadow:0 0 0 2px rgba(228,197,114,.42);
  border-radius:2px;
}
.ec-note{
  grid-column:2;grid-row:1;align-self:start;margin-top:26px;
  display:flex;align-items:center;gap:7px;
  padding-left:11px;border-left:1px solid rgba(31,78,91,.28);
}
.ec-note__dot{width:6px;height:6px;background:var(--petrol);border-radius:99px;flex:none}
.ec-note__meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--petrol);line-height:1.35}
.ec-pane__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute);
}
.ec-pane__sync{color:var(--petrol)}

/* ---------- card 3 · highlights ---------- */
.ec-hl-list{display:flex;flex-direction:column;gap:10px}
.ec-hl{border:1px solid var(--hair);border-radius:4px;padding:14px 15px 12px;background:#FCFBF8}
.ec-quote{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:15px;line-height:1.34;margin:0 0 10px;color:var(--ink);
  padding-bottom:1px;
  font-variation-settings:'opsz' 60,'wght' 400,'SOFT' 0,'WONK' 0;
}
.ec-hl__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ec-src{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--petrol);padding:4px 8px;border-radius:4px;flex:none;
  background:rgba(31,78,91,.06);border:1px solid rgba(31,78,91,.16);
}

/* ---------- card 4 · weekly review ---------- */
.ec-rev-list{display:flex;flex-direction:column}
.ec-rev{
  display:grid;grid-template-columns:46px minmax(0,1fr) 14px;align-items:baseline;gap:12px;
  padding:11px 0;border-top:1px solid var(--hair);
}
.ec-rev:last-child{border-bottom:1px solid var(--hair)}
.ec-rev__date{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
.ec-rev__title{
  font-family:var(--font-serif);font-weight:400;font-size:14px;line-height:1.35;color:var(--ink);
  font-variation-settings:'opsz' 40,'wght' 500,'SOFT' 0,'WONK' 0;
}
.ec-rev__title b{
  display:block;font-family:var(--font-mono);font-weight:400;font-size:9.5px;
  letter-spacing:.08em;color:#A9862B;margin-top:4px;
}
.ec-arrow{width:14px;height:14px;color:var(--petrol);opacity:.72;align-self:center}

/* ---------- card 5 · sources ---------- */
.ec-src-list{display:flex;flex-direction:column}
.ec-src-row{
  display:grid;grid-template-columns:16px minmax(0,1fr) auto 7px;align-items:center;gap:11px;
  padding:13px 0;border-top:1px solid var(--hair);
}
.ec-src-row:last-child{border-bottom:1px solid var(--hair)}
.ec-ico{width:12px;height:12px;color:var(--mute)}
.ec-src-row__name{font-size:13.5px;color:var(--ink);letter-spacing:-0.008em}
.ec-src-row__st{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute);white-space:nowrap}
.ec-dot{width:7px;height:7px;border-radius:99px;background:var(--petrol)}
.ec-dot--idle{background:transparent;border:1px solid rgba(15,15,14,.24)}
.ec-src-row--idle .ec-src-row__st{color:#9A948B}
.ec-src-foot{
  margin-top:auto;padding-top:16px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute);
}

@media (max-width:960px){
  [data-theme="ecru"]{padding:40px 24px 34px}
  .ec-body{grid-template-columns:minmax(0,1fr)}
  .ec-note{grid-column:1;grid-row:auto;margin-top:14px}
}
@media (max-width:640px){
  .ec-c--hero .ec-h{font-size:30px}
}