/* Free resources: interactive exercises (content/learn/site_assets/exercises.js). Same look as the rest of the site:
   Raleway text, blue #4467F5, light #EEF1FD, ink #1A1A2E, centred, big tap targets, no sideways scroll at 375px. */
.ex{max-width:640px;margin:0 auto;text-align:center}
.ex .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.article .ex-list{list-style:none;padding:0;margin:18px auto 0;max-width:640px;display:grid;gap:18px}
.article .ex-item{max-width:none;margin:0;padding:22px 16px 18px;background:var(--blue-tint);border:2px solid var(--blue-pale);border-radius:16px;list-style:none}
.article .ex-item.is-right{border-color:#1F8A4C}
.ex-progress{font:700 15px/1.4 var(--body);color:var(--grey);margin:0}
.ex-instr{font:800 13px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 8px}
.article .ex-q{font:600 19px/1.5 var(--body);margin:0 auto 14px;max-width:34em}
.ex-num{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font:800 15px/1 var(--body);margin-right:6px;vertical-align:1px}
.ex-gap{display:inline-block;min-width:4.5em;border-bottom:3px solid var(--blue);color:var(--blue);font-weight:800;line-height:1.2}
.ex-gap.filled{border-bottom-color:#1F8A4C;color:#17663C}
.ex-opts,.ex-chunks,.ex-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto}
.ex-opts{flex-direction:column;align-items:stretch;max-width:420px}
.ex-opt,.ex-chunk,.ex-tile,.ex-btn{font:700 17px/1.3 var(--body);min-height:48px;padding:10px 18px;border-radius:12px;border:2px solid var(--blue-pale);background:#fff;color:var(--ink);cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.ex-opt:hover:not(:disabled),.ex-chunk:hover:not(:disabled),.ex-tile:hover:not(:disabled){border-color:var(--blue);background:var(--blue-light)}
.ex-btn{color:var(--blue)}
.ex-btn.ex-go{background:var(--blue);border-color:var(--blue);color:#fff}
.ex-btn.ex-go:hover{background:#3555D6}
.ex button:disabled{cursor:default}
.ex-opt:disabled:not(.yes):not(.no),.ex-tile:disabled,.ex-chunk:disabled:not(.bad):not(.fixed):not(.wrongpick),.ex-btn:disabled{opacity:.55}
.ex-opt.yes,.ex-chunk.fixed{border-color:#1F8A4C;background:#E6F5EC;color:#17663C;opacity:1}
.ex-opt.yes::after,.ex-chunk.fixed::after{content:" \2713"}
.ex-opt.no{border-color:#B3261E;background:#FDECEA;color:#8C1D18;opacity:1}
.ex-opt.no::after{content:" \2717"}
.ex-chunk.bad{border-color:#B3261E;background:#FDECEA;color:#8C1D18;opacity:1}
.ex-chunk.wrongpick{background:#EEEEF2;color:var(--grey);text-decoration:line-through;opacity:1}
.ex-second{margin-top:14px}
.ex-second[hidden],.ex-end[hidden]{display:none}
.ex-miss{min-height:1.5em;margin:10px 0 0;font:700 16px/1.4 var(--body);color:#8C1D18}
.ex-line{min-height:54px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:8px;margin:0 auto 12px;border:2px dashed var(--blue-pale);border-radius:12px;background:#fff}
.ex-line.right{border-style:solid;border-color:#1F8A4C;background:#E6F5EC}
.ex-chip{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--blue);color:#fff;font:700 17px/1.2 var(--body)}
.ex-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px auto 0}
.ex-input{font:600 18px/1.3 var(--body);min-height:48px;width:100%;max-width:440px;padding:10px 14px;border:2px solid var(--blue-pale);border-radius:12px;color:var(--ink);background:#fff;text-align:center}
.ex-input:focus{border-color:var(--blue)}
.ex-fb{margin:14px auto 0;max-width:34em;font:600 17px/1.5 var(--body);text-align:center}
.ex-fb:empty{display:none}
.ex-fb.good{color:#17663C}
.ex-fb.bad{color:#8C1D18}
.ex-fb.info{color:var(--ink)}
.ex-link{font:800 16px/1.3 var(--body);color:var(--blue);background:none;border:0;text-decoration:underline;cursor:pointer;min-height:44px;padding:8px 6px}
.ex-end{margin:26px auto 0;padding:26px 16px;background:var(--blue-light);border:2px solid var(--blue);border-radius:16px}
.ex-end:focus{outline:3px solid var(--blue);outline-offset:3px}
.article .ex-result{font:600 28px/1.2 var(--display);margin:0 0 8px;max-width:none}
.article .ex-note{margin:0 auto}
.ex-slot .save-card{margin-top:18px;background:#fff}
.ex button:focus-visible,.ex input:focus-visible,.ex-end:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (max-width:480px){.article .ex-item{padding:18px 10px 14px}.article .ex-q{font-size:18px}.ex-opts{max-width:none}}