.stage-note{--note-ink:#34495d;--note-edge:#c6cdd3;--note-paper:#fff9ec}
.stage-note button{min-height:48px;touch-action:manipulation}
.stage-note header{flex-wrap:wrap;gap:10px}
.stage-note header .tools{min-width:0;flex-wrap:wrap;max-width:100%}
.stage-note [data-do=hint]{display:none}
.stage-note.study-focus .progress-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0;color:var(--note-ink)}
.stage-note .note-reference,.stage-note .note-answer{min-width:0;line-height:1.65;font-size:18px}
.stage-note .note-reference{background:var(--note-paper)}
.stage-note .note-reference ol{padding-left:25px}
.stage-note .note-reference li{margin:12px 0}
.stage-note .note-story img{max-width:100%;height:auto;border-radius:12px}
.stage-note .note-story summary{min-height:48px;cursor:pointer}
.stage-note .note-goal{margin:0 0 12px;font-size:18px}
.stage-note .note-rule-short{font-size:17px;line-height:1.65;margin:10px 0;color:#45596b}
.stage-note .completed-stage{width:min(100%,320px);margin:8px auto}
.stage-note .completed-stage svg{display:block;width:100%;height:auto}
.stage-note .note-claim{margin:0 0 18px;padding:12px 16px;border-left:5px solid #bc7e44;border-radius:0 12px 12px 0;background:#fff5e5}
.stage-note .note-claim span{display:block;font-size:14px;color:#695741}
.stage-note .note-claim strong{font-size:18px}
.stage-note #question-title{font-size:23px;line-height:1.5;margin:16px 0}
.stage-note .note-intent,.stage-note .note-freedom,.stage-note .scope-note{font-size:16px;line-height:1.7}
.stage-note .saved-failure{background:#edf3f8;border:2px solid #b2c5d6;border-radius:14px;padding:12px 15px;margin:16px 0;color:#344b63}
.stage-note .saved-failure strong{font-size:15px}
.stage-note .saved-failure p{font-size:18px;margin:4px 0}
.stage-note .saved-failure small{font-size:14px;line-height:1.6;display:block}
.stage-note .note-machine{margin:14px 0;border:1px solid #d3c5af;border-radius:20px;overflow:hidden;background:#fffcf6}
.stage-note .note-machine-canvas{position:relative;width:100%;max-width:460px;margin:auto;line-height:0;isolation:isolate}
.stage-note .note-machine-canvas>svg{display:block;width:100%;height:auto}
.stage-note .machine-board{fill:#f5ecd9;stroke:#e3d6be;stroke-width:2}
.stage-note .track{fill:none;stroke:#b58f67;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.stage-note .note-machine svg text{font:700 24px system-ui,sans-serif;text-anchor:middle;fill:#394b5c}
.stage-note .note-slot,.stage-note .note-box path{fill:#d4b088;stroke:#75563d;stroke-width:4}
.stage-note .note-gate{fill:none;stroke:#6c7f91;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.stage-note .note-stage rect{fill:#ead3a7;stroke:#71564a;stroke-width:3}
.stage-note .note-stage path{fill:#b35c55;stroke:#874039;stroke-width:3}
.stage-note .note-room rect{fill:#e6ddc8;stroke:#756953;stroke-width:3}
.stage-note .note-room path{fill:#a9bac1;stroke:#756953;stroke-width:3}
.stage-note .switch-pivot circle{fill:#eaf1f3;stroke:#657e90;stroke-width:3}
.stage-note .switch-pivot path{fill:none;stroke:#365773;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.stage-note .flag path{fill:#f4d79a;stroke:#86704c;stroke-width:3}
.stage-note .flag text{font-size:34px;fill:#8b7044}
.stage-note .travelling-note{position:absolute;transform:translate(-50%,-50%) rotate(-5deg);width:7.5%;min-width:25px;filter:drop-shadow(0 2px 2px #49311f33);pointer-events:none}
.stage-note .travelling-note svg{width:100%;height:auto;fill:#fffdf5;stroke:#674f3b;stroke-width:2}
.stage-note .travelling-note path{fill:none}
.stage-note .note-machine figcaption{padding:12px 15px;font-size:17px;line-height:1.65;background:#fffdf8;border-top:1px solid #dfd3c1}
.stage-note .note-machine figcaption span{display:block;font-size:15px;color:#596575}
.stage-note .note-input{min-width:0;margin:18px 0;padding:12px;border:1px solid var(--note-edge);border-radius:14px}
.stage-note .note-input legend{font-size:17px;font-weight:700;padding:0 6px}
.stage-note .note-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stage-note .note-choice{font-size:18px;line-height:1.5;padding:12px 14px;border:2px solid var(--note-edge);background:#fffefa;border-radius:12px;color:var(--note-ink);width:100%;min-width:0}
.stage-note .note-choice[aria-pressed=true]{background:#e6eff6;border-color:#426984;box-shadow:inset 0 0 0 1px #426984}
.stage-note .note-choice:disabled{opacity:.8}
.stage-note .note-preparations .note-choice{display:block;text-align:left;margin:8px 0}
.stage-note .note-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.stage-note .note-actions button{flex:1 1 160px;font-size:18px}
.stage-note .note-actions .continue-button{flex:2 1 260px}
.stage-note .rep-action-help:empty{display:none}
.stage-note .note-actions [aria-disabled=true]{background:#e3e8ec;color:#4c5f6f;border-color:#b9c6d0;box-shadow:none}
.stage-note .feedback{font-size:18px;line-height:1.7}
.stage-note .feedback.neutral{background:#f0f4f6;border-color:#bdcdd7}
.stage-note .note-hints[hidden]{display:none}
.stage-note :focus-visible{outline:3px solid #a75c09;outline-offset:4px}
.stage-note .show-begins{position:relative;overflow:hidden}
.stage-note .show-opening:before,.stage-note .show-opening:after{content:'';position:absolute;top:0;bottom:0;width:50%;z-index:2;background:repeating-linear-gradient(90deg,#8a4344,#b76964 13%,#994e4b 24%);animation:curtain-open .7s ease-out forwards;pointer-events:none}
.stage-note .show-opening:before{left:0;--curtain-shift:-105%}.stage-note .show-opening:after{right:0;--curtain-shift:105%}
@keyframes curtain-open{to{transform:translateX(var(--curtain-shift))}}
@media(min-width:900px){.stage-note .study-board{grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr)}.stage-note .study-reference{position:sticky;top:90px;max-height:calc(100dvh - 112px);overflow:auto}}
@media(max-width:899px){.stage-note .note-answer{padding:16px}.stage-note .note-reference{padding:16px}}
@media(max-width:400px){.stage-note .note-answer{padding:10px}.stage-note .note-input{padding:10px}.stage-note .note-choice{padding:10px 8px}.stage-note .note-options{gap:8px}.stage-note #question-title{font-size:21px}.stage-note .progress-row{font-size:14px}.stage-note .note-claim{padding:10px}.stage-note .saved-failure{padding:10px}.stage-note .saved-failure p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.stage-note .show-opening:before,.stage-note .show-opening:after{display:none}.stage-note *{scroll-behavior:auto}}