/* Layout concept: a city at night. Every page is a building on one street grid.
   Dark by design (single theme). Amber = you / interactive. Cyan = data. Red = events. */
:root{
  --ground:#080B10;
  --ground-2:#0C1016;
  --panel:rgba(12,16,22,.82);
  --panel-solid:#0E131A;
  --line:#1F2833;
  --line-2:#2C3746;
  --ink:#E9ECF1;
  --ink-2:#A6AFBD;
  --ink-3:#717B8C;
  --amber:#FFB547;
  --amber-soft:rgba(255,181,71,.12);
  --cyan:#62D6F5;
  --cyan-soft:rgba(98,214,245,.10);
  --red:#FF5C4D;
  --display:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  --sans:"IBM Plex Sans","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","Noto Sans TC",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --step--1:.8125rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:clamp(1.9rem,4vw,2.6rem);
  --step-4:clamp(2.3rem,6.2vw,4.6rem);
  --r:6px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ground)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
::selection{background:var(--amber);color:#0A0D11}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(4,6,9,.75) 100%)}

/* ---------- Top bar & tabs ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(8,11,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:0;display:flex;align-items:center;gap:1.25rem;min-height:58px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
.pin{width:22px;height:22px;flex:none}
.brand b{font-family:var(--display);font-stretch:112%;font-weight:700;letter-spacing:.01em;font-size:1rem}
.brand span{font-family:var(--sans);color:var(--ink-3);font-size:.85rem}
.tabs{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;margin-left:auto;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent);padding-right:1.25rem}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;display:flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:.5rem .7rem;border-radius:4px;position:relative;white-space:nowrap}
.tabs a i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.tabs a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:2px;background:var(--amber);box-shadow:0 0 12px rgba(255,181,71,.7)}
.tabs a[aria-current="page"] i{color:var(--amber)}
@media (max-width:820px){
  .top-in{flex-wrap:wrap;gap:0;min-height:0;padding-block:.4rem 0}
  .brand{padding-block:.35rem}
  .tabs{width:100%;margin-left:0;padding-bottom:.25rem;margin-right:calc(-1 * var(--gutter-r))}
  .tabs a{padding:.45rem .6rem;font-size:.84rem}
}

/* ---------- Page frame ---------- */
.page{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:0 4rem}
.hero{padding-block:clamp(2.5rem,7vw,5rem) 2rem;display:grid;gap:1rem;max-width:62rem}
.district{margin:0;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.district::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft),0 0 14px var(--amber)}
.district span{color:var(--ink-3)}
h1,.h1{margin:0;font-family:var(--display);font-stretch:118%;font-weight:750;font-size:var(--step-4);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
h1 .zh{font-family:var(--sans);font-stretch:100%;font-weight:400;color:var(--ink-3);font-size:.5em;margin-left:.3em;letter-spacing:0;white-space:nowrap}
.lede{margin:0;font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink);max-width:46rem}
.meta{margin:0;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2);line-height:1.7;max-width:60rem}
.meta b{color:var(--ink);font-weight:500}

section.block{padding-block:2.75rem;border-top:1px solid var(--line);display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1rem 2.5rem}
.block > .label{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;padding-top:.45rem}
.block > .label b{display:block;color:var(--cyan);font-weight:500;font-size:.95rem;letter-spacing:.02em;text-transform:none;margin-bottom:.15rem}
.block > .body{min-width:0;display:grid;gap:1.25rem;align-content:start}
.block > .full{grid-column:1 / -1;min-width:0}
h2{margin:0;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:var(--step-3);line-height:1.1;letter-spacing:-.005em;text-wrap:balance}
h3{margin:0;font-family:var(--display);font-stretch:108%;font-weight:650;font-size:var(--step-2);line-height:1.2;text-wrap:balance}
p{margin:0}
.prose{display:grid;gap:.9rem;max-width:44rem}
.prose p{color:var(--ink)}
.muted{color:var(--ink-2)}
@media (max-width:820px){
  section.block{grid-template-columns:minmax(0,1fr);gap:.75rem;padding-block:2.25rem}
  .block > .label{padding-top:0}
}

/* ---------- Pieces ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--panel-solid);padding:1rem 1.1rem;display:grid;gap:.2rem}
.stat b{font-family:var(--display);font-stretch:115%;font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:var(--ink-2);line-height:1.4}
.stat.sim b::after{content:"sim";font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:.05rem .3rem;margin-left:.45rem;vertical-align:middle;font-stretch:100%;font-weight:400}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{font-family:var(--mono);font-size:.78rem;line-height:1.4;color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.02);padding:.2rem .55rem;border-radius:3px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,2.4vw,1.6rem);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-width:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* Log entries: dated stories */
.logs{display:grid;gap:1rem}
.log{border-left:2px solid var(--line-2);padding:.2rem 0 .2rem 1.1rem;display:grid;gap:.4rem;max-width:46rem}
.log time,.log .when{font-family:var(--mono);font-size:var(--step--1);color:var(--amber);letter-spacing:.04em}
.log h3{font-size:1.15rem}
.log p{color:var(--ink)}
.quote{margin:0;font-family:var(--display);font-stretch:110%;font-weight:600;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.3;color:var(--ink);border-left:3px solid var(--amber);padding-left:1rem;max-width:44rem}
.quote cite{display:block;margin-top:.5rem;font-family:var(--mono);font-size:var(--step--1);font-style:normal;font-weight:400;color:var(--ink-3)}
code,kbd{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:.05em .35em;border-radius:3px;color:var(--ink)}

/* Fact rows */
.facts{margin:0;display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.85rem 1.5rem;max-width:48rem}
.facts dt{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding-top:.15rem}
.facts dd{margin:0;min-width:0}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr);gap:.2rem}.facts dd{margin-bottom:.8rem}}

/* Figures */
figure{margin:0;min-width:0;display:grid;gap:.6rem;align-content:start}
figure img,figure video{width:100%;border:1px solid var(--line);border-radius:4px;background:var(--panel-solid)}
img[data-zoom]{cursor:zoom-in}
figcaption{font-size:.86rem;color:var(--ink-2);line-height:1.5;max-width:60ch}
figcaption b{font-family:var(--mono);font-weight:500;color:var(--cyan);margin-right:.45em}
.tag-sim{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:.05rem .35rem;margin-left:.35rem;white-space:nowrap}
.figrow{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:500 .9rem/1 var(--sans);color:#0A0D11;background:var(--amber);border:1px solid var(--amber);border-radius:4px;padding:.7rem 1rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{color:#0A0D11;background:#FFC56E}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn.small{padding:.45rem .7rem;font-size:.8rem;font-family:var(--mono)}
.btn[aria-pressed="true"]{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}

/* Links list */
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-family:var(--mono);font-size:.875rem}
.links .note{color:var(--ink-3)}

/* Next stop */
.next{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.next a{background:var(--panel-solid);padding:1.2rem 1.3rem;text-decoration:none;color:var(--ink);display:grid;gap:.25rem}
.next a span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.next a b{font-family:var(--display);font-stretch:110%;font-weight:700;font-size:1.2rem}
.next a:hover{background:#121922}
.next a:hover b{color:var(--amber)}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:2rem}
.foot-in{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:1.75rem 2.5rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.foot a{color:var(--ink-2)}

/* Lightbox */
#lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:94vh;color:var(--ink)}
#lightbox::backdrop{background:rgba(4,6,9,.88);backdrop-filter:blur(4px)}
#lightbox img{max-height:84vh;width:auto;margin:0 auto;border-radius:4px;border:1px solid var(--line-2)}
#lightbox p{margin-top:.6rem;font-size:.9rem;color:var(--ink-2);text-align:center}
#lightbox button{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}

/* ---------- Widgets ---------- */
.widget{border:1px solid rgba(98,214,245,.28);background:linear-gradient(180deg,rgba(98,214,245,.05),rgba(12,16,22,.88));border-radius:var(--r);padding:clamp(1rem,2.4vw,1.5rem);display:grid;gap:1rem;min-width:0}
.w-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);letter-spacing:.04em}
.w-head b{color:var(--cyan);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.w-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
input[type=range]{width:100%;accent-color:var(--amber);height:22px}
input[type=text]{width:100%;font:500 .95rem var(--mono);color:var(--ink);background:#0A0E13;border:1px solid var(--line-2);border-radius:4px;padding:.65rem .75rem}
input[type=text]:focus{border-color:var(--amber);outline:none}
.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.5rem}
@media (max-width:600px){.sliders{grid-template-columns:minmax(0,1fr)}}
.sliders label{display:grid;gap:.25rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-2)}
.sliders label span{display:flex;justify-content:space-between}
.sliders output{color:var(--ink)}
.formula{font-family:var(--mono);font-size:.82rem;color:var(--ink-2);overflow-x:auto;white-space:nowrap;padding:.6rem .75rem;background:#0A0E13;border:1px solid var(--line);border-radius:4px}
.formula b{color:var(--ink)}
.meter{position:relative;height:14px;background:#0A0E13;border:1px solid var(--line-2);border-radius:3px;overflow:visible}
.meter .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--line-2);transition:width .2s,background .2s;border-radius:2px}
.pass .meter .fill{background:var(--amber);box-shadow:0 0 14px rgba(255,181,71,.6)}
.meter .thr{position:absolute;top:-6px;bottom:-6px;left:45%;width:2px;background:var(--red)}
.meter .thr span{position:absolute;top:-1.35rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;color:var(--red)}
.verdict{font-family:var(--mono);font-size:.88rem;color:var(--ink-2);min-height:1.5em}
.pass .verdict{color:var(--amber)}
.presets{display:flex;flex-wrap:wrap;gap:.5rem}
.hash{font-family:var(--mono);font-size:.82rem;word-break:break-all;color:var(--cyan);background:#0A0E13;border:1px solid var(--line);border-radius:4px;padding:.6rem .75rem}
#h-state{font-family:var(--mono);font-size:.85rem}
#h-state.hit{color:var(--amber)} #h-state.miss{color:var(--ink-2)}
.kmers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;max-height:13rem;overflow:auto}
.kmers li{font-family:var(--mono);font-size:.82rem;display:flex;gap:.35rem;align-items:baseline;border:1px solid rgba(98,214,245,.3);background:var(--cyan-soft);border-radius:3px;padding:.15rem .45rem;animation:pop .35s both}
.kmers li b{color:var(--ink);font-weight:500;letter-spacing:.06em}
.kmers li span{color:var(--ink-3);font-size:.72rem}
@keyframes pop{from{transform:translateY(4px)}to{transform:none}}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.seg button{font:500 .8rem var(--mono);color:var(--ink-2);background:transparent;border:0;padding:.45rem .8rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--amber);color:#0A0D11}
#transit{width:100%;height:clamp(300px,42vw,380px);display:block;border-radius:4px;background:radial-gradient(80% 90% at 20% 50%,#0E1520,#070A0E)}
@media (max-width:560px){#transit{height:440px}}
.readout{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:var(--mono);font-size:.85rem;color:var(--ink-2)}
.readout b{color:var(--ink);font-weight:500}

/* Steps (real sequences only) */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:.75rem;max-width:46rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--cyan);border:1px solid rgba(98,214,245,.35);border-radius:3px;text-align:center;padding:.05rem 0}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl th,.tbl td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:baseline}
.tbl th{font-family:var(--mono);font-weight:500;font-size:.75rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;background:var(--panel-solid)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Home (city) ---------- */
.city-wrap{position:relative;height:calc(100svh - 58px - env(safe-area-inset-top,0px));min-height:600px;max-height:980px;overflow:hidden;border-bottom:1px solid var(--line);background:#080B10}
#city{display:block;touch-action:manipulation}
#city:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.intro{position:absolute;top:clamp(1.5rem,5vh,3.5rem);left:max(24px,calc((100vw - 1240px)/2 + 16px));width:min(400px,34vw);display:grid;gap:.9rem;z-index:3;pointer-events:none}
.intro > *{pointer-events:auto}
.intro h1{font-size:clamp(2.2rem,4vw,3.4rem)}
.intro .lede{font-size:1.02rem;color:var(--ink)}
.intro .role{font-size:.95rem;color:var(--ink-2);margin:0;line-height:1.5}
.intro .cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.hud{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.6rem 1rem;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:.8rem;background:linear-gradient(0deg,rgba(8,11,16,.94),rgba(8,11,16,0));pointer-events:none}
.hud > *{pointer-events:auto}
.hud-stats{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-family:var(--mono);font-size:.76rem;color:var(--ink-3);letter-spacing:.04em}
.hud-stats b{color:var(--ink);font-weight:500}
#hud-hash{color:var(--cyan)}
.hud-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.hud-left{display:grid;gap:.15rem}
.hud-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);max-width:44rem}
#city-log{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.75rem;color:var(--ink-2);text-align:right;display:grid;gap:.15rem;max-width:min(520px,100%)}
#city-log li:first-child{color:var(--ink)}
#city-log li:not(:first-child){opacity:.6}
.walk-hint{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink);background:rgba(10,14,19,.92);border:1px solid var(--amber);border-radius:var(--r);padding:.7rem .85rem}
.walk-hint b{color:var(--amber);font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;display:block;margin-bottom:.2rem}
#bpanel{position:absolute;z-index:4;top:clamp(1.5rem,5vh,3.5rem);left:max(24px,calc((100vw - 1240px)/2 + 16px));width:min(400px,34vw);background:var(--panel-solid);border:1px solid var(--amber);border-radius:var(--r);padding:1.1rem 1.15rem 1.15rem;display:grid;gap:.6rem;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 4px rgba(255,181,71,.07)}
#bpanel.pop{animation:panel .28s cubic-bezier(.2,.8,.2,1)}
@keyframes panel{from{transform:translateY(8px) scale(.98)}to{transform:none}}
#bp-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber)}
#bp-title{font-size:1.25rem}
#bp-text{font-size:.92rem;color:var(--ink)}
#bp-stat{font-family:var(--mono);font-size:.78rem;color:var(--cyan)}
.bp-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
#bp-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:0;color:var(--ink-3);font-size:1.3rem;line-height:1;cursor:pointer;padding:.3rem .45rem}
#bp-close:hover{color:var(--amber)}
.city-wrap.walking #city{cursor:crosshair}
@media (max-width:999px){
  .city-wrap{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .intro{position:static;width:auto;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-block:1.6rem 1rem}
  .canvas-box{position:relative;height:min(calc(100svh - 150px),560px);min-height:360px}
  .hud .btn.small{min-height:40px}
  #bp-close{min-width:44px;min-height:44px}
  .hud{position:static;background:none;padding-block:.6rem 1rem}
  #city-log{text-align:left}
  #bpanel{position:fixed;top:auto;bottom:max(12px,env(safe-area-inset-bottom,0px));left:var(--gutter);right:var(--gutter-r);width:auto;z-index:70}
  .shade{display:none}
}
.shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(8,11,16,.92) 0,rgba(8,11,16,.7) 24%,rgba(8,11,16,0) 42%)}
@media (min-width:1000px){.canvas-box{position:absolute;inset:0}}
.canvas-box{overflow:hidden}

.directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1rem}
.dir{position:relative;display:grid;align-content:start;gap:.45rem;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.15rem 1.2rem;transition:border-color .2s,transform .2s;overflow:hidden}
.dir:hover{border-color:var(--amber);color:var(--ink);transform:translateY(-2px)}
.dir .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--amber)}
.dir h3{font-size:1.2rem}
.dir p{font-size:.92rem;color:var(--ink-2)}
.dir .s{font-family:var(--mono);font-size:.76rem;color:var(--cyan)}
.dir video,.dir img{border-radius:4px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;width:100%}
.dir.feature{grid-column:span 2}
@media (max-width:700px){.dir.feature{grid-column:auto}}
.now{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;max-width:48rem}
.now li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:baseline}
.now li span{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
@media (max-width:560px){.now li{grid-template-columns:minmax(0,1fr);gap:.1rem}}

/* ---------- About ---------- */
.portrait{position:relative;aspect-ratio:4/5;width:100%;max-width:340px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(90% 80% at 50% 20%,#162030,#0A0E13)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .mono-fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.6rem;text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:.75rem}
.portrait .mono-fallback b{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:4.5rem;color:var(--ink);letter-spacing:.02em}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,181,71,.15)}
.about-top{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-block:clamp(2.5rem,6vw,4.5rem) 2.5rem}
@media (max-width:760px){.about-top{grid-template-columns:minmax(0,1fr)}.portrait{max-width:260px}}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.mail a{font-family:var(--mono);font-size:clamp(1rem,2.6vw,1.35rem);word-break:break-all}

/* ---------- Builds ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filters .count{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin-left:.4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1.25rem;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem 1.35rem;display:grid;gap:.75rem;min-width:0}
.card.wide{grid-column:1 / -1}
.card .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.card .k b{color:var(--amber);font-weight:500}
.card p{font-size:.95rem}
.card .held{font-size:.86rem;color:var(--ink-2);border-left:2px solid var(--line-2);padding-left:.8rem}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:.6rem}
.thumbs img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:4px;border:1px solid var(--line)}
.thumbs.land img{aspect-ratio:4/3}

/* ---------- Honors board ---------- */
.board{background:#06080B;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 4px #0B0F14}
.board-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:.78rem;color:var(--amber);letter-spacing:.1em;text-transform:uppercase}
.board-head span{color:var(--ink-3)}
.board table{width:100%;border-collapse:collapse}
.board th{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--ink-3);text-align:left;letter-spacing:.1em;text-transform:uppercase;padding:.65rem 1.1rem;border-bottom:1px solid var(--line)}
.board td{padding:.85rem 1.1rem;border-bottom:1px solid #141A22;vertical-align:baseline}
.board tr:last-child td{border-bottom:0}
.board tbody tr{transition:background .15s}
.board tbody tr:hover,.board tbody tr:focus-within{background:rgba(255,181,71,.05)}
.board .yr{font-family:var(--mono);font-size:.82rem;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.board .ev{font-weight:500}
.board .ev small{display:block;font-weight:400;color:var(--ink-3);font-size:.82rem}
.flap{font-family:var(--mono);font-weight:500;color:var(--amber);letter-spacing:.06em;text-transform:uppercase;font-size:.86rem}
@media (max-width:640px){
  .board thead{display:none}
  .board tr{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.15rem .75rem;padding:.8rem 1rem;border-bottom:1px solid #141A22}
  .board td{padding:0;border:0}
  .board td.res{grid-column:2}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;background:var(--amber);color:#0A0D11;padding:.5rem .8rem;border-radius:4px;white-space:normal}
#bp-title{font-size:1.25rem}

/* review fixes */
.panel-open .intro{visibility:hidden}
.proof{list-style:none;margin:.1rem 0 0;padding:0;display:grid;gap:.35rem}
.proof a{display:flex;gap:.6rem;align-items:baseline;text-decoration:none;color:var(--ink-2);font-size:.88rem;line-height:1.4}
.proof a:hover{color:var(--ink)}
.proof b{flex:none;min-width:5.6rem;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.dir.compact h3{font-size:1.05rem}
.figrow img{max-height:34rem;object-fit:contain}
.card[id]{scroll-margin-top:130px}
@media (max-width:999px){.proof b{min-width:5rem}}
.tbl{min-width:36rem}

/* ============ v3: editorial pass ============ */
/* Sections read as one column: small kicker, big heading, wide figures. */
section.block{grid-template-columns:minmax(0,1fr);gap:1rem;padding-block:clamp(2.75rem,6vw,4.75rem)}
.block > .label{padding-top:0;display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;font-size:.75rem;letter-spacing:.06em}
.block > .label b{display:inline;margin:0;color:var(--amber);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.block > .body{gap:1.6rem}
.block .body > h2.sr,.block .body > h2{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.04;letter-spacing:-.012em;max-width:22ch}
.prose{font-size:1.06rem}
.prose p{line-height:1.68}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}

/* avatar + agent-style name block */
.brand .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--amber)}
.me{display:flex;align-items:center;gap:1rem}
.me img{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:50%;object-fit:cover;object-position:50% 28%;flex:none;box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--amber),0 0 26px rgba(255,181,71,.45)}
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}

/* About portrait */
.portrait{aspect-ratio:auto;max-width:360px;margin:0;border:0;background:none;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.portrait img{width:100%;height:auto;display:block;filter:saturate(.95) contrast(1.02)}
.portrait::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,181,71,.22);background:linear-gradient(180deg,transparent 65%,rgba(8,11,16,.35))}
.about-top{align-items:center}

/* Off the clock */
.hobbies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;grid-auto-flow:dense}
.hob{position:relative;background:linear-gradient(160deg,#111821,#0B0F14);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.2rem 1.3rem;display:grid;gap:.4rem;align-content:end;min-height:12rem;overflow:hidden;transition:transform .25s,border-color .25s}
.hob:hover{transform:translateY(-3px) rotate(-.3deg);border-color:var(--amber)}
.hob-wide{grid-column:span 2;grid-row:span 2;align-content:start}
.hob-photo{grid-row:span 2;padding:0;align-content:stretch}
.hob-photo img{width:100%;height:100%;object-fit:cover;min-height:18rem}
.hob-photo .hob-k,.hob-photo h3{position:absolute;left:1.1rem;z-index:1;margin:0}
.hob-photo .hob-k{bottom:3.1rem}.hob-photo h3{bottom:1.1rem}
.hob-photo::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,rgba(8,11,16,.92),transparent);pointer-events:none}
.hob-big{margin:0;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.01em;background:linear-gradient(90deg,var(--amber),#FFD9A0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hob-k{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.hob .muted{font-size:.9rem}
.hob-video{display:grid;gap:.4rem}
.hob-video video{width:100%;border-radius:6px;border:1px solid var(--line-2)}
@media (max-width:900px){.hobbies{grid-template-columns:repeat(2,minmax(0,1fr))}.hob-wide{grid-column:1 / -1;grid-row:auto}.hob-photo{grid-row:span 2}}
@media (max-width:520px){.hobbies{grid-template-columns:minmax(0,1fr)}.hob-photo{grid-row:auto}}

/* Workshop photo reel */
.reel{position:relative;overflow:hidden;padding-block:.5rem 2rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel-track{display:flex;gap:14px;width:max-content;animation:reel 70s linear infinite}
.reel-dup{display:contents}
.reel img{height:clamp(170px,22vw,250px);width:auto;border-radius:8px;border:1px solid var(--line);background:#fff;object-fit:cover}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.reel{overflow-x:auto}.reel-dup{display:none}}

/* Feature sections */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.75rem);align-items:start}
.stack{display:grid;gap:1.1rem;min-width:0}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.split .prose h3{margin-top:.2rem}
.gallery{display:grid;gap:.9rem;min-width:0}
.gallery.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.gallery.g3,.gallery.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shot{margin:0;display:grid;gap:.4rem;align-content:start}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#fff;transition:transform .3s}
.shot:hover img{transform:scale(1.015)}
.shot.chart img{aspect-ratio:auto;object-fit:contain;padding:.4rem}
.gallery.g3 .shot img{aspect-ratio:auto}
.shot figcaption{font-size:.8rem;color:var(--ink-3)}
.formula.big{font-size:clamp(1rem,2vw,1.25rem);padding:1rem 1.1rem;color:var(--ink);white-space:normal}
.feature + .feature{border-top-style:dashed}
.feature .stats{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}

/* Peptide hero animation */
.hero-canvas{margin:.5rem 0 0;display:grid;gap:.35rem}
#pep-hero{width:100%;height:clamp(140px,18vw,210px);display:block;border-radius:8px;background:radial-gradient(60% 90% at 50% 50%,rgba(98,214,245,.07),transparent)}
.hob-wide:not(:has(.hob-video.on)){grid-row:auto}
.card .thumbs img{max-height:240px}
.intro .me h1{font-size:clamp(2rem,3.1vw,2.9rem);white-space:nowrap}
.intro .me h1 .zh{font-size:.45em}
@media (min-width:1000px){.intro{width:min(430px,35vw)}}
.hob-lang{grid-column:span 2;min-height:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.hob-lang .muted{flex:1 1 20rem}
.feature .stat b{white-space:nowrap;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.hob-chair{grid-row:span 2;align-content:start;gap:.5rem}
.hob-chair video{max-height:26rem;object-fit:cover}