:root{--bg:#0b1220;--panel:#16213a;--panel2:#1e2c4a;--line:#2f4166;--ink:#e8f0ff;--dim:#9fb2d0;--accent:#ffd166;--accent2:#7ee0ff;--danger:#ff7b7b}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(900px 600px at 50% -10%, #1b2b4a 0%, var(--bg) 60%);color:var(--ink);-webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Meiryo,system-ui,sans-serif}.app{max-width:1100px;margin:0 auto;padding:12px 14px 20px}.bar{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:10px;display:flex}h1{letter-spacing:.04em;white-space:nowrap;margin:0;font-size:18px}h1:before{content:"🎢 "}.tabs{flex-wrap:wrap;gap:6px;display:flex}.tabs button{background:var(--panel);color:var(--dim);border:1px solid var(--line);cursor:pointer;white-space:nowrap;border-radius:999px;padding:6px 13px;font-family:inherit;font-size:13px}.tabs button.on{background:var(--accent);color:#2a1e00;border-color:var(--accent);font-weight:700}.layout{justify-content:center;align-items:flex-start;gap:16px;display:flex}.stagewrap{flex:none;min-width:0}.canvasbox{position:relative}canvas#cv{border:1px solid var(--line);touch-action:none;cursor:crosshair;border-radius:14px;width:auto;max-width:100%;height:calc(100dvh - 150px);display:block;box-shadow:0 18px 40px #00000073}.side{background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;flex:0 280px;align-self:stretch;gap:10px;padding:12px;display:flex}.controls{gap:8px;display:flex}.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);cursor:pointer;white-space:nowrap;touch-action:manipulation;border-radius:10px;padding:8px 14px;font-family:inherit;font-size:14px}.btn.big{flex:1 1 0;min-height:48px;font-size:15px;font-weight:700}.btn.primary{background:var(--accent);color:#2a1e00;border-color:#e6b93f}.btn.ghost{color:var(--dim);background:0 0;padding:6px 10px;font-size:12px}.btn.round{flex:none;width:52px;height:48px;padding:0;font-size:22px}.btn.danger{color:var(--danger);background:#ff7b7b24;border-color:#7a3535;padding:6px 12px}.btn:disabled{opacity:.4;cursor:default}.selbar{background:var(--panel2);border:1px solid var(--line);border-radius:12px;align-items:center;min-height:60px;padding:6px 10px;display:flex}.selbar.active{border-color:var(--accent2);box-shadow:0 0 0 2px #7ee0ff24}.selhelp{color:var(--dim);text-align:center;width:100%;margin:0;font-size:11.5px;line-height:1.5}.selctl{align-items:center;gap:7px;width:100%;display:flex}.selctl.hidden{display:none}.selname{flex:none;font-size:12px;font-weight:700}.seldeg{color:var(--accent2);font-variant-numeric:tabular-nums;text-align:right;flex:0 0 40px;font-size:12px}.anglerange{appearance:none;touch-action:none;background:0 0;flex:auto;min-width:0;height:48px;margin:0}.anglerange::-webkit-slider-runnable-track{background:linear-gradient(90deg,#2b3a55,#46618c);border-radius:999px;height:8px}.anglerange::-moz-range-track{background:#3a4f73;border-radius:999px;height:8px}.anglerange::-webkit-slider-thumb{appearance:none;background:var(--accent2);border:3px solid #0b1220;border-radius:50%;width:30px;height:30px;margin-top:-11px;box-shadow:0 2px 6px #00000080}.anglerange::-moz-range-thumb{background:var(--accent2);border:3px solid #0b1220;border-radius:50%;width:30px;height:30px}.plistwrap{min-height:0;position:relative}.plist{flex-wrap:wrap;gap:7px;display:flex}.pitem{text-align:left;background:var(--panel2);border:1px solid var(--line);cursor:pointer;color:var(--ink);touch-action:manipulation;border-radius:11px;flex:130px;align-items:center;gap:8px;min-height:52px;padding:6px 8px;font-family:inherit;display:flex}.pitem.on{border-color:var(--accent);box-shadow:inset 0 0 0 2px #ffd16640}.pitem.empty{opacity:.35;cursor:default}.pitem canvas{flex:none;width:50px;height:40px}.pitem .nm{font-size:12.5px;font-weight:700}.pitem .ct{color:var(--dim);font-size:11px}.zoomreset{z-index:60;background:var(--accent2);color:#06202b;cursor:pointer;touch-action:manipulation;border:none;border-radius:999px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:700;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #00000080}.zoomreset.hidden{display:none}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#060b169e;border-radius:14px;place-items:center;display:grid;position:absolute;inset:0}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:16px;padding:22px 28px;box-shadow:0 20px 50px #00000080}.ovchara{filter:drop-shadow(0 5px 12px #0000008c);width:auto;height:92px;margin:-8px auto 4px;animation:.45s cubic-bezier(.2,1.6,.4,1) both ovpop;display:block}@keyframes ovpop{0%{opacity:0;transform:scale(.55)translateY(14px)}to{opacity:1;transform:scale(1)translateY(0)}}.ovcharas{justify-content:center;align-items:flex-end;gap:10px;display:flex}.ovchara.hidden{display:none}.ovTitle{color:var(--accent);margin:0 0 6px;font-size:26px}.ovbadge{background:var(--accent2);color:#06202b;border-radius:999px;margin:0 0 8px;padding:3px 12px;font-size:12px;font-weight:700;animation:.45s cubic-bezier(.2,1.6,.4,1) .15s both ovpop;display:inline-block}.ovbadge.hidden{display:none}.ovstars{color:var(--accent);font-variant-numeric:tabular-nums;margin:10px 0 0;font-size:13px;font-weight:700}.ovstars.hidden{display:none}.progress{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;background:#ffd1661f;border:1px solid #ffd16659;border-radius:999px;flex:none;padding:4px 10px;font-size:12px;font-weight:700}.tabs button.done{color:var(--ink);border-color:#ffd1668c}.ovText{color:var(--dim);margin:0 0 16px;font-size:13px}.ovBtns{justify-content:center;gap:10px;display:flex}@media (width<=780px){.app{flex-direction:column;max-width:none;height:100dvh;padding:6px 8px 8px;display:flex}.bar{flex:none;gap:8px;margin-bottom:6px}h1{display:none}.tabs{flex-wrap:nowrap;flex:auto;min-width:0;padding-bottom:2px;overflow-x:auto}.tabs button{padding:7px 12px;font-size:12.5px}.bar{flex-wrap:nowrap}.layout{flex-direction:column;flex:auto;gap:8px;min-height:0}.stagewrap{flex-direction:column;flex:auto;width:100%;min-height:0;display:flex}.canvasbox{flex:auto;justify-content:center;min-height:0;display:flex}canvas#cv{border-radius:10px;width:auto;max-width:100%;height:100%}.side{flex:none;gap:6px;width:100%;height:186px;padding:8px;overflow:hidden}.controls{flex:none;align-items:stretch}.btn.big{min-height:42px;font-size:14px}.btn.ghost{flex:none;padding:4px 9px;font-size:11px}.selbar{flex:none;min-height:54px;padding:5px 8px}.selhelp{font-size:11px}.selname{display:none}.btn.round{width:46px;height:42px;font-size:20px}.btn.danger{width:44px;padding:0;font-size:17px}.anglerange{height:42px}.seldeg{flex:0 0 34px;font-size:11px}.plistwrap{flex:auto}.plistwrap:after{content:"";pointer-events:none;background:linear-gradient(90deg, #16213a00, var(--panel));width:26px;position:absolute;top:0;bottom:0;right:0}.plist{scroll-snap-type:x proximity;flex-wrap:nowrap;align-items:stretch;height:100%;padding-right:22px;overflow:auto hidden}.pitem{scroll-snap-align:start;flex-direction:column;flex:none;justify-content:center;gap:0;width:74px;padding:2px}.pitem canvas{width:56px;height:30px}.pitem .nm{white-space:nowrap;font-size:10px}.pitem .ct{font-size:10px}}@media (width<=900px) and (orientation:landscape){.layout{flex-direction:row;align-items:stretch}.stagewrap{flex:none}.side{flex:auto;height:auto}.plist{flex-wrap:wrap;overflow-x:visible}.pitem{flex:74px}}.coach{z-index:50;pointer-events:none;position:fixed;inset:0}.coach.hidden{display:none}.coachmask{pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.coachhole{border:4px solid var(--accent2);border-radius:14px;transition:left .28s,top .28s,width .28s,height .28s;animation:1.4s ease-in-out infinite coachpulse;position:absolute}@keyframes coachpulse{0%,to{box-shadow:0 0 #7ee0ff99,inset 0 0 18px #7ee0ff2e}50%{box-shadow:0 0 0 16px #7ee0ff00,inset 0 0 18px #7ee0ff0d}}.coachhole2{border:3px dashed var(--accent);border-radius:14px;transition:left .28s,top .28s,width .28s,height .28s;position:absolute}.coachhole2.hidden{display:none}.coachwatch{background:var(--accent);color:#2a1e00;white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:10px;font-weight:700;position:absolute;top:-11px;left:50%;transform:translate(-50%)}.coachhand{filter:drop-shadow(0 2px 6px #000c);font-size:26px;animation:1s ease-in-out infinite coachpoint;display:none;position:absolute;bottom:-34px;left:50%;transform:translate(-50%)}.coachhole.withhand .coachhand{display:block}@keyframes coachpoint{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-9px)}}.coach-target{animation:1.1s ease-in-out infinite coachbeat;position:relative}@keyframes coachbeat{0%,to{transform:scale(1)}50%{transform:scale(1.055)}}.coachtip{pointer-events:auto;background:var(--panel);border:1px solid var(--accent2);border-radius:12px;width:254px;padding:10px 14px 8px;transition:left .28s,top .28s;position:absolute;box-shadow:0 12px 34px #0000008c}.coachstep{color:var(--accent2);letter-spacing:.1em;margin:0 0 3px;font-size:10.5px}.coachtext{margin:0 0 6px;font-size:13.5px;font-weight:700;line-height:1.6}.coachtip .btn.ghost{padding:3px 8px;font-size:11px}.introcard{max-width:340px}.introchara{filter:drop-shadow(0 5px 12px #0000008c);width:auto;height:104px;margin:-6px auto 6px;animation:.5s cubic-bezier(.2,1.6,.4,1) both ovpop;display:block}.introcard .ovTitle{margin-bottom:12px;font-size:22px;line-height:1.35}.introtext{color:var(--ink);margin:0 0 18px;font-size:14px;line-height:1.85}.introtext b{color:var(--accent)}.introask{color:var(--dim);margin:0 0 12px;font-size:13px}.introcard .ovBtns .btn.big{flex:1 1 0}.tutorial{z-index:40;background:#060b16e0;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.tutorial.hidden{display:none}.tutcard{text-align:left;max-width:380px;max-height:90dvh;overflow-y:auto}.tutlist{margin:0 0 12px;padding-left:22px}.tutlist li{color:var(--dim);margin-bottom:9px;font-size:13px;line-height:1.65}.tutlist b{color:var(--ink)}.tutmini{color:var(--dim);margin:0 0 16px;font-size:12px}.tutmini b{color:var(--accent2)}.tutcard .btn.big{width:100%}.labnote{border-top:1px solid var(--line);text-align:center;margin-top:20px;padding-top:16px}.labchara{justify-content:center;align-items:flex-end;gap:18px;margin-bottom:8px;display:flex}.labchara figure{margin:0}.labchara img{filter:drop-shadow(0 4px 10px #00000080);width:auto;height:92px;display:block}.labchara figcaption{color:var(--dim);margin-top:4px;font-size:10px}.labtitle{color:var(--accent);margin:0 0 6px;font-size:13px;font-weight:700}.labsub{color:var(--dim);margin:0 0 12px;font-size:11.5px;line-height:1.7}.btn.lablink{padding:8px 16px;font-size:12.5px;text-decoration:none;display:inline-block}.labline{color:var(--dim);opacity:.85;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;text-decoration:none;display:inline-flex}.labline img{width:auto;height:26px}.labline:hover{color:var(--accent2)}.btn.help{width:36px;height:36px;color:var(--accent2);border-radius:50%;flex:none;padding:0;font-size:16px;font-weight:700}.btn.help.danger{color:var(--danger)}.btn.help.off{color:var(--dim);opacity:.6}.btn.help.armed{background:var(--danger);color:#2a0d0d;border-color:var(--danger);border-radius:999px;width:auto;padding:0 12px;font-size:12px}