:root { --ink:#16222e; --muted:#46586b; --bg:#f6f8fa; --card:#ffffff; --line:#c9d3dc; --brand:#0f3d63; --brand2:#14507f; --ok:#0b6b34; --okbg:#e6f4ea; --ko:#9b1c1c; --kobg:#fdeaea; --warn:#7a4a00; --warnbg:#fff4d9; --focus:#0a58ca; --size:1.0625rem; }
html.hc { --ink:#000; --muted:#1a1a1a; --bg:#fff; --card:#fff; --line:#000; --brand:#000; --brand2:#000; --ok:#004d1f; --okbg:#fff; --ko:#8a0000; --kobg:#fff; --warn:#000; --warnbg:#fff; }
html.ts-1 { --size:1.25rem; } html.ts-2 { --size:1.5rem; }
* { box-sizing:border-box; }
html { font-size:100%; } body { margin:0; font:var(--size)/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); }
.skip { position:absolute; left:-999px; top:0; background:#000; color:#fff; padding:.6rem 1rem; z-index:10; } .skip:focus { left:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.top { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding:.8rem 1rem; background:var(--brand); color:#fff; }
html.hc .top { background:#000; }
.tag { margin:0; font-size:.8em; opacity:.9; } .apptitle { margin:0; font-weight:700; font-size:1.15em; }
.tools { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; } .tools .small { color:#fff; }
.layout { display:grid; grid-template-columns:12rem 1fr; gap:1.2rem; max-width:62rem; margin:1rem auto; padding:0 1rem; }
.side { align-self:start; position:sticky; top:.5rem; } .units { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.navb { width:100%; text-align:left; font:inherit; padding:.55rem .7rem; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:.5rem; cursor:pointer; }
.navb.on { background:var(--brand); color:#fff; border-color:var(--brand); } html.hc .navb.on { background:#000; }
.content { min-width:0; } main { background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:1.2rem 1.4rem; outline:none; }
h1,h2,h3 { line-height:1.25; color:var(--brand); margin:.2rem 0 .6rem; } html.hc h1, html.hc h2, html.hc h3 { color:#000; } h1 { font-size:1.7em; } h2 { font-size:1.35em; } h3 { font-size:1.1em; }
h1:focus, h2:focus { outline:3px solid var(--focus); outline-offset:3px; }
.unit { margin:0; font-size:.85em; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.lead { font-size:1.1em; } .goal { font-weight:600; } .obj li { margin:.3rem 0; } .note { color:var(--muted); font-size:.9em; border-left:4px solid var(--line); padding-left:.8rem; }
.small { font-size:.85em; } .hint { min-height:1.2em; color:var(--muted); margin:.4rem 0 0; }
.btn { font:inherit; padding:.6rem 1rem; border-radius:.5rem; border:2px solid var(--brand); background:var(--card); color:var(--brand); cursor:pointer; font-weight:600; min-height:2.75rem; }
.btn.primary { background:var(--brand); color:#fff; } .btn.sm { padding:.3rem .6rem; min-height:2.2rem; font-size:.9em; } .top .btn { background:transparent; color:#fff; border-color:#fff; } .top .btn[aria-pressed="true"] { background:#fff; color:var(--brand); }
.btn:disabled { opacity:.55; cursor:not-allowed; } .link { background:none; border:0; color:var(--brand); text-decoration:underline; font:inherit; cursor:pointer; padding:.2rem; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.row { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 .4rem; }
.pager { display:flex; justify-content:space-between; gap:.6rem; margin-top:1rem; }
.progress { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; } progress { flex:1; height:.7rem; accent-color:var(--brand); }
.figwrap { margin:1rem 0; } .fig { width:100%; max-width:30rem; height:auto; display:block; margin:0 auto; }
.fc { stroke:var(--brand); stroke-width:2; } .fc.c1 { fill:#dcecf9; } .fc.c2 { fill:#e3f3e6; } .fc.c3 { fill:#fdebd2; } .fc.core { fill:var(--brand); } html.hc .fc { fill:#fff !important; stroke:#000; } html.hc .fc.core { fill:#000 !important; }
.ft { font:600 14px system-ui,sans-serif; fill:#16222e; } .ft.core { fill:#fff; } html.hc .ft { fill:#000; } html.hc .ft.core { fill:#fff; } .fs { font:12px system-ui,sans-serif; fill:#16222e; }
.cards { display:grid; gap:.7rem; margin:1rem 0; } .card { border:1px solid var(--line); border-left:6px solid var(--brand); border-radius:.5rem; padding:.6rem .9rem; } .card dt { font-weight:700; } .card dd { margin:.2rem 0 0; } .card .ex { color:var(--muted); font-size:.92em; }
.card.c1 { border-left-color:#2c78b7; } .card.c2 { border-left-color:#2e8b57; } .card.c3 { border-left-color:#c77a14; }
.warn { background:var(--warnbg); border:1px solid #e6c84a; color:var(--warn); padding:.7rem .9rem; border-radius:.5rem; } html.hc .warn { border:2px solid #000; }
.key { background:#eef4fa; border:1px solid var(--line); border-radius:.5rem; padding:.7rem .9rem; } html.hc .key { background:#fff; border:2px solid #000; }
.audio { margin:1rem 0; } .audio audio { width:100%; max-width:30rem; } details { margin:.4rem 0; } summary { cursor:pointer; padding:.3rem 0; font-weight:600; }
.qrow { display:grid; gap:.3rem; margin:.9rem 0 .2rem; } .sel { font:inherit; padding:.5rem; border:2px solid var(--line); border-radius:.4rem; background:#fff; color:#000; max-width:22rem; }
fieldset.opts { border:1px solid var(--line); border-radius:.5rem; padding:.7rem 1rem; margin:1rem 0; } legend { font-weight:600; padding:0 .3rem; }
.opt { display:flex; gap:.6rem; align-items:flex-start; margin:.45rem 0; } .opt input { width:1.4rem; height:1.4rem; margin-top:.2rem; flex:none; } .opt label { cursor:pointer; }
.inl { display:inline-flex; align-items:center; gap:.3rem; margin-right:1rem; } .inl input { width:1.2rem; height:1.2rem; }
.itemfb { margin:.2rem 0 .6rem 2rem; padding:0; font-size:.95em; } .itemfb:empty { display:none; } .itemfb.ok { color:var(--ok); } .itemfb.ko { color:var(--ko); } .itemfb::before { font-weight:700; }
.status { margin:.8rem 0; padding:.7rem .9rem; border-radius:.5rem; } .status:empty { display:none; } .status.ok { background:var(--okbg); color:var(--ok); border:1px solid var(--ok); } .status.ko { background:var(--kobg); color:var(--ko); border:1px solid var(--ko); }
.key-inline { display:block; margin-top:.3rem; color:var(--ink); }
.scenario { display:flex; gap:.9rem; align-items:flex-start; background:#f2f7fb; border:1px solid var(--line); border-radius:.6rem; padding:.8rem 1rem; margin:.8rem 0; } .scenario p { margin:0; } html.hc .scenario { background:#fff; border:2px solid #000; }
.avatar { width:3.6rem; height:3.6rem; flex:none; } .av-bg { fill:#cfe3f4; } .av-head { fill:#14507f; } .av-body { fill:none; stroke:#14507f; stroke-width:8; stroke-linecap:round; }
.order { padding-left:1.4rem; } .order li { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; padding:.4rem .6rem; border:1px solid var(--line); border-radius:.4rem; } .order .ot { flex:1; }
.score { font-size:1.4em; font-weight:700; } .score.ok { color:var(--ok); } .score.ko { color:var(--ko); }
.foot { max-width:62rem; margin:1rem auto 2rem; padding:0 1rem; color:var(--muted); }
dialog { max-width:34rem; border:2px solid var(--brand); border-radius:.7rem; padding:1.2rem; background:var(--card); color:var(--ink); } dialog::backdrop { background:rgba(0,0,0,.55); }
.gloss dt { font-weight:700; margin-top:.6rem; } .gloss dd { margin:0; }
@media (max-width:760px) { .layout { grid-template-columns:1fr; } .side { position:static; } .units { grid-template-columns:repeat(2,1fr); } .itemfb { margin-left:.4rem; } main { padding:1rem; } }
@media (prefers-reduced-motion:no-preference) { html:not(.calm) main { animation:fade .25s ease-out; } @keyframes fade { from { opacity:.3; transform:translateY(4px); } to { opacity:1; transform:none; } } }