:root{--bg: #000;--ink: #e2f8ea;--muted: #8db89d;--faint: #44664f;--accent: #2eff7a;--line: rgb(46 255 122 / 14%);--phosphor-tint: #3fee53;--phosphor-rgb: 63, 238, 83;--phosphor-glow: .41;--phosphor-radius: 13px;--sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "JetBrains Mono", "IBM Plex Mono", "Space Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace}@media(color-gamut:p3){:root{--ink: color(display-p3 .9 1 .93);--muted: color(display-p3 .48 .72 .56);--accent: color(display-p3 .12 1 .42)}}@media(dynamic-range:high){:root{--ink: color(display-p3 1.03 1.08 1.04);--accent: color(display-p3 .16 1.08 .46)}}*{box-sizing:border-box}body{margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--sans);cursor:default;font-kerning:normal;font-optical-sizing:auto;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}@media(hover:hover)and (pointer:fine){#field{cursor:none}}.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgb(0 0 0 / 78%) 0%,rgb(0 0 0 / 42%) 16%,transparent 46%),radial-gradient(120% 90% at 15% 85%,rgb(0 0 0 / 42%),transparent 60%)}.frame{position:fixed;inset:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));z-index:1;pointer-events:none;border:1px solid var(--line)}.frame:before,.frame:after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--accent);opacity:.55}.frame:before{top:-1px;left:-1px;border-right:0;border-bottom:0}.frame:after{bottom:-1px;right:-1px;border-left:0;border-top:0}body.phosphor-text h1,body.phosphor-text .tagline,body.phosphor-text .card-foot,body.phosphor-text .proj h2,body.phosphor-text .proj p,body.phosphor-text .vague{text-shadow:0 0 1px rgba(var(--phosphor-rgb),.55),0 0 var(--phosphor-radius) rgba(var(--phosphor-rgb),var(--phosphor-glow))}body.phosphor-text h1{color:var(--phosphor-tint)}body.phosphor-text .tagline,body.phosphor-text .card-foot,body.phosphor-text .foot-link{color:color-mix(in srgb,var(--muted) 34%,var(--phosphor-tint) 66%)}body.phosphor-text .foot-link:hover,body.phosphor-text .foot-link:focus-visible{color:var(--phosphor-tint)}body.phosphor-text .proj p,body.phosphor-text .vague{color:color-mix(in srgb,#a8a8a8 78%,var(--phosphor-tint) 22%)}body.phosphor-text .vague strong{color:color-mix(in srgb,#e5e5e5 42%,var(--phosphor-tint) 58%)}main,footer{position:relative;z-index:2;pointer-events:none}a{pointer-events:auto;cursor:pointer}body.on-projects main{height:100dvh;min-height:100dvh;align-items:flex-end;justify-content:flex-start}body.on-projects #field{touch-action:pan-y}body.on-projects .hint{display:none}body.on-projects #view-projects{display:block;min-height:0;pointer-events:auto}body.on-projects .proj{margin:0 0 18px}@media(min-width:641px){body.on-projects #view-projects h1{margin-left:-.08em;margin-bottom:28px}body.on-projects #view-projects{left:calc(clamp(28px,4vw,56px) - 16px);right:calc(12px + env(safe-area-inset-right));max-width:none;bottom:48px;max-height:calc(100dvh - 82px);overflow-y:auto;overflow-x:hidden;padding:0 14px 16px 16px;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgb(46 255 122 / 42%) transparent}}.project-content{max-width:820px}#view-projects::-webkit-scrollbar{width:4px}#view-projects::-webkit-scrollbar-track{background:transparent}#view-projects::-webkit-scrollbar-thumb{background:#2eff7a6b;border-radius:2px}main{height:100dvh;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 clamp(28px,4vw,56px) 0}.hero{position:absolute;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);bottom:0;padding-bottom:clamp(64px,7.5vh,76px);max-width:820px}h1{margin:0;font-size:clamp(52px,8.5vw,112px);font-weight:600;letter-spacing:-.028em;line-height:.94;color:var(--ink);text-shadow:0 0 8px var(--bg),0 0 22px var(--bg),0 1px 2px rgb(0 0 0 / .6)}.tagline{position:relative;max-width:96ch;margin:8px 0 0;font-family:var(--mono);color:var(--muted);font-size:clamp(13px,1vw,15px);line-height:1.55;letter-spacing:-.01em;text-shadow:0 0 8px var(--bg),0 0 22px var(--bg),0 1px 2px rgb(0 0 0 / .6)}.card-foot{position:fixed;bottom:28px;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);display:flex;align-items:center;gap:22px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);text-shadow:0 0 8px var(--bg),0 0 22px var(--bg)}.card-foot>a[data-route]{flex:0 0 84px}.hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;margin:0;padding:5px 9px;pointer-events:none;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:linear-gradient(120deg,#04140aeb,#000000c7);border:1px solid rgb(46 255 122 / 24%);box-shadow:inset 0 0 18px #2eff7a0d,0 8px 28px #0000006b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .7s ease;text-shadow:0 0 8px var(--bg),0 0 22px var(--bg);user-select:none;-webkit-user-select:none}.hint.show{opacity:1}.hint-detail,.hint-detail[hidden],.motion-hint{display:none}.canvas-tools{position:fixed;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:4;display:flex;align-items:stretch;border:1px solid rgb(46 255 122 / 22%);color:#a6dcb9c7;background:#050c0852;box-shadow:inset 0 0 16px #2eff7a08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.canvas-tools button{position:relative;display:grid;height:30px;place-items:center;padding:0 9px;border:0;border-radius:0;color:inherit;background:transparent;cursor:pointer;transition:color .2s ease,background-color .2s ease,transform .12s ease}.canvas-tools button:hover,.canvas-tools button:focus-visible{color:var(--accent);background:#2eff7a0f}.canvas-tools button:active{color:var(--ink);background:#ffffff1a;transform:scale(.96)}.canvas-tools .clear-ink{display:flex;align-items:center;justify-content:center;gap:7px;font:600 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.canvas-tools .clear-ink svg{width:16px;height:16px}.canvas-tools .clear-ink:active,.canvas-tools .clear-ink[data-feedback=on]{color:var(--accent);background:#2eff7a14}.canvas-tools .tilt-toggle{display:none;width:32px;padding:0;border-right:1px solid rgb(46 255 122 / 16%)}.canvas-tools .tilt-toggle svg{width:15px;height:15px}.canvas-tools .tilt-toggle .phone-glyph{transform-box:view-box;transform-origin:center;transform:rotate(var(--gravity-angle, 0deg))}.canvas-tools .tilt-toggle .phone-screen{stroke-width:1;stroke-opacity:.62}.canvas-tools .tilt-toggle .gravity-arrow{opacity:0;transition:opacity .15s ease}.canvas-tools .tilt-toggle[aria-pressed=true] .gravity-arrow{opacity:1}.canvas-tools .tilt-label{font:600 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.canvas-tools .tilt-toggle[hidden]{display:none}.canvas-tools .tilt-toggle[aria-pressed=true]{color:var(--accent);background:#2eff7a14}.canvas-tools .tilt-toggle[data-state=blocked]{color:#dce6e0a3}body.on-projects .canvas-tools{display:none}.foot-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:clamp(12px,.8vw,13px);text-decoration:none;transition:color .15s ease}.foot-link:hover{color:var(--accent)}.foot-link:active,.foot-link[data-feedback=on]{color:var(--accent);background:#2eff7a14;text-shadow:0 0 8px rgb(46 255 122 / 28%)}.foot-link:focus-visible{color:var(--accent);outline:2px solid var(--accent);outline-offset:4px}.foot-link svg{flex:none;opacity:.85}.proj h2 a:active,.proj h2 a[data-feedback=on]{color:var(--accent);background:#2eff7a14;text-shadow:0 0 8px rgb(46 255 122 / 28%)}body.phosphor-text .proj h2 a[data-feedback=on]{color:var(--phosphor-tint)}@media(max-width:820px){.tagline{white-space:normal}}@media(max-width:640px){.frame{inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}.hint{top:50%;font-size:9px}main{padding:0 20px}.hero{left:20px;right:20px;padding-bottom:calc(56px + env(safe-area-inset-bottom))}main{position:fixed;inset:0;height:100dvh;min-height:0;overflow-x:clip}#view-projects{top:calc(9px + env(safe-area-inset-top));bottom:calc(64px + env(safe-area-inset-bottom));left:20px;right:calc(10px + env(safe-area-inset-right));width:auto;max-width:none;padding:75px 14px 12px 0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;scrollbar-color:rgb(46 255 122 / 42%) transparent;mask-image:linear-gradient(to bottom,transparent 0,#000 36px,#000 calc(100% - 28px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 36px,#000 calc(100% - 28px),transparent 100%)}.project-content{max-width:none}h1{font-size:clamp(40px,11.5vw,56px);letter-spacing:-.02em;line-height:.95}.tagline{margin:2px 0 0;font-size:12.5px;line-height:1.55;white-space:normal}.card-foot{bottom:calc(20px + env(safe-area-inset-bottom));left:20px;right:20px;gap:8px;flex-wrap:nowrap;white-space:nowrap}.card-foot>a[data-route]{flex-basis:72px}.card-foot .foot-link{gap:6px;font-size:11px}.foot-link svg{width:11px;height:11px}body.on-projects main{overflow:hidden}body.on-projects{overflow:hidden}body.on-projects .proj{margin:0 0 26px}}@media(pointer:coarse){html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas-tools .clear-ink{width:92px;min-width:92px;min-height:44px;flex:0 0 92px;padding:0;gap:8px}.canvas-tools .tilt-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:92px;min-width:92px;height:44px;flex:0 0 92px;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.canvas-tools .tilt-toggle svg{width:20px;height:20px}.canvas-tools button:hover{color:inherit;background:transparent}.canvas-tools button:active{color:var(--ink);background:#ffffff1a;transform:scale(.96)}.canvas-tools .tilt-toggle[aria-pressed=true]{color:var(--accent);background:#2eff7a14}.hint{top:50%;left:50%;right:auto;max-width:min(230px,calc(100vw - 112px));transform:translate(-50%,-50%);text-align:center}.hint:before{content:none}.hint-detail{display:block;margin-top:3px;font-size:8px;letter-spacing:.1em;line-height:1.35}.hint-detail{opacity:.76}.motion-hint{position:fixed;top:calc(64px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:3;display:block;max-width:min(205px,calc(100vw - 64px));margin:0;padding:5px 8px;border:1px solid rgb(46 255 122 / 20%);color:var(--accent);background:linear-gradient(120deg,#04140aeb,#000000c7);box-shadow:inset 0 0 14px #2eff7a0a,0 8px 24px #0000005c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 9px/1.35 var(--mono);letter-spacing:.1em;text-align:left;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .7s ease;text-shadow:0 0 8px var(--bg),0 0 22px var(--bg)}.motion-hint.show{opacity:1}.motion-hint:before{position:absolute;top:-4px;right:138px;width:6px;height:6px;content:"";transform:rotate(45deg);border-top:1px solid rgb(46 255 122 / 24%);border-left:1px solid rgb(46 255 122 / 24%);background:#04140aeb}.motion-hint[hidden],body.on-projects .motion-hint{display:none}}@media(prefers-reduced-motion:reduce){.canvas-tools button{transition:none}}@media(prefers-reduced-motion:reduce){.canvas-tools .tilt-toggle .phone-glyph,.canvas-tools .tilt-toggle .gravity-arrow{transition:none}}@media(max-width:360px){.card-foot{gap:6px}.card-foot>a[data-route]{flex-basis:64px}.card-foot .foot-link{gap:4px;font-size:10px}.foot-link svg{width:10px;height:10px}}@media(prefers-reduced-motion:reduce){#field{opacity:.8}}@media(prefers-reduced-transparency:reduce){#field{opacity:.9}}
