.quiz{padding-block:12px;--ok: #2b8a3e;--ng: #d9480f;--miss: #e8a400}@media(prefers-color-scheme:dark){.quiz{--ok: #5cc77a;--ng: #ff8a50;--miss: #f5c21b}}.quiz .qapp{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:16px;height:calc(100vh - 73px);height:calc(100dvh - 73px);min-height:520px}.quiz .qapp.nomap{grid-template-columns:minmax(0,46em);height:auto;min-height:0}.quiz .qpanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:auto}.quiz .qhead{padding:12px 16px;border-bottom:1px solid var(--line);display:grid;gap:10px}.quiz .qhead h1{font-size:var(--fs-lg);margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.quiz .qhead h1 a{font-size:var(--fs-xs);font-weight:400;color:var(--muted)}.quiz .qset{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:var(--fs-sm)}.quiz .qset label{display:inline-flex;align-items:center;gap:6px}.quiz .qset select{padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-size:var(--fs-sm);max-width:12em}.quiz .qset .seg button{padding:4px 10px}.quiz .tabs{display:flex}.quiz .tabs>*{flex:1 1 auto;padding:7px 6px;text-align:center;color:inherit;text-decoration:none;font-size:var(--fs-md);white-space:nowrap}.quiz .stats{display:flex;gap:14px;font-size:var(--fs-xs);color:var(--muted)}.quiz .stats b{color:var(--fg);font-variant-numeric:tabular-nums}.quiz .qplay{padding:12px 16px 16px;display:grid;gap:12px;align-content:start}.quiz .qbar{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}.quiz .prompt{display:grid;gap:2px;justify-items:start}.quiz .prompt .ask,.quiz .prompt .kana{font-size:var(--fs-sm);color:var(--muted)}.quiz .prompt .name{font-size:1.75rem;font-weight:700;line-height:1.25}.quiz .prompt .pf{font-size:var(--fs-sm)}.quiz .feedback{min-height:3.2em;font-size:var(--fs-md);line-height:1.5}.quiz .feedback:empty{min-height:0}.quiz .feedback .res{font-weight:700;font-size:var(--fs-lg)}.quiz .feedback .res.ok{color:var(--ok)}.quiz .feedback .res.ng{color:var(--ng)}.quiz .feedback small{color:var(--muted);font-size:var(--fs-sm)}.quiz .feedback p{margin:4px 0 0}.quiz .feedback a{font-size:var(--fs-sm)}.quiz #q-go{width:100%;padding:10px;font-size:var(--fs-md)}.quiz .hint{font-size:var(--fs-xs);color:var(--muted);margin:0}.quiz .qsummary{padding:16px;display:grid;gap:12px;align-content:start}.quiz .qsummary .big{margin:0;font-size:var(--fs-lg);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}.quiz .qsummary .big b{font-size:var(--fs-xl)}.quiz .qsummary .big span{font-size:var(--fs-sm);color:var(--muted)}.quiz .results{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--fs-sm)}.quiz .results li{display:grid;grid-template-columns:1.4em minmax(0,auto) 1fr;gap:6px;align-items:baseline;padding:3px 0;border-bottom:1px solid var(--line)}.quiz .results .mark{font-weight:700}.quiz .results .ok .mark{color:var(--ok)}.quiz .results .ng .mark{color:var(--ng)}.quiz .results .nt{color:var(--muted);font-size:var(--fs-xs);text-align:right}.quiz .acts{display:flex;flex-wrap:wrap;gap:8px}.quiz .qmap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--sea);min-width:0;touch-action:none}.quiz .qmap svg{display:block;width:100%;height:100%;cursor:crosshair}.quiz .qmap svg:active{cursor:grabbing}.quiz .mapctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}.quiz .mapctl button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:var(--fs-lg);line-height:1}.quiz .mapctl button.wide{font-size:var(--fs-xs);padding:0}.quiz .attrib{position:absolute;right:0;bottom:0;margin:0;padding:1px 8px;max-width:100%;background:color-mix(in srgb,var(--surface) 80%,transparent);border-top-left-radius:6px;font-size:10px;line-height:1.5;color:var(--muted)}.quiz .attrib a{color:var(--muted)}.quiz .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:var(--fs-sm);pointer-events:none}.quiz .qpref,.quiz .qmuni,.quiz .qland{fill:var(--land);stroke-linejoin:round;fill-rule:evenodd}.quiz .qpref{stroke:var(--coast);stroke-width:.8px;vector-effect:non-scaling-stroke;cursor:pointer}.quiz .qpref.off{fill:color-mix(in srgb,var(--land) 45%,var(--sea));cursor:default}.quiz .qland{opacity:.45}.quiz .qland.in{opacity:1}.quiz .qmuni{cursor:crosshair}.quiz .qborder,.quiz .qedge,.quiz .qline,.quiz .qshape,.quiz .frame{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}.quiz .qborder{stroke:var(--fg);stroke-opacity:.25;stroke-width:.6px}.quiz .qedge{stroke:var(--coast);stroke-width:.9px}.quiz .frame{stroke:var(--coast);stroke-dasharray:4 3;stroke-width:1px}@media(hover:hover){.quiz .qpref:not(.off):hover{fill:color-mix(in oklab,var(--land),var(--sel) 18%)}.quiz .qmuni:hover{fill:color-mix(in oklab,var(--land),var(--sel) 12%)}}.quiz .qpref.on{fill:color-mix(in oklab,var(--land),var(--sel) 45%)}.quiz .qpref.ok{fill:color-mix(in oklab,var(--land),var(--ok) 60%)}.quiz .qpref.ng{fill:color-mix(in oklab,var(--land),var(--ng) 55%)}.quiz .qpref.miss{fill:color-mix(in oklab,var(--land),var(--miss) 55%)}.quiz .qshape.target{fill:var(--hit);fill-opacity:.85;stroke:var(--hit-stroke);stroke-width:1.5px}.quiz .qshape.mine{fill:none;stroke:var(--ng);stroke-width:2px;stroke-dasharray:4 3}.quiz .qshape.area{fill:var(--hit);fill-opacity:.75;stroke:var(--hit);stroke-width:2px}.quiz .qline{stroke:var(--fg);stroke-width:1.5px;stroke-dasharray:5 4}.quiz .qpin,.quiz .qpin-c{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}.quiz .qpin{stroke:var(--halo);stroke-width:15px}.quiz .qpin-c{stroke:var(--sel);stroke-width:10px}.quiz .qpin-c.target{stroke:var(--hit-stroke)}.quiz .qlabel text{text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--halo);stroke-linejoin:round;font-family:var(--font);pointer-events:none}.quiz .qlabel .main{fill:var(--fg);font-weight:700}.quiz .qlabel .sub{fill:var(--muted)}.quiz .qlabel.mine .main{fill:var(--ng);font-weight:400}@media(max-width:860px){.quiz .qapp{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;gap:10px}.quiz .qapp:not(.nomap) .qpanel,.quiz .qapp:not(.nomap) .qplay{display:contents}.quiz .qapp:not(.nomap) .qhead{order:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}.quiz .qapp:not(.nomap) .qbar{order:1;padding:0 4px}.quiz .qapp:not(.nomap) .prompt{order:2;padding:0 4px}.quiz .qapp:not(.nomap) .qmap{order:3;height:56vh;height:56dvh;min-height:300px}.quiz .qapp:not(.nomap) .feedback{order:4;padding:0 4px}.quiz .qapp:not(.nomap) .hint{order:4;padding:0 4px}.quiz .qapp:not(.nomap) #q-go{order:5;position:sticky;bottom:10px;z-index:5;box-shadow:0 2px 10px #00000040}.quiz .qapp:not(.nomap) .qsummary{order:6;background:var(--surface);border:1px solid var(--line);border-radius:12px}.quiz .prompt .name{font-size:1.5rem}}.quiz .tabs [aria-selected=true]{background:var(--accent);color:var(--accent-fg)}.quiz .tabs button{border:0;background:transparent;cursor:pointer}.quiz .tabs>*+*{border-left:1px solid var(--line)}.quiz .qshape.area.part{fill-opacity:.35;stroke-dasharray:3 2}.quiz .legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-xs);color:var(--muted)}.quiz .legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}.quiz .legend .ok:before{background:color-mix(in oklab,var(--land),var(--ok) 60%)}.quiz .legend .ng:before{background:color-mix(in oklab,var(--land),var(--ng) 55%)}.quiz .legend .miss:before{background:color-mix(in oklab,var(--land),var(--miss) 55%)}