:root{--ink:#073b47;--ink-soft:#0f5866;--aqua-100:#d6f7fc;--aqua-300:#86e6f2;--aqua-500:#1fb6d4;--aqua-700:#0b6f86;--glow:#73ecff8c;--glass-top:#ffffffa3;--glass-bottom:#ffffff38;--glass-edge:#ffffffe6;--glass-shadow:0 18px 40px #00567038, 0 2px 6px #0056701f;--radius-l:24px;--radius-m:18px;--font-display:"Nunito", "Segoe UI", system-ui, sans-serif;--font-body:"Ubuntu", "Segoe UI", system-ui, sans-serif;--font-mono:"Share Tech Mono", ui-monospace, Consolas, monospace;--gutter:16px;--hud-h:52px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%;overflow:hidden}body{color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:linear-gradient(#46aef0 0%,#dff7ff 62%,#2fd8cf 63%,#0a6fa0 100%)}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}:focus-visible{outline:3px solid var(--aqua-500);outline-offset:3px}.webgl{touch-action:none;outline:none;display:block;position:fixed;inset:0}.boot{z-index:50;pointer-events:none;font-family:var(--font-mono);letter-spacing:.22em;color:var(--ink);text-shadow:0 1px #fffc;align-content:center;place-items:center;gap:16px;font-size:13px;transition:opacity .7s,visibility .7s;display:grid;position:fixed;inset:0}.is-ready .boot,.no-webgl .boot{opacity:0;visibility:hidden}.boot-orb{background:radial-gradient(circle at 35% 30%,#fff,#c4f3fc 40%,#36c2dd 100%);border-radius:50%;width:64px;height:64px;animation:1.6s ease-in-out infinite boot-bob;box-shadow:0 0 30px #78ebffb3,inset 0 -6px 12px #0064824d}.boot-caret{animation:1s steps(2,end) infinite caret}@keyframes boot-bob{50%{transform:translateY(-8px)scale(1.04)}}@keyframes caret{50%{opacity:0}}.hud{z-index:5;pointer-events:none;font-family:var(--font-mono);letter-spacing:.14em;color:#073b47cc;text-shadow:0 1px #ffffffbf;font-size:12px;position:fixed;inset:0}.hud-brand,.hud-depth{top:calc(12px + var(--safe-top));position:absolute}.hud-brand{left:calc(14px + var(--safe-left));align-items:baseline;gap:8px;display:flex}.hud-logo{color:var(--ink);font-size:13px}.hud-ver,.hud-label{opacity:.65}.hud-depth{right:calc(14px + var(--safe-right));grid-template-columns:auto auto;place-items:center end;column-gap:8px;display:grid}.hud-value{text-align:right;min-width:10ch;color:var(--ink)}.hud-bar{background:#ffffff8c;border-radius:2px;grid-column:1/-1;width:128px;height:3px;margin-top:5px;overflow:hidden}.hud-bar>span{transform-origin:0;height:100%;transform:scaleX(var(--depth,0));background:linear-gradient(90deg, var(--aqua-300), var(--aqua-700));display:block}.hud.is-flicker{animation:.5s steps(2,end) hud-flicker}.glass-panel{isolation:isolate;border:1px solid #ffffff8c;border-top-color:var(--glass-edge);border-radius:var(--radius-l);background:linear-gradient(160deg, var(--glass-top), var(--glass-bottom));box-shadow:var(--glass-shadow), inset 0 1px 0 #fffffff2, inset 0 0 28px #ffffff38;-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);color:var(--ink);transform-origin:50%;border-left-color:#ffffffc7;padding:clamp(18px,3vw,34px);position:relative}.glass-panel:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff8c,#fff0);border-bottom-right-radius:50% 18%;border-bottom-left-radius:50% 18%;height:46%;position:absolute;inset:0 0 auto}.glass-panel:after,.bio-photo:after{content:"";z-index:2;border-radius:inherit;opacity:var(--crt-flash,0);pointer-events:none;background:#f4feff;position:absolute;inset:0}.glass-panel h2{font-family:var(--font-display);color:var(--ink);text-shadow:0 1px #ffffffd9;margin-bottom:.6em;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:900;line-height:1.1}.glass-panel h2:focus{outline:none}.glass-panel h3{font-family:var(--font-display);letter-spacing:.02em;color:var(--ink-soft);margin-bottom:.4em;font-size:1.05rem;font-weight:800}.monitor{background-image:linear-gradient(160deg, var(--glass-top), var(--glass-bottom)), repeating-linear-gradient(0deg, #005a6e0f 0 1px, transparent 1px 3px)}.glass-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:44px;color:var(--ink);font-family:var(--font-display);letter-spacing:.01em;background:linear-gradient(#ffffffeb 0%,#ffffff73 50%,#aaeefc8c 51%,#ffffffb3 100%);border:1px solid #ffffffeb;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:10px 20px;font-size:.95rem;font-weight:800;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s;display:inline-flex;box-shadow:0 6px 18px #005a7838,inset 0 1px #fff,inset 0 -6px 12px #50d2eb40}.glass-pill:active{transform:scale(.97)}.views{z-index:10;pointer-events:none;position:fixed;inset:0}.view{visibility:hidden;opacity:0;position:absolute;inset:0}.view[data-active] :is(button,a,.glass-panel,.bio-photo){pointer-events:auto}.hint-touch{display:none}@media (hover:none){.hint-touch{display:inline}.hint-hover{display:none}}.view-landing{padding:calc(var(--hud-h) + var(--safe-top)) var(--gutter) calc(20px + var(--safe-bottom));grid-template-rows:1fr auto 1fr;place-items:center;display:grid}.hero{text-align:center;align-self:end;padding-bottom:clamp(6px,2vh,18px)}.hero-kicker{font-family:var(--font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 10px #ffffffe6,0 1px #fffc;font-size:clamp(.7rem,1.6vw,.85rem)}.hero-title{font-family:var(--font-display);letter-spacing:-.01em;background:linear-gradient(#fff 0%,#f1fcff 44%,#8fe6f4 52%,#2bb5d6 100%);color:#0000;filter:drop-shadow(0 2px #fff9)drop-shadow(0 6px 14px #00466473);-webkit-background-clip:text;background-clip:text;margin-top:6px;font-size:clamp(2.5rem,8vw,5.4rem);font-weight:900;line-height:1}.hero-title:focus{outline:none}.hero-sub{font-family:var(--font-display);color:#fff;text-shadow:0 1px 2px #003c5a80,0 0 14px #0078a059;margin-top:10px;font-size:clamp(.95rem,2.2vw,1.25rem);font-weight:800}.orb-anchor{aspect-ratio:1;pointer-events:none}.view-landing .orb-anchor{width:min(42vh,72vw)}.hero-enter{align-self:start;margin-top:clamp(6px,2vh,18px)}.pulse-dot{background:var(--aqua-500);border-radius:50%;flex:none;width:10px;height:10px;animation:1.8s ease-out infinite pulse}.view-menu{padding:calc(var(--hud-h) + var(--safe-top)) var(--gutter) calc(16px + var(--safe-bottom));grid-template-rows:minmax(0,36vh) auto;align-content:center;justify-items:center;gap:14px;display:grid}.view-menu .orb-anchor{max-width:72vw;height:100%}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,560px);display:grid}.aero-card{isolation:isolate;border-radius:var(--radius-m);min-height:clamp(104px,17vh,150px);box-shadow:var(--glass-shadow), inset 0 1px 0 #fff, inset 0 -10px 24px #5ad7f02e;-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);color:var(--ink);font-family:var(--font-display);text-align:center;background:linear-gradient(165deg,#ffffffb8,#ffffff3d 60%,#a0f0ff4d);border:1px solid #ffffffd1;align-content:center;justify-items:center;gap:6px;padding:16px 12px;transition:transform .35s cubic-bezier(.2,.9,.3,1.25),box-shadow .35s,background .35s;display:grid;position:relative;overflow:hidden}.aero-card:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(#fffc,#fff0);position:absolute;inset:0 0 50%}.aero-card:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#0000,#fffc,#0000);width:40%;position:absolute;top:-20%;bottom:-20%;left:-60%;transform:translate(-120%)skew(-18deg)}.aero-card.fx-glare:after{animation:.9s ease-out glare}.card-icon{width:42px;height:42px;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff,#c4f3fc 42%,#36c2dd 100%);border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 -3px 6px #00648240,0 3px 8px #00648240}.card-icon svg{width:22px;height:22px}.card-title{font-size:clamp(.92rem,1.6vw,1.1rem);font-weight:900;line-height:1.15}.card-sub{font-family:var(--font-body);opacity:.78;font-size:.8rem}.card-badge{color:#bff6ff;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;background:#073b47cc;border-radius:6px;padding:3px 8px;font-size:.7rem}.aero-card.is-locked{cursor:not-allowed;color:#073b47c7;background:linear-gradient(165deg,#ffffff8c,#ffffff29)}.card-static{z-index:-1;opacity:.2;mix-blend-mode:multiply;pointer-events:none;background:repeating-linear-gradient(0deg,#073b4740 0 1px,#0000 1px 3px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:.4s steps(4,end) infinite static-noise;position:absolute;inset:0}.ripple{z-index:0;aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,#ffffffe6 0 16%,#82ebff80 32%,#0000 62%);border-radius:50%;width:240%;animation:.7s ease-out forwards ripple;position:absolute;transform:translate(-50%,-50%)scale(0)}.fx-deny{animation:.5s cubic-bezier(.36,.07,.19,.97) both deny}.fx-deny .card-title{text-shadow:2px 0 #ff005a73,-2px 0 #00dcff99}.section-shell{padding:calc(var(--hud-h) + var(--safe-top)) calc(var(--gutter) + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#fffc transparent;flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;inset:0;overflow-y:auto}.view[data-active] .section-shell{pointer-events:auto}.back-btn{z-index:3;flex:none;align-self:flex-start;position:sticky;top:0}.bio-layout{justify-items:center;gap:clamp(16px,4vw,56px);width:min(100%,1060px);display:grid}.bio-photo{aspect-ratio:1079/1280;perspective:1000px;transform-origin:50%;border-radius:20px;width:min(60vw,240px);position:relative}.bio-photo img{object-fit:cover;border:3px solid #ffffffd9;border-radius:20px;width:100%;height:100%;transition:transform .5s,box-shadow .5s;transform:rotateY(8deg)rotateX(4deg);box-shadow:-15px 25px 35px #003c5a4d,0 0 0 1px #00789626}.bio-panel{width:100%}.panel-body p{margin-bottom:1em;font-size:clamp(.98rem,1.15vw,1.06rem);line-height:1.7}.panel-body p:last-child{margin-bottom:0}.skills-layout{grid-template-areas:"monitor""tech""app";gap:14px;width:min(100%,1200px);display:grid}.skills-monitor{grid-area:monitor}.info-tech{grid-area:tech}.info-app{grid-area:app}.monitor-hint{font-family:var(--font-mono);letter-spacing:.06em;color:var(--ink-soft);margin-top:-.4em;font-size:.78rem}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px;margin-top:14px;display:grid}.skill-item{color:var(--ink);font-family:var(--font-display);background:linear-gradient(#ffffff8c,#ffffff2e);border:1px solid #fff9;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px 10px;font-weight:800;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),background .3s,box-shadow .3s;display:flex;box-shadow:inset 0 1px #fff}.skill-item[aria-pressed=true]{box-shadow:0 0 0 2px var(--aqua-300), 0 8px 18px #00789640, inset 0 1px 0 #fff;background:linear-gradient(#ffffffd9,#aaeefc73);border-color:#fff}.skill-icon{object-fit:contain;filter:drop-shadow(0 2px 4px #00a3b34d);width:45px;height:45px;transition:transform .3s}.info-panel p{font-size:.95rem;line-height:1.6}.detail-link{margin-top:14px}.detail-link[hidden]{display:none}.detail-panel{gap:16px;width:min(100%,860px);display:grid}.detail-panel h2{margin-bottom:0}.screenshot-container{background:#00283c14;border:2px solid #ffffffb3;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 20px #0000001a,0 8px 20px #00a3b326}.project-screenshot{object-fit:contain;filter:saturate(1.05)contrast(1.03);width:100%;height:auto;max-height:min(48vh,440px)}.project-info-footer p{line-height:1.6}.fx-ghost{z-index:60;pointer-events:none;margin:0;position:fixed;box-shadow:0 0 40px #82ebffcc,inset 0 1px #fff}@media (hover:hover){.glass-pill:hover{box-shadow:0 10px 24px #005a7847, 0 0 18px var(--glow), inset 0 1px 0 #fff, inset 0 -6px 12px #50d2eb4d;transform:translateY(-2px)scale(1.03)}.aero-card:not(.is-locked):hover{background:linear-gradient(165deg,#ffffffd9,#ffffff59 60%,#a0f0ff66);transform:translateY(-6px)scale(1.02);box-shadow:0 18px 36px #005a7847,0 0 26px #78ebff8c,inset 0 1px #fff,inset 0 0 22px #fff9}.aero-card:not(.is-locked):hover:after{animation:.9s ease-out glare}.skill-item:hover{background:linear-gradient(#ffffffd9,#ffffff59);transform:scale(1.08)translateY(-4px);box-shadow:0 10px 20px #64dc784d,inset 0 0 8px #fff9}.skill-item:hover .skill-icon{transform:rotate(5deg)scale(1.05)}.bio-photo:hover img{transform:rotateY(3deg)rotateX(1deg)scale(1.04);box-shadow:-20px 30px 45px #003c5a59,0 0 0 1px #00789626}}@media (width>=900px),(orientation:landscape) and (width>=600px){.view-menu{grid-template-rows:1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-inline:clamp(24px,6vw,96px)}.view-menu .orb-anchor{width:min(52vh,34vw);max-width:none;height:auto}.menu-grid{justify-self:start;gap:18px;width:min(100%,540px)}.bio-layout{grid-template-columns:auto minmax(0,1fr);align-items:start}.bio-photo{width:auto;height:min(70vh,480px);position:sticky;top:0}.bio-photo img{transform:rotateY(14deg)rotateX(6deg)}.skills-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"monitor monitor""tech app"}}@media (width>=900px){:root{--gutter:clamp(24px, 4vw, 64px)}.section-shell{justify-content:safe center;gap:18px}.bio-layout{align-items:center}.bio-photo{height:min(58vh,480px);position:relative}.bio-photo img{transform:rotateY(18deg)rotateX(8deg)}.bio-panel .panel-body{scrollbar-width:thin;scrollbar-color:#0b6f8673 transparent;max-height:min(52vh,520px);padding-right:10px;overflow-y:auto}}@media (width>=1180px){.skills-layout{grid-template-columns:260px minmax(0,1fr) 260px;grid-template-areas:"tech monitor app";align-items:center}}@media (height<=520px) and (orientation:landscape){:root{--hud-h:40px}.aero-card{min-height:84px;padding:10px}.card-sub,.card-icon{display:none}.view-landing .orb-anchor{width:min(48vh,40vw)}}@media (width<=420px){.hud-label,.hud-ver{display:none}.hud-bar{width:88px}.card-sub{display:none}}@keyframes pulse{0%{box-shadow:0 0 #1fb6d48c}70%{box-shadow:0 0 0 12px #1fb6d400}to{box-shadow:0 0 #1fb6d400}}@keyframes glare{0%{transform:translate(0)skew(-18deg)}to{transform:translate(520%)skew(-18deg)}}@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes deny{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{filter:hue-rotate(40deg);transform:translate(-7px)}40%,60%{transform:translate(7px)}}@keyframes static-noise{0%{background-position:0 0,0 0}25%{background-position:0 1px,-40px 20px}50%{background-position:0 2px,30px -50px}75%{background-position:0 1px,-60px -10px}to{background-position:0 0,10px 40px}}@keyframes hud-flicker{0%,to{opacity:1}30%{opacity:.2}60%{opacity:.85}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.no-webgl,.no-webgl body{overflow:auto}.no-webgl body{background-attachment:fixed}.no-webgl .webgl,.no-webgl .hud,.no-webgl .orb-anchor,.no-webgl .hero-enter,.no-webgl .back-btn,.no-webgl .view-detail{display:none}.no-webgl .views{pointer-events:auto;position:static}.no-webgl .view{visibility:visible;opacity:1;position:static}.no-webgl .view :is(button,a,.glass-panel,.bio-photo){pointer-events:auto}.no-webgl .section-shell{position:static;overflow:visible}.no-webgl .view-landing,.no-webgl .view-menu{padding:32px var(--gutter);display:block}.no-webgl .menu-grid{margin-inline:auto}.noscript{z-index:100;font-family:var(--font-body);background:#ffffffe6;border-radius:12px;padding:12px 16px;position:fixed;inset:auto 16px 16px}