:root{--bg:#6fa0e8;--fg:#000;--card:#dfe8f7;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1424;--fg:#e6e9f2;--card:#18213a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1424;--fg:#e6e9f2;--card:#18213a;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font:bold 16px Arial,Helvetica,sans-serif}
#app{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;padding:0;overflow:hidden;box-sizing:border-box}
header{position:absolute;z-index:5;top:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:flex-end;margin:0;pointer-events:none}
header>*{pointer-events:auto}
button{background:linear-gradient(#fff,#b8c4d8);color:#000;border:2px solid #000;border-radius:0;padding:8px 12px;font:inherit;cursor:pointer}
button:disabled{opacity:.35;cursor:not-allowed}
button:not(:disabled):hover,button.on{background:linear-gradient(#ffe38a,#f0a020)}
select{font:inherit;border:2px solid #000;border-radius:0;padding:7px;background:#fff;color:#000}
canvas{width:100%;height:100%;display:block;border:0;touch-action:none;background:#0b1020;box-sizing:border-box}
#stage{display:contents}
#stage #c{position:fixed;inset:0;width:100vw;height:100dvh;z-index:0}
#side{position:fixed;z-index:6;top:64px;right:12px;max-height:calc(100dvh - 82px);overflow:auto;display:flex;flex-direction:column;gap:6px;padding:6px;background:#101827cc;border:2px solid #000}
#side button{padding:10px 8px;font-size:clamp(12px,1.4vw,16px)}
#tools{display:flex;flex-direction:column;gap:5px;margin-top:2px}
#tools button{padding:8px 6px;font-size:13px}
#menu{position:absolute;z-index:4;inset:0;margin:0;padding:76px 16px 18px;overflow:auto;box-sizing:border-box;background:var(--card);border:0}
#menu .grid{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));max-width:900px}
#edit{position:fixed;z-index:7;left:10px;bottom:10px;top:68px;width:min(440px,calc(100vw - 20px));margin:0;overflow:auto;box-sizing:border-box;background:#dfe8f7f2;max-height:calc(100dvh - 78px)}
#bEditCollapse{position:sticky;top:0;z-index:2;float:right;padding:4px 10px;font-size:20px;line-height:1}
#edit.collapsed{width:42px;padding:4px;overflow:hidden}
#edit.collapsed #editContent{display:none}
#edit.collapsed #bEditCollapse{float:none;width:100%;padding:8px 2px;font-size:22px}
#prac{position:fixed;z-index:6;left:50%;bottom:12px;transform:translateX(-50%);margin:0;width:min(480px,calc(100vw - 24px));}
#msg{position:fixed;z-index:8;left:12px;bottom:4px;margin:0;color:#fff;text-shadow:1px 1px #000;pointer-events:none}
#touch{position:fixed;z-index:6;left:12px;right:12px;bottom:12px;margin:0}
#touch button{padding:clamp(12px,3vh,22px) 0}
.panel{margin-top:0}
@media(max-width:600px){header{top:6px;left:8px;right:8px}header b{font-size:22px}#side{top:auto;right:8px;bottom:8px;max-height:48dvh;gap:4px;padding:4px}#side button{padding:7px 6px;font-size:12px}#tools button{font-size:11px;padding:6px 4px}#edit{top:54px;left:6px;bottom:6px;width:min(330px,calc(100vw - 12px));padding:8px}#menu{padding:60px 10px 12px}#prac{bottom:78px}#msg{bottom:2px}}
.panel{background:var(--card);border:4px solid #000;padding:14px;margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
textarea{width:100%;height:90px;margin-top:8px;background:#fff;color:#000;border:2px solid #000;font:12px monospace;box-sizing:border-box}
.pal{display:grid;grid-template-columns:repeat(5,60px);gap:6px;margin-top:8px}
.pal button{padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;background:#0b1020;color:#fff}
.pal button.on{background:linear-gradient(#ffe38a,#f0a020);color:#000}
.pal canvas{width:36px;height:36px;border:0}
#stage{display:flex;gap:8px;align-items:flex-start}#stage canvas{flex:1;min-width:0}#side{display:flex;flex-direction:column;gap:8px}#side button{padding:14px 10px;font-size:18px}
#pause,#complete{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:9;padding:16px;box-sizing:border-box}#pause .panel,#complete .panel{display:flex;flex-direction:column;gap:10px;min-width:min(280px,100%);max-width:420px;margin:0;text-align:center}#complete{z-index:10}#complete h2{font-size:30px;margin:0}#complete p{margin:0 0 8px;font-size:16px}#complete .row{margin-top:0}#complete button{flex:1}
#prac{display:flex;gap:10px;margin-top:8px}#prac button{flex:1;padding:12px}
#tools{display:flex;flex-direction:column;gap:8px;margin-top:8px}#tools button{padding:10px 6px;font-size:14px}
#textEditor{position:fixed;inset:0;background:#000b;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}#textEditor[hidden]{display:none!important}
#textEditor .panel{width:min(440px,100%);max-height:90vh;overflow:auto;margin:0;display:flex;flex-direction:column;gap:10px}
#textEditor h2{margin:0}
.textgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.textfield{display:flex;flex-direction:column;gap:4px;font-size:13px}
.textfield input[type=number],.textfield select{width:100%;box-sizing:border-box;min-width:0}
.textfield input[type=color]{width:100%;height:38px;border:2px solid #000;background:#fff;padding:2px}
.textchecks{display:flex;gap:14px;flex-wrap:wrap}
.textchecks label{display:flex;align-items:center;gap:5px}
#textContent{width:100%;height:100px;box-sizing:border-box;font:16px Arial,Helvetica,sans-serif;padding:8px;border:2px solid #000}
#tools button{padding:10px 6px;font-size:14px}
#touch{display:none;justify-content:space-between;margin-top:10px;gap:10px}
#touch button{flex:1;padding:18px 0;font-size:20px;user-select:none;touch-action:none}
@media(pointer:coarse){#touch.on{display:flex}}
[hidden]{display:none!important}


/* Trajectory controls */
#bTrajectory, #pTrajectory { white-space: normal; }