:root{color-scheme:dark;--ink:#f5f6f3;--muted:#bbc4c7;--accent:#a5e5da}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#080d12;color:var(--ink);font-family:Inter,system-ui,sans-serif}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}canvas{position:fixed;inset:0;width:100%;height:100svh;display:block;touch-action:pan-y;z-index:0}body::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,transparent 25%,#080d1230 55%,#080d1299);pointer-events:none;z-index:1}.fallback{position:fixed;inset:0;background:radial-gradient(ellipse at 30% 45%,#23445d88,transparent 60%),url('/milky-way-light.png') center/cover;opacity:.5;z-index:-1}.fallback img{position:absolute;width:min(34vw,420px);aspect-ratio:1;object-fit:cover;border-radius:50%;left:12%;top:25%;box-shadow:inset -30px -20px 50px #000,0 0 80px #8fcec833}header{position:fixed;z-index:10;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;background:linear-gradient(#080d12dd,transparent);gap:20px}.brand{font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}.back,.skip{font-size:13px;text-decoration:none;border-bottom:1px solid #ffffff40;padding:8px 0}.skip{color:var(--accent)}main{position:relative;z-index:2;pointer-events:none}section{min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:125px 10vw 110px 5vw;scroll-margin-top:0}.content{width:min(100%,470px);text-shadow:0 2px 20px #000}.eyebrow{display:block;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px}h1,h2{font-weight:500;letter-spacing:-.045em;line-height:1.08;margin:0 0 24px}h1{font-size:clamp(40px,4.5vw,70px)}h2{font-size:clamp(34px,3.4vw,52px)}p{color:var(--muted);font-size:17px;line-height:1.75;margin:0 0 20px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border:1px solid #ffffff35;border-radius:999px;background:#102028cc;color:var(--ink);font-size:13px;text-decoration:none;pointer-events:auto;transition:background .2s,border-color .2s}.button.primary{background:var(--accent);color:#102522;border-color:var(--accent)}.button:hover{background:#2b4b52;border-color:var(--accent)}.button.primary:hover{background:#c7f4eb}.skill-list{padding:0;list-style:none;border-top:1px solid #ffffff25}.skill-list li{padding:16px 0;border-bottom:1px solid #ffffff25}.skill-list strong{display:block;font-size:16px;font-weight:500;margin-bottom:5px}.skill-list span{font-size:14px;line-height:1.6;color:var(--muted)}#work .content{width:min(100%,580px)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project{display:block;overflow:hidden;border:1px solid #ffffff24;border-radius:16px;background:#101a22ed;text-decoration:none;pointer-events:auto;transition:transform .2s,border-color .2s}.project:hover{transform:translateY(-4px);border-color:var(--accent)}.project img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.project div{padding:17px}.project small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.project h3{font-size:17px;font-weight:500;line-height:1.3;margin:10px 0}.project p{font-size:13px;line-height:1.5;margin-bottom:14px}.project .visit{font-size:12px;color:var(--accent)}.chapter-nav{position:fixed;z-index:10;right:25px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}.chapter-nav a{width:34px;height:34px;border:1px solid #ffffff30;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:11px;background:#0b131bcc}.chapter-nav a[aria-current="step"]{background:var(--accent);color:#102522;border-color:var(--accent)}footer{position:fixed;z-index:10;bottom:0;inset-inline:0;padding:18px 4vw;display:flex;gap:20px;align-items:center;justify-content:space-between;background:linear-gradient(transparent,#080d12e8);pointer-events:none}#status{font-size:11px;margin:0;max-width:60%;line-height:1.5}#pause{background:#101a22dd;border:1px solid #ffffff35;color:var(--ink);border-radius:999px;padding:10px 15px;cursor:pointer;pointer-events:auto;font-size:12px}#labels{position:fixed;inset:0;z-index:3;pointer-events:none}.label{position:absolute;white-space:nowrap;font-size:12px;color:#eafbf5;text-shadow:0 1px 6px #000;background:#0b171ba8;padding:5px 8px;border:1px solid #a5e5da40;border-radius:5px}.availability{font-size:13px;color:var(--accent);margin-top:25px}.availability::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}a:focus-visible,button:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}body[data-renderer="ready"] .fallback{display:none}body[data-renderer="fallback"] canvas{display:none}
@media(max-width:900px){section{padding-right:80px}.content{width:44vw}.project-grid{grid-template-columns:1fr}.project{display:grid;grid-template-columns:100px 1fr}.project img{height:100%;aspect-ratio:auto}.project p{display:none}h1{font-size:44px}#work .content{width:44vw}.brand{display:none}}
@media(max-width:650px){header{padding:15px 20px}canvas{height:100svh}body::before{background:linear-gradient(transparent 15%,#080d1255 32%,#080d12ed 52%)}section{min-height:100svh;align-items:flex-start;justify-content:center;padding:43svh 24px 140px}.content,#work .content{width:100%;max-width:500px}h1{font-size:40px}h2{font-size:34px}p{font-size:15px;line-height:1.65}.eyebrow{margin-bottom:12px}.skill-list li{padding:12px 0}.chapter-nav{top:auto;bottom:76px;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;gap:12px}.chapter-nav a{width:30px;height:30px}.project-grid{grid-template-columns:1fr}.project{grid-template-columns:110px 1fr}.project h3{font-size:16px}.project div{padding:13px}.actions{margin-top:20px}.label{font-size:10px;padding:3px 5px}footer{padding:15px 20px}#status{max-width:55%;font-size:10px}#pause{font-size:11px}.fallback img{width:180px;left:calc(50% - 90px);top:13%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.project:hover{transform:none}}
/* Keep native swipe scrolling available before and after the 3D controls load. */
@media (max-width:650px), (pointer:coarse) { canvas { pointer-events:none; touch-action:pan-y pinch-zoom !important; } }