:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;background:#000;--edge:12px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{position:fixed;inset:0;margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}#app{position:fixed;left:0;top:0;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate}button,input,select{font:inherit;color:inherit}button{border:0;background:transparent;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;touch-action:manipulation;padding:10px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}button:hover{background:#252525}button[aria-pressed=true],button.primary{background:#fff;color:#000}button:disabled{opacity:.25;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:2px}input,select{border:1px solid #444;border-radius:5px;background:#111;min-height:40px;max-width:100%;font-size:16px;padding:6px 8px}input[type=checkbox]{width:22px;min-height:22px;accent-color:#fff}input[type=number]{width:88px}select{cursor:pointer}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;image-rendering:pixelated}#toolbar,.floating{position:absolute;background:rgba(5,5,5,.94);border:1px solid #363636;border-radius:9px;display:flex;align-items:center;box-shadow:0 3px 20px #0006}#toolbar{left:50%;transform:translateX(-50%);top:max(var(--edge),env(safe-area-inset-top));padding:3px;gap:2px;white-space:nowrap}#toolbar .divider{height:20px;border-left:1px solid #333;margin:0 3px}#view-tools{top:max(var(--edge),env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));padding:3px}#coordinates{position:absolute;right:max(var(--edge),env(safe-area-inset-right));bottom:max(var(--edge),env(safe-area-inset-bottom));font-size:11px;color:#777;pointer-events:none}#hint{position:absolute;left:50%;top:78px;transform:translateX(-50%);color:#aaa;font-size:12px;pointer-events:none;white-space:nowrap}#inspector{bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--tray,0px));left:50%;transform:translateX(-50%);padding:4px;max-width:calc(100% - 24px);gap:3px}#piece-name{width:150px;min-width:60px;border:0;background:transparent;font-size:16px}#piece-kind{font-size:16px;width:104px;border:0}#assets{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));height:86px;padding:6px}#asset-items{display:flex;overflow-x:auto;overflow-y:hidden;gap:6px;flex:1;scrollbar-width:thin;touch-action:pan-x;overscroll-behavior:contain}#asset-items button{flex:none;width:66px;height:66px;border:1px solid #333;border-radius:4px;background:repeating-conic-gradient(#151515 0% 25%,#202020 0% 50%) 50%/12px 12px}#asset-items button[aria-pressed=true]{border:2px solid #fff}#asset-items img{max-width:100%;max-height:100%;image-rendering:pixelated;pointer-events:none}#assets #close-assets{min-width:36px}.panel{position:absolute;background:#0b0b0b;border:1px solid #444;border-radius:9px;padding:12px;z-index:5;width:230px;max-height:calc(100% - 110px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}#project{top:74px;left:max(12px,env(safe-area-inset-left));display:grid;gap:8px}#project button{justify-content:flex-start;border:1px solid #333}#project-name{width:100%}label{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;min-height:44px}#dimensions{right:max(12px,env(safe-area-inset-right));bottom:calc(74px + env(safe-area-inset-bottom) + var(--tray,0px))}#help{top:74px;left:50%;transform:translateX(-50%);width:300px;font-size:12px;line-height:1.8}dialog{border:1px solid #555;background:#0b0b0b;color:white;border-radius:10px;padding:18px;width:300px;max-width:calc(100% - 24px);max-height:calc(100% - 32px);overflow:auto;touch-action:pan-y}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:14px}#import-form{display:grid;gap:6px}#import-form .primary{margin-top:12px}#status{position:absolute;z-index:20;bottom:calc(110px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#fff;color:#000;padding:12px 18px;max-width:90%;border-radius:6px;font-size:12px;pointer-events:none;text-align:center}#touch-controls{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;pointer-events:none}#touch-controls button{pointer-events:auto;width:66px;height:66px;border-radius:50%;border:1px solid #777;background:#080808d9;touch-action:none;user-select:none;-webkit-user-select:none}#touch-controls button[aria-pressed=true]{background:#fff;color:#000}.directions{display:flex;gap:14px}#restart{right:max(12px,env(safe-area-inset-right));top:80px;padding:12px}.playing #toolbar>button:not(#play),.playing #toolbar>.divider,.playing #view-tools,.playing #coordinates{display:none}.playing #toolbar{left:auto;right:max(12px,env(safe-area-inset-right));transform:none}.playing #hint{top:24px}body,[draggable]{user-select:none;-webkit-user-select:none}input{user-select:text;-webkit-user-select:text}[hidden]{display:none!important}@media(max-width:680px){:root{--edge:8px}#toolbar{gap:0;padding:2px}#toolbar .divider{margin:0 1px}#toolbar button{min-width:42px;padding:9px}#view-tools{top:70px;left:8px}#view-tools button{min-width:38px}#hint{top:126px}#inspector{gap:0;padding:3px}#inspector button{min-width:36px;padding:7px}#piece-name{width:100px;font-size:16px}#piece-kind{font-size:16px;width:96px}#project{top:122px}#help{top:126px}#coordinates{bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--tray,0px))}}@media(orientation:landscape) and (max-height:500px){#toolbar{top:max(6px,env(safe-area-inset-top))}#view-tools{top:6px;left:max(8px,env(safe-area-inset-left))}#project,#help{top:62px}#hint{top:68px}#assets{height:68px}#asset-items button{width:48px;height:48px}#touch-controls button{width:56px;height:56px}}

#canvas{-webkit-touch-callout:none;touch-action:none}#toolbar,.floating{touch-action:none}

.playing #toolbar,.playing #view-tools,.playing #coordinates,.playing #hint,.playing #inspector,.playing #dimensions,.playing #assets{display:none!important}

#agent-dialog{width:330px}#agent-dialog button:not([data-icon]){width:100%;border:1px solid #333;margin-top:8px}#agent-url{width:100%;margin-top:10px}.agent-note{font-size:12px;line-height:1.5;color:#aaa}

html,body,#app{touch-action:pan-x pan-y}

.context-menu{position:absolute;z-index:8;width:176px;background:#090909;border:1px solid #555;border-radius:9px;padding:5px;box-shadow:0 8px 26px #0009;touch-action:none}.context-menu button{font-size:12px;min-height:36px;width:100%;justify-content:flex-start;padding:7px 9px}.context-order{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid #333;padding:3px 0}.context-menu label{display:block;font-size:11px;padding:8px}.context-menu input[type=range]{display:block;width:100%;min-height:24px;padding:0;accent-color:white}.playing .context-menu{display:none!important}

input[type=number]{touch-action:none;cursor:ew-resize;appearance:textfield;-moz-appearance:textfield;-webkit-touch-callout:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].scrubbing{background:#fff;color:#000;user-select:none;-webkit-user-select:none}input[type=number]:focus{cursor:text}

#assets{display:block;padding:22px 44px 6px 6px;min-height:94px;max-height:calc(100% - 132px)}#tray-handle{position:absolute;left:0;right:0;top:-6px;height:28px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:ns-resize;outline-offset:-4px}#tray-handle span{width:32px;height:3px;background:#777;border-radius:2px;pointer-events:none}#asset-items{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--asset-rows,1),66px);grid-auto-columns:66px;height:100%;align-content:start;gap:6px;overflow-x:auto;overflow-y:auto;touch-action:pan-x pan-y}#assets #close-assets{position:absolute;right:3px;top:26px;width:36px;padding:6px}@media(orientation:landscape) and (max-height:500px){#asset-items{grid-template-rows:repeat(var(--asset-rows,1),48px);grid-auto-columns:48px}}

#chat-panel{z-index:7;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:340px;max-width:calc(100% - 24px);height:min(480px,calc(100% - 140px));display:flex;flex-direction:column;padding:10px;overflow:hidden}#chat-panel .dialog-head{margin:0 0 6px}#chat-messages{flex:1;min-height:20px;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;user-select:text;-webkit-user-select:text}.chat-message{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 10px;margin:6px 0;border:1px solid #333;border-radius:6px}.chat-message.user{margin-left:24px;background:#fff;color:#000}.chat-message.assistant{margin-right:12px}#chat-status{font-size:12px;color:#aaa;margin:8px 4px}#chat-form{display:flex;gap:6px;align-items:end;padding-top:8px}#chat-prompt{font:inherit;font-size:16px;border:1px solid #444;border-radius:5px;color:#fff;background:#111;resize:none;min-width:0;width:100%;padding:8px;touch-action:pan-y;user-select:text;-webkit-user-select:text}#chat-send{border:1px solid #555}.playing #chat-panel{display:none!important}

#exit-play{display:none;position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));border:1px solid #444;background:#080808b8;border-radius:8px;z-index:10}.playing #exit-play{display:inline-flex}#save-status{font-size:12px;color:#888}#saved-projects{display:grid;gap:6px}#saved-projects button{justify-content:flex-start;border:1px solid #333;overflow-wrap:anywhere}

#agent-dialog .agent-action{display:block;text-align:center;border:1px solid #333;border-radius:6px;padding:10px;margin-top:8px;color:#fff;text-decoration:none;font-size:14px}#agent-dialog .agent-note a{color:inherit}#chatgpt-button{margin-left:auto;font-size:14px}#agent-dialog{max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y}