@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600&display=swap');
:root{--green:#21483e;--ink:#253e35;--muted:#7b847d;--line:#e1e4da;--paper:#fafaf5;--accent:#c6a56e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bc9858;outline-offset:4px}button:disabled{opacity:.4;cursor:default}button{border:0}a{color:inherit}.masthead{height:88px;max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 36px}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;font-size:25px;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:2.1px;margin-top:3px}.brand-mark{border:1px solid #83978c;border-radius:50%;height:42px;width:42px;display:grid;place-items:center;font-family:'Noto Serif SC',serif;font-size:26px;letter-spacing:0}.quiet{background:transparent;color:var(--green);padding:10px;font-size:12px}.player-shell{position:sticky;top:0;background:var(--green);color:#f6f6e9;z-index:10;box-shadow:0 4px 16px #243e3512}.player{max-width:1128px;margin:auto;padding:16px 0 19px}.now{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.4px;margin-bottom:10px}.live-dot{height:6px;width:6px;background:#d6c391;border-radius:50%}.sample{color:#c7d4c5;margin-left:auto;font-size:10px;border:1px solid #577266;padding:3px 8px;border-radius:3px}.controls{display:flex;align-items:center;gap:16px}.play{width:42px;height:42px;border-radius:50%;background:#eef0db;color:var(--green);font-size:17px;flex:none}.icon{position:relative;color:#e2e9d8;background:none;font-size:30px;width:32px}.icon small{position:absolute;font-size:8px;top:15px;left:11px}.time{font-size:11px;color:#c5d0c6;font-variant-numeric:tabular-nums}#seek{flex:1;min-width:20px;accent-color:#d5c593;cursor:pointer;height:5px}select{background:#34574a;border:1px solid #577367;border-radius:5px;color:#eeeede;padding:7px;font-size:11px}.loop{background:none;color:#ced9ca;border-left:1px solid #567063;padding:8px 0 8px 18px;font-size:12px;white-space:nowrap}.loop[aria-pressed=true]{color:#ffe4a6}main{max-width:1128px;margin:auto}.intro{padding:49px 0 42px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#849084;margin:0 0 15px}h1{font-weight:500;font-size:33px;letter-spacing:1px;margin:0 0 13px}.subtitle{font-size:12px;color:var(--muted);margin:0}.intro-stamp{display:flex;flex-direction:column;align-items:center;margin-right:20px;transform:rotate(-6deg);color:#a3ae9e}.intro-stamp span{font-family:'Noto Serif SC',serif;font-size:38px;border:1px solid #c2cab9;padding:8px 15px;border-radius:6px;letter-spacing:8px}.intro-stamp small{font-size:9px;letter-spacing:1px;margin-top:10px}.workspace{display:grid;grid-template-columns:245px 1fr;gap:45px}aside{padding-right:27px;border-right:1px solid var(--line)}.pill{font-size:10px;background:#e9eedf;color:#58704e;padding:4px 9px;border-radius:3px}h2{font-size:19px;font-weight:500;letter-spacing:.5px}.lesson-info p{font-size:10px;color:var(--muted);line-height:1.8}.progress-head{display:flex;justify-content:space-between;font-size:10px;margin-top:30px;color:var(--muted)}.progress-track{height:4px;background:#e4e7dc;margin:10px 0 24px;border-radius:4px;overflow:hidden}.progress-track div{height:100%;background:#789070;transition:width .3s}nav{display:grid;gap:6px}nav button{display:flex;align-items:center;width:100%;padding:13px 10px;border-radius:5px;background:transparent;color:#81887d;gap:13px;text-align:left;font-size:12px}nav button.active{background:#e9eedf;color:var(--green)}nav .number{font-size:11px;font-variant-numeric:tabular-nums}nav .nav-state{margin-left:auto;font-size:12px}.legend{display:flex;justify-content:space-between;color:#879080;font-size:9px;margin:16px 8px}.reset{background:none;color:#858b81;text-decoration:underline;text-underline-offset:3px;font-size:10px;padding:10px 8px}.note{border-top:1px solid var(--line);margin-top:38px;padding-top:22px}.note span{font-family:serif;font-size:13px}.note p{color:#8b9488;font-size:10px;line-height:2}.question-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.question-top>span{font-size:10px;letter-spacing:1.8px;color:#8c9587}.jump{font-size:11px;background:#eff1e6;border:1px solid #dce2d1;color:var(--green);padding:9px 13px;border-radius:5px}.question-tag{font-size:10px;color:#929983;margin-bottom:7px}.prompt{font-family:'Noto Serif SC',serif;font-size:25px;font-weight:500;line-height:1.7;margin:0 0 8px}.instruction{font-size:10px;color:#8b9185;margin:0 0 25px}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option{border:1px solid #dfe3d7;border-radius:7px;display:flex;align-items:center;gap:14px;background:#fffefa;padding:17px 18px;color:var(--ink);text-align:left;min-height:65px;font-family:'Noto Serif SC',serif;font-size:17px;transition:.15s}.option:hover{border-color:#7c9984;background:#f0f4e9}.letter{font-family:sans-serif;font-size:11px;border:1px solid #dde2d5;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#88927e;flex:none}.option.correct{background:#ecf2e6;border-color:#8aa17c}.option.correct .letter{background:#607f51;color:white;border-color:#607f51}.option.wrong{background:#fbefeb;border-color:#d5aaa0}.option.wrong .letter{background:#bc8072;color:white;border-color:#bc8072}.option:disabled{opacity:1;cursor:default}.answer-feedback{padding:14px 16px;border-radius:5px;background:#edf2e7;margin-top:15px;display:flex;gap:12px;align-items:center;font-size:12px}.answer-feedback.incorrect{background:#f6ece5}.answer-feedback small{color:#7d8575}.question-footer{display:flex;align-items:center;justify-content:space-between;padding:20px 0 29px}.next{background:var(--green);color:#f4f3e5;border-radius:5px;padding:12px 20px;font-size:12px}#answeredStatus{font-size:10px;color:#8b9283}.review{border:1px solid var(--line);background:#f5f6ee;border-radius:8px;overflow:hidden}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 23px;gap:26px}.tabs button{padding:17px 0 13px;color:#929889;background:none;font-size:12px;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{color:var(--green);border-bottom-color:var(--green)}#reviewBody{padding:25px 26px;min-height:180px}.script-line{font-family:'Noto Serif SC',serif;font-size:17px;line-height:2.1;margin:0;white-space:pre-line}.translation{border-top:1px solid #e0e4d6;margin-top:18px;padding-top:15px;font-size:11px;color:#7d8676;line-height:2;white-space:pre-line}.translation-toggle{display:block;background:none;color:#6b7c5e;font-size:11px;padding:14px 0 0}.vocab{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.vocab span{border:1px solid #dce3d1;border-radius:4px;font-size:10px;padding:5px 8px;color:#6e7e60}.explanation{font-size:13px;line-height:2.1;margin:10px 0}.answer-title{font-size:14px;margin:0;color:#536e42}.timing{border-top:1px solid #e0e4d6;margin-top:22px;padding-top:14px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:#8a9380;font-size:10px}.timing button{background:none;color:#647956;text-decoration:underline;font-size:10px}.save-note{text-align:center;font-size:10px;color:#9a9f90;margin:22px 0 0}footer{display:flex;justify-content:space-between;font-size:10px;color:#9ca28f;border-top:1px solid var(--line);margin-top:50px;padding:24px 0 32px}.footer-dot{margin:0 9px}.mobile{display:none}dialog{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:28px;max-width:540px;width:calc(100% - 28px);color:var(--ink)}dialog::backdrop{background:#18392c80;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0}dialog p{font-size:12px;line-height:1.9;color:var(--muted)}.file-label{display:block;border:1px solid var(--line);padding:15px;margin:15px 0;border-radius:7px;font-size:12px}.file-label input{display:block;width:100%;font-size:11px;margin-top:10px}.template-link{display:block;font-size:11px;margin:20px 0}.fine-print{font-size:10px;line-height:1.9;color:#959989}.error{color:#a65745}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:7px;padding:12px 20px;z-index:50;font-size:12px;display:none;max-width:90vw} @media(max-width:1200px){main,.player{margin-left:36px;margin-right:36px}}@media(max-width:760px){.masthead{height:73px;padding:0 20px}.brand{font-size:21px}.brand small{font-size:7px}.brand-mark{height:35px;width:35px;font-size:22px}.masthead .quiet{font-size:10px}main,.player{margin-left:20px;margin-right:20px}.player{padding:12px 0 15px}.controls{gap:10px}.loop{padding-left:10px;font-size:18px}.loop span{display:none}.time{font-size:9px}.icon{display:none}.play{width:36px;height:36px}.intro{padding:32px 0}.intro h1{font-size:26px}.intro-stamp{display:none}.eyebrow{font-size:8px}.subtitle{font-size:10px;line-height:1.9}.workspace{display:block}aside{border-right:0;padding:0}.lesson-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lesson-info h2{font-size:15px;margin:0}.lesson-info p{width:100%;margin:3px 0 8px}.progress-head{margin-top:12px}.progress-track{margin-bottom:16px}nav{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:150px;overflow:auto}nav button{justify-content:center;padding:11px 2px;gap:5px}nav .nav-label{display:none}nav .nav-state{margin-left:0;font-size:10px}.legend,.reset,.note{display:none}.question-area{margin-top:28px}.question-top{margin-bottom:18px}.prompt{font-size:22px}.options{grid-template-columns:1fr}.option{min-height:58px;padding:13px 16px;font-size:17px}.instruction{margin-bottom:18px}.question-footer{padding-bottom:22px}#reviewBody{padding:20px}.script-line{font-size:16px}footer{gap:15px;flex-direction:column;margin-top:30px}.sample{font-size:9px}.now{font-size:10px}.answer-feedback{align-items:flex-start;flex-direction:column;gap:4px}.next{padding:11px 15px}}
@media(max-width:760px){.reset{display:block;margin:8px 0 0 auto;padding:4px;font-size:9px}}
.header-actions{display:flex;gap:8px}.header-actions button{min-height:44px}.intro{padding:32px 0}.intro h1{font-size:28px}.set-picker{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:9px;background:#eef1e6;padding:14px 20px;text-align:left;color:var(--green);min-height:58px}.set-picker span{font-size:14px;font-weight:600}.set-picker small{font-size:10px;color:#829176}.lesson-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:24px 0}.lesson-heading h2{display:inline;margin-left:10px;font-family:'Noto Serif SC',serif;font-size:23px}.lesson-heading p{font-size:11px;color:var(--muted);margin:10px 0 0}.lesson-progress{width:155px;text-align:right;font-size:11px;color:var(--muted)}.lesson-progress .progress-track{margin:10px 0 0}.part-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:#e9eddf;border-radius:9px;margin:0 0 28px}.part-nav button{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:65px;background:transparent;color:#86917c;border-radius:6px;justify-content:center;padding:9px 4px}.part-nav button.active{background:var(--paper);box-shadow:0 2px 5px #1e462610;color:var(--green)}.part-nav strong{font-size:13px;font-weight:600}.part-nav small{font-size:10px}.workspace{grid-template-columns:180px 1fr;gap:32px}aside{padding-right:23px}aside .eyebrow{font-size:10px;letter-spacing:1px}.note{font-size:11px;color:#8c957d;line-height:2.2}.option-text{display:flex;align-items:center;gap:14px}.image-options{grid-template-columns:repeat(3,1fr)}.image-options .option{display:flex;flex-direction:column;align-items:stretch;padding:12px;gap:10px}.image-options img{width:100%;aspect-ratio:1.5;object-fit:contain;border-radius:4px;background:#e5e5e1}.image-options .option-text{justify-content:space-between}.image-prompt{font-family:inherit;font-size:19px}.truefalse-options .option{justify-content:center;min-height:78px;font-family:inherit;font-size:16px}.truefalse-options .letter{font-size:18px;width:34px;height:34px}.review-open{background:transparent;color:#6e7b60;width:100%;display:flex;justify-content:space-between;min-height:46px;align-items:center;text-align:left;font-size:12px}.study-actions{display:flex;align-items:center;justify-content:space-between;padding-top:16px}.study-actions button{min-height:44px}.save-note{margin-top:5px}.tabs button{min-height:49px}.jump{min-height:44px}.next{min-height:48px}.quiet{min-height:44px}.sets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.set-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:15px;border:1px solid var(--line);border-radius:7px;background:#fffef9;color:var(--ink);text-align:left;min-height:106px}.set-card.active{border-color:#829672;background:#eef2e5}.set-card:disabled{opacity:.55}.set-card strong{font-size:13px}.set-card span{font-family:'Noto Serif SC',serif;font-size:13px}.set-card small{font-size:10px;color:#88917c}dialog{max-height:85dvh;overflow:auto}.stats-dialog{max-width:760px}.stats-filters{display:flex;gap:12px;margin:24px 0}.stats-filters label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);flex:1}.stats-filters select{background:#eff2e6;color:var(--green);min-height:44px;border-color:var(--line);font-size:12px}.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat-cards>div{background:#edf1e4;border:1px solid #dfe6d3;border-radius:7px;padding:16px 12px}.stat-cards small{display:block;color:#8a947c;font-size:9px;margin-bottom:12px}.stat-cards strong{font-size:23px;font-weight:500;white-space:nowrap}.stat-cards em{font-style:normal;font-size:11px;margin-left:5px}.stats-section-title{font-size:14px;font-weight:500;margin:26px 0 15px}.part-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.part-stats article{padding:16px;background:#fffef9;border:1px solid var(--line);border-radius:7px}.part-stat-head{display:flex;justify-content:space-between;font-size:12px}.part-stat-head strong{font-weight:500}.part-stat-head span{color:#8b947c;font-size:11px}.stat-meter{height:4px;background:#e6eadc;margin:14px 0 18px;border-radius:5px;overflow:hidden}.stat-meter div{height:100%;background:#7e9870}.part-stats dl{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:0}.part-stats dt{font-size:9px;color:#89917e}.part-stats dd{font-size:14px;margin:5px 0 0}.history>div{display:grid;grid-template-columns:100px 1fr;gap:7px;padding:12px 0;border-bottom:1px solid var(--line);font-size:10px}.history>div>span{color:#88907e}.history strong{font-weight:500}.history small{grid-column:2;color:#7a866b;font-size:10px}.history p{font-size:12px}.stats-export{display:flex;gap:8px;margin-top:25px}body:has(dialog[open]) .question-footer{visibility:hidden}
@media(max-width:760px){.masthead{height:70px;padding:0 16px}.brand small{font-size:6px;letter-spacing:1.4px}.brand{gap:9px}.header-actions{gap:0}.header-actions button{padding:9px 7px;min-width:44px;font-size:11px}main,.player{margin-left:16px;margin-right:16px}.player-shell{height:96px}.player{padding-top:12px}.now{margin-bottom:8px}.controls{gap:9px}.loop{font-size:21px;padding:4px 0 4px 9px;min-width:34px;min-height:40px}.play{min-height:40px;min-width:40px}.time{font-size:10px}#seek{height:30px;background:transparent}select{min-height:40px;font-size:11px}.intro{padding:20px 0;gap:12px}.intro h1{font-size:16px;letter-spacing:0}.intro .eyebrow{font-size:7px;letter-spacing:1.1px;margin-bottom:8px}.intro .subtitle{display:none}.set-picker{padding:10px 12px;min-height:50px;flex:none}.set-picker span{font-size:11px}.set-picker small{font-size:9px}.lesson-heading{padding:19px 0;align-items:start;gap:10px}.lesson-heading h2{display:block;margin:10px 0 0;font-size:20px}.lesson-heading p{font-size:9px;line-height:1.7}.lesson-progress{width:80px;flex:none;font-size:10px;padding-top:6px}.part-nav{position:sticky;top:96px;z-index:8;border-radius:7px;margin-bottom:16px;gap:2px;padding:4px;box-shadow:0 0 0 8px var(--paper)}.part-nav button{min-height:58px;gap:5px}.part-nav strong{font-size:12px}.part-nav small{font-size:8px}.workspace{display:block}aside .eyebrow,.legend,.note{display:none}aside{padding:0}#questionNav{grid-template-columns:repeat(5,1fr);overflow:visible;max-height:none;gap:7px;margin:5px 0 20px}#questionNav button{min-height:45px;border:1px solid var(--line);background:#f4f5ed;padding:9px 3px}.nav-state{font-size:9px}.question-area{margin-top:0}.question-top{margin-bottom:18px;gap:5px}.question-top>span{font-size:9px;letter-spacing:0}.jump{padding:8px 10px;font-size:10px;flex:none;min-height:44px}.prompt{font-size:22px;line-height:1.65}.image-prompt{font-size:15px;font-family:inherit}.options{grid-template-columns:1fr;gap:10px}.option{min-height:64px;padding:17px;font-size:19px}.image-options{grid-template-columns:1fr 1fr;gap:10px}.image-options .option{padding:10px}.image-options img{aspect-ratio:1.5}.image-options .letter{width:28px;height:28px}.truefalse-options{grid-template-columns:1fr 1fr}.truefalse-options .option{padding:12px 8px;font-size:12px;min-height:76px}.truefalse-options .option-text{gap:8px}.question-footer{position:fixed;bottom:0;left:0;width:100%;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fafaf5f7;backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:12}.question-footer .quiet,.question-footer .next{min-width:100px;min-height:46px}.question-footer .quiet{background:#edf1e5;border-radius:5px;font-size:12px}#answeredStatus{font-size:11px}.review{margin-top:24px}.tabs{padding:0 18px;gap:24px}#reviewBody{padding:16px 18px}.script-line{font-size:17px;line-height:2.1}.translation-toggle{min-height:44px}.translation{font-size:12px}.explanation{font-size:13px}.study-actions{gap:12px}.study-actions .quiet{font-size:11px}.study-actions .reset{display:block;margin:0;padding:4px;font-size:9px}.save-note{font-size:9px;line-height:1.8}footer{margin-top:30px;padding-bottom:calc(104px + env(safe-area-inset-bottom));gap:10px;font-size:9px}dialog{padding:22px 18px;max-height:88dvh}.dialog-head h2{font-size:18px}.stat-cards{grid-template-columns:1fr 1fr;gap:8px}.stat-cards>div{padding:16px}.stat-cards strong{font-size:26px}.part-stats{grid-template-columns:1fr}.stats-export .next{font-size:11px}.sets-grid{gap:8px}.set-card{padding:12px}.stats-filters{margin:15px 0}.history>div{grid-template-columns:88px 1fr}.dialog-head .quiet{min-width:44px}}
[hidden]{display:none!important}.login-gate{padding:80px 20px;text-align:center}.login-gate .brand-mark{margin:auto}.login-gate h1{font-size:24px;margin-top:24px}.login-gate p{line-height:2;color:var(--muted);margin-bottom:25px}.login-label{display:flex;flex-direction:column;gap:10px;font-size:12px;margin:20px 0}.login-label input{border:1px solid var(--line);border-radius:6px;padding:14px;background:white;min-height:48px;font-size:16px}.login-label input:focus{outline:2px solid #94a57a}#loginMessage{min-height:30px}#signedInBody .next{display:block;margin-top:20px}
.question-area{scroll-margin-top:130px}@media(max-width:760px){.question-area{scroll-margin-top:180px}}
.full-track{background:transparent;cursor:pointer;min-height:28px;white-space:nowrap;color:#eef0db}.now #audioBadge{margin-left:0}.now #nowLabel{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now .sample{margin-left:0}@media(max-width:760px){#audioBadge{display:none}.full-track{font-size:9px;min-height:28px}}
@media(max-width:760px){.player-shell{height:108px}.part-nav{top:108px}.question-area{scroll-margin-top:192px}}
.settings-page{max-width:560px}.settings-page .eyebrow{margin:0 0 8px;font-size:9px}.settings-section{padding:20px 0;border-bottom:1px solid var(--line)}.settings-section h3{font-size:13px;font-weight:600;margin:0 0 16px}.settings-section .login-label{margin:15px 0}.settings-section input[readonly]{background:#eef0e7;color:#86907c;cursor:default}.setting-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;min-height:70px;cursor:pointer}.setting-switch strong{font-size:13px;font-weight:500;display:block}.setting-switch small{font-size:10px;color:#8b9480;display:block;margin-top:6px;line-height:1.7}.setting-switch input{appearance:none;width:47px;height:28px;background:#d4dbca;border-radius:20px;position:relative;flex:none;cursor:pointer;transition:background .15s}.setting-switch input:before{content:'';width:22px;height:22px;background:white;border-radius:50%;position:absolute;left:3px;top:3px;box-shadow:0 1px 3px #0002;transition:transform .15s}.setting-switch input:checked{background:#547549}.setting-switch input:checked:before{transform:translateX(19px)}.sound-test{background:#edf1e5;border:1px solid #dce4d2;color:var(--green);border-radius:5px;padding:10px 14px;min-height:44px;font-size:11px;margin-top:8px}.settings-message{font-size:11px;line-height:1.8;min-height:22px;color:#658056}.settings-save{width:100%;font-size:13px}.settings-account{border:0;padding-bottom:0}.logout-button{border:1px solid #dab8ad;background:#fff9f6;color:#a36050;border-radius:5px;padding:12px 20px;min-height:46px;font-size:12px}@keyframes result-appear{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.result-symbol{animation:none}.setting-switch input,.setting-switch input:before{transition:none}}@media(max-width:760px){.header-actions button{font-size:10px;padding:8px 6px}.brand small{letter-spacing:1px}.settings-page{width:100%;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}.settings-page .dialog-head{position:sticky;top:-24px;background:var(--paper);z-index:1;padding:12px 0}.result-symbol{font-size:175px}}

/* Nonblocking grading mark: leave the question and player visible and usable. */
.result-mark{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;pointer-events:none;color:#397545}
.result-symbol{display:block;font-family:Arial,sans-serif;font-size:190px;font-weight:700;line-height:1;text-align:center;text-shadow:0 0 5px #fff,0 0 15px #ffffffdf,0 5px 18px #143e3026;animation:result-appear .14s ease-out}
.result-mark.result-wrong{color:#bd6351}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.result-symbol{animation:none}}
@media(max-width:760px){.result-symbol{font-size:175px}}

.result-mark{display:flex;flex-direction:column;align-items:center;gap:12px}.result-symbol{animation:none;font-size:210px;font-weight:400}.result-streak{font-family:'Noto Sans JP',sans-serif;font-size:22px;font-weight:700;white-space:nowrap;text-shadow:0 0 3px white,0 0 10px white,0 2px 5px white}
@media(max-width:760px){.result-symbol{font-size:200px}.result-streak{font-size:21px}}
/* Keep question numbers and answer status available while reading below. */
@media(min-width:761px){.workspace>aside{position:sticky;top:132px;align-self:start;max-height:calc(100dvh - 148px);overflow:auto}}
@media(max-width:760px){.workspace>aside{display:contents}#questionNav{position:sticky;top:182px;z-index:9;background:var(--paper);padding:8px 0;box-shadow:0 0 0 8px var(--paper);margin:0 0 20px}.question-area{scroll-margin-top:252px}}

#questionNav .nav-correct .nav-state{color:#427549;font-weight:700}#questionNav .nav-wrong .nav-state{color:#b9624e;font-weight:700}#questionNav .nav-unanswered .nav-state{color:#879080}
#questionNav .nav-correct:not(.active){background:#f0f4e9;border-color:#d2dfc9}#questionNav .nav-wrong:not(.active){background:#fbf0eb;border-color:#e7d1c8}#questionNav .nav-wrong.active{background:#f4e7df;border-color:#cfa898}#questionNav .nav-state{font-size:13px}.legend{gap:8px;font-size:9px}

.history-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}.history-pagination button{min-height:44px;padding:10px 14px;border-radius:5px;background:#edf1e5;color:var(--green);font-size:11px;flex:none}.history-pagination span{font-size:10px;line-height:1.8;text-align:center;color:#859078}#historyHeading{scroll-margin-top:18px}@media(max-width:760px){.history-pagination{gap:6px}.history-pagination button{padding:10px;font-size:10px}.history-pagination span{font-size:9px}}

.retry-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin:14px 0 0;padding:14px 20px;border:1px solid #b3c2a6;border-radius:8px;background:#f0f4e9;color:var(--green);font-size:13px;font-weight:600;cursor:pointer}.retry-button>span{font-size:23px;line-height:1}.retry-button.retry-wrong{background:#b8624e;color:#fffaf7;border-color:#b8624e;box-shadow:0 3px 8px #a4513520}.retry-button:hover{filter:brightness(.96)}.study-actions{justify-content:flex-end}@media(max-width:760px){.retry-button{min-height:56px;font-size:14px;margin-top:12px}}
/* Compact the sticky stack while preserving text sizes and 45px question targets. */
@media(min-width:761px){.player{padding-top:12px;padding-bottom:16px}.now{margin-bottom:8px}.workspace>aside{top:118px}}
@media(max-width:760px){.player-shell{height:94px}.player{padding:10px 0}.now{margin-bottom:5px}.full-track{min-height:24px}.part-nav{top:94px;height:56px}.part-nav button{min-height:48px;gap:4px}#questionNav{top:158px;padding:4px 0}.question-area{scroll-margin-top:220px}}
.history-pagination button{width:auto;justify-content:center}

.stat-note{display:block;margin-top:9px;font-size:9px;line-height:1.7;color:#839076}.stat-cards .stat-up{color:#4e7845}.stat-cards .stat-down{color:#b8624e}.stat-cards small{line-height:1.7}
.celebration-screen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:28px;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 20%,#587156 0%,#244c3d 45%,#16372d 100%);color:#fff6df;overflow:auto}.celebration-screen::backdrop{background:#16372d}.celebration-content{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:650px;margin:auto;padding:22px 0}.celebration-eyebrow{font-size:11px;letter-spacing:3px;color:#e0ca90;margin:0 0 22px}.celebration-trophy{font-size:92px;line-height:1.2;filter:drop-shadow(0 8px 24px #f2c45c40);margin-bottom:24px;animation:trophy-arrive .6s ease-out}.celebration-content h2{font-size:36px;line-height:1.6;font-weight:600;margin:0 0 10px;letter-spacing:1px}.celebration-content #celebrationLesson{font-family:'Noto Serif SC',serif;font-size:19px;color:#d2dfcc;margin:0 0 28px}.celebration-score{border-top:1px solid #a9b89355;border-bottom:1px solid #a9b89355;padding:20px 40px;display:flex;flex-direction:column;gap:9px}.celebration-score strong{font-size:48px;font-weight:500;letter-spacing:4px;color:#f4d480}.celebration-score span{font-size:9px;letter-spacing:3px;color:#d8c996}.celebration-content #celebrationMessage{font-size:13px;line-height:2;color:#dbe4d0;margin:26px 0}.celebration-continue{min-height:50px;padding:15px 30px;background:#f3d68a;color:#234739;border-radius:30px;font-weight:600;font-size:13px;box-shadow:0 4px 20px #091e2230}.celebration-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.celebration-confetti i{position:absolute;left:var(--x);top:-30px;width:9px;height:17px;background:var(--color);border-radius:2px;opacity:.85;animation:confetti-fall var(--duration) var(--delay) linear infinite}.celebration-confetti i:nth-child(3n){border-radius:50%;width:10px;height:10px}.celebration-confetti i:nth-child(5n){width:6px;height:20px}@keyframes confetti-fall{0%{transform:translate(0,-30px) rotate(0deg)}100%{transform:translate(var(--drift),calc(100dvh + 60px)) rotate(var(--spin))}}@keyframes trophy-arrive{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:760px){.celebration-screen{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}.celebration-trophy{font-size:82px;margin-bottom:20px}.celebration-content h2{font-size:27px}.celebration-content #celebrationLesson{font-size:17px}.celebration-score strong{font-size:43px}.celebration-content #celebrationMessage{font-size:12px}}@media(prefers-reduced-motion:reduce){.celebration-trophy{animation:none}.celebration-confetti i{animation:none;top:calc(var(--x)*.8);opacity:.35;transform:rotate(var(--spin))}}
.room-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef1e6;border:1px solid #d8dfd0;border-radius:14px;padding:12px 16px;margin:0 0 20px}.room-panel[hidden]{display:none}.room-panel strong{font-size:14px}.room-panel p{font-size:12px;line-height:1.5;margin:4px 0 0;color:#617262}.room-panel button{flex-shrink:0;font-size:12px;min-height:44px}#roomInvite{margin:20px 0}#roomInviteUrl{font-size:13px}#roomMessage{font-size:14px;line-height:1.6}#leaveRoom{margin-top:18px}@media(max-width:600px){.room-panel{padding:10px 12px;margin-bottom:16px}}
.room-answers{background:#f0f3ea;border:1px solid #d7dfce;border-radius:14px;padding:16px;margin:4px 0 24px}.room-answers[hidden]{display:none}.room-answers h3{font-size:16px;margin:0 0 4px}.room-answers ul{list-style:none;padding:0;margin:12px 0}.room-answer-row{display:grid;grid-template-columns:minmax(70px,1fr) minmax(60px,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid #dce3d3;font-size:13px}.room-answer-row strong,.room-answer-choice{overflow-wrap:anywhere}.room-answer-status{font-weight:700;white-space:nowrap}.room-answer-row.correct .room-answer-status{color:#2f7155}.room-answer-row.wrong .room-answer-status{color:#b34c42}.room-answer-row.pending .room-answer-status{color:#727d6b}.room-answer-empty{font-size:14px;color:#69755e;padding:8px 0}@media(max-width:600px){.room-answers{padding:12px}.room-answer-row{gap:8px}}
:root{--sync-offset:0px}body[data-room-active="true"]{--sync-offset:calc(48px + env(safe-area-inset-top,0px));padding-top:var(--sync-offset)}.room-sync-bar{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(48px + env(safe-area-inset-top,0px));padding:calc(2px + env(safe-area-inset-top,0px)) 16px 2px;display:flex;align-items:center;gap:10px;background:#eef3e7;border-bottom:1px solid #cbdac1;color:#284f3b}.room-sync-bar[hidden]{display:none}.room-sync-indicator{width:8px;height:8px;background:#4e8761;border-radius:50%;flex:none}.room-sync-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.room-sync-text strong{font-size:12px;line-height:1.4}.room-sync-text span{font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-sync-bar button{min-height:44px;flex:none;padding:8px 12px;background:transparent;border:1px solid #b3c5a7;border-radius:6px;font-size:12px;color:#355d42}.room-sync-bar.disconnected{background:#fff1d8;color:#805a20}.room-sync-bar.disconnected .room-sync-indicator{background:#b8862c}.player-shell{top:var(--sync-offset)}@media(min-width:761px){.workspace>aside{top:calc(118px + var(--sync-offset))}.question-area{scroll-margin-top:calc(130px + var(--sync-offset))}}@media(max-width:760px){.room-sync-bar{padding-left:12px;padding-right:12px;gap:8px}.part-nav{top:calc(94px + var(--sync-offset))}#questionNav{top:calc(158px + var(--sync-offset))}.question-area{scroll-margin-top:calc(220px + var(--sync-offset))}}