:root{--c-bg:#0e0c18;--c-surface:#17142a;--c-surface-2:#1f1b38;--c-line:#ffffff14;--c-text:#ece8f7;--c-muted:#a49dc4;--c-gold:#ffcc4d;--c-teal:#5fe3d0;--c-radius:14px;--c-max:1040px;--font:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{background:var(--c-bg);height:100%;font-family:var(--font);color:var(--c-text);margin:0}body:not(.classic-mode){overflow:hidden}[hidden]{display:none!important}#game-view{position:fixed;inset:0}#game{width:100%;height:100%}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.glass{-webkit-backdrop-filter:blur(8px);background:#0e0c18b8}#mode-switch{--switch-w:224px;top:max(10px, env(safe-area-inset-top));right:max(16px, calc((100vw - var(--c-max)) / 2 + 20px));z-index:20;width:var(--switch-w);-webkit-backdrop-filter:blur(10px);background:#0e0c18c7;border:1px solid #ffcc4d59;border-radius:999px;grid-template-columns:1fr 1fr;height:40px;padding:4px;display:grid;position:fixed;box-shadow:0 8px 24px -12px #000000e6}#mode-switch button{z-index:1;color:var(--c-muted);font:800 14px/1 var(--font);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0;transition:color .25s;display:flex;position:relative}#mode-switch button:hover{color:var(--c-text)}#mode-switch button[aria-pressed=true]{color:#1a1423;cursor:default}#mode-switch button:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}#mode-switch .thumb{background:var(--c-gold);border-radius:999px;width:calc(50% - 4px);transition:transform .3s cubic-bezier(.3,.8,.3,1);position:absolute;top:4px;bottom:4px;left:4px;box-shadow:0 4px 14px -4px #ffcc4db3}#mode-switch[data-mode=classic] .thumb{transform:translate(100%)}@media (width<=720px){#mode-switch{--switch-w:196px;height:38px}#mode-switch button{font-size:13px}}#hint{border:1px solid var(--c-line);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 32px);color:var(--c-muted);text-align:center;pointer-events:none;background:#0e0c18b8;border-radius:999px;margin:0;padding:8px 16px;font-size:14px;font-weight:700;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#panel{-webkit-backdrop-filter:blur(12px);width:min(580px,100% - 32px);max-height:46vh;color:var(--c-text);scrollbar-width:thin;scrollbar-color:#fff3 transparent;background:#131023f0;border:1px solid #ffcc4d59;border-radius:18px;padding:18px 20px 20px;line-height:1.55;animation:.2s cubic-bezier(.2,.7,.2,1) pop;position:absolute;bottom:16px;left:50%;overflow:auto;transform:translate(-50%);box-shadow:0 24px 60px -20px #000c,inset 0 0 0 1px #ffffff08}@keyframes pop{0%{opacity:0;transform:translate(-50%)translateY(10px)}}#panel h2{color:var(--c-text);align-items:center;gap:10px;margin:0 40px 14px 0;font-size:20px;font-weight:800;display:flex}#panel h2:before{content:"";background:var(--c-gold);border-radius:2px;width:4px;height:20px;box-shadow:0 0 10px #ffcc4d99}#panel a{color:var(--c-teal);text-decoration:none}#panel p{color:var(--c-muted);margin:0 0 10px}#panel p:first-child{color:var(--c-text);font-weight:700}#panel-close{float:right;z-index:1;border:1px solid var(--c-line);background:var(--c-surface-2);width:32px;height:32px;color:var(--c-muted);border-radius:50%;place-items:center;padding:0;font-size:18px;line-height:1;transition:color .2s,border-color .2s;display:grid;position:sticky;top:0}#panel-close:hover{color:var(--c-gold);border-color:#ffcc4d80}#game-view #panel .projects,#game-view #panel .skill-groups,#game-view #panel .contact{grid-template-columns:1fr;gap:10px}#game-view #panel .project{padding:12px}#game-view #panel .project img{border-radius:13px;width:56px;height:56px}#game-view #panel .skill-group{padding:14px}#game-view #panel .contact li{padding:14px 16px}.chips{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.projects{display:grid}.project{align-items:flex-start;display:flex}.project img{object-fit:cover;flex:none}.contact{padding:0;list-style:none}.contact a{overflow-wrap:anywhere}body.intro #hint,body.intro #dpad{display:none!important}#dpad{display:none}@media (pointer:coarse){#dpad{left:50%;bottom:max(20px, env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;grid-template:"a up b"56px"left c right"56px"d down e"56px/56px 56px 56px;gap:6px;display:grid;position:absolute;transform:translate(-50%)}#dpad button{color:var(--c-gold);touch-action:none;background:#17142ad9;border:1px solid #ffcc4d66;border-radius:14px;place-items:center;padding:0;font-size:18px;transition:background .1s,transform .1s;display:grid;box-shadow:0 6px 16px -8px #000c}#dpad button.active{background:var(--c-gold);color:#1a1423;transform:scale(.94)}#dpad [data-dir=up]{grid-area:up}#dpad [data-dir=down]{grid-area:down}#dpad [data-dir=left]{grid-area:left}#dpad [data-dir=right]{grid-area:right}}@media (pointer:coarse) and (orientation:portrait){#game-view{--game-h:min(75vw, 45vh);--top:64px}#game{top:var(--top);height:var(--game-h);position:absolute}#hint{top:calc(var(--top) + var(--game-h) + 12px);bottom:auto}#panel{top:calc(var(--top) + var(--game-h) + 8px);max-height:none;bottom:208px;transform:translate(-50%)}@keyframes pop{0%{opacity:0}}}@media (pointer:coarse) and (orientation:landscape){#dpad{grid-template-rows:48px 48px 48px;grid-template-columns:48px 48px 48px;left:16px;transform:none}#hint{display:none}#panel{width:min(360px,45%);max-height:none;inset:56px 16px 16px auto;transform:none}@keyframes pop{0%{opacity:0}}}#classic{color:var(--c-text);line-height:1.6}body.classic-mode{scroll-behavior:smooth;background:#0e0c18;height:auto;min-height:100%}html:has(body.classic-mode){scroll-behavior:smooth;background:#0e0c18;height:auto;min-height:100%}#classic a{color:var(--c-teal);text-decoration:none}#classic a:hover{text-decoration:underline}#classic .btn{font:800 15px/1 var(--font);box-shadow:none;cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:10px 18px;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex}#classic .btn:hover{text-decoration:none;transform:translateY(-2px)}#classic .btn:active{transform:translateY(0)}#classic .btn-primary{background:var(--c-gold);color:#1a1423;box-shadow:0 6px 20px -8px #ffcc4db3}#classic .btn-primary:hover{box-shadow:0 10px 26px -8px #ffcc4dd9}#classic .btn-ghost{color:var(--c-text);border-color:var(--c-line);background:0 0}#classic .btn-ghost:hover{border-color:var(--c-teal);color:var(--c-teal)}#classic .topbar{z-index:10;-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);background:#0e0c18c7;position:sticky;top:0}#classic .topbar-inner{max-width:var(--c-max);align-items:center;gap:24px;margin:0 auto;padding:12px 260px 12px 20px;display:flex}#classic .brand{color:var(--c-text);align-items:center;gap:10px;font-weight:800;display:flex}#classic .brand:hover{text-decoration:none}#classic .brand-badge{background:linear-gradient(135deg, var(--c-gold), #ff9f43);color:#1a1423;border-radius:9px;place-items:center;width:34px;height:34px;font-size:14px;display:grid}#classic .topbar-links{gap:22px;margin-left:auto;display:flex}#classic .topbar-links a{color:var(--c-muted);font-size:15px;font-weight:700}#classic .topbar-links a:hover{color:var(--c-text);text-decoration:none}#classic .hero{border-bottom:1px solid var(--c-line);background:radial-gradient(60% 80% at 15% 0,#ffcc4d21,#0000 70%),radial-gradient(50% 70% at 95% 30%,#5fe3d01a,#0000 70%);position:relative;overflow:hidden}#classic .hero:before{content:"";background-image:linear-gradient(var(--c-line) 1px, transparent 1px), linear-gradient(90deg, var(--c-line) 1px, transparent 1px);pointer-events:none;background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0009,#0000 85%);mask-image:linear-gradient(#0009,#0000 85%)}#classic .hero-inner{max-width:var(--c-max);margin:0 auto;padding:72px 20px 64px;position:relative}#classic .eyebrow{color:var(--c-gold);letter-spacing:.08em;text-transform:uppercase;background:#ffcc4d14;border:1px solid #ffcc4d59;border-radius:999px;align-items:center;gap:8px;margin:0 0 16px;padding:6px 14px;font-size:13px;font-weight:800;display:inline-flex}#classic .dot{background:var(--c-gold);width:8px;height:8px;box-shadow:0 0 10px var(--c-gold);border-radius:50%}#classic h1{letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(40px,7vw,68px);font-weight:800;line-height:1.05}#classic .hero-about{max-width:640px;color:var(--c-muted);font-size:18px}#classic .hero-about p{margin:0 0 10px}#classic .hero-about p:first-child{color:var(--c-text);font-weight:700}#classic .stats{flex-wrap:wrap;gap:12px;margin:28px 0;padding:0;list-style:none;display:flex}#classic .stats li{border-radius:var(--c-radius);border:1px solid var(--c-line);background:#17142ab3;min-width:140px;padding:14px 18px}#classic .stats strong{color:var(--c-gold);font-size:28px;line-height:1.1;display:block}#classic .stats span{color:var(--c-muted);font-size:13px;font-weight:600}#classic .hero-cta{flex-wrap:wrap;gap:12px;display:flex}#classic .blocks{max-width:var(--c-max);margin:0 auto;padding:8px 20px 32px}#classic .block{padding:56px 0 8px;scroll-margin-top:64px}#classic .block h2{color:var(--c-text);align-items:baseline;gap:12px;margin:0 0 24px;font-size:30px;font-weight:800;display:flex}#classic .sec-num{color:var(--c-gold);letter-spacing:.1em;font-size:14px}#classic h3{color:var(--c-text)}:is(#classic,#panel) .chips{gap:6px;margin:0}:is(#classic,#panel) .chips li{color:var(--c-teal);background:#5fe3d014;border:1px solid #5fe3d040;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}:is(#classic,#panel) .project,:is(#classic,#panel) .skill-group,:is(#classic,#panel) .contact li{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--c-radius);box-shadow:none;transition:transform .2s,border-color .2s,box-shadow .2s}:is(#classic,#panel) .project:hover,:is(#classic,#panel) .skill-group:hover,:is(#classic,#panel) .contact li:hover{border-color:#ffcc4d73;transform:translateY(-3px);box-shadow:0 14px 30px -16px #ffcc4d73}:is(#classic,#panel) .projects{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}:is(#classic,#panel) .project{gap:14px;padding:16px}:is(#classic,#panel) .project img{background:var(--c-surface-2);border-radius:16px;width:72px;height:72px;box-shadow:0 6px 16px -8px #000c}:is(#classic,#panel) .project h3{margin:0 0 6px;font-size:17px}:is(#classic,#panel) .project h3 a{color:var(--c-text)}:is(#classic,#panel) .project h3 a:hover{color:var(--c-gold);text-decoration:none}:is(#classic,#panel) .project p{color:var(--c-muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0 0 10px;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}:is(#classic,#panel) .skill-groups{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}:is(#classic,#panel) .skill-group{padding:18px}:is(#classic,#panel) .skill-group h3{margin:0 0 12px;font-size:16px}:is(#classic,#panel) .contact{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;margin:0;display:grid}:is(#classic,#panel) .contact li{flex-direction:column;gap:4px;margin:0;padding:18px 20px;display:flex}:is(#classic,#panel) .contact span{min-width:0;color:var(--c-muted);letter-spacing:.08em;text-transform:uppercase;font-size:13px}:is(#classic,#panel) .contact a{color:var(--c-text);font-size:17px;font-weight:800}:is(#classic,#panel) .contact a:after{content:" ↗";color:var(--c-gold)}:is(#classic,#panel) .contact a:hover{color:var(--c-gold);text-decoration:none}#classic .foot{max-width:var(--c-max);border-top:1px solid var(--c-line);color:var(--c-muted);text-align:center;margin:40px auto 0;padding:24px 20px 40px;font-size:14px}#classic.enter .hero-inner>*{animation:.6s cubic-bezier(.2,.7,.2,1) both rise}#classic.enter .hero-inner>:nth-child(2){animation-delay:80ms}#classic.enter .hero-inner>:nth-child(3){animation-delay:.16s}#classic.enter .hero-inner>:nth-child(4){animation-delay:.24s}#classic.enter .hero-inner>:nth-child(5){animation-delay:.32s}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}#classic .reveal{opacity:0;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transform:translateY(24px)}#classic .reveal.in{opacity:1;transform:none}@media (width<=720px){#classic .topbar-inner{flex-wrap:wrap;gap:10px 16px;padding:10px 16px}#classic .brand{flex:100%;min-width:0;min-height:38px;padding-right:206px}#classic .topbar-links{gap:18px;width:100%;margin:0;overflow-x:auto}#classic .hero-inner{padding:48px 16px 44px}#classic .hero-about{font-size:16px}#classic .stats li{flex:30%;min-width:0;padding:12px}#classic .stats strong{font-size:22px}#classic .blocks{padding:0 16px 24px}#classic .block{padding-top:44px;scroll-margin-top:100px}#classic .block h2{font-size:24px}:is(#classic,#panel) .projects,:is(#classic,#panel) .skill-groups,:is(#classic,#panel) .contact{grid-template-columns:1fr}}html.modal-open,html.modal-open body{overflow:hidden}:is(#classic,#panel) .project[data-project]{cursor:pointer}:is(#classic,#panel) .project[data-project]:focus-visible{outline:2px solid var(--c-teal);outline-offset:3px}#project-modal{z-index:50;place-items:center;padding:24px 16px;display:grid;position:fixed;inset:0}#project-modal .pm-backdrop{-webkit-backdrop-filter:blur(4px);background:#0806129e;animation:.2s ease-out pm-fade;position:absolute;inset:0}#project-modal .pm-dialog{background:var(--c-surface);width:min(760px,100%);max-height:calc(100dvh - 48px);color:var(--c-text);font-family:var(--font);scrollbar-width:thin;border:1px solid #ffcc4d59;border-radius:20px;padding:24px;line-height:1.6;animation:.25s cubic-bezier(.2,.7,.2,1) pm-pop;position:relative;overflow:auto;box-shadow:0 30px 80px -24px #000000d9}@keyframes pm-fade{0%{opacity:0}}@keyframes pm-pop{0%{opacity:0;transform:translateY(14px)scale(.98)}}#project-modal .pm-close{float:right;z-index:2;border:1px solid var(--c-line);background:var(--c-surface-2);width:36px;height:36px;color:var(--c-muted);border-radius:50%;place-items:center;margin:-8px -8px 0 12px;padding:0;font-size:20px;line-height:1;transition:color .2s,border-color .2s;display:grid;position:sticky;top:0}#project-modal .pm-close:hover{color:var(--c-gold);border-color:#ffcc4d80}#project-modal .pm-head{align-items:center;gap:16px;margin-bottom:18px;display:flex}#project-modal .pm-icon{border-radius:16px;flex:none;width:72px;height:72px;box-shadow:0 6px 16px -8px #000c}#project-modal h2{margin:0 0 8px;font-size:24px;font-weight:800;line-height:1.2}#project-modal .chips li{color:var(--c-teal);background:#5fe3d014;border:1px solid #5fe3d040;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}#project-modal .pm-shots{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:10px;margin:0 -24px 20px;padding:0 24px 8px;display:flex;overflow-x:auto}#project-modal .pm-shots a{scroll-snap-align:start;border-radius:12px;flex:none;scroll-margin-left:24px}#project-modal .pm-shots img{border:1px solid var(--c-line);background:var(--c-surface-2);border-radius:12px;width:auto;height:240px;display:block}#project-modal .pm-desc{color:var(--c-muted);font-size:15px}#project-modal .pm-desc h4{color:var(--c-text);margin:18px 0 6px;font-size:16px;font-weight:800}#project-modal .pm-desc p{margin:0 0 10px}#project-modal .pm-desc ul{margin:0 0 12px;padding-left:20px}#project-modal .pm-desc li{margin:4px 0}#project-modal .pm-desc li::marker{color:var(--c-gold)}#project-modal .pm-store{color:#1a1423;background:#ffcc4d;border-radius:10px;align-items:center;gap:6px;margin-top:10px;padding:10px 18px;font-weight:800;text-decoration:none;transition:transform .15s;display:inline-flex;box-shadow:0 6px 18px -8px #ffcc4db3}#project-modal .pm-store:hover{transform:translateY(-2px)}@media (width<=600px){#project-modal{place-items:end stretch;padding:0}#project-modal .pm-dialog{width:100%;max-height:92dvh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation-name:pm-sheet}@keyframes pm-sheet{0%{opacity:0;transform:translateY(40px)}}#project-modal .pm-shots{margin:0 -16px 16px;padding:0 16px 8px}#project-modal .pm-shots a{scroll-margin-left:16px}#project-modal .pm-shots img{height:200px}#project-modal h2{font-size:20px}#project-modal .pm-icon{border-radius:14px;width:60px;height:60px}}@media (prefers-reduced-motion:reduce){#project-modal .pm-backdrop,#project-modal .pm-dialog{animation:none}}html[data-theme=day] :is(#classic,#game-view,#mode-switch,#project-modal){--c-bg:#f4f7ff;--c-surface:#fff;--c-surface-2:#eaf0fb;--c-line:#1c25411a;--c-text:#1c2541;--c-muted:#56608a;--c-gold:#e8930c;--c-teal:#0d9488}html[data-theme=day] body.classic-mode{background:#f4f7ff}html[data-theme=day]:has(body.classic-mode){background:#f4f7ff}html[data-theme=day] #classic .topbar{background:#f4f7ffd9}html[data-theme=day] #classic .hero{background:radial-gradient(60% 80% at 15% 0,#ffcc4d47,#0000 70%),radial-gradient(50% 70% at 95% 30%,#5fc8ff38,#0000 70%)}html[data-theme=day] #classic .btn-primary{background:#ffcc4d;box-shadow:0 6px 18px -8px #e8930cb3}html[data-theme=day] #classic .eyebrow{background:#ffcc4d2e;border-color:#e8930c66}html[data-theme=day] #classic .dot{background:#f5a524;box-shadow:0 0 8px #f5a524cc}html[data-theme=day] #classic .stats li{background:#fff;box-shadow:0 4px 14px -8px #1c254140}html[data-theme=day] :is(#classic,#panel) .chips li{background:#0d948814;border-color:#0d948847}html[data-theme=day] :is(#classic,#panel) :is(.project,.skill-group,.contact li){box-shadow:0 4px 16px -10px #1c25414d}html[data-theme=day] :is(#classic,#panel) :is(.project,.skill-group,.contact li):hover{border-color:#e8930c80;box-shadow:0 14px 30px -16px #e8930c80}html[data-theme=day] :is(#classic,#panel) .project img{box-shadow:0 4px 12px -6px #1c254173}html[data-theme=day] #mode-switch{background:#ffffffd9;border-color:#e8930c73;box-shadow:0 8px 20px -12px #1c254173}html[data-theme=day] #mode-switch button{color:#56608a}html[data-theme=day] #mode-switch button:hover{color:#1c2541}html[data-theme=day] #mode-switch button[aria-pressed=true]{color:#1a1423}html[data-theme=day] #mode-switch .thumb{background:#ffcc4d}html[data-theme=day] #project-modal .pm-backdrop{background:#1c254159}html[data-theme=day] #project-modal .pm-dialog{border-color:#e8930c73;box-shadow:0 30px 70px -24px #1c25418c}html[data-theme=day] #project-modal .chips li{background:#0d948814;border-color:#0d948847}html[data-theme=day] #panel{scrollbar-color:#1c254140 transparent;background:#fffffff5;border-color:#e8930c73;box-shadow:0 24px 50px -22px #1c25418c}html[data-theme=day] #panel h2:before{box-shadow:0 0 8px #f5a52499}html[data-theme=day] #hint{color:#56608a;background:#ffffffe0;border-color:#1c25411f}html[data-theme=day] #dpad button{color:#e8930c;background:#ffffffeb;border-color:#e8930c80;box-shadow:0 6px 16px -8px #1c254173}html[data-theme=day] #dpad button.active{color:#1a1423;background:#ffcc4d}#transition{--tile:#0e0c18;--tile-edge:#ffcc4d;z-index:100;pointer-events:all;display:grid;position:fixed;inset:0}html[data-theme=day] #transition{--tile:#f4f7ff;--tile-edge:#ffcc4d}#transition i{background:var(--tile);display:block;transform:scale(0)}#transition.cover i{animation:tile-in .26s var(--d) both steps(5)}#transition.uncover i{animation:tile-out .26s var(--d) both steps(5)}@keyframes tile-in{0%{background:var(--tile-edge);transform:scale(0)}70%{background:var(--tile-edge);transform:scale(1.02)}to{background:var(--tile);transform:scale(1.02)}}@keyframes tile-out{0%{background:var(--tile);transform:scale(1.02)}to{background:var(--tile);transform:scale(0)}}@media (prefers-reduced-motion:reduce){#classic.enter .hero-inner>*{animation:none}#classic .reveal{opacity:1;transition:none;transform:none}#classic .btn,:is(#classic,#panel) .project,:is(#classic,#panel) .skill-group,:is(#classic,#panel) .contact li{transition:none}}