:root{--regular: 400;--medium: 500;--semibold: 600;--white: #fff;--red: #eb4e3e;--red-pale: #ebb8b3;--green-pale: #b3ebb5;--pink-pale: #f6e3f9;--primary: #417fc6;--primary-600: #396fad;--gray: #9e9e9e;--divider: #eaeaea;--bg: #f4f4f4;--bg-2: #efeff3;--br-modal: 16px;--br-input: 6px;--bs-modal: 0px 7px 29px rgba(100, 100, 111, 0.2);--bs-float-button: 0px 6px 24px rgba(0, 0, 0, 0.05);--transition: all 0.07s linear}html,body{width:100vw;height:100vh}body{font-family:"Inter",sans-serif;font-size:14px;font-weight:var(--regular)}.icon{width:var(--icon-width);height:var(--icon-height);display:block;background-color:var(--icon-background);background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon[data-icon-name=arrow-angle-right]{-webkit-mask-image:url(/src/img/icons/symbol/arrow-angle-right.svg);mask-image:url(/src/img/icons/symbol/arrow-angle-right.svg)}.icon[data-icon-name=arrow-angle-down]{-webkit-mask-image:url(/src/img/icons/symbol/arrow-angle-down.svg);mask-image:url(/src/img/icons/symbol/arrow-angle-down.svg)}.icon[data-icon-name=cross]{-webkit-mask-image:url(/src/img/icons/symbol/cross.svg);mask-image:url(/src/img/icons/symbol/cross.svg)}.icon[data-icon-name=cross-bold]{-webkit-mask-image:url(/src/img/icons/symbol/cross-bold.svg);mask-image:url(/src/img/icons/symbol/cross-bold.svg)}.icon[data-icon-name=report]{-webkit-mask-image:url(/src/img/icons/symbol/report.svg);mask-image:url(/src/img/icons/symbol/report.svg)}#LessonInfo,#LessonResult,#Menu,#GlobalInfo{background:var(--white);border:1px solid var(--divider);border-radius:var(--br-modal);box-shadow:var(--bs-modal)}#LessonInput,#LessonInfo output,#LessonResult output{border:1px solid var(--divider);border-radius:var(--br-input);background:var(--white)}.body{display:grid;grid-template-rows:max-content 1fr}.header{padding:4px 12px;height:48px;display:grid;grid-template-columns:1fr max-content;align-items:center;gap:12px;border-bottom:1px solid var(--divider)}.header__title{font-size:16px;font-weight:var(--semibold)}.header__button{background:unset;border:unset}.header__button p{color:var(--primary);font-size:15px;font-weight:var(--medium)}.content{background:var(--bg-2)}.explorer [data-lessonname],.explorer__item{padding:6px 12px;font-size:16px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.explorer{margin:8px;padding:12px 0;height:calc(100% - 16px);border-radius:var(--br-modal);background:var(--white);overflow:hidden}.explorer__list{list-style-type:none}.explorer__list ul{list-style:none;padding-left:12px}.explorer__item{display:flex;align-items:center;gap:10px}.explorer__item .icon{--icon-width: 12px;--icon-height: 12px;--icon-background: var(--gray);transition:var(--transition)}.explorer [data-collapse="0"]>.explorer__item .icon{transform:rotate(90deg)}.explorer [data-collapse="1"] ul{display:none}#ExamPage{padding:12px;display:flex;flex-direction:column;background:var(--white)}#ExamPage[data-show="0"]{display:none}#TaskSection{position:relative;display:flex;flex-direction:column;gap:12px}#TaskText{padding:12px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--primary-600);color:var(--white);font-size:18px;font-weight:var(--semibold);text-align:center}#LessonProgressBox{display:grid;grid-auto-flow:column;grid-template-columns:max-content;justify-content:space-between;gap:12px}#LessonProgress{height:16px;border-radius:3px;background-color:#f9e0bb;width:70px;overflow:hidden}#LessonProgressProgressBarGreen,#LessonProgressProgressBarRed{position:relative;height:100%;float:left}#LessonProgressProgressBarGreen{background-color:#adff2f;width:30%}#LessonProgressProgressBarRed{background-color:var(--red);width:44%}#LessonAttempt{font-size:14px;text-align:right}#ResultSection{position:relative;margin-top:4px;padding:12px;width:100%;height:160px;display:flex;align-items:center;justify-content:center;border-radius:8px}#ResultSection[data-bg-color=red]{background:var(--red-pale)}#ResultSection[data-bg-color=green]{background:var(--green-pale)}#ResultSection[data-bg-color=wheat]{background:wheat}#ResultSection[data-bg-color=pink]{background:var(--pink-pale)}#ResultText{font-size:15px;text-align:center}#InputSection{position:relative;padding:16px 0}#LessonInput{padding:4px 8px;width:100%;min-height:38px;font-size:16px}.buttonSimple{padding:4px 10px;border:unset;border-radius:100px;font-size:14px}.buttonSimple[data-variant=primary]{color:var(--white);font-weight:var(--medium);background:var(--primary)}.buttonSimple[data-variant=secondary]{background:var(--divider)}#ButtonPanel{margin-top:16px;display:flex;gap:12px;justify-content:flex-end}#LessonInfo,#LessonResult{position:fixed;top:100px;left:12px;right:12px;z-index:2;padding:12px;display:none}#LessonResult{height:385px !important}#LessonInfo>label:not(:first-child){margin-top:4px}#LessonInfo .buttonBox{margin-top:20px;display:flex;justify-content:flex-end;gap:12px}#LessonInfo span,#LessonResult span{padding:6px 0;display:block;font-size:15px;font-weight:var(--semibold)}#LessonInfo output,#LessonResult output{display:block;padding:8px;min-height:34px;font-weight:var(--regular)}#Menu{--button-padding-x: 12px;padding:8px 0;position:fixed;top:52px;left:12px;right:12px;z-index:2;height:30vh;display:flex;flex-direction:column;gap:4px;overflow:hidden}#Menu[data-show="0"]{display:none}#Menu button{padding:6px var(--button-padding-x);min-height:36px;display:flex;align-items:center;border:unset;background:unset;font-size:15px}#Menu hr{margin:0 var(--button-padding-x);width:calc(100% - var(--button-padding-x)*2);height:1px;border:unset;background:var(--divider)}#GlobalInfo{--global-info-padding: 12px;position:fixed;inset:12px;z-index:3;padding:var(--global-info-padding)}#GlobalInfo[data-show="0"]{display:none}#GlobalInfo #LessonResultCloseButton{position:absolute;right:var(--global-info-padding);z-index:5;padding:10px;border:unset;border-radius:100px;background:var(--primary);box-shadow:var(--bs-float-button)}#GlobalInfo #LessonResultCloseButton .icon{--icon-width: 12px;--icon-height: 12px;--icon-background: var(--white)}#GlobalInfoText{overflow-y:scroll;width:100%;height:100%;padding:3px}#complainbutton{position:absolute;top:8px;right:8px;color:#fff}#complainbutton .icon{--icon-width: 18px;--icon-height: 18px;--icon-background: var(--white)}