:root{--ink:#263d73;--blue:#137abc;--purple:#743cbe;--gold:#ffce42;--coral:#e65335;--green:#347d37}html,body{height:100%;overflow:hidden}body{background:#d9f5ff;color:var(--ink);font-family:'Segoe UI',sans-serif}#reader{height:100dvh;display:flex;flex-direction:column}header{flex:none;padding:12px 28px;min-height:83px;background:linear-gradient(110deg,#773cce,#a035b4);border-bottom:5px solid #ffce42;gap:22px;color:white}header .brand{display:block;flex:none;text-align:left;background:transparent;color:white;padding:0;box-shadow:none;border:0;border-radius:0;font-size:24px;font-weight:800;line-height:1.1}.brand small{display:block;font-size:10px;letter-spacing:1.4px;margin:7px 0 0;font-weight:500}.chapter{flex:1;border-left:1px solid #ffffff55;padding-left:22px;font-size:11px;color:#ffecca;min-width:0}.chapter b{display:block;font-size:21px;color:white;line-height:1.3;margin-top:3px}.top-actions{gap:8px}.top-actions button{color:white;background:#ffffff25;border:1px solid #ffffff45;font-size:12px;padding:9px 11px;min-height:42px}.top-actions #film{background:#ffdd62;color:#57367c}.top-actions #contents{background:#ffffff25;color:white;font-size:12px}.top-actions button[aria-pressed=true]{background:#ffdf70;color:#493267}.hint{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:37px;background:#fff4b8;border-bottom:1px solid #ffdf68;padding:6px 28px;font-size:12px;color:#413866;gap:12px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 13px}.dot:first-child{margin-left:0}.coral{background:var(--coral)}.blue{background:var(--blue)}.green{background:var(--green)}#progress{font-size:12px;margin:0;color:#63368e;font-weight:650}main#viewport{flex:1;min-height:0;max-width:none;width:100%;display:block;padding:12px 16px;overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 12% 22%,#fff8b6 0 50px,transparent 52px),radial-gradient(circle at 91% 76%,#fbe1fa 0 80px,transparent 82px),linear-gradient(140deg,#ccf2ff,#e8faff 50%,#dcf6c4)}#bookArea{position:relative;margin:auto;max-width:none;filter:drop-shadow(0 8px 15px #30456c38)}#book{background:transparent}#bookArea:after{content:none}.leaf{background:white;border:0;overflow:hidden}.leaf.empty-leaf{background:transparent}.printed-page{display:block;width:100%;height:100%;object-fit:fill;user-select:none}.stf__parent{height:100%!important}.leaf.--left:not(.empty-leaf):after,.leaf.--right:not(.empty-leaf):after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,#45245515,transparent 4%)}.leaf.--right:not(.empty-leaf):after{background:linear-gradient(90deg,#4524551c,transparent 4%)}#pageActivities{flex:none;display:flex;justify-content:center;align-items:center;gap:22px;padding:9px 16px;min-height:63px;background:#f4fcff;border-top:1px solid #b9deeb;overflow:auto}.page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.page-actions>span{font-size:11px;color:#556786;font-weight:700;white-space:nowrap}.page-actions button{background:#438a25;color:white;border-radius:11px;box-shadow:0 3px 0 #285e18;font-size:12px;min-height:40px;padding:8px 13px}.page-actions .watch{background:#ed5438;box-shadow:0 3px 0 #a93a26}footer{flex:none;position:static;background:linear-gradient(100deg,#743ccd,#973abc);border-top:5px solid #ffce42;color:white;gap:12px;padding:12px;min-height:77px;backdrop-filter:none}footer button{background:#ffffff22;border:1px solid #ffffff35;color:white;border-radius:10px;min-width:44px;font-size:14px;min-height:44px;padding:8px 13px;box-shadow:none}footer #prev,footer #next{background:#ffce42;color:#4e327e;box-shadow:0 3px 0 #e9aa21;font-size:20px;min-width:56px}footer #zoomIn{background:#bcf082;color:#315333}footer select{height:42px;min-width:56px;max-width:74px;padding:5px 8px;color:#5b357b;background:#fff5ce;border:0;font-size:15px;border-radius:8px}.page-picker{display:flex;align-items:center;gap:8px;white-space:nowrap}.page-picker label{font-size:11px;font-weight:bold}.page-picker #pageEnd{min-width:32px;font-size:15px;font-weight:700}.separator{width:1px;height:28px;background:#ffffff40;margin:0 2px}.zoom-tools{display:flex;gap:7px}#fit{min-width:63px}#viewMode[aria-pressed=true]{background:#ffde70;color:#55357e}dialog{border:3px solid #ffe077;border-radius:23px;background:#fffefa;box-shadow:0 24px 80px #40246e50;width:min(960px,calc(100vw - 22px))}dialog::backdrop{background:#47327dba}.modal-head{background:linear-gradient(100deg,#fff1a4,#ffe1eb);border-bottom:3px solid #ffd67b}.modal-head h2{color:#71349b}.modal-head small{color:#65436f}.modal-head button{background:#fff8d6;color:#64318b;box-shadow:0 3px 0 #e6cb89}#modalBody{background:linear-gradient(150deg,#fffefa,#fffaf0)}button.primary{background:#743cbe;color:white;box-shadow:0 3px 0 #4d2585}button.secondary,#retry,#replayFilm{background:#ffde65;color:#5f421b;box-shadow:0 3px 0 #e6b73d}.match-column button{border-color:#b8d8ee;background:#eaf7ff}.match-column:nth-child(2) button{border-color:#edc9e4;background:#fff0f9}.match-column button.correct{background:#e4f8c6;border-color:#74a93b}.feedback{background:#e4f6cd;color:#30582d;border-left:5px solid #78ad43}.word-list span{background:#fff0ad}.word-list span:nth-child(3n+2){background:#dff7ff}.word-list span:nth-child(3n+3){background:#f5dffb}.film-scenes button{background:#ecdcff;color:#563074}.revision-notice{padding:14px 18px;border-radius:10px;background:#fff0ad;color:#70572f;font-size:15px;margin:0 0 18px}.grok-preview{margin-top:22px;border-top:1px solid #dce0d1;padding:18px 0}.grok-preview summary{font-weight:bold;cursor:pointer}.grok-preview p{font-size:14px}.activity-links button{background:#eee0ff;border-color:#ac70de;color:#563074}#toast{background:#633598;border:2px solid #ffdf70}
@media(max-width:850px){header{padding:10px 14px;gap:12px;min-height:74px}.brand small{font-size:8px;letter-spacing:.6px}header .brand{font-size:18px}.chapter{padding-left:12px}.chapter b{font-size:17px}.top-actions{gap:5px}.top-actions button{font-size:11px;padding:7px}.hint{padding:6px 14px}.page-actions button{font-size:11px;padding:8px}#pageActivities{gap:14px}.top-actions #contents span,.top-actions #film span{display:none}}
@media(max-width:600px){header{padding:9px 10px;gap:8px;min-height:68px;flex-wrap:wrap}.chapter{display:none}header .brand{font-size:17px;flex:1}.brand small{font-size:7px;letter-spacing:.4px}.top-actions button{padding:6px;font-size:10px;min-height:36px;border-radius:8px}.top-actions #contents,.top-actions #film{font-size:14px}.hint{font-size:10px;min-height:31px;padding:5px 10px;gap:6px}#progress{font-size:9px}.dot{width:7px;height:7px;margin-left:7px}main#viewport{padding:12px 16px}.page-actions>span{font-size:9px}.page-actions{gap:5px}.page-actions button{font-size:10px;padding:6px 8px;min-height:36px}#pageActivities{padding:7px 8px;gap:10px;min-height:55px;max-height:115px;align-items:flex-start}footer{padding:8px 6px;gap:6px;min-height:68px;flex-wrap:wrap}footer #prev,footer #next{min-width:40px;font-size:17px;padding:6px}footer button{min-width:36px;min-height:40px;font-size:11px;padding:6px 8px}.page-picker{gap:4px}.page-picker label{font-size:9px}footer select{min-width:48px;max-width:50px;font-size:12px;height:40px;padding:4px}.page-picker #pageEnd{min-width:25px;font-size:12px}.zoom-tools{gap:4px}#fit{min-width:42px}.separator{display:none}#viewMode{min-height:36px}.modal-head h2{font-size:21px}.modal-head{padding:14px}.word-grid button{min-height:32px}#modalBody{padding:16px}}
@media(max-width:370px){header .brand{font-size:14px}.top-actions{gap:3px}.top-actions button{font-size:9px;padding:5px}.top-actions #contents,.top-actions #film{font-size:12px}.brand small{font-size:6px}.hint{font-size:9px}#progress{font-size:8px}footer{gap:4px}footer #prev,footer #next{min-width:34px}.page-picker label{display:none}footer button{min-width:32px;padding:6px}#fit{min-width:36px}.word-grid button{min-height:29px}}