@import url('/account/rounded-font.css');
html{scrollbar-color:#167f8c66 transparent;scrollbar-width:thin}body.has-reading-rail{padding-inline-end:0}#app{overflow-anchor:none}#class-content,.studio-body,.class-hmw,.diagram-tabs,.screen-tabs,.class-gate,.challenge,.joint-screen{scroll-margin-top:24px}.account-bar{scroll-margin-top:0}
/* A narrow, transparent hit area; controls fade in without shifting lesson layout. */
.reading-rail{position:fixed;z-index:80;right:10px;top:50%;transform:translateY(-50%);width:24px;padding:6px 0;border:0;border-radius:999px;background:transparent;box-shadow:none;color:#153b55;font:12px/1.5 var(--body);transition:background .2s ease,box-shadow .2s ease,width .2s ease}.reading-controls{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.reading-controls>p{display:none}.reading-rail button{display:flex;align-items:center;justify-content:center;width:28px;min-width:0;min-height:28px;padding:3px;border:0;border-radius:999px;background:transparent;color:#153b55;font:13px/1.5 var(--body);cursor:pointer;transition:opacity .18s ease,background .18s ease,transform .18s ease}.reading-rail button:hover{background:#153b550c}.reading-rail :is(button,input):focus-visible{outline:2px solid #078895;outline-offset:3px}.reading-controls>[data-rail]{font-size:18px;opacity:0;visibility:hidden;pointer-events:none}.rail-slider{display:flex;align-items:center;justify-content:center;margin:0!important;padding:0!important;width:24px;height:156px}.rail-slider input{writing-mode:vertical-lr;direction:ltr;appearance:none;-webkit-appearance:none;cursor:ns-resize;width:24px!important;height:156px!important;min-height:0!important;max-width:none!important;min-width:0!important;padding:0!important;margin:0!important;background:transparent;border:0!important;border-radius:0!important;touch-action:none;opacity:.48;transition:opacity .18s ease}.rail-slider input::-webkit-slider-runnable-track{width:3px;height:100%;border-radius:999px;background:#153b5526}.rail-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:26px;border:0;border-radius:999px;background:#167f8c;box-shadow:0 1px 4px #153b5515;transition:background .18s ease}.rail-slider input::-moz-range-track{width:3px;border-radius:999px;background:#153b5526}.rail-slider input::-moz-range-thumb{width:8px;height:26px;border:0;border-radius:999px;background:#167f8c}.rail-percent{position:absolute;right:38px;top:44%;padding:2px 6px;border-radius:5px;background:#153b55df;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .18s ease}.rail-shortcuts{position:absolute;right:38px;bottom:0;display:flex;flex-direction:column;gap:3px;padding:4px;border:1px solid #153b5510;border-radius:12px;background:#fffdf6eb;box-shadow:0 5px 16px #153b550c;backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateX(5px);transition:opacity .18s ease,transform .18s ease,visibility .18s}.rail-shortcuts button{width:36px;min-height:28px;font-size:12px;white-space:nowrap}.rail-toggle{display:none!important}.rail-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.reading-rail:focus-within,.reading-rail.is-open{width:32px;background:#fffdf6d9;box-shadow:0 4px 18px #153b5510;backdrop-filter:blur(12px)}.reading-rail:focus-within .rail-slider input,.reading-rail.is-open .rail-slider input{opacity:1}.reading-rail:focus-within .reading-controls>[data-rail],.reading-rail.is-open .reading-controls>[data-rail]{opacity:1;visibility:visible;pointer-events:auto}.reading-rail:focus-within .rail-shortcuts,.reading-rail.is-open .rail-shortcuts{opacity:1;visibility:visible;transform:none}.reading-rail:focus-within .rail-percent,.reading-rail.is-open .rail-percent{opacity:1}
@media(hover:hover) and (pointer:fine){.reading-rail:hover{width:32px;background:#fffdf6d9;box-shadow:0 4px 18px #153b5510;backdrop-filter:blur(12px)}.reading-rail:hover .rail-slider input{opacity:1}.reading-rail:hover .reading-controls>[data-rail]{opacity:1;visibility:visible;pointer-events:auto}.reading-rail:hover .rail-shortcuts{opacity:1;visibility:visible;transform:none}.reading-rail:hover .rail-percent{opacity:1}}
@media(max-width:1000px){body.has-reading-rail{padding-inline-end:0;padding-bottom:56px}.reading-rail{right:10px;top:auto;bottom:18px;transform:none;width:38px;padding:0;border-radius:999px;background:#fffdf6d9;box-shadow:0 3px 14px #153b5514;backdrop-filter:blur(12px)}.rail-toggle{display:flex!important;width:38px!important;height:38px;font-size:20px!important;padding:0!important}.rail-toggle span{display:none}.reading-controls{display:none}.reading-rail.is-open{width:38px;padding:4px 0}.reading-rail.is-open .reading-controls{display:flex}.reading-rail.is-open .rail-toggle{height:30px;margin-bottom:3px}.rail-slider,.rail-slider input{height:124px!important}.rail-shortcuts{right:44px}.rail-percent{right:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reading-rail,.reading-rail *{transition:none!important}}@media print{.reading-rail{display:none!important}body.has-reading-rail{padding:0}}
.rail-shortcuts::after{content:'';position:absolute;top:0;bottom:0;right:-12px;width:12px}@media(max-width:1000px){.reading-rail,.reading-rail:hover,.reading-rail:focus-within{width:38px}}
.rail-percent{white-space:nowrap;min-width:30px;text-align:center}