*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% 0,#ccece5 0,transparent 32%),#eef4f7;color:#142536;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:16px}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ebad24;outline-offset:4px}button{border:1px solid #cbdbe2;background:#fff;color:#173248;border-radius:12px;padding:12px 16px;min-height:48px;font-weight:700}h1,h2,p{margin-top:0}.start-header{padding:22px max(24px,calc((100vw - 1120px)/2));background:#123047;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:800;margin:0 0 6px}.start-header h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0}.test-badge{border:1px solid #6f8b9e;border-radius:9px;padding:7px 16px;white-space:nowrap;font-weight:800}main{padding:26px 18px 38px}.lesson-selector{max-width:1120px;margin:auto;padding:clamp(20px,4vw,34px);border:1px solid #d3e0e5;border-radius:24px;background:#fff;box-shadow:0 16px 42px #17394a14}.lesson-selector h2{font-size:1.35rem;margin-bottom:8px}.stage-grid{margin-top:22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.stage-grid button{min-height:100px;padding:13px 12px;border:2px solid #dce6ea;border-radius:15px;background:#f8fafb;text-align:left;transition:border-color .12s,background .12s}.stage-grid button:hover{border-color:#8dcac0}.stage-grid button.selected{border-color:#0a8f83;background:#e3f5f1;box-shadow:0 0 0 3px #0a8f8317}.stage-grid strong{display:block;font-size:1.25rem;color:#08776f}.stage-grid span{display:block;font-size:.9rem;margin-top:7px;line-height:1.45}.lesson-choice{margin-top:24px;padding:20px;border-radius:18px;background:#eef6f5;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.options{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.toggle{display:inline-flex;gap:9px;align-items:center;font-weight:800;min-height:48px;cursor:pointer;white-space:nowrap}.toggle input{width:22px;height:22px;accent-color:#087f76}.time-choice select{margin-left:8px;background:#fff;border:1px solid #bfcfd5;border-radius:10px;padding:10px;color:#173248}.primary{background:#087f76;border:0;color:white;box-shadow:0 4px 0 #05665f;font-weight:800;min-height:54px;padding:12px 25px}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #05665f}.muted{font-size:.9rem;color:#5e7482;line-height:1.6}.save-info{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.save-info p{margin:0}.quiet{border:0;background:transparent;color:#456474;text-decoration:underline;font-size:.9rem}.test-top{max-width:1360px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.test-title h2{margin:0;font-size:1.2rem}.test-title p{margin:3px 0 0}.timer{font:800 1.8rem ui-monospace,monospace;background:white;border:1px solid #d3e0e5;padding:10px 18px;border-radius:13px;color:#173248}.timer.urgent{color:#bd2727}.progress-panel{max-width:1360px;margin:20px auto;background:#fff;border:1px solid #d3e0e5;border-radius:17px;padding:16px 20px}.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:0}.progress-heading strong{font-size:1.2rem}.question-nav{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px}.question-nav button{padding:3px;min-height:37px;border-radius:7px;font-size:.88rem;border:1px solid #d1dfe4;background:#f6f9fa}.question-nav button.answered{background:#e0f2ec;border-color:#83bdad;color:#0a6957}.question-nav button.active{background:#087f76;border-color:#087f76;color:#fff;box-shadow:0 0 0 2px #b4ded5}.question-nav button.wrong{color:#b82020;background:#fff0f0;border-color:#eaa5a5}.question-nav button.correct{color:#0a6957;background:#dff3e9}.workspace{max-width:1360px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.problem-panel,.keypad-panel,.result-panel{border:1px solid #d5e1e5;border-radius:20px;background:white;box-shadow:0 10px 26px #17394a12;padding:22px}.problem-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;color:#08776f;font-weight:800}.problem-surface{display:flex;align-items:center;justify-content:center;gap:25px;min-height:390px;padding:12px 0}.calculation{flex:1 1 210px;max-width:300px;align-self:center}.numbers{width:max-content;min-width:120px;margin:0 auto 18px;display:flex;flex-direction:column;text-align:right;font:700 clamp(2.5rem,4.5vw,3.5rem)/1.3 Arial,sans-serif;font-variant-numeric:tabular-nums;border-bottom:3px solid #173248;padding:10px 12px 16px;gap:2px}.numbers .negative{color:#173248}.answer-display{display:block;margin:auto;width:min(100%,260px);min-height:78px;border:3px solid #0a8f83;border-radius:12px;text-align:center;background:#f0faf7;color:#123047;font:800 2.5rem Arial,sans-serif;padding:12px}.answer-label{text-align:center;margin:0 0 8px;color:#526c7a;font-weight:700}.image-area{flex:1 1 360px;min-width:240px;max-width:460px}.keypad-panel h2{font-size:1.1rem;margin:0 0 16px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.keypad button{height:68px;background:#f6f9fb;border:1px solid #cbdbe2;font:700 1.85rem Arial,sans-serif;box-shadow:0 3px 0 #dae3e8}.keypad button.utility{font:700 .95rem inherit;font-size:1rem}.keypad-panel .primary{width:100%;margin-top:16px}.test-actions{display:flex;gap:10px;margin-top:16px}.test-actions button{flex:1;padding-inline:8px}.keypad-panel .muted{margin:18px 0 0}.result-panel{max-width:1120px;margin:auto;text-align:center}.result-panel h2{margin:0 0 15px}.score{font:900 4.5rem Arial,sans-serif;color:#087f76;margin:12px 0}.score small{font-size:1.2rem;color:#526c7a}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0}.results-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:22px}.result-item{text-align:left;border:1px solid #c7dfd4;background:#f2faf6;border-radius:12px;padding:12px;line-height:1.5;overflow-wrap:anywhere}.result-item.wrong{background:#fff6f5;border-color:#edc3bf}.result-item strong{color:#08776f}.result-item.wrong strong{color:#b82929}.result-item p{font:600 1.1rem/1.7 Arial,sans-serif;margin:8px 0}.result-item small{font-size:.88rem}.result-item .correct-answer{font-weight:800}.empty-answer{color:#7d6060}.loading{padding:30px;text-align:center}#storage-alert{position:sticky;bottom:0;background:#fff0d6;border:2px solid #a76c16;padding:16px;color:#693d00;font-weight:700}.resume-note{border:1px solid #8bc5b8;padding:16px;border-radius:14px;background:#eef9f5;margin-bottom:20px}.soroban-image{user-select:none;pointer-events:none}.correction-note{padding:12px;background:#fff2d6;border-radius:10px;color:#7d4b00;margin:0 0 15px}.error-answer{color:#b82929;font-weight:800;text-align:center;margin:12px 0}.current-feedback{min-height:26px;color:#b82929;text-align:center;margin:10px 0 0}.finish-dialog{border:0;border-radius:20px;max-width:440px;width:calc(100% - 32px);padding:26px;color:#173248;box-shadow:0 20px 80px #12304755}.finish-dialog::backdrop{background:#12304788}.finish-dialog div{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
@media(max-width:1100px){.problem-surface.with-image{flex-wrap:wrap}.with-image .calculation{flex-basis:100%;max-width:100%}.image-area{flex-basis:100%;width:100%}.with-image .numbers{font-size:2.6rem}.stage-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:780px){.workspace{grid-template-columns:minmax(0,1fr) 255px;gap:12px}.keypad-panel,.problem-panel{padding:15px}.keypad button{height:58px}.stage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.question-nav{grid-template-columns:repeat(10,minmax(0,1fr))}.results-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.start-header{padding:18px 22px}}
@media(max-width:580px){main{padding:16px 10px}.workspace{grid-template-columns:1fr}.keypad-panel{position:static}.problem-surface{min-height:0}.problem-panel{padding:15px}.numbers{font-size:2.7rem}.stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-selector{padding:20px 15px}.lesson-choice{padding:16px}.lesson-choice>.primary{width:100%}.question-nav{gap:4px}.progress-panel{padding:14px 10px}.progress-heading{flex-wrap:wrap}.progress-heading strong{font-size:1rem}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.start-header h1{font-size:1.8rem}.test-badge{padding:6px 9px}.test-top{gap:10px}.timer{font-size:1.5rem}.image-area{max-width:380px}.keypad button{height:58px}.keypad-panel{max-width:100%}}
/* Align every selector card on the same two-line description grid. */
.stage-grid button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:120px;padding:14px 12px}
.stage-grid strong{line-height:1.4;margin-bottom:8px}
.stage-grid .card-description{margin:0;width:100%;font-size:.875rem;line-height:1.5}
.stage-grid .card-line{display:block;margin:0;font-size:inherit;line-height:inherit;min-height:1.5em;white-space:nowrap}
@media(min-width:781px) and (max-width:1050px){.stage-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:580px){.stage-grid button{padding:12px 9px}.stage-grid .card-description{font-size:.875rem}}
@media(max-width:350px){.stage-grid{grid-template-columns:1fr}}
.first-term-image{display:block;position:relative;width:82px;height:190px;margin:0 0 12px auto;flex:none;pointer-events:none;user-select:none}
.mini-rod{position:absolute;left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%);background:#080808}
.mini-beam{position:absolute;left:0;right:0;top:55px;height:8px;background:#080808;z-index:3}
.mini-bead{position:absolute;left:50%;transform:translateX(-50%);width:72px;height:28px;background:#080808;clip-path:polygon(34% 0,66% 0,100% 50%,66% 100%,34% 100%,0 50%);z-index:2}
.mini-bead::after{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(#f9dc72,#f1c64d)}
.mini-upper{top:0}.mini-upper.engaged{top:27px}
.mini-lower-zone{position:absolute;top:63px;left:0;right:0;height:127px}
.legacy-notice{max-width:1360px;margin:0 auto 18px;padding:14px 18px;background:#fff2d6;border-radius:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.timer small{display:block;font:700 .875rem/1.4 "Yu Gothic",sans-serif;margin-bottom:2px}.timer span{display:block}

/* Finger calculation stays within the problem panel; outside remains scrollable. */
.problem-panel{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.finger-instruction{margin:0 0 18px;padding:12px 14px;border-radius:10px;background:#eef6f5;color:#29495b;font-size:1rem;line-height:1.7}
.first-term-drawing{display:block;position:relative;width:82px;height:190px}
/* Keep tablet problems, answer field and keypad together within the viewport. */
.test-screen .start-header{padding:9px 20px;min-height:48px}
.test-screen .start-header>div{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.test-screen .start-header .brand{font-size:1.1rem;margin:0}
.test-screen .start-header h1{font-size:1.25rem;line-height:1.4}
.test-screen .test-badge{padding:3px 10px;font-size:.875rem}
.test-screen main{padding:10px 14px}
.test-screen .test-top{gap:10px}
.test-screen .test-top>button{min-height:42px;padding:8px 12px}
.test-screen .test-title h2{font-size:1rem}
.test-screen .test-title p{margin:0;font-size:.875rem;line-height:1.4}
.test-screen .timer{padding:5px 12px;font-size:1.55rem}
.test-screen .timer small{font-size:.875rem}
.test-screen .progress-panel{margin:8px auto;padding:5px 14px}
.test-screen .progress-heading{margin:0;min-height:40px}
.test-screen .progress-heading strong{font-size:1.05rem}
.test-screen .progress-heading .toggle{min-height:40px}
.test-screen .workspace{gap:14px}
.test-screen .problem-panel,.test-screen .keypad-panel{padding:12px 16px}
.test-screen .problem-surface{min-height:0;padding:8px 0;gap:16px}
.test-screen .finger-instruction{margin:4px 0 0;padding:8px 10px;font-size:.875rem;line-height:1.5}
.test-screen .numbers{font-size:clamp(1.65rem,4.3dvh,2.8rem);line-height:1.16;padding:4px 10px 8px;margin-bottom:8px}
.test-screen .answer-label{margin-bottom:4px;line-height:1.3}
.test-screen .answer-display{min-height:56px;padding:6px;font-size:2rem}
.test-screen .current-feedback:empty{display:none}
.test-screen .current-feedback{margin:4px 0 0;min-height:0}
.test-screen .first-term-image{width:50px;height:116px;margin-bottom:6px}
.test-screen .first-term-drawing{transform:scale(.61);transform-origin:top left}
.test-screen .correction-note{padding:6px 10px;margin-bottom:6px;font-size:.875rem}
.test-screen .keypad-panel h2{margin-bottom:10px}
.test-screen .keypad{gap:8px}
.test-screen .keypad button{height:clamp(48px,7.5dvh,68px);font-size:1.7rem}
.test-screen .keypad-panel .primary{margin-top:10px;min-height:50px;padding:10px}
.test-screen .test-actions{margin-top:10px}
.test-screen .test-actions button{min-height:42px;padding:8px}
.test-screen .keypad-panel .muted{margin-top:10px;font-size:.875rem;line-height:1.4}
@media(min-width:600px){
 .test-screen .workspace{grid-template-columns:minmax(0,1fr) clamp(230px,26vw,320px)}
 .test-screen .problem-surface.with-image{flex-wrap:nowrap}
 .test-screen .with-image .calculation{flex:1 1 140px;min-width:120px;max-width:260px}
 .test-screen .with-image .numbers{font-size:clamp(1.65rem,4.3dvh,2.8rem)}
 .test-screen .image-area{position:relative;flex:0 0 210px;min-width:0;width:210px;height:270px;margin:auto}
 .test-screen .image-area .soroban-image{position:absolute;top:0;left:0;width:420px;max-width:none;transform:scale(.5);transform-origin:top left}
}
@media(min-width:1100px) and (min-height:800px){
 .test-screen .image-area{flex-basis:273px;width:273px;height:350px}
 .test-screen .image-area .soroban-image{transform:scale(.65)}
}
@media(min-width:600px) and (max-width:720px){
 .test-screen .image-area{flex-basis:147px;width:147px;height:189px}
 .test-screen .image-area .soroban-image{transform:scale(.35)}
 .test-screen .problem-panel,.test-screen .keypad-panel{padding:10px}
 .test-screen .problem-surface{gap:6px}
 .test-screen .with-image .calculation{min-width:100px}
}
@media(max-width:599px){.test-screen .start-header>div{gap:3px}.test-screen .start-header h1{font-size:1.05rem}.test-screen .start-header{padding:8px 14px}}

.record-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.record-group{padding:14px;border:1px solid #cbdde2;border-radius:12px;background:#f5faf9;text-align:center}.record-group>span{display:block;font-size:1rem}.record-group>strong{display:block;margin:8px 0;color:#08776f;font-size:1.5rem}.mistake-count{font-size:.875rem;color:#a82e24;margin-top:6px}@media(max-width:580px){.record-groups{grid-template-columns:1fr}}

.keypad button.utility,.test-screen .keypad button.utility{font-family:inherit;font-size:1rem;font-weight:700;line-height:1.2;padding:6px;white-space:nowrap;min-width:0}

/* The introductory video opens without expanding the problem layout. */
.intro-video-link{margin:10px 0}
#intro-video{font:inherit;font-size:1rem;font-weight:700;color:#087d78;padding:8px 14px;min-height:40px}
.intro-video-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid #cedee6;border-radius:16px;background:white;color:#123047}
.intro-video-dialog::backdrop{background:rgba(10,30,44,.75)}
.intro-video-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.intro-video-heading h2{font-size:1rem;margin:0}
.intro-video-heading button{flex-shrink:0;min-height:44px;font:inherit;padding:8px 14px}
.intro-video-dialog video{display:block;width:100%;max-height:calc(100dvh - 130px);background:#000;border-radius:8px;object-fit:contain}

.intro-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
#intro-soroban{font:inherit;font-size:1rem;font-weight:700;color:#087d78;padding:8px 14px;min-height:40px}
.intro-soroban-dialog{box-sizing:border-box;width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:none;padding:12px;border:1px solid #cedee6;border-radius:14px;background:white;color:#123047;overflow:hidden}
.intro-soroban-dialog[open]{display:flex;flex-direction:column}
.intro-soroban-dialog::backdrop{background:rgba(10,30,44,.75)}
.intro-soroban-dialog .intro-video-heading{flex-shrink:0;margin-bottom:8px}
.intro-soroban-dialog iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#000;border-radius:8px}

/* Center the main start action and give it a generous tablet touch target. */
.lesson-choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px) minmax(0,1fr);align-items:center;gap:20px}
.lesson-choice>div{min-width:0}
.lesson-choice #start{grid-column:2;width:100%;min-height:88px;padding:18px 28px;font-size:2rem;border-radius:18px;justify-self:center}
@media(min-width:580px) and (max-width:900px){
 .lesson-choice{grid-template-columns:minmax(0,1fr) clamp(180px,30vw,260px);gap:16px}
 .lesson-choice .options{gap:8px 12px}
 .lesson-choice #start{grid-column:2;width:100%;padding-inline:16px;align-self:end}
}
@media(max-width:579px){
 .lesson-choice{grid-template-columns:minmax(0,1fr);gap:20px}
 .lesson-choice #start{grid-column:1;width:min(100%,340px);justify-self:center}
}

.lesson-selector .selection-heading{text-align:left}
.lesson-selector .save-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px) minmax(0,1fr);align-items:center;gap:20px}
.lesson-selector .export-main{grid-column:2;justify-self:center;width:100%;min-height:64px;padding:14px 18px;font-size:1.1rem;border-radius:16px;text-decoration:none}
@media(max-width:900px){
 .lesson-selector .save-info{grid-template-columns:minmax(0,1fr);gap:16px}
 .lesson-selector .export-main{grid-column:1;width:min(100%,340px)}
}

#zoom-reset-control{position:fixed;z-index:2147483647;transform-origin:top left;box-sizing:border-box}
#zoom-reset-control[hidden]{display:none}
#zoom-reset-control button{width:100%;min-height:48px;padding:10px 12px;border:2px solid #fff;border-radius:12px;background:#087f76;color:#fff;font-size:1rem;box-shadow:0 3px 12px #12304766;touch-action:manipulation}
#zoom-reset-control p{margin:6px 0 0;padding:10px;border:1px solid #cbdbe2;border-radius:8px;background:white;color:#123047;font-size:.9rem;line-height:1.5;box-shadow:0 3px 12px #12304733}

.lesson-selector .selection-heading{display:flex;justify-content:flex-start;margin:0 0 20px}
#choose-problem{width:220px;max-width:100%;min-height:72px;padding:16px 24px;font-size:1.6rem;border-radius:18px}

.selection-top-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.lesson-selector .selection-top-row .selection-heading{margin:0}
.trial-card{width:220px;max-width:48%;min-height:100px;padding:13px 12px;border:2px solid #dce6ea;border-radius:15px;background:#f8fafb;text-align:left}
.trial-card strong{display:block;font-size:1.25rem;color:#08776f}
.trial-card span{display:block;font-size:.9rem;margin-top:7px;line-height:1.45}
.trial-card:hover{border-color:#8dcac0}
.trial-card.selected{border-color:#0a8f83;background:#e3f5f1;box-shadow:0 0 0 3px #0a8f8317}
@media(max-width:580px){.selection-top-row{gap:12px}.selection-top-row .selection-heading{max-width:48%}.selection-top-row #choose-problem{font-size:1.15rem;padding:12px;min-height:72px}}