*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0e12;--surface: #16161e;--border: #2a2a3a;--accent: #a78bfa;--accent-dim: #7c5cbf;--text: #e2e0f0;--text-muted: #8888a8;--error: #f87171;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;--toolbar-h: 44px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow:hidden}#toolbar{display:flex;align-items:center;gap:12px;height:var(--toolbar-h);padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border)}#toolbar h1{font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap}#toolbar-controls{display:flex;align-items:center;gap:8px;margin-left:auto}#toolbar-controls label{font-size:12px;color:var(--text-muted)}#preset-select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-family:var(--font-mono);font-size:12px;cursor:pointer}#preset-select:focus{outline:2px solid var(--accent);outline-offset:1px}#fullscreen-btn{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-family:var(--font-mono);font-size:12px;cursor:pointer;transition:border-color .15s}#fullscreen-btn:hover{border-color:var(--accent)}#fullscreen-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#app{display:flex;flex-direction:column;height:100vh}#split-pane{display:flex;flex:1;min-height:0}#editor-pane{display:flex;flex-direction:column;width:50%;min-width:200px;background:var(--surface)}#shader-editor{flex:1;resize:none;background:var(--bg);color:var(--text);border:none;padding:12px;font-family:var(--font-mono);font-size:13px;line-height:1.6;-moz-tab-size:2;tab-size:2;white-space:pre;overflow:auto}#shader-editor:focus{outline:2px solid var(--accent);outline-offset:-2px}#error-log{min-height:28px;max-height:120px;overflow-y:auto;padding:6px 12px;font-size:11px;line-height:1.5;color:var(--error);background:var(--surface);border-top:1px solid var(--border);white-space:pre-wrap;word-break:break-word}#error-log:empty:before{content:"No errors";color:var(--text-muted)}#divider{width:4px;cursor:col-resize;background:var(--border);transition:background .15s}#divider:hover,#divider.dragging{background:var(--accent)}#canvas-pane{flex:1;position:relative;min-width:200px;background:#000}#glcanvas{display:block;width:100%;height:100%}#fps-counter{position:absolute;top:8px;right:10px;font-size:11px;color:var(--accent);background:#0009;padding:2px 8px;border-radius:4px;pointer-events:none;z-index:10}body.fullscreen #toolbar,body.fullscreen #editor-pane,body.fullscreen #divider{display:none}body.fullscreen #canvas-pane{width:100%}


.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}
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}}