.guide-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:32px}
.guide-intro h1{margin-bottom:12px}
.guide-status{font-size:12px;color:#586271;margin:0;line-height:1.7}
.guide-overview{width:296px;flex-shrink:0}
.guide-overview>div{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;font-size:12px;color:#586271}
.guide-overview strong{font-size:29px;line-height:1;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.guide-overview strong small{font-size:14px;color:var(--muted);font-weight:400}
.region-steps{display:flex;list-style:none;gap:6px;padding:0;margin:0}
.region-steps li{flex:1;background:#eff1f5;border:1px solid #e6e9f0;border-radius:6px;height:32px;display:flex;align-items:center;justify-content:center;gap:6px;color:#727b8b;font-size:12px;font-weight:500}
.region-steps small{font-size:9px;color:#777f8d;font-weight:400}
.region-steps .is-current{border:1px solid #99b3f9;background:var(--blue-soft);color:var(--action)}
.region-steps .is-done{background:var(--action);color:white;border-color:var(--action)}
.region-steps .is-done small{color:#dce5ff}
.guide-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
.guide-map-panel{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:20px;position:sticky;top:24px;min-width:0}
.guide-map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.guide-map-toolbar h2{font-size:15px;font-weight:500}
.guide-zoom{border-color:transparent;background:transparent;font-size:12px;font-weight:400;color:#586271;padding-inline:8px}
.guide-map-viewport{width:100%;aspect-ratio:1.69;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;align-items:flex-start}
.guide-map-viewport svg{width:100%;height:auto;flex-shrink:0}
.guide-map-viewport.is-zoomed svg{width:200%}
.guide-shape{fill:#e4e8ef;stroke:#f7f8fa;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 150ms,stroke 150ms}
.guide-geo.is-active .guide-shape{fill:#adc2fb}
.guide-geo.is-masked .guide-shape{fill:url(#guide-mask);stroke:#b8c6e3;stroke-width:1}
.guide-geo.is-colony .guide-shape{fill:#ecd39c}
.guide-geo.is-colony.is-active .guide-shape{fill:#dfb866;stroke:#fbf8f0}
.guide-geo.is-colony.is-masked .guide-shape{fill:url(#colony-mask);stroke:#cba858}
.guide-geo.is-selected .guide-shape{stroke:var(--action);stroke-width:2.5}
.guide-map-number{font:500 21px var(--font-text);fill:#274a9b;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.guide-geo.is-colony .guide-map-number{fill:#654609}
.guide-geo .callout-line{fill:none;stroke:#9aa8c3;stroke-width:1.5}
.guide-map-legend{display:flex;gap:24px;font-size:11px;color:#586271;margin:16px 0 0;flex-wrap:wrap}
.guide-map-legend>span{display:flex;align-items:center;gap:6px}
.guide-map-legend i{display:block;width:10px;height:10px;border-radius:3px}
.guide-map-legend .legend-active{background:#adc2fb}
.guide-map-legend .legend-colony,.map-legend .legend-colony{background:#dfb866}
.guide-map-note{margin-top:24px;border-top:1px solid #e0e5ed;padding-top:20px}
.guide-stage{font-size:12px;color:var(--muted);margin:0 0 8px;line-height:1.5}
.guide-map-note p{font-size:14px;line-height:1.7;margin:8px 0 0;color:#515c70}
.guide-lesson{min-width:0;padding-top:4px}
.guide-lesson>h2{font-size:27px;line-height:1.25;font-weight:500;letter-spacing:-.03em;max-width:520px}
.guide-lesson-lead{font-size:14px;color:#586271;line-height:1.7;margin:12px 0 20px;max-width:480px}
.guide-region-group{margin-bottom:24px}
.guide-region-group>h3{font-size:13px;font-weight:500;margin:24px 0 10px;color:#586271;display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-region-group>h3>span{font-size:11px;color:var(--muted)}
.guide-slots{padding:0;margin:0;list-style:none}
.guide-slot{position:relative;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 0}
.guide-slot-number{font-size:12px;color:#7c8594;font-variant-numeric:tabular-nums;min-width:22px}
.guide-slot-words{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.guide-state-name{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.guide-state-ipa{color:#586271;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.guide-sound{background:transparent;border-color:transparent;margin-left:auto;color:#66728a}
.colony-marker{width:6px;height:28px;border-radius:3px;background:#d2a341;flex-shrink:0;margin-left:0}
.guide-slot.is-colony .guide-slot-number{color:#8d651d}
.masked-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.guide-slot.is-closed{min-height:44px;background:#f7f9fe;border:1px dashed #c0cbea;padding:10px 12px;border-radius:7px;gap:8px}
.guide-slot.is-closed .guide-slot-number{font-size:11px;min-width:18px;color:#62769f}
.guide-mask{font-family:ui-monospace,'SFMono-Regular',monospace;font-size:14px;letter-spacing:0;color:#b9c8eb;user-select:none;white-space:nowrap}
.guide-slot.is-colony.is-closed{background:#fff9ed;border-color:#dbc495}
.guide-slot.is-colony.is-closed .guide-mask{color:#d7bd86}
.guide-slot.is-closed .colony-marker{height:18px;width:4px}
.guide-answer-form{margin-top:24px}
.guide-answer-form label{font-size:14px;font-weight:500;display:block;margin-bottom:6px}
.guide-answer-form>p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 12px;max-width:470px}
.guide-answer-form textarea{width:100%;min-height:148px;resize:vertical;border:1px solid #bec9df;border-radius:10px;padding:14px 16px;background:#fff;color:var(--ink);font:400 16px/1.7 var(--font-text);display:block}
.guide-answer-form textarea:focus{border-color:var(--action)}
#guide-answer-count{font-size:11px;color:var(--muted);display:block;margin-top:6px}
.guide-feedback{background:#f3f6ff;border:1px solid #c9d6fa;border-radius:12px;padding:20px;margin-top:24px;scroll-margin-bottom:140px;scroll-margin-top:24px}
.guide-feedback.is-success{background:#eff7f1;border-color:#c2ddc8}
.guide-feedback h3{font-size:17px;font-weight:500;margin:0 0 8px;line-height:1.4}
.guide-feedback p{font-size:13px;line-height:1.7;color:#4b5d7e;margin:8px 0 0}
.guide-feedback.is-success p{color:#3d6248}
.guide-hints{padding:0 0 0 18px;margin:12px 0 0}
.guide-hints li{font-size:13px;line-height:1.8;color:#4b5d7e;margin-top:10px}
.guide-hints strong{font-weight:500;color:#283e6b}
.guide-hints small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.guide-hints .ipa{font-size:14px}
.more-hints{font-size:13px;margin-top:12px;color:#365695}
.more-hints summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.guide-corrections{padding-top:8px}
.session-complete{background:#edf2ff;border:1px solid #cbd9ff;border-radius:16px;padding:32px 24px;margin-top:24px;display:flex;flex-direction:column;align-items:flex-start}
.complete-number{font-size:86px;line-height:1.1;font-weight:500;letter-spacing:-.06em;color:var(--action)}
.session-complete>span:nth-child(2){font-size:20px;color:#354b7b}
.session-complete p{font-size:13px;color:var(--muted);margin:24px 0 0}
#guide-repeat{min-height:52px;font-size:13px;border-radius:10px}
#exam-goal{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:white;border-radius:8px;margin-top:12px}
#guide-goal-setting>label{font-size:14px}
.map-state.is-colony .state-shape{fill:#e3c385}
.map-state.is-colony.is-hidden .state-shape{fill:url(#classic-colony-mask);stroke:#c5a15a}
.map-state.is-colony.is-selected .state-shape{fill:#d4a342;stroke:var(--action);stroke-width:2}
.map-state.is-colony.is-selected text{fill:#543700}
.map-state.is-colony .callout-num{fill:#735018}
.map-state.is-colony.is-selected .callout-hit{fill:#d4a342}
.colony-chip{font-size:9px;padding-left:4px;color:#896117;white-space:nowrap}
.state-tile.is-colony .tile-main{border-left:3px solid #d4aa55;padding-left:8px}
.state-tile.is-colony.is-hidden .tile-main{border-left:3px solid #d4aa55}
.guide-map-jump{display:none}
@media(max-width:1199px){.guide-layout{gap:24px}.guide-map-panel{padding:16px}.guide-lesson>h2{font-size:25px}.guide-state-name{font-size:20px}.guide-overview{width:260px}.guide-mask{font-size:12px}.masked-slots{gap:8px}.guide-slot.is-closed{padding:10px 8px;gap:4px}}
@media(max-width:899px){.guide-intro{gap:24px}.guide-overview{width:224px}.guide-layout{display:flex;flex-direction:column;gap:32px}.guide-map-panel{order:2;position:static;width:100%;scroll-margin-top:24px}.guide-lesson{order:1;width:100%;max-width:none}.guide-lesson>h2{max-width:600px}.guide-lesson-lead{max-width:600px}.guide-map-jump{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:var(--action);text-decoration:none;float:right;margin-top:-12px}.guide-region-group{margin-bottom:16px}.guide-state-name{font-size:22px}.guide-state-ipa{font-size:16px}.guide-map-toolbar h2{font-size:16px}.guide-map-viewport{max-height:none}.guide-map-number{font-size:20px}}
@media(max-width:599px){.guide-intro{display:block;margin-bottom:24px}.guide-intro h1{font-size:32px;margin-bottom:10px}.guide-status{font-size:10px;letter-spacing:-.1px}.guide-overview{display:flex;align-items:center;gap:16px;width:100%;margin-top:20px}.guide-overview>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0;min-width:84px;font-size:10px}.guide-overview strong{font-size:22px}.guide-overview strong small{font-size:12px}.region-steps{flex:1;gap:5px}.region-steps li{height:34px;flex-direction:column;gap:0;line-height:1.3;font-size:12px}.region-steps small{font-size:8px}.guide-lesson{padding-top:0}.guide-stage{font-size:11px;margin-bottom:6px}.guide-lesson>h2{font-size:23px;line-height:1.3}.guide-lesson-lead{font-size:13px;line-height:1.65;margin:10px 0 12px}.guide-slot{min-height:72px;padding:10px 0;gap:10px}.guide-state-name{font-size:20px}.guide-state-ipa{font-size:15px}.guide-slot-number{font-size:11px;min-width:20px}.guide-sound{min-width:44px;width:44px}.guide-slot-words{gap:2px}.colony-marker{height:24px;width:5px}.guide-map-panel{padding:12px;border-radius:14px}.guide-map-toolbar{margin-bottom:8px}.guide-map-toolbar h2{font-size:14px}.guide-zoom{font-size:11px}.guide-map-legend{font-size:10px;gap:20px;margin-top:12px}.guide-map-note{margin-top:16px;padding-top:12px}.guide-map-note p{font-size:12px}.guide-map-jump{font-size:11px;margin-top:-14px}.guide-layout{gap:24px}.guide-mask{font-size:12px}.guide-slot.is-closed{min-height:44px;padding:8px 10px}.guide-slot.is-closed .guide-slot-number{font-size:10px}.masked-slots{gap:8px}.guide-answer-form{margin-top:20px}.guide-answer-form label{font-size:13px}.guide-answer-form>p{font-size:11px}.guide-answer-form textarea{min-height:150px;padding:12px;font-size:16px}.guide-feedback{padding:16px;margin-top:20px}.guide-feedback h3{font-size:16px}.guide-feedback p,.guide-hints li{font-size:12px}.guide-hints li{line-height:1.7}.guide-hints strong{font-weight:500}#guide-repeat{min-width:0;flex:1;font-size:11px;padding:10px 12px}#guide-repeat:not([hidden])+#guide-primary{font-size:12px;padding-inline:12px;line-height:1.5}.session-complete{padding:24px}.complete-number{font-size:72px}.session-complete>span:nth-child(2){font-size:18px}.state-tile.is-colony .tile-main{padding-left:6px}.colony-chip{font-size:8px}.map-legend{gap:12px;flex-wrap:wrap}}
@media(max-width:359px){.guide-status{font-size:9px}.guide-lesson>h2{font-size:21px}.guide-slot.is-closed{padding:8px 7px}.guide-mask{font-size:10px}.guide-overview{gap:10px}.guide-overview>div{min-width:80px}.region-steps{gap:4px}.guide-state-ipa{font-size:14px}#guide-repeat:not([hidden])+#guide-primary{font-size:11px}}
@media(prefers-reduced-motion:reduce){.guide-shape{transition:none}}
@media(max-width:599px){.app-header{height:68px}.app-main{padding-top:20px}.guide-intro{margin-bottom:16px}.guide-overview{margin-top:12px}.guide-lesson-lead{margin-top:8px;margin-bottom:8px;font-size:12px}.guide-slot{min-height:64px;padding-block:8px}.guide-lesson>h2{font-size:22px}}
.region-steps li{color:#546075}.region-steps small{color:#5a6578}.region-steps .is-current small{color:#415b98}.region-steps .is-done small{color:#fff}.guide-slot-number{color:#667082}.tile-meta{color:#626e82}