:root{--bg:#f8f8f8;--fg:#1a1a1a;--muted:#666;--border:#ddd;--accent:#0070c1;--topbar-bg:#fff;--footer-bg:#fff;--tab-accent:#5f61d8;--tab-tint:#5f61d821;--drawer-bg:#f0f1f5;--drawer-head-bg:#fff;--close-bg:#eef0f4;--close-border:#00000029;--close-fg:#4a4f5c;--close-hover:#e2e5ec}:root[data-theme=dark]{--bg:#1a1a1a;--fg:#e0e0e0;--muted:#888;--border:#333;--accent:#4fc1ff;--topbar-bg:#222;--footer-bg:#222;--tab-accent:#8b8df0;--tab-tint:#8b8df029;--drawer-bg:#202226;--drawer-head-bg:#252526;--close-bg:#353c50;--close-border:#ffffff40;--close-fg:#c9d1e0;--close-hover:#465069}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1a1a1a;--fg:#e0e0e0;--muted:#888;--border:#333;--accent:#4fc1ff;--topbar-bg:#222;--footer-bg:#222;--tab-accent:#8b8df0;--tab-tint:#8b8df029;--drawer-bg:#202226;--drawer-head-bg:#252526;--close-bg:#353c50;--close-border:#ffffff40;--close-fg:#c9d1e0;--close-hover:#465069}}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif;font-size:14px}#app{grid-template-rows:auto 1fr auto;display:grid}.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:8px 16px;display:flex}.logo img{width:auto;height:28px;display:block}.title{cursor:text;border-radius:4px;outline:none;min-width:6ch;padding:4px 8px;font-weight:500}.title:hover{background:#7f7f7f1a}.title:focus{box-shadow:0 0 0 1px var(--accent);background:#7f7f7f26}.topbar-spacer{flex:1}.gallery-btn,.save-btn,.save-caret{color:var(--fg);border:1px solid var(--border);font:inherit;cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px}.gallery-btn:disabled,.save-btn:disabled,.save-caret:disabled{opacity:.5;cursor:not-allowed}.save-btn:not(:disabled):hover,.save-caret:not(:disabled):hover{background:#7f7f7f1f}.save-split{display:flex;position:relative}.save-split .save-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.save-caret{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;padding:4px 6px}.signin-btn{background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:none;border-radius:4px;padding:4px 12px}.signin-btn:hover{filter:brightness(1.1)}.account-menu{position:relative}.avatar-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;width:28px;height:28px;padding:0;overflow:hidden}.avatar-btn img{width:100%;height:100%;display:block}.avatar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.account-dropdown{background:var(--topbar-bg);border:1px solid var(--border);z-index:10;border-radius:4px;min-width:160px;padding:4px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 12px #0000001a}.account-login{color:var(--muted);border-bottom:1px solid var(--border);padding:6px 8px;font-size:12px}.account-dropdown button{text-align:left;width:100%;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:2px;padding:6px 8px;display:block}.account-dropdown button:hover{background:#7f7f7f1a}.view-menu,.gallery-menu{position:relative}.menu-dropdown{background:var(--topbar-bg);border:1px solid var(--border);z-index:10;border-radius:6px;min-width:200px;padding:4px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 12px #0000001a}.menu-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px 2px;font-size:11px}.menu-dropdown button,.menu-dropdown a{text-align:left;width:100%;color:var(--fg);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:3px;align-items:center;gap:8px;padding:6px 8px;text-decoration:none;display:flex}.menu-dropdown button:not(:disabled):hover,.menu-dropdown a:hover{background:var(--tab-tint)}.menu-dropdown button:disabled{opacity:.5;cursor:not-allowed}.menu-separator{background:var(--border);border:none;height:1px;margin:4px 0}.gallery-dropdown{width:300px}.recent-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.recent-gist{background:var(--accent);border-radius:50%;flex:none;width:6px;height:6px}.recent-time{color:var(--muted);flex:none;font-size:12px}.menu-check{width:14px;color:var(--tab-accent);flex:none;display:flex}.callback{text-align:center;color:var(--muted);padding:32px}.callback-error{color:var(--fg)}.load-error{border:1px solid var(--border);color:var(--fg);background:#c85a3c24;border-radius:4px;justify-content:center;align-items:center;gap:12px;margin:0 24px;padding:8px 12px;display:flex}.load-error button{border:1px solid var(--border);color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:4px;padding:2px 8px}appearance-picker{--appearance-picker-color:var(--muted);--appearance-picker-active-color:var(--accent);color:var(--fg)}.editplay-pane{gap:32px;min-height:0;padding:16px 24px;display:flex;container-type:size}.editor-column{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}wgsl-edit{background:var(--bg);flex:1;min-width:0;display:block}.editor-column>wgsl-edit{min-height:0;overflow:hidden}.drawer{--drawer-gap:18px;min-height:96px;max-height:calc(100% - var(--drawer-gap));margin-top:var(--drawer-gap);border:1px solid var(--border);background:var(--drawer-bg);border-radius:10px;flex-direction:column;flex:none;display:flex;position:relative;box-shadow:0 6px 18px #00000014}.drawer-grip{background:var(--border);cursor:ns-resize;touch-action:none;z-index:2;border-radius:3px;width:44px;height:5px;margin-left:-22px;position:absolute;top:-11px;left:50%}.drawer-grip:before{content:"";position:absolute;inset:-6px -10px}.drawer-grip:hover{background:var(--tab-accent);box-shadow:0 0 0 3px var(--tab-tint)}.drawer-close{z-index:3;border:1px solid var(--close-border);background:var(--close-bg);width:32px;height:32px;color:var(--close-fg);cursor:pointer;opacity:0;border-radius:50%;place-items:center;padding:0;transition:opacity .15s,background .15s;display:grid;position:absolute;top:-14px;right:-14px;box-shadow:0 2px 8px #0000004d}.drawer:hover .drawer-close,.drawer-close:focus-visible{opacity:1}.drawer-close:hover,.drawer-close:focus-visible{background:var(--close-hover)}.drawer-tabs{background:var(--drawer-head-bg);border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;flex:none;align-items:stretch;height:36px;padding-right:26px;display:flex}.drawer-tabs [role=tablist]{display:flex}.drawer-tab{color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:0 14px;font:15px system-ui,sans-serif}.drawer-tab.active{color:var(--tab-accent);border-bottom-color:var(--tab-accent);font-weight:600}.drawer-transpiler{align-self:center;margin-left:auto;padding:2px 10px;font-size:14px}.drawer-body{border-radius:0 0 10px 10px;flex:1;min-height:0;display:flex;overflow:hidden}.drawer-body wgsl-edit{background:var(--drawer-bg);min-height:0}wgsl-play{background:var(--bg);aspect-ratio:1;align-self:start;width:min(85cqh,42cqw);display:block;position:relative}.footer{background:var(--footer-bg);border-top:1px solid var(--border);color:var(--muted);align-items:center;gap:8px;padding:6px 16px;font-size:12px;display:flex}.copy-link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:none;padding:0}.copy-link:hover{text-decoration:underline}.gist-chip{border:1px solid var(--border);color:var(--accent);font-variant-numeric:tabular-nums;background:#7f7f7f1f;border-radius:999px;margin-left:auto;padding:2px 8px;text-decoration:none}.gist-chip-flash{animation:.6s ease-out gist-chip-flash}.gist-chip:hover{text-decoration:underline}@keyframes gist-chip-flash{0%{opacity:0;box-shadow:0 0 0 2px var(--accent);transform:translateY(4px)}to{opacity:1;transform:translateY(0);box-shadow:0 0 #0000}}@media (width<=720px){.editplay-pane{grid-template-rows:1fr 1fr;grid-template-columns:1fr}}