:root{--bg: #0b1a2b;--surface-1: #0f2438;--surface-2: #153048;--ink: #e8f1f8;--ink-muted: #8fb0c7;--line: #2b4a66;--accent: #3ad0ff;--accent-2: #7cf0c8;--warn: #ffb347;--danger: #ff6b6b;--r-panel: 8px;--r-ctrl: 5px;--r-chip: 3px;--shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);--focus: 0 0 0 2px rgba(58, 208, 255, .55);--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100vh}body{color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.5;background-color:var(--bg);background-image:radial-gradient(1200px 480px at 82% -8%,rgba(58,208,255,.1),transparent 60%),linear-gradient(rgba(58,208,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(58,208,255,.045) 1px,transparent 1px);background-size:100% 100%,28px 28px,28px 28px}#app{max-width:1440px;margin:0 auto;padding:24px clamp(16px,3vw,32px) 64px}.topbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}.wordmark{font-family:var(--sans);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1}.wordmark .lens{color:var(--accent);text-shadow:0 0 18px rgba(58,208,255,.45)}.tagline{color:var(--ink-muted);margin:8px 0 0;max-width:62ch;font-size:13px}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.examples{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sound-toggle{font-family:var(--mono);font-size:12px;color:var(--ink-muted);background:transparent;border:1px solid var(--line);border-radius:var(--r-ctrl);padding:8px 12px;min-height:36px;cursor:pointer;transition:color .16s ease-out,border-color .16s ease-out}.sound-toggle[data-on=true]{color:var(--accent-2);border-color:var(--accent-2)}.sound-toggle:hover{color:var(--ink)}.sound-toggle:focus-visible{outline:none;box-shadow:var(--focus)}.examples-label{color:var(--ink-muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.example{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctrl);padding:8px 12px;min-height:36px;cursor:pointer;transition:transform .16s ease-out,border-color .16s ease-out,background .16s ease-out}.example:hover{border-color:var(--accent);color:var(--accent)}.example:active{transform:translateY(1px)}.example:focus-visible{outline:none;box-shadow:var(--focus)}.workbench{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:start}.editor-pane{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}.editor{position:relative;display:grid;grid-template-columns:auto 1fr;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow);overflow:hidden;min-height:62vh;background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:10px 1px,1px 10px,10px 1px,1px 10px;background-position:8px 8px,8px 8px,calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px)}.gutter{padding:14px 8px 14px 12px;text-align:right;color:var(--ink-muted);opacity:.55;font-size:13px;line-height:1.6;user-select:none;overflow:hidden;border-right:1px solid var(--line)}.gutter span{display:block}.editor textarea{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);background:transparent;border:0;outline:none;resize:none;padding:14px 16px;min-height:62vh;width:100%;tab-size:2}.editor:focus-within{border-color:var(--accent);box-shadow:var(--focus)}.notice{background:#ffb34714;border:1px solid rgba(255,179,71,.4);border-left:3px solid var(--warn);border-radius:var(--r-ctrl);padding:10px 14px;font-size:13px;color:var(--ink)}.notice strong{color:var(--warn);font-family:var(--sans)}.notice ul{margin:6px 0 0;padding-left:18px;color:var(--ink-muted)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.metric{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-panel);padding:14px 16px;box-shadow:var(--shadow);transition:border-color .16s ease-out}.metric.hot{border-color:#ff6b6b80}.metric .value{font-family:var(--sans);font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.metric.hot .value{color:var(--danger)}.metric .unit{font-size:19px;color:var(--ink-muted);margin-left:1px}.metric .label{color:var(--ink-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}.pane-title{font-family:var(--sans);font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-muted);margin:0 0 12px}.stack{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}.stage{display:flex;flex-direction:column;gap:6px}.stage-head{display:flex;align-items:baseline;gap:8px;padding:2px 0 4px}.stage-tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--bg);background:var(--accent);border-radius:var(--r-chip);padding:2px 6px;font-weight:600}.stage-name{font-family:var(--sans);color:var(--ink);font-size:13px}.layer{display:grid;grid-template-columns:40px minmax(0,1fr) 120px auto;align-items:center;gap:12px;width:100%;text-align:left;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--surface-1);border:1px solid var(--line);border-left:3px solid var(--accent-2);border-radius:var(--r-ctrl);padding:9px 12px;cursor:default;transition:transform .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out,background .12s ease-out}.layer:hover{transform:translate(3px)}.layer:focus-visible{outline:none;box-shadow:var(--focus)}.layer.rebuilds{border-left-color:var(--danger)}.layer.metadata{border-left-color:var(--line);opacity:.82}.layer.sweep{border-color:var(--warn);background:linear-gradient(90deg,#ffb34724,#ffb3470a);box-shadow:0 0 0 1px #ffb34766}.layer .idx{color:var(--ink-muted);font-size:11px}.layer .instr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer .keyword{color:var(--accent);font-weight:600}.layer .edge{margin-left:8px;font-size:11px;color:var(--accent-2);border:1px solid rgba(124,240,200,.4);border-radius:var(--r-chip);padding:1px 5px;white-space:nowrap}.layer.cross{border-left-style:dashed;border-left-color:var(--accent-2)}.layer.sweep .keyword{color:var(--warn)}.layer .track{height:8px;background:#ffffff0d;border-radius:2px;overflow:hidden}.layer .bar{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),#1ea9d8);transition:width .18s ease-out;transform-origin:left center;animation:bar-draw .2s ease-out both}@keyframes bar-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.layer.rebuilds .bar{background:linear-gradient(90deg,var(--danger),#d84a4a)}.layer .chip{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2);white-space:nowrap;justify-self:end}.layer.rebuilds .chip{color:var(--danger)}.layer.metadata .chip{color:var(--ink-muted)}.empty{border:1px dashed var(--line);border-radius:var(--r-panel);padding:48px 24px;text-align:center;color:var(--ink-muted)}.empty-mark{font-size:30px;letter-spacing:4px;color:var(--line);margin-bottom:8px}.suggestions{display:flex;flex-direction:column;gap:12px}.suggestion{background:var(--surface-1);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-panel);padding:14px 16px;box-shadow:var(--shadow);transition:transform .16s ease-out;animation:note-in .22s ease-out both}@keyframes note-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.suggestion:hover{transform:translate(2px)}.suggestion.high{border-left-color:var(--danger)}.suggestion.low{border-left-color:var(--accent)}.suggestion.empty-note{border-left-color:var(--accent-2)}.suggestion h3{font-family:var(--sans);margin:6px 0 0;font-size:15px;font-weight:500}.suggestion .sev{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--warn)}.suggestion.high .sev{color:var(--danger)}.suggestion.low .sev{color:var(--accent)}.suggestion .sev.ok{color:var(--accent-2)}.suggestion p{margin:6px 0 0;color:var(--ink-muted);line-height:1.55;font-size:13px;max-width:68ch}@media (max-width: 860px){.workbench{grid-template-columns:1fr}.editor-pane{position:static}.editor,.editor textarea{min-height:40vh}.topbar{flex-direction:column;align-items:flex-start}}@media (max-width: 460px){.metrics{grid-template-columns:1fr}.layer{grid-template-columns:32px minmax(0,1fr) auto}.layer .track{display:none}}@media (pointer: coarse){.example,.sound-toggle{min-height:44px}.layer{padding-top:12px;padding-bottom:12px}}.about{border-top:1px solid var(--line);margin-top:24px;background-image:linear-gradient(rgba(58,208,255,.03),transparent 240px)}.about-inner{max-width:760px;margin:0 auto;padding:40px clamp(16px,3vw,32px) 56px}.about h2{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.01em;margin:32px 0 10px;color:var(--ink)}.about h2:first-child{margin-top:0}.about p,.about li,.about dd{color:var(--ink-muted);font-size:14px;line-height:1.65;max-width:68ch}.about ol{margin:0;padding-left:20px}.about li{margin:6px 0}.about code{font-family:var(--mono);font-size:.92em;color:var(--accent);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:1px 5px}.faq{margin:4px 0 0}.faq dt{font-family:var(--sans);font-weight:500;color:var(--ink);font-size:15px;margin-top:20px}.faq dd{margin:6px 0 0}.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}.site-footer a{font-size:13px;text-decoration:none;transition:color .16s ease-out}.gh-link{font-family:var(--sans);font-weight:500;color:var(--accent)}.gh-link:hover{color:var(--ink)}.portfolio-link{color:var(--ink-muted)}.portfolio-link:hover{color:var(--accent-2)}.site-footer a:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-chip)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}