:root{--bg:#f8f8f8;--fg:#1a1a1a;--muted:#666;--border:#ddd;--accent:#0070c1;--topbar-bg:#fff;--footer-bg:#fff}:root[data-theme=dark]{--bg:#1a1a1a;--fg:#e0e0e0;--muted:#888;--border:#333;--accent:#4fc1ff;--topbar-bg:#222;--footer-bg:#222}@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}}*{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{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{opacity:.5;cursor:not-allowed}.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}.callback{text-align:center;color:var(--muted);padding:32px}.callback-error{color:var(--fg)}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}wgsl-edit{background:var(--bg);flex:1;min-width:0;display:block}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}@media (width<=720px){.editplay-pane{grid-template-rows:1fr 1fr;grid-template-columns:1fr}}