/* Acid Lab: section styles. Tokens from brand.json. Mobile first. */
:root{
  --acid:#C8F135; --pink:#FF3D9A; --ink:#111111; --void:#0B0B0B; --paper:#F3F1EC; --tile:#DDE2E3; --red:#D7341F;
  --grey:#8C918F; --grey-d:#5E6361;
  --gut:16px; --max:1240px;
  --f-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-body:'Be Vietnam Pro', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
  --lead-d:.86;
  --nav-h:0px;
}
html.lang-vi{ --lead-d:1.0 }
@media (min-width:900px){ :root{ --gut:40px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-weight:500; line-height:1.35; overflow-x:hidden }
img,video,svg{ display:block; max-width:100% }
a{ color:inherit }
button{ font:inherit; color:inherit; cursor:pointer }
:focus-visible{ outline:3px solid var(--pink); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- type ---------- */
.anton{ font-family:var(--f-display); text-transform:uppercase; line-height:var(--lead-d); font-weight:400; letter-spacing:-.005em }
.mono{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-weight:700 }
.kicker{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:13px; display:inline-block }
.h-xl{ font-size:clamp(48px, 13vw, 168px) }
.h-l{ font-size:clamp(40px, 9vw, 112px) }
.h-m{ font-size:clamp(32px, 6vw, 72px) }
.lede{ font-size:clamp(18px, 2.2vw, 24px); max-width:34em }
p{ margin:0 0 .8em }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut) }

/* ---------- textures ---------- */
.ht{ background-image:radial-gradient(rgba(17,17,17,.28) 1.2px, transparent 1.7px); background-size:8px 8px }
.ht-light{ background-image:radial-gradient(rgba(243,241,236,.16) 1.2px, transparent 1.7px); background-size:8px 8px }
.tile{ background-color:#E6EAEA; background-image:linear-gradient(#C3CACB 2px,transparent 2px),linear-gradient(90deg,#C3CACB 2px,transparent 2px); background-size:44px 44px }

/* ---------- parts: tapes, stamps, chips, spec bar ---------- */
.tape{ display:inline-block; border:3px solid var(--ink); padding:12px 16px 9px; color:var(--ink) }
.tape--acid{ background-color:var(--acid) }
.tape--pink{ background-color:var(--pink) }
.tape--paper{ background-color:var(--paper) }
.tape .anton{ display:block }
.stamp{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border:3px solid var(--ink); padding:8px 12px; font-size:13px; color:var(--ink); line-height:1.1; white-space:nowrap }
.stamp--proven{ background:var(--acid) }
.stamp--reported{ background:var(--pink) }
.stamp--animal{ background:var(--paper) }
.stamp--theory{ background:var(--paper); border-style:dashed }
.stamp--pending{ background:transparent; border:2px dashed var(--grey); color:var(--grey-d); font-weight:400 }
.stamp--lg{ font-size:clamp(16px, 2.6vw, 30px); border-width:4px; padding:12px 18px }
.chip{ display:inline-block; background:var(--ink); color:var(--acid); font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; padding:6px 9px }
.chip--pink{ color:var(--pink) }
.chip--paper{ background:var(--paper); color:var(--ink); border:2px solid var(--ink) }
.spec-bar{ display:inline-block; align-self:flex-start; max-width:100%; background:var(--ink); color:var(--paper); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px; line-height:1.5; padding:7px 10px }
.spec-bar b{ color:var(--acid); font-weight:700 }
.claim{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px }
.claim p{ margin:0; font-weight:800 }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px;
  text-decoration:none; border:3px solid var(--ink); padding:13px 18px; background:var(--acid); color:var(--ink); transition:background .15s; will-change:transform }
.btn:hover{ background:var(--pink) }
.btn--ghost{ background:transparent; border-color:currentColor }
.btn--ghost:hover{ background:var(--acid); color:var(--ink); border-color:var(--ink) }
.btn--dark{ background:var(--ink); color:var(--paper) }
.btn--dark:hover{ background:var(--acid); color:var(--ink) }
.btn .arr{ display:inline-block; transition:transform .15s }
.btn:hover .arr{ transform:translateX(4px) }
.link-mono{ font-family:var(--f-mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:13px; text-decoration:none; border-bottom:3px solid var(--acid); padding-bottom:2px }
.link-mono:hover{ border-color:var(--pink) }

/* ---------- parent site header (placeholder) ---------- */
.parent-bar{ background:var(--paper); color:var(--ink); border-bottom:1px solid rgba(17,17,17,.15); font-size:13px }
.parent-bar .wrap{ display:flex; align-items:center; gap:14px; height:40px }
.parent-logo{ font-family:var(--f-display); font-size:22px; letter-spacing:.02em; text-decoration:none; line-height:1 }
.parent-note{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-d); display:none }
.parent-menu{ margin-left:auto; display:flex; gap:14px }
.parent-menu a{ text-decoration:none; font-weight:500 }
.parent-menu a[aria-current]{ font-weight:800; box-shadow:inset 0 -3px 0 var(--acid) }
@media (min-width:700px){ .parent-note{ display:inline } .parent-menu{ gap:24px } }

/* Menu always on top (sits under the Ly's Brain bar when served in the hub) */
#al-top{ position:sticky; top:var(--lbb-h,0px); z-index:60 }
/* ---------- Acid Lab sub-nav ---------- */
.al-nav{ position:sticky; top:var(--lbb-h,0px); z-index:50; background:var(--ink); color:var(--paper); border-bottom:3px solid var(--acid) }
.al-nav__row{ display:flex; align-items:center; gap:10px; height:48px }
.al-logo{ font-family:var(--f-display); text-transform:uppercase; font-size:24px; line-height:1; text-decoration:none; color:var(--paper); white-space:nowrap }
.al-logo span{ color:var(--acid) }
.al-ctl{ margin-left:auto; display:flex; gap:6px; align-items:center }
.seg{ display:inline-flex; border:2px solid var(--paper) }
.seg button{ background:transparent; border:0; color:var(--paper); font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.08em; padding:5px 8px }
.seg button[aria-pressed="true"]{ background:var(--acid); color:var(--ink) }
.calm-btn{ background:transparent; border:2px solid var(--paper); color:var(--paper); font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; white-space:nowrap }
.calm-btn[aria-pressed="true"]{ background:var(--pink); color:var(--ink); border-color:var(--pink) }
.al-links{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:0 var(--gut) 8px; margin:0 calc(var(--gut) * -1); -webkit-overflow-scrolling:touch }
.al-links::-webkit-scrollbar{ display:none }
.al-links a{ flex:0 0 auto; font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:6px 9px; border:2px solid transparent; color:var(--paper); white-space:nowrap }
.al-links a:hover{ border-color:var(--paper) }
.al-links a[aria-current]{ background:var(--acid); color:var(--ink) }
.al-ctl--desk{ display:none !important }
@media (min-width:1100px){
  .al-nav .wrap{ display:flex; align-items:center; gap:18px }
  .al-nav__row{ flex:0 0 auto; order:0 }
  .al-links{ order:1; padding:0; margin:0; flex:1; justify-content:center }
  .al-ctl{ order:2; margin-left:0 }
  .al-nav__row .al-ctl{ display:none }
  .al-ctl--desk{ display:flex !important }
}

/* ---------- page transition (title card) ---------- */
.pt{ position:fixed; inset:0; z-index:200; background:var(--void); color:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut); pointer-events:none; visibility:hidden }
.pt__txt{ font-family:var(--f-display); text-transform:uppercase; line-height:var(--lead-d); font-size:clamp(48px, 12vw, 150px); max-width:var(--max); width:100%; margin:0 auto }
.pt__bar{ height:clamp(12px, 2vw, 22px); background:var(--acid); width:100%; max-width:var(--max); margin:18px auto 0; transform-origin:0 50%; transform:scaleX(0) }
html.pt-enter .pt{ visibility:visible; animation:ptOut .32s steps(6) .42s forwards }
html.pt-enter .pt__bar{ transform:scaleX(1) }
@keyframes ptBar{ to{ transform:scaleX(1) } }
@keyframes ptOut{ 0%{ clip-path:inset(0 0 0 0) } 99%{ clip-path:inset(0 0 100% 0); visibility:visible } 100%{ clip-path:inset(0 0 100% 0); visibility:hidden } }
html.pt-leave .pt{ visibility:visible }
html.pt-leave .pt__bar{ animation:ptBar .22s steps(6) forwards }
html.calm .pt{ display:none }

/* ---------- title cards (sections) ---------- */
.tcard{ position:relative; height:100vh; height:100svh; background:var(--void); color:var(--paper); overflow:hidden }
.tcard__inner{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut) }
.tcard__face{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut) }
.tcard__face--b{ background:var(--paper); color:var(--ink); visibility:hidden }
.tcard__txt{ font-family:var(--f-display); text-transform:uppercase; line-height:.94; font-size:clamp(64px, 21vw, 200px); max-width:var(--max); width:100%; margin:0 auto }
.tcard__bar{ height:clamp(14px, 2.2vw, 26px); background:var(--acid); max-width:var(--max); width:100%; margin:20px auto 0; transform-origin:0 50% }
.tcard__face--b .tcard__bar{ background:var(--ink) }
.tcard__meta{ position:absolute; left:var(--gut); bottom:22px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7 }
html.calm .tcard, html.no-motion .tcard{ height:auto; min-height:0 }
html.calm .tcard__face, html.no-motion .tcard__face{ position:relative; padding:72px var(--gut) }
html.calm .tcard__face--b, html.no-motion .tcard__face--b{ visibility:visible }

/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--void); color:var(--paper); overflow:hidden; min-height:calc(100svh - 88px) }
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 60% }
.hero__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 38%, rgba(11,11,11,.15) 62%, rgba(11,11,11,.85) 100%) }
.hero__inner{ position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; padding-top:22px; padding-bottom:40px; min-height:calc(100svh - 88px) }
.hero__title{ font-size:clamp(64px, 19vw, 230px); color:var(--paper); margin:6px 0 0 }
.hero__title .ln{ display:block; white-space:nowrap }
.hero__title .ln:last-child{ color:var(--acid) }
.hero__title .ch{ display:inline-block; will-change:transform }
.hero__kicker{ font-size:clamp(18px, 2.4vw, 26px); font-weight:800; max-width:22em; margin:0 }
.hero__tapes{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }
.hero__tapes .tape{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px, 5vw, 48px); line-height:1; padding:8px 12px 6px }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto }
.hero__ctas .btn--ghost{ color:var(--paper) }
.hero__vlabel{ position:absolute; right:var(--gut); bottom:14px; z-index:1; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; color:var(--grey); text-transform:uppercase }
.scroll-cue{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); opacity:.8 }
.scroll-cue i{ display:block; width:2px; height:28px; background:var(--acid); animation:cue 1.4s steps(4) infinite; transform-origin:50% 0 }
@keyframes cue{ 0%{ transform:scaleY(.2) } 100%{ transform:scaleY(1) } }
@media (min-width:900px){
  .hero__media{ left:auto; width:44%; }
  .hero__media::after{ background:linear-gradient(90deg, rgba(11,11,11,1) 0%, rgba(11,11,11,0) 35%, rgba(11,11,11,0) 80%, rgba(11,11,11,.6) 100%) }
  .hero__inner{ padding-top:48px; padding-bottom:56px }
  .hero__title{ font-size:clamp(90px, 13.5vw, 230px) }
}

/* ---------- PEPTIDE STORY ---------- */
.pep{ position:relative; background:var(--void); color:var(--paper) }
.pep__pin{ position:relative; height:100vh; height:100svh; display:grid; grid-template-rows:auto 1fr; overflow:hidden }
.pep__copy{ padding:22px var(--gut) 0; position:relative; z-index:2; min-height:230px }
.pep__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px }
.pep__steps{ position:relative; min-height:140px }
.pep__step{ position:absolute; left:0; right:0; top:0; font-size:clamp(22px, 3.2vw, 40px); font-weight:800; line-height:1.15; max-width:20em; visibility:hidden }
.pep__step.is-on{ visibility:visible }
.pep__step .hl{ background:var(--acid); color:var(--ink); padding:0 .15em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.pep__stage{ position:relative; min-height:0 }
.pep__stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.pep__end{ position:absolute; left:var(--gut); right:var(--gut); bottom:22px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:12px }
.pep__end .tape .anton{ font-size:clamp(40px, 9vw, 96px) }
.pep__end .claim p{ color:var(--paper); font-size:15px; max-width:26em }
.pep__counter{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid); border:2px solid var(--acid); padding:4px 8px; white-space:nowrap }
.pep__more{ color:var(--paper) }
.bead-chip rect{ fill:var(--ink) }
.bead-chip text{ font-family:var(--f-mono); font-weight:700; letter-spacing:.08em; fill:var(--acid) }
@media (min-width:900px){
  .pep__pin{ grid-template-rows:1fr; grid-template-columns:minmax(360px, 38%) 1fr }
  .pep__copy{ padding:72px 0 0 var(--gut); max-width:520px }
  .pep__steps{ min-height:200px }
  .pep__end{ left:var(--gut); bottom:56px; max-width:520px }
  .pep__end .claim p{ font-size:17px }
}
/* calm / static fallback */
html.calm .pep__pin, html.no-motion .pep__pin{ height:auto; display:block }
html.calm .pep__steps, html.no-motion .pep__steps{ min-height:0 }
html.calm .pep__step, html.no-motion .pep__step{ position:relative; visibility:visible; margin-bottom:14px }
html.calm .pep__stage, html.no-motion .pep__stage{ height:62vw; max-height:520px }
html.calm .pep__end, html.no-motion .pep__end{ position:relative; left:auto; right:auto; bottom:auto; padding:0 var(--gut) 56px }

/* ---------- EVIDENCE ---------- */
.ev{ background:var(--paper); padding:80px 0 96px; position:relative; overflow:hidden }
.ev__flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none }
.ev__head{ margin-bottom:36px }
.ev__head h2{ margin:10px 0 14px }
.ev__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0 }
.ev__row{ display:grid; grid-template-columns:1fr; gap:12px; padding:22px 0; border-top:3px solid var(--ink); align-items:center }
.ev__row:last-child{ border-bottom:3px solid var(--ink) }
.ev__row .stamp{ justify-self:start; transform-origin:30% 50% }
.ev__row p{ margin:0; font-size:clamp(17px, 2vw, 22px); max-width:30em }
.ev__num{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--grey-d) }
@media (min-width:900px){ .ev__row{ grid-template-columns:60px minmax(420px, 1fr) 1.2fr; gap:24px; padding:30px 0 } }

/* ---------- TEXT WALL ---------- */
.wall{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; padding:30px 0 }
.wall__row{ white-space:nowrap; font-family:var(--f-display); text-transform:uppercase; font-size:clamp(52px, 11vw, 150px); line-height:1; will-change:transform }
.wall__row:nth-child(3n+2){ color:var(--acid) }
.wall__row:nth-child(3n){ -webkit-text-stroke:2px var(--paper); color:transparent }
.wall__row span{ padding-right:.35em }
.wall__over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:0 var(--gut); z-index:2; text-align:center }
.wall__over .tape{ font-size:clamp(20px, 3.2vw, 36px); font-weight:800; line-height:1.18; max-width:24em; transform:rotate(-1.5deg); box-shadow:8px 8px 0 var(--ink) }
.wall__over .chip{ font-size:12px }

/* ---------- EPISODE ---------- */
.epi{ background:var(--tile); padding:80px 0 96px; position:relative; overflow:hidden }
.epi__grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center }
.epi__card{ position:relative; max-width:420px; width:100%; justify-self:center; perspective:900px }
.epi__cover{ position:relative; border:4px solid var(--ink); background:var(--void); aspect-ratio:9/16; overflow:hidden; transform-style:preserve-3d; transition:transform .2s; box-shadow:12px 12px 0 var(--ink) }
.epi__cover img{ width:100%; height:100%; object-fit:cover }
.epi__prev{ position:absolute; right:-10px; bottom:-26px; width:42%; border:4px solid var(--ink); background:var(--void); aspect-ratio:9/16; overflow:hidden; transform:rotate(4deg); box-shadow:6px 6px 0 var(--ink); z-index:2 }
.epi__prev video{ width:100%; height:100%; object-fit:cover }
.epi__prev .chip{ position:absolute; left:0; top:0; font-size:9px; padding:4px 6px }
.epi__num{ position:absolute; left:-12px; top:18px; z-index:3; transform:rotate(-4deg) }
.epi__num .anton{ font-size:clamp(34px, 6vw, 56px); color:var(--acid) }
.epi__copy h2{ margin:10px 0 14px }
.epi__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px }
.epi__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px }
@media (min-width:900px){ .epi__grid{ grid-template-columns:420px 1fr; gap:80px } .epi__prev{ right:-60px } }

/* video dialog */
.vdlg{ border:4px solid var(--acid); padding:0; background:var(--void); max-width:min(92vw, 460px); width:100% }
.vdlg::backdrop{ background:rgba(11,11,11,.88) }
.vdlg video{ width:100%; max-height:80vh; background:#000 }
.vdlg__bar{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; color:var(--paper) }
.vdlg__bar button{ background:var(--acid); border:2px solid var(--ink); font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; color:var(--ink) }

/* ---------- SPECIMEN SHELF ---------- */
.shelf{ background:var(--paper); position:relative; overflow:hidden }
.shelf__pin{ padding:80px 0 72px }
.shelf__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px }
.shelf__head h2{ margin:10px 0 10px }
.shelf__track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px var(--gut) 26px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain }
.shelf__track::-webkit-scrollbar{ height:6px }
.shelf__track::-webkit-scrollbar-thumb{ background:var(--ink) }
.shelf__hint{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-d) }
html.shelf-pinned .shelf__track{ overflow:visible; scroll-snap-type:none; width:max-content }
.vcard{ position:relative; flex:0 0 auto; width:216px; scroll-snap-align:start; border:3px solid var(--ink); background:var(--tile); display:flex; flex-direction:column; text-decoration:none; color:var(--ink); transform-style:preserve-3d; transition:box-shadow .18s; will-change:transform }
.vcard:hover{ box-shadow:8px 8px 0 var(--ink) }
.vcard__top{ display:flex; justify-content:space-between; background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; padding:6px 8px }
.vcard__top b{ color:var(--acid); font-weight:700 }
.vcard__art{ position:relative; height:270px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; overflow:hidden }
.vcard__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vcard__vial{ width:96px; transition:transform .35s cubic-bezier(.3,1.6,.5,1); transform-origin:50% 90% }
.vcard:hover .vcard__vial{ transform:translateY(-10px) rotate(-7deg) scale(1.06) }
.vcard__body{ border-top:3px solid var(--ink); background:var(--paper); padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; flex:1 }
.vcard__name{ font-family:var(--f-display); text-transform:uppercase; font-size:26px; line-height:1 }
.vcard__line{ font-size:13px; margin:0 }
.vcard .stamp{ font-size:10px; padding:5px 7px; border-width:2px; align-self:flex-start }
.vcard--live{ background:var(--acid) }
.vcard__soon{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-d) }
.vial-liquid{ transition:transform .4s }
.vcard:hover .vial-liquid{ animation:slosh .9s ease-in-out }
@keyframes slosh{ 0%{transform:skewY(0)} 25%{transform:skewY(-6deg)} 55%{transform:skewY(5deg)} 80%{transform:skewY(-2deg)} 100%{transform:skewY(0)} }
@media (min-width:900px){ .vcard{ width:250px } .vcard__art{ height:300px } }

/* ---------- EXPERIMENT ---------- */
.exp{ background:var(--void); color:var(--paper); padding:80px 0 96px; position:relative; overflow:hidden }
.exp__grid{ display:grid; grid-template-columns:1fr; gap:40px }
.exp__head h2{ margin:10px 0 14px }
.exp__img{ border:3px solid var(--paper); aspect-ratio:4/5; overflow:hidden; max-width:360px }
.exp__img img{ width:100%; height:100%; object-fit:cover }
.tl{ position:relative; list-style:none; margin:0; padding:0 0 0 30px }
.tl__line{ position:absolute; left:8px; top:6px; bottom:6px; width:3px; background:rgba(243,241,236,.18) }
.tl__fill{ position:absolute; left:8px; top:6px; bottom:6px; width:3px; background:var(--acid); transform-origin:50% 0 }
.tl__item{ position:relative; padding:0 0 30px }
.tl__item::before{ content:''; position:absolute; left:-29px; top:6px; width:16px; height:16px; background:var(--void); border:3px solid var(--acid) }
.tl__item.is-now::before{ background:var(--acid) }
.tl__when{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--acid) }
.tl__title{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(28px, 4.5vw, 48px); line-height:var(--lead-d); margin:4px 0 6px }
.tl__body{ margin:0; font-size:17px; max-width:28em; color:#d9d7d1 }
@media (min-width:900px){ .exp__grid{ grid-template-columns:1fr 1.2fr; gap:80px } }

/* ---------- FOOTER ---------- */
.foot{ background:var(--acid); color:var(--ink); padding:56px 0 30px; border-top:4px solid var(--ink) }
.foot__big{ font-size:clamp(44px, 11vw, 140px); margin:0 0 6px }
.foot__line{ font-weight:800; font-size:clamp(20px, 3vw, 32px); margin:0 0 22px }
.foot__vi{ font-size:16px; margin:0 0 28px }
.foot__grid{ display:grid; grid-template-columns:1fr; gap:24px; border-top:3px solid var(--ink); padding-top:22px }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 16px }
.foot__links a{ font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none }
.foot__links a:hover{ text-decoration:underline }
.foot__small{ font-size:13px; margin:0 }
@media (min-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr } }

/* ---------- AMINO ACIDS PAGE ---------- */
.aa-intro{ background:var(--paper); padding:72px 0 64px }
.aa-intro__grid{ display:grid; grid-template-columns:1fr; gap:40px }
.aa-intro h1{ margin:10px 0 18px }
.aa-stats{ display:grid; grid-template-columns:repeat(3, 1fr); border:3px solid var(--ink) }
.aa-stat{ padding:14px 10px; border-left:3px solid var(--ink) }
.aa-stat:first-child{ border-left:0 }
.aa-stat__n{ font-family:var(--f-display); font-size:clamp(52px, 11vw, 120px); line-height:.9 }
.aa-stat__l{ font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-top:6px; display:block }
.aa-stat--ess{ background:var(--acid) }
.aa-stat--non{ background:var(--pink) }
.ess-box{ border:3px solid var(--ink); background:var(--tile); padding:20px 16px }
.ess-box h2{ margin:0 0 14px }
.ess-names{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 16px }
@media (min-width:900px){ .aa-intro__grid{ grid-template-columns:1.1fr 1fr; gap:64px } .ess-box{ padding:28px } }

.aa-set{ background:var(--void); color:var(--paper); padding:72px 0 80px }
.aa-set__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px }
.aa-set__head h2{ margin:10px 0 0 }
.filters{ display:flex; gap:0; border:3px solid var(--paper) }
.filters button{ background:transparent; border:0; color:var(--paper); font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:10px 14px }
.filters button[aria-pressed="true"]{ background:var(--acid); color:var(--ink) }
.legend{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-top:14px }
.legend i{ display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:-2px; margin-right:6px }
.aa-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 8px }
@media (min-width:600px){ .aa-grid{ grid-template-columns:repeat(5, 1fr) } }
@media (min-width:1000px){ .aa-grid{ grid-template-columns:repeat(10, 1fr); gap:28px 12px } }
.aa-cell{ background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--paper); transition:opacity .25s, filter .25s }
.aa-cell.is-dim{ opacity:.14; filter:grayscale(1) }
.aa-cell__name{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; text-align:center; opacity:.8; line-height:1.2; min-height:2.4em }

/* glass bead (HTML) */
.bead{ --c1:#F6FFC9; --c2:var(--acid); --c3:#7E9D10; --c4:#2f3a04; --glow:rgba(200,241,53,.45);
  position:relative; width:64px; height:64px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 7%, transparent 13%), radial-gradient(circle at 40% 36%, var(--c1) 0, var(--c2) 36%, var(--c3) 76%, var(--c4) 100%);
  box-shadow:0 0 22px var(--glow), inset -5px -8px 14px rgba(0,0,0,.28), inset 3px 4px 8px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center }
.aa-cell .bead, .palette .bead{ transition:transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s }
.bead--pink{ --c1:#FFD6EA; --c2:var(--pink); --c3:#B0195F; --c4:#4a0828; --glow:rgba(255,61,154,.45) }
.bead__code{ font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--ink); background:rgba(243,241,236,.82); padding:1px 4px; position:relative; z-index:1 }
.bead__one{ position:absolute; right:-4px; top:-4px; background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:10px; font-weight:700; padding:1px 4px; border:1px solid var(--paper) }
.aa-cell:hover .bead, .aa-cell:focus-visible .bead{ transform:scale(1.12) rotate(-6deg); box-shadow:0 0 36px var(--glow), inset -5px -8px 14px rgba(0,0,0,.28) }
@media (min-width:600px){ .bead{ width:72px; height:72px } }

/* amino dialog */
.aa-dlg{ border:4px solid var(--ink); padding:0; background:var(--paper); color:var(--ink); width:min(92vw, 520px); max-height:90vh }
.aa-dlg::backdrop{ background:rgba(11,11,11,.82) }
.aa-dlg__top{ display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:var(--paper); padding:8px 12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase }
.aa-dlg__top button{ background:var(--acid); color:var(--ink); border:2px solid var(--paper); font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px }
.aa-dlg__head{ display:flex; gap:16px; align-items:center; padding:20px 16px 16px; border-bottom:3px solid var(--ink) }
.aa-dlg__head.is-ess{ background:var(--acid) }
.aa-dlg__head.is-non{ background:var(--pink) }
.aa-dlg__head .bead{ width:86px; height:86px }
.aa-dlg__name{ font-size:clamp(34px, 8vw, 54px); margin:0 }
.aa-dlg__codes{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.aa-dlg__body{ padding:18px 16px 20px; display:flex; flex-direction:column; gap:14px }
.aa-dlg__lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-d); display:block; margin-bottom:4px }
.aa-dlg__job{ font-size:20px; font-weight:800; margin:0; line-height:1.25 }
.foods{ display:flex; gap:8px; flex-wrap:wrap }
.foods span{ border:2px solid var(--ink); padding:5px 10px; font-weight:800; background:var(--tile) }
.aa-dlg__note{ font-size:12px; color:var(--grey-d); margin:0 }

/* builder */
.build{ background:var(--tile); padding:72px 0 88px }
.build__grid{ display:grid; grid-template-columns:1fr; gap:24px }
.build h2{ margin:10px 0 12px }
.build__panel{ border:3px solid var(--ink); background:var(--void); color:var(--paper); padding:16px; position:relative }
.build__meter{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap }
.build__len{ display:flex; align-items:flex-end; gap:10px }
.build__len .anton{ font-size:clamp(64px, 14vw, 120px); color:var(--acid); line-height:.85; min-width:2ch; font-variant-numeric:tabular-nums }
.build__len .mono{ font-size:11px; padding-bottom:6px }
.build__ctl{ display:flex; gap:8px }
.build__ctl button{ background:transparent; border:2px solid var(--paper); color:var(--paper); font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:7px 10px }
.build__ctl button:hover{ background:var(--paper); color:var(--ink) }
.chain{ display:flex; flex-wrap:wrap; align-items:center; gap:0; min-height:58px; padding:6px 0; position:relative }
.chain__empty{ font-size:14px; color:var(--grey) }
.chain .bead{ width:34px; height:34px; box-shadow:0 0 12px var(--glow), inset -3px -4px 8px rgba(0,0,0,.28) }
.chain .bead__code{ font-size:9px; padding:0 2px }
.chain__link{ width:8px; height:3px; background:var(--paper); opacity:.7; flex:0 0 auto }
.chain__break{ font-family:var(--f-mono); color:var(--pink); font-size:12px; padding:0 8px; flex:0 0 auto }
.build__seq{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--acid); word-break:break-all; margin-top:10px; min-height:1.4em }
.build__seq span{ color:var(--grey) }
.scale{ position:relative; margin:22px 0 6px; height:56px }
.scale__track{ position:absolute; left:0; right:0; top:22px; height:10px; background:linear-gradient(90deg, var(--acid) 0, var(--acid) 83.3%, var(--pink) 83.3%, var(--pink) 100%); border:2px solid var(--paper) }
.scale__lbl{ position:absolute; top:0; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase }
.scale__mark{ position:absolute; top:34px; transform:translateX(-50%); font-family:var(--f-mono); font-size:9px; letter-spacing:.04em; color:var(--grey); white-space:nowrap }
.scale__mark::before{ content:''; position:absolute; left:50%; top:-14px; width:2px; height:14px; background:var(--paper) }
.scale__you{ position:absolute; top:12px; width:14px; height:30px; margin-left:-7px; background:var(--paper); border:2px solid var(--ink); transition:left .35s cubic-bezier(.3,1.4,.5,1) }
.scale__note{ font-size:13px; color:#cfcdc7; margin:14px 0 0 }
.presets{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px }
.presets button{ background:var(--paper); border:3px solid var(--ink); font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 12px }
.presets button:hover, .presets button[aria-pressed="true"]{ background:var(--acid) }
.preset-note{ min-height:3.2em; font-size:15px; display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.preset-note p{ margin:0 }
.palette{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px 6px; margin-top:16px }
@media (min-width:600px){ .palette{ grid-template-columns:repeat(10, 1fr) } }
.palette button{ background:none; border:0; padding:4px 0; display:flex; flex-direction:column; align-items:center; gap:3px }
.palette .bead{ width:44px; height:44px }
.palette .bead__code{ font-size:10px }
.palette button:active .bead{ transform:scale(.9) }
.palette button:hover .bead{ transform:scale(1.1) }
.build__msg{ font-family:var(--f-mono); font-size:11px; color:var(--pink); min-height:1.4em; margin-top:8px; letter-spacing:.06em; text-transform:uppercase }
@media (min-width:900px){ .build__grid{ grid-template-columns:1fr 1.5fr; gap:48px } .build__panel{ padding:24px } .chain .bead{ width:40px; height:40px } }

/* ---------- STUB PAGES ---------- */
.stub{ background:var(--paper); padding:64px 0 96px; min-height:50vh }
.stub__box{ border:3px solid var(--ink); background:var(--tile); padding:24px 18px; max-width:760px; display:flex; flex-direction:column; gap:16px; align-items:flex-start }
.stub__box p{ font-size:clamp(18px, 2.4vw, 24px); font-weight:800; margin:0 }
.stub__soon{ transform:rotate(-3deg) }

/* ---------- calm mode / reduced motion ---------- */
html.calm *, html.calm *::before, html.calm *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important }
html.calm .scroll-cue i{ animation:none }

/* dialogs: always centered in the viewport, even if a browser opens them non-modally */
.aa-dlg[open], .vdlg[open]{ position:fixed; inset:0; margin:auto; height:fit-content; z-index:300; box-shadow:0 0 0 100vmax rgba(11,11,11,.78) }

/* ---------- v2: WHAT DO PEPTIDES DO ---------- */
.pep--paper{ background:var(--paper); color:var(--ink) }
.pep--paper .pep__steps{ min-height:118px }
.words{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.3; padding:8px 12px; margin-top:6px; max-width:30em; transform:rotate(-1deg) }
.words .mono{ font-size:10px }
.dodo__more{ padding-top:48px; padding-bottom:88px }
.dodo__more h3{ margin:0 0 20px }
.msg-cards{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:640px){ .msg-cards{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .msg-cards{ grid-template-columns:repeat(4, 1fr) } }
.msg-cards--one{ max-width:420px; grid-template-columns:1fr !important }
.msg-card{ border:3px solid var(--ink); background:var(--tile); padding:14px; display:flex; flex-direction:column; gap:10px }
.msg-card p{ margin:0; font-weight:800; font-size:17px; line-height:1.25 }
.msg-card__top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap }
.msg-card__name{ font-size:34px }
.msg-card .stamp{ font-size:11px; padding:6px 8px; border-width:2px }
.dots{ display:flex; flex-wrap:wrap; gap:3px }
.dots i{ width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #F8FFD6 0, var(--acid) 45%, #7E9D10 100%); box-shadow:0 0 0 1px rgba(17,17,17,.35) }
.dots i.p{ background:radial-gradient(circle at 35% 30%, #FFE0EF 0, var(--pink) 45%, #B0195F 100%) }
.dodo__line{ font-size:clamp(20px, 2.6vw, 28px); font-weight:800; margin:36px 0 14px; max-width:26em }
.dodo__bridge{ font-size:clamp(20px, 2.6vw, 28px); font-weight:800; margin:36px 0 0; max-width:26em; line-height:1.3 }
.dodo__bridge .hl{ background:var(--acid); padding:0 .15em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
@media (min-width:900px){ .pep--paper .pep__steps{ min-height:170px } }

/* ---------- v2: PEPTIDE LAB ---------- */
.lab-head h2{ margin:10px 0 12px }
.lab-grid{ margin-top:16px; align-items:start }
.lab-name{ font-size:clamp(28px, 6vw, 48px); color:var(--paper); text-align:right; line-height:1 }
.cb{ position:relative; display:inline-flex; background:none; border:0; padding:0; flex:0 0 auto; border-radius:50% }
button.cb{ cursor:pointer }
button.cb:hover .bead{ box-shadow:0 0 0 3px var(--paper), 0 0 14px var(--glow) }
.cb.is-picked .bead{ box-shadow:0 0 0 3px var(--paper), 0 0 18px var(--glow); transform:translateY(-4px) }
.cb.is-changed::after{ content:''; position:absolute; inset:-4px; border:3px solid var(--red); border-radius:50%; pointer-events:none }
.cb__tail{ position:absolute; left:50%; bottom:-11px; transform:translateX(-50%) rotate(-6deg); background:var(--pink); color:var(--ink); border:1.5px solid var(--ink);
  font-family:var(--f-mono); font-weight:700; font-size:7px; letter-spacing:.06em; padding:0 3px; line-height:1.4; z-index:2 }
.cb__tail--inline{ position:static; display:inline-block; transform:rotate(-6deg); margin-right:8px; font-size:9px }
.bead--lab{ --c1:#FFFFFF; --c2:#DDE2E3; --c3:#9AA3A5; --c4:#5E6361; --glow:rgba(221,226,227,.35); outline:2px solid var(--ink); outline-offset:-2px }
.bead--lab .bead__code{ font-size:8px }
.bead--xs{ display:inline-block; width:16px !important; height:16px !important; vertical-align:-3px; margin-right:8px }
.chain__cap{ display:inline-block; background:var(--paper); color:var(--ink); font-family:var(--f-mono); font-weight:700; font-size:10px; padding:2px 5px; border:2px solid var(--ink); flex:0 0 auto; margin-right:8px }
.chain--lab{ row-gap:14px }
.lab-legend{ display:flex; flex-direction:column; gap:6px; margin-top:12px; font-size:12px; color:#cfcdc7 }
.lab-legend:empty{ display:none }
.lab-legend > span{ display:flex; align-items:center }
.lab-hint{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--acid); margin:12px 0 0; min-height:1.2em }
.picker{ margin-top:14px; border:2px solid var(--paper); padding:10px }
.picker__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px }
.picker__head .mono{ font-size:11px; color:var(--paper) }
.picker__head button{ background:transparent; border:2px solid var(--paper); color:var(--paper); font-family:var(--f-mono); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 8px }
.picker__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px 4px }
@media (min-width:600px){ .picker__grid{ grid-template-columns:repeat(10, 1fr) } }
.picker__grid button{ background:none; border:0; padding:2px 0; display:flex; justify-content:center }
.picker__grid .bead{ width:38px; height:38px }
.picker__grid .bead__code{ font-size:9px }
.picker__grid button[aria-current] .bead{ box-shadow:0 0 0 3px var(--paper) }
.lab-side{ display:flex; flex-direction:column; gap:14px }
.lab-card__in{ position:relative; border:3px solid var(--ink); background:var(--paper); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:8px 8px 0 var(--ink); overflow:hidden }
.lab-card__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap }
.lab-card__name{ font-size:clamp(36px, 7vw, 56px) }
.lab-card__line{ margin:0; font-weight:800; font-size:18px; line-height:1.25 }
.lab-card__status{ margin:0; font-size:14px; border-top:2px solid var(--ink); padding-top:10px }
.lab-card__status .mono{ font-size:10px; margin-right:6px; background:var(--ink); color:var(--paper); padding:2px 5px }
.lab-card__in.is-void > *:not(.lab-card__void){ opacity:.28; filter:grayscale(1) }
.lab-card__void{ position:absolute; left:-10%; right:-10%; top:42%; text-align:center; background:var(--red); color:var(--ink); border-block:3px solid var(--ink);
  font-size:clamp(24px, 5vw, 36px); padding:6px 0 4px; transform:rotate(-8deg) }
.lab-card__empty{ border:3px dashed var(--grey-d); padding:24px 16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.lab-card__empty .anton{ font-size:48px; color:var(--grey-d) }
.lab-card__empty p{ margin:0; font-weight:800 }
.lab-banner{ background:var(--red); color:var(--ink); border:3px solid var(--ink); padding:14px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; box-shadow:6px 6px 0 var(--ink) }
.lab-banner[hidden]{ display:none }
.lab-banner__big{ margin:0; font-weight:800; font-size:19px; line-height:1.25 }
.lab-banner__lesson{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-size:clamp(24px, 4.4vw, 34px); line-height:1.02; background:var(--paper); padding:6px 8px 4px; border:3px solid var(--ink) }
.lab-disclaim{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; margin:0; border-left:6px solid var(--ink); padding-left:10px }
.sand{ margin-top:72px; border-top:4px solid var(--ink); padding-top:40px }
.sand h3{ margin:0 0 10px }
.challenges button{ background:var(--paper); font-size:11px }
.chal-hint{ min-height:1.4em; font-size:15px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center }
.chal-hint:empty{ display:none }
.built{ align-self:flex-start; transform:rotate(-3deg) }
.built .anton{ font-size:clamp(32px, 7vw, 54px) }
.lab-nomatch{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-d); margin:0 }
.lab-capnote{ font-size:11px; margin:0 }
html.calm .cb.is-picked .bead{ transform:none }

.nocase, .vcard__name, .presets button, .lab-name{ text-transform:none !important }
.dodo__more h3, .sand h3{ line-height:.95 }
.pep--paper .pep__step{ font-size:clamp(21px, 2.4vw, 32px) }
@media (min-width:900px){ .pep--paper .pep__steps{ min-height:220px } }
html.lang-vi .lab-banner__lesson, html.lang-vi .lab-card__void{ line-height:1.18 }
html.calm #lock-stage, html.no-motion #lock-stage{ height:min(105vw, 640px); max-height:none }
html.lang-vi .dodo__more h3, html.lang-vi .sand h3{ line-height:1.05 }

/* scroll cue on title cards and the hero: tells people what to do next */
.tcard__scroll,.hero__scroll{ position:absolute; left:50%; top:calc(100svh - 170px); transform:translateX(-50%); z-index:3; background:var(--ink); color:var(--acid); border:2px solid var(--acid); font-family:var(--f-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; white-space:nowrap }
.tcard__scroll span,.hero__scroll span{ display:inline-block; animation:al-bob 1.1s ease-in-out infinite }
@keyframes al-bob{ 0%,100%{ transform:translateY(-2px) } 50%{ transform:translateY(4px) } }
html.calm .tcard__scroll, html.no-motion .tcard__scroll{ display:none }

/* ---------- v3: SPECIMENS PAGE (shelf grid) ---------- */
.shelfp{ background:var(--paper); padding:56px 0 88px }
.shelfp__intro{ font-size:clamp(20px, 2.6vw, 30px); font-weight:800; margin:10px 0 18px }
.shelfp__intro .hl{ background:var(--acid); padding:0 .15em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.filters--light{ border-color:var(--ink); flex-wrap:wrap; margin-bottom:24px; display:inline-flex }
.filters--light button{ color:var(--ink) }
.filters--light button[aria-pressed="true"]{ background:var(--ink); color:var(--acid) }
.shelf-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }
@media (min-width:640px){ .shelf-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px } }
@media (min-width:1000px){ .shelf-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) } }
@media (min-width:1280px){ .shelf-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)) } }
.shelf-grid .vcard{ width:auto }
.shelf-grid .vcard__art{ height:220px }
.shelf-grid .vcard__vial{ width:84px }
.shelf-grid .vcard__name{ font-size:22px; overflow-wrap:anywhere }
@media (min-width:640px){ .shelf-grid .vcard__art{ height:260px } }
.vcard[hidden]{ display:none !important }
.vcard .chip{ align-self:flex-start; margin-top:auto }
.shelfp__none{ font-size:12px; color:var(--grey-d) }

/* ---------- v3: SPECIMEN PAGE ---------- */
.sp-hero{ position:relative; background:var(--void); color:var(--paper); overflow:hidden; padding:20px 0 84px; min-height:calc(100svh - 88px) }
.sp-hero__copy{ display:flex; flex-direction:column; gap:14px }
.sp-hero__name{ font-size:clamp(58px, 17vw, 200px); margin:4px 0 0; color:var(--acid); white-space:nowrap; line-height:.9 }
.sp-hero__name .ch{ display:inline-block }
.sp-hero__row{ display:grid; grid-template-columns:42% 1fr; gap:14px; align-items:start }
.sp-hero__vial{ margin:0; border:3px solid var(--paper); aspect-ratio:9/16; overflow:hidden; background:var(--tile); max-height:62svh }
.sp-hero__vial img{ width:100%; height:100%; object-fit:cover }
.sp-hero__side{ display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.sp-hero__tape{ margin:0; font-weight:800; font-size:clamp(15px, 2vw, 22px); line-height:1.25; transform:rotate(-1deg) }
.sp-hero__stamp{ display:flex; flex-direction:column; gap:6px }
.sp-hero__stamp .kicker{ color:var(--grey); font-size:10px }
.sp-hero__stamp .stamp--lg{ font-size:clamp(13px, 2.2vw, 26px); white-space:normal }
.sp-scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:var(--ink); color:var(--acid); border:2px solid var(--acid); font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; white-space:nowrap }
.sp-scroll span{ display:inline-block; animation:al-bob 1.1s ease-in-out infinite }
html.calm .sp-scroll{ display:none }
.sp-hero__nf{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; padding-top:40px }
@media (min-width:900px){
  .sp-hero{ padding:40px 0 96px }
  .sp-hero__row{ grid-template-columns:minmax(260px, 340px) 1fr; gap:40px }
  .sp-hero__tape{ max-width:26em }
}

.sp-sec{ background:var(--paper); padding:56px 0 }
.sp-sec--tile{ background:var(--tile) }
.sp-sec--ink{ background-color:var(--ink); color:var(--paper); padding:64px 0 }
.sp-head{ display:flex; align-items:baseline; gap:12px; border-bottom:3px solid var(--ink); padding-bottom:10px; margin-bottom:24px }
.sp-head__n{ font-size:12px; background:var(--ink); color:var(--acid); padding:3px 7px; flex:0 0 auto }
.sp-head__t{ font-size:clamp(34px, 7vw, 72px); margin:0; line-height:.95 }
html.lang-vi .sp-head__t{ line-height:1.1 }
.sp-head--ink{ border-color:var(--pink) }
.sp-head--ink .sp-head__n{ background:var(--pink); color:var(--ink) }
.sp-head--ink .sp-head__t{ color:var(--acid) }
.sp-made{ display:grid; grid-template-columns:1fr; gap:20px; align-items:start }
.sp-made__side{ display:flex; flex-direction:column; gap:16px; align-items:flex-start }
@media (min-width:900px){ .sp-made{ grid-template-columns:1.4fr 1fr; gap:40px } }
.sp-origin{ font-size:clamp(20px, 2.8vw, 32px); font-weight:800; line-height:1.25; max-width:30em; margin:0 }
.sp-claims, .sp-unknowns{ list-style:none; margin:0; padding:0 }
.sp-claim{ display:grid; grid-template-columns:1fr; gap:10px; padding:18px 0; border-top:2px solid var(--ink) }
.sp-claim:last-child{ border-bottom:2px solid var(--ink) }
.sp-claim .stamp{ justify-self:start }
.sp-claim p{ margin:0; font-size:clamp(17px, 2vw, 21px); max-width:36em }
@media (min-width:900px){ .sp-claim{ grid-template-columns:300px 1fr; gap:28px; align-items:center } }
.sp-claims + .lab-disclaim{ margin-top:22px }
.sp-unknown{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding:18px 0; border-top:2px dashed rgba(243,241,236,.3) }
.sp-unknown__q{ font-size:52px; line-height:1; color:var(--pink) }
.sp-unknown p{ margin:6px 0 0; font-size:clamp(18px, 2.2vw, 24px); font-weight:800; max-width:32em }
.sp-unknown .stamp{ border-color:var(--paper) }
.sp-status{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.sp-status li{ font-family:var(--f-mono); font-size:14px; line-height:1.45; padding:10px 12px 10px 34px; border:2px solid var(--ink); position:relative; background:var(--paper) }
.sp-status li::before{ content:''; position:absolute; left:12px; top:15px; width:10px; height:10px; background:var(--ink) }
.sp-log{ display:grid; grid-template-columns:72px 1fr; gap:16px; background:var(--paper); border:3px solid var(--ink); padding:16px; box-shadow:8px 8px 0 var(--ink); max-width:760px; transform:rotate(-.6deg) }
.sp-log img{ width:72px; height:72px; object-fit:cover; object-position:50% 20%; border:3px solid var(--ink); filter:grayscale(.2) }
.sp-log p{ margin:10px 0 6px; font-size:17px; line-height:1.45 }
.sp-log__sig{ font-size:28px; color:var(--pink); -webkit-text-stroke:1px var(--ink) }
@media (min-width:640px){ .sp-log{ grid-template-columns:96px 1fr; padding:22px } .sp-log img{ width:96px; height:96px } }
.sp-eps{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:700px){ .sp-eps{ grid-template-columns:1fr 1fr } }
.sp-ep{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; border:3px solid var(--ink); background:var(--tile); padding:10px; text-decoration:none; color:var(--ink) }
a.sp-ep:hover{ box-shadow:6px 6px 0 var(--ink) }
.sp-ep img, .sp-ep__ph{ width:96px; aspect-ratio:9/16; object-fit:cover; border:2px solid var(--ink) }
.sp-ep > div{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.sp-ep__t{ font-size:26px; line-height:1 }
.sp-ep--soon{ border-style:dashed; color:var(--grey-d) }
.sp-ep__ph{ display:flex; align-items:center; justify-content:center; background:var(--paper); font-size:20px; color:var(--grey) }
.sp-words{ display:flex; flex-wrap:wrap; gap:12px }
.sp-word{ font-size:15px; line-height:1.35; max-width:30em; padding:9px 12px }
.sp-sources{ margin:0; padding-left:26px; display:flex; flex-direction:column; gap:10px; font-size:15px }
.sp-sources li::marker{ font-family:var(--f-mono); font-weight:700 }
.sp-sources a{ font-weight:800; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:3px; text-underline-offset:3px; overflow-wrap:anywhere }
.sp-sources a:hover{ background:var(--acid) }
.sp-checked{ margin:18px 0 0; font-size:12px }
.sp-nav{ background:var(--paper); padding:40px 0 64px; border-top:4px solid var(--ink) }
.sp-nav__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.sp-nav__card{ display:flex; flex-direction:column; gap:6px; border:3px solid var(--ink); padding:14px; text-decoration:none; color:var(--ink); background:var(--tile) }
.sp-nav__card--next{ text-align:right; align-items:flex-end; background:var(--acid) }
.sp-nav__card .mono{ font-size:10px }
.sp-nav__card .anton{ font-size:clamp(24px, 5vw, 48px); line-height:1; overflow-wrap:anywhere }
.sp-nav__card:hover{ box-shadow:6px 6px 0 var(--ink) }
.lab-card__more{ align-self:flex-start }
/* specimen hero: no dead space, scroll cue sits right under the content */
.sp-hero{ min-height:0; padding-bottom:36px }
.sp-hero__row{ grid-template-columns:48% 1fr }
.sp-scroll{ position:relative; left:auto; bottom:auto; transform:none; display:table; margin:28px auto 0 }
@media (min-width:900px){ .sp-hero__row{ grid-template-columns:minmax(260px, 340px) 1fr } .sp-hero{ min-height:calc(100svh - 92px) } }
.sp-claim:first-child{ border-top:0; padding-top:4px }
.sp-unknown:first-child{ border-top:0 }
.sp-log{ grid-template-columns:56px 1fr; gap:12px }
.sp-log img{ width:56px; height:56px }
@media (min-width:640px){ .sp-log{ grid-template-columns:96px 1fr; gap:18px } .sp-log img{ width:96px; height:96px } }
@media (min-width:900px){ .sp-hero__vial{ max-height:58svh } .sp-unknown p{ font-size:22px } }
.sp-ep img, .sp-ep__ph{ height:auto }
.sp-ep__ph{ font-size:15px }
.vcard .stamp{ white-space:normal; max-width:100% } .shelf-grid .vcard{ min-width:0 }

/* ---------- v4: new chain parts (D blocks, DAC hook, rings, end caps) ---------- */
.cb__d{ position:absolute; right:-5px; top:-6px; background:var(--ink); color:var(--paper); border:1.5px solid var(--paper); font-family:var(--f-mono); font-weight:700; font-size:8px; line-height:1; padding:2px 3px; z-index:2 }
.cb__d--inline{ position:static; display:inline-block; margin-right:8px; font-size:10px; padding:2px 5px }
.cb__tail--dac{ background:var(--acid) }
.chain__cap--end{ margin-right:0; margin-left:0 }
.chain__ring{ position:relative; display:inline-flex; flex-wrap:nowrap; align-items:center; border:3px solid var(--acid); border-radius:999px; padding:9px 12px 7px; margin:8px 0 }
.chain__ringlbl{ position:absolute; left:14px; top:-10px; background:var(--acid); color:var(--ink); font-family:var(--f-mono); font-weight:700; font-size:8px; letter-spacing:.08em; padding:2px 5px; line-height:1.2 }
.chain__ringlbl--inline{ position:static; display:inline-block; margin-right:8px; font-size:10px }
.lab-card__chips{ display:flex; gap:6px; flex-wrap:wrap }
.lab-card__note{ margin:0; font-size:14px; border-left:5px solid var(--pink); padding-left:10px }
#presets{ display:flex; flex-direction:column; gap:12px }
.preset-group{ display:flex; flex-direction:column; gap:6px }
.preset-group__lbl{ font-size:10px; display:inline-flex; align-items:center; gap:6px }
.preset-group.is-approved .preset-group__lbl::before{ content:'●'; color:var(--ink) }
.preset-group.is-not .preset-group__lbl::before{ content:'○'; color:var(--ink) }
.preset-group .presets{ margin:0 }
.preset-group.is-approved .presets button{ background:var(--acid) }
.preset-group.is-approved .presets button[aria-pressed="true"]{ background:var(--ink); color:var(--acid) }
@media (max-width:599px){ .presets button{ font-size:11px; padding:7px 9px; border-width:2px } }
.sp-hero__brands{ margin:-4px 0 0; font-size:12px; color:var(--paper); opacity:.85; text-transform:none; letter-spacing:.04em }

/* ---------- v4: specimens page, "Most popular" view ---------- */
.shelfp__source{ font-size:11px; color:var(--grey-d); margin:-8px 0 18px; text-transform:none; letter-spacing:.02em }
.vcard__rank{ display:none; position:absolute; left:-8px; top:20px; z-index:3; background:var(--acid); color:var(--ink); border:3px solid var(--ink);
  font-size:clamp(34px, 9vw, 52px); line-height:1; padding:2px 10px 0; transform:rotate(-6deg); box-shadow:4px 4px 0 var(--ink) }
.vcard__appr{ display:none; font-size:10px; padding:4px 7px }
.is-ranked .vcard__rank{ display:block }
.is-ranked .vcard__appr{ display:inline-block; align-self:flex-start }
.vcard__appr--ok{ background:var(--acid); color:var(--ink); border:2px solid var(--ink) }
.vcard__appr--no{ background:var(--paper); color:var(--ink); border:2px dashed var(--ink) }
.shelf-grid.is-ranked{ padding-left:6px }
.shelfp{ overflow:hidden }

/* divider between the ranked 10 and the rest of the shelf */
.shelf-divider{ grid-column:1/-1; margin:28px 0 4px; padding-top:18px; border-top:4px solid var(--ink); font-size:14px; letter-spacing:.12em; text-transform:uppercase }

/* ---------- v3 (10 Oct 2026): How I grade, Glossary, Experiment, Episodes, About ---------- */
.pg-big{ font-family:var(--f-display); text-transform:uppercase; line-height:.95; font-size:clamp(34px, 6.4vw, 76px); margin:0 0 18px; max-width:16em }
html.lang-vi .pg-big{ line-height:1.05 }
.pg-two{ display:grid; grid-template-columns:1fr; gap:40px }
@media (min-width:900px){ .pg-two{ grid-template-columns:1fr 1fr; gap:56px } }
.pg-rules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:760px){ .pg-rules{ grid-template-columns:1fr 1fr } }
.pg-rules li{ display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:center; border:3px solid var(--ink); background:var(--paper); padding:12px 14px }
.pg-rules__n{ font-size:44px; line-height:1; color:var(--ink); background:var(--acid); border:3px solid var(--ink); text-align:center; padding:4px 0 2px }
.pg-rules li:nth-child(even) .pg-rules__n{ background:var(--pink) }
.pg-rules p{ margin:0; font-weight:800; font-size:clamp(16px, 1.9vw, 20px); line-height:1.3 }
/* grade cards */
.gr-cards{ display:grid; grid-template-columns:1fr; gap:18px }
@media (min-width:760px){ .gr-cards{ grid-template-columns:1fr 1fr } }
.gr-card{ border:3px solid var(--ink); background:var(--paper); box-shadow:10px 10px 0 var(--ink); display:flex; flex-direction:column }
.gr-card--proven{ box-shadow:10px 10px 0 var(--acid), 10px 10px 0 3px var(--ink) }
.gr-card--reported{ box-shadow:10px 10px 0 var(--pink), 10px 10px 0 3px var(--ink) }
.gr-card--theory{ border-style:dashed }
.gr-card__top{ display:flex; align-items:center; gap:14px; padding:16px; border-bottom:3px solid var(--ink); background:var(--ink) }
.gr-card__sym{ font-size:64px; line-height:1; color:var(--paper) }
.gr-card--proven .gr-card__sym{ color:var(--acid) } .gr-card--reported .gr-card__sym{ color:var(--pink) }
.gr-card__top .stamp{ border-color:var(--paper) }
.gr-card__body{ padding:16px; display:flex; flex-direction:column; gap:6px }
.gr-card__body .kicker{ font-size:10px; color:var(--grey-d); margin-top:8px }
.gr-card__means{ margin:0; font-weight:800; font-size:clamp(18px, 2.1vw, 22px); line-height:1.25 }
.gr-card__counts{ margin:0; padding-left:20px; font-size:16px; display:flex; flex-direction:column; gap:3px }
.gr-card__ex{ display:block; font-size:15px; line-height:1.35; text-decoration:none; border:2px solid var(--ink); background:var(--tile); padding:10px 12px }
.gr-card__ex:hover{ background:var(--acid) }
/* decision flow */
.flow{ margin-top:24px; border:3px solid var(--acid); padding:22px 18px; min-height:240px; display:flex; align-items:center }
.flow__q, .flow__end{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; width:100% }
.flow__n{ color:var(--acid); font-size:12px }
.flow__t{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-size:clamp(30px, 5.4vw, 60px); line-height:.98; max-width:14em }
html.lang-vi .flow__t{ line-height:1.08 }
.flow__btns{ display:flex; gap:10px; flex-wrap:wrap }
.flow .btn--ghost{ color:var(--paper) }
.flow__end p{ margin:0; font-size:clamp(18px, 2.2vw, 24px); font-weight:800; max-width:30em }
.flow__end .stamp{ border-color:var(--paper) }
/* quiz */
.qzs{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px }
.qz{ border:3px solid var(--ink); background:var(--tile); padding:16px }
.qz__claim{ margin:0 0 12px; font-weight:800; font-size:clamp(19px, 2.3vw, 26px); line-height:1.25 }
.qz__opts{ display:flex; flex-wrap:wrap; gap:8px }
.qz__opt{ background:var(--paper); border:3px solid var(--ink); font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 12px }
.qz__opt:hover:not(:disabled){ background:var(--acid) }
.qz__opt:disabled{ cursor:default; opacity:.45 }
.qz__opt.is-right{ background:var(--acid); opacity:1 }
.qz__opt.is-wrong{ background:var(--pink); opacity:1; text-decoration:line-through }
.qz__res{ margin:12px 0 0; font-size:16px; min-height:1.3em; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.qz__res .stamp{ font-size:11px; padding:5px 8px; border-width:2px }
/* glossary */
.gl__bar{ position:sticky; top:var(--lbb-h,0px); z-index:5; display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--paper); padding:12px 0; border-bottom:3px solid var(--ink); margin-bottom:8px }
.gl__search{ flex:1 1 260px }
.gl__search input{ width:100%; font:inherit; font-weight:800; font-size:18px; border:3px solid var(--ink); padding:10px 12px; background:#fff; border-radius:0 }
.gl__groups{ display:flex; flex-wrap:wrap; border:3px solid var(--ink) }
.gl__groups button{ background:var(--paper); border:0; border-left:3px solid var(--ink); font-family:var(--f-mono); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:9px 10px }
.gl__groups button:first-child{ border-left:0 }
.gl__groups button[aria-pressed="true"]{ background:var(--ink); color:var(--acid) }
.gl__count{ font-size:11px; color:var(--grey-d) }
.gl__list{ margin:0; display:grid; grid-template-columns:1fr; gap:0 }
@media (min-width:900px){ .gl__list{ grid-template-columns:1fr 1fr; column-gap:40px } }
.gl__item{ padding:16px 0; border-bottom:2px solid var(--ink) }
.gl__item[hidden]{ display:none }
.gl__item dt{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:6px }
.gl__en{ font-size:clamp(28px, 4vw, 40px); line-height:1 }
.gl__vi{ font-family:var(--f-mono); font-size:13px; color:var(--grey-d) }
.gl__chip{ font-size:9px; padding:3px 6px; margin-left:auto }
.gl__item dd{ margin:0; font-size:17px; line-height:1.4; max-width:34em }
.gl__none{ font-weight:800; font-size:20px; padding:24px 0 }
/* recovery chart */
.rt{ border:3px solid var(--ink); background:var(--paper); padding:18px 16px 14px; display:flex; flex-direction:column; gap:14px }
.rt__row{ display:flex; flex-direction:column; gap:6px }
.rt__lbl{ font-size:12px }
.rt__track{ position:relative; height:54px; background:var(--tile); border:3px solid var(--ink) }
.rt__bar{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; justify-content:flex-end; padding-right:10px; overflow:hidden }
.rt__bar .anton{ font-size:36px; line-height:1 }
.rt__bar--me{ background:var(--acid) }
.rt__bar--usual{ background:var(--ink); color:var(--paper) }
.rt__fade{ position:absolute; top:0; bottom:0; right:0; background:repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 14px); opacity:.35 }
.rt__axis{ position:relative; height:16px; font-size:10px; margin:0 3px }
.rt__axis span{ position:absolute; transform:translateX(-50%) }
.rt__note{ margin:6px 0 0; font-size:13px; color:var(--grey-d) }
.exp--page{ padding:64px 0 72px }
.exp--page .tl{ margin-top:8px }
.pg-noticed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.pg-noticed li{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; border:3px solid var(--ink); background:var(--tile); padding:12px 14px }
.pg-noticed p{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px, 3.6vw, 40px); line-height:1 }
.pg-noticed .stamp{ font-size:11px; padding:5px 8px; border-width:2px }
.why{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px }
@media (min-width:760px){ .why{ grid-template-columns:repeat(3, 1fr) } }
.why__card{ border:3px solid var(--paper); padding:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.why__n{ font-size:56px; line-height:1; color:var(--pink) }
.why__card h3{ margin:0; font-size:clamp(28px, 3.4vw, 40px); color:var(--acid) }
.why__card p{ margin:0; font-size:17px; color:#d9d7d1 }
.why__card .link-mono{ color:var(--paper) }
/* episodes page */
.eps .ep{ display:grid; grid-template-columns:1fr; gap:28px; padding:0 0 56px; margin:0 0 56px; border-bottom:4px solid var(--ink) }
@media (min-width:900px){ .eps .ep{ grid-template-columns:minmax(260px, 380px) 1fr; gap:56px; align-items:start } }
.ep__media{ position:relative; max-width:380px; width:100%; justify-self:center }
@media (min-width:900px){ .ep__media{ position:sticky; top:calc(var(--lbb-h,0px) + 170px) } }
.ep__cover{ position:relative; display:block; border:4px solid var(--ink); aspect-ratio:9/16; overflow:hidden; background:var(--void); box-shadow:12px 12px 0 var(--ink) }
.ep__cover img, .ep__cover video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ep__cover video{ opacity:0; transition:opacity .25s }
.ep__cover.is-prev video{ opacity:1 }
.ep__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; line-height:84px; text-align:center; font-size:40px; background:var(--acid); color:var(--ink); border:4px solid var(--ink); transition:transform .2s }
.ep__cover:hover .ep__play{ transform:translate(-50%,-50%) scale(1.12) rotate(-6deg) }
.ep__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.ep__copy h2{ margin:4px 0 0 }
.ep__copy .lede{ margin:0 0 6px }
.ep__h{ margin:22px 0 2px }
.ep__claims{ width:100% }
.ep__specs{ display:flex; flex-wrap:wrap; gap:8px }
.ep__specs .chip{ text-decoration:none; font-size:12px; padding:8px 12px }
.ep__next{ max-width:520px }
/* about */
.ab-hi{ display:grid; grid-template-columns:1fr; gap:28px; align-items:start }
@media (min-width:900px){ .ab-hi{ grid-template-columns:minmax(240px, 380px) 1fr; gap:56px } }
.ab-hi__img{ margin:0; border:4px solid var(--ink); aspect-ratio:4/5; overflow:hidden; max-width:380px; box-shadow:12px 12px 0 var(--pink), 12px 12px 0 3px var(--ink) }
.ab-hi__img img{ width:100%; height:100%; object-fit:cover }
.ab-sig{ display:block; font-size:72px; color:var(--pink); -webkit-text-stroke:2px var(--ink); transform:rotate(-4deg); width:max-content }
.ab-why{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.ab-why li{ display:grid; grid-template-columns:48px 1fr; gap:14px; padding:18px 0; border-top:3px solid var(--ink) }
.ab-why li:last-child{ border-bottom:3px solid var(--ink) }
.ab-why .mono{ font-size:14px; padding-top:6px }
.ab-why p{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px, 4.4vw, 52px); line-height:1 }
html.lang-vi .ab-why p{ line-height:1.1 }
.ab-not{ display:grid; grid-template-columns:1fr; gap:22px }
@media (min-width:760px){ .ab-not{ grid-template-columns:repeat(3, 1fr) } }
.ab-not__card{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.ab-not__k{ font-size:clamp(30px, 4vw, 44px); color:var(--ink) }
.ab-not__card p{ margin:0; font-size:18px; color:#d9d7d1; max-width:22em }
html.calm .ep__cover video, html.no-motion .ep__cover video{ display:none }
.exp__head h2{ line-height:.96 }
/* v3 overflow guards: grid children may shrink, long VN stamps wrap */
.gr-card, .eps .ep > *, .ab-hi > *, .pg-two > *, .why__card, .gr-cards > *{ min-width:0 }
.gr-card .stamp, .flow__end .stamp{ white-space:normal; max-width:100% }
.gr-card__top{ flex-wrap:wrap }
.pg-big, .ab-why p, .flow__t{ overflow-wrap:break-word }
#pg-root{ overflow-x:clip }