*,:before,:after{box-sizing:border-box;margin:0;padding:0}.app{color:#fff;background:radial-gradient(circle at 14% 10%,#4f8b7329 0,#0000 34%),radial-gradient(circle at 86% 18%,#3a5c4c24 0,#0000 30%),#08120e;min-height:100vh;margin:0;font-family:serif;overflow:hidden}.container{flex-direction:row-reverse;justify-content:center;align-items:center;height:100vh;display:flex}.container.exceptionMode{gap:2vw}.pencilPracticeNotice{top:max(2vh, env(safe-area-inset-top));right:max(1.5vw, env(safe-area-inset-right));z-index:2;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.08em;opacity:.62;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(1.5vh,1.25vw,2.2vh);line-height:1.4;position:fixed}.katsuShell{justify-content:center;align-items:center;width:100%;display:flex}.katsuCore{flex-direction:row-reverse;justify-content:center;align-items:center;display:flex}.questionWithGuide{align-items:center;display:flex;position:relative}.auxiliaryQuestion{gap:1.5vw}.auxiliaryQuestion #question{height:85vh;max-height:none}.auxiliaryQualifier{opacity:.8;font-size:.48em}.auxiliaryMeta{flex-direction:row-reverse;align-items:stretch;gap:1vw;height:82vh;margin-right:1.5vw;line-height:1.35;display:flex}.auxiliaryMeta>div{writing-mode:vertical-rl;text-orientation:upright;border:1px solid;min-width:3.6vw;padding:1vh .8vw;overflow:hidden}.auxiliaryMeta span{opacity:.65;margin-bottom:.8vh;font-size:.72em;display:inline-block}.auxiliaryHint{writing-mode:vertical-rl;text-orientation:upright;white-space:pre-wrap;overflow-wrap:anywhere;border:2px dashed;flex-shrink:0;width:max(7vw,13vh);height:82vh;margin-left:1.2vw;padding:1.5vh .7vw;font-size:clamp(2vh,2vw,3vh);line-height:1.5;position:relative;overflow:hidden}.auxiliaryHintHidden{visibility:hidden}.auxiliaryHint span{opacity:.65;margin-bottom:1vh;font-size:.72em}.overlayCloseButton{z-index:1;writing-mode:horizontal-tb;border-radius:4px;justify-content:center;align-items:center;width:32px;min-width:32px;height:32px;margin:0;padding:0;font-family:sans-serif;font-size:22px;line-height:1;display:flex;position:absolute;top:8px;left:8px}.overlayCloseButton span{font-size:inherit;opacity:1;margin:0;line-height:1;transform:translateY(-1px)}#question{writing-mode:vertical-rl;white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:0;height:85vh;font-size:7vh;line-height:1.2;overflow:hidden}#exceptionAnswer{border:2px solid #fff;flex-direction:row-reverse;flex-shrink:0;justify-content:center;align-items:flex-start;gap:.5vw;min-width:max(10vw,14vh);min-height:70vh;padding:2vh 1vw;font-size:5vh;line-height:1.2;display:flex;overflow:hidden}.exceptionAnswerLine{writing-mode:vertical-rl;white-space:nowrap}.auxiliaryMeaningLayout{flex-direction:row-reverse;justify-content:center;align-items:center;gap:4vw;width:100%;height:100vh;display:flex}.auxiliaryMeaningPracticeLayout{gap:1.5vw}.auxiliaryMeaningQuestion{height:85vh}.auxiliaryPracticeInstruction{writing-mode:vertical-rl;text-orientation:upright;opacity:.75;border:1px solid;justify-content:flex-start;align-self:flex-start;align-items:center;width:max(3.2vw,5vh);height:auto;max-height:85vh;margin-top:7.5vh;padding:1.2vh .6vw;font-size:clamp(2.2vh,1.9vw,3vh);line-height:1.2;display:flex}.auxiliaryMeaningAnswers{flex-direction:row-reverse;align-items:stretch;gap:.8vw;display:flex}.auxiliaryMeaningAnswer{color:#ff0;white-space:pre-wrap;overflow-wrap:anywhere;border:2px solid #fff;justify-content:center;align-items:flex-start;width:calc(1.35em + 1.6vw + 4px);min-width:calc(1.35em + 1.2vh + 4px);height:100%;padding:2vh .8vw;font-size:clamp(2.6vh,min(2.8vw,4.2vh),4.2vh);font-weight:700;line-height:1.35;display:flex;overflow:hidden}.auxiliaryMeaningAnswerPlaceholder{visibility:hidden}.auxiliaryConnectionAnswer{color:#ff0;white-space:pre-wrap;overflow-wrap:anywhere;border:2px solid #fff;justify-content:center;align-items:flex-start;min-width:calc(1.35em + 1.2vh + 4px);height:58vh;padding:2vh .8vw;font-size:clamp(2.6vh,min(2.8vw,4.2vh),4.2vh);font-weight:700;line-height:1.35;display:flex;overflow:hidden}.auxiliaryConnectionMeaning{writing-mode:vertical-rl;text-orientation:upright;border:1px solid;min-width:3.6vw;height:72vh;padding:1vh .8vw;font-size:clamp(2.2vh,2.4vw,3.2vh);line-height:1.35;overflow:hidden}.auxiliaryConnectionMeaning span{opacity:.65;margin-bottom:.8vh;font-size:.72em;display:inline-block}.auxiliaryAnswerText{writing-mode:vertical-rl;text-orientation:upright;white-space:pre-wrap;overflow-wrap:anywhere;display:block}.meaningCatalogPanel{color:#fff;z-index:1200;background:#000;border:2px solid;padding:7vh 6vw;position:fixed;inset:0;overflow:hidden}.meaningCatalogHeader{box-sizing:border-box;justify-content:space-between;align-items:flex-start;height:9vh;padding-left:40px;display:flex}.meaningCatalogTitle{font-size:3vh}.meaningCatalogSub{opacity:.75;margin-top:.4vh;font-size:1.7vh}.meaningCatalogGrid{direction:rtl;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(15,minmax(0,1fr));grid-auto-flow:column;gap:.7vh .4vw;height:73vh;display:grid}.meaningCatalogItem{writing-mode:vertical-rl;text-orientation:upright;direction:ltr;border:1px solid;justify-content:center;align-items:center;min-width:0;padding:1vh .35vw;line-height:1.1;display:flex;overflow:hidden}.table{flex-direction:row-reverse;display:flex}.column{flex-direction:column;display:flex}.cell{writing-mode:vertical-rl;white-space:nowrap;border:none;border-top:2px solid #fff;border-left:2px solid #fff;justify-content:center;align-items:center;width:max(7vw,9vh);height:13vh;font-size:4vh;line-height:1;display:flex}.handwritingColumn{isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative}.handwritingGrid{z-index:30;pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.handwritingGridCell{border:2px solid;border-bottom:none;flex-shrink:0;height:13vh}.handwritingGridCell:last-child{border-bottom:2px solid}.handwritingColumn .cell{pointer-events:none;border-color:#0000}.table .handwritingColumn .cell:last-child{border-bottom-color:#0000}.whiteboard .handwritingColumn .cell{border-color:#0000}.whiteboard .table .handwritingColumn .cell:last-child{border-bottom-color:#0000}.handwritingCanvas{z-index:10;color:#fff;touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.handwritingCanvasDisabled{z-index:-1;opacity:.58;pointer-events:none}.handwritingTools{z-index:40;gap:8px;display:flex;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.handwritingToolsHidden{visibility:hidden}.handwritingToolButton{border-radius:8px;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;margin:0;padding:9px;display:flex}.handwritingToolButton svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.handwritingToolButtonActive{color:#fffde8;background:#3d7359;border-color:#e9e256;box-shadow:0 0 0 2px #e9e2564d}.whiteboard .handwritingToolButtonActive{color:#3c2d17;background:#ead2a5;border-color:#a3311d;box-shadow:0 0 0 2px #a3311d33}.handwritingAnswerCellVisible{background:#08120e14}.handwritingAnswerCellVisible .answer{opacity:.72}.column:first-child .cell{border-right:2px solid #fff}.column .cell:last-child{border-bottom:2px solid #fff}.inner{flex-direction:column;align-items:center;display:flex}.inner.singleLine{justify-content:center;height:100%}.katsuAnswerText{white-space:nowrap;max-height:10.4vh;line-height:1}.parentheticalAnswerHidden{visibility:hidden}.parentheticalText{position:relative;overflow:visible}.parentheticalMark{color:inherit;font-size:.7em;position:absolute;left:50%;transform:translate(-50%)}.parentheticalMarkOpen{top:-.22em}.parentheticalMarkClose{bottom:-.22em}.vowelGuideColumn{flex-direction:column;height:39vh;display:flex;position:absolute;left:calc(100% + 4vh)}.vowelGuideColumnHidden{visibility:hidden}.vowelGuideCell{writing-mode:vertical-rl;border:2px solid #fff;border-bottom:none;justify-content:center;align-items:center;width:max(7vw,9vh);height:7.8vh;font-size:4vh;font-weight:50;line-height:1;display:flex}.vowelGuideCell:last-child{border-bottom:2px solid #fff}.vowelGuideCellFilled{color:#000;background:#ff0}.label{background:#222;font-weight:50}.controls{z-index:100;justify-content:flex-end;align-items:center;gap:.5vw;display:flex;position:fixed;bottom:1vh;right:1vw}.controls button{margin:0}.menuControls{z-index:1050}button{color:#f4fff9;cursor:pointer;background:#1a3b2f;border:2px solid #5fa98c;border-radius:10px;margin:.5vh;padding:1vh 2vw;font-size:2.5vh;transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s,transform .1s;box-shadow:0 .35vh .8vh #00000038}button:hover:not(:disabled){background:#235241;transform:translateY(-1px);box-shadow:0 .5vh 1.1vh #00000047}button:active:not(:disabled){transform:translateY(1px);box-shadow:0 .15vh .4vh #00000038}button:focus-visible{outline-offset:3px;outline:3px solid #e9e256}button:disabled{opacity:.4;cursor:default}.answer{color:#ff0;font-weight:700}.whiteboard{color:#2f2518;background:radial-gradient(circle at 8% 8%,#f6ead6 0,#0000 40%),radial-gradient(circle at 92% 16%,#f2dfbf 0,#0000 36%),#f7f1e7}.whiteboard .cell{border-color:#000}.whiteboard .handwritingCanvas{color:#2f2518}.whiteboard .handwritingAnswerCellVisible{background:#f7f1e71a}.whiteboard .vowelGuideCell{border-color:#000}.whiteboard .vowelGuideCell:last-child{border-bottom-color:#000}.whiteboard .vowelGuideCellFilled{color:#fff;background:navy}.whiteboard #exceptionAnswer{border-color:#000}.whiteboard .auxiliaryMeaningAnswer,.whiteboard .auxiliaryConnectionAnswer{color:navy;border-color:#000}.whiteboard .meaningCatalogPanel{color:#000;background:#fff}.whiteboard .column:first-child .cell{border-right-color:#000}.whiteboard .column .cell:last-child{border-bottom-color:#000}.whiteboard .label{color:#000;background:#eee}.whiteboard button{color:#3c2d17;background:#f8edd9;border-color:#bfa57e;box-shadow:0 .35vh .8vh #3c2d1724}.whiteboard button:hover:not(:disabled){background:#f2dfbf;box-shadow:0 .5vh 1.1vh #3c2d1733}.whiteboard button:focus-visible{outline-color:#a3311d}.whiteboard .gradeCorrect{color:#16803c}.whiteboard .gradeIncorrect{color:#c62828}.whiteboard .overlay{color:#000;background:#ffffffe6}.whiteboard .answer{color:navy}.overlay{z-index:999;pointer-events:none;background:#000000e6;justify-content:center;align-items:center;width:100%;height:100%;font-size:8vh;display:flex;position:fixed;top:0;left:0}.startMenu{z-index:1000;background:#000000d9;border:2px solid #fff;flex-direction:column;align-items:center;gap:1vh;padding:2vh 2vw;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.startMenuTitle{white-space:nowrap;margin:0 0 .5vh;font-size:3vh;line-height:1.3}.startMenuSub{opacity:.9;font-size:2vh}.menuSection{border:1px solid;width:min(44vw,66vh);padding:1.2vh 1.2vw}.menuSectionTitle{margin-bottom:.8vh;font-size:2vh}.menuRangeButtons{grid-template-columns:1fr;gap:.5vh .5vw;display:grid}.menuRangeButtons button,.menuSection>button{white-space:nowrap;width:100%;margin:0}.settingsSection{border-style:dashed;padding-top:.7vh;padding-bottom:.7vh}.settingsSection .menuSectionTitle{opacity:.7;margin-bottom:.4vh;font-size:1.6vh}.settingsSection>button{opacity:.85;padding-top:.6vh;padding-bottom:.6vh;font-size:1.8vh}.sessionModeSelector{border:1px solid;width:min(44vw,66vh);padding:1.2vh 1.2vw;font-size:2vh}.sessionModeSelector legend{padding:0 .5vw}.sessionModeSelector label{cursor:pointer;align-items:center;gap:.7vw;margin:.9vh 0;display:flex}.sessionModeSelector input{accent-color:#ffd900;flex-shrink:0;width:2vh;height:2vh}.auxiliaryFilterPanel{color:#fff;z-index:1100;background:#000;border:2px solid;width:min(76vw,118vh);max-height:88vh;padding:2vh 2vw;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.auxiliaryFilterHeader{justify-content:space-between;align-items:center;gap:2vw;display:flex}.auxiliaryFilterHeaderActions{flex-shrink:0;align-items:center;gap:.5vw;display:flex}.auxiliaryFilterTitle{font-size:3vh}.auxiliaryFilterCount{opacity:.8;margin-top:.5vh;font-size:1.8vh}.urlCopyStatus{color:#65df72;text-align:right;margin-top:.8vh;font-size:1.8vh}.auxiliaryFilterActions{gap:.5vw;margin:1vh 0;display:flex}.auxiliaryCheckboxGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7vh .8vw;display:grid}.auxiliaryCheckboxItem{cursor:pointer;border:1px solid;align-items:center;gap:.6vw;min-width:0;padding:.8vh .7vw;font-size:2.1vh;display:flex}.auxiliaryCheckboxItem input{accent-color:#ffd900;flex-shrink:0;width:2.2vh;height:2.2vh}.auxiliaryCheckboxItem span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.remainingCounter{z-index:20;border:1px solid;padding:.8vh 1vw;font-size:2.2vh;position:fixed;top:1.5vh;left:1.5vw}.remainingCounter strong{color:#ff0;font-size:1.35em}.gradeButton{justify-content:center;align-items:center;min-width:4.5vw;font-size:3.8vh;font-weight:700;display:flex}.gradeCircle{box-sizing:border-box;border:.1em solid;border-radius:50%;width:.72em;height:.72em}.gradeCross{line-height:1;transform:translateY(-.03em)}.gradeCorrect{color:#65df72}.gradeIncorrect{color:#ff6c6c}.completionPanel{background:inherit;z-index:900;flex-direction:column;justify-content:center;align-items:center;gap:2vh;font-size:3vh;display:flex;position:fixed;inset:0}.completionTitle{color:#ff0;font-size:8vh;font-weight:700}.completionAccuracy strong{color:#ff0;font-size:1.35em}.completionActions{gap:1vw;display:flex}.menuCopyright{opacity:.85;pointer-events:none;font-size:1.5vh;position:fixed;bottom:1.2vh;left:50%;transform:translate(-50%)}.whiteboard .startMenu{background:#fffdf8f5;border-color:#d7c7aa}.whiteboard .auxiliaryFilterPanel{color:#2f2518;background:#fffdf8;border-color:#d7c7aa}@media (width<=800px){.auxiliaryMeaningAnswer,.auxiliaryConnectionAnswer{min-width:calc(1.45em + 1.2vh + 4px);padding-left:6px;padding-right:6px;overflow:visible}.controls:not(.menuControls){flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:2px;display:flex;left:4px;right:4px}.controls:not(.menuControls) button{white-space:nowrap;min-width:0;margin:0;padding:5px 6px;font-size:clamp(10px,3vw,14px)}.controls:not(.menuControls) .gradeButton{box-sizing:border-box;flex-shrink:0;width:54px;min-width:54px;height:60px;min-height:60px;padding:4px;font-size:34px}.controls:not(.menuControls) .primaryActionButton{box-sizing:border-box;flex-shrink:0;width:110px;min-width:110px;height:60px;min-height:60px}.completionActions{justify-content:center;gap:8px;width:calc(100vw - 32px)}.completionActions button{white-space:nowrap;min-width:0;margin:0;padding:8px 12px;font-size:clamp(14px,4.5vw,20px)}.auxiliaryMeaningPracticeLayout{gap:.5vw}.auxiliaryMeaningPracticeLayout .auxiliaryMeaningAnswer{font-size:clamp(18px,5vw,26px)}.auxiliaryHint{z-index:200;box-sizing:border-box;background:#08120e;width:auto;height:auto;margin:0;padding:16px;font-size:clamp(16px,4.5vw,24px);position:fixed;inset:0}.whiteboard .auxiliaryHint{background:#f7f1e7}.startMenu{box-sizing:border-box;overscroll-behavior:contain;align-items:stretch;width:calc(100vw - 24px);max-height:calc(100dvh - 48px);padding:44px 12px 12px;overflow-y:auto}.menuControls{top:16px;bottom:auto;right:16px}.startMenuTitle{text-align:center;font-size:clamp(16px,5.3vw,28px)}.menuSection,.sessionModeSelector{box-sizing:border-box;width:100%;padding:10px}.sessionModeSelector label{align-items:flex-start;gap:8px}.menuRangeButtons button,.menuSection>button{min-height:44px;padding:8px 12px;font-size:clamp(14px,4.5vw,20px)}.menuCopyright{z-index:1001;white-space:nowrap;font-size:11px;display:block;bottom:4px}.auxiliaryCheckboxGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}.whiteboard .remainingCounter strong,.whiteboard .completionTitle,.whiteboard .completionAccuracy strong,.whiteboard .urlCopyStatus{color:navy}.primaryActionButton{color:#fffde8;background:#315f49;border-color:#d7c66a;font-weight:700}.controls .primaryActionButton{box-sizing:border-box;width:calc(max(9vw,11vh) + .5vw);min-width:calc(max(9vw,11vh) + .5vw);height:max(4.5vw,5.5vh);min-height:max(4.5vw,5.5vh)}.primaryActionButton:hover:not(:disabled){background:#3d7359}.secondaryButton{background:#132d24}.boardToggleButton{background:#132d24;border-radius:999px}.whiteboard .primaryActionButton{color:#3c2d17;background:#ead2a5;border-color:#b98b45}.whiteboard .primaryActionButton:hover:not(:disabled){background:#dfbf84}.whiteboard .secondaryButton,.whiteboard .boardToggleButton{background:#fffaf1}.whiteboard .secondaryButton:hover:not(:disabled),.whiteboard .boardToggleButton:hover:not(:disabled){background:#f2dfbf}.gradeButton{box-sizing:border-box;border-radius:999px;width:max(4.5vw,5.5vh);min-width:max(4.5vw,5.5vh);height:max(4.5vw,5.5vh);min-height:max(4.5vw,5.5vh);padding:.7vh 1.2vw}.gradeCorrect{background:#174d31;border-color:#65c887}.gradeIncorrect{background:#57241f;border-color:#e3867d}.whiteboard .gradeCorrect{color:#16803c;background:#e4f3e8;border-color:#16803c}.whiteboard .gradeIncorrect{color:#c62828;background:#f9e5e3;border-color:#c62828}.startMenu,.menuSection,.sessionModeSelector,.auxiliaryFilterPanel,.meaningCatalogPanel,.remainingCounter{border-radius:14px}.startMenu{background:#0b1612f5;border-color:#2f7058;box-shadow:0 1.2vh 3vh #00000052}.menuSection,.sessionModeSelector{background:#1a3b2f47;border-color:#3b7d62}.whiteboard .menuSection,.whiteboard .sessionModeSelector{background:#f8edd980;border-color:#d7c7aa}.meaningCatalogPanel,.auxiliaryFilterPanel{background:#0b1612;border-color:#2f7058}.whiteboard .meaningCatalogPanel{color:#2f2518;background:#fffdf8;border-color:#d7c7aa}