@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;550;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#e5e5e5;background:#111111;font-synthesis:none;--accent:#d8fc71}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
.experience{position:relative;isolation:isolate;width:100%;height:100svh;overflow:clip}
.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 51% 43%,#212121,#111111 75%);z-index:-3}
.identity{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94%;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,40px);z-index:-1;pointer-events:none}
h1{margin:0;font-size:clamp(48px,17.2vw,340px);line-height:1.04;letter-spacing:-.075em;font-weight:550;white-space:nowrap;padding-right:.075em;color:#e5e5e5}
.title-dot{color:var(--accent)}
.tagline{margin:0;font:400 clamp(12px,1vw,15px)/1.5 'IBM Plex Mono',monospace;letter-spacing:.15em;white-space:nowrap;text-align:center;color:#b0b0b0}
#scene{position:absolute;inset:0;z-index:1;touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='%23d8fc71'/%3E%3C/svg%3E") 12 12,crosshair}#scene canvas{display:block;width:100%;height:100%;outline:none}#scene:focus-visible{outline:1px solid #ffffff40;outline-offset:-12px}
.grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
@media(max-width:600px){.tagline{letter-spacing:.06em;font-size:12px}.identity{gap:22px}}
@media(max-width:360px){.tagline{letter-spacing:0}}
@media(max-height:500px) and (min-width:700px){h1{font-size:15vw}.identity{gap:16px}}
@media(prefers-reduced-motion:reduce){.grain{display:none}}