:root{--bg:#081018;--surface:#0f1822;--surface-strong:#162230;--surface-hover:#1b2a3a;--accent:#ff8a3d;--accent-secondary:#52d2c6;--text:#e8eef5;--text-dim:#99a6b5;--border:#233244;--danger:#ff6b6b}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--text);font-family:SF Mono,Fira Code,Cascadia Code,monospace}#app{min-height:100vh;display:flex}#sidebar{border-right:1px solid var(--border);background:radial-gradient(circle at top,#ff8a3d1f,#0000 36%),linear-gradient(#0f1822f5,#090f17);flex-direction:column;gap:20px;width:300px;min-width:300px;height:100vh;padding:24px 18px 28px;display:flex;position:sticky;top:0;overflow-y:auto}#sidebar h1{color:var(--accent);letter-spacing:-.04em;font-size:21px;line-height:1.15}.sidebar-copy{color:var(--text-dim);font-size:12px;line-height:1.6}#experiment-list{flex-direction:column;gap:6px;display:flex}.experiment-card{width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;padding:12px;transition:background .16s,border-color .16s,transform .16s}.experiment-card:hover{background:var(--surface-hover);transform:translate(2px)}.experiment-card.active{box-shadow:inset 3px 0 0 var(--accent-secondary);background:linear-gradient(#1b2a3a,#111d28);border-color:#52d2c680}.experiment-card.unavailable{opacity:1;filter:grayscale(.5)}.engine-badge{color:var(--accent);vertical-align:middle;background:#ff8a3d26;border-radius:4px;margin-left:6px;padding:1px 6px;font-size:9px;font-weight:600;display:inline-block}.experiment-card.unavailable .engine-badge{color:var(--text-dim);background:#ff8a3d1a}.experiment-card .name{margin-bottom:4px;font-size:13px;font-weight:700}.experiment-card .description{color:var(--text-dim);font-size:11px;line-height:1.5}#viewport{background:radial-gradient(circle at 18% 18%,#52d2c614,#0000 20%),radial-gradient(circle at 82% 12%,#ff8a3d1a,#0000 22%),linear-gradient(#081018,#0b111a);flex:1;grid-template-rows:auto minmax(320px,50vh) auto;gap:16px;min-width:0;padding:20px;display:grid}#hero-panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f1822bf;border-radius:18px;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;display:flex}.hero-copy{flex-direction:column;gap:6px;display:flex}.eyebrow{color:var(--accent-secondary);letter-spacing:.14em;text-transform:uppercase;font-size:11px}#experiment-title{letter-spacing:-.04em;font-size:clamp(24px,3vw,34px)}#experiment-description{color:var(--text-dim);max-width:720px;font-size:12px;line-height:1.6}.runtime-warning{color:#ffd5bb;background:linear-gradient(#ff8a3d1f,#52d2c60f);border:1px solid #ff8a3d3d;border-radius:12px;max-width:720px;padding:10px 12px;font-size:11px;line-height:1.6}#transport-toggle{color:var(--text);font:inherit;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#ff8a3d33,#52d2c62e);border:1px solid #ff8a3d7a;border-radius:999px;padding:11px 18px;font-size:12px;transition:transform .16s,border-color .16s,background .16s}#transport-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}#transport-toggle.is-active{border-color:var(--accent-secondary);background:linear-gradient(135deg,#52d2c638,#ff8a3d24)}#visualizer-shell{border:1px solid var(--border);background:radial-gradient(circle at 18% 22%,#52d2c614,#0000 24%),radial-gradient(circle at 82% 16%,#ff8a3d14,#0000 26%),linear-gradient(#09111a,#0d1620);border-radius:24px;min-height:320px;position:relative;overflow:hidden}#scope{width:100%;height:100%;display:block}#info-overlay{min-width:220px;color:var(--text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#081018b3;border:1px solid #233244b3;border-radius:12px;padding:10px 12px;font-size:11px;line-height:1.6;position:absolute;inset:auto auto 16px 16px}#inspector{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.panel{border:1px solid var(--border);background:#0f1822d6;border-radius:18px;flex-direction:column;gap:12px;min-height:180px;padding:16px;display:flex}.panel h3{color:var(--accent-secondary);text-transform:uppercase;letter-spacing:.12em;font-size:12px}#engine-status,#experiment-notes,#controls{flex-direction:column;gap:10px;display:flex}#engine-status p,#experiment-notes p,.control-copy{color:var(--text-dim);font-size:11px;line-height:1.6}.status-grid{grid-template-columns:84px minmax(0,1fr);gap:8px 10px;font-size:11px;display:grid}.status-grid dt{color:var(--text-dim)}.status-grid dd{color:var(--text)}.control{background:#090f17c7;border:1px solid #233244bf;border-radius:14px;flex-direction:column;gap:8px;padding:10px 12px;display:flex}.control-header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.control-label{color:var(--text);font-size:11px}.control-value{color:var(--accent);font-size:10px}.control input,.control select{width:100%;accent-color:var(--accent-secondary);font:inherit;color:var(--text);background:0 0}.control select{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:8px 10px}.step-grid{grid-template-columns:repeat(16,1fr);gap:3px;margin-top:4px;display:grid}.step-cell{aspect-ratio:1;cursor:pointer;background:#0f182299;border:1px solid #233244bf;border-radius:4px;width:100%;padding:0;transition:background .1s}.step-cell.beat{border-color:#ff8a3d66}.step-cell.active{background:#52d2c6a6}.control-tooltip{color:var(--text-dim);font-size:10px;line-height:1.5}#learn-section{border-top:1px solid var(--border);flex-direction:column;gap:6px;padding-top:16px;display:flex}.learn-heading{color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;font-size:11px}.learn-group{border-radius:10px;overflow:hidden}.learn-group summary{cursor:pointer;color:var(--text);border-radius:10px;padding:9px 12px;font-size:12px;list-style:none;transition:background .14s}.learn-group summary:hover{background:var(--surface-hover)}.learn-group summary:before{content:"▸";color:var(--text-dim);margin-right:8px;transition:transform .14s;display:inline-block}.learn-group[open] summary:before{transform:rotate(90deg)}.learn-group p,.learn-group ul{color:var(--text-dim);padding:0 12px 10px;font-size:11px;line-height:1.6}.learn-group ul{padding-left:28px}.learn-group code{color:var(--accent)}.learn-links{flex-direction:column;gap:2px;display:flex}.learn-links a{color:var(--accent-secondary);border-radius:10px;padding:8px 12px;font-size:11px;text-decoration:none;transition:background .14s}.learn-links a:hover{background:var(--surface-hover);text-decoration:underline}.error{color:var(--danger)}@media (width<=1080px){#app{flex-direction:column}#sidebar{border-right:none;border-bottom:1px solid var(--border);width:100%;min-width:0;height:auto;position:static}#viewport{grid-template-rows:auto minmax(260px,46vh) auto}#inspector{grid-template-columns:1fr}}@media (width<=720px){#viewport{padding:14px}#hero-panel{flex-direction:column;align-items:flex-start}#transport-toggle{justify-content:center;width:100%}#info-overlay{min-width:0;inset:auto 12px 12px}}@media (width<=375px){#viewport{gap:10px;padding:10px}#transport-toggle,.control input,.control select{min-height:44px}#sidebar{max-height:35vh}}


.exploration-site-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border,#222233);background:var(--surface,#13131a);padding:8px 16px;z-index:100}
.exploration-site-name{color:var(--text,#d8d8e0);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.exploration-site-name:hover{text-decoration:underline}
.exploration-site-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.exploration-site-nav a{color:var(--text-dim,#999);text-decoration:none;font-size:12px}
.exploration-site-nav a:hover,.exploration-site-nav a:focus-visible{color:var(--text,#d8d8e0);text-decoration:underline}
.exploration-nav-dropdown{position:relative}
.exploration-nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;margin-top:4px;padding:4px 0;list-style:none;background:var(--surface,#13131a);border:1px solid var(--border,#222233);border-radius:6px;min-width:12rem;z-index:200}
.exploration-nav-dropdown:hover .exploration-nav-dropdown-menu,.exploration-nav-dropdown:focus-within .exploration-nav-dropdown-menu{display:block}
.exploration-nav-dropdown-menu a{display:block;padding:6px 12px;color:var(--text-dim,#999);text-decoration:none;font-size:12px;white-space:nowrap}
.exploration-nav-dropdown-menu a:hover,.exploration-nav-dropdown-menu a:focus-visible{color:var(--text,#d8d8e0);background:var(--surface-hover,#1a1a24)}
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;min-height:100dvh}
#app{flex:1 0 auto;min-height:0}
@media (max-width:720px){.exploration-site-header{flex-wrap:wrap;padding:8px 12px}.exploration-site-nav{gap:6px 10px}}
@media (max-width:768px){html,body{overflow:auto}#app{flex-direction:column}#sidebar{width:100%;min-width:0;max-height:40vh;border-right:none;border-bottom:1px solid var(--border,#222233);overflow-y:auto}#viewport{min-height:50vh}}