/* Interactive figures inside the guides. One box per question; the drawing
   answers it. Theme tokens only, so the widget follows light and dark. */
.aw{margin-top:1.75rem;border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-100);padding:1rem;font-family:var(--font-sans);font-size:15px;line-height:1.45;color:var(--color-base-content)}
@media(min-width:640px){.aw{padding:1.5rem}}
.aw *{box-sizing:border-box}
.aw .aw-controls{display:grid;gap:1rem}
@media(min-width:640px){.aw .aw-controls{grid-template-columns:1fr 1fr}}
.aw .aw-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.aw .aw-field.aw-wide{grid-column:1/-1}
.aw label,.aw legend{font-size:14px;font-weight:500;padding:0}
.aw .aw-val{font-family:var(--font-mono);font-weight:400;opacity:.75}
.aw .aw-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0;padding:0;border:0}
.aw .aw-seg.aw-cols-3{grid-template-columns:repeat(3,1fr)}
.aw .aw-seg.aw-cols-8{grid-template-columns:repeat(4,1fr)}
@media(min-width:640px){.aw .aw-seg.aw-cols-4{grid-template-columns:repeat(4,1fr)}.aw .aw-seg.aw-cols-5{grid-template-columns:repeat(5,1fr)}.aw .aw-seg.aw-cols-8{grid-template-columns:repeat(8,1fr)}}
.aw .aw-seg label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:2.75rem;padding:.5rem .6rem;border:1px solid var(--color-base-300);border-radius:var(--radius-field);font-size:14px;font-weight:400;line-height:1.2;cursor:pointer;user-select:none}
.aw .aw-seg input{position:absolute;opacity:0;width:0;height:0}
.aw .aw-seg input:checked+label{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent)}
.aw .aw-seg input:focus-visible+label{outline:2px solid var(--color-primary);outline-offset:2px}
.aw input[type=range]{width:100%;accent-color:var(--color-primary);height:2rem;margin:0}
.aw .aw-check{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;font-size:14px;font-weight:400;cursor:pointer}
.aw .aw-check input{width:1.1rem;height:1.1rem;accent-color:var(--color-primary);margin:0}
.aw .aw-svg{display:block;width:100%;height:auto;margin-top:1.25rem;border-radius:var(--radius-field);background:color-mix(in srgb,var(--color-base-content) 3%,transparent)}
.aw .aw-svg text{font-family:var(--font-mono);font-size:16px;fill:var(--color-base-content)}
.aw .aw-svg .aw-muted{opacity:.55}
.aw .aw-svg .aw-small{font-size:14px}
.aw .aw-svg .aw-ink{stroke:var(--color-base-content);fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.aw .aw-svg .aw-fill{fill:var(--color-base-100);stroke:var(--color-base-content);stroke-width:1.5;stroke-linejoin:round}
.aw .aw-svg .aw-solid{fill:var(--color-base-content);opacity:.85}
.aw .aw-svg .aw-ground{fill:color-mix(in srgb,var(--color-base-content) 10%,transparent)}
.aw .aw-svg .aw-key{stroke:var(--color-primary);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.aw .aw-svg .aw-key2{stroke:var(--color-primary);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:6 5}
.aw .aw-svg .aw-keyfill{fill:color-mix(in srgb,var(--color-primary) 18%,transparent);stroke:var(--color-primary);stroke-width:1.5}
.aw .aw-svg .aw-warnfill{fill:color-mix(in srgb,var(--color-error) 14%,transparent);stroke:var(--color-error);stroke-width:1;stroke-dasharray:4 4}
.aw .aw-svg .aw-warn{stroke:var(--color-error);fill:none;stroke-width:2}
.aw .aw-svg .aw-warntext{fill:var(--color-error)}
.aw .aw-svg .aw-dash{stroke:var(--color-base-content);stroke-width:1.5;fill:none;stroke-dasharray:3 4;opacity:.6}
.aw .aw-svg .aw-dim{stroke:var(--color-base-content);stroke-width:1;fill:none;opacity:.7}
.aw .aw-svg .aw-hair{stroke:var(--color-base-content);stroke-width:1;stroke-dasharray:2 4;opacity:.5}
.aw .aw-svg .aw-off{opacity:.25}
.aw .aw-verdict{margin-top:1.25rem;padding:.75rem 1rem;border-radius:var(--radius-field);background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.aw .aw-verdict.aw-none{background:color-mix(in srgb,var(--color-base-content) 6%,transparent)}
.aw .aw-out{margin-top:1.25rem;display:grid;gap:.75rem}
@media(min-width:640px){.aw .aw-out{grid-template-columns:1fr 1fr}}
.aw .aw-card{border-top:1px solid var(--color-base-300);padding-top:.6rem;min-width:0}
.aw .aw-card .aw-k{font-size:13px;opacity:.6}
.aw .aw-card .aw-v{margin-top:.15rem}
.aw .aw-card .aw-v b{font-weight:500}
.aw .aw-card .aw-c{display:block;margin-top:.2rem;font-family:var(--font-mono);font-size:12px;opacity:.65;overflow-wrap:anywhere}
.aw .aw-note{margin-top:1rem;font-size:13px;line-height:1.5;opacity:.65}
.aw .aw-title{font-family:var(--font-serif);font-size:1.25rem;line-height:1.25;margin:0 0 1rem}