.learning-note,.learning-diagram,.learning-exercise{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.learning-note{background:var(--soft);font-size:16px}.learning-diagram{margin-inline:0}.learning-diagram p{font-size:16px;margin-bottom:0}.pass-flow,.example-tiles,.card-checks,.call-checks{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.pass-flow span,.card-checks span,.call-checks span{padding:12px 16px;border-radius:12px;background:var(--soft);font-weight:650}.example-tiles span{display:grid;place-items:center;min-width:86px;min-height:112px;padding:12px;background:#fffdf5;border:1px solid #bbc7bc;border-bottom:6px solid #709a89;border-radius:10px;font-weight:700;color:#1f4f44}.example-tiles .joker{color:#925129}.quiz-choices{display:grid;gap:10px}.quiz-choices button{display:flex;align-items:center;gap:12px;text-align:left;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;cursor:pointer}.quiz-choices button span{font-weight:700;color:var(--accent)}.quiz-choices button:hover,.quiz-choices button[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}.feedback{min-height:3em;margin-bottom:0;font-size:16px}.feedback[data-correct=true]{color:var(--accent);font-weight:650}.learning-fine,.guide-date{font-size:14px}.learning-privacy{font-size:14px;margin:32px 0}.learning-privacy summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.learning-privacy p{max-width:70ch}.learning-exercise h2{margin-top:0}@media(max-width:480px){.learning-note,.learning-diagram,.learning-exercise{padding:18px}.example-tiles span{min-width:70px;min-height:96px}.quiz-choices button{font-size:16px}.pass-flow{gap:8px}.pass-flow span{padding:10px}}
.wrap table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:16px}.wrap th,.wrap td{padding:10px;border:1px solid var(--line);text-align:left;vertical-align:top}.wrap caption{text-align:left;font-weight:650;margin-bottom:12px}
/* Practical lesson tools. Real tile identities remain readable without scripts. */
.worked-example{margin:30px 0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:20px;scroll-margin-top:20px}.worked-example h2{margin-top:0}.worked-example .kicker{margin-top:0}.study-rack{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-end;margin:12px 0}.study-tile{position:relative;display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;width:44px;height:66px;border:1px solid #b7c4b8;border-bottom:5px solid #719685;border-radius:6px;background:#fffef8;box-shadow:0 2px 3px #263b360c;color:#175748;vertical-align:middle;overflow:hidden}.study-tile svg{display:block;width:33px;height:36px;margin-top:6px}.study-rank{position:absolute;top:2px;left:3px;font-size:9px;font-weight:700;line-height:1}.study-label{display:block;max-width:100%;font-size:9px;line-height:1.1;font-weight:650;text-align:center;white-space:normal;padding:0 2px}.study-glyph{display:flex;flex-direction:column;align-items:center;justify-content:center;font:24px/1 Georgia,serif;min-height:43px}.study-glyph small{font-size:18px}.study-tile.characters,.study-tile.dragon{color:#9a3e37}.study-tile.dots{color:#305683}.study-tile.joker{color:#874b86;background:#f9f0f7}.study-tile.flower{color:#9b612f}.study-tile.flower .study-glyph{font-size:32px}.card-groups{display:flex;flex-wrap:wrap;gap:12px}.card-group{padding:7px;background:#f2f4ee;border-radius:12px;max-width:100%}.card-group .study-rack{margin:2px 0 9px}.card-group p{font-size:13px;line-height:1.3}.explain-group{display:block;width:100%;font:650 13px/1.4 var(--sans);color:var(--accent);background:transparent;border:1px solid var(--line);padding:8px 4px;border-radius:7px;cursor:pointer}.explain-group span{display:block;font-size:11px;font-weight:400}.explain-group[aria-pressed=true]{background:var(--accent);color:white}.worked-answer{margin-top:20px;padding:15px 18px;border-left:3px solid #739d88;background:#f0f4ed;font-size:16px}.worked-answer summary{cursor:pointer;font-weight:700;color:var(--accent);line-height:1.4}.worked-answer li+li{margin-top:10px}.tool-feedback{min-height:3em;padding-top:8px;font-size:16px;line-height:1.6}.selectable-rack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:18px 0}.tile-pick{display:grid;place-items:center;padding:6px 2px;background:transparent;border:2px solid transparent;border-radius:9px;cursor:pointer;min-height:80px}.tile-pick[aria-pressed=true]{background:#d9eadb;border-color:#1f4f44;transform:translateY(-3px)}.tile-pick:hover{background:#edf2e9}.tool-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}.tool-actions button,.next-situation,.stage-buttons button{font:650 15px/1.35 var(--sans);padding:12px 16px;border:1px solid var(--accent);border-radius:9px;color:#fff;background:var(--accent);cursor:pointer;min-height:44px}.tool-actions .secondary,.next-situation.secondary,.stage-buttons button{background:transparent;color:var(--accent)}.tool-actions span[data-pass-count]{font-size:14px}.stage-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.stage-buttons button{flex:1 1 auto;padding:10px;font-size:13px}.stage-buttons button[aria-pressed=true]{background:var(--accent);color:white}.tile-options button{display:flex;flex-direction:column;gap:8px;align-items:center;color:var(--accent);background:var(--bg)}.tile-options button[aria-pressed=true]{border:2px solid var(--accent);background:var(--soft)}.rack-count{font-size:16px;font-weight:700;padding:12px;border-radius:8px;background:#e3eddf}.rack-caption{font-weight:650;font-size:13px;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.05em}.exposed{padding:10px;background:#eef0ea;border:1px dashed #9eb09e;border-radius:10px;width:fit-content}.discard-note{display:flex;align-items:center;gap:14px;font-size:14px;margin:16px 0}.score-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.score-controls label{display:grid;gap:5px;font-size:14px;font-weight:650}.score-controls select{width:100%;min-width:0;font:16px/1.3 var(--sans);padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}.score-controls .check-label{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer}.score-controls input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.score-total{display:flex;align-items:baseline;gap:10px;margin:14px 0;font-size:16px}.score-total strong{font:48px/1.1 var(--serif);color:var(--accent)}.score-breakdown{margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.score-breakdown div{padding:12px;background:var(--soft);border-radius:10px}.score-breakdown dt{font-size:13px}.score-breakdown dd{font-size:24px;font-weight:650;margin:2px 0 0}.decision-count{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.04em}.supply-diagram{display:flex;flex-wrap:wrap;gap:24px}.supply-diagram p{font-size:14px;font-weight:650}.route-steps{padding-left:22px;font-size:16px}.route-steps li{padding:6px 0}.practice-route{padding-left:24px}.practice-route li{padding:14px 0 20px;border-bottom:1px solid var(--line)}.practice-route p{font-size:16px}.practice-route .button{font-size:15px}.practice-mission{margin-top:24px;padding:18px;border-radius:12px;background:var(--soft)}.practice-mission h3{margin-top:0}.practice-mission p{font-size:16px}.worked-example button:focus-visible,.worked-example select:focus-visible,.worked-example input:focus-visible{outline:3px solid #926320;outline-offset:3px}#try-here{scroll-margin-top:20px}
@media(max-width:480px){.worked-example{padding:18px 14px;border-radius:16px}.card-groups{gap:9px}.card-group{padding:6px}.card-group .study-rack{gap:3px}.selectable-rack{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:3px}.tile-pick{padding:5px 0}.study-tile{width:42px;height:64px}.score-controls{grid-template-columns:1fr}.tool-actions button{font-size:14px;padding:11px 12px}.stage-buttons button{flex-basis:42%;font-size:13px}.score-breakdown{gap:8px}.worked-answer{padding:12px}.worked-example h2{font-size:27px}.practice-route{padding-left:20px}.supply-diagram{gap:12px}.card-groups .study-tile{width:40px;height:63px}}
@media(prefers-reduced-motion:reduce){.tile-pick[aria-pressed=true]{transform:none}}
@media print{body{background:white!important;color:#111!important;font-size:11pt}.site-header,.site-footer,.contents,.skip,.tool-actions,.stage-buttons,.explain-group,.quiz-choices,.next-situation,.score-controls,.learning-privacy,.button{display:none!important}.wrap{width:auto;max-width:none}.worked-example,.learning-exercise,.learning-note{padding:12px;background:white;box-shadow:none;border:1px solid #aaa;break-inside:auto}.study-tile,.card-group,.study-rack,.score-breakdown div{break-inside:avoid}.worked-answer{background:white;color:#111;break-inside:avoid}.worked-answer>summary{font-weight:700}.worked-answer::details-content{content-visibility:visible;height:auto}.worked-answer>*{display:block!important}.worked-answer:not([open])>*:not(summary){display:block!important}.tile-pick{border:none;transform:none!important}.feedback,.tool-feedback{min-height:0}.selectable-rack{display:flex;flex-wrap:wrap}.study-tile{box-shadow:none}.play-band{background:white!important;color:#111!important}.score-total strong{color:#111}a{color:#111!important}.card-groups{gap:8px}h2,h3{break-after:avoid}p{orphans:3;widows:3}}