/* Field guide panels: paper-book progress is deliberately separate from official clears. */
.q-home-title{text-align:center;color:#ffe6a7;margin:0 0 2px}
.q-home-title>span{font-size:11px;color:#c7d5d2}
.q-home-title h1{font:400 23px/1.5 var(--pixel);margin:0;letter-spacing:.03em}
.q-home-menu{display:grid;gap:12px}
.q-home-menu .big{grid-template-columns:43px minmax(0,1fr) 15px;gap:10px;padding:12px}
.q-home-menu .big .ic{width:43px;height:43px}.q-home-menu .big .ic svg{width:29px;height:29px}
.q-home-menu .big .t{font-size:17px;line-height:1.5}.q-home-menu .big .s{font-size:11.5px;line-height:1.55}
.q-home-note{margin-top:3px}.chips>a{text-decoration:none}
.q-progress{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:9px 10px;border:1px solid #7f9b91;background:#183546;font-size:12px}
.q-progress>b{font-family:var(--pixel);font-size:22px;color:#ffe099;line-height:1}.q-progress>b small{font-size:12px;color:#c8d5d2}
.q-progress-dots{display:flex;gap:4px;margin-left:auto}.q-progress-dots i{font:normal 13px/21px var(--pixel);width:21px;text-align:center;border:1px solid #78998f;background:#102a3d;color:#adbfbf}.q-progress-dots i.done{background:#2b6858;border-color:#e4cf96;color:#fff2c6}
.q-note-help{margin:0;color:#c2cfcc;font-size:11.5px;line-height:1.85}
.q-order{margin:0;font-size:14px;line-height:1.8}.q-order>b{color:#ffdf91;font-weight:800}
.q-choice{width:100%;display:flex;align-items:center;gap:10px;padding:11px 9px;text-align:left;background:#173649;color:#fff0d2;border:2px solid #c2d0b4;box-shadow:0 3px 0 #081623;cursor:pointer}
.q-choice:hover{background:#224d5c}.q-choice:focus-visible{outline:3px solid #ffe5a1;outline-offset:3px}
.q-number{width:35px;height:39px;display:grid;place-items:center;font:22px var(--pixel);background:var(--q-accent,#7d5054);border:2px solid #e4cc90;flex-shrink:0;color:#fff5d7}
.q-color-1{--q-accent:#914852}.q-color-2{--q-accent:#2d6488}.q-color-3{--q-accent:#276c54}.q-color-4{--q-accent:#8b5b2a}.q-color-5{--q-accent:#69538a}
.q-choice-text{min-width:0;flex:1}.q-choice-text b{font:400 17px/1.5 var(--pixel);display:block;overflow-wrap:anywhere}.q-choice-text small{font:11px/1.6 var(--body);display:block;color:#c8d7cf;margin-top:3px}
.q-status{font:13px/1.3 var(--pixel);padding:3px;flex-shrink:0}.q-status.is-done{font-size:11px;color:#ffe5a2;background:#235a4d;border:1px solid #b8c894;padding:3px 5px}
.q-place{border-left:5px solid var(--q-accent,#8b5b2a);padding:10px 12px;background:#1c3b4e}.q-place>span{font:13px var(--pixel);color:#cfddb9;display:block;margin-bottom:4px}.q-place>b{font:400 20px/1.6 var(--pixel);display:block;color:#ffe0a2}.q-place>p{margin:5px 0 0;font-size:12px;color:#ccd6d0;line-height:1.8}
.q-intro{margin:0;font-size:14px;line-height:1.85}.q-detail .steps b{font-size:14px;font-weight:700;line-height:1.9}.q-detail .steps li{padding:9px 0}.q-detail .steps .num{width:35px;height:35px;font-size:18px}.q-detail .steps li{grid-template-columns:35px 1fr;gap:11px}.q-detail .steps li:not(:last-child)::before{left:16px;top:42px}
.q-write{padding:12px;background:#3d4333;border:2px solid #ccb57f}.q-write>b{font:17px/1.5 var(--pixel);color:#ffe7ac}.q-write p{font-size:14px;margin:5px 0 0;line-height:1.9}
.q-callout{padding:12px;background:#384237;border:2px solid #c9b981}.q-callout>b{font:17px/1.6 var(--pixel);color:#ffe3a0}.q-callout>p{font-size:13px;line-height:1.9;margin:5px 0 0}.q-callout .chip{margin-top:9px}.q-reminder{background:#3d3650;border-color:#b5a3cb}
.q-check{display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border:2px solid #9cb8a8;background:#193d4d;cursor:pointer}.q-check.is-done{background:#285747;border-color:#e5d59b}.q-check input{width:25px;height:25px;flex:none;margin:1px 0 0;accent-color:#d1e1a3}.q-check>span{font:17px/1.55 var(--pixel);color:#fff0ce}.q-check small{display:block;font:11px/1.7 var(--body);color:#cbd8cd;margin-top:4px}
.q-hints{border-top:2px dashed #7a9890;padding-top:15px;margin-top:3px}.q-hints h3{margin-bottom:6px}.q-hint-list{padding:0;margin:12px 0;list-style:none;display:grid;gap:10px}.q-hint-list li{padding:11px 12px;border-left:4px solid #b4a471;background:#1c3b4e}.q-hint-list b{font:15px var(--pixel);color:#ffdc94}.q-hint-list p{font-size:14px;line-height:1.95;margin:6px 0 0}.q-hints .b{width:100%}.q-hints .b>span{font-size:12px;margin-left:8px}.q-next{display:grid;gap:11px;margin-top:7px}
.q-reward{background:#1b394c;border:1px solid #92aa98;padding:13px}.q-reward>span{display:block;font:15px/1.7 var(--pixel);color:#ffe09a}.q-reward h4{font:400 18px/2 var(--pixel);margin:8px 0;color:#fff3d1}.q-reward p{font-size:13px;line-height:1.9;margin:5px 0 12px}.q-reward .b{width:100%}
.card ruby{ruby-position:over}.card rt{font:9px/1.2 var(--body);color:#d8dfd5}.card .steps b{line-height:1.9}.card .steps ruby{white-space:normal}.card>p{margin:0;line-height:1.95}
.q-detail .q-hints h3{font-size:18px}.q-menu-card{gap:13px}
@media(max-width:350px){.q-home-title h1{font-size:21px}.q-home-menu .big{grid-template-columns:35px minmax(0,1fr) 12px;padding:10px;gap:8px}.q-home-menu .big .ic{width:35px;height:35px}.q-home-menu .big .t{font-size:15px}.q-home-menu .big .s{font-size:10.5px}.q-choice{gap:7px;padding:10px 7px}.q-choice-text b{font-size:15px}.q-place>b{font-size:18px}.q-status{padding:2px}.q-detail .steps b{font-size:13px}.q-progress{gap:6px}.q-progress-dots i{width:19px}.q-check>span{font-size:15px}}

/* An explicit reading action keeps full instructions and gradual hints separate. */
.q-listen{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;gap:6px;min-height:44px;padding:8px 14px;border:2px solid #a2c5ae;border-radius:0;background:#23483d;color:#fff3ce;font:15px/1.5 var(--body);font-weight:800;cursor:pointer;touch-action:manipulation}
.q-listen:focus-visible{outline:3px solid #f3ce76;outline-offset:3px}
.q-listen:active{transform:translateY(1px)}
.q-hint-list .q-listen{margin-top:10px}
.guide-nav{display:none}
.guide-nav button[aria-current="page"]{border-color:#f3ce76;background:#2e514a;color:#fff3ce}
