:root{--bg:#f4f1ea;--ink:#23263a;--muted:#6b6f80;--bar:#1d2340;--card:#fff;--line:#d9d4c7;--chip:#ecebe6;--chip-edge:#b9b6ab;--accent:#cc333f;--cyan:#00a0b0;--brown:#6a4a3c;--red:#cc333f;--orange:#eb6841;--yellow:#edc951;--bar-h:56px}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;font:400 16px/1.35 Roboto Condensed,Arial Narrow,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app{flex-direction:column;display:flex;position:fixed;inset:0}.bar{height:var(--bar-h);padding:env(safe-area-inset-top) 112px 0 max(12px, env(safe-area-inset-left));background:var(--bar);color:#fff;flex:none;align-items:center;gap:12px;display:flex}.bar h1{white-space:nowrap;margin:0;font-size:20px;font-weight:700}.levelnav{flex:1;align-items:center;gap:6px;min-width:0;max-width:420px;display:flex}.navbtn{color:#fff;cursor:pointer;background:#ffffff24;border:0;border-radius:10px;flex:none;width:40px;height:40px;font-size:28px;line-height:1}.navbtn:disabled{opacity:.35;cursor:default}#levels{min-width:0;height:40px;color:var(--ink);font:inherit;background:#fff;border:0;border-radius:10px;flex:1;padding:0 8px;font-size:15px}#scroll{-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0;padding:8px max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));box-sizing:border-box;flex:1;overflow:hidden auto}#board{min-width:0}#stage{width:min(100%, calc((100dvh - var(--bar-h) - 24px) * 1600 / 860));aspect-ratio:1600/860;background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 auto;position:relative;overflow:hidden}#canvas{width:100%;height:100%;display:block}#goal-label{color:var(--muted);pointer-events:none;font-size:clamp(12px,2.4vw,18px);font-weight:700;position:absolute;top:6%;left:77%}#message{visibility:hidden;align-items:center;gap:12px;display:flex;position:absolute;bottom:6%;left:3%}#solved{color:#2c7a3f;font-size:clamp(18px,3.6vw,28px);font-weight:700}#help{min-height:1.35em;color:var(--ink);margin:8px 4px 0;font-size:15px}#controls{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.controlBox{text-align:center;min-width:0}.controlBox h2{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 4px;font-size:14px;font-weight:700}.sortable{background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:96px;margin:0;padding:6px 6px 40px;list-style:none}#program{border-style:dashed;border-color:var(--chip-edge)}#program:empty:after,#available:empty:after{color:#bbb;padding-top:16px;font-weight:700;display:block}#program:empty:after{content:"Tap or drop functions here"}#available:empty:after{content:"No functions left"}.transformer,.sortable li{background:var(--chip);border-bottom:1px solid var(--chip-edge);border-radius:6px}.transformer{padding:1px 4px;display:inline-block}.sortable li{box-sizing:border-box;cursor:pointer;touch-action:pan-y;flex-wrap:wrap;justify-content:center;align-items:center;min-height:36px;margin:0 0 6px;padding:5px 8px;font-size:16px;line-height:24px;display:flex}.sortable li:hover{background:#e2e0d8}.sortable li:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}li.sortable-ghost{opacity:.4}li.sortable-chosen{background:#fff5cf}.button{font:inherit;min-height:40px;color:var(--ink);cursor:pointer;background:#f0f0f0;border:1px solid #8a8a8a;border-bottom-color:#555;border-radius:10px;margin-top:6px;padding:6px 16px;font-size:15px}.button:hover{background:#dedede}.button.primary,#nextlevel{background:var(--accent);color:#fff;border-color:#9c2630;margin:0}.cube{vertical-align:middle;border:1px solid #444;border-radius:3px;width:11px;height:11px;margin:0 1px;display:inline-block}.stack{vertical-align:middle;width:15px;font-size:0;line-height:2px;display:inline-block}.stack .cube{vertical-align:baseline;width:9px;height:9px}.X{background-color:#fff;border:1px dotted #222}.Cyan{background-color:var(--cyan)}.Brown{background-color:var(--brown)}.Red{background-color:var(--red)}.Orange{background-color:var(--orange)}.Yellow{background-color:var(--yellow)}.animated{animation-duration:1s;animation-fill-mode:both}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}#toast{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:15;color:#fff;text-align:center;opacity:0;pointer-events:none;background:#14162ae6;border-radius:999px;max-width:calc(100% - 32px);padding:10px 16px;font-size:15px;transition:opacity .2s;position:fixed;transform:translate(-50%)}#toast.show{opacity:1}.dialog{z-index:18;touch-action:none;background:#080a1499;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog[hidden]{display:none}.dialog .card{background:var(--card);text-align:center;border-radius:16px;max-width:420px;padding:20px 22px;box-shadow:0 10px 40px #0000004d}.dialog h2{margin:0 0 8px;font-size:24px}.dialog p{margin:0 0 10px}.dialog .keys{color:var(--muted);font-size:14px}@media (aspect-ratio>=5/4) and (width>=640px){#scroll{grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);align-items:start;gap:12px;display:grid}#stage{width:min(100%, calc((100dvh - var(--bar-h) - 90px) * 1600 / 860))}#controls{margin-top:0}}@media (height<=480px){:root{--bar-h:48px}.sortable li{min-height:32px;padding:3px 6px;font-size:15px}.bar h1{font-size:17px}}@media (width<=520px){.bar h1{display:none}}@media (width<=420px){.sortable li{padding:4px;font-size:14px}}