.hero-demo{min-width:0;width:100%;align-self:center;border:1px solid #39465f;border-radius:26px;background:radial-gradient(ellipse at 90% 0,#372b6338,transparent 60%),#0b111e;box-shadow:0 30px 100px #02050b80;overflow:hidden;color:#eef4ff}.hero-demo [hidden]{display:none!important}.hd-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 24px 18px}.hd-kicker{font:600 17px/1.5 var(--mono);letter-spacing:1px;color:#a8bfd9}.hd-pause{font:500 17px/1.4 var(--font);color:#c8def3;border:1px solid #37435b;background:#152035;border-radius:8px;padding:8px 12px;cursor:pointer}.hd-pause:disabled{opacity:.7;cursor:default}.hd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 24px 20px}.hd-tabs button{min-width:0;font:500 19.5px/1.3 var(--font);color:#c3cee0;background:#141d30;border:1px solid #293750;border-radius:9px;padding:11px 8px;cursor:pointer;white-space:normal}.hd-tabs button[aria-selected=true]{color:#b9fbff;border-color:#69e5ee;background:#163342;box-shadow:inset 0 -2px #7de7ee}.hero-demo button:focus-visible,.hero-demo a:focus-visible,.hd-panel:focus-visible,.hd-game:focus-visible{outline:3px solid #a8efff;outline-offset:-4px}.hd-stage{height:580px;border-top:1px solid #2a354d;position:relative}.hd-panel{height:100%;padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0;overflow:hidden}.hero-demo .hd-panel h2{font:500 30px/1.18 var(--display);letter-spacing:-.5px;margin:0;color:#f1f5ff}.hd-chip{align-self:flex-start;display:inline-flex;padding:6px 10px;border-radius:7px;border:1px solid #435074;background:#24233d;font-size:18px;line-height:1.3;color:#d7c9ff}.hd-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.hd-dot{width:9px;height:9px;border-radius:50%;background:#7de7ee;box-shadow:0 0 20px #7de7ee80}.hd-profit{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:21px;color:#b3c5de}.hd-profit strong{font-size:47px;font-weight:500;letter-spacing:-2px;color:#8af2d1}.hd-profit strong span{font-size:28px;letter-spacing:0}.hd-chart{display:block;width:100%;min-height:130px;flex:1;overflow:visible}.hd-grid{fill:none;stroke:#29334b;stroke-width:1}.hd-chart-line{fill:none;stroke:#8cebf3;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:650;stroke-dashoffset:0;animation:hdTrace 4s ease-in-out infinite;animation-play-state:paused}.hd-marker circle{fill:#8af2d1;stroke:#122b2d;stroke-width:5;animation:hdSignal 2s ease-in-out infinite;animation-play-state:paused}.hd-marker text{fill:#9af7dc;font:600 24px var(--mono)}.hd-sell circle{fill:#ee9aca}.hd-sell text{fill:#efb4d8}.hero-demo .hd-note{font-size:18px;line-height:1.5;color:#b9c6df;margin:0}.hd-bottom{margin-top:auto;border-top:1px solid #2a354d;padding-top:15px;display:flex;justify-content:space-between;gap:12px;font-size:19.5px;line-height:1.4;color:#aebed6}.hd-footer{display:flex;justify-content:space-between;gap:10px;padding:18px 24px;border-top:1px solid #2a354d;font:500 16.5px/1.5 var(--mono);letter-spacing:.5px;color:#aebdd5}.hd-phone-layout{display:grid;grid-template-columns:minmax(0,185px) minmax(0,1fr);align-items:center;gap:20px;flex:1;min-height:0}.hd-phone{display:block;max-width:185px;width:100%;border:5px solid #46516a;border-radius:22px;overflow:hidden;background:#070e1b;box-shadow:0 16px 30px #0006}.hd-phone img{display:block;width:100%;height:auto}.hd-phone-copy{display:flex;flex-direction:column;gap:18px;min-width:0}.hd-phone-copy strong{font-size:25.5px;line-height:1.3}.hero-demo .hd-phone-copy p{font-size:21px;line-height:1.5;margin:0;color:#bfcee2}.hd-phone-copy a{font-size:19.5px;line-height:1.5;color:#8cebf3;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}.hd-web-metrics{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;margin-top:24px}.hd-speed{position:relative;aspect-ratio:1}.hd-speed svg{display:block;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:#243b42;stroke-width:6}.hd-speed-ring{stroke:#88f1d5;stroke-dasharray:308;animation:hdGauge 4s ease infinite;animation-play-state:paused}.hd-speed strong{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:500;letter-spacing:-2px}.hd-speed strong span{font-size:21px;letter-spacing:0}.hd-latency{font-size:21px;line-height:1.4;color:#c5d1e6;min-width:0}.hd-latency strong{display:block;font-size:45px;color:#9cecf4;font-weight:500}.hd-latency strong span{font-size:24px}.hd-bars{display:flex;align-items:flex-end;gap:6px;height:48px}.hd-bars i{flex:1;height:30%;background:#9b9ae5;border-radius:3px;animation:hdBar 2s ease-in-out infinite alternate;animation-play-state:paused}.hd-bars i:nth-child(2n){height:42%;animation-delay:-.7s}.hd-bars i:nth-child(3n){height:55%;animation-delay:-1.2s}.hero-demo .hd-label{margin:0;font-size:21px;line-height:1.5;color:#bdcde2}.hero-demo .hd-game-help{font-size:19.5px;line-height:1.4;color:#bdcde2;margin:0}.hd-game{height:165px;flex-shrink:0;border:1px solid #364766;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(#111c32,#15182c)}.hd-game-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}.hd-game-lanes i{border-right:1px dashed #ffffff15}.hd-game-lanes i:last-child{border:0}.hd-orb,.hd-player{position:absolute;transform:translateX(-50%);left:50%}.hd-player{bottom:8px;font-size:30px;line-height:1;color:#acafff;text-shadow:0 0 18px #b4a0ff88}.hd-orb{width:14px;height:14px;border-radius:50%;top:32px;background:#8cf1e9;box-shadow:0 0 18px #8cf1e9aa}.hd-game [data-lane="0"]{left:16.666%}.hd-game [data-lane="1"]{left:50%}.hd-game [data-lane="2"]{left:83.333%}.hd-orb[data-step="0"]{top:32px}.hd-orb[data-step="1"]{top:42px}.hd-orb[data-step="2"]{top:52px}.hd-orb[data-step="3"]{top:62px}.hd-orb[data-step="4"]{top:72px}.hd-orb[data-step="5"]{top:82px}.hd-orb[data-step="6"]{top:92px}.hd-orb[data-step="7"]{top:102px}.hd-orb[data-step="8"]{top:112px}.hd-orb[data-step="9"]{top:122px}.hd-game-scores{position:absolute;inset:8px 12px auto;display:flex;justify-content:space-between;gap:8px;font-size:18px;color:#cbd9ef}.hd-game-controls{display:flex;gap:8px;flex-wrap:wrap}.hd-game-controls button{border:1px solid #425174;border-radius:8px;background:#1b2941;color:#e6f3ff;font:500 19.5px/1.2 var(--font);padding:10px 12px;min-height:44px;cursor:pointer}.hd-game-controls button[data-game=start]{background:#8cebf3;color:#101b2a;border-color:#8cebf3;flex:1}.hero-demo .hd-game-status{font-size:18px;line-height:1.4;color:#c6c7e4;margin:0}.hd-reel{position:relative;display:grid;place-items:center;flex:1;min-height:0;border:1px solid #35425f;border-radius:14px;background:radial-gradient(ellipse at 0 100%,#72428445,transparent 70%),linear-gradient(140deg,#153443,#181d35);overflow:hidden;padding:10px}.hd-reel-frame{display:block;position:relative;height:100%;max-height:350px;aspect-ratio:9/16;max-width:100%;color:#fff;overflow:hidden;border-radius:9px;animation:hdReveal .45s ease}.hd-reel-frame img{display:block;height:100%;width:100%;object-fit:cover}.hd-reel-frame span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#060910f5);padding:34px 12px 12px;font-size:18px;line-height:1.4}.hero-demo[data-motion=running] .hd-panel:not([hidden]) .hd-chart-line,.hero-demo[data-motion=running] .hd-panel:not([hidden]) .hd-marker circle,.hero-demo[data-motion=running] .hd-panel:not([hidden]) .hd-speed-ring,.hero-demo[data-motion=running] .hd-panel:not([hidden]) .hd-bars i{animation-play-state:running}@keyframes hdTrace{0%{stroke-dashoffset:650}45%,100%{stroke-dashoffset:0}}@keyframes hdSignal{50%{opacity:.35}}@keyframes hdGauge{0%{stroke-dashoffset:308}60%,100%{stroke-dashoffset:0}}@keyframes hdBar{to{transform:scaleY(.65)}}@keyframes hdReveal{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:650px){.hd-stage{height:620px}.hd-top{padding:20px 20px 16px}.hd-tabs{padding:0 20px 18px;grid-template-columns:repeat(2,minmax(0,1fr))}.hd-panel{padding:20px;gap:12px}.hero-demo .hd-panel h2{font-size:27px}.hd-footer{padding:16px 20px;font-size:16px}.hd-phone-layout{grid-template-columns:minmax(0,145px) minmax(0,1fr);gap:14px}.hd-phone{border-width:4px}.hd-phone-copy strong{font-size:23px}.hero-demo .hd-phone-copy p{font-size:19.5px}.hd-speed strong{font-size:36px}.hd-speed strong span{font-size:19.5px}.hd-latency strong{font-size:38px}.hd-web-metrics{gap:12px}}@media(prefers-reduced-motion:reduce){.hero-demo *{animation:none!important;transition:none!important}}

/* Compact studio card: scoped valid font tokens, smaller chrome, stable content stage. */
.hero-demo{--font:'Geist',system-ui,sans-serif;--display:'Geist',system-ui,sans-serif;align-self:start;border-radius:22px}.hd-top{padding:16px 18px 12px;gap:8px}.hd-kicker{font-size:15px;letter-spacing:.5px}.hd-pause{font-size:16px;line-height:1.2;padding:7px 10px}.hd-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px}.hd-tabs button{flex:1 1 auto;min-height:40px;font-size:17px;line-height:1.2;padding:8px 10px;white-space:nowrap;border-radius:8px}.hd-stage{height:460px}.hd-panel{padding:18px;gap:10px}.hero-demo .hd-panel h2{font-size:27px;line-height:1.2}.hd-chip{font-size:17px;padding:4px 8px}.hd-footer{padding:12px 18px;font-size:15px}.hd-phone-layout{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px}.hd-phone{max-width:150px;border-width:4px;border-radius:18px}.hd-phone-copy{gap:12px}.hd-phone-copy strong{font-size:24px}.hero-demo .hd-phone-copy p{font-size:19.5px}.hd-web-metrics{margin-top:8px;gap:16px}.hd-speed{max-width:180px}.hd-profit strong{font-size:42px}.hd-bottom{font-size:18px;padding-top:12px}.hero-demo .hd-game-help{font-size:19.5px;line-height:1.35}.hd-game{height:145px}.hd-game-controls{gap:6px}.hd-game-controls button{min-height:42px;padding:9px 10px;font-size:18px}.hero-demo .hd-game-status{font-size:18px;line-height:1.3}.hd-reel-frame{max-height:260px}.hd-reel{padding:8px}.hero-demo .hd-note{font-size:18px;line-height:1.4}@media(max-width:650px){.hd-top{padding:15px 16px 12px}.hd-tabs{padding:0 16px 14px}.hd-stage{height:480px}.hd-panel{padding:16px;gap:10px}.hero-demo .hd-panel h2{font-size:26px}.hd-footer{padding:12px 16px}.hd-phone-layout{grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:14px}.hd-phone-copy strong{font-size:22.5px}.hd-web-metrics{gap:12px}.hd-speed strong{font-size:34px}.hd-pause{min-height:34px}.hd-reel-frame{max-height:280px}}

/* Equal-size centered pills: 3+2 desktop, 2+2+1 mobile; never stretch the orphan. */
.hd-tabs{justify-content:center}.hd-tabs button{flex:0 1 calc((100% - 12px)/3);max-width:calc((100% - 12px)/3);padding-left:6px;padding-right:6px}@media(max-width:650px){.hd-tabs button{flex-basis:calc((100% - 6px)/2);max-width:calc((100% - 6px)/2)}}

/* Authentic two-theme playable portfolio: same fixed stage, richer responsive board. */
.hd-game-panel{gap:8px}.hero-demo .hd-game-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hd-game-themes{display:flex;gap:6px;flex-shrink:0}.hd-game-themes button{flex:1;min-width:0;min-height:44px;border:1px solid #44526b;border-radius:8px;background:#142039;color:#cad5e7;font:500 15.5px/1.2 var(--font);padding:8px 4px}.hd-game-themes button[aria-pressed=true]{background:#233749;border-color:#7de7ee;color:#c2faff}.hero-demo .hd-game-panel .hd-game-help{font-size:17px;line-height:1.3}.hd-game-panel .hd-game{height:auto;flex:1;min-height:150px;background:radial-gradient(ellipse at 50% 120%,#4e3d7770,transparent 70%),linear-gradient(#071325,#142e42);isolation:isolate}.hd-game::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 15% 24%,#d5f5ff 1px,transparent 1.8px),radial-gradient(circle at 70% 50%,#b7a7ed 1px,transparent 1.8px),radial-gradient(circle at 45% 75%,#fff8 1px,transparent 1.8px);background-size:73px 97px,107px 139px,137px 79px;opacity:.55;animation:hdSpace 16s linear infinite;animation-play-state:paused}.hd-game[data-theme=halloween]{background:linear-gradient(#0d132970,#110a1870),url('/assets/projects/halloween-arena.webp') center/cover}.hd-game[data-theme=halloween]::before{opacity:.15}.hero-demo[data-motion=running] .hd-panel:not([hidden]) .hd-game[data-state=playing]::before{animation-play-state:running}.hd-game-panel .hd-game-lanes{inset:40px 0 0;background:linear-gradient(transparent,#7de7ee0a)}.hd-game-panel .hd-player{bottom:8px;width:58px;height:58px;font-size:0;filter:drop-shadow(0 3px 7px #72e8ff55);transition:left .12s ease}.hd-game-panel .hd-player img{display:block;width:100%;height:100%;object-fit:contain}.hd-game[data-theme=halloween] .hd-player{width:50px;height:66px}.hd-game-panel .hd-orb{width:25px;height:25px;border-radius:0;background:none;box-shadow:none;z-index:1;filter:drop-shadow(0 0 8px #f5b94455)}.hd-orb img{width:100%;height:100%;object-fit:contain;display:block}.hd-game-panel .hd-game-scores{font:500 15px/1.35 var(--font);inset:8px 10px auto;color:#edf6ff;text-shadow:0 1px 4px #000}.hd-game-progress{position:absolute;inset:31px 10px auto;width:calc(100% - 20px);height:4px;border:0;accent-color:#7de7ee;background:#ffffff20}.hd-game-progress::-webkit-progress-bar{background:#ffffff20;border-radius:4px}.hd-game-progress::-webkit-progress-value{background:#7de7ee;border-radius:4px}.hd-game-progress::-moz-progress-bar{background:#7de7ee}.hd-game-state{position:absolute;inset:42% 0 auto;text-align:center;pointer-events:none;font:600 16px/1.3 var(--mono);letter-spacing:3px;color:#fff;text-shadow:0 2px 8px #000}.hd-game[data-state=playing] .hd-game-state{display:none}.hd-game[data-state=success] .hd-game-state{color:#b9ffe6}.hd-catch-burst{display:none;position:absolute;inset:auto auto 52px;left:50%;width:42px;text-align:center;font-size:36px;line-height:1;color:#ffeaa5;pointer-events:none}.hd-game[data-feedback=catch] .hd-catch-burst{display:block;animation:hdCatch .5s ease-out both}.hd-game[data-feedback=catch]{border-color:#79e6c2}.hd-game[data-feedback=miss]{border-color:#bb8b9f}.hero-demo .hd-game-panel .hd-game-status{font-size:16px;line-height:1.35;min-height:22px}.hd-game-project{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font:400 15px/1.4 var(--font);color:#aebfd8}.hd-game-project a{color:#a1edf4;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.hd-game-project a:hover{color:#fff}@keyframes hdSpace{to{background-position:0 97px,0 139px,0 79px}}@keyframes hdCatch{from{opacity:.9;transform:translateX(-50%) scale(.8)}to{opacity:0;transform:translate(-50%,-20px) scale(1.35)}}
.hd-game-panel .hd-orb[data-step="0"]{top:calc(0.0000% + 46.0000px)}.hd-game-panel .hd-orb[data-step="1"]{top:calc(11.1111% + 32.4444px)}.hd-game-panel .hd-orb[data-step="2"]{top:calc(22.2222% + 18.8889px)}.hd-game-panel .hd-orb[data-step="3"]{top:calc(33.3333% + 5.3333px)}.hd-game-panel .hd-orb[data-step="4"]{top:calc(44.4444% + -8.2222px)}.hd-game-panel .hd-orb[data-step="5"]{top:calc(55.5556% + -21.7778px)}.hd-game-panel .hd-orb[data-step="6"]{top:calc(66.6667% + -35.3333px)}.hd-game-panel .hd-orb[data-step="7"]{top:calc(77.7778% + -48.8889px)}.hd-game-panel .hd-orb[data-step="8"]{top:calc(88.8889% + -62.4444px)}.hd-game-panel .hd-orb[data-step="9"]{top:calc(100.0000% + -76.0000px)}
@media(prefers-reduced-motion:reduce){.hd-game-panel *,.hd-game-panel *::before{animation:none!important;transition:none!important}}

.hd-game-panel .hd-game-controls button{min-height:44px}