/* Interactive exercise styles (used with style.css) */
#exercise{max-width:820px}
.ex-panel{background:var(--card);border:var(--b);box-shadow:10px 10px 0 var(--ink)}
.ex-bar{display:flex;align-items:center;gap:7px;background:var(--pink);color:var(--on);border-bottom:var(--b);padding:9px 12px;font:700 12px "Space Mono",monospace;text-transform:uppercase}
.ex-bar i{width:13px;height:13px;border:2px solid #111;background:var(--yellow);display:inline-block}
.ex-bar span{margin-left:auto}
.ex-body{padding:clamp(18px,4vw,34px)}
.ex-body h2{font-size:clamp(26px,4.5vw,42px);margin:0 0 14px;outline:none}
.ex-body p{margin:0 0 20px;font-size:16px}
.ex-letter{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:10px;background:var(--yellow);color:var(--on);border:var(--b);font:700 16px "Space Mono",monospace;text-transform:uppercase}
.ex-instr{font:700 14px "Space Mono",monospace;text-transform:uppercase}
.ex-head{display:flex;align-items:center;margin-bottom:18px}
.segs{display:flex;gap:4px;margin-bottom:8px}
.seg{flex:1;height:10px;border:2px solid var(--ink);background:var(--bg)}
.seg.done{background:var(--mint)}
.seg.now{background:var(--pink)}
.segs-label{font:400 12px "Space Mono",monospace;margin:0 0 26px!important}
.ex-q{font-size:clamp(20px,3.4vw,28px);font-weight:700;line-height:1.35;margin-bottom:24px}
.blank{display:inline-block;min-width:120px;padding:0 10px;text-align:center;border-bottom:4px solid var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.blank.ok{background:var(--mint);color:var(--on)}
.blank.bad{background:#ffb3ae;color:var(--on)}
.ex-answer-line{margin-top:14px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.tile,.chip{font:700 18px "Space Grotesk",sans-serif;text-transform:lowercase;background:var(--card);color:var(--ink);border:var(--b);padding:14px 12px;min-height:54px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.tile:hover:not(:disabled),.chip:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.tile.sel,.chip.sel{background:var(--yellow);color:var(--on)}
.tile.ok,.chip.ok{background:var(--mint);color:var(--on)}
.tile.bad,.chip.bad{background:#ffb3ae;color:var(--on)}
.tile:disabled,.chip:disabled{cursor:default}
.tile:focus-visible,.chip:focus-visible,.ex-input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.chip{font-size:16px;padding:10px 14px;min-height:46px}
.chip.used{opacity:.4;text-decoration:line-through;box-shadow:none}
.ex-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:700 18px "Space Grotesk",sans-serif;margin-bottom:22px}
.ex-input{font:700 18px "Space Mono",monospace;background:var(--bg);color:var(--ink);border:var(--b);padding:10px 12px;min-height:50px;min-width:0;width:min(260px,100%)}
.ex-input:disabled{opacity:.85}
.pic{display:grid;place-items:center;width:min(240px,100%);aspect-ratio:1;border:var(--b);box-shadow:5px 5px 0 var(--ink);background:var(--mint);color:var(--on);font-size:96px;line-height:1;margin-bottom:22px;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
.fb{padding:14px 16px;border:var(--b);font:700 14px "Space Mono",monospace;margin-bottom:22px;color:var(--on)}
.fb.ok{background:var(--mint)}
.fb.bad{background:#ffb3ae}
.ex-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh)}
.example{border:2px dashed var(--ink);padding:18px;margin:0 0 24px}
.example .tag{margin-bottom:14px}
.score{font:700 clamp(54px,12vw,96px)/1 "Space Mono",monospace;margin:6px 0 4px}
.score small{font-size:.4em}
.breakdown{display:grid;gap:10px;margin:20px 0 26px;font:700 14px "Space Mono",monospace}
.breakdown div{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dashed var(--ink);padding-bottom:8px}
.mistakes{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:12px}
.mistakes li{border:2px solid var(--ink);padding:12px 14px;font-size:15px}
.mistakes b{background:var(--mint);color:var(--on);padding:0 6px}
@media (max-width:520px){.ex-panel{box-shadow:7px 7px 0 var(--ink)}.tile{font-size:16px}.pic{font-size:80px}.ex-actions .btn{width:100%}}

[hidden]{display:none!important}

.pic.wide{width:min(420px,100%);aspect-ratio:4/3}
.pic.wide img{object-fit:contain}
.chip.opt{text-transform:none}
.ex-part{display:inline-block;font:700 12px "Space Mono",monospace;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:4px 8px;margin:0 0 10px}
.ex-hint{font:700 14px "Space Mono",monospace;text-transform:uppercase;margin:-8px 0 14px;opacity:.8}
.ex-short{width:min(150px,38vw);padding:8px 10px;min-height:44px}
.ex-wide{width:100%}
.ex-sentence{font-size:clamp(18px,3vw,24px);line-height:2}
.ex-audio-wrap{margin:0 0 20px}.ex-audio{width:100%;max-width:520px}
.ex-passage{border:2px dashed var(--ink);padding:14px;margin:0 0 20px;font-weight:600;line-height:1.5}