:root{--bg: #0b1020;--panel: #161c33;--panel-2: #1f2747;--ink: #f5f7ff;--ink-dim: #aab3d6;--accent: #ffd34e;--good: #248546;--bad: #eb0016;--fwd: #0073e3;--left: #9941ff;--right: #c74f00;--fan: #13846e;--turnaround: #c8307a;--shadow: 0 6px 18px rgba(0, 0, 0, .35);font-family:"Baloo 2",Comic Sans MS,Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none}#app{height:100%}.app-shell{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.topbar{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:var(--panel);border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.topbar .title{font-size:1.05rem;font-weight:800;letter-spacing:.2px}.topbar .spacer{flex:1}.topbar-btn{height:3rem;min-width:3rem;padding:0 .55rem;border-radius:10px;border:1.5px solid rgba(255,255,255,.1);background:var(--panel-2);color:var(--ink);font-size:.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;transition:background .15s ease,border-color .15s ease}.topbar-btn:active{transform:scale(.95)}.topbar-btn.lvl-grid{font-size:1.15rem;padding:0 .45rem}.easy-toggle.on{background:var(--accent);color:#2a2300;border-color:var(--accent)}.mute-toggle{font-size:1.05rem;padding:0 .5rem}.lvl-btn{width:3rem;height:3rem;border-radius:50%;border:none;background:var(--panel-2);color:var(--ink);font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow)}.lvl-btn:disabled{opacity:.35;cursor:not-allowed}.lvl-name{font-size:.9rem;font-weight:700;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;min-height:0}canvas#board{max-width:100%;max-height:100%;border-radius:18px;background:#0e1530;box-shadow:var(--shadow);touch-action:none}.program-wrap{margin:.4rem .6rem;padding:.35rem .5rem .3rem;background:var(--panel);border-radius:16px;box-shadow:var(--shadow)}.program-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}.program-label{font-size:.7rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-dim)}.program-expand{border:none;background:var(--panel-2);color:var(--ink);border-radius:10px;padding:.2rem .55rem;font-size:.95rem;cursor:pointer}.program-expand:disabled{opacity:.4;cursor:not-allowed}.program{display:flex;flex-wrap:nowrap;align-items:center;gap:.4rem;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:.1rem;min-height:3.6rem;scrollbar-width:none}.program::-webkit-scrollbar{display:none}.program .empty{color:var(--ink-dim);font-size:.95rem;padding:0 .4rem}.chip{width:3.2rem;height:3.2rem;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:var(--panel-2);color:var(--ink);position:relative;cursor:default;transition:transform .12s ease,box-shadow .12s ease}.chip.active{transform:translateY(-3px) scale(1.08);box-shadow:0 0 0 3px var(--accent),var(--shadow)}.chip-remove{position:absolute;top:-2px;right:-2px;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--bad);color:#fff;font-size:.7rem;line-height:1.5rem;text-align:center;opacity:0;transition:opacity .15s ease;pointer-events:none}.chip:hover .chip-remove,.chip:active .chip-remove{opacity:1}@media (hover: none){.chip-remove{opacity:1;pointer-events:auto}}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.4rem .6rem .2rem}.cmd{height:4.2rem;border-radius:16px;border:none;font-size:2rem;color:#fff;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:transform .08s ease,filter .08s ease}.cmd .label{font-size:.72rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;opacity:.92}.cmd:active{transform:scale(.94);filter:brightness(1.1)}.cmd.forward,.chip.forward{background:var(--fwd)}.cmd.left,.chip.left{background:var(--left)}.cmd.right,.chip.right{background:var(--right)}.cmd.fan,.chip.fan{background:var(--fan)}.cmd.fan{grid-column:1 / -1}.cmd.turnaround,.chip.turnaround{background:var(--turnaround)}.cmd{position:relative}.cmd.forward:before,.chip.forward:before{content:"▲"}.cmd.left:before,.chip.left:before{content:"◀"}.cmd.right:before,.chip.right:before{content:"▶"}.cmd.fan:before,.chip.fan:before{content:"◆"}.cmd.turnaround:before,.chip.turnaround:before{content:"⇄"}.cmd:before{position:absolute;right:.25rem;bottom:.15rem;font-size:2.2rem;line-height:1;opacity:.16;pointer-events:none}.chip:before{position:absolute;right:.05rem;bottom:0;font-size:1.7rem;line-height:1;opacity:.22;pointer-events:none}.controls{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:.5rem;padding:.2rem .6rem .6rem}.btn{height:4rem;border-radius:16px;border:none;font-size:1.3rem;font-weight:800;color:#fff;cursor:pointer;box-shadow:var(--shadow);letter-spacing:.4px}.btn:active{transform:scale(.97)}.btn.run{background:var(--good)}.btn.clear{background:var(--bad)}.btn.step{background:#5a6cc0}.btn:disabled{opacity:.4;cursor:not-allowed}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#080c1c8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:10}.overlay.show{opacity:1;pointer-events:auto}.overlay .card{background:var(--panel);border-radius:20px;padding:1.4rem 1.8rem;text-align:center;box-shadow:var(--shadow);max-width:80%}.overlay .card .emoji{font-size:3.4rem}.overlay .card .msg{font-size:1.3rem;font-weight:800;margin:.4rem 0 .9rem}.overlay .card .again{background:var(--accent);color:#2a2300;border:none;border-radius:14px;padding:.7rem 1.2rem;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}.lvl-select-overlay{z-index:20}.lvl-select-card{max-width:90vw;max-height:80vh;overflow-y:auto;padding:1rem 1.2rem}.lvl-select-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.lvl-select-title{font-size:1.2rem;font-weight:800}.lvl-select-close{width:3rem;height:3rem;border-radius:50%;border:none;background:var(--bad);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.lvl-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.5rem}.lvl-pick{height:52px;border-radius:14px;border:2px solid transparent;background:var(--panel-2);color:var(--ink);font-size:1.15rem;font-weight:800;cursor:pointer;touch-action:manipulation;transition:border-color .15s ease,background .15s ease;display:flex;align-items:center;justify-content:center}.lvl-pick.current{border-color:var(--accent);background:#ffd34e1f;color:var(--accent)}.lvl-pick:active{transform:scale(.94)}.lvl-pick.locked{opacity:.5;cursor:not-allowed}.feathers{color:var(--accent);font-weight:800;font-size:.95rem;padding:0 .25rem;white-space:nowrap}.par{color:var(--ink-dim);font-weight:700;font-size:.9rem;padding:0 .2rem;white-space:nowrap}.cmd.hint-pulse{animation:hint-pulse .7s ease 2}@keyframes hint-pulse{0%,to{transform:scale(1);box-shadow:0 0 0 0 var(--accent)}50%{transform:scale(1.18);box-shadow:0 0 0 8px #ffd34e80}}.onboard-finger{position:fixed;top:0;left:0;font-size:2.4rem;z-index:1000;pointer-events:none;transition:left .35s cubic-bezier(.4,1.3,.5,1),top .35s cubic-bezier(.4,1.3,.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.onboard-finger.press{transform:scale(.82)}.cmd.demo-tap{filter:brightness(1.3)}.replay-btn{width:100%;margin-top:.5rem;padding:.7rem;border:none;border-radius:12px;background:var(--accent);color:#111;font-weight:800;font-size:1rem;cursor:pointer}.replay-btn:active{transform:scale(.98)}.hint{text-align:center;color:var(--ink-dim);font-size:.85rem;padding:0 .6rem .4rem}@media (min-width: 900px){.app-shell{max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,360px);grid-template-rows:auto;gap:.8rem;padding:.8rem}.app-shell>.topbar{grid-column:1 / -1}.stage{grid-column:1;grid-row:2 / -1;min-width:0;min-height:0}.program-wrap,.palette,.controls{grid-column:2}.program-wrap{margin:0}}.settings-overlay{z-index:20}.settings-card{max-width:460px}.settings-body{display:flex;flex-direction:column;gap:.5rem;padding:.2rem;width:min(86vw,420px)}.toggle-row{display:flex;align-items:center;gap:.6rem;width:100%;padding:.7rem .8rem;background:var(--panel-2);border:none;border-radius:12px;color:var(--ink);text-align:left;cursor:pointer;font:inherit;min-height:48px}.toggle-row .tog-label{font-weight:700}.toggle-row .tog-hint{display:block;font-size:.74rem;color:var(--ink-dim);font-weight:400}.toggle-row .switch{margin-left:auto}.toggle-row:active{transform:scale(.99)}.speed-row .tog-speed{margin-left:auto;font-weight:700;opacity:.85}.switch{position:relative;width:46px;height:26px;border-radius:999px;background:#ffffff2e;flex:none;transition:background .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}.switch.on{background:var(--good)}.switch.on:after{transform:translate(20px)}.lang-row{display:flex;flex-direction:column;gap:.4rem;width:100%;padding:.7rem .8rem;background:var(--panel-2);border-radius:12px}.lang-row .tog-label{font-weight:700}.lang-btns{display:flex;gap:.4rem;flex-wrap:wrap}.lang-btn{min-height:48px;padding:0 .9rem;border:2px solid transparent;border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease}.lang-btn.active{border-color:var(--accent);background:#28335f}.lang-btn:active{transform:scale(.96)}.lvl-select-custom{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}.lvl-select-subhead{font-size:.72rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:.3rem}.custom-lvl{display:flex;align-items:center;gap:.4rem}.custom-lvl-pick{flex:1;padding:.6rem .7rem;background:var(--panel-2);color:var(--ink);border:none;border-radius:10px;font:inherit;text-align:left;cursor:pointer}.custom-lvl-pick.current{outline:2px solid var(--accent)}.custom-lvl-del{min-width:48px;min-height:48px;flex:none;border:none;border-radius:10px;background:#ff5d6c2e;color:var(--bad);font-size:1rem;cursor:pointer}.chip.error{outline:3px solid var(--bad);outline-offset:1px;animation:chip-err .7s ease-in-out infinite alternate}@keyframes chip-err{0%{box-shadow:0 0 #ff5d6c00}to{box-shadow:0 0 12px 2px #ff5d6ca6}}.chip-badge{position:absolute;bottom:-3px;right:-5px;background:var(--bg);color:#fff;font-size:.68rem;font-weight:800;border-radius:999px;padding:0 .32rem;min-width:1.15rem;line-height:1.15rem;text-align:center;box-shadow:0 1px 3px #00000073}.chip .chip-remove{background:#00000080}.program-overlay{z-index:25}.program-card{max-width:560px;max-height:82vh;overflow-y:auto}.program-overlay-grid{display:flex;flex-wrap:wrap;gap:.5rem;padding:.3rem;justify-content:center}.chip.big{width:3.6rem;height:3.6rem;font-size:1.8rem}.chip-badge.pulse{animation:badge-pop .36s ease}@keyframes badge-pop{0%{transform:scale(1)}40%{transform:scale(1.5);background:var(--accent)}to{transform:scale(1)}}:where(button,[role=switch],[role=button],[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}}