:root{--navy:#24324a;--muted:#64728a;--paper:#fff;--cream:#fff8e9;--blue:#3c73e8;--blue2:#dce8ff;--orange:#f49a36;--green:#2eaa75;--red:#d94b64;--line:#dfe5ee;--shadow:0 14px 36px rgba(47,61,85,.12);font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif;color:var(--navy)}
*{box-sizing:border-box}html{background:var(--cream)}body{margin:0;min-width:320px;line-height:1.65;background:radial-gradient(circle at 8% 5%,#ffe2a8 0 5%,transparent 5.2%),radial-gradient(circle at 92% 8%,#d5edff 0 6%,transparent 6.2%),var(--cream)}
a{color:inherit}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:99}
.top{max-width:1040px;margin:auto;display:flex;align-items:center;gap:14px;padding:16px 20px}.brand{font-weight:900;font-size:21px;text-decoration:none}.brand b{color:#fff;background:var(--blue);border-radius:999px;padding:3px 9px;font-size:14px}.top nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.top nav a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 11px;text-decoration:none;font-weight:800;font-size:13px}
.shell{max-width:920px;margin:auto;padding:12px 20px 64px}.hero,.panel,.practice{background:var(--paper);border-radius:26px;box-shadow:var(--shadow);border:2px solid #fff}.hero{padding:clamp(28px,6vw,54px);text-align:center;background:linear-gradient(140deg,#fff 0 68%,#e8f0ff 68%)}.hero h1,.title{font-size:clamp(2rem,7vw,3.8rem);line-height:1.15;margin:.15em 0}.hero em{font-style:normal;color:var(--blue)}.lead{max-width:650px;margin:0 auto 22px;color:var(--muted);font-weight:700}.eyebrow{font-size:13px;color:var(--orange);font-weight:900;letter-spacing:.08em}
.primary,.secondary{min-height:48px;border-radius:15px;border:0;padding:12px 20px;font:inherit;font-weight:900;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.primary{color:#fff;background:var(--blue);box-shadow:0 4px 0 #2856bc}.secondary{color:var(--blue);background:#fff;border:2px solid #cbdcff}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.section{margin-top:28px}.section h2{font-size:1.65rem;margin:0 0 12px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;text-decoration:none;min-height:150px;display:flex;flex-direction:column;gap:5px}.card:hover,.card:focus-visible{outline:3px solid #8eb0ff;outline-offset:2px}.card .icon{font-size:36px}.card strong{font-size:1.1rem}.card small{color:var(--muted)}
.panel{padding:24px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{background:#f8faff;border:1px solid var(--line);border-radius:15px;padding:12px;text-align:center}.stat strong,.stat span{display:block}.stat strong{font-size:1.55rem;color:var(--blue)}.stat span{font-size:12px;color:var(--muted)}
.practice{padding:clamp(18px,5vw,34px);text-align:center}.progress{height:12px;border-radius:99px;background:#e6eaf0;overflow:hidden;margin:8px 0 20px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--blue));border-radius:inherit}.question{font-size:clamp(1.55rem,6vw,2.8rem);font-weight:900;line-height:1.3;margin:20px 0}.hint{color:var(--muted);font-weight:700}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px;margin:20px auto}.answer{min-height:62px;border:2px solid #ccd9f3;border-radius:16px;background:#f7f9ff;color:var(--navy);font:inherit;font-size:1.2rem;font-weight:900;cursor:pointer}.answer.correct{background:#dcf5e8;border-color:#61c795;color:#176e49}.answer.wrong{background:#ffe8ed;border-color:#f29bad;color:#ad3049}.feedback{min-height:58px;font-weight:900;font-size:1.05rem}.feedback.good{color:#176e49}.feedback.bad{color:#ad3049}
.clock-wrap{display:grid;place-items:center;margin:16px auto}.clock{position:relative;width:min(72vw,300px);aspect-ratio:1;border:12px solid #315aab;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #dce8ff}.clock .number{position:absolute;left:50%;top:50%;font-weight:900;font-size:18px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-118px) rotate(calc(-1 * var(--a)))}.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:99px}.hour-hand{width:9px;height:72px;background:var(--navy);margin-left:-4.5px;transform:rotate(var(--hour))}.minute-hand{width:6px;height:105px;background:var(--red);margin-left:-3px;transform:rotate(var(--minute));cursor:grab;touch-action:none}.clock .pin{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--orange);left:50%;top:50%;transform:translate(-50%,-50%)}.clock-note{font-size:13px;color:var(--muted)}
.ruler{height:74px;border:3px solid #d4a54a;border-radius:8px;background:repeating-linear-gradient(90deg,#fff4c9 0 9px,#a77825 9px 10px);position:relative;margin:24px auto;max-width:620px}.ruler:after{content:attr(data-label);position:absolute;inset:auto 0 6px;text-align:center;font-weight:900}.cup{width:170px;height:220px;margin:18px auto;border:5px solid #6c93c6;border-top:0;border-radius:0 0 22px 22px;position:relative;overflow:hidden;background:repeating-linear-gradient(to top,transparent 0 42px,#9bb6d8 42px 44px)}.cup .water{position:absolute;inset:auto 0 0;background:#79cdf0;height:var(--fill);transition:height .25s}.cup .label{position:absolute;right:8px;top:4px;font-weight:900;z-index:2}
.fraction-model{display:flex;justify-content:center;gap:4px;margin:20px}.fraction-model i{width:54px;height:70px;border:2px solid var(--blue);background:#fff}.fraction-model i.on{background:#78a4ff}.shape{width:220px;height:150px;margin:20px auto;border:4px solid var(--green);background:repeating-linear-gradient(0deg,transparent 0 28px,#bce7d5 28px 30px),repeating-linear-gradient(90deg,transparent 0 28px,#bce7d5 28px 30px);position:relative}.shape span{position:absolute;font-weight:900}.shape .w{bottom:-34px;left:50%;transform:translateX(-50%)}.shape .h{right:-54px;top:50%;transform:translateY(-50%)}
.story{max-width:650px;margin:18px auto;text-align:left;font-size:1.2rem;background:#fff8dd;padding:18px;border-radius:15px}.story button{border:0;background:transparent;font:inherit;font-weight:900;padding:3px;border-radius:6px;cursor:pointer}.story button.selected{background:#ffd45f;outline:2px solid #b37600}.formula{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:18px}.formula-slot{min-width:70px;min-height:52px;border:2px dashed #91a2bd;border-radius:12px;display:grid;place-items:center;font-weight:900;background:#fff}
.result-list{display:grid;gap:10px}.result-row{display:grid;grid-template-columns:1fr auto;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px}.tag{font-size:12px;background:#fff0d8;color:#8b5719;border-radius:999px;padding:3px 8px;font-weight:900}.notice{background:#e9f7ef;color:#176e49;border-radius:14px;padding:12px;font-weight:800}.empty{color:var(--muted);text-align:center;padding:28px}
footer{text-align:center;padding:28px 16px max(40px,env(safe-area-inset-bottom));color:var(--muted);font-size:13px}
button,input,select{font:inherit}:focus-visible{outline:3px solid #195ecf!important;outline-offset:3px}
@media(max-width:700px){.grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.shell{padding-inline:12px}.top{padding-inline:12px}.top nav a:nth-child(n+3){display:none}.grid,.answers{grid-template-columns:1fr}.clock{width:280px}.clock .number{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-108px) rotate(calc(-1 * var(--a)))}.panel,.practice{padding:16px}.answer{min-height:56px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}