:root{--navy:#2c3649;--navy-dark:#232b3b;--slot:#161c28;--rim:#e7dfc6;--cream:#f3ecd9;--cream-ledge:#d9ceb0;--silver:#c9ced6;--screw-line:#7b828d;--ink:#1f1f22;--red:#d8392d;--drum:#ecebe5;--focus:#f6c344;--bg:#f4f0e6;--text:#2a2a2e;--muted:#6b6a66;--accent:#2c3649;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#15171c;--text:#e6e6ea;--muted:#9a9aa3;--accent:#c9ced6}}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0}body{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-tap-highlight-color:transparent;flex-direction:column;font-family:Noto Sans JP,Hiragino Sans,Yu Gothic UI,system-ui,sans-serif;display:flex}#app{flex-direction:column;flex:1;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.site-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px 16px;display:flex}.site-header h1{margin:0;font-size:clamp(1rem,3.2vw,1.3rem);font-weight:700}.header-actions{align-items:center;gap:8px;display:flex}.nav-btn{border:1.5px solid var(--accent);color:var(--accent);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:500}.nav-btn:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}.lang-switch{border:1.5px solid var(--accent);border-radius:999px;flex-shrink:0;display:inline-flex;overflow:hidden}.lang-switch button{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:4px 12px;font-size:.8rem}.lang-switch button[aria-pressed=true]{background:var(--accent);color:var(--bg)}.site-main{flex-direction:column;flex:1;align-items:center;padding:0 12px 12px;display:flex}.hint,.kbd-help{text-align:center;color:var(--muted);margin:4px 0 12px;font-size:.85rem}.kbd-help{margin-top:16px;font-size:.75rem}@media (pointer:coarse){.kbd-help{display:none}}.site-footer{text-align:center;color:var(--muted);padding:12px 16px 20px;font-size:.75rem}.site-footer p{margin:0}.site-footer a{color:inherit}body.embed .site-header,body.embed .site-footer,body.embed .hint,body.embed .kbd-help{display:none}body.embed .site-main{justify-content:center;padding:8px}.modal{color:var(--text);background:0 0;border:0;width:100%;max-width:min(92vw,560px);padding:0}.modal::backdrop{background:#0000008c}.modal-card{background:var(--bg);border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);border-radius:14px;padding:20px 22px;box-shadow:0 16px 40px #00000059}.modal-title{margin:0 0 12px;font-size:1.1rem;font-weight:700}.modal-body{color:var(--muted);margin:0 0 18px;font-size:.9rem;line-height:1.65}.guide-content{flex-direction:column;gap:16px;max-height:min(68dvh,520px);margin-bottom:16px;padding-right:6px;display:flex;overflow-y:auto}.guide-section{border-top:1px solid color-mix(in srgb, var(--accent) 18%, transparent);padding-top:12px}.guide-section:first-child{border-top:0;padding-top:2px}.guide-section h3{color:var(--text);margin:0 0 6px;font-size:.95rem;font-weight:700}.guide-section p{color:var(--muted);margin:0 0 8px;font-size:.86rem;line-height:1.65}.guide-section p:last-child{margin-bottom:0}.guide-example{background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:8px;margin-top:8px;padding:10px 12px;font-size:.84rem;line-height:1.6}.guide-example-title{color:var(--text);margin-bottom:4px;font-weight:700}.guide-example ol{color:var(--text);margin:0;padding-left:1.3rem}.guide-example li+li{margin-top:4px}.guide-note{opacity:.85;font-size:.8rem!important}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.btn{border:1.5px solid var(--accent);color:var(--accent);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600}.btn-primary{background:var(--accent);color:var(--bg)}.stage{--dw:min(84vw, 400px, calc((100dvh - 190px) / 1.47));padding-right:calc(var(--dw) * .1);padding-left:calc(var(--dw) * .02)}body.embed .stage{--dw:min(84vw, calc((100dvh - 24px) / 1.47))}.device{width:max(var(--dw), 240px);aspect-ratio:100/147;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;container-type:inline-size}.device>*,.cover>*{position:absolute}.case{background:var(--rim);border-radius:6cqw;inset:0}.panel{background:var(--navy);border-radius:4.6cqw 4.6cqw 0 0;height:80cqw;top:1.8cqw;left:1.8cqw;right:1.8cqw}.plate{background:var(--silver);border-radius:.6cqw;width:86cqw;height:5cqw;top:4.4cqw;left:7cqw}.plate-label{left:calc(var(--cx) * 1cqw - 7cqw);white-space:nowrap;color:var(--ink);font-family:Yu Mincho,Hiragino Mincho ProN,Noto Serif JP,serif;font-size:3cqw;font-weight:700;position:absolute;top:50%;transform:translate(-50%)translateY(-50%)}.screw{width:3cqw;height:3cqw;translate:-50% -50%}.screw svg,.sub-mark svg,.logo svg{width:100%;height:100%;display:block}.slot{left:calc(var(--cx) * 1cqw - 5.5cqw);background:var(--slot);border-radius:.9cqw .9cqw 0 0;outline:none;width:11cqw;height:118cqw;top:12.6cqw;overflow:hidden}.slot:focus-visible{box-shadow:inset 0 0 0 .7cqw var(--focus)}.strip{background:var(--cream);touch-action:none;cursor:grab;will-change:transform;border-radius:.6cqw;position:absolute;top:.4cqw;left:.7cqw;right:.7cqw}.strip.dragging{cursor:grabbing}.strip.returning{transition:transform .22s cubic-bezier(.34,1.4,.55,1)}.cell{border-bottom:.7cqw solid var(--cream-ledge);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:.5cqw;height:6cqw;line-height:1;display:flex}.num-black{color:var(--ink);font-size:4.3cqw;font-weight:500}.num-red{color:var(--red);font-size:3cqw;font-weight:800}.tab{justify-content:center;align-items:center;height:4.4cqw;display:flex}.tab:after{content:"";background:var(--cream-ledge);border-radius:.4cqw;width:5cqw;height:2.4cqw}.sub-mark{width:3.4cqw;height:4.8cqw;color:var(--cream);top:61.6cqw;left:92.7cqw}.cover{background:var(--navy-dark);z-index:3;border-radius:1cqw 1cqw 6cqw 6cqw;inset:77.5cqw 0 0}.window{left:calc(var(--cx) * 1cqw - 3.8cqw);background:var(--slot);border-radius:.9cqw;width:7.6cqw;height:9.4cqw;padding:.9cqw;top:2.6cqw}.drum{background:var(--drum);border-radius:.5cqw;width:100%;height:100%;position:relative;overflow:hidden}.drum:after{content:"";pointer-events:none;background:linear-gradient(#00000047,#0000 30% 70%,#00000047);position:absolute;inset:0}.reel{will-change:transform;height:1100%;position:absolute;top:0;left:0;right:0}.reel span{height:9.09091%;color:var(--ink);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:5.2cqw;font-weight:700;display:flex}.logo{width:34cqw;height:8.5cqw;top:52cqw;left:56cqw}.lever-track{background:var(--navy-dark);border-radius:.7cqw;width:1.4cqw;height:15cqw;top:80.5cqw;left:99.4cqw}.lever{background:var(--silver);cursor:grab;touch-action:none;z-index:4;border-radius:.6cqw 1.6cqw 1.6cqw .6cqw;outline:none;width:9cqw;height:3.2cqw;top:82cqw;left:99cqw;box-shadow:inset -1.6cqw 0 #0000001f}.lever.dragging{cursor:grabbing}.lever.returning{transition:transform .18s ease-out}.lever:focus-visible{box-shadow:0 0 0 .6cqw var(--focus)}@media (prefers-reduced-motion:reduce){.strip.returning,.lever.returning{transition:none}}.tutorial-course-list{flex-direction:column;gap:12px;margin-bottom:18px;display:flex}.tutorial-course-card{border:1.5px solid color-mix(in srgb, var(--accent) 28%, transparent);background:color-mix(in srgb, var(--accent) 6%, transparent);border-radius:12px;flex-direction:column;gap:6px;padding:14px 16px;display:flex}.tutorial-course-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.tutorial-course-title{color:var(--text);margin:0;font-size:.98rem;font-weight:700}.tutorial-course-badge{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--text);border-radius:999px;padding:2px 8px;font-size:.72rem;font-weight:700}.tutorial-course-formula{color:var(--accent);font-family:ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;font-size:.92rem;font-weight:700}.tutorial-course-summary{color:var(--muted);margin:0 0 6px;font-size:.84rem;line-height:1.55}.tutorial-course-actions{justify-content:flex-end;display:flex}body.tutorial-mode .hint{display:none}body.tutorial-mode .stage{--dw:min(84vw, 375px, calc((100dvh - 285px) / 1.47))}.tutorial-popup{border:2px solid var(--focus);background:color-mix(in srgb, var(--bg) 94%, var(--focus));z-index:10;border-radius:12px;width:min(94vw,460px);margin:2px 0 14px;padding:11px 14px 12px;position:relative;box-shadow:0 8px 24px #0000002e}.tutorial-popup:before,.tutorial-popup:after{content:"";top:100%;left:var(--pointer-x,50%);pointer-events:none;border-style:solid;transition:left .22s cubic-bezier(.22,1,.36,1);position:absolute;transform:translate(-50%)}.tutorial-popup:before{border-width:9px 9px 0;border-color:var(--focus) transparent transparent transparent}.tutorial-popup:after{border-width:7px 7px 0;border-color:color-mix(in srgb, var(--bg) 94%, var(--focus)) transparent transparent transparent;margin-top:-2px}.tutorial-popup[data-completed=true]:before,.tutorial-popup[data-completed=true]:after{display:none}.tutorial-popup-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.tutorial-popup-meta{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.tutorial-formula-pill{background:var(--navy);color:var(--cream);border-radius:999px;padding:2px 8px;font-family:ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;font-size:.76rem;font-weight:700}.tutorial-step-count{color:var(--muted);letter-spacing:.03em;font-size:.74rem;font-weight:700}.tutorial-exit-btn{border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:999px;flex-shrink:0;padding:2px 9px;font-size:.74rem;font-weight:600}.tutorial-exit-btn:hover{color:var(--text);border-color:var(--accent)}.tutorial-progress{background:color-mix(in srgb, var(--accent) 16%, transparent);border-radius:999px;height:4px;margin-bottom:8px;overflow:hidden}.tutorial-progress-bar{background:#d97706;border-radius:999px;height:100%;transition:width .24s}.tutorial-phase-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 8px;margin-bottom:4px;display:flex}.tutorial-phase{color:var(--text);font-size:.86rem;font-weight:700}.tutorial-target-chip{color:#1f1f22;background:#fde68a;border:1px solid #d97706;border-radius:6px;align-items:center;gap:4px;padding:2px 8px;font-size:.75rem;font-weight:700;display:inline-flex}.tutorial-target-chip[data-color=red]{color:#991b1b;border-color:var(--red);background:#fee2e2}.tutorial-instruction{color:var(--text);margin:0;font-size:.83rem;line-height:1.55}.tutorial-feedback{background:color-mix(in srgb, var(--red) 14%, var(--bg));border:1px solid color-mix(in srgb, var(--red) 55%, transparent);color:var(--text);border-radius:8px;margin-top:7px;padding:6px 10px;font-size:.78rem;font-weight:600;line-height:1.45;animation:.28s tutorial-shake}@keyframes tutorial-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.tutorial-popup-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:9px;display:flex}.device.tutorial-active .slot.tutorial-dim-slot{opacity:.52;transition:opacity .18s}.device.tutorial-active .slot.tutorial-target-slot{box-shadow:inset 0 0 0 .65cqw var(--focus);z-index:2}.plate-label.tutorial-target-plate{background:var(--focus);color:var(--ink);border-radius:.6cqw;padding:.1cqw 1cqw;box-shadow:0 0 0 .3cqw #b45309}.cell.tutorial-target-cell{z-index:2;background:#fde68a;position:relative;box-shadow:inset 0 0 0 .55cqw #d97706}.cell.tutorial-target-cell.tutorial-target-black .num-black{font-weight:800;transform:scale(1.08)}.cell.tutorial-target-cell.tutorial-target-black .num-red{opacity:.3}.cell.tutorial-target-cell.tutorial-target-red .num-red{background:var(--red);color:#fff;border-radius:.5cqw;padding:.15cqw .65cqw;transform:scale(1.08)}.cell.tutorial-target-cell.tutorial-target-red .num-black{opacity:.4}.cell.tutorial-target-cell:after{content:"↓";color:#b45309;pointer-events:none;font-size:2.8cqw;font-weight:900;animation:.9s ease-in-out infinite tutorial-arrow-bounce;position:absolute;top:50%;right:.3cqw;translate:0 -50%}.cell.tutorial-target-cell.tutorial-target-zero:after{content:"●";font-size:2.2cqw}.sub-mark.tutorial-target-mark{color:var(--focus);filter:drop-shadow(0 0 .8cqw #f6c344f2);transform:scale(1.22)}.lever.tutorial-target-lever{background:#fde68a;box-shadow:0 0 0 .7cqw #d97706,0 0 2.4cqw #f6c344e6}.lever.tutorial-target-lever:after{content:"↓";color:var(--focus);text-shadow:0 .2cqw .6cqw #000000b3;pointer-events:none;font-size:3.4cqw;font-weight:900;animation:.9s ease-in-out infinite tutorial-arrow-bounce;position:absolute;top:-4.2cqw;left:50%;translate:-50%}@keyframes tutorial-arrow-bounce{0%,to{transform:translateY(-12%)}50%{transform:translateY(18%)}}@media (prefers-reduced-motion:reduce){.tutorial-feedback,.cell.tutorial-target-cell:after,.lever.tutorial-target-lever:after{animation:none}}