:root{--bg: #0a120e;--surface-1: #101d17;--surface-2: #16281f;--text: #eaf3ec;--text-muted: #7fa294;--accent: #e3ac5c;--accent-support: #5ad1e6;--success: #6fcf97;--danger: #ff6b6b;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-6: 48px;--space-8: 64px;--radius: 6px;--glow: 0 0 0 1px rgba(227, 172, 92, .25), 0 0 24px rgba(227, 172, 92, .12)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:16px;line-height:1.5}body{min-height:100vh;display:flex;flex-direction:column;position:relative}.board-grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(227,172,92,.08) 1px,transparent 1px);background-size:var(--space-1) var(--space-1);opacity:.5}.app-header,.app-layout,.app-footer,.about,.site-footer{position:relative;z-index:1}.app-shell{display:flex;flex-direction:column;flex-shrink:0}.app-header{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-2);flex-wrap:wrap}.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.95rem;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:var(--space-1)}.wordmark-glyph{color:var(--accent);transform:rotate(90deg);display:inline-block}.tagline{margin:0;color:var(--text-muted);font-size:.9rem}.gh-link{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;padding:0 var(--space-2);border:1px solid rgba(90,209,230,.4);border-radius:var(--radius);color:var(--accent-support);font-size:.8rem;font-weight:600;text-decoration:none;transition:color .15s ease-out,box-shadow .15s ease-out,border-color .15s ease-out}.gh-link:hover,.gh-link:focus-visible{outline:none;color:var(--text);box-shadow:0 0 0 1px #5ad1e64d,0 0 24px #5ad1e624}.gh-mark{color:var(--accent);font-weight:700}.app-layout{flex:1;display:flex;gap:var(--space-3);padding:0 var(--space-4) var(--space-4)}.input-pane,.board-pane{background:var(--surface-1);border:1px solid rgba(234,243,236,.06);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.input-pane{flex:0 0 34%;min-width:320px}.board-pane{flex:1;min-height:60vh;align-items:stretch;justify-content:center}.field-label{color:var(--text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.code-input{flex:1;min-height:280px;resize:vertical;background:var(--surface-2);color:var(--text);border:1px solid rgba(234,243,236,.08);border-radius:var(--radius);padding:var(--space-2);font-family:var(--font-mono);font-size:.9rem;line-height:1.6}.code-input::placeholder{color:var(--text-muted);opacity:.7}.code-input:focus-visible{outline:none;border-color:var(--accent-support);box-shadow:0 0 0 1px #5ad1e64d,0 0 24px #5ad1e624}.input-controls{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2)}.status-group{display:flex;flex-direction:column;gap:2px}.action-group{display:flex;flex-wrap:wrap;gap:var(--space-2)}.action-group .btn{flex:1 1 auto}.share-status{color:var(--accent-support);font-size:.75rem}.share-status:empty{display:none}.parse-status{color:var(--text-muted);font-size:.8rem}.parse-status[data-state=ready]{color:var(--success)}.parse-status[data-state=error]{color:var(--danger)}.line-count{color:var(--accent);font-size:.75rem}.line-count:empty{display:none}.btn{font-family:var(--font-mono);font-weight:600;font-size:.85rem;padding:10px var(--space-3);min-height:44px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:transform .15s ease-out,box-shadow .15s ease-out,background .15s ease-out}.btn:active:not(:disabled){transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--glow)}.btn-accent{background:var(--accent);color:#12100a}.btn-accent:hover:not(:disabled){box-shadow:var(--glow)}.btn-accent:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}.btn-ghost{background:transparent;color:var(--accent-support);border-color:#5ad1e666}.btn-ghost:hover:not(:disabled){box-shadow:0 0 0 1px #5ad1e64d,0 0 24px #5ad1e624}.btn-ghost:disabled{color:var(--text-muted);border-color:#eaf3ec14;cursor:not-allowed}.preset-row{display:flex;flex-wrap:wrap;gap:var(--space-1)}.preset-btn{font-family:var(--font-mono);font-weight:600;font-size:.75rem;padding:8px 14px;min-height:44px;border-radius:var(--radius);border:1px solid rgba(234,243,236,.12);background:var(--surface-2);color:var(--text-muted);cursor:pointer;transition:border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out}.preset-btn:hover{color:var(--text);border-color:#e3ac5c66}.preset-btn:focus-visible{outline:none;box-shadow:var(--glow)}.preset-btn:active{transform:translateY(1px)}.preset-btn.is-active{color:var(--accent);border-color:var(--accent);box-shadow:var(--glow)}.board-output{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto}.board-output svg{width:100%;height:100%;max-width:100%;max-height:100%}.board-empty{color:var(--text-muted);font-size:.9rem;text-align:center;max-width:32ch}.board-empty-error{color:var(--danger)}.trace{stroke:var(--accent);stroke-width:1.4;opacity:.85}.trace-conditional{stroke:var(--accent-support)}.trace-comment{opacity:.35}.spiral{stroke:var(--accent-support);stroke-width:1.2;opacity:.8}.pad,.pad-function{fill:var(--accent)}.pad-class,.pad-conditional{fill:var(--accent-support)}.pad-comment,.pad-statement{fill:var(--text-muted)}.trace-reveal{animation:draw-in .5s ease-out forwards}@keyframes draw-in{0%{stroke-dashoffset:var(--trace-length, 0)}to{stroke-dashoffset:0}}.app-footer{text-align:center;color:var(--text-muted);font-size:.8rem;padding:var(--space-2) var(--space-4) var(--space-3)}.about{border-top:1px solid rgba(234,243,236,.06);background:var(--surface-1);padding:var(--space-8) var(--space-4)}.about-inner{max-width:68ch;margin:0 auto}.about h2{font-family:var(--font-display);font-size:1.55rem;letter-spacing:-.01em;margin:var(--space-6) 0 var(--space-2)}.about h2:first-child{margin-top:0}.about h3{font-family:var(--font-display);font-size:1.05rem;color:var(--accent);margin:var(--space-3) 0 var(--space-1)}.about p,.about li{color:var(--text-muted);font-size:.95rem;line-height:1.7}.about ol{padding-left:1.4em}.about li{margin-bottom:var(--space-1)}.about li::marker{color:var(--accent-support)}.site-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);padding:var(--space-4);border-top:1px solid rgba(234,243,236,.06)}.site-footer a{color:var(--text-muted);font-size:.8rem;text-decoration:none;transition:color .15s ease-out}.site-footer a:hover,.site-footer a:focus-visible{outline:none;color:var(--accent-support)}@media(prefers-reduced-motion:reduce){.trace-reveal{animation:none}}@media(max-width:768px){.app-layout{flex-direction:column}.input-pane{flex:none;min-width:0}.board-pane{min-height:60vh}}@media(min-width:769px){.app-shell{height:100vh}.app-layout,.board-output{min-height:0}}