:root{--frise:#06b6d4;--frise-dark:#0e7490;--frise-ink:#08738c;--frise-pale:#e8faff;--ink:#171435;--muted:#67718d;--violet:#7342ed;--navy:#1c1647;--panel-width:470px;--top-height:68px;--bottom-height:108px}
*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden;background:#181432;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #8782ff;outline-offset:3px}button{border:0}button svg{pointer-events:none}p,h1,h2,h3{margin:0}.reader-app{position:relative;isolation:isolate;height:100dvh;width:100%;background:radial-gradient(ellipse at 40% 40%,#3a3659 0,#201b3c 62%,#18132f 100%);overflow:hidden}.reader-top{height:var(--top-height);display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,38%) minmax(70px,1fr);gap:18px;align-items:center;background:#1b1645;color:white;border-bottom:1px solid #534a79;padding:0 20px;position:relative;z-index:20}.reader-title{display:flex;gap:11px;min-width:0;align-items:center}.frise-symbol{width:35px;height:35px;border-radius:10px;background:#ffffff12;color:#83edff;display:grid;place-items:center;flex-shrink:0;font-size:23px}.reader-title h1{font-size:17px;font-weight:700;line-height:1.2}.reader-title p{font-size:11px;color:#c4bddc;margin-top:4px}.reader-progress{min-width:0;text-align:center;font-size:12px;font-weight:700}.reader-progress-track{height:7px;border-radius:8px;background:#433b69;margin-top:8px;overflow:hidden}.reader-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#03b7d3,#73ecf9);border-radius:8px;transition:width .25s}.icon-button{height:44px;width:44px;display:grid;place-items:center;background:#ffffff13;color:white;border-radius:50%;font-size:28px}.exit{justify-self:end}.reader-stage{position:absolute;inset:var(--top-height) 0 var(--bottom-height) 0;overflow:hidden;transition:right .32s ease}.has-panel .reader-stage,.has-panel .reader-bottom{right:calc(var(--panel-width) + 34px)}.viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline-offset:-4px!important}.viewport:active{cursor:grabbing}.world{position:absolute;left:0;top:0;width:1916px;height:821px;transform-origin:0 0;will-change:transform;transition:transform .36s cubic-bezier(.22,.75,.25,1);box-shadow:0 20px 80px #0005}.world img{display:block;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}.dragging .world{transition:none}.world svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.period-shape{fill:transparent;stroke:transparent;stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .16s,stroke .16s;outline:none}.period-shape:hover,.period-shape:focus,.period-shape.is-current{stroke:#9cf5ff;fill:#04c9e520;filter:drop-shadow(0 0 5px #05bed477)}.zones-visible .period-shape{stroke:#fff9;stroke-width:2;fill:#03cee815}.zones-visible .period-shape.is-current{stroke:#06f2ff;stroke-width:3;fill:#03cee838}.event-hit{fill:transparent;stroke:#fff9;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:pointer;outline:none}.event-hit:hover,.event-hit:focus,.event-hit.is-current{fill:#06c0e446;stroke:#00ddff;stroke-width:3}.event-hit.in-period{stroke:#00d9ee;stroke-width:2.5}.view-controls{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:3px;max-width:calc(100% - 22px);padding:5px;border:1px solid #ffffff2b;border-radius:14px;box-shadow:0 7px 25px #0003;background:#221d3eed;color:#f5f7ff;backdrop-filter:blur(12px)}.view-controls button{height:35px;min-width:35px;padding:7px 10px;border-radius:9px;background:transparent;color:inherit;font-size:15px;white-space:nowrap}.view-controls button span{font-size:11px;font-weight:700;margin-left:4px}.view-controls button:hover{background:#ffffff1c}.view-controls button.active,.view-controls button[aria-pressed=true]{background:#cffaff;color:#095062}.zoom-value{font-size:10px;min-width:35px;text-align:center;color:#dfdef1}.control-separator{height:20px;width:1px;background:#ffffff25;margin:0 2px}.reader-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#221d3ecc;color:#efebff;backdrop-filter:blur(6px);border:1px solid #ffffff20;border-radius:999px;padding:9px 15px;pointer-events:none;text-align:center;font-size:11px;line-height:1.4;max-width:calc(100% - 30px);white-space:nowrap;z-index:5;transition:opacity .2s}.reader-hint.fade{opacity:0}.period-arrow{position:absolute;top:48%;width:50px;height:50px;display:grid;place-items:center;z-index:4;border-radius:50%;color:#fff;background:#251e49d9;border:1px solid #a7a0c95c;font-size:37px;box-shadow:0 6px 26px #0004}.period-arrow:hover{background:#086f86}.period-arrow.left{left:15px}.period-arrow.right{right:15px}.hover-label{position:absolute;z-index:6;pointer-events:none;transform:translate(-50%,-100%);background:#1b164aea;border:1px solid #9bf1ff9c;color:#fff;padding:9px 12px;border-radius:12px;font-size:12px;box-shadow:0 5px 20px #0003;max-width:270px;text-align:center;line-height:1.45}.hover-label strong{display:block}.hover-label span{font-size:10px;color:#b8f3ff}.loading{position:absolute;inset:0;background:#1c173df0;display:grid;place-items:center;color:white;text-align:center;padding:30px;z-index:9}.loading[hidden]{display:none}
.reader-bottom{position:absolute;inset:auto 0 0 0;height:var(--bottom-height);padding:13px 18px;display:flex;gap:20px;align-items:center;justify-content:space-between;background:#1c1647;color:white;border-top:1px solid #ffffff20;z-index:10;transition:right .32s ease;container-type:inline-size}.current-period{flex:0 1 245px;min-width:100px}.current-period small{display:block;font-size:9px;letter-spacing:1px;color:#9cc7dc;font-weight:700}.current-period strong{display:block;font-size:14px;line-height:1.2;margin:4px 0}.current-period>span{font-size:10px;color:#c1bdd6;line-height:1.3;display:block}.period-nav{display:flex;gap:9px;flex-shrink:0}.period-nav button{display:flex;flex-direction:column;gap:6px;align-items:center;background:transparent;color:#cdc9e6;padding:4px 1px;min-width:55px;font-size:9px}.period-nav button b{display:grid;place-items:center;width:31px;height:31px;background:#3c3162;border:1px solid #8e83ba5c;border-radius:50%;font-size:12px;position:relative}.period-nav button[aria-current=true]{color:#fff}.period-nav button[aria-current=true] b{background:#087b94;border-color:#8beefe;box-shadow:0 0 0 4px #05c6e023}.period-nav button.read b::after{content:'✓';font-size:9px;color:#072d31;background:#89ecda;border-radius:50%;width:14px;height:14px;position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center}.miniature{flex:0 1 186px;min-width:120px;max-width:205px}.miniature button{display:block;width:100%;position:relative;padding:0;overflow:hidden;border:1px solid #7f77a6;border-radius:6px;background:#2d264b;touch-action:none}.miniature img{display:block;width:100%;height:auto;opacity:.6;pointer-events:none}.miniature span{position:absolute;border:2px solid #72efff;background:#8ef9ff18;pointer-events:none;box-shadow:0 0 0 500px #211c382b}.miniature small{font-size:8px;color:#bbb4d1;display:block;text-align:center;margin-top:4px}.has-panel .period-nav span{display:none}.has-panel .period-nav button{min-width:40px}.has-panel .miniature{max-width:155px}.has-panel .current-period{max-width:205px}
.lesson-panel{position:absolute;right:17px;top:calc(var(--top-height) + 16px);bottom:17px;width:var(--panel-width);background:#fff;border:1px solid #e2e4f1;border-radius:25px;z-index:15;box-shadow:0 25px 70px #08061e5c;display:flex;flex-direction:column;overflow:hidden}.lesson-panel[hidden]{display:none}.lesson-head{padding:21px 18px 14px 22px;display:flex;gap:12px;align-items:flex-start;background:#fff;flex-shrink:0}.lesson-icon{width:47px;height:47px;border-radius:15px;background:#e5e3ff;display:grid;place-items:center;color:#5541a6;font-weight:700;flex-shrink:0;font-size:18px}.lesson-heading{min-width:0;padding-top:3px}.lesson-heading>span{font-size:10px;letter-spacing:1.2px;color:#076f86;font-weight:700}.lesson-heading h2{font-size:24px;letter-spacing:-.6px;line-height:1.12;margin:5px 0 6px;color:#171435}.lesson-heading p{font-size:12px;color:#667393}.close-panel{margin-left:auto;flex:0 0 35px;height:35px;border-radius:12px;background:#fff;color:#312e54;border:1px solid #d1d5e5;font-size:24px;line-height:1}.lesson-tabs{display:flex;padding:0 22px;gap:6px;border-bottom:1px solid #ebedf5;flex-shrink:0}.lesson-tabs button{background:transparent;padding:11px 13px;font-size:12px;color:#65708e;border-bottom:3px solid transparent;font-weight:bold}.lesson-tabs button.on{color:#0d748e;border-bottom-color:#08aec8}.lesson-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c2d7e2 transparent;padding:21px 23px 27px;scroll-behavior:smooth}.lesson-objective{font-size:14px;line-height:1.55;color:#47526c;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid #e8ecf2}.lesson-objective strong{color:#171435}.lesson-observe{padding:14px 15px;background:#f3f1ff;border-radius:13px;font-size:13px;line-height:1.6;color:#525a81;margin-bottom:22px}.lesson-observe b{display:block;font-size:12px;color:#4b3885;margin-bottom:4px}.lesson-section{margin:21px 0}.lesson-section h3{font-size:18px;letter-spacing:-.3px;line-height:1.3;color:#172148;margin-bottom:10px}.lesson-section p{font-size:14.5px;line-height:1.68;color:#424e65;margin:0 0 11px}.lesson-example{border-left:3px solid #09b8d0;background:#edfbff;padding:14px 16px;border-radius:0 12px 12px 0;margin:23px 0;font-size:13px;line-height:1.6;color:#34546a}.lesson-example h3{font-size:14px;line-height:1.3;margin-bottom:6px;color:#0c6e87}.lesson-remember{background:#edf9f5;border:1px solid #dcefe5;padding:15px;border-radius:14px;margin:22px 0;color:#236554}.lesson-remember h3{font-size:15px;margin-bottom:10px}.lesson-remember ul{padding-left:18px;margin:0;font-size:13px;line-height:1.55}.lesson-remember li{margin:7px 0}.lesson-nuance{padding:14px 15px;border:1px solid #e1dafa;border-radius:12px;background:#faf7ff;font-size:13px;line-height:1.6;color:#615384;margin:22px 0}.lesson-nuance b{display:block;color:#5c3b91;margin-bottom:5px}.lesson-glossary{border:1px solid #e4e7f3;border-radius:12px;margin:20px 0}.lesson-glossary summary{padding:14px;color:#293456;font-size:14px;font-weight:bold;cursor:pointer}.lesson-glossary dl{margin:0;padding:0 15px 15px}.lesson-glossary dt{color:#145e75;font-size:13px;font-weight:bold;margin-top:13px}.lesson-glossary dd{font-size:13px;line-height:1.6;color:#525f78;margin:4px 0 0}.lesson-glossary summary:hover{background:#f5faff}.lesson-source{border-top:1px solid #e9ecf4;padding-top:14px;font-size:10px;color:#798297;line-height:1.5}.lesson-source a{display:block;color:#4b6098;margin:6px 0;text-decoration:underline;overflow-wrap:anywhere}.lesson-actions{flex-shrink:0;border-top:1px solid #e8edf4;background:linear-gradient(180deg,#fff,#f9faff);padding:13px 20px 12px}.lesson-primary{display:block;width:100%;border-radius:13px;background:linear-gradient(100deg,#7b1cf1,#bd40a5);color:#fff;padding:13px;font-size:14px;font-weight:700;box-shadow:0 7px 20px #9129e82b}.lesson-primary.is-read{background:linear-gradient(100deg,#087b94,#0c7b6d)}.lesson-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:10px}.lesson-pagination button{padding:8px 11px;background:#f0f2f8;color:#4e5974;font-size:11px;border-radius:10px}.lesson-pagination span{font-size:10px;color:#6e7b96}.event-focus{border:1px solid #a6dae7;background:linear-gradient(135deg,#eafbff,#f7fbff);border-radius:14px;padding:15px;margin:0 0 20px}.event-focus small{font-size:10px;letter-spacing:.8px;color:#0f7892;font-weight:bold}.event-focus h3{margin:8px 0;font-size:20px;line-height:1.2;color:#14334f;letter-spacing:-.4px}.event-focus p{font-size:13px;line-height:1.6;color:#435b70}.events-list{display:grid;gap:6px;margin:10px 0 22px}.events-list button{text-align:left;padding:11px;background:#f4f7fc;border:1px solid #e3e9f4;border-radius:10px;color:#233154;display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12px}.events-list button b{color:#0e7490;min-width:67px}.events-list button.is-current{border-color:#73c8db;background:#e9f9fd}.check-card{border:1px solid #d3e1ed;border-radius:14px;padding:16px;margin:25px 0;background:#f7fbff}.check-card>small{color:#0e7490;font-size:10px;font-weight:bold;letter-spacing:1px}.check-card h3{font-size:16px;line-height:1.4;margin:8px 0 15px;color:#243357}.check-answers{display:grid;gap:8px}.check-answers button{text-align:left;padding:12px;border:1px solid #dce3ec;border-radius:10px;color:#3c4b67;background:white;font-size:13px;line-height:1.4}.check-answers button:hover{border-color:#59b5cb}.check-answers button.correct{background:#e3f8ef;border-color:#50b68b;color:#196d4b}.check-answers button.wrong{background:#fff0f4;border-color:#e4a1b6;color:#8f3550}.check-feedback{font-size:13px;line-height:1.55;margin-top:13px;color:#31616f}.check-feedback:empty{display:none}.exercise-accordion{margin:10px 0;border:1px solid #e0e5f0;border-radius:13px;overflow:hidden}.exercise-accordion>summary{padding:14px;font-size:13px;font-weight:bold;cursor:pointer;background:#f4f6fc;color:#364368}.exercise-accordion allo-exercise{padding:0;width:100%;min-width:0}.exercise-note{font-size:11px;color:#65718b;line-height:1.55;margin:12px 0}.reader-stage.free .period-arrow{display:none}.reader-stage.free~.reader-bottom .period-nav{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1180px){:root{--panel-width:420px}.reader-title h1{font-size:15px}.reader-top{grid-template-columns:minmax(0,1fr) minmax(170px,30%) 52px}.period-nav span{display:none}.period-nav button{min-width:40px}.miniature{max-width:160px}.has-panel .miniature{display:none}.reader-hint{max-width:80%;white-space:normal}.has-panel .view-controls button span{display:none}.has-panel .view-controls{gap:1px}.lesson-heading h2{font-size:22px}.lesson-scroll{padding:19px 20px 24px}.lesson-head{padding:18px 17px 14px}.has-panel .reader-bottom{gap:8px}.has-panel .current-period{max-width:175px}}
@media(max-width:900px){.reader-progress{display:none}.reader-top{grid-template-columns:1fr 48px}.has-panel .reader-stage,.has-panel .reader-bottom{right:0}.lesson-panel{width:min(470px,calc(100% - 30px));right:15px;top:calc(var(--top-height) + 12px);bottom:12px}.has-panel .reader-stage::after{content:'';position:absolute;inset:0;background:#110b2873;pointer-events:none;z-index:8}.has-panel .reader-bottom{filter:brightness(.65)}.has-panel .miniature{display:block}.reader-bottom .current-period{flex-basis:190px}.reader-hint{font-size:10px}.has-panel .view-controls button span{display:inline}.lesson-panel{box-shadow:-14px 4px 55px #08061e66}}
@media(max-width:600px){:root{--top-height:63px;--bottom-height:121px}.reader-top{padding:0 12px;gap:10px}.reader-title{gap:8px}.reader-title h1{font-size:14px;max-width:255px}.reader-title p{font-size:10px}.frise-symbol{width:31px;height:31px;font-size:19px}.reader-top .icon-button{width:40px;height:40px}.reader-bottom{flex-direction:column;justify-content:center;gap:4px;padding:8px 12px 8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.reader-bottom .current-period{flex:none;text-align:center;width:100%;max-width:none}.current-period small{display:none}.current-period strong{font-size:12px;margin:0 0 3px}.current-period>span{font-size:10px}.period-nav{gap:14px}.period-nav button{min-width:44px;min-height:44px;justify-content:center;padding:4px}.period-nav button b{width:30px;height:30px}.reader-bottom .miniature,.has-panel .reader-bottom .miniature{display:none}.period-arrow{width:43px;height:43px;font-size:32px}.period-arrow.left{left:9px}.period-arrow.right{right:9px}.view-controls{top:12px;padding:4px;gap:0}.view-controls button{height:34px;min-width:33px;padding:6px 8px;font-size:15px}.view-controls button span,.has-panel .view-controls button span{display:none}.view-controls #fit span,.has-panel .view-controls #fit span{display:inline;font-size:10px}.zoom-value{font-size:9px;min-width:30px}.reader-hint{padding:7px 11px;font-size:10px;max-width:86%;bottom:10px}.lesson-panel{width:100%;top:var(--top-height);bottom:0;right:0;border-radius:22px 22px 0 0;border:0}.lesson-head{padding:17px 17px 13px}.lesson-icon{height:41px;width:41px;border-radius:12px;font-size:16px}.lesson-heading h2{font-size:23px}.lesson-heading>span{font-size:9px;letter-spacing:.7px}.lesson-heading p{font-size:11px}.lesson-tabs{padding:0 17px}.lesson-scroll{padding:18px 20px}.lesson-actions{padding:12px 17px max(11px,env(safe-area-inset-bottom))}.lesson-primary{font-size:13px}.lesson-pagination{margin-top:6px}.lesson-section p{font-size:14px}.lesson-panel .close-panel{width:35px;height:35px}.hover-label{max-width:210px}.reader-title p{max-width:260px}.has-panel .reader-bottom .current-period{max-width:none}}
@media(prefers-reduced-motion:reduce){.world,.reader-stage,.reader-bottom,.reader-progress-track i{transition:none!important}.lesson-scroll{scroll-behavior:auto}}

/* EdTechFrise R2 — keep navigation arrows away from timeline markers */
.period-arrow{top:82px!important}
@media(max-width:600px){.period-arrow{top:66px!important}}