:root{
  --ink:#07070a; --paper:#0e0e14; --paper2:#14141c;
  --lime:#d6ff00; --magenta:#ff1f8f; --cyan:#00f0ff;
  --coral:#ff6b3d; --violet:#a78bfa; --gold:#ffc857;
  --mute:#8b8b96; --line:rgba(255,255,255,.08);
  --text:#f4f4f7; --text2:#c5c5d0;
  /* vw/vh only — never vh (Safari can resolve vh to 0 inside CSS grid) */
  --page-w: min(42vw, 420px);
  --page-h: calc(var(--page-w) * 4 / 3);
  --radius: 2px;
  --c: var(--lime);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; height:100dvh; height:var(--app-h, 100dvh);
  background:var(--ink);color:var(--text);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
  overscroll-behavior:none; overflow:hidden;}
html{--app-h:100dvh; --vvw:100vw; --chrome-h:52px; --nav-h:72px;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.page img,.page picture{max-width:none}
.app{height:100%; height:var(--app-h, 100dvh); display:grid;grid-template-rows:auto 1fr auto; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,31,143,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(214,255,0,.08), transparent 55%),
    var(--ink);}
.chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
  background:rgba(7,7,10,.72); z-index:5;}
.chrome-title{display:flex;flex-direction:column;align-items:center;line-height:1.05;
  font-family:Syne,sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:11px;}
.chrome-title b{font-size:13px; letter-spacing:.18em;}
.chrome-title span{color:var(--mute); font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.2em;}
.chrome-right{display:flex;gap:8px;align-items:center}
.chip{border:1px solid var(--line); padding:7px 12px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.03);}
.chip.on{border-color:var(--lime); color:var(--lime);}
.chip.ghost{opacity:.7}
.stage{position:relative; display:flex; align-items:center; justify-content:center;
  padding:8px 12px; outline:none; overflow:hidden; min-height:0;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;}


.book{position:relative; width:calc(var(--page-w) * 2 + 8px); height:var(--page-h);
  min-width:0; min-height:0;
  perspective:2200px; transform-style:preserve-3d;}
html.no-3d .book{perspective:none; transform-style:flat}
html.no-3d .page.is-flip-out,html.no-3d .page.is-flip-in,
html.no-3d .book.flip-forward::after,html.no-3d .book.flip-back::after{animation:none !important}
html.no-3d .page.is-enter-left,html.no-3d .page.is-enter-right{
  animation:fadeIn .35s ease both !important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.page{position:absolute; inset:0 auto 0 0; width:var(--page-w); height:var(--page-h);
  background:var(--paper); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transform:translateX(20px) scale(.98);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);}
.page.is-left{left:0; border-radius:4px 0 0 4px;}
.page.is-right{left:calc(var(--page-w) + 8px); border-radius:0 4px 4px 0;}
.page.is-active{opacity:1; pointer-events:auto; transform:none;}
.page.is-exit-left{opacity:0; transform:translateX(-40px) rotateY(8deg);}
.page.is-exit-right{opacity:0; transform:translateX(40px) rotateY(-8deg);}
.page.is-enter-left{animation:enterL .45s cubic-bezier(.2,.8,.2,1) both;}
.page.is-enter-right{animation:enterR .45s cubic-bezier(.2,.8,.2,1) both;}
@keyframes enterL{from{opacity:0;transform:translateX(-50px) rotateY(-10deg)}to{opacity:1;transform:none}}
@keyframes enterR{from{opacity:0;transform:translateX(50px) rotateY(10deg)}to{opacity:1;transform:none}}

/* Phone/CSS fallback: single page. JS overrides --page-w/--page-h with visualViewport math. */
/* Catch portrait phones AND landscape phones (width can exceed 820). */
@media (max-width:700px), ((max-height:520px) and (max-width:980px)){
  :root{
    --page-w: min(96vw, calc(var(--vvw, 100vw) - 16px));
    --page-h: min(calc(var(--page-w) * 4 / 3), calc(var(--app-h, 100dvh) - var(--chrome-h) - var(--nav-h) - 12px));
  }
  .book{width:var(--page-w); height:var(--page-h); min-width:0; min-height:0; perspective:none; transform-style:flat;}
  .page{width:var(--page-w); height:var(--page-h);}
  .page.is-left,.page.is-right{left:0; border-radius:6px;}
  .chrome-title span{display:none}
  .book::before{display:none}
  .page.is-flip-out,.page.is-flip-in{animation:none}
}

/* JS phone classes — authoritative sizing */
html.is-phone .book{
  width:var(--page-w); height:var(--page-h);
  min-width:0; min-height:0; perspective:none; transform-style:flat;
}
html.is-phone .page{width:var(--page-w); height:var(--page-h);}
html.is-phone .page.is-left,html.is-phone .page.is-right{left:0; border-radius:6px;}
html.is-phone .book::before{display:none}
html.is-phone .page.is-flip-out,html.is-phone .page.is-flip-in{animation:none}
html.is-phone .chrome-title span{display:none}
html.is-phone .stage{padding:4px 6px;}

/* Portrait phone: prioritize filling width, readable type */
html.is-phone:not(.is-phone-land) .chrome{padding:8px 10px;}
html.is-phone:not(.is-phone-land) .nav{padding:8px 12px 12px;}
html.is-phone:not(.is-phone-land) .nav button{width:44px; height:44px;}

/* Landscape phone: shrink chrome, maximize page */
html.is-phone-land .chrome{padding:4px 8px; gap:8px;}
html.is-phone-land .chrome-title b{font-size:11px; letter-spacing:.12em;}
html.is-phone-land .chip{padding:4px 8px; font-size:10px;}
html.is-phone-land .nav{padding:4px 10px 6px; gap:8px;}
html.is-phone-land .nav button{width:36px; height:36px; font-size:22px;}
html.is-phone-land .stage{padding:2px 4px;}
html.is-phone-land .progress{height:2px;}


/* Desktop only when not a short landscape phone */
@media (min-width:821px) and (min-height:560px){
  :root{
    --avail-h: calc(100vh - 118px); --avail-h: calc(100dvh - 118px);
    --page-h: min(calc(var(--avail-h) * 0.90), calc((100vw - 40px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}
@media (min-width:821px) and (min-height:900px){
  :root{
    --page-h: min(calc(var(--avail-h) * 0.92), calc((100vw - 40px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}
@media (min-width:1800px) and (min-height:560px){
  :root{
    --page-h: min(calc(var(--avail-h) * 0.92), calc((100vw - 64px - 8px) / 2 * 4 / 3));
    --page-w: calc(var(--page-h) * 3 / 4);
  }
}

/* PAGE INTERNALS */
.rh{position:absolute; top:14px; left:22px; right:22px; display:flex; justify-content:space-between;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); z-index:2;}
.folio{position:absolute; bottom:14px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); z-index:2;}
.folio .n{font-family:Syne,sans-serif; font-size:clamp(14px, 3.6vw, 20px); color:var(--text); letter-spacing:0; font-weight:800;}
.marks span{position:absolute; width:10px; height:10px; border:1px solid rgba(255,255,255,.18); z-index:3;}
.marks span:nth-child(1){top:8px;left:8px; border-right:0;border-bottom:0}
.marks span:nth-child(2){top:8px;right:8px; border-left:0;border-bottom:0}
.marks span:nth-child(3){bottom:8px;left:8px; border-right:0;border-top:0}
.marks span:nth-child(4){bottom:8px;right:8px; border-left:0;border-top:0}

/* COVER */
.page-cover,.page-back{background:#000;}
.cover-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9;}
.cover-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,10,.2) 0%, rgba(7,7,10,.55) 45%, rgba(7,7,10,.92) 100%);}
.cover-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(20px, 6vh, 40px) clamp(16px, 5vw, 32px) clamp(28px, 7vh, 52px); z-index:2;}
.cover-kicker{font-family:"IBM Plex Mono",monospace; font-size:clamp(8px, 2.1vw, 10px); letter-spacing:.22em; color:var(--lime); margin-bottom:12px;}
.page-cover h1{font-family:Syne,sans-serif; font-weight:800;
  /* Fit longest line (~12 glyphs "HERRAMIENTAS") inside page padding — uses --page-w from layout JS */
  font-size:clamp(24px, calc((var(--page-w, 42vw) - 56px) / 6.2), 86px);
  line-height:.88; letter-spacing:-.045em; max-width:100%;
  overflow-wrap:normal; word-break:normal;
  background:linear-gradient(120deg, #fff 20%, var(--lime) 55%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.page-cover .cover-content{max-width:100%; overflow:hidden;}
.page-cover h1, .page-back h2{max-width:100%;}
.cover-sub{font-family:Syne,sans-serif; font-size:clamp(14px, 4.2vw, 20px); letter-spacing:.28em; margin:10px 0 14px; color:var(--magenta); font-weight:700;}
.cover-dek{font-size:clamp(11px, 3.1vw, 14px); line-height:1.45; color:var(--text2); max-width:32ch; margin-bottom:18px;}
.cover-meta{font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.16em; color:var(--mute);}
.reg-marks{position:absolute; inset:0; pointer-events:none; z-index:3;}
.reg-marks i{position:absolute; width:12px; height:12px; border:1px solid rgba(214,255,0,.45);}
.reg-marks i:nth-child(1){top:10px;left:10px} .reg-marks i:nth-child(2){top:10px;right:10px}
.reg-marks i:nth-child(3){bottom:10px;left:10px} .reg-marks i:nth-child(4){bottom:10px;right:10px}
.page-back h2{font-family:Syne,sans-serif; font-weight:800;
  font-size:clamp(22px, calc((var(--page-w, 42vw) - 52px) / 8), 64px);
  line-height:.92; letter-spacing:-.03em; margin:8px 0 14px;
  color:var(--cyan); max-width:100%;}

/* TOC */
.page-toc{padding:clamp(28px, 6vh, 52px) clamp(16px, 5vw, 28px) clamp(28px, 5vh, 46px); background:
  linear-gradient(160deg, #12121a, #0a0a10 60%); overflow:auto;}
.page-toc h2{font-family:Syne,sans-serif; font-size:clamp(22px, calc((var(--page-w, 42vw) - 36px) / 10), 40px); letter-spacing:-.03em; margin:8px 0 6px; max-width:100%;}
.page-toc .dek{font-size:12px; color:var(--text2); margin-bottom:16px; max-width:36ch;}
.toc-grid{display:flex; flex-direction:column; gap:14px;}
.toc-sec{border-left:3px solid var(--c); padding-left:12px;}
.toc-sec h3{font-family:Syne,sans-serif; font-size:13px; letter-spacing:.04em; color:var(--c); margin-bottom:2px;}
.toc-tag{font-size:10px; color:var(--mute); margin-bottom:6px;}
.toc-sec ol{list-style:none; display:flex; flex-direction:column; gap:2px;}
.toc-sec li button{width:100%; display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:baseline;
  text-align:left; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.06);}
.toc-sec .tn{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--c);}
.toc-sec .tt{font-size:11px; font-weight:700; letter-spacing:-.01em;}
.toc-sec .tg{font-size:9px; color:var(--mute); font-family:"IBM Plex Mono",monospace;}

/* IMAGE LEFT */
.idea-img{background:#000; padding:0;}
.idea-img img{width:100%; height:100%; object-fit:cover;}
.img-meta{position:absolute; left:14px; right:14px; bottom:14px; display:flex; gap:10px; align-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 8px #000; z-index:2;}
.img-meta .badge{background:var(--c); color:#000; font-weight:700; padding:3px 7px; border-radius:2px;}
.img-meta .sec{opacity:.85}
.img-meta .reg{opacity:.5}

/* RIGHT TEXT PAGES */
.page-right{padding:clamp(28px, 6.5vh, 56px) clamp(16px, 5.5vw, 30px) clamp(28px, 5.5vh, 50px); background:
  radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 55%),
  linear-gradient(165deg, #15151e, #0c0c12 70%);
  display:flex; flex-direction:column;}
.page-right h2{font-family:Syne,sans-serif; font-weight:800; letter-spacing:-.035em; line-height:.95;
  font-size:clamp(18px, calc((var(--page-w, 42vw) - 36px) / 11), 44px); margin:4px 0 8px; max-width:100%;
  overflow-wrap:anywhere; hyphens:auto;}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:clamp(8px, 2.1vw, 10px); letter-spacing:.2em; text-transform:uppercase; color:var(--c); margin-bottom:8px;}
.sub{font-size:clamp(11px, 2.8vw, 14px); color:var(--text2); margin-bottom:12px;}
.desc{font-size:clamp(11.5px, 3vw, 15px); line-height:1.48; color:var(--text2); margin-bottom:14px; max-width:38ch;}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:auto; margin-bottom:10px;
  border-top:1px solid var(--line); padding-top:12px;}
.stats div{display:flex; flex-direction:column; gap:2px;}
.stats em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);}
.stats b{font-size:clamp(11px, 2.9vw, 14px); font-weight:700;}
.stats .flex{color:var(--c); letter-spacing:.05em;}
.hook{font-family:Syne,sans-serif; font-size:clamp(12px, 3.1vw, 16px); line-height:1.3; color:var(--c); font-weight:700; margin-bottom:8px;}

.layout-a .giant{font-family:Syne,sans-serif; font-weight:800;
  font-size:clamp(48px, calc((var(--page-w, 42vw) - 32px) / 2.4), 120px); line-height:.8; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--c) 55%, transparent); margin:-6px 0 4px; opacity:.9;
  max-width:100%; overflow:hidden;}
.layout-b .watermark{position:absolute; right:-10px; top:40px; font-family:Syne,sans-serif; font-weight:800; font-size:clamp(100px, 36vw, 200px);
  line-height:1; color:color-mix(in srgb, var(--c) 12%, transparent); letter-spacing:-.08em; pointer-events:none; z-index:0;}
.layout-b h2,.layout-b .sub,.layout-b .desc,.layout-b .stats,.layout-b .hook,.layout-b .rule{position:relative; z-index:1;}
.layout-b .rule{height:3px; width:64px; background:var(--c); margin:0 0 14px;}
.layout-c{flex-direction:row; gap:0; padding-left:0;}
.layout-c .side-num{writing-mode:vertical-rl; transform:rotate(180deg); font-family:Syne,sans-serif; font-weight:800;
  font-size:clamp(42px, 14vw, 72px); letter-spacing:-.04em; color:var(--c); padding:clamp(28px,6vh,52px) 8px clamp(28px,5vh,48px) 14px; border-right:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; min-width:clamp(44px, 10vw, 64px);}
.layout-c .body{padding:clamp(28px,6.5vh,52px) clamp(14px,4vw,22px) clamp(28px,5.5vh,48px) clamp(12px,3.5vw,18px); display:flex; flex-direction:column; flex:1; min-width:0;}
.layout-c .folio{left:70px;}
.layout-d .genre-stamp{position:absolute; top:56px; right:-20px; transform:rotate(12deg);
  font-family:Syne,sans-serif; font-weight:800; font-size:clamp(28px, 9vw, 52px); letter-spacing:-.02em;
  color:color-mix(in srgb, var(--c) 22%, transparent); white-space:nowrap; pointer-events:none;}

.page-end{padding:56px 30px; display:flex; align-items:center;}
.end-inner h2{font-family:Syne,sans-serif; font-size:28px; margin:8px 0 12px;}
.end-inner p{font-size:12.5px; line-height:1.5; color:var(--text2); margin-bottom:10px;}
.end-inner .tiny{font-size:10px; color:var(--mute);}

/* NAV */
.nav{display:flex; align-items:center; gap:12px; padding:10px 16px 16px; z-index:5;}
.nav button{width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  font-size:28px; line-height:1; background:rgba(255,255,255,.04);}
.nav button:active{transform:scale(.96); border-color:var(--lime);}
.progress{flex:1; height:3px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden;}
.progress i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--magenta), var(--lime)); transition:width .3s ease;}

/* DRAWER */
.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,100%); background:rgba(10,10,14,.96);
  border-left:1px solid var(--line); z-index:20; backdrop-filter:blur(16px); overflow:auto;
  padding:16px; animation:slideIn .25s ease;}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
  font-family:Syne,sans-serif; letter-spacing:.06em; text-transform:uppercase;}
.drawer-body .toc-sec{margin-bottom:16px;}

/* PRINT / PDF */
@media print{
  .chrome,.nav,.drawer{display:none!important;}
  body,.app{background:#000; height:auto; display:block; overflow:visible;}
  .stage{padding:0; display:block; overflow:visible;}
  .book{width:100%; height:auto; display:block; perspective:none;}
  .page{position:relative!important; left:auto!important; opacity:1!important; pointer-events:auto!important;
    transform:none!important; width:8.5in; height:11in; margin:0 auto; page-break-after:always; break-after:page;
    box-shadow:none; border:0; animation:none!important;}
  .page-left img{width:100%; height:100%; object-fit:cover;}
}

/* ===== v3 premium motion ===== */
.book{transform-style:preserve-3d}
.page{backface-visibility:hidden}
html:not(.is-lite):not(.is-phone) .page.is-flip-out,
html:not(.is-lite):not(.is-phone) .page.is-flip-in{will-change:transform,opacity}
.page.is-flip-out{
  animation: flipOut .42s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: left center;
  z-index: 5;
  box-shadow: -20px 0 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.page.is-flip-in{
  animation: flipIn .42s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: right center;
  z-index: 5;
}
@keyframes flipOut{
  0%{transform:rotateY(0); filter:brightness(1); opacity:1}
  70%{filter:brightness(.9); opacity:1}
  100%{transform:rotateY(-78deg); opacity:0; filter:brightness(.75)}
}
@keyframes flipIn{
  0%{transform:rotateY(78deg); opacity:0; filter:brightness(.75)}
  100%{transform:rotateY(0); opacity:1; filter:brightness(1)}
}
/* Replace vw typography clamps with vw-safe equivalents inside pages via @supports */
@supports (height: 1cqh){
  /* keep existing vw in page text — progressive only */
}
.book.flip-forward::after,
.book.flip-back::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background: linear-gradient(90deg, transparent 40%, rgba(0,0,0,.18) 50%, transparent 60%);
  animation: shade .42s ease both;
}
@keyframes shade{0%{opacity:0}40%{opacity:1}100%{opacity:0}}

.reveal-child{
  animation: rise .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise{
  from{opacity:0; transform:translate3d(0,18px,0)}
  to{opacity:1; transform:none}
}

.idea-img img,
.page-cover img,
picture.cover-bg,
picture.cover-bg img{
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
picture.cover-bg{position:absolute; inset:0; display:block; width:100%; height:100%;}
picture.cover-bg img{width:100%; height:100%; object-fit:cover;}
.idea-img picture{position:absolute; inset:0; width:100%; height:100%;}
.idea-img picture img{width:100%; height:100%; object-fit:cover;}

/* spine glow */
.book::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:14px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.35), transparent);
  pointer-events:none; z-index:4; opacity:.55;
}
@media (max-width:820px){
  .book::before{display:none}
  .page.is-flip-out,.page.is-flip-in{animation:none}
}

.reduced-motion .page.is-flip-out,
.reduced-motion .page.is-flip-in,
.reduced-motion .reveal-child,
.reduced-motion .book.flip-forward::after,
.reduced-motion .book.flip-back::after{
  animation:none !important;
}
.reduced-motion .idea-img img,
.reduced-motion .page-cover img{
  transform:none !important; transition:none !important;
}

/* chrome polish */
.chrome{backdrop-filter:blur(16px) saturate(1.2)}
.nav button{transition: transform .2s ease, border-color .2s ease, background .2s ease}
.nav button:hover{border-color:var(--lime); background:rgba(214,255,0,.06)}
.chip{transition: border-color .2s ease, color .2s ease}
.drawer{box-shadow:-24px 0 60px rgba(0,0,0,.5)}


/* cover picture fix */
picture.cover-bg{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;margin:0;padding:0}
picture.cover-bg img, img.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.page-cover .cover-inner, .page-back .cover-inner{position:relative;z-index:1}

/* drawer above stage */
.drawer{z-index:80 !important; pointer-events:auto}
.drawer[hidden]{display:none !important}
.chrome{z-index:70}


/* fullscreen / immersive chip */
.chip-fs{min-width:34px; text-align:center; font-size:14px; line-height:1;}
html.is-phone-land .chip-fs, html.is-phone .chip-fs{display:inline-flex}
.chip-fs{display:none}
@media (max-width:700px), ((max-height:520px) and (max-width:980px)){
  .chip-fs{display:inline-flex}
}


.nav-fs{display:none; width:auto; height:auto; min-width:34px; border-radius:999px; padding:6px 10px; font-size:14px;}
html.is-phone .nav-fs, html.is-phone-land .nav-fs{display:inline-flex; align-items:center; justify-content:center;}
html.is-immersive .nav-fs{display:inline-flex; border-color:var(--lime); color:var(--lime);}

/* Immersive: hide chrome, keep nav in normal flow so stage keeps height */
html.is-immersive .chrome{display:none !important;}
html.is-immersive .app{grid-template-rows:1fr auto;}
html.is-immersive .nav{padding:4px 10px 6px; gap:8px;}
html.is-immersive .nav button{width:34px; height:34px; font-size:22px;}
html.is-immersive .stage{padding:2px 4px; min-height:0;}
html.is-immersive .book{max-height:100%;}

/* Phone-land typography: keep cover/text inside short pages */
html.is-phone-land .page-cover h1{
  font-size:clamp(20px, min(10vh, calc((var(--page-w) - 40px) / 6.2)), 36px); line-height:.9;
}
html.is-phone-land .page-back h2{
  font-size:clamp(16px, min(8vh, calc((var(--page-w) - 40px) / 11)), 28px); line-height:.9;
}
html.is-phone-land .cover-sub{font-size:clamp(11px, 3.2vh, 15px); letter-spacing:.16em; margin:4px 0 6px;}
html.is-phone-land .cover-dek{font-size:clamp(10px, 2.6vh, 12px); margin-bottom:8px; max-width:36ch;}
html.is-phone-land .cover-kicker,.is-phone-land .cover-meta{font-size:7px;}
html.is-phone-land .cover-content{padding:10px 12px 14px;}
html.is-phone-land .page-toc h2,
html.is-phone-land .page-right h2{font-size:clamp(18px, 5.5vh, 28px);}
html.is-phone-land .page-toc{padding:16px 14px 18px;}
html.is-phone-land .page-right{padding:16px 14px 18px;}
html.is-phone-land .desc,.is-phone-land .sub,.is-phone-land .dek{font-size:clamp(10px, 2.5vh, 12.5px); margin-bottom:8px;}
html.is-phone-land .layout-a .giant{font-size:clamp(36px, 12vh, 64px);}
html.is-phone-land .layout-b .watermark{font-size:clamp(64px, 22vh, 110px); top:24px;}
html.is-phone-land .layout-c .side-num{font-size:clamp(28px, 9vh, 44px); padding:14px 4px;}
html.is-phone-land .stats{padding-top:8px; margin-bottom:6px;}
html.is-phone-land .rh,.is-phone-land .folio{top:8px; bottom:8px; left:12px; right:12px; font-size:7px;}
html.is-phone-land .folio .n{font-size:clamp(12px, 3vh, 16px);}

/* Portrait phone: fill width, tighten chrome a bit more */
html.is-phone:not(.is-phone-land) .page-cover h1{
  font-size:clamp(26px, calc((var(--page-w) - 52px) / 6.2), 48px);
}
html.is-phone:not(.is-phone-land) .cover-sub{
  font-size:clamp(11px, 3.4vw, 15px); letter-spacing:.14em;
}
html.is-phone .page-letter h2, html.is-phone .page-credits h2{
  font-size:clamp(22px, calc((var(--page-w) - 32px) / 10), 36px); max-width:100%;
}
html.is-phone:not(.is-phone-land) .cover-content{padding:18px 16px 24px;}


/* ===== iOS / lite memory safety ===== */
html.is-lite .chrome,
html.is-phone .chrome,
html.is-ios .chrome{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(7,7,10,.92);
}
html.is-lite .drawer,
html.is-phone .drawer,
html.is-ios .drawer{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.is-lite .page,
html.is-phone .page,
html.is-ios .page{
  box-shadow:none;
  will-change:auto !important;
  filter:none !important;
}
html.is-lite .page.is-flip-out,
html.is-lite .page.is-flip-in,
html.is-phone .page.is-flip-out,
html.is-phone .page.is-flip-in,
html.is-ios .page.is-flip-out,
html.is-ios .page.is-flip-in{
  animation:none !important;
}
html.is-lite .reveal-child,
html.is-phone .reveal-child{
  animation:none !important;
}
html.is-lite .book,
html.is-phone .book,
html.is-ios .book{
  perspective:none !important;
  transform-style:flat !important;
}
html.is-lite .book::before,
html.is-phone .book::before{display:none}
/* Pages far away stay out of layout via [hidden]/display:none from JS */
.page[hidden]{display:none !important}
.page.is-kept:not(.is-active){visibility:hidden; pointer-events:none; opacity:0}


/* Letter + credits (Zeiknawn masthead) */
.page-letter, .page-credits{
  padding: clamp(28px, 6vh, 52px) clamp(18px, 5vw, 36px) clamp(36px, 7vh, 56px);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255,31,143,.12), transparent 55%),
    radial-gradient(100% 70% at 100% 100%, rgba(214,255,0,.08), transparent 50%),
    #07070a;
  display:flex; flex-direction:column; justify-content:space-between;
}
.letter-inner, .credits-inner{ max-width: 42ch; }
.page-letter h2, .page-credits h2{
  font-family: Syne, sans-serif; font-weight:800;
  font-size: clamp(26px, 7vw, 40px); letter-spacing:-.03em;
  line-height:1.02; margin: 8px 0 14px;
}
.page-letter .dek{ font-size: 13.5px; color: var(--text2); margin-bottom: 14px; }
.page-letter p, .page-credits p{ font-size: 12.5px; line-height:1.55; color: var(--text2); margin-bottom: 10px; }
.page-letter .sign{ margin-top: 18px; font-family: IBM Plex Mono, monospace; font-size: 11px; color: var(--text); }
.page-letter .sign span{ color: var(--mute); }
.credits-list{ list-style:none; padding:0; margin: 12px 0 18px; }
.credits-list li{
  display:flex; justify-content:space-between; gap:12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.credits-list em{ color: var(--mute); font-style: normal; }
.credits-list b{ font-family: Syne, sans-serif; letter-spacing: -.01em; }
.credits-tag{
  font-family: IBM Plex Mono, monospace; font-size: 11px;
  color: var(--accent, #ff1f8f); margin-top: 8px;
}
html.is-phone .page-letter, html.is-phone .page-credits{ padding: 18px 14px 22px; }
html.is-lite .page-letter, html.is-lite .page-credits{
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ===== CURSO 3D extras ===== */
.tl{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em}
.tl b{font-weight:700}
.tool-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px;max-height:42%;overflow:auto}
.tool-list details{border:1px solid var(--line);border-radius:4px;padding:6px 8px;background:rgba(255,255,255,.02)}
.tool-list summary{cursor:pointer;font-size:11px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tool-list summary::-webkit-details-marker{display:none}
.tool-list details[open]{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.tool-list .meta{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--mute);line-height:1.45;margin-top:6px}
.tool-list .meta a{color:var(--c);text-decoration:underline;text-underline-offset:2px}
.outdated{color:#ff4d6d;font-weight:800;letter-spacing:.08em}
.badge-go{background:rgba(214,255,0,.15);color:var(--lime);border:1px solid rgba(214,255,0,.35);padding:2px 6px;border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:9px}
.badge-warn{background:rgba(255,200,87,.12);color:var(--gold);border:1px solid rgba(255,200,87,.35);padding:2px 6px;border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:9px}
.badge-stop{background:rgba(255,77,109,.12);color:#ff4d6d;border:1px solid rgba(255,77,109,.35);padding:2px 6px;border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:9px}
.steps{list-style:none;display:flex;flex-direction:column;gap:6px;margin:8px 0 12px;padding:0}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;font-size:clamp(11px,2.8vw,13px);line-height:1.4;color:var(--text2)}
.steps .n{font-family:Syne,sans-serif;font-weight:800;color:var(--c);font-size:14px}
.summary-box{border-left:3px solid var(--lime);padding:8px 10px;margin:8px 0 12px;background:rgba(214,255,0,.05);font-size:clamp(11px,2.9vw,13.5px);line-height:1.45;color:var(--text)}
.empieza{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;border:1px solid var(--lime);border-radius:999px;color:var(--lime);font-family:Syne,sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.feedback q{display:block;font-style:normal;font-size:12px;line-height:1.4;color:var(--text2);padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.rating{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.rating span{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:Syne,sans-serif;font-weight:800;color:var(--c)}
.page-dense{overflow:auto}
.page-dense .desc{max-width:44ch}
html.is-phone .tool-list{max-height:48%}


/* title-fit: clamp decorative */
html.is-phone .layout-b .watermark{
  right: 0; left: auto; max-width: 70%;
  font-size: clamp(64px, calc(var(--page-w) * 0.42), 140px) !important;
  overflow: hidden;
}
html.is-phone .layout-d .genre-stamp{
  right: 4px; top: 48px; transform: rotate(10deg);
  font-size: clamp(22px, calc(var(--page-w) * 0.12), 40px) !important;
  max-width: 45%; overflow: hidden;
}
.page-cover h1, .page-back h2, .page-right h2, .page-toc h2, .page-letter h2{
  box-sizing: border-box;
}


/* ===== title-fit v2 (QA pass) ===== */
.page-cover h1{
  font-size: clamp(22px, calc((var(--page-w, 90vw) - 64px) / 6.6), 72px) !important;
  letter-spacing: -0.06em;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.page-back h2{
  font-size: clamp(18px, calc((var(--page-w, 90vw) - 64px) / 10), 56px) !important;
  letter-spacing: -0.05em;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
html.is-phone .page-back h2{
  font-size: clamp(16px, calc((var(--page-w) - 48px) / 10.5), 36px) !important;
}
html.is-phone:not(.is-phone-land) .page-cover h1{
  font-size: clamp(24px, calc((var(--page-w) - 56px) / 6.6), 44px) !important;
}
html.is-phone-land .page-cover h1{
  font-size: clamp(18px, min(9.5vh, calc((var(--page-w) - 48px) / 6.6)), 32px) !important;
}
html.is-phone-land .page-back h2{
  font-size: clamp(16px, min(8vh, calc((var(--page-w) - 48px) / 11)), 28px) !important;
}
html.is-phone .page-right h2,
html.is-phone .page-toc h2,
html.is-phone .page-letter h2{
  font-size: clamp(16px, calc((var(--page-w) - 40px) / 12), 32px) !important;
  overflow-wrap: anywhere;
}
.cover-content{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}