:root { color-scheme: light; --ink: #0b0b0b; --paper: #fff; --gutter: clamp(20px, 3vw, 48px); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #0065e5; outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 20; padding: 12px; background: white; }
.skip-link:focus { top: 16px; }
.home-stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; outline: none; }
#ascii-canvas, #threejs-container, #threejs-container canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ascii-canvas { opacity: .66; }
#threejs-container { z-index: 1; }
.home-title { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: .35em .55em .4em; color: white; background: var(--ink); font: 400 clamp(23px, 4.3vw, 70px)/1.12 'Courier New', monospace; letter-spacing: -.06em; white-space: nowrap; box-shadow: 8px 8px 0 #ffffffad; will-change: translate, rotate; }
#typed-title { display: inline-block; min-width: 11ch; }
.cursor { display: inline-block; width: 1ch; animation: blink 1.2s steps(1) infinite; }
.site-header { position: fixed; top: max(var(--gutter), env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter); z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 4px 12px 4px 4px; background: #fff; }
.brand img { display: block; width: 50px; height: 50px; object-fit: contain; }
.brand span { font-size: 21px; font-weight: 700; letter-spacing: -.05em; }
.menu-toggle { position: relative; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: #ffffffed; color: #000; }
.menu-ring { position: absolute; inset: 0; border: 3px solid #00000015; border-top-color: #000; border-right-color: #000; border-radius: 50%; animation: spin 4s linear infinite; }
.menu-word { position: relative; display: flex; background: white; padding: 4px 2px; font: 700 15px/1.2 'Courier New', monospace; letter-spacing: -.06em; }
.menu-word span { display: inline-block; animation: slot 6s infinite; }
.menu-word span:nth-child(2) { animation-delay: .08s; }.menu-word span:nth-child(3) { animation-delay: .16s; }.menu-word span:nth-child(4) { animation-delay: .24s; }
.menu-toggle:hover { background: #fff; }.menu-toggle:hover .menu-ring { border-color: #000; }
.menu-panel { position: fixed; inset: 0 0 0 auto; width: min(390px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom)); color: #fff; background: #0b0b0b; border: 0; overflow-y: auto; }
.menu-panel[open] { display: flex; flex-direction: column; animation: arrive .22s ease-out; }
.menu-panel::backdrop { background: #0005; backdrop-filter: blur(4px); }
.menu-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.menu-header h2 { font-size: 20px; letter-spacing: -.04em; font-weight: 600; margin: 0; }
.menu-close { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ffffff66; color: #fff; background: transparent; font-size: 32px; line-height: 1; }
.menu-close:hover { background: #fff; color: #000; }
.menu-panel nav { margin: clamp(36px, 12vh, 110px) 0 32px; }
.nav-item { display: block; padding: 20px 0; font-size: clamp(26px, 7vw, 36px); letter-spacing: -.04em; border-bottom: 1px solid #ffffff33; }
.nav-item > span[aria-hidden] { float: right; font-size: .75em; padding-top: .16em; }
.nav-item:hover { color: #c4c4c4; }
.nav-separate { margin-top: 32px; }
.nav-item small { display: block; font: 400 14px/1.5 'Courier New', monospace; letter-spacing: 0; color: #aaa; margin-top: 10px; }
.menu-footer { margin: auto 0 0; color: #aaa; font: 14px/1.5 'Courier New', monospace; }
.home-footer { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 14px/1.4 'Courier New', monospace; pointer-events: none; }
.home-footer > span { background: #fff; padding: 6px 8px; }
#motionToggle { min-height: 44px; padding: 9px 12px; border: 0; color: #000; background: #fff; pointer-events: auto; font-size: 14px; }
#motionToggle:hover { background: #000; color: #fff; }
body.motion-paused .menu-ring, body.motion-paused .menu-word span, body.motion-paused .cursor { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slot { 0%, 87%, 100% { transform: translateY(0); } 90% { transform: translateY(-3px); } 94% { transform: translateY(3px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes arrive { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 600px) { .brand span { font-size: 18px; }.brand img { width: 42px; height: 42px; }.menu-toggle { width: 60px; height: 60px; }.home-title { font-size: clamp(21px, 6vw, 36px); box-shadow: 5px 5px 0 #ffffffad; }.home-footer { left: 12px; right: 12px; gap: 8px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .cursor, .menu-ring, .menu-word span, .menu-panel[open] { animation: none; } }