:root{--ink:#162421;--muted:#5d6c68;--line:#d8e3df;--paper:#fff;--wash:#eef4f1;--green:#153f3a;--green2:#256b5f;--gold:#b17a28;--danger:#a33131;--shadow:0 18px 55px rgba(24,54,48,.11);font-family:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif;color:var(--ink);background:var(--wash)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 5%,rgba(193,220,205,.7),transparent 28rem),linear-gradient(150deg,#f7f9f7,#edf4f1 70%);line-height:1.65}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:1000;padding:.7rem 1rem;background:#fff;color:#000}.skip-link:focus{top:1rem}.app-shell{width:min(1500px,calc(100% - 32px));margin:26px auto 72px}.panel{background:rgba(255,255,255,.92);border:1px solid rgba(205,221,215,.95);border-radius:24px;box-shadow:var(--shadow)}.view[hidden],[hidden]{display:none!important}.eyebrow{margin:0 0 .35rem;color:var(--green2);font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.student-label{font-weight:800}.login-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;min-height:670px}.login-hero,.login-panel{position:relative;padding:clamp(28px,5vw,72px);overflow:hidden}.login-hero{color:#fff;background:linear-gradient(145deg,#0d302d,#246558);display:flex;flex-direction:column;justify-content:center}.login-hero .eyebrow{color:#cfe6d8}.login-hero h1{margin:.3rem 0 1.2rem;font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(2.8rem,6vw,6.4rem);line-height:.97;letter-spacing:-.04em}.login-hero h1 span{color:#e2bc78}.login-hero>p:last-of-type{max-width:690px;font-size:1.08rem}.book-mark{position:absolute;right:-35px;bottom:-25px;width:280px;height:220px;transform:rotate(-8deg);opacity:.45}.book-mark i{position:absolute;inset:0 50% 0 0;border:5px solid #fff;border-radius:18px 4px 4px 18px}.book-mark i:nth-child(2){inset:0 0 0 50%;border-radius:4px 18px 18px 4px}.book-mark b{position:absolute;left:42%;top:25%;font:900 5rem Georgia;color:#e2bc78}.login-panel{display:flex;flex-direction:column;justify-content:center}.login-panel h2{font:700 clamp(2rem,4vw,3.4rem)/1.1 Georgia,"Noto Serif TC",serif;margin:.2rem 0 1rem}.login-panel form{display:grid;gap:18px;margin-top:22px}.login-panel label{display:grid;gap:7px;font-weight:800}.login-panel input{width:100%;padding:14px 16px;border:1px solid #bfcfca;border-radius:12px;font:inherit}.password-field{display:flex;position:relative}.password-field button{position:absolute;right:7px;top:7px;bottom:7px;border:0;border-radius:9px;background:#e8f0ed;font-weight:800}.primary-button,.secondary-button,.header-button,.icon-button,.text-button,.bookmark-button{border:0;border-radius:12px;padding:.78rem 1.05rem;font:800 .92rem/1.2 inherit;cursor:pointer}.primary-button{background:var(--green);color:#fff}.secondary-button,.icon-button{background:#e7efec;color:var(--green)}.text-button{padding:.5rem 0;background:transparent;color:var(--green)}button:disabled{opacity:.55;cursor:not-allowed}.form-status,.submission-status{min-height:1.5em;color:var(--muted)}[data-state="error"],.is-wrong{color:var(--danger)}.dashboard-hero,.exercise-header{padding:clamp(24px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(125deg,#fff,#e3eee9)}.dashboard-hero h1,.exercise-header h1{margin:.2rem 0;font:700 clamp(2.2rem,5vw,4.8rem)/1 Georgia,"Noto Serif TC",serif}.dashboard-count{width:140px;height:140px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-content:center;text-align:center}.dashboard-count strong{font:700 3rem Georgia}.dashboard-count span{font-size:.8rem}.progress-disclosure{width:100%;margin-top:18px;padding:20px 24px;display:flex;justify-content:space-between;text-align:left;color:var(--ink);cursor:pointer}.progress-disclosure span:first-child{display:grid}.progress-disclosure small{color:var(--muted)}.progress-panel{margin-top:12px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:32px}.progress-panel h2{margin:.2rem 0 1rem}.chart{min-height:210px;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;align-items:flex-end;gap:8px;overflow-x:auto}.chart-bar{min-width:36px;flex:1;display:grid;align-items:end;gap:6px;text-align:center}.chart-bar i{display:block;min-height:3px;border-radius:8px 8px 3px 3px;background:linear-gradient(#4f9686,var(--green));height:var(--height)}.chart-bar small{font-size:.65rem;white-space:nowrap}.chart-total{color:var(--muted)}.exercise-list,.history{margin-top:18px;padding:28px}.exercise-list,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.exercise-list h2{margin:0;font:700 2.2rem Georgia}.history-list,.history [data-history-list]{display:grid;gap:10px;margin-top:16px}.history-row{display:flex;justify-content:space-between;gap:20px;padding:14px;border:1px solid var(--line);border-radius:13px}.exercise-header{align-items:flex-start}.timer-card{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:690px}.timer-card>div{display:grid;min-width:110px}.timer-card time{font:800 1.8rem ui-monospace,monospace}.timer-card label{display:flex;gap:6px;align-items:center;font-size:.8rem;font-weight:800}.timer-card select,.timer-card input{padding:.5rem;border:1px solid var(--line);border-radius:8px}.timer-card input[type="number"]{width:64px}.study-toolbar{position:sticky;top:74px;z-index:20;margin-top:14px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px}.translation-control{position:relative}.translation-menu{position:absolute;top:calc(100% + 9px);left:0;width:min(330px,82vw);padding:17px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.translation-menu label{display:block;padding:5px}.translation-menu fieldset{border:0;padding:8px 0 0;margin:8px 0 0;border-top:1px solid var(--line)}.audio-control{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px}.audio-control input[type="range"]{width:min(220px,24vw)}.audio-control label{font-size:.8rem}.audio-control small{color:var(--muted)}.reading-workbench{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:16px;margin-top:16px;align-items:start}.passage-panel,.questions-panel{padding:clamp(20px,3vw,36px)}.questions-panel{position:sticky;top:164px;max-height:calc(100vh - 184px);overflow:auto}.pane-heading{padding-bottom:17px;border-bottom:1px solid var(--line)}.pane-heading h2{margin:0;font:700 2rem Georgia}.passage-copy{font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(1.08rem,1.7vw,1.34rem);line-height:1.9}.passage-paragraph{padding:25px 0;border-bottom:1px solid var(--line)}.passage-paragraph:last-child{border-bottom:0}.paragraph-label{font:900 .72rem Inter,sans-serif;color:var(--gold);letter-spacing:.12em}.passage-text-block{white-space:pre-line}.translation-copy{margin-top:18px;padding:18px;border-left:4px solid var(--gold);background:#fff9ed;border-radius:0 12px 12px 0;font-family:Inter,"Noto Sans TC",sans-serif;font-size:.94em;white-space:pre-line}.skimming-button{margin-top:15px;border:1px solid #b58a45;border-radius:99px;padding:.55rem .9rem;background:transparent;color:#785113;font-weight:900;cursor:pointer}.spoken-word{border-radius:4px;transition:.15s}.spoken-word.is-active{background:#f5dca8;box-shadow:0 0 0 2px #f5dca8}.question-translation-toggle{display:block;margin-top:10px;font-size:.85rem}.question-group-heading{margin:24px 0 8px;padding:10px 12px;border-radius:10px;background:#eaf2ef;font-weight:900}.question-card{padding:19px 0;border-bottom:1px solid var(--line);scroll-margin-top:170px}.question-number{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:7px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.question-prompt{font-weight:750}.question-translation,.option-translation{color:#675a42;font-size:.9rem}.choice-list{display:grid;gap:7px;margin:12px 0}.choice-list label{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:10px}.answer-input{width:100%;padding:12px;border:1px solid #aebfba;border-radius:10px;font:inherit}.question-actions{display:flex;align-items:center;gap:9px;margin-top:10px}.reveal-button{border:0;border-radius:9px;background:#efe5d4;color:#6b491b;padding:.6rem .75rem;font-weight:900;cursor:pointer}.question-result{font-weight:900}.is-correct{color:#127044}.submit-bar{position:sticky;bottom:-36px;margin:25px -36px -36px;padding:18px 36px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}.learning-dialog{width:min(780px,calc(100% - 28px));max-height:85vh;border:0;border-radius:22px;padding:30px;box-shadow:0 30px 100px rgba(0,0,0,.3);overflow:auto}.learning-dialog::backdrop{background:rgba(6,20,18,.6);backdrop-filter:blur(4px)}.dialog-close{float:right;border:0;background:#e9efed;width:40px;height:40px;border-radius:50%;font-size:1.6rem}.learning-dialog h2{font:700 2.1rem Georgia;margin:.2rem 0 1rem}.analysis-section{padding:14px 0;border-bottom:1px solid var(--line)}.analysis-section h3{color:var(--green)}.analysis-quote{padding:12px;border-left:4px solid var(--gold);background:#fff9ed}.answer-banner{padding:13px 16px;border-radius:12px;background:#e0f1e8;color:#0c5c3c;font-weight:900}.bookmark-button{margin-top:20px;background:var(--green);color:#fff}.toast{position:fixed;right:20px;bottom:20px;z-index:1000;max-width:min(380px,calc(100vw - 40px));padding:14px 18px;border-radius:12px;background:#132c29;color:#fff;box-shadow:var(--shadow)}.empty-state{color:var(--muted)}
@media(max-width:1000px){.login-layout{grid-template-columns:1fr}.login-hero{min-height:480px}.progress-panel{grid-template-columns:1fr}.reading-workbench{grid-template-columns:1fr}.questions-panel{position:static;max-height:none}.study-toolbar{position:static;align-items:flex-start}.exercise-header{display:block}.timer-card{justify-content:flex-start;margin-top:20px}}
@media(max-width:650px){.app-shell{width:min(100% - 18px,1500px);margin-top:12px}.panel{border-radius:18px}.login-hero,.login-panel{padding:28px 22px}.login-hero h1{font-size:2.7rem}.dashboard-hero{align-items:flex-start}.dashboard-count{width:86px;height:86px}.dashboard-count strong{font-size:2rem}.exercise-list,.section-heading,.study-toolbar{display:block}.exercise-list button{margin-top:16px;width:100%}.audio-control{justify-content:flex-start;margin-top:12px}.audio-control input[type="range"]{width:150px}.submit-bar{margin:25px -20px -20px;padding:14px 20px;display:grid}.passage-panel,.questions-panel{padding:20px}.history-row{display:grid}.timer-card{display:grid;grid-template-columns:1fr 1fr}.timer-card>div{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Reading practice interaction refinements · 2026-08-25 */
.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.passage-tabs{margin-top:18px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.passage-tabs button{border:0;border-radius:14px;padding:12px 18px;background:transparent;color:var(--muted);font:900 .92rem/1.2 inherit;cursor:pointer}.passage-tabs button[aria-selected="true"]{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(21,63,58,.2)}.empty-passage{margin-top:18px;padding:38px}.empty-passage h2{margin:.15rem 0;font:700 2.2rem Georgia}.exercise-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:9px}.pane-heading-with-action{display:flex;align-items:center;justify-content:space-between;gap:18px}
.timer-card{max-width:none;padding:12px 14px;border:1px solid #cbdcd6;border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(21,63,58,.08)}.timer-display{display:grid;min-width:108px;line-height:1.1}.timer-display span{font-size:.72rem;font-weight:900;color:var(--muted)}.timer-card time{font-size:1.72rem;letter-spacing:.03em}.timer-toggle{min-width:98px;border:0;border-radius:12px;padding:.72rem .9rem;background:var(--green);color:#fff;font:900 .86rem/1 inherit;cursor:pointer}.timer-toggle.is-running{background:#85591c}.control-select{padding:5px 7px 5px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}.timer-card select,.timer-card input,.speed-control select{appearance:none;background:#fff;color:var(--ink);border:1px solid #b8cbc4!important;border-radius:10px!important;font-weight:850;min-height:38px}.control-select select,.speed-control select{padding:.45rem 2rem .45rem .7rem;background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.translation-menu{z-index:40}.hide-translations-button{width:100%;margin-top:10px;padding:.65rem;border:1px solid #d7bd8e;border-radius:10px;background:#fff9ed;color:#714b14;font-weight:900;cursor:pointer}.audio-control{gap:11px}.audio-control input[type="range"]{appearance:none;height:7px;border-radius:99px;background:linear-gradient(90deg,#296f63,#dce8e4)}.audio-control input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.25)}.speed-control{display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 9px;border:1px solid var(--line);border-radius:12px;background:#f8fbfa}.speed-control select{min-height:34px}
.paragraph-heading{min-height:38px;margin-bottom:8px;display:flex;align-items:center;gap:9px}.paragraph-label{margin-right:auto}.paragraph-audio-button{border:1px solid #c9dad4;border-radius:99px;padding:.4rem .68rem;background:#f3f8f6;color:var(--green);font:900 .7rem/1 inherit;cursor:pointer}.paragraph-audio-button:hover{background:var(--green);color:#fff}.scan-tags{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.scan-question-tag{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #dfc772;border-radius:50%;background:#fff1ad;color:#5f4a09;font:900 .72rem/1 Inter,sans-serif}.interactive-word{border-radius:3px;cursor:pointer;transition:background .14s,color .14s,font-weight .14s}.interactive-word:hover{background:#f5e9c9;box-shadow:0 0 0 2px #f5e9c9}.interactive-word.is-bookmarked{font-weight:950;color:#10221e;background:#ffeaa2;box-shadow:0 1px 0 #c59a29}.interactive-word.is-pending{opacity:.55}.spoken-word.is-active{background:#f5dca8;box-shadow:0 0 0 2px #f5dca8}
.choice-list label{cursor:pointer;transition:background .14s,border-color .14s}.choice-list label:hover,.choice-list label:has(input:checked){background:#eef6f3;border-color:#73a99c}.choice-list input{margin-top:.3rem}.question-actions{flex-wrap:wrap}.scan-button{border:1px solid #d5bd72;border-radius:9px;background:#fff7d5;color:#65500d;padding:.6rem .75rem;font-weight:900;cursor:pointer}.scan-button.has-scan{background:#ffec99}.scan-chooser{margin-top:10px;padding:11px;border:1px solid #e7d89a;border-radius:12px;background:#fffbed;display:flex;align-items:center;flex-wrap:wrap;gap:7px}.scan-chooser span{margin-right:4px;font-size:.82rem;font-weight:900}.scan-chooser button{width:36px;height:36px;border:1px solid #dbc36b;border-radius:50%;background:#fff;color:#66510c;font-weight:900;cursor:pointer}.scan-chooser button.is-selected{background:#f4d767;box-shadow:0 0 0 3px #fff1ad}.answer-timestamp{display:block;margin-top:9px;color:#557069;font-weight:800}
.learning-popover{position:fixed;right:20px;bottom:76px;z-index:900;width:min(520px,calc(100vw - 32px));max-height:min(72vh,680px);overflow:auto;padding:26px;border:1px solid #c7d9d3;border-radius:22px;background:rgba(255,255,255,.98);box-shadow:0 24px 75px rgba(8,39,34,.28);opacity:0;transform:translateY(14px);transition:opacity .18s,transform .18s}.learning-popover.is-visible{opacity:1;transform:translateY(0)}.learning-popover h2{margin:.2rem 0 1rem;font:700 1.8rem/1.15 Georgia,"Noto Serif TC",serif}.dialog-close{float:right;cursor:pointer}.analysis-dialog{width:min(650px,calc(100vw - 32px))}.toast{z-index:1100}.bookmark-button{font-weight:950}
@media(max-width:1000px){.exercise-actions{justify-content:flex-start}.timer-card{width:100%;justify-content:flex-start}.paragraph-audio-button{font-size:.67rem}.learning-popover{right:12px;bottom:70px}}
@media(max-width:650px){.passage-tabs{grid-template-columns:1fr}.exercise-actions{display:grid;grid-template-columns:1fr}.exercise-actions .primary-button,.exercise-actions .secondary-button{width:100%;margin:0}.timer-card{display:flex;gap:8px}.timer-display{min-width:90px}.timer-card>div{grid-column:auto}.timer-card label{margin:0}.pane-heading-with-action{align-items:flex-start}.pane-heading-with-action .secondary-button{padding:.65rem}.study-toolbar{display:grid}.audio-control{display:grid;grid-template-columns:auto auto;align-items:center}.audio-control input[type="range"]{grid-column:1/-1;width:100%}.paragraph-heading{align-items:flex-start;flex-wrap:wrap}.paragraph-label{width:100%}.scan-tags{margin-right:auto}.learning-popover{right:8px;bottom:64px;width:calc(100vw - 16px);max-height:70vh;padding:21px}}