@font-face{font-family:Plex;src:url('./fonts/IBMPlexSans-400.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#03060b;--panel:#0c0c0c;--line:#565656;--ink:#ededed;--dim:#c4c4c4;font:16px/1.45 Plex,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);overflow:hidden}
[hidden]{display:none!important}
h2,p{margin:0 0 12px}h2{font-size:21px;font-weight:400}a{color:#eee}
button,input,select{font:inherit;color:inherit;min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:0;background:var(--panel);padding:8px 12px;touch-action:manipulation}
button{cursor:pointer}button:hover:not(:disabled){border-color:#ddd}button:disabled{color:#aaa;cursor:default}
button[aria-pressed=true],button[aria-current=true]{border-color:#eee}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
label{display:block;color:var(--dim)}input,select{width:100%;margin:4px 0 12px}strong{font-weight:400}
#app{position:relative;width:100vw;height:100dvh;overflow:hidden}
.scene-wrap{position:absolute;inset:0}#board{display:block;width:100%;height:100%;touch-action:none}
.sky-time{position:absolute;left:20px;top:max(16px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--dim);pointer-events:none;text-shadow:0 1px 4px #000;max-width:160px}
.utilities{position:absolute;right:16px;top:max(12px,env(safe-area-inset-top));display:flex;gap:6px}.utilities button{background:#000b}
.scene-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.scene-label{position:absolute;transform:translate(-50%,0);white-space:nowrap;font-size:14px;color:#ddd;text-shadow:0 1px 4px #000}
.body-label{padding:0;background:transparent;border:none;min-height:0}
.body-target,.lane-target{pointer-events:auto;min-height:44px;min-width:44px;padding:8px;background:#000a;border:1px solid #666;color:#ddd}
.lane-target{font-size:12px}
/* These semantic targets sit over the illustrated object, without a card surface. */
.track-mark{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0 0 28px 22px;background:transparent;border:0;color:#eee;font-size:12px;text-align:right;line-height:12px;pointer-events:auto;text-shadow:0 1px 2px #000,1px 0 2px #000}
.track-mark::before{content:'';position:absolute;inset:2px;pointer-events:none}
.track-mark.selected::before{border:1px solid #fff;inset:0}.track-mark.resolved::before{border:1px dashed #8b8b8b}.track-mark:focus-visible{outline-offset:0}
.context{position:absolute;left:20px;bottom:126px;width:min(440px,calc(100vw - 40px));padding:6px 12px 6px 0;background:linear-gradient(90deg,#000d,#0008 85%,transparent)}
.target-nav{display:flex;gap:8px;align-items:center}.target-nav button{flex:0 0 44px}
.target-nav #info{flex:1;margin:0;font-size:14px;line-height:1.35}
.actions{display:flex;gap:8px;margin-top:8px}.actions button{flex:1;font-size:14px;padding:8px}
.context #capacity{font-size:12px;color:var(--dim);margin:6px 0 0}
.event-bar{position:absolute;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;padding:10px 20px 8px;background:linear-gradient(0deg,#000c,transparent)}
.event-bar #news{font-size:13px;color:var(--dim);margin:0 0 6px;min-height:19px}
.event-actions{display:flex;gap:8px}.event-actions #end-btn{margin-left:auto}.event-actions #skip-btn{border-color:#aaa;margin-left:auto}.event-actions #end-btn+#skip-btn{margin-left:0}
progress{display:block;width:100%;height:3px;accent-color:#ddd;margin-top:8px}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.track{text-align:left;font-size:14px}.track span{display:block;font-size:12px;color:var(--dim)}
.volleys,.view-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.payload{display:grid;grid-template-columns:1fr 1fr;gap:16px}#orders{padding-left:24px}
#lane-detail,#order-preview,#orders{font-size:14px;color:var(--dim)}#order-error{color:#ddd}#launch-btn{width:100%}
dialog{width:min(600px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--ink);border:1px solid #777;border-radius:0;padding:24px}
dialog::backdrop{background:#000d}dialog p{color:var(--dim)}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tally{display:grid;grid-template-columns:1fr auto;gap:8px}.tally dd{margin:0}.tally dt{color:var(--dim)}
summary{cursor:pointer;min-height:44px;padding-top:8px}
#lesson{position:absolute;top:76px;left:20px;right:20px;max-width:650px;background:#080808;padding:12px;display:flex;gap:12px;align-items:center;border:1px solid #aaa}
#lesson h2{font-size:16px;margin-bottom:4px}#lesson p{font-size:14px;margin:0}
#storage-status{position:absolute;top:74px;left:20px;right:20px;background:#080808;border-left:2px solid #aaa;padding:8px;font-size:14px}
#scene-fallback{position:absolute;top:35%;left:20px;right:20px}
@media(max-width:600px){
 .sky-time{left:12px;top:12px;font-size:12px;max-width:170px}.utilities{right:8px;top:8px;gap:4px}.utilities button{font-size:12px;padding:8px}
 .context{left:8px;bottom:93px;width:calc(100vw - 16px);padding:6px 8px 6px 0}.context #capacity{display:none}.target-nav #info{font-size:12px}.actions{margin-top:6px;gap:6px}.actions button{font-size:13px}
 .event-bar{padding:6px 8px}.event-bar #news{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;margin-bottom:4px}
 .event-actions{gap:4px}.event-actions button{font-size:12px;padding:6px}.event-actions #controls-btn{display:none}.event-actions #end-btn{flex:1;margin-left:0}.event-actions #skip-btn{flex:1;margin-left:0}.event-actions #tracks-btn{flex:1}
 .scene-label{font-size:12px}#lesson{left:8px;right:8px;font-size:12px}dialog{padding:16px}
}
@media(max-width:360px){
 .sky-time{font-size:11px;max-width:150px}.utilities button{padding:6px}.event-actions button{padding:4px;font-size:11px}
 .context{padding:0;bottom:64px}.context .target-nav{gap:4px}.target-nav #info{font-size:11px}.actions{margin-top:4px}.actions button{font-size:12px}
 .event-bar{padding-top:0;padding-bottom:4px}.event-bar #news{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.event-bar progress{margin-top:4px}
}
@media(max-height:500px) and (min-width:601px){
 .context{width:350px;bottom:66px;padding-top:0;padding-bottom:0}.context #capacity{display:none}.event-bar{padding-top:0}.event-bar #news{display:none}.actions{margin-top:4px}.target-nav #info{font-size:12px}.sky-time{font-size:12px;max-width:150px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-width:600px){.event-actions #tracks-btn{font-size:11px}.event-actions #end-btn{font-size:11px}.event-actions #skip-btn{font-size:11px}}