*{box-sizing:border-box}body{margin:0;background:#f6f1e6;color:#172e43;font-family:'Yu Gothic','Meiryo',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #087eaa;outline-offset:2px}[hidden]{display:none!important}.notebook-page{max-width:1250px;margin:auto;padding:18px 14px 28px}.notebook-page h1{font-size:clamp(23px,3vw,34px);margin:8px 0}.notebook-page>p{line-height:1.8;margin:8px 0 18px}.parent-note{font-size:14px;margin:16px 4px;line-height:1.8}
#host{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;background:#d3aa75 url('./assets/desk.webp') center/100% 100%;border:3px solid #243b50;border-radius:8px;overflow:hidden;font-weight:700;isolation:isolate;color:#172e43}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}#base{height:100%;display:flex;flex-direction:column}#host button{color:#19334b;background:#fbf0d9 url('./assets/blank.webp') center/cover;border:2px solid #ba9c73;border-radius:6px;padding:.55em .75em;line-height:1.25;font-weight:700;min-height:2.25em;box-shadow:0 2px 0 #152d4540}#host button:hover{border-color:#a92e25}#host button[aria-pressed=true],#host button.primary{background:#a63429;color:white;border-color:#852a24}#host button:disabled{cursor:default}#host button[aria-disabled=true]{cursor:default}#host .toolbar{height:10%;min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2%;color:#fff8e7;background:#142f4ce8;font-size:clamp(12px,1.3cqw,20px)}.brand{font-size:1.2em;white-space:nowrap}.tools{display:flex;gap:6px}.tools button{padding:.35em .6em!important;min-height:2.2em!important}#view{flex:1;min-height:0;padding:1.5% 3% 2.5%;display:flex;flex-direction:column;gap:1.2%;font-size:clamp(12px,1.6cqw,26px)}.controls{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-shrink:0;font-size:.79em}.modes,.grades{display:flex;gap:5px;flex-wrap:wrap}.book{background:#fbf2dd url('./assets/notebook.webp') center/100% 100%;min-height:0}.cover{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:3.5% 5%;text-align:center}.cover h2{font-size:2.5em;color:#9f3026;margin:0;line-height:1.15}.cover p{margin:0}.cover .grades{justify-content:center}.mode-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;width:100%;margin-top:1%}.mode-cards button{min-height:8em!important;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6em;border-width:3px!important}.mode-cards b{font-family:'Yu Mincho',serif;font-size:2.6em;color:#9f3026}.mode-cards span{font-size:1.12em}.mode-cards small{font-size:.72em}.spread{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;padding:2% 4%;gap:7%}.letter-area{display:grid;place-items:center;min-width:0;min-height:0}.letter-sheet{width:min(100%,34cqw);aspect-ratio:1;background:#fcf4e7 url('./assets/paper.webp') center/100% 100%;display:grid;place-items:center;font-family:'Yu Mincho','MS Mincho',serif;font-size:25cqw;font-weight:500;line-height:1}.card-info{display:flex;flex-direction:column;justify-content:center;gap:.6em;min-width:0}.card-info .reading{font-size:2.6em;margin:0;line-height:1.15}.small-meta{font-size:.7em;display:flex;gap:1em}.meaning{font-size:1em;margin:0}.meaning small{color:#964333;margin-right:.5em}.words{display:flex;gap:.4em;flex-wrap:wrap}.words span{border:1px solid #b3936c;border-radius:4px;padding:.4em .65em;font-size:.85em}.sentence{font-size:.8em;line-height:1.7;margin:0;border-top:1px dashed #967c59;padding-top:.5em}.actions{display:flex;flex-wrap:wrap;gap:.4em}.actions button{font-size:.8em}.picker{display:flex;gap:5px;overflow:auto;padding:5px 3px 7px;scrollbar-width:thin;flex-shrink:0;background:#102b46}.picker button{flex:0 0 2.15em;padding:.2em!important;font-size:1.2em}.selector-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5em;align-items:center}.selector-row>button{font-size:.8em}.trace-spread{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:2% 4%}.trace-board{position:relative;aspect-ratio:1;width:min(100%,34cqw);align-self:center;justify-self:center;background:url('./assets/paper.webp') center/100% 100%;touch-action:none}.trace-ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:'Yu Mincho','MS Mincho',serif;font-size:25cqw;font-weight:500;color:#172e433d;line-height:1;pointer-events:none}#trace-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.trace-info{display:flex;flex-direction:column;justify-content:center;min-height:0;gap:.8em}.trace-info h2{font-size:1.4em;margin:0}.trace-info p{margin:0;line-height:1.65;font-size:.9em}.pens{display:flex;flex-wrap:wrap;gap:5px}.pens button{font-size:.68em}.pens i{display:inline-block;width:1.2em;height:1.2em;background:var(--pen);border-radius:50%;vertical-align:middle;margin-right:.3em}.trace-picker{display:grid;grid-template-columns:repeat(5,1fr);max-height:9em;overflow:auto;gap:5px;padding:5px}.trace-picker button{font-family:'Yu Mincho',serif;font-size:1.2em;padding:.15em!important}.quiz-setup{flex:1;padding:5% 8%;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.quiz-setup h2{font-size:2em;color:#a63429}.quiz-setup p{line-height:1.8}.quiz-setup .sample{font-family:'Yu Mincho',serif;font-size:12cqw;background:url('./assets/paper.webp') center/contain no-repeat;aspect-ratio:1;display:grid;place-items:center}.quiz-status{display:flex;justify-content:space-evenly;gap:10px;background:url('./assets/blank.webp') center/cover;padding:.4em;font-size:.85em;flex-shrink:0}.quiz-status b{color:#a63429;font-size:1.25em}.quiz-body{flex:1;min-height:0;display:grid;grid-template-columns:42% 1fr;gap:4%;padding:1% 3%}.question{display:flex;flex-direction:column;gap:.4em;align-items:center;justify-content:center;background:url('./assets/blank.webp') center/cover;padding:4%}.question p{font-size:.85em;margin:0}.question .letter-sheet{font-size:20cqw;width:min(100%,25cqw)}.answers{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:3% 0;min-height:0}.answers button{font-size:clamp(16px,2.5cqw,40px);border-left:7px solid #a63429!important;word-break:normal;overflow-wrap:anywhere}.answers button:nth-child(2){border-left-color:#326288!important}.answers button:nth-child(3){border-left-color:#397959!important}.answers button:nth-child(4){border-left-color:#a87b2b!important}.answers button.correct{background:#e0edd5!important;outline:3px solid #286349}.answers button.wrong{background:#f4ddd0!important;outline:3px solid #a93a25}.quiz-footer{display:grid;grid-template-columns:1fr auto;gap:2%;height:4.4em;flex-shrink:0;align-items:center;background:url('./assets/blank.webp') center/cover;padding:.4em 2%}.quiz-footer p{font-size:.82em;margin:0;line-height:1.5}.quiz-footer button{font-size:.83em;min-width:6em}#next-question[hidden]{display:block!important;visibility:hidden}.result{flex:1;display:grid;grid-template-columns:1fr 1fr;padding:3% 5%;gap:8%;min-height:0}.achievement{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;text-align:center}.stamp{background:url('./assets/stamp.webp') center/contain no-repeat;width:75%;aspect-ratio:1;display:grid;place-content:center;color:#a63429;font-size:1.4em}.stamp span{display:block;font-size:1.5em}.achievement p{margin:0;font-size:.8em}.review-page{display:flex;flex-direction:column;justify-content:center;gap:1em;min-height:0}.review-page h2{font-size:1.2em;margin:0}.review-list{display:grid;grid-template-columns:1fr 1fr;gap:0 .6em;overflow:auto}.review-item{display:flex;gap:.4em;align-items:center;border-bottom:1px solid #c47e65;padding:.45em 0;font-size:.8em}.review-item strong{font-family:'Yu Mincho',serif;font-size:1.7em}.review-item span{font-size:.85em}.review-item i{font-style:normal;color:#a63429;margin-left:auto}.modal{position:absolute;inset:0;background:#0b2039bd;display:grid;place-items:center;padding:3%;z-index:5}.dialog{background:#fff1d9 url('./assets/blank.webp') center/cover;max-width:760px;width:88%;max-height:96%;overflow:auto;border:4px solid #243b50;padding:3%;font-size:clamp(14px,1.65cqw,24px);box-shadow:0 12px 60px #0006}.dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog h2{font-size:1.4em;margin:0}.dialog p{line-height:1.8}.dialog button{margin:.25em}.dialog label{display:block;margin-top:1em}.dialog input{width:90%}.dialog .help-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em}.dialog h3{font-size:1em;color:#9e382b}.dialog small{display:block;font-size:.8em;line-height:1.7}
@media(max-width:600px) and (orientation:portrait){.notebook-page{padding:12px 8px}.notebook-page>p{font-size:14px}#host{aspect-ratio:auto;height:760px;max-height:none}#host:fullscreen{height:100dvh}.toolbar{height:8%!important;flex-wrap:wrap;padding:8px 10px!important;align-content:center;gap:4px!important}.brand{font-size:14px}.tools{margin-left:auto;gap:4px}.tools button{font-size:11px!important}.tools .short{display:none}#view{font-size:17px;padding:10px 12px 16px;gap:8px}.controls{font-size:12px;flex-wrap:wrap}.controls .modes{width:100%;justify-content:space-between;gap:3px}.controls button{padding:5px 7px!important;min-height:34px!important}.cover{gap:5%;padding:20px 14px}.cover h2{font-size:1.65em}.cover>p{font-size:.85em}.mode-cards{grid-template-columns:1fr 1fr;gap:10px}.mode-cards button{min-height:9em!important}.mode-cards b{font-size:2.5em}.mode-cards small{font-size:.68em}.spread{grid-template-columns:1fr;grid-template-rows:minmax(170px,1fr) auto;padding:12px 18px;gap:10px;background-image:url('./assets/blank.webp')}.letter-sheet{width:200px;font-size:156px}.card-info{gap:.4em;text-align:center;align-items:center}.card-info .reading{font-size:1.8em}.sentence{font-size:.79em}.selector-row{gap:5px}.selector-row>button{font-size:12px!important;padding:6px!important}.picker button{font-size:24px!important;min-height:40px!important;flex-basis:42px}.trace-spread{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);background-image:url('./assets/blank.webp');padding:10px;gap:8px}.trace-board{width:min(100%,275px)}.trace-ghost{font-size:218px}.trace-info{gap:5px;justify-content:start;overflow:auto}.trace-info h2{font-size:1.1em}.trace-info p{font-size:.8em}.trace-info .trace-picker{max-height:145px;flex:1;min-height:50px}.pens{justify-content:center}.pens button{font-size:12px!important;min-height:36px!important}.trace-picker button{font-size:22px;min-height:36px!important}.quiz-setup{grid-template-columns:1fr;grid-template-rows:auto 1fr;background-image:url('./assets/blank.webp');gap:6%;text-align:center;padding:24px}.quiz-setup h2{font-size:1.7em}.quiz-setup .sample{font-size:110px;width:180px;justify-self:center}.quiz-status{font-size:12px}.quiz-body{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:12px;padding:0}.question{padding:10px}.question .letter-sheet{font-size:145px;width:180px}.question p{font-size:14px}.answers{gap:10px;padding:0}.answers button{font-size:22px!important;min-height:70px!important}.quiz-footer{height:5.8em;gap:8px;padding:8px}.quiz-footer p{font-size:13px}.quiz-footer button{font-size:14px!important;min-width:4.5em}.result{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);background-image:url('./assets/blank.webp');gap:10px;padding:12px}.stamp{width:180px;font-size:22px}.achievement p{font-size:13px}.review-page{gap:10px}.review-page h2{font-size:16px}.review-list{flex:1}.review-item{font-size:14px;padding:4px 0}.review-item strong{font-size:26px}.review-page .actions{justify-content:center}.dialog{width:100%;padding:18px;font-size:15px}.dialog .help-grid{grid-template-columns:1fr;gap:0}.dialog p{margin:.7em 0}.dialog input{width:100%}}
@media(max-height:550px) and (orientation:landscape){.notebook-page{padding:8px}#host{width:min(100%,calc((100dvh - 16px)*16/9));margin:auto}.toolbar{min-height:30px!important;font-size:11px!important}#view{font-size:1.6cqw}.tools button{font-size:10px!important}.controls{font-size:1.4cqw}.dialog{font-size:14px}.dialog p{line-height:1.5;margin:.5em 0}}
.stamp{display:flex;flex-direction:column;align-items:center;justify-content:center}.stamp b{max-width:68%;line-height:1.45;font-size:.9em}.stamp span{margin-top:.3em}
@media(max-width:600px) and (orientation:portrait){.stamp{font-size:18px}.stamp b{line-height:1.3}.stamp span{font-size:1.4em}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.stamp b{white-space:pre-line}