.graduationsPage{min-height:100dvh}.rulerShell{max-width:840px;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.rulerHeader,.rulerTitle,.rulerMission,.rulerMeta,.rulerButtons,.rulerActions{display:flex;align-items:center;justify-content:space-between;gap:8px}.rulerBrand{color:#6554ba;font-weight:850;font-size:15px}.rulerTitle{margin:16px 0 12px}.rulerTitle h1{margin:3px 0;font-size:clamp(25px,5vw,32px);letter-spacing:-1px}.rulerModes{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;background:#ece7fc;border-radius:14px;gap:3px;margin-bottom:12px}.rulerModes button{border:0;border-radius:10px;background:none;color:#6c5c98;font-size:13px;font-weight:800;min-height:43px}.rulerModes button[aria-pressed=true]{background:#fff;color:#5943c1;box-shadow:0 3px 10px #46347d15}.rulerCard{border:1px solid #e7e0f7;background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 35px #5943c109}.rulerMission small{display:block;font-size:12px;color:#81729b}.rulerMission strong{display:block;color:#5c45bb;font-size:32px;line-height:1.3;font-variant-numeric:tabular-nums}.rulerMission .badge{background:#e9f8f0;color:#297152}.rulerCard>p{font-size:13px;line-height:1.5;margin:10px 0;color:#7b708f}.rulerBoard{height:210px;position:relative;margin:0 4px;touch-action:manipulation}.rulerVisual svg{width:100%;height:100%;overflow:visible}.rulerLabels{position:absolute;inset:0 14px;pointer-events:none}.rulerLabel{position:absolute;top:134px;transform:translateX(-50%);font-size:clamp(10px,2.6vw,13px);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}.rulerLabel.above{top:65px}.rulerLabel.end:first-child{transform:none}.rulerLabel.end:last-child{transform:translateX(-100%)}#rulerHits{position:absolute;top:78px;left:14px;right:14px;height:62px;display:flex}#rulerHits button{padding:0;border:0;background:transparent;border-radius:8px;min-width:0;flex:1;touch-action:manipulation}#rulerHits button:hover{background:#806af71a}#rulerHits.ticks button{position:absolute;top:0;bottom:0;width:26px;transform:translateX(-50%)}#rulerHits button:focus-visible{background:#806af71a;outline:3px solid #7964ed;outline-offset:0}.rulerMeta{color:#76688c;font-size:12px;border-top:1px solid #f1edf8;padding-top:10px;font-variant-numeric:tabular-nums}.rulerCard .rulerFeedback{min-height:40px;margin:10px 0;font-weight:700;color:#645b79}.rulerFeedback.good{color:#18734d!important;background:#eaf8f0;padding:10px;border-radius:10px}.rulerFeedback.wrong{color:#b52f55!important;background:#fff0f4;padding:10px;border-radius:10px}.rulerToggle{font-size:12px;display:flex;align-items:center;gap:8px;margin:0;font-weight:750}.rulerToggle input{width:20px;height:20px;accent-color:#7964ed}.rulerTools{display:grid;gap:12px}.rulerButtons button{flex:1;min-height:42px}.rulerActions{margin-top:12px}.rulerActions button{min-height:44px;flex:1}.rulerAnswers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.rulerAnswers button{font-size:22px;font-weight:850;min-height:54px;color:#58429f;background:#f6f3ff;border:1.5px solid #e7def9;border-radius:12px;font-variant-numeric:tabular-nums}.rulerAnswers button.wrong{background:#fff0f3;color:#b52f55;border-color:#e8afbe;text-decoration:line-through;opacity:1}.rulerAnswers button.good{background:#eaf8f0;color:#18734d;border-color:#acd5bf;opacity:1}.rulerCustom{margin:14px 0;background:#ffffff90;border:1px solid #e8e1f4;border-radius:14px;padding:12px;font-size:12px}.rulerCustom summary{cursor:pointer;font-weight:800;color:#6d59ba;min-height:24px}.rulerCustom form{padding-top:12px}.rulerCustom form>div{display:flex;gap:8px}.rulerCustom input{min-width:0;width:100%;font:inherit;font-size:18px;border:1px solid #dfd5f3;border-radius:10px;padding:10px;color:#443472;background:white}.rulerFoot{font-size:11px;line-height:1.6;text-align:center;color:#8b819c}#rulerDialog .pickerOption{min-height:48px}.graduationsLink{display:block;text-align:left;text-decoration:none;padding:14px;margin-top:18px;border:1.5px solid #e4dcfa;border-radius:14px;background:#f7f4ff;color:#5e49b4;font-weight:800;font-size:14px}.graduationsLink small{display:block;font-weight:500;margin-top:4px;line-height:1.4;font-size:12px}
@media(max-width:420px){.rulerCard{padding:12px}.rulerBoard{height:170px}.rulerLabels .rulerLabel{top:116px}.rulerLabels .rulerLabel.above{top:41px}#rulerHits{top:57px;height:58px}.rulerTitle{margin-top:12px}.rulerModes{margin-bottom:8px}.rulerMission strong{font-size:29px}.rulerMission .badge{font-size:10px}.rulerCard>p{font-size:12px}.rulerMeta{font-size:10px}.rulerCard .rulerFeedback{min-height:34px;margin:8px 0}.rulerTools{gap:10px}.rulerModes button{font-size:12px}}
@media(orientation:landscape) and (max-height:520px){.rulerBoard{height:170px}.rulerShell{max-width:900px}.rulerLabel{top:116px}.rulerLabel.above{top:41px}#rulerHits{top:57px;height:58px}}
@media(max-width:600px) and (max-height:740px){.rulerShell{padding-top:max(6px,env(safe-area-inset-top))}.rulerHeader .outline{padding:7px 9px}.rulerTitle{margin:8px 0}.rulerTitle .eyebrow{display:none}.rulerTitle h1{font-size:23px}.rulerTitle .tinyBtn{padding:7px 9px}.rulerModes button{min-height:36px}.rulerMission strong{font-size:25px}.rulerCard{padding:10px}.rulerCard>p{margin:5px 0}.rulerBoard{height:108px}.rulerLabel,.rulerLabels .rulerLabel{top:77px}.rulerLabel.above,.rulerLabels .rulerLabel.above{top:17px}#rulerHits{top:30px;height:48px}.rulerMeta{padding-top:5px}.rulerCard .rulerFeedback{min-height:0;margin:5px 0}.rulerFeedback:empty{display:none}.rulerAnswers{margin:8px 0;gap:6px}.rulerAnswers button{min-height:42px;font-size:21px}.rulerTools{gap:7px}.rulerButtons button{min-height:36px;padding:7px}.rulerActions{margin-top:7px}.rulerActions button{min-height:36px;padding:7px}.rulerCustom{margin:8px 0;padding:9px}.rulerFoot{margin:8px 0;font-size:10px}}

.rulerBoard{overflow:hidden}.rulerVisual{position:absolute;inset:0;transform-origin:0 50%;pointer-events:none}.rulerVisual svg{display:block}.rulerZoomGhost{z-index:1}.rulerBoard.isZooming #rulerHits{pointer-events:none}.rulerBoard.isZooming .rulerVisual{will-change:transform,opacity}

.rulerVisual .rulerLabel{transform-origin:0 50%;transform:scaleX(var(--label-scale,1)) translateX(-50%)}.rulerVisual .rulerLabel.end:first-child{transform:scaleX(var(--label-scale,1))}.rulerVisual .rulerLabel.end:last-child{transform:scaleX(var(--label-scale,1)) translateX(-100%)}

.rulerCourse{padding:0;background:#f8f6ff}.rulerCourse .rulerShell{padding:0;max-width:none}.rulerCourse .rulerHeader,.rulerCourse .rulerTitle,.rulerCourse .rulerModes,.rulerCourse .rulerCustom,.rulerCourse .rulerFoot,.rulerCourse .rulerActions,.rulerCourse #rulerReset,.rulerCourse #rulerScore,.rulerCourse .rulerToggle{display:none!important}.rulerCourse .rulerCard{padding:10px;margin:0}.rulerCourse .rulerBoard{height:130px}.rulerCourse .rulerFeedback{margin:4px 0;min-height:16px}.rulerCourse .rulerTools{margin-top:6px}.rulerCourse .rulerMission strong{font-size:30px}.rulerCourse #rulerInstruction{margin:7px 0;font-size:12px}