:root{font:16px/1.55 system-ui,sans-serif;color:#edece3;background:#10191e;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1320px;margin:auto;padding:16px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap}h1{font-size:24px;margin:0 auto 0 0}a{color:#84bfae}button,summary{font:inherit;min-height:44px;cursor:pointer}button{color:#edece3;background:#20343d;border:1px solid #61777c;border-radius:8px;padding:8px 16px}button:hover{background:#304c57}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #f4ca79;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}#start{background:#f4ca79;color:#10191e}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}[hidden]{display:none!important}#stage{width:100%;aspect-ratio:8/5;background:#071b24}canvas{display:block;width:100%;height:100%;touch-action:none}#stage:fullscreen{display:flex;align-items:center;justify-content:center}#stage:fullscreen canvas{width:min(100vw,160vh);height:min(100vh,62.5vw)}progress{width:100%;max-width:480px}#status{min-height:1.5em;color:#f4ca79}#instructions,#storage,#native-language,#runtime{color:#a4b6b9;font-size:14px}#pad-grid{display:grid;grid-template-columns:100px repeat(16,44px);gap:5px;width:max-content;padding:10px 4px}.pad-scroll{overflow-x:auto;overscroll-behavior-x:contain}#pad-grid button{min-width:44px;padding:3px;border-radius:5px}#pad-grid button[aria-pressed=true]{background:#84bfae;color:#10191e}#pad-grid .mute[aria-pressed=true]{background:#f4ca79}details{border:1px solid #41565e;border-radius:8px;padding:8px;margin-top:10px}summary{padding:7px}body[data-case=prism-tide]{background:#071b24}@media(max-width:600px){main{padding:10px}h1{font-size:21px}header{gap:12px}button{padding:7px 11px}p{margin:10px 0}}

body[data-layout=mobile] canvas{touch-action:pan-y}body[data-layout=mobile][data-state=running] #intro{display:none}body[data-layout=mobile] #stage{max-width:720px;margin-inline:auto}body[data-layout=mobile] #stage:fullscreen{max-width:none}body[data-layout=mobile] #stage:fullscreen canvas{width:min(100vw,calc(100vh * var(--mobile-ratio)));height:min(100vh,calc(100vw / var(--mobile-ratio)))}

/* Dedicated Showcase stage owns navigation and session controls. */
body[data-embed=true] main{padding:0;max-width:none}
body[data-embed=true] header,body[data-embed=true] #intro,body[data-embed=true] main>.toolbar,body[data-embed=true] #instructions,body[data-embed=true] #storage,body[data-embed=true] #native-language,body[data-embed=true] #runtime{display:none}
body[data-embed=true] #status{margin:14px;font-size:13px}body[data-embed=true][data-state=running] #status{display:none}
body[data-embed=true] #progress{margin:14px;width:calc(100% - 28px)}
body[data-embed=true] #stage{margin:0 auto}body[data-embed=true] #alternate{margin:10px}
body[data-embed=true]:not([data-layout=mobile]) #stage{max-width:min(100vw,160vh)}

/* A contain-fit canvas never stretches or clips native HUD coordinates. */
#stage{display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0}
#stage canvas{flex:none;max-width:100%;max-height:100%;object-fit:contain}
body[data-embed=true],body[data-embed=true] main{height:100dvh;overflow:hidden}
body[data-embed=true] main{display:flex;flex-direction:column}
body[data-embed=true] #stage,body[data-embed=true]:not([data-layout=mobile]) #stage{flex:1;width:100%;max-width:none;aspect-ratio:auto!important;margin:0;min-height:0}
body[data-embed=true] #alternate{flex:none;margin:0;border-radius:0;max-height:45dvh;overflow:auto;padding:0 10px}
body[data-embed=true] #alternate>summary{height:44px;padding:9px 0;font-size:13px}
#stage:fullscreen canvas,body[data-layout=mobile] #stage:fullscreen canvas{max-width:100%;max-height:100%;object-fit:contain}