@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;600&display=swap";:root{--bg: #0b1220;--surface-1: #101a2e;--surface-2: #16223c;--text: #e8edf7;--text-muted: #8fa3c4;--accent: #4fd1ff;--accent-heat: #ffb454;--accent-cold: #5b8dee;--success: #5fd88f;--danger: #ff6b6b;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--radius: 4px;--glow-accent: 0 0 12px rgba(79, 209, 255, .35);--glow-heat: 0 0 12px rgba(255, 180, 84, .35);--transition-ui: .15s ease-out}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-display)}body{min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(79,209,255,.15)}.topbar__link{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);text-decoration:none;padding:var(--space-1) var(--space-2);border:1px solid rgba(79,209,255,.25);border-radius:var(--radius);transition:color var(--transition-ui),border-color var(--transition-ui)}.topbar__link:hover{color:var(--accent);border-color:var(--accent)}.topbar__link:focus-visible{outline:none;box-shadow:0 0 0 3px #4fd1ff66}.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.01em;color:var(--text);display:flex;align-items:center;gap:var(--space-2)}.wordmark__glyph{color:var(--accent);text-shadow:var(--glow-accent);animation:glyph-pulse 4s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.wordmark__glyph{animation:none}}@keyframes glyph-pulse{0%,to{text-shadow:0 0 6px rgba(79,209,255,.25)}50%{text-shadow:0 0 16px rgba(79,209,255,.55)}}.layout{display:flex;flex:1;min-height:0}@media (max-width: 768px){.layout{flex-direction:column}}.stage{flex:1 1 65%;min-height:60vh;position:relative;background:var(--surface-1)}.stage canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;outline:none}.stage canvas:focus-visible{box-shadow:inset 0 0 0 3px #4fd1ff66}.controls{flex:1 1 35%;background:var(--surface-1);border-left:1px solid rgba(79,209,255,.15);padding:var(--space-4);overflow-y:auto}@media (max-width: 768px){.controls{border-left:none;border-top:1px solid rgba(79,209,255,.15)}}.controls h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 var(--space-3)}.slider-row{margin-bottom:var(--space-4)}.slider-row__label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.85rem;color:var(--text-muted);margin-bottom:var(--space-2)}.slider-row__value{color:var(--accent)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--space-2);border-radius:var(--radius);background:var(--surface-2);outline:none;transition:box-shadow var(--transition-ui)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-1);cursor:pointer;transition:transform var(--transition-ui),box-shadow var(--transition-ui)}input[type=range]:hover::-webkit-slider-thumb{box-shadow:var(--glow-accent)}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #4fd1ff66}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-1);cursor:pointer;transition:transform var(--transition-ui),box-shadow var(--transition-ui)}input[type=range]:focus-visible{box-shadow:0 0 0 3px #4fd1ff66}.output-selector{margin-top:var(--space-2)}.output-selector__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;min-height:44px;padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:.9rem;color:var(--text);background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234fd1ff' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;border:1px solid rgba(79,209,255,.25);border-radius:var(--radius);outline:none;cursor:pointer;transition:box-shadow var(--transition-ui),border-color var(--transition-ui)}.output-selector__select:hover{border-color:var(--accent)}.output-selector__select:focus-visible{box-shadow:var(--glow-accent);border-color:var(--accent)}.output-selector__select:active{box-shadow:0 0 0 2px #4fd1ff4d}.output-selector__select:disabled{opacity:.5;cursor:not-allowed}.action-buttons{display:flex;gap:var(--space-2);margin-top:var(--space-4)}.action-buttons__button{flex:1;min-height:44px;padding:var(--space-2) var(--space-3);font-family:var(--font-display);font-weight:500;font-size:.85rem;color:var(--text);background:var(--surface-2);border:1px solid rgba(79,209,255,.25);border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--transition-ui),border-color var(--transition-ui),transform var(--transition-ui)}.action-buttons__button:hover{border-color:var(--accent);box-shadow:var(--glow-accent)}.action-buttons__button:focus-visible{box-shadow:0 0 0 3px #4fd1ff66}.action-buttons__button:active{transform:scale(.97)}.action-buttons__button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.controls-header{display:flex;justify-content:flex-end;margin-bottom:var(--space-3)}.mute-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--text-muted);background:transparent;border:1px solid rgba(79,209,255,.25);border-radius:var(--radius);cursor:pointer;transition:color var(--transition-ui),border-color var(--transition-ui),box-shadow var(--transition-ui)}.mute-toggle:hover{color:var(--accent);border-color:var(--accent)}.mute-toggle:focus-visible{box-shadow:0 0 0 3px #4fd1ff66}.mute-toggle:active{transform:scale(.94)}.mute-toggle[aria-pressed=true]{color:var(--text-muted);border-color:#8fa3c44d}.learn{border-top:1px solid rgba(79,209,255,.15);background:linear-gradient(180deg,var(--surface-1),var(--bg));padding:var(--space-5) var(--space-4)}.learn__inner{max-width:68ch;margin:0 auto}.learn__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,4vw,2.25rem);line-height:1.15;margin:0 0 var(--space-3)}.learn__title code,.learn__lede code,.learn__list code,.learn__faq code{font-family:var(--font-mono);font-size:.9em;color:var(--accent);background:var(--surface-2);padding:0 var(--space-1);border-radius:var(--radius)}.learn__lede{font-family:var(--font-mono);font-size:1rem;line-height:1.6;color:var(--text-muted);margin:0 0 var(--space-5)}.learn__h2{font-family:var(--font-display);font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:var(--space-5) 0 var(--space-3)}.learn__list{margin:0;padding-left:var(--space-4);line-height:1.6;color:var(--text)}.learn__list li{margin-bottom:var(--space-2)}.learn__list strong{color:var(--text);font-weight:600}.learn__faq{margin:0;line-height:1.6}.learn__faq dt{font-weight:600;color:var(--text);margin-top:var(--space-3)}.learn__faq dd{margin:var(--space-1) 0 0;color:var(--text-muted)}.learn a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(79,209,255,.4)}.learn a:hover{border-bottom-color:var(--accent)}.learn__cta{display:inline-block;margin-top:var(--space-5);padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-weight:500;color:var(--bg)!important;background:var(--accent);border:none!important;border-radius:var(--radius);transition:box-shadow var(--transition-ui),transform var(--transition-ui)}.learn__cta:hover{box-shadow:var(--glow-accent);transform:translateY(-1px)}.learn__cta:focus-visible{outline:none;box-shadow:0 0 0 3px #4fd1ff66}.learn__footer{max-width:68ch;margin:var(--space-5) auto 0;padding-top:var(--space-4);border-top:1px solid rgba(79,209,255,.12);font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted)}.learn__footer a{color:var(--text-muted);border:none}.learn__footer a:hover{color:var(--accent)}.edge-tooltip{position:absolute;pointer-events:none;transform:translateY(-100%);padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:.75rem;white-space:nowrap;color:var(--text);background:var(--surface-2);border:1px solid rgba(79,209,255,.4);border-radius:var(--radius);box-shadow:var(--glow-accent);z-index:10}