.qt-task { margin: 0 0 16px; padding: 12px 16px; background: #fff8df; border: 2px solid #e9c976; border-radius: 16px; color: var(--ink,#2b1d14); overflow-wrap: anywhere; }
.qt-task p { margin: 0; }
.qt-task .qt-given { font-size: clamp(20px,2.1vw,26px); font-weight: 700; line-height: 1.55; white-space: pre-line; }
.qt-task .qt-action { font-size: 16px; line-height: 1.6; color: #61503c; }
.qt-task .qt-given + .qt-action { margin-top: 8px; }
.qt-bank { margin-top: 10px; font-size: 17px; }
.qt-bank>div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qt-bank span { background: white; border: 2px solid #c3d4d3; border-radius: 10px; padding: 6px 10px; }
.qt-given mark,.bk-node mark { background: #ffe27c; color: #2b1d14; text-decoration: underline; text-underline-offset: 5px; border-radius: 4px; }
.qt-choice-bank { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
.qt-choice-bank button { min-height:52px; }
.qt-choice-bank [aria-pressed=true] { background:#ffe27c; outline:3px solid #2b1d14; }
.qt-tally { text-align:center; margin:16px 0; }
.qt-tally>div:last-child { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.qt-tally-marks { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; min-height:76px; align-items:center; background:#fff9e8; border:3px solid #d7bd85; border-radius:16px; margin:12px 0; padding:12px; }
.qt-tally-group { display:inline-flex; gap:8px; position:relative; width:70px; height:48px; padding:5px; }
.qt-tally-group i { width:4px; height:38px; background:#2b1d14; border-radius:3px; animation:qt-pencil .15s ease-out; transform-origin:top; }
.qt-tally-group i.fifth { position:absolute; width:64px; height:4px; transform:rotate(-30deg); top:24px; left:0; }
.qt-target { outline:3px solid #d06a15; background:#ffef9c!important; }
.qt-task+details.mz-reading { margin-top:8px; }
#qarea [hidden] { display:none!important; }
@keyframes qt-pencil { from { opacity:.3; scale:1 .2; } to { opacity:1; scale:1; } }
@media(max-width:600px) { .qt-task { padding:10px 12px; } .qt-task .qt-given { font-size:20px; } .qt-task .qt-action { font-size:15px; } .qt-bank { font-size:16px; } .qt-choice-bank button { flex:1 1 130px; font-size:18px; } }
@media(prefers-reduced-motion:reduce){ .qt-tally-group i { animation:none; } }
#qarea .qt-task, #qarea .qt-bank, #qarea .qt-bank>div { min-width:0; max-width:100%; box-sizing:border-box; }
#qarea .qt-bank span { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
#qarea .inmeter { flex-wrap:wrap; max-width:100%; }
#qarea .inrow { min-width:0; max-width:100%; }
#qarea .inbox { min-width:0; max-width:100%; box-sizing:border-box; }
.qt-route { margin:16px auto; max-width:580px; text-align:center; }
.qt-route-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.qt-route-grid button { min-height:44px; min-width:0; border:3px solid var(--ink); border-radius:10px; background:#fff4c7; font:800 24px var(--f-num); color:var(--ink); }
.qt-route-grid [aria-pressed=true] { background:#b7e7c7; }
.qt-route-grid .qt-route-current { background:#ffdf67; outline:3px solid #ca782c; outline-offset:-5px; }
.qt-route-status { overflow-wrap:anywhere; min-height:2em; font-weight:700; }
svg text.qt-target { fill:#a94815; stroke:#fff08b; outline:none; filter:drop-shadow(0 0 4px #ffc740); }
#qarea .mz-reading p { max-height:none; overflow:visible; }
#qarea .mz-reading summary small { font-size:12px; font-weight:500; white-space:nowrap; }