.ch4-nav{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:8px 0 24px;padding:10px;background:#e5f4ff;border:1px solid #c6e2f4;border-radius:16px;scroll-margin-top:16px}
.ch4-nav-label{font-size:.78rem;font-weight:900;color:#195e82;margin-right:6px;letter-spacing:.08em}
.ch4-nav button{background:#d4ecfa;color:#124769;padding:10px 13px;min-width:57px}
.ch4-nav button.active{background:#087ca8;color:#fff}
.ch4-intro{padding:21px;border-radius:18px;background:linear-gradient(120deg,#d9f5fa,#fff1cf);border:1px solid #bedfe4;margin:0 0 18px}
.ch4-intro h2{margin:6px 0}.ch4-intro p{margin:8px 0}.ch4-source{font-size:.86rem;color:#36596a}
.ch4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:start}
.ch4-card{background:#fff;border:1px solid #d8e7ef;border-radius:18px;padding:18px;box-shadow:0 6px 18px #19405c13;min-width:0}
.ch4-card h3{min-height:50px;font-size:1.12rem;line-height:1.45;margin:11px 0}.ch4-kicker{color:#317195;font-size:.78rem;font-weight:900;letter-spacing:.04em}
.ch4-art{background:#edf9f7;padding:11px;border-radius:14px;margin:12px 0;overflow:hidden}
.ch4-svg{display:block;width:100%;height:160px}.ch4-stage{font-weight:900;color:#296c78;font-size:.78rem}
.ch4-eq{background:#fff1cf;border-radius:10px;padding:10px;margin-top:7px;font-size:1.06rem;font-weight:800;min-height:42px;overflow-wrap:anywhere}
.ch4-frac{display:inline-flex;vertical-align:middle;flex-direction:column;text-align:center;line-height:1.05;margin:0 .12em}
.ch4-frac>span:first-child{border-bottom:2px solid;padding:0 3px}.ch4-frac>span:last-child{padding:0 3px}
.ch4-ledger{background:#f1edff;border-radius:10px;padding:9px;margin:8px 0;font-size:.86rem;max-height:155px;overflow:auto}.ch4-ledger>div{padding:2px}
.ch4-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:9px 0}
.ch4-answers button{margin:0;min-height:46px;background:#e9e6ff;color:#322d7b;text-align:center;overflow-wrap:anywhere}
.ch4-answers button:hover,.ch4-answers button:focus-visible{background:#d2caff;outline:3px solid #e9ae3f;outline-offset:1px}
.ch4-explain{background:#e2f5e9;padding:12px;border-radius:10px;line-height:1.5}.ch4-try{background:#fff0d2;color:#603c19;padding:9px;border-radius:8px}
.ch4-quiz{margin:30px 0;padding:22px;border:1px solid #ded3f6;border-radius:18px;background:linear-gradient(160deg,#fff,#faf8ff)}
.ch4-quiz h2{margin:0}.ch4-quiz>p{max-width:72ch}
.ch4-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:16px 0}
.ch4-levels button{background:#5252b8;min-height:80px}.ch4-levels button:disabled{background:#dfe2ee;color:#61677d;opacity:1}
.ch4-levels button span{display:block;font-size:1.5rem}.ch4-levels small{display:block;font-size:.73rem}
.ch4-play{scroll-margin-top:10px}.ch4-clockrow{display:flex;gap:14px;align-items:center;margin:10px 0 16px}
.ch4-clock{width:64px;height:64px;border:4px solid #6054ad;border-radius:50%;background:#fff;position:relative;flex:none}
.ch4-clock:after{content:'';width:7px;height:7px;position:absolute;top:calc(50% - 3px);left:calc(50% - 3px);border-radius:50%;background:#6054ad}
.ch4-hand{position:absolute;bottom:50%;left:calc(50% - 1px);width:2px;height:24px;background:#e87836;transform-origin:bottom}.ch4-hand.hour{height:17px;width:3px;background:#6054ad}
.ch4-progress{height:11px;background:#e8e5f6;border-radius:12px;overflow:hidden;margin:12px 0}.ch4-progress span{display:block;height:100%;background:linear-gradient(90deg,#6a62d8,#2ab99a);transition:width .2s}
.ch4-play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;align-items:start}.ch4-play-grid .ch4-art{margin:0}
.ch4-hint{color:#315e69;font-size:.85rem}
.ch4-dock{position:sticky;bottom:0;z-index:4;border:1px solid #d7ceee;border-radius:12px;background:#fff;padding:10px;box-shadow:0 -9px 19px #ffffffec}
.ch4-dock .ch4-answers{max-width:700px}.ch4-result{background:#e9f8ef;border-radius:12px;padding:18px}.ch4-result li{margin:6px 0}
@media(max-width:780px){.ch4-levels{grid-template-columns:repeat(3,minmax(0,1fr))}.ch4-play-grid{grid-template-columns:1fr}.ch4-quiz{padding:14px}.ch4-svg{height:140px}.ch4-dock{bottom:0}}
@media(max-width:420px){.ch4-levels{grid-template-columns:repeat(2,minmax(0,1fr))}.ch4-answers button{padding:9px 5px;font-size:.92rem}.ch4-nav button{min-width:50px}}