:root{--ink:#182238;--blue:#4569aa;--muted:#647184;--pale:#f4f7fc;--edge:#dce3ec;--bg:#f9fafc;--white:#fff;--orange:#e57a1f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #7fa2e2;outline-offset:3px}a{color:inherit;text-decoration:none}.site-header{height:66px;border-bottom:1px solid #e3e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1220px)/2));background:#f6f8fb;gap:15px}.wordmark{font-weight:900;letter-spacing:-.065em;font-size:20px;color:#152943;white-space:nowrap}.wordmark span{color:#4d70aa}.wordmark small{font-size:12px;font-weight:500;letter-spacing:normal;color:#4770a1}.header-right{font-weight:750;font-size:10px;letter-spacing:.13em;color:#647c9b}.header-sep{color:#b3bcc9;padding:0 8px}.site-body{max-width:1220px;margin:auto;padding:30px 22px 25px}.breadcrumb,.eyebrow,.kicker,.tiny-title{font-weight:800;letter-spacing:.16em;font-size:11px;color:var(--blue)}.breadcrumb{margin:4px 0 42px;color:#70819c}.breadcrumb span{padding:0 11px;color:#bec8d7}.hidden{display:none!important}h1{font-size:clamp(42px,5vw,71px);letter-spacing:-.075em;line-height:1.04;margin:17px 0 24px;font-weight:860}h2{font-size:clamp(24px,2.2vw,33px);letter-spacing:-.045em;line-height:1.18;margin:15px 0}.period{color:var(--blue)}.lead{font-size:17px;color:#53627c;line-height:1.7;max-width:560px;margin:0 0 25px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}.hero-art,.art-frame{border:1px solid #d9e0ea;box-shadow:0 16px 35px rgba(25,42,70,.05);background:white;border-radius:20px;overflow:hidden}.hero-art img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.meta{display:flex;gap:9px;flex-wrap:wrap;margin:23px 0 31px}.meta span,.tag,.question-tag{display:inline-flex;border-radius:100px;background:#edf2f9;color:#405a81;font-size:11px;font-weight:800;letter-spacing:.035em;padding:8px 12px}.mode-picker{border:0;padding:0;margin:0 0 14px}.mode-picker legend{font-weight:800;font-size:14px;margin-bottom:12px}.mode-card{display:flex;gap:13px;align-items:flex-start;border:1px solid #dce2ec;border-radius:14px;padding:15px 16px;max-width:530px;margin-bottom:9px;background:white;cursor:pointer}.mode-card:has(input:checked){border-color:#7293c3;background:#f0f5fc;box-shadow:inset 0 0 0 1px #7293c3}.mode-card input{margin-top:4px;accent-color:#4569aa}.mode-card strong{font-size:14px;display:block}.mode-card small{display:block;font-size:12px;color:#5c6b81;line-height:1.5;margin-top:4px}.minor-note{font-size:12px;line-height:1.7;color:#718096;max-width:600px}.button{border:1px solid transparent;border-radius:11px;padding:12px 18px;font-weight:780;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px}.button.primary{background:#1c2b43;color:#fff}.button.primary:hover{background:#354b70}.button.secondary{background:#fff;color:#2b4165;border:1px solid #cad6e7}.button.secondary:hover{background:#eef2f8}.button.large{padding:15px 24px;margin-top:9px;font-size:15px;min-height:52px}.button:disabled{opacity:.45;cursor:default}.helper{font-size:12px;line-height:1.55;color:#7a8799}.section-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.section-title{font-size:27px;margin:7px 0}.text-button{border:0;background:transparent;color:#4d678b;font-size:13px;font-weight:760;padding:10px}.text-button:hover{text-decoration:underline}.question-tag{white-space:nowrap}.progress{display:flex;gap:6px;max-width:100%;margin:14px 0 19px}.progress span{flex:1;background:#e4e9f1;border-radius:99px;height:5px}.progress span.done{background:#8aa6cf}.progress span.active{background:#365c98}.practice-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(370px,.98fr);gap:23px;align-items:stretch}.art-frame img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain}.art-caption{padding:8px 14px;text-align:center;font-size:11px;color:#8190a4;border-top:1px solid #e5e8ec}.action-panel{border:1px solid #dce3ee;border-radius:20px;background:#fff;padding:clamp(25px,3vw,45px);display:flex;flex-direction:column;min-height:460px;justify-content:center}.action-panel>.tag{align-self:flex-start}.action-panel h2{font-size:clamp(26px,3.1vw,40px);letter-spacing:-.06em}.explain{color:#5f6d81;line-height:1.72;max-width:380px;min-height:66px;margin:7px 0 13px}.timer-zone{margin:18px 0 5px;padding:20px 0 10px;border-top:1px solid #e6ebf3;border-bottom:1px solid #e6ebf3}.clock{font-size:clamp(52px,7vw,76px);font-weight:770;letter-spacing:-.065em;font-variant-numeric:tabular-nums;line-height:1.2;margin:5px 0}.clock.warn{color:#c85b32}.sound-indicator{display:flex;align-items:center;gap:5px;height:32px;margin-top:10px}.sound-indicator span{width:5px;height:9px;background:#a3b0c2;border-radius:4px}.sound-indicator span:nth-child(2){height:20px}.sound-indicator span:nth-child(3){height:28px}.sound-indicator span:nth-child(4){height:16px}.sound-indicator span:nth-child(5){height:11px}.sound-indicator.playing span{background:#557dbd;animation:beat .75s ease-in-out infinite alternate}.sound-indicator.playing span:nth-child(2){animation-delay:.12s}.sound-indicator.playing span:nth-child(3){animation-delay:.29s}.sound-indicator.playing span:nth-child(4){animation-delay:.18s}.sound-indicator.recording span{background:#d06a44;animation:beat .6s ease-in-out infinite alternate}.sound-indicator.recording span:nth-child(2){animation-delay:.15s}.sound-indicator.recording span:nth-child(3){animation-delay:.08s}@keyframes beat{to{transform:scaleY(.4)}}.status{font-size:14px;font-weight:700;color:#4b5e7c;min-height:22px;margin:5px 0 20px}.actions{display:flex;flex-wrap:wrap;gap:9px}.mic-banner{padding:10px 12px;border:1px solid #e9d6b0;background:#fff9ec;border-radius:10px;font-size:12px;line-height:1.6;color:#79613b;margin-top:15px}.below-panel{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:0 5px;color:#8d9aab;font-size:10px;font-weight:700;letter-spacing:.1em}.review-list{display:grid;gap:13px;margin:30px 0}.review-card{border:1px solid var(--edge);background:white;border-radius:16px;padding:21px 24px}.review-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.review-card-head strong{font-size:16px}.review-text{font-size:16px;line-height:1.58;letter-spacing:-.005em}.review-tracks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.track-label{display:block;font-size:11px;color:#61728a;font-weight:800;margin-bottom:5px}audio{width:100%;max-width:100%;height:43px}.download{display:inline-block;font-size:12px;color:#3e649d;font-weight:800;margin-top:6px}.download:hover{text-decoration:underline}.no-record{padding:11px 0;font-size:12px;color:#8a98aa}.review-actions{display:flex;gap:10px;flex-wrap:wrap}footer{border-top:1px solid #e4eaf2;margin:70px 0 0;padding-top:20px;font-size:11px;color:#8a98ad}#intro .art-frame{align-self:start}
@media(max-width:850px){.hero-grid,.practice-grid{grid-template-columns:1fr;gap:21px}.hero-art{max-width:540px;grid-row:1}.hero-grid>div:first-child{grid-row:2}.art-frame{max-width:630px;width:100%;margin:0 auto}.action-panel{min-height:0}.site-body{padding:20px 16px}.breadcrumb{margin:5px 0 20px}.site-header{padding:0 16px}.header-right{display:none}}
@media(max-width:520px){.hero-art{max-width:100%}h1{font-size:44px}.site-header{height:58px}.review-tracks{grid-template-columns:1fr}.section-header{align-items:flex-start}.action-panel{padding:25px}.button{width:100%}.actions{flex-direction:column}.clock{font-size:64px}.mode-card{padding:13px}.lead{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sound-indicator.playing span,.sound-indicator.recording span{animation:none}}