/* =========================================================
   APP SHELL + SECTIONS
   ========================================================= */

.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  background:var(--grad-fog), var(--obsidian-950);
}

/* ─────────── SIDEBAR ─────────── */
.sidebar{
  position:sticky;top:0;
  height:100vh;
  border-right:1px solid var(--obsidian-700);
  background:rgba(11,14,18,0.85);
  backdrop-filter: blur(16px);
  padding: var(--s-6) var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-8);
  overflow-y:auto;
  z-index:10;
}
.brand{
  display:flex;align-items:center;gap:var(--s-3);
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--obsidian-800);
}
.brand-mark{
  width:36px;height:36px;border-radius:var(--r-md);
  background: var(--obsidian-850);
  display:grid;place-items:center;
  border:1px solid var(--obsidian-700);
  overflow:hidden;
}
.brand-mark img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,229,209,0.4))}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text .name{font-weight:700;font-size:14px;letter-spacing:var(--tr-snug)}
.brand-text .meta{font-family:var(--font-mono);font-size:10px;color:var(--obsidian-300);letter-spacing:var(--tr-mono);text-transform:uppercase;margin-top:2px}

.nav-group{display:flex;flex-direction:column;gap:var(--s-1)}
.nav-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--tr-mono);
  text-transform:uppercase;
  color:var(--obsidian-400);
  padding:0 var(--s-3);
  margin-bottom:var(--s-2);
  display:flex;align-items:center;gap:var(--s-2);
}
.nav-label::before{content:"";width:4px;height:4px;background:var(--magenta-500);border-radius:1px}
.nav-item{outline-offset:2px;
  display:flex;align-items:center;gap:var(--s-3);
  padding: 8px 12px;
  border-radius:var(--r-md);
  font-size:14px;
  color:var(--obsidian-200);
  cursor:pointer;
  transition: all var(--d-quick) var(--ease-standard);
  position:relative;
  user-select:none;
}
.nav-item .num{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--obsidian-400);
  letter-spacing:var(--tr-mono);
  min-width:18px;
}
.nav-item:hover{background:var(--obsidian-800);color:var(--obsidian-100)}
.nav-item.active{
  background:linear-gradient(180deg, rgba(240,81,213,0.08), rgba(0,229,209,0.02));
  color:var(--obsidian-100);
  border:1px solid rgba(240,81,213,0.2);
  padding: 7px 11px;
}
.nav-item.active .num{color:var(--magenta-400)}
.nav-item.active::after{
  content:"";position:absolute;left:-21px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;background:var(--magenta-500);border-radius:2px;
  box-shadow:0 0 12px var(--magenta-500);
}

.sidebar-footer{
  margin-top:auto;
  padding-top:var(--s-5);
  border-top:1px solid var(--obsidian-800);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--tr-mono);
  color:var(--obsidian-400);
  text-transform:uppercase;
  display:flex;flex-direction:column;gap:var(--s-1);
}
.sidebar-footer .status{display:flex;align-items:center;gap:6px}
.sidebar-footer .status .dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success)}

/* ─────────── MAIN ─────────── */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding: var(--s-4) var(--s-10);
  border-bottom:1px solid var(--obsidian-800);
  background:rgba(7,9,11,0.8);
  backdrop-filter: blur(16px);
}
.breadcrumb{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-300)}
.breadcrumb .sep{color:var(--obsidian-500)}
.breadcrumb .active{color:var(--obsidian-100)}
.topbar-actions{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-400)}
.topbar-actions .kbd{font-family:var(--font-mono);font-size:10px;padding:3px 6px;border:1px solid var(--obsidian-700);border-radius:4px;color:var(--obsidian-300);background:var(--obsidian-850)}

.content{
  padding: var(--s-12) var(--s-10) var(--s-24);
  max-width: var(--content-max);
  width:100%;
  margin-inline:auto;
}

/* section visibility */
.section{display:none;animation:fade-up .4s var(--ease-standard) both}
.section.active{display:block}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─────────── PAGE HEADERS ─────────── */
.page-header{margin-bottom:var(--s-16)}
.page-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--magenta-400);
  display:inline-flex;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-4);
}
.page-eyebrow::before{content:"";width:24px;height:1px;background:var(--magenta-500)}
.page-title{
  font-size:var(--t-h1);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  font-weight:700;
  margin:0 0 var(--s-5);
  max-width:14ch;
}
.page-title .accent{background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-lede{
  font-size:var(--t-lead);
  line-height:var(--lh-loose);
  color:var(--obsidian-200);
  max-width:62ch;
  font-weight:400;
}
.page-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-6);
  margin-top:var(--s-8);
  padding-top:var(--s-6);
  border-top:1px solid var(--obsidian-800);
}
.page-meta .mk{display:flex;flex-direction:column;gap:2px}
.page-meta .mk .k{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-400)}
.page-meta .mk .v{font-size:13px;color:var(--obsidian-100);font-weight:500}

/* ─────────── SECTIONS INSIDE PAGES ─────────── */
.subsection{margin-bottom:var(--s-20)}
.subsection-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:var(--s-8);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--obsidian-800);
  gap:var(--s-6);
}
.subsection-title{
  font-size:var(--t-h4);
  font-weight:700;
  letter-spacing:var(--tr-snug);
  margin:0;
}
.subsection-num{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tr-mono);
  color:var(--obsidian-400);
  text-transform:uppercase;
}
.subsection-desc{
  font-size:var(--t-body);
  color:var(--obsidian-300);
  line-height:var(--lh-loose);
  max-width:72ch;
  margin-bottom:var(--s-8);
}

/* ─────────── GENERIC CARD ─────────── */
.card{
  background:var(--obsidian-900);
  border:1px solid var(--obsidian-800);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  position:relative;
  transition:border-color var(--d-quick) var(--ease-standard), transform var(--d-quick) var(--ease-standard);
}
.card:hover{border-color:var(--obsidian-700)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-4);
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-400);
}

/* grids */
.grid{display:grid;gap:var(--s-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width: 900px){.grid-3,.grid-4,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ─────────── COLOR TILES ─────────── */
.swatch{
  border:1px solid var(--obsidian-800);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--obsidian-900);
  transition:transform var(--d-quick) var(--ease-standard);
}
.swatch:hover{transform:translateY(-2px)}
.swatch .chip{height:96px}
.swatch .meta{padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:2px}
.swatch .name{font-weight:600;font-size:13px;color:var(--obsidian-100)}
.swatch .hex{font-family:var(--font-mono);font-size:11px;color:var(--obsidian-300);letter-spacing:var(--tr-mono)}
.swatch .role{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-500);margin-top:2px}

.swatch-scale{display:grid;grid-template-columns:repeat(11,1fr);gap:2px}
.swatch-scale .step{aspect-ratio:1/1.2;border-radius:var(--r-xs);position:relative;display:flex;align-items:flex-end;padding:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:var(--tr-mono)}
.swatch-scale .step .l{color:currentColor;opacity:0.7}

/* ─────────── TYPE SPECIMENS ─────────── */
.type-specimen{
  display:grid;grid-template-columns:140px 1fr;gap:var(--s-6);
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--obsidian-800);
  align-items:baseline;
}
.type-specimen:last-child{border-bottom:0}
.type-specimen .spec{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);
  color:var(--obsidian-400);text-transform:uppercase;line-height:1.6;
}
.type-specimen .spec .token{display:block;color:var(--magenta-400)}
.type-specimen .sample{color:var(--obsidian-100);margin:0}

.ty-display{font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);font-weight:900}
.ty-h1{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);font-weight:700}
.ty-h2{font-size:var(--t-h2);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);font-weight:700}
.ty-h3{font-size:var(--t-h3);line-height:var(--lh-snug);letter-spacing:var(--tr-snug);font-weight:700}
.ty-h4{font-size:var(--t-h4);line-height:var(--lh-snug);letter-spacing:var(--tr-snug);font-weight:700}
.ty-h5{font-size:var(--t-h5);line-height:var(--lh-snug);letter-spacing:var(--tr-snug);font-weight:600}
.ty-h6{font-size:var(--t-h6);line-height:var(--lh-snug);font-weight:600}
.ty-lead{font-size:var(--t-lead);line-height:var(--lh-loose);font-weight:400;color:var(--obsidian-200)}
.ty-body{font-size:var(--t-body);line-height:var(--lh-loose);font-weight:400}
.ty-small{font-size:var(--t-small);line-height:var(--lh-normal);color:var(--obsidian-300)}
.ty-caption{font-size:var(--t-caption);line-height:var(--lh-normal);color:var(--obsidian-400)}
.ty-mono{font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:var(--tr-mono);color:var(--obsidian-200);text-transform:uppercase}

/* ─────────── TOKEN TABLE ─────────── */
.table{
  width:100%;border-collapse:collapse;
  border:1px solid var(--obsidian-800);border-radius:var(--r-md);overflow:hidden;
  font-size:13px;
}
.table th,.table td{text-align:left;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--obsidian-800)}
.table th{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--obsidian-400);background:var(--obsidian-850);font-weight:500;
}
.table tr:last-child td{border-bottom:0}
.table code{font-family:var(--font-mono);font-size:12px;color:var(--magenta-400);background:var(--obsidian-850);padding:2px 6px;border-radius:4px;letter-spacing:var(--tr-mono)}
.table .muted{color:var(--obsidian-300)}

/* ─────────── SPACING RULER ─────────── */
.ruler-row{display:grid;grid-template-columns:60px 80px 1fr;gap:var(--s-4);align-items:center;padding:var(--s-3) 0;border-bottom:1px dashed var(--obsidian-800)}
.ruler-row:last-child{border-bottom:0}
.ruler-row .tok{font-family:var(--font-mono);font-size:11px;color:var(--magenta-400);letter-spacing:var(--tr-mono)}
.ruler-row .val{font-family:var(--font-mono);font-size:11px;color:var(--obsidian-300);letter-spacing:var(--tr-mono)}
.ruler-row .bar{height:16px;background:var(--grad-signal);border-radius:2px;position:relative}
.ruler-row .bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,0.15) 0,rgba(0,0,0,0.15) 1px,transparent 1px,transparent 4px)}

/* ─────────── RADIUS + SHADOW DEMOS ─────────── */
.demo-tile{
  background:var(--obsidian-850);
  border:1px solid var(--obsidian-800);
  aspect-ratio:1/0.75;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s-4);
  transition:all var(--d-base) var(--ease-standard);
}
.demo-tile .name{font-weight:600;font-size:13px;color:var(--obsidian-100)}
.demo-tile .tok{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);color:var(--obsidian-400);text-transform:uppercase;margin-top:2px}

/* ─────────── MOTION LAB ─────────── */
.motion-row{display:grid;grid-template-columns:140px 1fr 100px;gap:var(--s-4);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid var(--obsidian-800)}
.motion-row:last-child{border-bottom:0}
.motion-row .label{font-family:var(--font-mono);font-size:11px;color:var(--obsidian-100);letter-spacing:var(--tr-mono);text-transform:uppercase}
.motion-row .label .sub{display:block;color:var(--obsidian-400);margin-top:2px;text-transform:none;letter-spacing:normal}
.motion-row .track{height:24px;background:var(--obsidian-850);border-radius:var(--r-full);border:1px solid var(--obsidian-800);position:relative;overflow:hidden}
.motion-row .dot{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--grad-signal);box-shadow:0 0 16px var(--magenta-500)}
.motion-row .time{font-family:var(--font-mono);font-size:11px;color:var(--obsidian-300);letter-spacing:var(--tr-mono);text-align:right}

/* ─────────── BUTTONS (the component itself) ─────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-sans);font-size:15px;font-weight:500;
  letter-spacing:var(--tr-snug);
  padding:14px 28px;border-radius:var(--r-full);
  transition:all var(--d-quick) var(--ease-standard);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn .icon{width:14px;height:14px}
.btn-primary{background:var(--magenta-500);color:#1A001A;border-color:var(--magenta-500);box-shadow:var(--sh-2), 0 0 0 0 rgba(240,81,213,0)}
.btn-primary:hover{background:var(--magenta-400);color:#1A001A;border-color:var(--magenta-400);box-shadow:var(--sh-3), 0 0 0 4px rgba(240,81,213,0.18)}
.btn-secondary{background:var(--obsidian-800);color:var(--obsidian-100);border-color:var(--obsidian-700)}
.btn-secondary:hover{background:var(--obsidian-700);border-color:var(--obsidian-600)}
.btn-ghost{color:var(--obsidian-100);background:transparent}
.btn-ghost:hover{background:var(--obsidian-800)}
.btn-outline{background:transparent;color:var(--obsidian-100);border-color:var(--obsidian-600)}
.btn-outline:hover{border-color:var(--magenta-500);color:var(--magenta-400)}
.btn-danger{background:var(--danger);color:#1a0606}
.btn-danger:hover{filter:brightness(1.05)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-lg{padding:18px 34px;font-size:16px}

/* ─────────── INPUTS ─────────── */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-300)}
.input,.textarea,.select{
  background:var(--obsidian-850);
  border:1px solid var(--obsidian-700);
  border-radius:var(--r-md);
  color:var(--obsidian-100);
  padding:10px 12px;
  font-family:var(--font-sans);font-size:14px;
  outline:none;transition:all var(--d-quick) var(--ease-standard);
  width:100%;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--magenta-500);box-shadow:0 0 0 3px rgba(240,81,213,0.15)}
.input::placeholder{color:var(--obsidian-400)}
.input-wrap{position:relative}
.input-wrap .input{padding-left:36px}
.input-wrap .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--obsidian-400);width:16px;height:16px}
.help{font-size:12px;color:var(--obsidian-400)}
.help.error{color:var(--danger)}

/* checkbox & switch */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--obsidian-100)}
.check input{appearance:none;width:16px;height:16px;border:1.5px solid var(--obsidian-600);border-radius:3px;background:var(--obsidian-850);display:grid;place-items:center;transition:all var(--d-quick)}
.check input:checked{background:var(--magenta-500);border-color:var(--magenta-500)}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid #04201D;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--obsidian-100)}
.switch input{appearance:none;width:32px;height:18px;background:var(--obsidian-700);border-radius:999px;position:relative;transition:all var(--d-quick)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--obsidian-200);border-radius:50%;transition:all var(--d-base) var(--ease-standard)}
.switch input:checked{background:var(--magenta-500)}
.switch input:checked::after{left:16px;background:#04201D}

/* ─────────── BADGES ─────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:13px;letter-spacing:var(--tr-snug);
  padding:10px 18px;border-radius:var(--r-md);
  border:1px solid var(--tertiary-400);color:#fff;background:var(--tertiary-500);
  font-weight:500;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-success{color:var(--success);border-color:rgba(58,255,199,0.3);background:rgba(58,255,199,0.08)}
.badge-warn{color:var(--warning);border-color:rgba(246,198,91,0.3);background:rgba(246,198,91,0.08)}
.badge-danger{color:var(--danger);border-color:rgba(255,91,91,0.3);background:rgba(255,91,91,0.08)}
.badge-info{color:var(--info);border-color:rgba(92,200,255,0.3);background:rgba(92,200,255,0.08)}
.badge-brand{color:var(--magenta-400);border-color:rgba(240,81,213,0.3);background:rgba(240,81,213,0.08)}
.badge-solid{background:var(--magenta-500);color:#fff;border-color:var(--magenta-500)}

/* ─────────── NAV BAR DEMO ─────────── */
.navdemo{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  border:1px solid var(--obsidian-800);
  border-radius:var(--r-lg);
  background:rgba(11,14,18,0.8);
  backdrop-filter:blur(12px);
}
.navdemo .left{display:flex;align-items:center;gap:var(--s-8)}
.navdemo .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:var(--tr-snug)}
.navdemo .logo .mk{width:24px;height:24px;background:var(--grad-cube);border-radius:var(--r-sm)}
.navdemo .links{display:flex;gap:var(--s-5)}
.navdemo .links a{color:var(--obsidian-200);font-size:13px;font-weight:500}
.navdemo .links a:hover{color:var(--magenta-400)}
.navdemo .links a.active{color:var(--obsidian-100)}
.navdemo .right{display:flex;align-items:center;gap:var(--s-3)}

/* ─────────── DATA-VIZ ─────────── */
.chart-card{background:var(--obsidian-900);border:1px solid var(--obsidian-800);border-radius:var(--r-lg);padding:var(--s-6)}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s-5)}
.chart-head .t{font-size:14px;font-weight:600}
.chart-head .s{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);color:var(--obsidian-400);text-transform:uppercase}
.chart-big{font-size:var(--t-h2);font-weight:700;letter-spacing:var(--tr-tight);margin:var(--s-2) 0}
.chart-big.accent{background:var(--grad-signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.chart-delta{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);color:var(--success)}
.chart-delta.neg{color:var(--danger)}

/* ─────────── VOICE / TONE ─────────── */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:900px){.do-dont{grid-template-columns:1fr}}
.do, .dont{border:1px solid var(--obsidian-800);border-radius:var(--r-lg);padding:var(--s-5);background:var(--obsidian-900)}
.do{border-left:2px solid var(--success)}
.dont{border-left:2px solid var(--danger)}
.do .hd, .dont .hd{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;margin-bottom:var(--s-3)}
.do .hd{color:var(--success)}
.dont .hd{color:var(--danger)}
.do p, .dont p{margin:0;font-size:14px;color:var(--obsidian-100);line-height:var(--lh-loose)}

/* ─────────── CASE STUDY APPLIED ─────────── */
.cs-hero{
  position:relative;
  border:1px solid var(--obsidian-800);
  border-radius:var(--r-xl);
  overflow:hidden;
  padding:var(--s-16) var(--s-10);
  background: radial-gradient(600px 400px at 80% 20%, rgba(240,81,213,0.08), transparent 60%), var(--obsidian-900);
  margin-bottom:var(--s-10);
}
.cs-hero .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--magenta-400);margin-bottom:var(--s-4)}
.cs-hero h2{font-size:var(--t-h2);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);margin:0 0 var(--s-5);max-width:18ch}
.cs-hero p{font-size:var(--t-lead);color:var(--obsidian-200);max-width:56ch;margin:0}
.cs-hero .cube{
  position:absolute;right:var(--s-10);top:50%;transform:translateY(-50%);
  width:220px;height:220px;filter:drop-shadow(0 0 48px rgba(240,81,213,0.25));
  opacity:0.9;
}
.cs-dossier{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
  padding:var(--s-6);background:var(--obsidian-900);border:1px solid var(--obsidian-800);border-radius:var(--r-lg);
  margin-bottom:var(--s-10);
}
@media(max-width:900px){.cs-dossier{grid-template-columns:repeat(2,1fr)}}
.cs-dossier .item{display:flex;flex-direction:column;gap:4px}
.cs-dossier .k{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-400)}
.cs-dossier .v{font-size:14px;font-weight:500;color:var(--obsidian-100)}

.cs-section{margin-bottom:var(--s-12)}
.cs-section h3{font-size:var(--t-h4);font-weight:700;letter-spacing:var(--tr-snug);margin:0 0 var(--s-4)}
.cs-section .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--magenta-400);margin-bottom:var(--s-2);display:flex;align-items:center;gap:8px}
.cs-section .eyebrow::before{content:"";width:20px;height:1px;background:var(--magenta-500)}
.cs-section p{font-size:var(--t-body);color:var(--obsidian-200);line-height:var(--lh-loose);max-width:68ch;margin:0 0 var(--s-4)}
.cs-pull{
  border-left:2px solid var(--magenta-500);padding:var(--s-3) var(--s-6);
  font-size:var(--t-h5);font-weight:500;line-height:var(--lh-snug);letter-spacing:var(--tr-snug);
  color:var(--obsidian-100);max-width:52ch;margin:var(--s-8) 0;
}
.cs-img{
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg, rgba(0,229,209,0.04), rgba(248,104,216,0.02)),
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 7px),
    var(--obsidian-850);
  border:1px solid var(--obsidian-800);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--obsidian-400);
  margin:var(--s-6) 0;
}

/* ─────────── GRID OVERLAY DEMO ─────────── */
.grid-demo{position:relative;background:var(--obsidian-900);border:1px solid var(--obsidian-800);border-radius:var(--r-lg);padding:var(--s-6);overflow:hidden}
.grid-demo .cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-3)}
.grid-demo .col{height:80px;background:rgba(240,81,213,0.08);border:1px dashed rgba(240,81,213,0.3);border-radius:var(--r-xs);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--magenta-400);letter-spacing:var(--tr-mono)}

/* ─────────── INFO BAR ─────────── */
.info-strip{
  display:flex;align-items:center;gap:var(--s-3);
  padding:10px 14px;background:var(--obsidian-850);border:1px solid var(--obsidian-800);border-left:2px solid var(--magenta-500);
  border-radius:var(--r-md);font-size:13px;color:var(--obsidian-200);
}
.info-strip .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tr-mono);color:var(--magenta-400);text-transform:uppercase}


/* ─────────── A11Y: focus visibility + reduced motion ─────────── */
.skip-link{
  position:absolute;top:-100px;left:12px;z-index:1000;
  padding:10px 16px;background:var(--magenta-500);color:#1A001A;
  font-family:var(--font-sans);font-weight:600;font-size:13px;
  border-radius:var(--r-md);text-decoration:none;
}
.skip-link:focus{top:12px}
.btn:focus-visible,
.nav-item:focus-visible,
.swatch:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--obsidian-100);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(240,81,213,0.35);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─────────── REPLAY BUTTON ─────────── */
.replay-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:var(--tr-snug);
  color:var(--obsidian-200);background:var(--obsidian-850);
  border:1px solid var(--obsidian-700);border-radius:var(--r-full);
  padding:6px 12px;cursor:pointer;
  transition:all var(--d-quick) var(--ease-standard);
}
.replay-btn:hover{
  color:var(--magenta-300);border-color:var(--magenta-500);
  background:rgba(240,81,213,0.08);
}
.replay-btn svg{transition:transform var(--d-base) var(--ease-standard)}
.replay-btn:hover svg{transform:rotate(-180deg)}
.replay-btn:active svg{transform:rotate(-360deg);transition-duration:var(--d-slow)}


/* ─────────── fade-in-up utility ─────────── */
[data-fade]{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-decel), transform 600ms var(--ease-decel)}
[data-fade].is-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  [data-fade]{opacity:1;transform:none;transition:none}
}