/* JustCallan — screen-based portfolio. Order: tokens · shared parts · header · screens · home · pages · viewer · effects · responsive. */
@property --l{syntax:'<length>';inherits:true;initial-value:16px}
@property --b{syntax:'<color>';inherits:true;initial-value:#FF6A1A}
@property --hs-a{syntax:'<color>';inherits:true;initial-value:#FF6A1A}

:root{
  --bg:#0A0908;--panel:rgba(16,14,12,.74);--text:#F5F1EC;--muted:#A39B92;--dim:#6E675F;--line:rgba(245,241,236,.14);
  --accent:#FF6A1A;--soft:rgba(255,106,26,.16);--cyan:#00F0FF;--mag:#FF2A6D;--yel:#FCEE0A;
  --display:'Orbitron',sans-serif;--body:'IBM Plex Sans','PingFang SC','Microsoft YaHei',sans-serif;
  --pad:clamp(18px,4vw,64px);--hdr:calc(60px + env(safe-area-inset-top,0px));--u:1vh;
}
@supports (height:1dvh){:root{--u:1dvh}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--body)}
h1,h2,h3,p,ul{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared parts ---------- */
.ds{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em}      /* white English = brand style */
.zh{font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:.03em;font-size:.8em;color:var(--muted)}
p>.zh{display:block;margin-top:6px;font-size:.85em;color:var(--dim)}
small{display:block;margin-top:6px;font:400 .72em/1.4 var(--body);text-transform:none;letter-spacing:.03em;color:var(--muted)}
.tag{font:700 12px/1.4 var(--display);letter-spacing:.2em;color:var(--accent);margin-bottom:12px}
.tag .zh{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;color:var(--dim)}

/* corner brackets: one definition for everything (.hud) */
.hud{position:relative;--b:var(--accent);--l:16px;--t:2px;--g:linear-gradient(var(--b),var(--b))}
.hud::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-repeat:no-repeat;
  background-image:var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l)}
@keyframes lock{0%{--l:90px;--b:var(--cyan)}30%{--l:48px;--b:var(--mag)}58%{--l:28px;--b:var(--yel)}100%{--l:18px;--b:var(--accent)}}

.step,.view,.menu-list,.data,.lb-cap,.win,.panel,.tile{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.panel{padding:22px 24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-block;padding:5px 12px;border:1px solid var(--accent);background:var(--soft);color:var(--text);font-size:11px;cursor:default}
button.chip{cursor:pointer;background:none;border-color:var(--line)}
button.chip[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent)}
a.chip{border-color:var(--line);background:none}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:13px 20px;border:1.5px solid var(--accent);background:none;color:var(--text);font-size:12px;cursor:pointer;transition:transform .2s,background .2s}
.btn.solid{background:var(--accent);color:#0A0908}
.btn.solid .zh{color:inherit}
.btn:active{transform:scale(.97)}
.peek{display:flex;align-items:center;gap:10px;margin-top:16px;padding:6px 14px 6px 6px;border:1px solid var(--line);background:none;color:var(--text);font-size:11px;text-align:left;cursor:pointer}
.peek img{width:56px;height:36px;object-fit:cover;background:var(--panel)}
.peek:active{border-color:var(--accent);background:var(--soft)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;height:var(--hdr);padding:env(safe-area-inset-top,0px) var(--pad) 0;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(rgba(10,9,8,.9),rgba(10,9,8,0));transition:transform .35s ease}
.top.hide{transform:translateY(-100%)}
.brand{font-size:15px;letter-spacing:.14em;color:var(--accent)}
.nav{display:flex;gap:clamp(14px,2.4vw,32px);font-size:12px}
.nav a,.nav button{position:relative;padding:4px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.nav a::after,.nav button::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .3s}
.nav .zh{color:var(--muted)}
.menu-btn,.menu-list{display:none}
.menu-btn{align-items:center;gap:10px;padding:8px 12px;border:0;background:var(--panel);cursor:pointer;font-size:11px;letter-spacing:.2em;--l:8px}
.bars{position:relative;width:16px;height:12px}
.bars i{position:absolute;left:0;width:100%;height:2px;background:var(--accent);transition:transform .25s,opacity .2s,top .25s}
.bars i:nth-child(1){top:0}.bars i:nth-child(2){top:5px}.bars i:nth-child(3){top:10px}
.menu-btn[aria-expanded=true] i:nth-child(1){top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] i:nth-child(3){top:5px;transform:rotate(-45deg)}
.menu-list{position:absolute;left:50%;top:100%;width:min(320px,calc(100vw - 32px));padding:6px 14px 10px;transform:translateX(-50%);
  clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:clip-path .35s steps(7),opacity .2s;flex-direction:column}
.menu-list.open{clip-path:inset(0);opacity:1;pointer-events:auto}
.menu-list a{padding:14px 8px;text-align:center;font-size:14px;border-top:1px solid var(--line)}
.menu-list a:first-child{border-top:0}
.menu-list a:active{color:var(--accent);background:var(--soft)}

/* ---------- page: one long scroll. The stage is pinned for 520vh, then the sections follow ---------- */
.stage{position:relative;height:520vh}
.pin{position:sticky;top:0;height:100vh;height:calc(var(--u)*100);overflow:hidden}
.section{position:relative;padding:clamp(72px,11vh,130px) var(--pad) clamp(40px,7vh,80px)}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,24px)}
.wrap.center{align-items:center;text-align:center}
.sub-title{margin-top:clamp(36px,7vh,72px)}
.is-loading>*:not(.sk){visibility:hidden}
.sk{position:absolute;inset:0;z-index:20;padding:clamp(72px,11vh,130px) var(--pad);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pin>.sk{justify-content:flex-start;align-items:center;padding:calc(var(--hdr) + var(--u)*2) var(--pad)}
.sk i{display:block;width:min(100%,720px);border-radius:4px;background:linear-gradient(100deg,rgba(245,241,236,.07) 30%,rgba(245,241,236,.17) 50%,rgba(245,241,236,.07) 70%) 130% 0/250% 100%;animation:shimmer 1.3s steps(26) infinite}
.sk i.sil{position:absolute;width:auto;border-radius:0;background:linear-gradient(100deg,rgba(245,241,236,.08) 30%,rgba(255,106,26,.34) 50%,rgba(245,241,236,.08) 70%) 130% 0/250% 100%;-webkit-mask:var(--m) bottom/contain no-repeat;mask:var(--m) bottom/contain no-repeat}
@keyframes shimmer{to{background-position:-130% 0}}

/* ---------- 01 home: the character stage ---------- */
.pin{--ch:min(calc(var(--u)*76),860px);--cb:calc(var(--u)*9);--asp:711/1524;--p:0}
.floor{position:absolute;inset:auto 0 0;height:46%;overflow:hidden;z-index:1}
.floor::before{content:"";position:absolute;left:-30%;width:160%;bottom:-6%;height:120%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,106,26,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,106,26,.42) 1px,transparent 1px);background-size:64px 64px;
  background-position:0 calc(var(--p)*2200px);transition:background-position 1.2s ease;
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 92%);mask-image:linear-gradient(to top,#000 20%,transparent 92%)}
.name{--dx:calc(.0024em - var(--mx,0)*.0072em);--dy:calc(.0096em - var(--my,0)*.0048em);
  position:absolute;left:0;right:0;top:calc(var(--hdr) + var(--u)*1.5);z-index:2;text-align:center;white-space:nowrap;
  font:900 var(--name-fs,100px)/1 var(--display);letter-spacing:.02em;color:#31180B;-webkit-text-stroke:2px var(--accent);text-shadow:var(--ext,none);
  transform:perspective(1400px) rotateX(calc(var(--my,0)*-2.4deg)) rotateY(calc(var(--mx,0)*3.6deg)) translate(calc(var(--mx,0)*-10px),calc(var(--my,0)*-6px))}
#nameT{display:inline-block}
.char{position:absolute;left:50%;bottom:var(--cb);z-index:3;height:var(--ch);aspect-ratio:var(--asp);transform:translateX(-50%);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transform-origin:50% 100%;animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.004 1.009}}
.pose,.cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pose{object-fit:contain;object-position:bottom;opacity:0;transition:opacity .09s linear;filter:drop-shadow(0 0 17px rgba(255,106,26,.17));-webkit-user-drag:none}
.pose.on{opacity:1}
.cv{display:none;filter:drop-shadow(0 0 17px rgba(255,106,26,.17))}
.shadow{position:absolute;left:50%;bottom:-14px;width:78%;height:26px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);filter:blur(4px)}
.info{position:absolute;z-index:6;left:var(--pad);bottom:clamp(60px,calc(var(--u)*12),120px);width:min(430px,calc(100% - var(--pad)*2));display:grid}
.step{grid-area:1/1;align-self:end;padding:24px 26px 26px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s,transform .35s}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step h2{font-size:clamp(16px,1.9vw,21px);line-height:1.35}
.step p{margin-top:14px;font-size:15px;line-height:1.65;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hint{margin-top:18px;font-size:12px;color:var(--dim)}
.hint .zh{margin-left:.5em;color:var(--dim)}
.view{position:absolute;z-index:6;right:var(--pad);bottom:clamp(60px,calc(var(--u)*12),120px);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:150px;--l:12px}
.view .lbl{font-size:11px;letter-spacing:.2em;color:var(--dim)}
.view button{padding:8px 12px;border:1px solid var(--line);background:none;font-size:11px;text-align:left;cursor:pointer;color:var(--text);transition:border-color .2s,background .2s}
.view button[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}
.dots{position:absolute;z-index:8;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding:8px 0}
.dots::before,.dots::after{content:"";position:absolute;right:0;top:0;width:2px}
.dots::before{bottom:0;background:var(--line)}
.dots::after{height:calc(var(--p)*100%);background:var(--accent);transition:height 1.2s ease}
.dots button{display:flex;align-items:center;gap:10px;height:26px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;transition:color .25s,filter .25s}
.dots button::after{content:"";width:14px;height:1px;background:currentColor;opacity:.55}
.dots .lb,.dots .n{font-size:10px}
.dots .lb{letter-spacing:.16em;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .35s,opacity .3s}
.dots i{display:block;width:14px;height:3px;background:currentColor;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);transition:width .3s}
.dots [aria-current=true]{color:var(--accent);filter:drop-shadow(0 0 4px rgba(255,106,26,.6))}
.dots.open [aria-current=true] i{width:40px}
.dots.open [aria-current=true] .lb{max-width:120px;opacity:1}

/* ---------- sections ---------- */
.title{font-size:clamp(22px,3vw,34px)}
.title.big{font-size:clamp(20px,3.6vw,44px);line-height:1.3;max-width:900px;color:var(--accent)}
.sub{font-size:15px;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.copy p{margin-bottom:16px;max-width:64ch;font-size:16px;line-height:1.75;color:var(--muted)}
.tl{display:flex;flex-direction:column;gap:18px}
.log-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px}
.log h3{font-size:clamp(14px,1.7vw,18px);line-height:1.4;color:var(--accent)}
.log-period{font:700 12px/1.4 var(--display);letter-spacing:.14em;color:var(--accent)}
.log-co{margin:6px 0 12px;font-size:14px;color:var(--muted)}
.log ul{padding-left:18px;font-size:15px;line-height:1.7;color:var(--muted)}
.log li{margin:4px 0}
.edu .log-co{margin-bottom:0}
.lab{grid-template-columns:320px minmax(0,560px);justify-content:center;align-items:center;width:100%}
.lab-l{display:flex;flex-direction:column;gap:12px}
.lab-l .peek{margin-top:0}
.tile{padding:14px}
.tile-img{position:relative;aspect-ratio:4/5}
.tile-img img{display:block;width:100%;height:100%;object-fit:cover}
.ecv{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.ename{margin-top:12px;font-size:13px;letter-spacing:.2em}
.exprs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.exprs button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:10px;letter-spacing:.08em}
.exprs button[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}
.exprs img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.contact{min-height:75vh;display:flex;align-items:center}
.contact .wrap{width:100%}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;font-size:14px}
.links a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.links .mail{text-transform:none;letter-spacing:.04em}
.crash-btn{padding:16px 26px;border:1.5px dashed var(--accent);background:none;color:var(--accent);font-size:13px;letter-spacing:.14em;cursor:pointer}
.crash-btn:active{background:var(--soft)}
.crash-btn .zh{color:inherit}
.foot{margin-top:24px;font-size:12px;color:var(--dim)}

/* work: hero, thumbnails, data panel — one block, flush left */
#work{--hs-a:#FF6A1A;transition:--hs-a .9s ease}
#work::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 55%,color-mix(in srgb,var(--hs-a) 30%,transparent),transparent 72%)}
#work .wrap{position:relative;z-index:1}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.work-item{width:100%;max-width:1080px}
.hero{aspect-ratio:16/9;overflow:hidden;background:#0c0a09;box-shadow:0 0 0 1px color-mix(in srgb,var(--hs-a) 40%,transparent)}
.h-bg{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;filter:blur(24px) brightness(.4) saturate(1.3);transition:opacity .35s}
.h-img,.h-vid,.h-fx{position:absolute;inset:0;width:100%;height:100%}
.h-img,.h-vid{object-fit:contain;-webkit-user-drag:none}
.h-vid{opacity:0;transition:opacity .3s;pointer-events:none}
.h-vid.on{opacity:1}
.h-fx{display:none;pointer-events:none;z-index:2}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.h-hit{position:absolute;inset:0;z-index:4;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.click{position:absolute;right:14px;bottom:12px;z-index:5;padding:3px 7px;font-size:10px;letter-spacing:.2em;color:var(--accent);opacity:0;pointer-events:none}
.click .m{display:none}
.click.show{animation:click 2.6s ease both}
@keyframes click{0%{opacity:0;background:transparent;color:var(--accent)}10%{opacity:1;background:var(--accent);color:#0A0908}30%{opacity:1;background:transparent;color:var(--accent)}78%{opacity:1}100%{opacity:0}}
.thumbs{display:flex;gap:10px;margin-top:12px;padding:6px 2px 4px;overflow-x:auto;scrollbar-width:none}
.thumbs::before,.thumbs::after{content:"";margin:auto}                    /* centres a short row, still scrolls a long one from its start */
.thumbs::-webkit-scrollbar{display:none}
.th{position:relative;flex:0 0 auto;width:clamp(58px,6.4vw,76px);aspect-ratio:3/4;padding:0;border:0;overflow:hidden;background:#12100e;opacity:.55;cursor:pointer;transition:opacity .3s,transform .3s}
.th.on{opacity:1;transform:translateY(-4px);outline:1px solid var(--accent);outline-offset:1px}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.th s{position:absolute;right:4px;bottom:4px;width:0;height:0;border-left:8px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.data{position:relative;margin-top:14px;padding:18px 22px 20px;text-align:left;font:400 13px/1.9 ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;isolation:isolate}
.data::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(255,106,26,.07) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,106,26,.07) 1px,transparent 1px) 0 0/20px 20px}
.d-head{margin-bottom:6px;font-size:clamp(14px,2.1vw,19px);letter-spacing:.05em;color:var(--accent);word-break:break-word}
.d-row{display:flex;gap:12px}
.d-row span:first-child{min-width:104px;flex-shrink:0;color:var(--dim)}
.d-row span+span{color:var(--text)}
.d-ok{color:var(--muted)}
.d-desc{margin-top:10px;font:400 14px/1.65 var(--body);color:var(--muted)}
.d-desc .zh{display:block;margin-top:4px;color:var(--dim)}

/* ---------- viewer + easter egg ---------- */
.lb{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overscroll-behavior:contain;background:rgba(6,5,4,.96);opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .4s steps(8),opacity .25s,visibility 0s .4s}
.lb.open{opacity:1;visibility:visible;clip-path:inset(0);transition:clip-path .4s steps(8),opacity .25s,visibility 0s}
.lb-top{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 10px;font-size:12px;letter-spacing:.2em;color:var(--muted)}
.lb-x,.lb-nav{padding:10px 16px;border:0;background:var(--panel);color:var(--text);font-size:11px;cursor:pointer;--l:10px}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(52px,7vw,100px);overflow:hidden}
.lb-stage img,.lb-stage video{display:block;max-width:100%;max-height:100%;object-fit:contain}
.lb-stage.zoomed{overflow:auto;align-items:flex-start;justify-content:flex-start}
.lb-stage.zoomed img{max-width:none;max-height:none}
.sw,.sw img,.sw video{animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.lb-nav{position:absolute;top:50%;width:42px;height:62px;padding:0;transform:translateY(-50%);color:var(--accent);font-size:20px;z-index:6}
.lb-nav.prev{left:clamp(6px,1.4vw,20px)}
.lb-nav.next{right:clamp(6px,1.4vw,20px)}
.lb-cap{flex-shrink:0;margin:12px var(--pad) calc(16px + env(safe-area-inset-bottom,0px));padding:14px 18px}
.lb-cap .row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb-cap .acts{display:flex;gap:10px}
.lb-cap h3{font-size:15px}
.lb-cap p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted)}
.lb-cap p .zh{display:block;margin-top:4px;color:var(--dim)}
.crash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#050403}
.crash::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.win{width:min(560px,100%);padding:28px;font:400 14px/1.9 ui-monospace,Menlo,Consolas,monospace;animation:crt .6s steps(12) both}
.win .ttl{margin-bottom:14px;font:700 13px/1.4 var(--display);letter-spacing:.14em;color:var(--accent)}
.win b{color:var(--accent);font-weight:400}
.win .dim{color:var(--muted)}
.win .btn{margin-top:22px}
@keyframes crt{0%{scale:1 .01;filter:brightness(1.8)}35%{scale:1 .05}70%{scale:1 1;filter:brightness(1.3)}100%{scale:1 1;filter:none}}
#page.shake{animation:shake .45s linear 1}
@keyframes shake{0%,100%{translate:0 0}15%{translate:-5px 2px}30%{translate:5px -2px}45%{translate:-4px -1px}60%{translate:4px 2px}80%{translate:-2px 1px}}

/* glitch helpers (added and removed by js/main.js) */
.gbar{position:absolute;pointer-events:none;opacity:0;mix-blend-mode:screen}
.cp{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;pointer-events:none;color:transparent;text-shadow:none;mix-blend-mode:screen}
.cp.c{-webkit-text-stroke:2px var(--cyan)}.cp.m{-webkit-text-stroke:2px var(--mag)}.cp.s{-webkit-text-stroke:2px var(--yel);opacity:0}

/* ---------- scroll guide (every screen size): one block is lit as you scroll, the rest dim back ---------- */
.spy-item{opacity:.42;transform-origin:left center;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.spy-item.hud,.spy-item .hud{--t:0px}                                   /* these blocks wear brackets only while lit */
.spy-item.in-focus{opacity:1;transform:scale(1.03)}
.in-focus.hud,.in-focus .hud{--t:2px;animation:lock .8s ease-out both}

#character .spy-item,#work .spy-item{transform-origin:center}            /* centred blocks zoom from their middle */

/* ---------- hover: real desktops only ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  .btn:hover{background:var(--soft)}.btn.solid:hover{background:var(--accent);transform:translateY(-2px)}
  .nav a:hover::after,.nav button:hover::after{width:100%}.nav a:hover,.nav button:hover{color:var(--accent)}
  .peek:hover,.exprs button:hover,.view button:hover,button.chip:hover{border-color:var(--accent)}
  .links a:hover{color:var(--accent);border-color:var(--accent)}
  .crash-btn:hover{background:var(--soft)}
  .th:hover{opacity:1}
  .dots button:hover{color:var(--text)}.dots button:hover .lb{max-width:120px;opacity:1}
  .lb-x:hover,.lb-nav:hover{background:var(--soft)}
}

/* ---------- tablet + mobile: no hover, no permanent brackets; one block is lit as you scroll ---------- */
@media (max-width:1024px),(hover:none){
  .hud{--t:0px}
  .hud.keep{--t:2px}                                                    /* About skills panel always keeps its brackets */
  .menu-btn,.menu-list,.lb-x,.lb-nav{border:1px solid var(--line)}
  .click .d{display:none}.click .m{display:inline}
}
@media (max-width:1100px){.work-item{max-width:100%}}
@media (max-width:900px){
  .pin{--ch:max(150px,min(calc(var(--u)*100 - var(--ih,250px) - 190px),520px));--cb:calc(var(--ih,250px) + 20px + env(safe-area-inset-bottom,0px))}
  .info{left:12px;right:12px;width:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .step{padding:18px 18px 20px;align-self:start}
  .step p{font-size:14px;margin-top:10px}
  .view{display:none}
  .dots{right:8px;top:calc(var(--u)*100 - var(--cb) - .64*var(--ch))}
  .floor{height:40%}
  .split,.lab{grid-template-columns:minmax(0,1fr)}
  .lab{justify-items:center}
}
@media (max-width:768px){
  .exprs{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
  .exprs span{display:none}
  .tile{width:min(100%,340px)}
  .lb-stage{padding:0 8px}
  .lb-nav{top:auto;bottom:10px;transform:none;width:44px;height:44px}
  .lb-cap .row{flex-wrap:wrap}
  .d-row span:first-child{min-width:84px}
  .hero{aspect-ratio:4/3}
}
@media (max-width:520px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .menu-list{display:flex}
  .btn{padding:11px 18px}
  .hint{display:none}
  .dots{right:6px;gap:6px}
  .dots button{gap:6px;height:26px}
  .dots button::after{width:8px}
  .dots [aria-current=true] .lb{padding:2px 6px;background:rgba(10,9,8,.6)}
  .dots.open [aria-current=true] i{width:28px}
}
@media (min-width:901px) and (max-width:1360px){.char{left:57%}}
@media (orientation:landscape) and (max-height:540px){
  .pin{--ch:66vh;--cb:4vh}
  .char{left:70%}
  .info{left:var(--pad);right:auto;width:min(380px,48vw);bottom:12px}
  .dots{top:50%}
  .hint,.view{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,::before,::after{animation:none!important;transition-duration:.001ms!important}}