/* Midnight observatory. One page-wide sky, with a few personal pixel details. */
:root,:root[data-theme=dark]{color-scheme:dark;--bg:#070b1a;--text:#e6ecff;--muted:#9baacc;--line:#8199d22b;--accent:#8fb8ff;--acid:#101a32;--sky:#0d152b;--coral:#a9c5ff;--cream:#16213a;--paper:#0d162b;--glow:#517de9;--panel:#0c1428;--night:1}
:root[data-theme=light]{color-scheme:light;--bg:#edf3ff;--text:#182d50;--muted:#4e6489;--line:#254b7b2f;--accent:#315eb1;--acid:#dce8fc;--sky:#e4edfe;--coral:#afc7ed;--cream:#d9e6f9;--paper:#f5f8ff;--glow:#6b9bfa;--panel:#e5edfb;--night:0}
html{scroll-padding-top:96px}body{font-family:Familjen,Arial,sans-serif;background:var(--bg);overflow-x:clip;padding-inline:env(safe-area-inset-left,0) env(safe-area-inset-right,0)}
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}.cosmos canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .8s}.webgl-ready .cosmos canvas{opacity:1}.page-frame{position:relative;z-index:1;max-width:1800px;margin:auto;background:transparent}.play-header{position:relative;display:flex;align-items:center;min-height:96px;padding:18px 5%;padding-top:calc(18px + env(safe-area-inset-top,0px));gap:36px;border-bottom:1px solid var(--line)}.play-brand{display:flex;flex-direction:column;font-size:22px;line-height:.88;letter-spacing:-1.2px;font-weight:700;margin-right:auto;padding:8px 0}.play-brand span{font-size:17px}.play-header nav{display:flex;gap:30px;font:12px/1.4 JetBrains,monospace}.play-header nav a{min-height:44px;min-width:44px;justify-content:center;display:flex;align-items:center;border:0;padding:10px 0}.play-header nav a:hover{color:var(--accent)}.play-header .theme-toggle{width:44px;min-width:44px;height:44px;padding:11px;border:1px solid var(--line);border-radius:50%;background:var(--bg)}.theme-toggle svg{width:20px;height:20px}
.experience{position:relative;min-height:600px;height:min(780px,calc(100svh - 96px));border-bottom:1px solid var(--line);isolation:isolate;touch-action:pan-y pinch-zoom}.hero-copy{position:relative;z-index:2;padding:75px 0 0 7%;width:49%;pointer-events:none}.hero-intro,.section-caption{font:10px/1.6 JetBrains,monospace;letter-spacing:.035em;color:var(--muted)}.hero-intro{display:flex;align-items:center;gap:12px;white-space:nowrap}.pixel-mark{display:inline-block;width:7px;height:7px;background:var(--accent);box-shadow:7px 0 0 #8fb8ff3d,0 7px 0 #8fb8ff3d}.hero-copy h1{font-size:clamp(88px,10.4vw,155px);font-weight:500;line-height:.88;letter-spacing:-.075em;margin:38px 0 28px}.name-word{display:block;position:relative;white-space:nowrap}.name-char{display:inline-block;transform:translateY(var(--lift,0px));will-change:transform}.hero-note{font-size:18px;line-height:1.5;color:var(--muted);letter-spacing:-.3px}.scene-bottomline{position:absolute;bottom:36px;left:7%;right:7%;display:flex;align-items:end;justify-content:space-between;gap:25px;z-index:3}.interaction-hint{font:10px/1.8 JetBrains,monospace;color:var(--muted)}.warp-toggle{display:flex;align-items:center;gap:18px;color:var(--text);background:var(--bg);border:1px solid var(--line);font:11px JetBrains,monospace;min-height:50px;padding:12px 20px;transition:border-color .2s,box-shadow .3s}.warp-toggle>span{font-size:22px;color:var(--accent)}.warp-toggle:hover,.warp-toggle[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 30px #7c9dff1a}.sky-label{position:absolute;right:5%;top:44%;font:8px JetBrains,monospace;letter-spacing:.2em;writing-mode:vertical-rl;color:var(--muted)}.celestial-fallback{position:absolute;width:42%;aspect-ratio:1;right:8%;top:13%;border-radius:50%;background:radial-gradient(circle,#020512 0 39%,#e0eaff 41%,#6b95fd 42%,#27376f55 47%,transparent 64%);filter:drop-shadow(0 0 25px #6994ff33);pointer-events:none}.webgl-ready .celestial-fallback{display:none}
.work-playground{position:relative;padding:100px 7% 100px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--bg) 17%,var(--bg) 82%,transparent)}.section-top{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:38px}.section-top h2{font-size:clamp(44px,5.2vw,72px);line-height:1;letter-spacing:-.055em;font-weight:500;margin-top:15px}.section-aside{font:10px/1.7 JetBrains,monospace;color:var(--muted);max-width:160px}.project-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:22px}.project-placeholder{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);min-width:0;transition:border-color .3s,box-shadow .4s}.project-wide{grid-row:span 2}.project-placeholder:hover{border-color:#8199d270;box-shadow:0 0 45px #4e7ad514}.project-art{position:relative;height:180px;overflow:hidden}.project-wide .project-art{height:441px}.signal-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.signal-action{position:absolute;left:20px;bottom:15px;display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:10px 12px;min-height:44px;font:9px JetBrains,monospace;transition:color .2s,border-color .2s}.signal-action:hover,.signal-action[aria-pressed=true]{color:var(--text);border-color:var(--accent)}.signal-action span{color:var(--accent);font-size:14px}.project-caption{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:20px;border-top:1px solid var(--line);min-height:82px}.project-caption>div{display:flex;align-items:center;gap:16px}.project-number{font:9px JetBrains,monospace;color:var(--muted)}.project-placeholder h3{font-size:25px;letter-spacing:-.6px;font-weight:500}.placeholder-status{font:8px JetBrains,monospace;color:var(--muted);white-space:nowrap}
.about-placeholder{position:relative;min-height:430px;padding:70px 7%;display:flex;align-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}.about-copy{position:relative;z-index:2;pointer-events:none}.about-placeholder p{font-size:clamp(58px,7vw,100px);line-height:1;letter-spacing:-.065em;margin:23px 0}.about-placeholder p span{color:var(--accent)}.placeholder-note{font:9px JetBrains,monospace;color:var(--muted)}.about-sky{position:absolute;right:0;top:0;width:60%;height:100%;z-index:0;opacity:.9}
.music-section{position:relative;padding:95px 7% 0;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--bg) 13%,var(--bg) 86%,transparent)}.music-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.music-kicker{font:10px JetBrains,monospace;color:var(--muted)}.music-heading h2{font-size:clamp(64px,8vw,110px);font-weight:500;line-height:.95;letter-spacing:-.06em;margin-top:19px}.music-heading .music-invitation{font:16px/1.5 Familjen,Arial,sans-serif;rotate:0deg;color:var(--muted);margin:0}.music-status{font:10px/1.8 JetBrains,monospace;color:var(--muted)}.pixel-walkway{position:relative;height:235px;margin:45px -8.2% 0;overflow:hidden;image-rendering:pixelated}.moon-ground{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.pixel-buddy{position:absolute;left:calc(var(--buddy-x,.68) * (100% - 96px));bottom:42px;width:96px;height:96px;background:url('/assets/buzz-sprite.png') 0 0 /768px 96px no-repeat;image-rendering:pixelated;transform:translateX(var(--buddy-travel,0px)) scaleX(var(--buddy-facing,1));animation:buddy-walk 1.4s steps(8) infinite;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.walkway-message{position:absolute;left:7%;bottom:17px;font:9px JetBrains,monospace;color:var(--muted)}.play-footer{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px 5%;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));background:var(--bg)}.footer-name{font-size:20px;letter-spacing:-.7px;font-weight:500;white-space:nowrap}.footer-social{display:flex;gap:24px}.footer-social a{display:flex;align-items:center;gap:8px;font:10px JetBrains,monospace;min-height:44px;color:var(--muted)}.footer-social a:hover{color:var(--text)}.footer-social img{width:18px;height:18px;filter:invert(1);opacity:.8}.footer-social a>span{font-size:13px;color:var(--accent)}:root[data-theme=light] .footer-social img{filter:none}.motion-toggle{font:9px JetBrains,monospace;min-height:44px;padding:10px 0;border:0;background:none;color:var(--muted);white-space:nowrap}.motion-toggle:hover{color:var(--text)}
@keyframes buddy-walk{to{background-position:-768px 0}}html[data-motion=paused] *,html[data-motion=paused] *::after{animation-play-state:paused!important}.offscreen .pixel-buddy{animation-play-state:paused}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}:is(main,section)[tabindex="-1"]:focus{outline:none}
@supports(animation-timeline:view()){.section-top h2,.about-copy{animation:section-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}}@keyframes section-reveal{from{opacity:.15;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.hero-copy{padding-left:6%;padding-top:90px}.hero-copy h1{font-size:11vw}.hero-intro{font-size:9px}.experience{min-height:580px}.project-grid{gap:15px}.project-wide .project-art{height:431px}.project-caption{padding:18px 16px}.project-caption>div{gap:10px}.project-placeholder h3{font-size:23px}.project-caption .placeholder-status{font-size:7px}.footer-social{gap:16px}.play-footer{flex-wrap:wrap}.motion-toggle{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.name-char{transform:none!important}.pixel-buddy{background-position:0 0}.section-top h2,.about-copy{opacity:1;transform:none}}

#name{pointer-events:auto}

html[data-motion=paused] .section-top h2,html[data-motion=paused] .about-copy{animation:none!important;opacity:1;transform:none}.warp-toggle:disabled{opacity:.5;cursor:default}