:root{--bg:#eef1f6;--ink:#182449;--muted:#637099;--accent:#d98e2b;--surface:#fff;--line:rgba(24,36,73,.16);--ok:#2f7a6b;--bad:#a94b44;--soft:#f7f8fb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(#d7deea 1px,transparent 1px) 0 0/22px 22px,var(--bg);color:var(--ink);font-family:'Hiragino Sans','Yu Gothic',Meiryo,sans-serif}.wrap{max-width:1000px;margin:auto;padding:28px 18px 72px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.topbarActions{display:flex;align-items:center;gap:8px}.home{color:var(--ink);text-decoration:none;font-weight:700}.badge{font-size:12px;padding:5px 9px;border:1px solid var(--line);background:var(--surface)}.soundToggle{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:5px 9px;cursor:pointer}.soundToggle:hover{border-color:var(--accent)}h1{font-size:28px;margin:0 0 8px}.lead{color:var(--muted);line-height:1.75;margin:0 0 18px}.tip{background:rgba(255,255,255,.72);border-left:4px solid var(--accent);padding:13px 15px;line-height:1.7;font-size:14px;margin:16px 0 20px}.section{margin-top:30px}.section h2{font-size:18px;margin:0 0 12px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.tile{display:block;background:var(--surface);border:1.5px solid var(--ink);box-shadow:5px 5px 0 rgba(24,36,73,.12);padding:18px;text-decoration:none;color:inherit;transition:.12s}.tile:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 rgba(24,36,73,.12)}.tile h3{font-size:17px;margin:0 0 7px}.tile p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.meta span{font-size:11px;border:1px solid var(--line);padding:3px 7px}.tileProgress{margin-top:12px}.tileProgressTrack{height:5px;background:var(--line)}.tileProgressFill{height:100%;background:var(--ok)}.tileProgressText{font-size:11px;color:var(--muted);margin-top:5px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.toolbar select,.toolbar button,.nav button,.modebar button{font:inherit;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);padding:9px 11px;cursor:pointer}.toolbar select{min-width:180px}.toolbar button.soft{border-color:var(--line)}.modebar{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 15px}.modebar button{font-size:12px;border-color:var(--line);padding:7px 10px}.modebar button.on{border-color:var(--accent);background:#f3dcb3}.status{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:8px 0}.status>span:last-child{text-align:right;line-height:1.6}.seek{position:relative;height:28px;cursor:pointer;touch-action:none}.seekTrack{position:absolute;left:0;right:0;top:11px;height:7px;background:var(--line);border-radius:999px;overflow:hidden}.seekFill{height:100%;background:var(--accent);width:0}.seekThumb{position:absolute;top:6px;width:17px;height:17px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);transform:translateX(-50%);left:0}.seek:hover .seekTrack{outline:2px solid rgba(217,142,43,.16)}.levelScale{display:flex;gap:6px;margin:2px 0 12px}.levelScale button{flex:1;border:0;border-top:3px solid var(--line);background:transparent;color:var(--muted);font-size:11px;padding:6px 2px;cursor:pointer}.levelScale button.on{border-top-color:var(--accent);color:var(--ink);font-weight:700}.mapToggle{font-size:12px;color:var(--ink);background:transparent;border:0;text-decoration:underline;cursor:pointer;padding:0}.qmap{display:none;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:5px;background:rgba(255,255,255,.7);padding:10px;border:1px solid var(--line);margin:10px 0 16px}.qmap.show{display:grid}.qdot{height:28px;border:1px solid var(--line);background:var(--surface);font-size:10px;color:var(--muted);cursor:pointer}.qdot.mastered{border-color:var(--ok);color:var(--ok)}.qdot.weak{border-color:var(--bad);color:var(--bad);background:#fff5f4}.qdot.current{outline:2px solid var(--ink);outline-offset:1px;color:var(--ink);font-weight:700}
.card{position:relative;overflow:hidden;background:var(--surface);border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(24,36,73,.14);padding:24px;min-height:400px}.qmeta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;margin-bottom:18px}.question{font-size:18px;line-height:1.85;white-space:pre-wrap}.pair{font-size:12px;color:var(--muted);border:1px solid var(--line);display:inline-block;padding:4px 7px;margin-bottom:12px}.choices{display:grid;gap:10px;margin-top:22px}.choice{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;text-align:left;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);padding:12px 13px;font:inherit;line-height:1.55;cursor:pointer}.choice:hover:not(:disabled){background:var(--soft)}.choice .letter{font-weight:800;color:var(--accent)}.choice.correct{border-color:var(--ok);background:#edf7f4}.choice.wrong{border-color:var(--bad);background:#fff2f1}.choice:disabled{cursor:default;color:var(--ink)}.feedback{display:none;margin-top:18px;border-top:1px solid var(--line);padding-top:15px;line-height:1.7}.feedback.show{display:block}.feedback .judge{font-weight:800;margin-bottom:6px}.feedback.ok .judge{color:var(--ok)}.feedback.ng .judge{color:var(--bad)}.feedback .correctAnswer{font-size:14px}.feedback .note{font-size:13px;color:var(--muted);margin-top:6px}.nav{display:flex;gap:10px;margin-top:14px}.nav button{flex:1}.footer{margin-top:26px;color:var(--muted);font-size:12px;line-height:1.7}.kbd{border:1px solid var(--line);background:var(--surface);padding:1px 5px;font-family:ui-monospace,monospace}.dangerLink{color:var(--bad);border:0;background:transparent;text-decoration:underline;cursor:pointer;font:inherit;font-size:12px}.empty{padding:30px;text-align:center;color:var(--muted)}
/* SQL道場風の判子演出 */
.stamp-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}.stamp{width:158px;height:158px;border-radius:50%;display:grid;place-items:center;font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-weight:800;font-size:44px;letter-spacing:.12em;text-indent:.12em;opacity:0;transform:scale(2.4) rotate(-26deg)}.stamp.on{animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards}.stamp.ac{border:6px double var(--ok);color:var(--ok);box-shadow:0 0 0 3px rgba(47,122,107,.12)}.stamp.wa{border:6px double var(--bad);color:var(--bad);box-shadow:0 0 0 3px rgba(169,75,68,.12)}.stamp.on.ac.first{animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards,glowPulse 1.3s ease-in-out .5s 2}.stamp small{display:block;font-size:11px;letter-spacing:.3em;text-indent:.3em;margin-top:6px;opacity:.85}@keyframes slam{0%{opacity:0;transform:scale(2.4) rotate(-26deg)}55%{opacity:1;transform:scale(.9) rotate(-9deg)}70%{transform:scale(1.06) rotate(-9deg)}86%{transform:scale(.99) rotate(-9deg)}100%{opacity:1;transform:scale(1) rotate(-9deg)}}@keyframes glowPulse{0%,100%{box-shadow:0 0 0 3px rgba(47,122,107,.12),0 0 14px 3px rgba(217,142,43,.35)}50%{box-shadow:0 0 0 3px rgba(47,122,107,.12),0 0 34px 10px rgba(217,142,43,.75)}}.shake{animation:shake .32s}@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}.ripple{position:absolute;width:158px;height:158px;border-radius:50%;border:2px solid var(--ok);opacity:0}.ripple.on{animation:rip .6s ease-out}@keyframes rip{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(2.1)}}
@media(max-width:700px){.wrap{padding:18px 12px 52px}h1{font-size:24px}.card{padding:18px;min-height:440px}.question{font-size:16px}.choice{padding:11px 10px}.toolbar select{width:100%}.status>span:last-child{text-align:left}.nav{position:sticky;bottom:0;background:rgba(238,241,246,.94);padding:8px 0}.qmap{grid-template-columns:repeat(10,1fr)}.stamp{width:132px;height:132px;font-size:38px}.ripple{width:132px;height:132px}}
@media(prefers-reduced-motion:reduce){.stamp.on{opacity:1;transform:rotate(-9deg)}}