:root{--bg: #08080d;--surface: #13131a;--surface-hover: #1a1a24;--accent: #7c6aef;--accent-dim: #5a4cc0;--text: #d8d8e0;--text-dim: #6e6e80;--border: #222233}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:14px}#app{display:flex;height:100%}#sidebar{width:260px;min-width:260px;background:var(--surface);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}#sidebar h1{font-size:18px;font-weight:700;color:var(--accent);line-height:1.3;letter-spacing:-.5px}#experiment-list{display:flex;flex-direction:column;gap:4px}.experiment-card{padding:12px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;background:transparent;text-align:left;color:var(--text);font-family:inherit;font-size:inherit}.experiment-card:hover{background:var(--surface-hover)}.experiment-card.active{background:var(--surface-hover);border-color:var(--accent);border-left:3px solid var(--accent)}.experiment-card .name{font-weight:600;font-size:13px;margin-bottom:4px}.experiment-card .description{font-size:11px;color:var(--text-dim);line-height:1.4}#viewport{flex:1;position:relative;overflow:hidden}#canvas{display:block;width:100%;height:100%}#info-overlay{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--text-dim);background:#08080db3;padding:6px 10px;border-radius:6px;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none}#info-overlay:not(:empty){display:block}#shader-toggle{position:absolute;top:16px;right:16px;padding:8px 14px;background:#13131ad9;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-family:inherit;font-size:12px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s ease;z-index:10}#shader-toggle:hover{color:var(--text);border-color:var(--accent-dim)}#shader-toggle.active{color:var(--accent);border-color:var(--accent)}#shader-overlay{position:absolute;top:56px;right:16px;bottom:16px;width:min(540px,calc(100% - 32px));background:#0d0d14eb;border:1px solid var(--border);border-radius:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;z-index:10;overflow:hidden;transition:opacity .15s ease,transform .15s ease}#shader-overlay.hidden{display:none}#shader-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}#shader-tabs{display:flex;gap:4px;overflow-x:auto}.shader-tab{padding:6px 12px;border:none;border-radius:6px;background:transparent;color:var(--text-dim);font-family:inherit;font-size:11px;cursor:pointer;white-space:nowrap;transition:all .12s ease}.shader-tab:hover{color:var(--text);background:var(--surface-hover)}.shader-tab.active{color:var(--accent);background:var(--surface-hover)}#shader-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1}#shader-close:hover{color:var(--text);background:var(--surface-hover)}#shader-code{flex:1;overflow:auto;padding:16px;margin:0;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12px;line-height:1.6;color:var(--text);-moz-tab-size:2;tab-size:2}#shader-code code{display:block;white-space:pre}#learn-section{border-top:1px solid var(--border);padding-top:16px;display:flex;flex-direction:column;gap:4px}.learn-heading{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-bottom:4px}.learn-heading+.learn-heading{margin-top:12px}.learn-group{border-radius:8px;overflow:hidden}.learn-group summary{padding:8px 12px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;border-radius:8px;transition:background .12s ease;list-style:none}.learn-group summary::-webkit-details-marker{display:none}.learn-group summary:before{content:"▸";display:inline-block;margin-right:8px;font-size:10px;color:var(--text-dim);transition:transform .15s ease}.learn-group[open] summary:before{transform:rotate(90deg)}.learn-group summary:hover{background:var(--surface-hover)}.learn-group p,.learn-group ul,.learn-group ol{padding:0 12px 8px;font-size:11px;color:var(--text-dim);line-height:1.6}.learn-group ul,.learn-group ol{padding-left:28px}.learn-group li{margin-bottom:2px}.learn-group strong{color:var(--text);font-weight:600}.learn-group code{font-size:10px;background:var(--bg);padding:1px 5px;border-radius:3px;color:var(--accent)}.learn-links{display:flex;flex-direction:column;gap:2px}.learn-links a{display:block;padding:7px 12px;font-size:11px;color:var(--accent);text-decoration:none;border-radius:6px;transition:background .12s ease}.learn-links a:hover{background:var(--surface-hover);text-decoration:underline}.error{display:flex;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center;color:#ff6b6b;font-size:16px;line-height:1.6}


.exploration-site-footer{flex:0 0 auto;border-top:1px solid var(--border,#222233);background:var(--surface,#13131a);padding:12px 16px}
.exploration-site-nav{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.exploration-site-nav a{color:var(--text,#d8d8e0);text-decoration:none;font-size:12px}
.exploration-site-nav a:hover,.exploration-site-nav a:focus-visible{text-decoration:underline}
body{display:flex;flex-direction:column}
#app{flex:1;min-height:0}
@media (width <= 720px){.exploration-site-footer{padding:10px 12px}.exploration-site-nav{gap:10px 14px}}