*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui;color:#303746;background:#d5d9dc}button{font:inherit}.app{min-height:100vh;background:radial-gradient(circle at 0 0,transparent 18px,#63708318 19px,transparent 20px),radial-gradient(circle at 30px 0,transparent 18px,#63708318 19px,transparent 20px),linear-gradient(135deg,#e8e1d5,#ccd5de);background-size:60px 30px,60px 30px,100%}.wrap{width:min(960px,calc(100% - 30px));margin:auto}.nav{height:74px;display:flex;align-items:center;justify-content:space-between}.brand{border:0;background:none;font-size:20px;font-weight:900;color:#293044}.brand b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#b6474c;color:#fff;margin-right:9px}.btn{padding:12px 17px;border:0;border-radius:13px;font-weight:800;cursor:pointer}.red{background:#b6474c;color:#fff}.green{background:#4e8069;color:#fff}.sub{background:#f3efe7;color:#374151;border:1px solid #a8b0bb}.hero{text-align:center;padding:48px 0 30px}.hero:before{content:'日本語・学習';padding:7px 13px;border-radius:99px;background:#f1dddd;color:#92383e;font-size:12px;font-weight:900;letter-spacing:2px}.hero h1{font-size:clamp(38px,7vw,60px);line-height:1.08}.muted,.hero p{color:#687386}.cats{display:grid;gap:14px;padding-bottom:55px}.cat,.panel{background:linear-gradient(145deg,#f5f1e9,#e1e5e9);border:1px solid #9fa9b5;box-shadow:0 14px 35px #4b556326;border-radius:20px;overflow:hidden}.head{width:100%;border:0;background:transparent;padding:20px;display:flex;gap:14px;align-items:center;text-align:left;color:#293044;cursor:pointer}.ico{width:50px;height:50px;border-radius:14px;background:#d5dce5;display:grid;place-items:center;font-size:24px}.headCopy{flex:1}.headCopy strong,.headCopy small{display:block}.headCopy small{margin-top:4px;color:#687386}.list{max-height:0;overflow:hidden;transition:.35s}.cat.open .list{max-height:1000px}.chapter{width:100%;padding:16px 22px;border:0;border-top:1px solid #aab3be;background:#e8e4dc;color:#374151;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left}.chapter .arrow{margin-left:auto;color:#a23c43;font-weight:900}.content{max-width:730px;margin:auto;padding:25px 0 55px}.status{display:flex;justify-content:space-between;align-items:end}.timerBox{padding:8px 13px;border-radius:12px;background:#293044;color:#f7d9d5;border:2px solid #596b91;text-align:center}.timerBox small{display:block;font-size:9px;letter-spacing:2px}.timer{font:900 22px "Courier New",monospace}.bar{height:9px;border-radius:9px;background:#aab3be;overflow:hidden;margin-top:12px}.fill{height:100%;background:linear-gradient(90deg,#b6474c,#596b91)}.panel{padding:28px;margin-top:22px}.opts{display:grid;gap:11px;margin-top:20px}.opt{padding:14px;text-align:left;border:2px solid #aab3be;border-radius:14px;background:#faf8f3;color:#303746;cursor:pointer}.opt.sel{border-color:#b6474c;background:#efdad8}.nums{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.num{aspect-ratio:1;border:2px solid #aab3be;border-radius:12px;background:#faf8f3;font-weight:900}.num.done{background:#efdad8;border-color:#b6474c}.actions{display:flex;gap:11px;margin-top:16px}.actions>*{flex:1}.note{padding:12px;margin-top:14px;border-left:4px solid #b6474c;background:#e7e1d7;border-radius:10px}.resultGrid{display:grid;grid-template-columns:210px 1fr;align-items:center;gap:24px}.donut{width:180px;height:180px;position:relative;margin:auto}.donut svg{width:180px;transform:rotate(-90deg)}.donut circle{fill:none;stroke-width:17}.track{stroke:#b8c0ca}.arc{stroke:#b6474c;stroke-linecap:round;stroke-dasharray:502.65;stroke-dashoffset:502.65;animation:draw 1.4s forwards}.pct{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:900}.counters{display:grid;grid-template-columns:1fr 1fr;gap:10px}.counter{padding:14px;border-radius:14px;background:#faf8f3;border:1px solid #aab3be}.counter span,.counter b{display:block}.counter.good,.review.good{background:#dceadf;border-color:#7ea88b}.counter.bad,.review.bad{background:#f0d8d7;border-color:#c88686}.counter.clock{background:#dce2eb}.review{padding:17px;margin-top:11px;border-radius:16px;border:1px solid}.explain{padding:12px;margin-top:12px;border-radius:11px;background:#fff8;border-left:4px solid currentColor}.explain i{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#293044;color:#fff;font-style:normal;font-weight:900;margin-right:7px}.review.good .explain i{background:#2f6f50}.review.bad .explain i{background:#a53f43}.flashStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.mini{text-align:center;padding:12px;border-radius:14px}.mini.bad{background:#f0d8d7}.mini.good{background:#dceadf}.mini b{display:block;font-size:24px}.swipe{height:370px;position:relative;perspective:1200px;touch-action:none}.swipeBg{position:absolute;inset:0;border-radius:23px;display:flex;align-items:center;padding:30px;color:#fff;font-size:27px;font-weight:900;opacity:0}.swipeBg.bad{background:linear-gradient(135deg,#a62f3a,#db706d)}.swipeBg.good{background:linear-gradient(135deg,#3f6b59,#72a17f);justify-content:end}.flashCard{position:absolute;inset:0;border-radius:23px;background:linear-gradient(145deg,#f7f2e9,#dfe4e9);border:1px solid #9fa9b5;box-shadow:0 20px 45px #4c566a3b;transform-style:preserve-3d;transition:.48s;cursor:grab}.face{position:absolute;inset:0;padding:25px;display:grid;place-items:center;text-align:center;backface-visibility:hidden}.face.back{transform:rotateY(180deg)}.flashCard.flipped{transform:rotateY(180deg)}.word{font-size:68px;font-weight:900}.flashCard.flyLeft{transform:translateX(-130%) rotate(-18deg)!important;opacity:0}.flashCard.flyRight{transform:translateX(130%) rotate(18deg)!important;opacity:0}.loading{text-align:center;padding:80px}@keyframes draw{to{stroke-dashoffset:var(--offset)}}@media(max-width:650px){.resultGrid{grid-template-columns:1fr}.actions{flex-direction:column}.panel{padding:20px}}
.reviewNav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.reviewNav .btn{min-width:150px}.btn:disabled{opacity:.4;cursor:not-allowed}.headCopy strong{display:block}.headCopy small{display:none}@media(max-width:650px){.reviewNav{flex-direction:column}.reviewNav .btn{width:100%}}