/* Qualification shell 1.12: ported from dev-rikugi-study@f97849a.
   Static markup is present before the first render; routes update only state. */
:root{--console:#092C3C;--console-2:#0E4154;--signal:#F2A900;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
@media(prefers-color-scheme:dark){:root{--console:#04151D;--console-2:#0B3445;--signal:#FFC247}}
.phone{height:100vh;height:var(--appH,100dvh);background:var(--ground);border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 0 45px rgba(9,44,60,.13)}
@media(max-width:520px){.phone{border:0;box-shadow:none}}
main{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.nav{display:flex;background:var(--console);border-top:2px solid var(--signal);flex-shrink:0;padding:0 0 env(safe-area-inset-bottom);gap:0}
.nav button{flex:1;min-width:0;padding:9px 1px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#8DA9B4;font-size:9.5px;position:relative;min-height:58px;white-space:nowrap;overflow:hidden;border:0;border-radius:0;background:none;text-align:center}
.nav button.on{color:#FFFFFF;background:linear-gradient(180deg,var(--console-2),var(--console));font-weight:400}
.nav button.on::before{content:"";position:absolute;top:0;left:24%;right:24%;height:2px;background:var(--signal);box-shadow:0 0 8px var(--signal)}
.nav .ico{font-family:var(--font-mono);font-size:9px;line-height:1;letter-spacing:.08em;min-width:34px;height:20px;padding:0 5px;display:grid;place-items:center;border:1px solid currentColor;border-radius:2px}
.nav .badge{position:absolute;top:3px;left:calc(50% + 8px);background:var(--signal);color:#18242A;font-size:9px;font-weight:800;min-width:18px;height:17px;border-radius:2px;display:grid;place-items:center;padding:0 5px;font-family:var(--font-mono);margin:0}
.nav button:focus-visible{outline-offset:-3px}

/* Same palette, type, page heading and home components as the reference. */
:root{--ground:#E9EFF2;--surface:#F9FBFC;--raise:#E2EAEE;--ink:#102A3A;--muted:#5E7480;--line:#BDCCD3;--accent:#007C91;--accent-soft:#D5EDF0;--accent-ink:#FFFFFF;--soft:var(--accent-soft);--on-accent:var(--accent-ink);--lv0:#82949D;--lv1:#C94B3A;--lv1s:#F9E3DF;--lv2:#B97800;--lv2s:#F7E9C9;--lv3:#16825B;--lv3s:#DCEFE7;--lv4:#176DA5;--lv4s:#DDEAF3;--font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;--r:4px;font-family:var(--font-jp);line-height:1.7}
@media(prefers-color-scheme:dark){:root{--ground:#07151C;--surface:#0E222C;--raise:#15323E;--ink:#E7F0F3;--muted:#91A6AF;--line:#294651;--accent:#40C7D4;--accent-soft:#123B45;--accent-ink:#041519;--lv0:#4A585F;--lv1:#FF8B76;--lv1s:#331812;--lv2:#EBB44E;--lv2s:#33280F;--lv3:#5FCE97;--lv3s:#11301F;--lv4:#77AEF5;--lv4s:#152740}}
body{font-family:var(--font-jp);line-height:1.7;background-image:linear-gradient(rgba(9,44,60,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(9,44,60,.035) 1px,transparent 1px);background-size:20px 20px}
main{padding:16px 16px 8px;background:var(--ground)}.vhead{position:sticky;top:-16px;z-index:6;background:var(--ground);background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(9px);margin:-16px -16px 14px;padding:13px 16px 10px;border-bottom:2px solid var(--console)}.vhead::after{content:"";position:absolute;left:16px;bottom:-2px;width:54px;height:2px;background:var(--signal)}.vhead .h{font-size:18px;font-weight:800;letter-spacing:.02em}.brandcode{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--accent);margin-bottom:2px}
.card,.subject-card,.chapter-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 10px;box-shadow:0 3px 0 rgba(9,44,60,.06)}.card h2{font-size:17px;margin:0 0 10px}.subject-card .pct{font-family:var(--font-mono);font-size:20px}.unit-card{border-radius:var(--r);box-shadow:0 2px 0 rgba(9,44,60,.05)}.sec-t{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:.14em;margin:19px 0 8px;padding:0 2px;text-transform:uppercase}.qs{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:left;margin-bottom:8px}.qs .ic{font-family:var(--font-mono);font-size:10px;font-weight:700;display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border:1px solid currentColor;border-radius:3px;color:var(--accent)}.qs .t{font-size:15px;font-weight:700}.qs .d{font-size:11.5px;color:var(--muted);line-height:1.5}.qs .cnt{margin-left:auto;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent)}
.mission{position:relative;overflow:hidden;color:#EAF5F7;background:var(--console);border:1px solid var(--console-2);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:0 5px 0 rgba(9,44,60,.14)}.mission-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.mission .k{font-family:var(--font-mono);color:#91B5C0;font-size:9.5px;letter-spacing:.14em}.mission .v{font-family:var(--font-mono);font-size:39px;font-weight:700;line-height:1.05;letter-spacing:-.05em;margin-top:3px}.mission .v small{font-size:15px;color:var(--signal)}.trace{height:8px;padding:2px;border:1px solid #3E6673;margin:16px 0 10px}.trace i{display:block;height:100%;background:var(--signal)}.mission-foot{display:flex;justify-content:space-between;color:#91B5C0;font-family:var(--font-mono);font-size:9px;gap:8px}.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:16px}.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 3px;text-align:center}.tile .v{font-family:var(--font-mono);font-size:22px;font-weight:700}.tile .k{font-size:9px;color:var(--muted)}
#unit-footer .rating button{border-radius:var(--r)}
.qs .t,.qs .d{display:block}
@media(max-width:350px){main{padding:16px 16px 8px}}
/* Standard 1.16: reuse Rikugi's question region, choice cards, spacing and palette. */
.question.qtext{font-size:16px;font-weight:400;line-height:1.9;background:var(--surface);border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:13px 14px;margin:0 0 12px;overflow-wrap:anywhere}
.qchoices{display:flex;flex-direction:column;gap:10px;margin:4px 0 16px}
.qc.option{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 13px;display:flex;gap:11px;align-items:flex-start;font-size:16px;line-height:1.7;min-height:56px;text-align:left;width:100%;overflow-wrap:anywhere;margin:0;color:var(--ink)}
.qc .m{font-family:var(--font-mono);color:var(--muted);background:var(--raise);border:0;border-radius:7px;display:flex;align-items:center;justify-content:center;min-width:30px;width:auto;height:30px;padding:0 6px;margin-top:-1px;flex-shrink:0;font-size:14px;font-weight:700}
.qc.option.selected{border-color:var(--accent);background:var(--accent-soft)}
.qc.option.ok{border-color:var(--lv3);background:var(--lv3s)}
.qc.option.ng{border-color:var(--lv1);background:var(--lv1s)}
.qc.ok .m{background:var(--lv3);color:#fff}
.qc.ng .m{background:var(--lv1);color:#fff}
.qc:disabled{opacity:1;cursor:default}
.qc .option-text{min-width:0;flex:1}
.qc .choice-copy{display:block}
.qc .option-label{display:block;font-size:12px;font-weight:700;line-height:1.5;margin:0 0 4px;color:var(--accent)}
.qc.ok .option-label{color:var(--lv3)}
.qc.ng .option-label{color:var(--lv1)}
.qc .choice-result{display:block;font-size:14px;font-weight:700;line-height:1.6;margin:0 0 6px}
.explanation-heading{margin:19px 0 8px;padding:0 2px}
.verdict{border-radius:var(--r);padding:13px 15px;margin:0 0 14px;font-size:14px;font-weight:700}
.verdict h2{font-size:14px;margin:0}
.verdict p{font-size:14px;margin:4px 0 0;font-weight:400}
.verdict.good{background:var(--lv3s);color:var(--lv3)}
.verdict.bad{background:var(--lv1s);color:var(--lv1)}
/* Listening controls and persistent mini player: Rikugi b661379. */
.mini{display:flex;align-items:center;gap:10px;padding:9px 14px;flex-shrink:0;background:var(--accent-soft);border-top:1px solid var(--line)}
.mini .t{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;text-align:left}
.mini .p{font-family:var(--font-mono);font-size:11px;color:var(--muted);flex-shrink:0}
.mini button{background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:7px 15px;font-size:12px;font-weight:700;flex-shrink:0;min-height:34px}
.player{background:var(--surface);border-radius:var(--r);padding:14px;margin:0 0 12px}
.player-top{display:flex;align-items:center;gap:13px}
.pp{width:50px;height:50px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:16px;flex-shrink:0;display:grid;place-items:center;padding:0}
.audio-meta{flex:1;min-width:0}.audio-meta strong{font-size:14px}.audio-position{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin:4px 0 0}
.audio-line{min-height:5.7em;font-size:16px;line-height:1.9;overflow-wrap:anywhere;margin:18px 0}
.pbtns{display:flex;gap:8px;margin-top:12px}.pbtns button{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:11px 3px;font-size:13px;color:var(--muted);min-height:44px;text-align:center}
.pbtns button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.tracks{display:flex;flex-direction:column;gap:8px}.track{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r);padding:13px;width:100%;text-align:left}.track.on{outline:2px solid var(--accent)}
.track .no{font-family:var(--font-mono);font-size:12px;color:var(--muted);flex-shrink:0;width:16px}.track .t{display:block;font-size:14px;font-weight:700;margin-bottom:2px}.track .m{display:block;font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.audio-auto{font-size:13px}.audio-auto[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}