:root{--bg:#0b0d10;--panel:#161a1fee;--text:#e8e8ea;--accent:#5b9dff;--border:#2a2f36}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#eef0f3;--panel:#fffe;--text:#1a1c1f;--accent:#2563eb;--border:#dfe3e8}}:root[data-theme=dark]{--bg:#0b0d10;--panel:#161a1fee;--text:#e8e8ea;--accent:#5b9dff;--border:#2a2f36}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);position:fixed;inset:0}.page{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100%;display:flex}.page h1{margin:0;font-size:28px}.page p{opacity:.7;margin:0}canvas{touch-action:none;display:block}.panel{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:14px;position:absolute;box-shadow:0 4px 20px #0000004d}#controls{top:calc(16px + env(safe-area-inset-top,0px));width:220px;left:16px}#output{bottom:calc(16px + env(safe-area-inset-bottom,0px));width:260px;max-height:38vh;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;left:16px;overflow:auto}#hint{top:calc(16px + env(safe-area-inset-top,0px));opacity:.75;max-width:170px;font-size:11px;right:16px}h1{margin:0 0 10px;font-size:14px}.row{gap:6px;margin-bottom:6px;display:flex}.tool-toggle{flex-wrap:wrap}.tool-toggle button{flex:45%}.tool-toggle button.active{background:var(--accent);color:#fff;border-color:#0000}.snap-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;margin-bottom:8px;font-size:11px;display:flex}.snap-row input{accent-color:var(--accent);margin:0}.box-size label{flex:1;align-items:center;gap:4px;min-width:0;font-size:11px;display:flex}.box-size input{border:1px solid var(--border);width:100%;min-width:0;color:inherit;background:0 0;border-radius:6px;padding:4px 5px;font-size:11px}.server-row{flex-direction:column;gap:4px;margin-bottom:6px;font-size:11px;display:flex}.server-row input{border:1px solid var(--border);width:100%;min-width:0;color:inherit;background:0 0;border-radius:6px;padding:5px 6px;font-size:11px}.scale-row label{flex:1;justify-content:space-between;align-items:center;gap:6px;font-size:11px;display:flex}.scale-row input{border:1px solid var(--border);width:80px;color:inherit;background:0 0;border-radius:6px;padding:4px 5px;font-size:11px}button{color:#e8e8ea;border:1px solid var(--border);cursor:pointer;background:#232830;border-radius:8px;flex:1;padding:8px 4px;font-size:12px}button:hover{background:var(--accent);color:#fff}#reset,#copy,#download,#load-transform,#save{background:var(--accent);color:#fff;border:none;width:100%;margin-top:4px;padding:9px}.server-row code{text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;overflow:hidden}input[type=file]{width:100%;color:inherit;margin-bottom:10px;font-size:11px}pre{white-space:pre-wrap;margin:4px 0 10px}.swatch{vertical-align:-1px;border-radius:2px;width:10px;height:10px;margin-right:5px;display:inline-block}#status{opacity:.7;min-height:14px;margin-top:6px;font-size:11px}.auth-button{flex:none;min-width:160px;margin-top:8px;padding:8px 32px;font-size:14px}.auth-button:disabled{opacity:.6;cursor:default}.auth-prompt{z-index:10;flex-direction:column;align-items:stretch;gap:6px;min-width:220px;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}.auth-prompt p{text-align:center;margin:0 0 4px}