: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}#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{--fs-s:13px;--fs-b:16px;--fs-m:20px;--fs-l:36px;--fs-xl:clamp(44px, 7vw, 76px);color:var(--c-text);font-size:var(--fs-b);line-height:1.6}body.classic-mode{background:var(--c-bg);scroll-behavior:smooth;height:auto;min-height:100%}html:has(body.classic-mode){background:var(--c-bg);scroll-behavior:smooth;height:auto;min-height:100%}#classic a{color:var(--c-teal);text-decoration:none}#classic a:hover{text-decoration:underline}#classic :is(h1,h2,h3){color:var(--c-text)}#classic .btn{font:800 var(--fs-b) / 1 var(--font);border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:12px 20px;transition:background .15s,color .15s,border-color .15s;display:inline-flex}#classic .btn:hover{text-decoration:none}#classic .btn-primary{background:var(--c-gold);color:#1a1423}#classic .btn-primary:hover{background:#ffd970}#classic .btn-ghost{background:var(--c-surface);color:var(--c-text)}#classic .btn-ghost:hover{color:var(--c-teal)}#classic .btn-cv{border-color:var(--c-gold);color:var(--c-gold);background:0 0}#classic .btn-cv:hover{background:var(--c-gold);color:#1a1423}#classic .topbar{z-index:10;background:var(--c-bg);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:var(--c-gold);color:#1a1423;width:34px;height:34px;font-size:var(--fs-s);border-radius:50%;place-items:center;display:grid}#classic .topbar-links{gap:22px;margin-left:auto;display:flex}#classic .topbar-links a{color:var(--c-muted);font-weight:700}#classic .topbar-links a:hover{color:var(--c-text);text-decoration:none}#classic .hero-inner{max-width:var(--c-max);margin:0 auto;padding:56px 20px 72px}#classic .hero-text{max-width:720px}#classic h1{font-size:var(--fs-xl);letter-spacing:-.02em;margin:0;font-weight:800;line-height:1}#classic .role{font-size:var(--fs-m);color:var(--c-gold);margin:12px 0 24px;font-weight:800}#classic .hero-about{color:var(--c-muted)}#classic .hero-about p{margin:0 0 12px}#classic .hero-about p:first-child{color:var(--c-text);font-size:var(--fs-m);font-weight:800}#classic .stats{flex-wrap:wrap;gap:32px;margin:24px 0 28px;padding:0;list-style:none;display:flex}#classic .stats strong{font-size:var(--fs-l);color:var(--c-gold);line-height:1.1;display:block}#classic .stats span{color:var(--c-muted);font-size:var(--fs-s);font-weight:700}#classic .hero-cta{flex-wrap:wrap;gap:12px;display:flex}#classic .block{max-width:var(--c-max);margin:0 auto;padding:64px 20px;scroll-margin-top:64px}#classic .block h2{font-size:var(--fs-l);align-items:center;gap:16px;margin:0 0 32px;font-weight:800;line-height:1.1;display:flex}#classic .sec-icon{flex:none;width:auto;height:56px}#classic .chips{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}#classic .chips li{background:var(--c-surface-2);color:var(--c-teal);font-size:var(--fs-s);border-radius:999px;padding:4px 10px;font-weight:700}#classic [data-project]{cursor:pointer}#classic [data-project]:focus-visible{outline:3px solid var(--c-teal);outline-offset:4px}#classic .shot{aspect-ratio:16/9;background:var(--c-surface-2);gap:4px;display:flex;overflow:hidden}#classic .shot img{object-fit:cover;flex:1;width:100%;min-width:0;height:100%;display:block}#classic .feature{background:var(--c-surface);border-radius:24px;grid-template-columns:1.4fr 1fr;margin-bottom:24px;display:grid;overflow:hidden}#classic .feature .shot{aspect-ratio:auto;min-height:100%}#classic .feature-body{align-self:center;padding:32px}#classic .feature-body .icon{border-radius:18px;width:72px;height:72px}#classic .feature-body h3{font-size:var(--fs-m);margin:16px 0 8px}#classic .feature-body p{color:var(--c-muted);margin:0 0 16px}#classic .project-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}#classic .card{background:var(--c-surface);border-radius:20px;overflow:hidden}#classic .card-body{gap:12px;padding:16px;display:flex}#classic .card-body .icon{border-radius:12px;flex:none;width:48px;height:48px}#classic .card-body h3{font-size:var(--fs-b);margin:0 0 4px;line-height:1.3}#classic .card-body p{color:var(--c-muted);font-size:var(--fs-s);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 10px;line-height:1.5;display:-webkit-box;overflow:hidden}#classic :is(.card,.feature):hover h3{color:var(--c-gold)}#classic :is(.card,.feature) .shot img{transition:transform .4s}#classic :is(.card,.feature):hover .shot img{transform:scale(1.04)}#classic .skill-rows{margin:0}#classic .skill-row{grid-template-columns:260px 1fr;gap:24px;padding:20px 0;display:grid}#classic .skill-row+.skill-row{border-top:2px solid var(--c-surface-2)}#classic .skill-row dt{font-size:var(--fs-m);color:var(--c-text);font-weight:800}#classic .skill-row dd{color:var(--c-muted);font-size:var(--fs-m);margin:0;line-height:1.5}#classic .contact-email{font-size:var(--fs-l);color:var(--c-text);overflow-wrap:anywhere;font-weight:800;line-height:1.2;display:inline-block}#classic .contact-email:hover{color:var(--c-gold);text-decoration:none}#classic .contact-links{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}#classic .foot{max-width:var(--c-max);color:var(--c-muted);font-size:var(--fs-s);margin:0 auto;padding:32px 20px 48px}@media (width<=860px){#classic .feature{grid-template-columns:1fr}#classic .feature .shot{aspect-ratio:16/9}#classic .project-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=720px){#classic{--fs-l:28px}#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:32px 16px 48px}#classic .stats{gap:24px}#classic .block{padding:48px 16px;scroll-margin-top:100px}#classic .sec-icon{height:44px}#classic .feature-body{padding:20px}#classic .project-grid{grid-template-columns:1fr}#classic .skill-row{grid-template-columns:1fr;gap:4px}#classic .skill-row dd{font-size:var(--fs-b)}}@media (prefers-reduced-motion:reduce){#classic :is(.card,.feature) .shot img{transition:none}}#panel .chips{gap:6px;margin:0}#panel .chips li{background:var(--c-surface-2);color:var(--c-teal);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}#panel :is(.project,.skill-group,.contact li){background:var(--c-surface-2);border-radius:var(--c-radius)}#panel .projects{gap:10px}#panel .project{gap:14px}#panel .project[data-project]{cursor:pointer;transition:background .15s}#panel .project[data-project]:hover{background:var(--c-surface)}#panel .project[data-project]:focus-visible{outline:2px solid var(--c-teal);outline-offset:3px}#panel .project img{background:var(--c-surface)}#panel .project h3{margin:0 0 6px;font-size:16px}#panel .project h3 a{color:var(--c-text)}#panel .project h3 a:hover{color:var(--c-gold)}#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}#panel .skill-groups{display:grid}#panel .skill-group h3{margin:0 0 10px;font-size:16px}#panel .contact{margin:0;display:grid}#panel .contact li{flex-direction:column;gap:2px;margin:0;display:flex}#panel .contact span{color:var(--c-muted);font-size:13px;font-weight:700}#panel .contact a{color:var(--c-text);font-size:17px;font-weight:800}#panel .contact a:after{content:" ↗";color:var(--c-gold)}#panel .contact a:hover{color:var(--c-gold)}html.modal-open,html.modal-open body{overflow:hidden}#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 :is(.btn-primary,.brand-badge){background:#ffcc4d}html[data-theme=day] #classic .btn-primary:hover{background:#ffd970}html[data-theme=day] #classic .btn-cv:hover{color:#1a1423;background:#ffcc4d;border-color:#ffcc4d}html[data-theme=day] :is(#classic,#panel) .chips li{color:#0b7a70;background:#0d94881a}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)}}