:root{--bg:#ffcf33;--ink:#1b1a3a;--tv:#ff5a36;--cream:#fff6dc;--osd:#8dff7a;
  --grain-fine:none;
  --grain-coarse:none;
  --grain-light:none}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;height:100dvh;overflow:hidden;display:grid;grid-template-columns:minmax(250px,23vw) minmax(0,1fr) 150px;gap:2.5vw;padding:2.6vw;align-items:center}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* One rule for the whole site: a hard shadow means "you can click this". Flat things are not clickable. */
.btn{border:3px solid var(--ink);background:var(--cream);border-radius:12px;font-weight:700;box-shadow:0 4px 0 var(--ink);transition:translate .12s,box-shadow .12s,rotate .12s,background .12s}
.btn:hover{translate:0 -2px;box-shadow:0 6px 0 var(--ink);rotate:-2deg}
.btn:active{translate:0 4px;box-shadow:0 0 0 var(--ink);rotate:0deg}

/* ---------- left column ---------- */
.left{align-self:stretch;display:flex;flex-direction:column;min-height:0;min-width:0}
h1{font:400 clamp(40px,5.4vw,92px)/.88 'Archivo Black',sans-serif;letter-spacing:-.03em}
.tag{display:inline-block;align-self:flex-start;margin-top:14px;background:var(--grain-light) var(--ink);color:var(--bg);font-weight:700;padding:6px 12px;border-radius:99px;font-size:15px}
nav{margin-top:auto}
.guide{list-style:none;padding:0;display:flex;flex-direction:column;gap:5px}
.guide button{width:100%;display:flex;gap:12px;align-items:baseline;background:none;border:2.5px solid transparent;border-radius:12px;padding:6px 10px;font-weight:700;font-size:clamp(14px,1.25vw,18px);text-align:left;transition:translate .15s,border-color .15s}
.guide button b{font:22px 'VT323',monospace;opacity:.6}
.guide button::after{content:'▶';margin-left:auto;font-size:.7em;opacity:0;translate:-8px 0;transition:opacity .15s,translate .15s}
.guide button:hover{translate:6px 0;border-color:var(--ink);background-color:var(--cream)}
.guide button:hover::after{opacity:1;translate:0 0}
.guide button.on{background-color:var(--ink);background-image:var(--grain-light);color:var(--bg);border-color:var(--ink)}
.guide button.on b{opacity:1}
.guide li.sep{margin-top:8px}
a.btn{display:inline-block;text-decoration:none;color:var(--ink);text-align:center}
.links,.links2{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.links .btn,.links2 .btn{padding:9px 12px;font-size:13px}
.links .mail{flex:1}

/* ---------- TV ---------- */
.stage{align-self:stretch;min-height:0;position:relative;container-type:size}
.tv{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(96cqw,138cqh);transition:transform .8s cubic-bezier(.65,0,.25,1),width .5s ease;will-change:transform}
.tv{--u:1}
.tv.tipped{--u:var(--k,.72);transform:rotate(-90deg) scale(var(--k,.72))}
.ant{position:absolute;left:50%;bottom:calc(100% - 3px);width:30%;translate:-50% 0;display:block;overflow:visible}
.tv::after{content:'';position:absolute;left:14%;right:14%;top:100%;height:3.2cqh;border:solid var(--ink);border-width:0 12px}
.body{position:relative;background:var(--grain-coarse),var(--grain-light),none var(--tv);border:4px solid var(--ink);border-radius:30px;padding:3.2%;display:grid;grid-template-columns:minmax(0,1fr) 14%;gap:3%;box-shadow:10px 10px 0 var(--ink)}
.screen{position:relative;aspect-ratio:16/9;background:#111;border:4px solid var(--ink);border-radius:7%/11%;overflow:hidden;container-type:size}
.content{position:absolute;inset:0;color:var(--osd);font-family:'VT323',monospace;container-type:size}
.tv.tipped .content{inset:auto;left:50%;top:50%;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
.content>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slidebox{position:absolute;inset:0;display:none;background:var(--ink);align-items:center;justify-content:center;gap:4%;padding:0 6% 6%}
.content.slide .slidebox{display:flex}
.slidebox img{width:auto;height:auto;max-height:68%;min-width:0;max-width:46%;border:3px solid var(--cream);border-radius:8px;box-shadow:6px 6px 0 #0008;rotate:-4deg}
.slidebox img:nth-child(2){rotate:3deg;translate:0 6%}
.slidebox img:nth-child(3){rotate:-2deg}
.content.slide>#pic{display:none}
.visit{position:absolute;right:5%;bottom:6%;font:700 clamp(calc(12px/var(--u)),4.2cqmin,calc(17px/var(--u))) 'Space Grotesk',sans-serif;padding:7px 14px;border-radius:99px;background:var(--bg)}
.content.slide .osd.ttl{right:38%}
.content.info .visit{display:none}
.content canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:pixelated;pointer-events:none}
.content.zap canvas{opacity:1}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#0003 2px 4px),radial-gradient(ellipse at center,#0000 55%,#0009 100%);pointer-events:none}
.osd{position:absolute;text-shadow:0 0 6px #000,2px 2px 0 #000;font-size:clamp(calc(17px/var(--u)),6.4cqmin,calc(40px/var(--u)));line-height:1;pointer-events:none}
.osd.ch{top:5%;left:5%}
.osd.ttl{left:5%;right:5%;bottom:5%}
.osd.ttl small{display:block;font-size:.75em;color:#fff;margin-top:3px}
.hit{position:absolute;inset:0;background:none;border:0}
.playb{position:absolute;left:50%;top:46%;margin:calc(clamp(calc(56px/var(--u)),20cqmin,calc(104px/var(--u)))/-2) 0 0 calc(clamp(calc(56px/var(--u)),20cqmin,calc(104px/var(--u)))/-2);width:clamp(calc(56px/var(--u)),20cqmin,calc(104px/var(--u)));aspect-ratio:1;border-radius:50%;background:var(--bg);border-width:4px;display:grid;place-items:center}
.playb::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:4px solid var(--bg);animation:ring 1.8s ease-out infinite;pointer-events:none}
.playb::after{content:'';border-left:clamp(calc(16px/var(--u)),6cqmin,calc(30px/var(--u))) solid var(--ink);border-top:clamp(calc(10px/var(--u)),3.7cqmin,calc(19px/var(--u))) solid transparent;border-bottom:clamp(calc(10px/var(--u)),3.7cqmin,calc(19px/var(--u))) solid transparent;margin-left:12%}
@keyframes ring{0%{scale:1;opacity:.9}100%{scale:1.7;opacity:0}}
.varrow{position:absolute;top:46%;margin-top:calc(clamp(calc(40px/var(--u)),13cqmin,calc(60px/var(--u)))/-2);width:clamp(calc(40px/var(--u)),13cqmin,calc(60px/var(--u)));aspect-ratio:1;border-radius:50%;font-size:clamp(calc(14px/var(--u)),5cqmin,calc(22px/var(--u)));font-family:'Space Grotesk',sans-serif;color:var(--ink);padding:0;display:grid;place-items:center}
.varrow.prev{left:4%;animation:nudgeL 2.4s ease-in-out infinite}
.varrow.next{right:4%;animation:nudgeR 2.4s ease-in-out infinite}
@keyframes nudgeR{0%,70%,100%{translate:0 0}80%{translate:6px 0}90%{translate:0 0}95%{translate:4px 0}}
@keyframes nudgeL{0%,70%,100%{translate:0 0}80%{translate:-6px 0}90%{translate:0 0}95%{translate:-4px 0}}
.varrow:hover{animation:none}
.infob{position:absolute;top:5%;right:5%;font:700 clamp(calc(11px/var(--u)),3.6cqmin,calc(15px/var(--u))) 'Space Grotesk',sans-serif;color:var(--ink);padding:5px 12px;border-radius:99px}
.content.single .varrow{display:none}

.tele{position:absolute;inset:0;background:#0a0a2a;padding:clamp(52px,15cqh,84px) 7% 5%;display:none;flex-direction:column;gap:.5em;font-size:clamp(20px,6.2cqh,34px);line-height:1.02;overflow:auto;color:#fff}
.tele b{color:#ff0;font-weight:400;font-size:1.4em;position:absolute;top:clamp(14px,5cqh,30px);left:7%}
.tele p{margin:0}.tele .c{color:#0ff}.tele .g{color:var(--osd)}
.content.info .tele{display:flex}
.content.info .osd,.content.info .playb,.content.info .varrow,.content.info .hit{display:none}

.player{position:absolute;inset:0;display:none;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.content.playing .player{display:block}
.content.playing>:not(.player):not(canvas){display:none}

.panel{display:flex;flex-direction:column;align-items:center;gap:7%;padding-top:5%}
.knob{width:62%;aspect-ratio:1;border-radius:50%;background:var(--cream);border:4px solid var(--ink);position:relative;transition:rotate .4s,scale .15s;padding:0;box-shadow:0 4px 0 var(--ink)}
.knob:hover{scale:1.12;animation:none}
.knob{animation:wig 3.2s ease-in-out infinite}
#k2{animation-delay:1.6s}
@keyframes wig{0%,78%,100%{transform:none}84%{transform:rotate(-22deg)}90%{transform:rotate(18deg)}95%{transform:rotate(-8deg)}}
.kl{font:400 clamp(7px,.8vw,11px) 'Archivo Black',sans-serif;letter-spacing:.08em;margin-top:-6%}
.knob::after{content:'';position:absolute;left:50%;top:8%;width:4px;height:36%;background:var(--ink);translate:-50% 0}
.grill{width:70%;flex:1;min-height:0;background:repeating-linear-gradient(var(--ink) 0 4px,#0000 4px 11px);border-radius:4px;max-height:38%}
.brand{font:400 clamp(8px,.9vw,13px) 'Archivo Black';letter-spacing:.08em}
.stop{position:absolute;right:-16px;top:-16px;width:46px;height:46px;border-radius:50%;background:var(--cream);font-size:18px;display:none;padding:0}
body.playing .stop{display:block}

/* ---------- remote ---------- */
.remote{background:var(--cream);border:4px solid var(--ink);border-radius:28px;padding:14px 12px 16px;box-shadow:8px 8px 0 var(--ink);rotate:4deg;display:grid;gap:9px;justify-items:center}
.remote .led{width:10px;height:10px;border-radius:50%;background:var(--tv);border:2px solid var(--ink)}
.remote .btn{background:#fff;min-height:36px;box-shadow:0 3px 0 var(--ink)}
.rk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.rk.two{grid-template-columns:1fr 1fr}
.rk .on{background:var(--ink);color:#fff}
.remote .ok{width:74px;height:74px;border-radius:50%;background:var(--tv);color:#fff;font-size:13px}
#r-info{width:100%;font-size:12px}
.rl{font:700 9px 'Space Grotesk';letter-spacing:.12em;opacity:.6}
.remote .btn:disabled,.mbar .btn:disabled{opacity:.35;pointer-events:none}
body.playing .remote{display:none}
body.playing .stage{grid-column:2/4}

/* ---------- about ---------- */
.about{display:none;grid-column:2/4;align-self:stretch;min-height:0;overflow:auto;background:var(--grain-fine) var(--cream);border:4px solid var(--ink);border-radius:30px;box-shadow:10px 10px 0 var(--ink);padding:clamp(18px,2.6vw,40px);margin:0 10px 10px 0}
body.show-about .about{display:block}
body.show-about .stage,body.show-about .remote,body.show-about .mbar{display:none}
.infocard{display:none}
.a-top{display:grid;grid-template-columns:clamp(120px,14vw,200px) minmax(0,1fr);gap:clamp(16px,2.6vw,40px);align-items:center}
.portrait{width:100%;aspect-ratio:1;border-radius:50%;border:4px solid var(--ink);background:var(--bg);display:block}
.a-head{font:400 clamp(26px,3vw,46px)/1 'Archivo Black',sans-serif;letter-spacing:-.02em}
.a-lead{font-size:clamp(16px,1.35vw,20px);font-weight:500;line-height:1.35;margin-top:12px;max-width:48ch}
.a-small{font-size:15px;line-height:1.4;margin-top:10px}
.a-foot{font-size:13px;margin-top:10px;opacity:.75}
.a-stats{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(18px,2.2vw,30px)}
.a-stats li{border:3px solid var(--ink);border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(13px,1.1vw,16px);line-height:1.2;background:var(--bg)}
.a-stats b{font:400 clamp(34px,4vw,60px)/1 'Archivo Black',sans-serif}
.a-stats li{background-image:var(--grain-coarse)}
.a-stats li:nth-child(2){background-color:var(--tv)}
.a-stats li:nth-child(3){background:var(--grain-light) var(--ink);color:var(--bg)}
.a-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(20px,2.4vw,32px)}
.about h3{font:400 clamp(18px,1.7vw,24px) 'Archivo Black',sans-serif;margin:22px 0 10px}
.a-cols h3:first-child{margin-top:0}
.sched{list-style:none;padding:0;border-top:3px solid var(--ink)}
.sched li{display:flex;align-items:center;gap:16px;padding:6px 10px;border-bottom:3px solid var(--ink);font-weight:700;font-size:clamp(15px,1.3vw,19px)}
.sched b{font:400 1.5em/1 'VT323',monospace;width:2.6em;flex:none}
.sched em{margin-left:auto;font:700 11px 'Space Grotesk';letter-spacing:.1em;white-space:nowrap}
.sched .now{background:var(--grain-light) var(--ink);color:var(--bg)}
.sched .now em::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tv);margin-right:6px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.8)}}
.tools{display:grid;grid-template-columns:1fr;gap:4px}
.tools dt{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.tools dd{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tools i{font-style:normal;font-size:14px;font-weight:700;border:2px solid var(--ink);border-radius:99px;padding:2px 10px}

.mbar{display:none}

/* ---------- narrow screens ---------- */
@media (max-width:860px){
  body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:14px 14px 16px;gap:10px;align-items:stretch}
  .left{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 10px}
  h1{font-size:8.6vw;line-height:1}h1 br{display:none}
  .tag{margin:0;font-size:12px;padding:4px 9px}
  .links,.remote{display:none}
  nav{width:calc(100% + 28px);margin:2px -14px 0}
  .guide{flex-direction:row;overflow-x:auto;padding:0 14px 4px;gap:6px;scrollbar-width:none}
  .guide button{white-space:nowrap;border-color:var(--ink);border-radius:99px;padding:5px 11px;font-size:13px;gap:6px}
  .guide button::after{display:none}.guide button:hover{translate:none}
  .guide button b{font-size:17px}
  .guide li.sep{margin:0}
  .body{border-radius:20px;box-shadow:6px 6px 0 var(--ink)}
  .tv{width:min(94cqw,150cqh)}
  .tv::after{border-width:0 8px}
  body.playing .stage{grid-column:auto}
  body.info .infocard{display:block;position:absolute;inset:0 6px 6px 0;z-index:5;background:var(--cream);border:4px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:18px;overflow:auto;font-size:16px;line-height:1.4}
  .infocard b{display:block;font:400 21px/1.1 'Archivo Black',sans-serif;padding-right:96px;margin-bottom:4px}
  .infocard p{margin-top:12px}.infocard .c{font-weight:700}
  #info-close{position:absolute;top:12px;right:12px;padding:6px 12px;font-size:13px}
  .kl{display:none}
  .visit{display:none}.osd.ttl small{display:none}.content.slide .osd.ttl{right:5%}
  .slidebox{padding:0 17% 4%}.slidebox img{max-height:60%}
  .mbar{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px}
  .mbar .btn{border-radius:14px;min-height:50px}
  .mbar .go{background:var(--tv);color:#fff}
  .vrow{grid-column:1/-1;display:grid;grid-template-columns:50px 1fr 50px;align-items:center;gap:10px;text-align:center;font-weight:700;font-size:15px}
  .vrow .btn{min-height:42px;border-radius:50%;width:46px;height:46px;padding:0}
  .vrow.single .btn{visibility:hidden}
  .about{grid-column:auto;border-radius:20px;box-shadow:6px 6px 0 var(--ink);margin:0 6px 6px 0}
  .a-top{grid-template-columns:84px minmax(0,1fr);align-items:start}
  .a-head{font-size:24px}.a-lead{font-size:15px;margin-top:8px}
  .a-top .a-small,.links2{margin-left:-98px}
  .a-stats{gap:8px}
  .a-stats li{flex-direction:column;align-items:flex-start;gap:4px;padding:10px;font-size:12px}
  .a-stats b{font-size:34px}
  .a-cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .tv,.knob,.btn{transition:none}
  .knob{animation:none}
  .playb::before,.varrow,.sched .now em::before{animation:none}
}

.tag i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tv);margin-right:7px;animation:pulse 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tag i{animation:none}}


/* ---------- skills ticker ---------- */
body{padding-bottom:calc(2.6vw + 34px)}
.ticker{position:fixed;left:0;right:0;bottom:0;height:34px;background:var(--ink);color:var(--bg);overflow:hidden;display:flex;align-items:center;white-space:nowrap;z-index:6}
.ticker div{display:flex;flex:none;animation:tick 60s linear infinite;font:400 13px 'Archivo Black',sans-serif;letter-spacing:.12em;will-change:transform}
.ticker span{padding:0 18px}.ticker span::after{content:'✦';margin-left:36px;color:var(--tv)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:860px){
  body{padding-bottom:16px;padding-top:40px}
  .ticker{bottom:auto;top:0;height:26px}
  .ticker div{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}}