/* ==============================================================
   CUADERNO — sistema visual
   Dirección de arte: papel impreso / revista académica.
   Rejilla visible, filetes finos (hairlines), numeración en versalitas,
   serif variable Fraunces para titulares y una única tinta de acento
   (bermellón) usada con avaricia. Nada de tarjetas flotantes por todas
   partes: la estructura la marcan las líneas, no las sombras.
   ============================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:140px;

  /* radios casi nulos: el lenguaje es tipográfico, no "app" */
  --r-xs:2px; --r-sm:3px; --r-md:6px; --r-lg:10px; --r-pill:999px;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --ease-out:cubic-bezier(.16,.84,.28,1);
  --ease-spring:cubic-bezier(.22,1.4,.4,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --dur-fast:150ms; --dur:300ms; --dur-slow:680ms;

  --maxw:1240px;
  --nav-h:60px;
  --rule:1px;
}

[data-theme="light"]{
  --paper:#efece4;          /* papel crudo */
  --paper-2:#e7e3d8;
  --card:#f7f5f0;
  --ink:#17150f;
  --ink-2:#4f4a3d;
  --ink-3:#8a8375;
  --line:#c9c3b2;
  --line-soft:#dcd7c9;
  --accent:#b8452a;         /* bermellón de imprenta */
  --accent-2:#2f5043;       /* verde pizarra, secundario */
  --accent-soft:rgba(184,69,42,.10);
  --hl:rgba(219,182,68,.35); /* subrayado marcador */
  --danger:#9d2f22;
  --shadow:0 1px 0 var(--line-soft);
  --grain-op:.30;
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#15140f;
  --paper-2:#1b1a14;
  --card:#1e1c16;
  --ink:#ece7d9;
  --ink-2:#aaa293;
  --ink-3:#77705f;
  --line:#35322a;
  --line-soft:#26241e;
  --accent:#e2704f;
  --accent-2:#7fae98;
  --accent-soft:rgba(226,112,79,.13);
  --hl:rgba(226,190,90,.22);
  --danger:#e08472;
  --shadow:0 1px 0 var(--line-soft);
  --grain-op:.16;
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
img,svg,iframe,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.02;letter-spacing:-.022em;
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
kbd{font-family:var(--font-mono);font-size:10.5px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:var(--r-sm);padding:1px 5px;color:var(--ink-2);background:var(--card)}
code{font-family:var(--font-mono);font-size:.88em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{position:fixed;left:-999px;top:8px;z-index:400;background:var(--card);padding:var(--s-3) var(--s-4);border:1px solid var(--line)}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--hl);color:var(--ink)}

/* grano de papel: textura SVG en overlay, muy sutil */
.grain{
  position:fixed;inset:0;z-index:300;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
[data-theme="dark"] .grain{mix-blend-mode:screen}

/* utilidades tipográficas */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6)}
.section{padding-block:var(--s-8)}
.rule{height:var(--rule);background:var(--line);border:0;margin:0}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.serif-lead{font-family:var(--font-display);font-weight:300;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.42;
  font-variation-settings:"opsz" 30,"SOFT" 20}
.drop-cap::first-letter{
  font-family:var(--font-display);float:left;font-size:3.6em;line-height:.82;padding:6px 10px 0 0;color:var(--accent);
  font-variation-settings:"opsz" 144,"WONK" 1;
}

/* ---------- 3. Header ---------- */
.nav{position:sticky;top:0;z-index:120;background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--rule) solid transparent;transition:border-color var(--dur) var(--ease-out)}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__inner{max-width:var(--maxw);margin:0 auto;height:var(--nav-h);padding:0 var(--s-6);
  display:flex;align-items:center;gap:var(--s-5)}
.brand{display:flex;align-items:baseline;gap:var(--s-3)}
.brand__mark{align-self:center;color:var(--ink);transition:transform var(--dur) var(--ease-spring)}
.brand:hover .brand__mark{transform:translateY(-2px) rotate(-3deg)}
.brand__text{font-family:var(--font-display);font-size:1.15rem;letter-spacing:-.02em;font-variation-settings:"opsz" 20,"WONK" 1}
.brand__year{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-3)}
.nav__links{display:flex;gap:var(--s-1);margin-left:auto}
.nav__links a{position:relative;display:flex;align-items:baseline;gap:6px;padding:var(--s-2) var(--s-3);
  font-size:13.5px;color:var(--ink-2);transition:color var(--dur-fast) var(--ease-out)}
.nav__num{font-family:var(--font-mono);font-size:9px;color:var(--ink-3);letter-spacing:.08em}
.nav__links a::after{content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:9px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--ease-out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active .nav__num{color:var(--accent)}
.nav__actions{display:flex;align-items:center;gap:var(--s-2)}
.nav__progress{height:2px;width:0;background:var(--accent);transition:width 90ms linear}

.kbtn{display:flex;align-items:center;gap:var(--s-2);padding:6px var(--s-3);background:var(--card);
  border:var(--rule) solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);font-size:12.5px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.kbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.kbtn:active{transform:scale(.97)}
@media (max-width:1000px){.kbtn span:not(.sr-only){display:none}.kbtn kbd{display:none}}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;background:var(--card);
  border:var(--rule) solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-spring),border-color var(--dur-fast) var(--ease-out)}
.icon-btn:hover{border-color:var(--ink-3)}
.icon-btn:active{transform:scale(.93)}
.theme-toggle__cut{transition:cx var(--dur-slow) var(--ease-inout),cy var(--dur-slow) var(--ease-inout)}
.theme-toggle__core{transition:r var(--dur-slow) var(--ease-inout)}
.theme-toggle__rays{transform-origin:12px 12px;transition:opacity var(--dur) var(--ease-out),transform var(--dur-slow) var(--ease-inout)}
[data-theme="dark"] .theme-toggle__cut{cx:17;cy:7}[data-theme="dark"] .theme-toggle__core{r:8.5}
[data-theme="dark"] .theme-toggle__rays{opacity:0;transform:rotate(-70deg) scale(.4)}
[data-theme="light"] .theme-toggle__rays{opacity:1}
.burger{display:none;width:34px;height:34px;background:var(--card);border:var(--rule) solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform var(--dur) var(--ease-spring),opacity var(--dur-fast),width var(--dur)}
.burger span:nth-child(2){width:65%;align-self:flex-end}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 4. Portada ---------- */
.mast{position:relative;border-bottom:var(--rule) solid var(--line);overflow:hidden}
.mast__rules{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent,transparent calc(100%/12 - 1px),color-mix(in oklab,var(--line) 55%,transparent) calc(100%/12));
  opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
.mast__inner{max-width:var(--maxw);margin:0 auto;padding:var(--s-8) var(--s-6) var(--s-7);position:relative}
.mast__meta{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;align-items:baseline;
  padding-bottom:var(--s-4);border-bottom:var(--rule) solid var(--line)}
.mast h1{font-size:clamp(3rem,12.5vw,9.4rem);line-height:.86;margin-top:var(--s-6);font-weight:400;
  font-variation-settings:"opsz" 144,"WONK" 1,"SOFT" 0;letter-spacing:-.035em}
.mast h1 .ital{font-style:italic;font-weight:300;color:var(--accent)}
.mast__cols{display:grid;grid-template-columns:1.25fr .9fr;gap:var(--s-7);margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:var(--rule) solid var(--line)}
.mast__cols p{color:var(--ink-2);font-size:15.5px}
.mast__side{border-left:var(--rule) solid var(--line);padding-left:var(--s-5)}
.mast__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
@media (max-width:820px){.mast__cols{grid-template-columns:1fr;gap:var(--s-5)}.mast__side{border-left:0;border-top:var(--rule) solid var(--line);padding-left:0;padding-top:var(--s-4)}}

/* cifras de portada */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule) solid var(--line)}
.ledger div{padding:var(--s-5) var(--s-4);border-right:var(--rule) solid var(--line)}
.ledger div:last-child{border-right:0}
.ledger dd{margin:0;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.9rem);line-height:1;
  font-variation-settings:"opsz" 80;font-variant-numeric:tabular-nums}
.ledger dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:var(--s-2)}
@media (max-width:680px){.ledger{grid-template-columns:repeat(2,1fr)}.ledger div:nth-child(2){border-right:0}
  .ledger div:nth-child(-n+2){border-bottom:var(--rule) solid var(--line)}}

/* ---------- 5. Índice de asignaturas (filas, no cards) ---------- */
.index{border-top:var(--rule) solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:54px 1.1fr 1.5fr auto;gap:var(--s-5);align-items:center;
  padding:var(--s-5) var(--s-2);border-bottom:var(--rule) solid var(--line);overflow:hidden;
  transition:padding-left var(--dur) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.row::before{content:"";position:absolute;inset:0;background:var(--accent-soft);transform:scaleY(0);transform-origin:bottom;
  transition:transform 420ms var(--ease-out);z-index:-1}
.row:hover{padding-left:var(--s-5)}
.row:hover::before{transform:scaleY(1)}
.row__n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;transition:color var(--dur) var(--ease-out)}
.row:hover .row__n{color:var(--accent)}
.row__t{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,1.85rem);
  font-variation-settings:"opsz" 60,"WONK" 1;letter-spacing:-.02em}
.row__ico{color:var(--tint,var(--accent));opacity:.85;flex:none;transition:transform 420ms var(--ease-spring)}
.row:hover .row__ico{transform:rotate(-7deg) scale(1.1)}
.row__d{color:var(--ink-3);font-size:13.5px;line-height:1.45}
.row__r{display:flex;align-items:center;gap:var(--s-4);justify-self:end}
.row__bars{display:flex;gap:3px;align-items:flex-end;height:22px}
.row__bars i{display:block;width:5px;min-height:3px;background:var(--tint,var(--accent));opacity:.8;border-radius:1px;
  transform-origin:bottom;animation:barUp 620ms var(--ease-out) backwards}
@keyframes barUp{from{transform:scaleY(0)}}
.row__c{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.row__go{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-3);
  transition:transform 380ms var(--ease-spring),color var(--dur) var(--ease-out)}
.row:hover .row__go{transform:translateX(5px);color:var(--accent)}
@media (max-width:860px){
  .row{grid-template-columns:38px 1fr auto;gap:var(--s-3);padding-block:var(--s-4)}
  .row__d{display:none}
  .row__bars{display:none}
}

/* ---------- 6. Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);padding:9px var(--s-4);
  background:transparent;color:var(--ink);border:var(--rule) solid var(--ink);border-radius:var(--r-sm);
  font-size:13.5px;font-weight:450;cursor:pointer;overflow:hidden;
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform 380ms var(--ease-out);z-index:-1}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.96)}
.btn *{position:relative}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary::before{background:var(--ink)}
.btn--primary:hover{color:#fff;border-color:var(--ink)}
.btn--ghost{border-color:var(--line);color:var(--ink-2)}
.btn--ghost:hover{color:var(--paper)}
.btn--sm{padding:5px var(--s-3);font-size:12.5px}
.btn--danger{border-color:color-mix(in oklab,var(--danger) 45%,transparent);color:var(--danger)}
.btn--danger::before{background:var(--danger)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn:focus-visible{outline-offset:3px}

/* ---------- 7. Asignatura ---------- */
.crumb{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:var(--s-5)}
.crumb a:hover{color:var(--accent)}
.subject-head{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:end;
  padding:var(--s-5) 0 var(--s-5);border-bottom:2px solid var(--ink);margin-top:var(--s-3)}
.subject-head h1{font-size:clamp(2.1rem,6.5vw,4.2rem);font-variation-settings:"opsz" 120,"WONK" 1;letter-spacing:-.03em}
.subject-head__k{display:flex;gap:var(--s-5);align-items:baseline}
.subject-head__k b{font-family:var(--font-display);font-size:1.9rem;font-weight:400;font-variant-numeric:tabular-nums}
@media (max-width:640px){.subject-head{grid-template-columns:1fr}}

.tabs{position:relative;display:flex;gap:0;border-bottom:var(--rule) solid var(--line);margin-top:var(--s-5)}
.tabs__ind{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--accent);
  transition:transform 420ms var(--ease-inout),width 420ms var(--ease-inout)}
.tab{position:relative;background:none;border:0;cursor:pointer;padding:var(--s-3) var(--s-4) var(--s-3) 0;
  margin-right:var(--s-5);font-size:14px;color:var(--ink-3);display:flex;align-items:baseline;gap:7px;
  transition:color var(--dur) var(--ease-out)}
.tab b{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);font-weight:400}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"] b{color:var(--accent)}
.tabpanel{padding-top:var(--s-6);animation:panelIn 420ms var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 8. Barra de filtros ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  padding-bottom:var(--s-4);border-bottom:var(--rule) solid var(--line-soft)}
.filters__l,.filters__r{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:var(--rule) solid var(--line);
  border-radius:var(--r-pill);background:transparent;font-size:12px;color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip--tint[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.search-inline{display:flex;align-items:center;gap:7px;border:var(--rule) solid var(--line);border-radius:var(--r-sm);
  padding:5px var(--s-3);background:var(--card);transition:border-color var(--dur-fast) var(--ease-out)}
.search-inline:focus-within{border-color:var(--accent)}
.search-inline input{border:0;background:none;outline:none;font-size:13px;width:150px}
.seg{display:inline-flex;border:var(--rule) solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.seg button{background:var(--card);border:0;border-right:var(--rule) solid var(--line);cursor:pointer;
  padding:5px var(--s-3);font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- 9. Fichas de elemento ---------- */
.items{display:grid;gap:0;margin-top:var(--s-5)}
.items[data-view="grid"]{grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--s-4)}
.items[data-view="grid"] .item{border:var(--rule) solid var(--line);padding:var(--s-4);background:var(--card)}
.items[data-view="list"] .item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:center;
  padding:var(--s-4) var(--s-2);border-bottom:var(--rule) solid var(--line-soft)}
.items[data-view="list"] .item__body{min-width:0}
.items[data-view="list"] .item__actions{margin-top:0}
.item{position:relative;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.item:hover{background:color-mix(in oklab,var(--accent) 5%,var(--card))}
.items[data-view="grid"] .item:hover{transform:translateY(-2px);border-color:var(--ink-3)}
.item__kind{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.item__thumb{width:42px;height:54px;border:var(--rule) solid var(--line);display:grid;place-items:center;
  background:var(--paper-2);color:var(--tint,var(--accent));font-family:var(--font-mono);font-size:9px;flex:none}
.item h4{font-family:var(--font-display);font-size:1.12rem;font-variation-settings:"opsz" 30,"WONK" 1;margin-top:var(--s-2);line-height:1.18}
.items[data-view="list"] .item h4{margin-top:2px}
.item p{font-size:13.2px;color:var(--ink-2);margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.item__meta{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-3);
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.item__actions{display:flex;gap:var(--s-2);margin-top:var(--s-4);flex-wrap:wrap}
.items[data-view="grid"] .item__thumb{margin-bottom:var(--s-3)}
.tag{font-family:var(--font-mono);font-size:10px;padding:1px 7px;border:var(--rule) solid var(--line);border-radius:var(--r-pill);color:var(--ink-2)}
.grade{font-family:var(--font-display);font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--accent-2);line-height:1}
.pin{position:absolute;top:var(--s-3);right:var(--s-3);background:none;border:0;cursor:pointer;color:var(--ink-3);
  opacity:0;transition:opacity var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease-spring)}
.item:hover .pin,.pin[aria-pressed="true"]{opacity:1}
.pin[aria-pressed="true"]{color:var(--accent)}
.pin:active{transform:scale(.85)}
.items[data-view="list"] .pin{position:static;opacity:1}

/* ---------- 10. Estado vacío ---------- */
.empty{border:var(--rule) dashed var(--line);padding:var(--s-8) var(--s-5);text-align:center;margin-top:var(--s-5);background:
  repeating-linear-gradient(-45deg,transparent,transparent 9px,color-mix(in oklab,var(--line) 26%,transparent) 9px,color-mix(in oklab,var(--line) 26%,transparent) 10px)}
.empty__in{background:var(--paper);display:inline-block;padding:var(--s-5) var(--s-6);border:var(--rule) solid var(--line)}
.empty h3{font-size:1.35rem;font-variation-settings:"opsz" 40,"WONK" 1}
.empty p{color:var(--ink-3);font-size:13.5px;margin-top:var(--s-2);max-width:46ch}
.empty .btn{margin-top:var(--s-4)}

/* ---------- 11. Editor ---------- */
.editor{margin-top:var(--s-5);border:var(--rule) solid var(--line);background:var(--card)}
.editor__bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-bottom:var(--rule) solid var(--line);flex-wrap:wrap}
.editor__name{flex:1 1 180px;min-width:130px;background:var(--paper);border:var(--rule) solid var(--line);
  border-radius:var(--r-sm);padding:6px var(--s-3);font-size:13px;transition:border-color var(--dur-fast)}
.editor__name:focus{outline:none;border-color:var(--accent)}
.editor__hint{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.split{display:grid;grid-template-columns:1fr 5px 1fr;min-height:clamp(400px,58vh,660px)}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.pane__tabs{display:flex;gap:0;border-bottom:var(--rule) solid var(--line);background:var(--paper-2)}
.pane__tabs button{background:none;border:0;border-right:var(--rule) solid var(--line);cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);padding:8px var(--s-3);
  transition:background var(--dur-fast),color var(--dur-fast)}
.pane__tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.pane__tabs .pane__spacer{flex:1;border-right:0}
.code-host{flex:1;min-height:0;overflow:auto;background:var(--card)}
.code-host .cm-editor{height:100%;font-size:13px}
.code-host .cm-scroller{font-family:var(--font-mono)!important;line-height:1.7}
.code-host textarea.fallback{width:100%;height:100%;min-height:340px;border:0;resize:none;padding:var(--s-4);
  background:transparent;font-family:var(--font-mono);font-size:13px;line-height:1.7;outline:none}
.gutter{cursor:col-resize;background:var(--line-soft);position:relative;transition:background var(--dur-fast)}
.gutter::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:1px;height:26px;background:var(--ink-3)}
.gutter:hover,.gutter.is-drag{background:var(--accent)}
.preview{display:flex;flex-direction:column;border-left:var(--rule) solid var(--line);min-width:0;background:var(--paper-2)}
.preview__bar{display:flex;align-items:center;gap:var(--s-2);padding:6px var(--s-3);border-bottom:var(--rule) solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.preview__bar .spacer{flex:1}
.dots{display:flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.preview iframe{flex:1;width:100%;border:0;background:#fff;min-height:320px;transition:width var(--dur) var(--ease-out),max-width var(--dur) var(--ease-out)}
.preview__stage{flex:1;display:flex;justify-content:center;background:var(--paper-2);padding:0;min-height:0}
.preview__stage[data-vp="tablet"]{padding:var(--s-4)}
.preview__stage[data-vp="mobile"]{padding:var(--s-4)}
.preview__stage[data-vp="tablet"] iframe{max-width:768px;border:var(--rule) solid var(--line)}
.preview__stage[data-vp="mobile"] iframe{max-width:390px;border:var(--rule) solid var(--line)}
.preview.is-full{position:fixed;inset:0;z-index:200;border:0}
.err-bar{display:none;gap:var(--s-2);align-items:center;padding:7px var(--s-3);color:#fff;background:var(--danger);
  font-family:var(--font-mono);font-size:10.5px}
.err-bar.is-on{display:flex}
.err-bar button{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer}
@media (max-width:900px){.split{grid-template-columns:1fr;grid-template-rows:auto 5px auto}
  .gutter{cursor:row-resize}.preview{border-left:0;border-top:var(--rule) solid var(--line)}}

/* ---------- 12. Dropzone ZIP ---------- */
.drop{margin-top:var(--s-5);border:1.5px dashed var(--line);padding:var(--s-8) var(--s-5);text-align:center;
  background:var(--card);transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.drop[data-state="over"]{border-color:var(--accent);background:var(--accent-soft)}
.drop[data-state="busy"]{border-style:solid;border-color:var(--accent-2)}
.drop[data-state="error"]{border-color:var(--danger);background:color-mix(in oklab,var(--danger) 7%,transparent)}
.drop[data-state="done"]{border-style:solid;border-color:var(--accent-2)}
.drop__icon{width:46px;height:46px;margin:0 auto var(--s-4);display:grid;place-items:center;color:var(--ink-3);
  border:var(--rule) solid var(--line);transition:transform var(--dur) var(--ease-spring),color var(--dur)}
.drop[data-state="over"] .drop__icon{transform:translateY(-5px);color:var(--accent)}
.drop[data-state="busy"] .drop__icon{animation:pulse 1.1s var(--ease-inout) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.drop h3{font-size:1.2rem;font-variation-settings:"opsz" 40,"WONK" 1}
.drop p{color:var(--ink-3);font-size:13px;margin-top:var(--s-2)}
.bar{height:2px;background:var(--line);max-width:320px;margin:var(--s-4) auto 0;overflow:hidden}
.bar i{display:block;height:100%;width:30%;background:var(--accent);animation:indet 1.1s var(--ease-inout) infinite}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

.tree{font-family:var(--font-mono);font-size:11.5px;margin-top:var(--s-4);border:var(--rule) solid var(--line);
  background:var(--card);max-height:300px;overflow:auto}
.tree details{border-bottom:var(--rule) solid var(--line-soft)}
.tree summary{cursor:pointer;padding:6px var(--s-4);color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:7px}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"+";color:var(--ink-3);width:9px}
.tree details[open]>summary::before{content:"−"}
.tree .file{padding:4px var(--s-4) 4px var(--s-7);color:var(--ink-3);display:flex;justify-content:space-between;gap:var(--s-3)}
.tree .file:hover{background:var(--paper-2);color:var(--ink-2)}
.tree .file button{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;opacity:0}
.tree .file:hover button{opacity:1}

/* ---------- 13. Formularios ---------- */
.form-card{border:var(--rule) solid var(--line);padding:var(--s-5);background:var(--card);margin-top:var(--s-6)}
.form-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{background:var(--paper);border:var(--rule) solid var(--line);
  border-radius:var(--r-sm);padding:9px var(--s-3);font-size:14px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:76px;resize:vertical}
.field input[type=file]{padding:7px;font-size:12.5px}

/* ---------- 14. Archivo / timeline ---------- */
.timeline{border-top:var(--rule) solid var(--line);margin-top:var(--s-5)}
.tl-group{display:grid;grid-template-columns:130px 1fr;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:var(--rule) solid var(--line-soft)}
.tl-group h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);position:sticky;top:calc(var(--nav-h) + 12px);height:max-content}
.tl-list{display:flex;flex-direction:column;gap:var(--s-3)}
.tl-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:baseline;cursor:pointer;
  padding:var(--s-2);transition:background var(--dur-fast) var(--ease-out),padding-left var(--dur) var(--ease-out)}
.tl-item:hover{background:var(--accent-soft);padding-left:var(--s-4)}
.tl-item__s{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tint,var(--accent))}
.tl-item__t{font-family:var(--font-display);font-size:1.05rem;font-variation-settings:"opsz" 24,"WONK" 1}
.tl-item__d{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
@media (max-width:640px){.tl-group{grid-template-columns:1fr;gap:var(--s-3)}.tl-group h3{position:static}}

/* ---------- 15. Paleta de comandos ---------- */
.palette{position:fixed;inset:0;z-index:250;background:color-mix(in oklab,var(--ink) 40%,transparent);
  backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:12vh var(--s-4) var(--s-4);
  animation:fadeIn 180ms var(--ease-out)}
.palette__box{width:min(620px,100%);background:var(--paper);border:var(--rule) solid var(--ink);
  box-shadow:10px 10px 0 color-mix(in oklab,var(--ink) 18%,transparent);animation:popIn 320ms var(--ease-spring);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-bottom:var(--rule) solid var(--line)}
.palette__in input{flex:1;border:0;background:none;outline:none;font-family:var(--font-display);font-size:1.25rem;
  font-variation-settings:"opsz" 30}
.palette__res{max-height:52vh;overflow:auto}
.pres{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;
  padding:10px var(--s-4);cursor:pointer;border-bottom:var(--rule) solid var(--line-soft)}
.pres__t,.pres__m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres:hover:not([aria-selected="true"]){background:var(--paper-2)}
.pres[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.pres[aria-selected="true"] .pres__m{color:color-mix(in oklab,var(--paper) 70%,transparent)}
.pres__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;min-width:78px}
.pres__t{font-size:14px}
.pres__m{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.palette__foot{display:flex;gap:var(--s-4);padding:8px var(--s-4);font-family:var(--font-mono);font-size:10px;color:var(--ink-3);
  border-top:var(--rule) solid var(--line);background:var(--paper-2)}
mark{background:var(--hl);color:inherit;padding:0 1px}

/* ---------- 16. Modal ---------- */
.modal{position:fixed;inset:0;z-index:240;display:grid;place-items:center;padding:var(--s-5);
  background:color-mix(in oklab,var(--ink) 55%,transparent);backdrop-filter:blur(4px);animation:fadeIn 200ms var(--ease-out)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.modal__box{width:min(1080px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--paper);
  border:var(--rule) solid var(--ink);box-shadow:12px 12px 0 color-mix(in oklab,var(--ink) 20%,transparent);
  animation:popIn 340ms var(--ease-spring);overflow:hidden}
.modal__bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:var(--rule) solid var(--line);flex-wrap:wrap}
.modal__bar h3{font-size:1.05rem;flex:1;min-width:120px;font-variation-settings:"opsz" 24,"WONK" 1}
.modal__body{flex:1;min-height:60vh;background:var(--paper-2);overflow:auto;display:flex}
.modal__body iframe,.modal__body embed{flex:1;width:100%;border:0;min-height:60vh;background:#fff}
.pager{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}

/* ---------- 17. Toasts ---------- */
.toasts{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:260;display:flex;flex-direction:column;gap:var(--s-2);max-width:min(340px,90vw)}
.toast{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);background:var(--ink);color:var(--paper);
  font-size:13px;box-shadow:4px 4px 0 color-mix(in oklab,var(--ink) 25%,transparent);animation:toastIn 380ms var(--ease-spring)}
.toast[data-kind="err"]{background:var(--danger);color:#fff}
.toast button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:12px;padding:0}
.toast.is-out{animation:toastOut 240ms var(--ease-inout) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}

/* ---------- 18. Reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,[data-stagger]>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
[data-stagger]>*{opacity:0;animation:riseIn 720ms var(--ease-out) forwards}
[data-stagger]>*:nth-child(1){animation-delay:40ms}[data-stagger]>*:nth-child(2){animation-delay:120ms}
[data-stagger]>*:nth-child(3){animation-delay:200ms}[data-stagger]>*:nth-child(4){animation-delay:280ms}
[data-stagger]>*:nth-child(5){animation-delay:360ms}[data-stagger]>*:nth-child(6){animation-delay:440ms}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,var(--line-soft) 37%,var(--paper-2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s var(--ease-inout) infinite;height:140px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- 19. Footer ---------- */
.foot{border-top:2px solid var(--ink);margin-top:var(--s-9)}
.foot__inner{max-width:var(--maxw);margin:0 auto;padding:var(--s-6);display:grid;grid-template-columns:1.4fr 1fr auto;
  gap:var(--s-6);align-items:start;color:var(--ink-3);font-size:13px}
.foot__logo{font-family:var(--font-display);font-size:1.4rem;color:var(--ink);font-variation-settings:"opsz" 40,"WONK" 1;margin-bottom:6px}
.foot__stats{display:flex;gap:var(--s-5);margin:0}
.foot__stats dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.foot__stats dd{margin:0;font-family:var(--font-display);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.foot__kbd{font-size:12px}
@media (max-width:820px){.foot__inner{grid-template-columns:1fr;gap:var(--s-5)}}

/* ---------- 20. Responsive nav ---------- */
@media (max-width:900px){
  .burger{display:flex}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;margin:0;background:var(--paper);
    border-bottom:var(--rule) solid var(--ink);padding:var(--s-3) var(--s-6) var(--s-5);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path 420ms var(--ease-inout),opacity 200ms var(--ease-out)}
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__links a{padding:var(--s-4) 0;font-size:18px;font-family:var(--font-display);border-bottom:var(--rule) solid var(--line-soft)}
  .nav__links a::after{display:none}
  .wrap{padding:0 var(--s-5)}
  .mast__inner{padding:var(--s-6) var(--s-5)}
}
@media (max-width:480px){.wrap,.mast__inner{padding-inline:var(--s-4)}}

/* ---------- 21. Print ---------- */
@media print{
  .nav,.foot,.toasts,.grain,.item__actions,.filters,.drop,.editor__bar{display:none!important}
  body{background:#fff;color:#000}
  .item{break-inside:avoid;border:1px solid #999}
  a::after{content:" (" attr(href) ")";font-size:9px;color:#666}
}


/* ==============================================================
   22. Movimiento (ver js/motion.js)
   ============================================================== */

/* máscara por palabra del titular */
.wmask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.wmask__i{display:inline-block;will-change:transform}

/* parallax del mástil: el JS escribe --py y --fade */
.mast__rules{transform:translateY(calc(var(--py,0px) * -1))}
.mast__glowline{opacity:var(--fade,1)}

/* cinta tipográfica */
.ticker{overflow:hidden;border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
  background:var(--paper-2);padding:9px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__in{display:flex;gap:var(--s-6);width:max-content;will-change:transform}
.ticker span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ticker b{color:var(--accent);font-weight:400}

/* subrayado que se dibuja en los enlaces de texto */
.ulink{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;
  background-position:0 100%;transition:background-size 420ms var(--ease-out)}
.ulink:hover{background-size:100% 1px}

/* fila del índice: línea que se dibuja + icono que rota */
.row__line{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--tint,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform 560ms var(--ease-out)}
.row:hover .row__line{transform:scaleX(1)}
.row__t{transition:transform 460ms var(--ease-out)}
.row:hover .row__t{transform:translateX(6px)}

/* fichas: elevación con recorte de color en el borde izquierdo */
.item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tint,var(--accent));
  transform:scaleY(0);transform-origin:top;transition:transform 420ms var(--ease-out)}
.item:hover::after{transform:scaleY(1)}
.items[data-view="grid"] .item::after{left:-1px}

/* botones: el relleno entra desde el cursor y el icono se desplaza */
.btn svg{transition:transform 380ms var(--ease-spring)}
.btn:hover svg{transform:translateX(3px)}

/* chips e inputs con rebote al activarse */
.chip{transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
  color var(--dur-fast),transform 320ms var(--ease-spring)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{animation:chipPop 380ms var(--ease-spring)}
@keyframes chipPop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* pestañas: el panel entra desde el lado */
.tabpanel{animation:panelIn 480ms var(--ease-out)}

/* cifras del "ledger": línea inferior que crece al aparecer */
.ledger div{position:relative;overflow:hidden}
.ledger div::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-out)}
.ledger.is-in div::after{transform:scaleX(1)}
.ledger div:nth-child(2)::after{transition-delay:120ms}
.ledger div:nth-child(3)::after{transition-delay:240ms}
.ledger div:nth-child(4)::after{transition-delay:360ms}

/* estado vacío: la ilustración respira */
.empty svg{animation:floaty 5.5s var(--ease-inout) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* dropzone: rayas en movimiento mientras se arrastra */
.drop[data-state="over"]{background-image:repeating-linear-gradient(-45deg,transparent,transparent 10px,
  color-mix(in oklab,var(--accent) 12%,transparent) 10px,color-mix(in oklab,var(--accent) 12%,transparent) 20px);
  animation:stripes 700ms linear infinite}
@keyframes stripes{to{background-position:28px 0}}

/* guardado: destello discreto en la barra del editor */
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.editor__bar.is-saved{animation:flash 900ms var(--ease-out)}

/* transición entre vistas (View Transitions API) */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut 220ms var(--ease-inout) both}
  ::view-transition-new(root){animation:vtIn 380ms var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
/* el mástil y la cabecera mantienen su identidad entre rutas */
.nav{view-transition-name:nav}
::view-transition-group(nav){animation-duration:0s}

/* foco con anillo animado */
@keyframes ringIn{from{outline-offset:8px;outline-color:transparent}}
:focus-visible{animation:ringIn 260ms var(--ease-out)}


/* ==============================================================
   23. Sesión
   ============================================================== */
.authBtn{display:flex;align-items:center;gap:7px;padding:5px var(--s-3);cursor:pointer;
  background:var(--card);border:var(--rule) solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-2);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.authBtn:hover{color:var(--ink);border-color:var(--ink-3)}
.authBtn:active{transform:scale(.96)}
.authBtn[data-state="in"]{border-color:color-mix(in oklab,var(--accent-2) 55%,var(--line));color:var(--ink)}
.authBtn .avatar{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-2);color:var(--paper);font-family:var(--font-mono);font-size:10px}
.authBtn__a{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);opacity:0;max-width:0;overflow:hidden;white-space:nowrap;
  transition:opacity var(--dur) var(--ease-out),max-width 420ms var(--ease-out)}
.authBtn[data-state="in"]:hover .authBtn__a{opacity:1;max-width:46px}
@media (max-width:1100px){.authBtn__t{display:none}}

/* aviso de bloqueo sobre los formularios de subida */
.locked{position:relative}
.locked > *:not(.lockbar){opacity:.45;filter:saturate(.4);pointer-events:none;user-select:none}
.lockbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);
  border-left:2px solid var(--accent);padding:var(--s-3) var(--s-4);background:var(--accent-soft);
  animation:lockIn 420ms var(--ease-out)}
@keyframes lockIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lockbar p{font-size:13px;color:var(--ink-2);flex:1;min-width:200px}
.lockbar strong{font-family:var(--font-display);font-weight:400}