.site-header { height:80px; display:flex; align-items:center; gap:var(--size-9); padding:0 var(--size-fluid-4); border-bottom:1px solid var(--line); background:var(--surface); }
.header-nav { height:100%; display:flex; align-items:center; gap:var(--size-7); font-size:14px; }
.nav-active { position:relative; display:flex; align-items:center; height:100%; font-weight:550; }
.nav-active:after { content:''; position:absolute; height:2px; background:var(--accent); bottom:-1px; left:0; right:0; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:var(--size-5); }
.local-badge { color:var(--muted); display:flex; align-items:center; gap:8px; font-size:12px; }
.mobile-menu { display:none; }
.app-layout { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100dvh - 80px); }
.sidebar { display:flex; flex-direction:column; padding:var(--size-7) var(--size-4) var(--size-5); border-right:1px solid var(--line); background:var(--sidebar); }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; margin:0 8px var(--size-4); font-weight:550; font-size:14px; }
.count-badge { display:flex; align-items:center; justify-content:center; font-size:12px; min-width:24px; height:24px; border:1px solid var(--sand-7); border-radius:var(--control-radius); font-weight:400; color:var(--muted); }
.add-button { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--sand-7); background:var(--surface); min-height:46px; width:100%; border-radius:var(--control-radius); font-size:14px; font-weight:550; }
.add-button:hover { border-color:var(--accent); }
.add-button svg { width:18px; }
.library-label { font-size:11px; letter-spacing:1.3px; color:var(--muted); margin:var(--size-7) 8px 12px; }
.library { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow:auto; }
.library-item { text-align:left; padding:var(--size-3) 10px; border:1px solid transparent; border-radius:var(--control-radius); display:flex; align-items:flex-start; gap:10px; width:100%; }
.library-item:hover { background:var(--selected); }
.library-item.active { background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-1); }
.library-item>svg { width:17px; height:18px; color:var(--accent); margin-top:1px; }
.library-item-copy { display:block; min-width:0; flex:1; }
.library-item-title { display:block; font-weight:550; font-size:13px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-item-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:8px; gap:8px; }
.library-empty { font-size:13px; color:var(--muted); line-height:1.7; padding:0 8px; }
.sidebar-note { margin:auto 8px var(--size-8); padding-top:var(--size-9); }
.note-symbol { font-size:40px; line-height:1; color:var(--green); font-family:var(--font-editorial); }
.sidebar-note p { font-family:var(--font-editorial); font-size:25px; line-height:1.3; margin:18px 0 12px; letter-spacing:-.7px; }
.sidebar-note>span { font-size:12px; line-height:1.8; color:var(--muted); }
.storage-note { display:flex; align-items:flex-start; gap:7px; margin:0 5px; color:var(--muted); font-size:10px; line-height:1.8; }
.storage-note svg { width:14px; height:17px; color:var(--green); }
.main-content { padding:var(--size-7) clamp(24px,5vw,80px) 0; width:100%; max-width:1280px; margin:0 auto; min-width:0; display:flex; flex-direction:column; }
.workspace-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:var(--size-7); min-height:28px; }
.workspace-top .eyebrow { font-size:11px; }
.session-button { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; padding:6px 0; }
.session-button svg { width:16px; height:16px; }
#session-end-label { margin-left:8px; text-decoration:underline; text-underline-offset:3px; }
.document-heading { display:flex; justify-content:space-between; gap:var(--size-3); align-items:center; margin-bottom:var(--size-7); }
.document-tag { color:var(--accent); font-size:11px; letter-spacing:1.2px; font-weight:550; margin-bottom:12px; }
h1 { font-family:var(--font-editorial); font-size:clamp(32px,3.4vw,46px); font-weight:400; letter-spacing:-1.4px; margin:0; line-height:1.18; overflow-wrap:anywhere; }
.document-heading>div:first-child { min-width:0; }
.document-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; font-size:12px; color:var(--muted); }
.meta-dot { opacity:.6; }
.read-status { color:var(--green); background:var(--olive-3); padding:3px 8px; border-radius:var(--control-radius); }
.document-actions { display:flex; align-self:flex-start; margin-top:25px; }
.document-actions .icon-button { width:36px; height:36px; padding:9px; }
.document-actions svg { width:17px; height:17px; }
.reader-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:var(--size-3); }
.reader-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.fullscreen-toggle { white-space:nowrap; }
.mode-switch { background:var(--sidebar); padding:var(--size-1); border:1px solid var(--line); border-radius:var(--control-radius); display:flex; gap:var(--size-1); }
.mode-switch button { padding:9px 17px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; border:1px solid transparent; border-radius:3px; white-space:nowrap; }
.mode-switch button[aria-pressed='true'] { background:var(--surface); border-color:var(--line); color:var(--text); box-shadow:var(--shadow-1); }
.mode-switch svg { width:16px; height:16px; }
.settings-button { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; padding:10px; }
.settings-button svg { width:18px; height:18px; }
.settings-button:hover { color:var(--text); }
.reading-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--panel-radius); overflow:hidden; box-shadow:var(--shadow-1); }
.text-panel { position:relative; }
.text-mode-label { display:flex; align-items:center; gap:8px; padding:var(--size-5) var(--size-7) var(--size-3); color:var(--muted); font-size:10px; letter-spacing:1.1px; }
.text-mode-label>span:last-child { margin-left:auto; letter-spacing:0; font-size:11px; }
.article { max-height:clamp(210px,calc(100dvh - 525px),420px); overflow-y:auto; padding:0 var(--size-7) var(--size-5); font-family:var(--reader-font); font-size:var(--reader-size); line-height:1.85; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--sand-7) transparent; }
.article p { margin:0 0 1.15em; white-space:pre-wrap; overflow-wrap:anywhere; }
.article p:first-child:first-letter { font-size:1.6em; line-height:1; color:var(--accent); }
.sentence { cursor:pointer; border-radius:var(--radius-1); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.sentence:hover { background:var(--selected); }
.sentence.current { background:var(--accent-soft); }
.sentence.selected { background:var(--selected); box-shadow:0 2px 0 var(--green); }
.current-word { color:var(--accent); font-weight:600; background:transparent; }
.selection-bar { display:flex; align-items:center; justify-content:flex-end; gap:12px; background:var(--sidebar); padding:10px var(--size-3); font-size:12px; border-top:1px solid var(--line); }
.selection-bar>span { margin-right:auto; }
.small-primary { color:var(--accent); font-weight:550; font-size:12px; padding:10px 0; white-space:nowrap; }
.rsvp-panel { padding:var(--size-5) var(--size-7) var(--size-4); }
.rsvp-label { display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:1.1px; color:var(--muted); gap:10px; }
.play-state { color:var(--green); }
.rsvp-mode-hint { letter-spacing:.7px; font-size:9px; }
.word-stage { position:relative; display:block; width:100%; height:220px; margin:8px 0 0; padding:0; border-radius:var(--control-radius); overflow:hidden; }
.word-stage:focus-visible { outline-offset:-3px; }
.word-line { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:40% max-content minmax(0,1fr); align-items:baseline; white-space:pre; font-family:var(--reader-font); font-size:64px; line-height:1.2; letter-spacing:0; }
#word-before,#word-after { min-width:0; }
#word-before { text-align:right; }
#word-after { text-align:left; }
#word-anchor { color:var(--accent); }
body[data-highlight='false'] #word-anchor { color:inherit; }
.guide { position:absolute; left:40%; width:1px; height:23px; background:var(--sand-7); }
.guide:after { content:''; position:absolute; height:1px; width:12px; left:-6px; background:var(--sand-7); }
.guide-top { top:24px; }
.guide-top:after { top:0; }
.guide-bottom { bottom:24px; }
.guide-bottom:after { bottom:0; }
.stage-hint { text-align:center; color:var(--muted); font-size:12px; margin:0 0 6px; }
.long-word-message { font-size:13px; line-height:1.7; color:var(--accent); text-align:center; padding:8px; }
.reader-controls { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:var(--size-3); padding:var(--size-4) var(--size-5); }
.transport { display:flex; align-items:center; gap:12px; }
.play-button { min-width:160px; height:44px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; background:var(--accent); color:var(--on-accent); border-radius:var(--control-radius); font-weight:550; font-size:13px; white-space:nowrap; }
.play-button:hover { background:var(--accent-hover); }
.play-button svg { width:18px; height:18px; }
.transport-secondary { width:36px; height:40px; padding:8px; }
.transport-secondary svg { width:19px; height:19px; }
.speed-control { display:flex; align-items:center; gap:12px; }
.speed-control button { display:flex; align-items:center; justify-content:center; border:1px solid var(--sand-7); border-radius:var(--radius-round); width:32px; height:32px; font-size:20px; font-weight:300; }
.speed-control button:hover { background:var(--selected); }
.speed-control>div { text-align:center; min-width:67px; }
#speed-value { font-size:25px; font-variant-numeric:tabular-nums; letter-spacing:-1px; font-weight:450; }
.speed-unit { display:block; font-size:10px; color:var(--muted); margin-top:1px; }
.context-panel { margin-top:var(--size-3); border:1px solid var(--line); border-radius:var(--panel-radius); padding:var(--size-3) var(--size-5); background:var(--sidebar); }
.context-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; letter-spacing:1px; }
.context-heading>span { display:flex; align-items:center; gap:7px; }
.context-heading>div { display:flex; align-items:center; gap:6px; letter-spacing:0; font-size:11px; }
.compact { width:30px; height:30px; padding:6px; }
.compact svg { width:16px; height:16px; }
.rotate { transform:rotate(180deg); }
.context-panel p { font-family:var(--reader-font); font-size:calc(var(--reader-size) - 2px); line-height:1.8; margin:12px 0 var(--size-3); max-height:170px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.context-sentence { background:var(--accent-soft); }
.context-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:11px; border-top:1px solid var(--line); padding-top:12px; }
.context-footer .text-action { font-size:12px; padding:3px 0; }
.progress-section { margin:var(--size-5) 2px 0; }
.progress-label { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.progress-label b { font-weight:550; color:var(--text); }
#position-words { margin-left:12px; font-size:11px; }
.progress-track { margin-top:12px; background:var(--sand-5); border-radius:var(--radius-1); height:4px; overflow:hidden; }
#progress-fill { height:100%; width:0; background:var(--accent); }
.below-progress { display:flex; align-items:center; justify-content:space-between; gap:var(--size-3); margin-top:8px; color:var(--muted); font-size:11px; }
.below-progress .text-action { font-size:11px; }
.keyboard-hint { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--size-5); color:var(--muted); font-size:11px; margin:var(--size-7) 0; }
.keyboard-hint>span { display:flex; gap:6px; align-items:center; }
kbd { border:1px solid var(--sand-7); border-bottom-width:2px; padding:2px 6px; font-size:10px; border-radius:var(--control-radius); font-family:inherit; }
.workspace-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:var(--size-4) 0 var(--size-5); color:var(--muted); font-size:11px; }
.empty-view { text-align:center; padding:var(--size-9) 0 var(--size-10); }
.empty-illustration { display:flex; align-items:center; justify-content:center; width:90px; height:90px; border-radius:var(--radius-round); background:var(--olive-3); margin:0 auto var(--size-7); color:var(--green); }
.empty-illustration svg { width:44px; height:44px; stroke-width:1; }
.empty-view h1 { margin:var(--size-3) 0; }
.empty-view p { color:var(--muted); font-size:15px; line-height:1.8; }
.empty-view .primary-button { margin:var(--size-5) auto var(--size-3); }
.empty-view>.text-action { display:block; margin:auto; }
.dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:var(--panel-radius); box-shadow:var(--shadow); width:min(580px,calc(100% - 32px)); padding:var(--size-7); max-height:calc(100dvh - 40px); overflow:auto; }
.dialog::backdrop { background:color-mix(in srgb,var(--sand-12) 45%,transparent); backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:var(--size-5); }
h2 { font-family:var(--font-editorial); font-size:32px; font-weight:400; letter-spacing:-.8px; line-height:1.15; margin:8px 0 0; }
.dialog-heading .icon-button { margin:-8px -8px 0 0; }
.dialog input:not([type='range']):not([type='checkbox']),.dialog textarea,.dialog select { border:1px solid var(--sand-7); border-radius:var(--control-radius); background:var(--bg); color:var(--text); padding:12px; }
.dialog input:not([type='range']):not([type='checkbox']),.dialog textarea { width:100%; }
.dialog input::placeholder,.dialog textarea::placeholder { color:var(--muted); }
.field-label { display:block; font-size:14px; margin:var(--size-4) 0 9px; font-weight:550; }
.field-label>span { font-weight:400; color:var(--muted); font-size:12px; margin-left:5px; }
.dialog textarea { resize:vertical; min-height:170px; line-height:1.7; font-size:14px; }
.import-row { display:flex; gap:12px; align-items:center; margin-top:12px; }
.import-button { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:550; padding:10px 0; cursor:pointer; color:var(--accent); }
.import-button svg { width:17px; height:17px; }
#import-hint { font-size:11px; color:var(--muted); }
.form-error { color:var(--accent); font-size:13px; min-height:18px; margin:8px 0; }
.dialog-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:var(--size-4); }
.dialog-bottom>span { color:var(--muted); font-size:11px; }
.settings-dialog { width:min(490px,calc(100% - 32px)); }
.setting-group { margin:var(--size-5) 0; }
.setting-group>label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:16px; }
.setting-group output { font-size:12px; color:var(--accent); font-variant-numeric:tabular-nums; }
input[type='range'] { width:100%; accent-color:var(--accent); cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-top:7px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; font-size:14px; }
.setting-row select { font-size:12px; max-width:180px; padding:10px; }
.toggle { appearance:none; width:38px; height:24px; padding:4px; border-radius:var(--radius-round); background:var(--sand-7); cursor:pointer; flex-shrink:0; }
.toggle:before { content:''; display:block; width:16px; height:16px; background:var(--sand-1); border-radius:var(--radius-round); }
.toggle:checked { background:var(--accent); }
.toggle:checked:before { transform:translateX(14px); }
.pause-settings { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--size-3); padding:18px 0; font-size:14px; }
.pause-settings summary { cursor:pointer; }
.pause-settings p,.settings-storage p { color:var(--muted); font-size:12px; line-height:1.8; }
.pause-settings .setting-row { font-size:12px; }
.reset-settings { margin-top:var(--size-4); }
.settings-storage { margin-top:var(--size-5); padding-top:12px; border-top:1px solid var(--line); }
.telegram-status { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:max(32px,var(--tg-content-safe-area-inset-top,0px)) 24px max(32px,var(--tg-content-safe-area-inset-bottom,0px)); overflow-y:auto; background:var(--bg); text-align:center; }
.telegram-loading-card { width:100%; max-width:360px; margin:auto; padding-block:24px; }
.telegram-loading-brand { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:40px; }
.telegram-loading-brand>span { font-size:42px; font-weight:650; letter-spacing:-2px; }
.telegram-loading-brand img { border-radius:18px; box-shadow:var(--shadow-2); }
.telegram-loading-card h2 { font-family:var(--font-editorial); font-size:30px; font-weight:450; line-height:1.25; letter-spacing:-.6px; margin:0 0 14px; }
.telegram-loading-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.telegram-loading-indicator { display:flex; justify-content:center; align-items:center; gap:6px; height:36px; margin-top:24px; }
.telegram-loading-indicator span { width:4px; height:18px; border-radius:8px; background:var(--accent); animation:telegram-loading-pulse 1.2s ease-in-out infinite; }
.telegram-loading-indicator span:nth-child(2) { animation-delay:.15s; }
.telegram-loading-indicator span:nth-child(3) { animation-delay:.3s; }
.telegram-error-actions { display:none; gap:12px; margin-top:28px; flex-direction:column; }
html[data-telegram-state] { overflow:hidden; }
html[data-telegram-state] .site-header,html[data-telegram-state] .app-layout,html[data-telegram-state] .skip-link { visibility:hidden; }
html[data-telegram-state] #telegram-status { display:grid!important; }
html[data-telegram-state='error'] .telegram-loading-indicator { display:none; }
html[data-telegram-state='error'] .telegram-error-actions { display:flex; }
@keyframes telegram-loading-pulse { 0%,100% { transform:scaleY(.5); opacity:.4; } 50% { transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .telegram-loading-indicator span { animation:none; } }
.telegram-mode { min-height:var(--tg-viewport-stable-height,100dvh); }
.telegram-mode .main-content { padding-top:max(24px,var(--tg-content-safe-area-inset-top,0px)); }
.inbox-open { margin-top:10px; }
.inbox-item { padding:20px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.inbox-item h3 { line-height:1.5; }
.inbox-item p { color:var(--muted); font-size:12px; line-height:1.8; }
.inbox-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.inbox-actions button { min-height:44px; }
.telegram-summary-open { margin-bottom:20px; min-height:44px; }
.telegram-summary-dialog { overflow-wrap:anywhere; }
.telegram-summary-points { padding-left:24px; font-size:15px; line-height:1.8; }
.telegram-summary-points li { padding-left:6px; margin-block:16px; }
.telegram-summary-dialog .help-note { white-space:pre-line; }
.settings-storage .secondary-button { width:100%; margin:4px 0 20px; }
.library-backup { justify-content:center; min-height:44px; margin-top:8px; }
.backup-dialog p { color:var(--muted); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.backup-dialog .form-error { color:var(--accent); }
.backup-actions { display:flex; flex-wrap:wrap; gap:12px; }
.backup-actions button { flex:1 1 180px; min-height:44px; }
.backup-preview { margin-top:24px; border-top:1px solid var(--line); padding-top:12px; }
.backup-preview ul { max-height:150px; overflow:auto; padding-left:22px; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.danger { color:var(--accent); }
.help-step { display:flex; gap:var(--size-5); margin:var(--size-5) 0; }
.help-step>span { font-family:var(--font-editorial); color:var(--accent); font-size:26px; }
h3 { font-size:16px; font-weight:550; margin:0 0 9px; }
.help-step p { font-size:14px; line-height:1.8; color:var(--muted); margin:0; }
.help-note { color:var(--muted); background:var(--sidebar); border-radius:var(--control-radius); padding:var(--size-3); font-size:12px; line-height:1.8; }
.summary-copy { font-size:14px; color:var(--muted); line-height:1.8; overflow-wrap:anywhere; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:var(--size-5) 0; }
.summary-grid>div { text-align:center; border-right:1px solid var(--line); }
.summary-grid>div:last-child { border:0; }
.summary-grid strong { display:block; font-size:32px; font-weight:450; font-variant-numeric:tabular-nums; }
.summary-grid span { display:block; font-size:12px; color:var(--muted); margin-top:7px; }
.summary-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:var(--size-3); }
.summary-actions>.text-action { width:100%; justify-content:center; }
.confirm-dialog { max-width:450px; }
.confirm-dialog p { font-size:14px; line-height:1.8; color:var(--muted); }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:var(--size-5); }
.storage-error { padding:var(--size-4); margin:0 0 var(--size-5); border:1px solid var(--accent); border-radius:var(--control-radius); background:var(--surface); color:var(--text); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.toast { position:fixed; bottom:var(--size-5); left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:14px var(--size-4); border-radius:var(--control-radius); box-shadow:var(--shadow); font-size:13px; z-index:20; max-width:calc(100% - 32px); width:max-content; line-height:1.7; }
@media (min-width:1600px) { .main-content { padding-top:40px; } .workspace-top { margin-bottom:40px; } .word-stage { height:270px; } }
@media (max-width:1200px) { .site-header { gap:40px; } .app-layout { grid-template-columns:220px minmax(0,1fr); } .main-content { padding-inline:32px; } .sidebar { padding-inline:16px; } .header-nav { gap:24px; } .text-mode-label>span:last-child,.rsvp-mode-hint { display:none; } .reader-controls { padding:18px; } .transport { gap:8px; } .speed-control { gap:9px; } .play-button { min-width:145px; padding-inline:14px; } }
@media (max-width:900px) { .local-badge { display:none; } .main-content { padding-inline:24px; } .sidebar { padding-inline:12px; } .app-layout { grid-template-columns:205px minmax(0,1fr); } .site-header { padding-inline:24px; } .reader-controls { flex-wrap:wrap; justify-content:center; gap:18px; } .transport { gap:12px; } .play-button { min-width:160px; } .speed-control { gap:14px; } .workspace-top .eyebrow { font-size:10px; letter-spacing:1px; } #session-end-label { display:none; } .article { padding-inline:24px; } .rsvp-panel { padding-inline:24px; } .document-actions { margin-top:24px; } .document-actions .icon-button { width:32px; } }
@media (max-width:700px) { .site-header { height:72px; gap:24px; } .header-nav { margin-left:auto; gap:20px; font-size:13px; } .header-right { margin-left:0; gap:6px; } .mobile-menu { display:flex; } .app-layout { display:block; min-height:calc(100dvh - 72px); } .sidebar { display:none; position:fixed; z-index:5; top:72px; left:0; bottom:0; width:280px; box-shadow:var(--shadow); padding:28px 20px; overflow:auto; } .sidebar.open { display:flex; } .sidebar-note { padding-top:35px; margin-bottom:32px; } .main-content { padding:28px 24px 0; } .workspace-top { margin-bottom:28px; } .workspace-top .eyebrow { font-size:10px; } .reader-controls { flex-wrap:nowrap; justify-content:space-between; gap:12px; padding:20px; } .document-heading { margin-bottom:24px; } h1 { font-size:38px; } .article { max-height:clamp(230px,calc(100dvh - 490px),400px); } .word-stage { height:210px; } .keyboard-hint { display:none; } .workspace-footer { margin-top:32px; } }
@media (max-width:520px) { .site-header { padding-inline:16px; gap:16px; } .site-header .brand { font-size:27px; gap:8px; } .site-header .brand img { width:30px; height:30px; } .header-nav>a,.header-nav .nav-active { display:none; } .header-nav { font-size:13px; } .header-right { gap:2px; } .main-content { padding:24px 16px 0; } .workspace-top { align-items:center; gap:8px; } .workspace-top .eyebrow { font-size:9px; letter-spacing:1px; } .session-button { font-size:11px; } .document-tag { font-size:10px; letter-spacing:1px; } h1 { font-size:34px; } .document-meta { font-size:11px; gap:8px; } .document-actions { margin-top:24px; } .document-actions .icon-button { width:30px; padding:7px; } .mode-switch button { font-size:12px; padding:9px 13px; } .settings-button { font-size:12px; padding:9px; } .text-mode-label { font-size:9px; padding:20px 20px 14px; } .article { padding-inline:20px; font-size:var(--reader-size); max-height:320px; } .reader-controls { flex-direction:column; align-items:stretch; gap:16px; padding:16px; } .transport { justify-content:center; gap:16px; } .play-button { min-width:160px; flex:1; max-width:220px; } .speed-control { justify-content:center; gap:24px; padding-top:16px; border-top:1px solid var(--line); } .speed-control button { width:36px; height:36px; } .speed-control>div { min-width:80px; } .speed-unit { font-size:11px; } .rsvp-panel { padding:20px 18px; } .rsvp-label { font-size:9px; } .word-stage { height:190px; } .stage-hint { font-size:11px; line-height:1.7; } .context-panel { padding:14px 18px; } .context-heading { font-size:9px; letter-spacing:.5px; } .context-heading>div { gap:2px; font-size:10px; } .compact { width:28px; height:28px; } .context-panel p { max-height:150px; } .context-footer { font-size:10px; } .progress-label { font-size:11px; } #position-words { font-size:10px; margin-left:8px; } .below-progress { align-items:flex-start; gap:12px; } #progress-hint { max-width:150px; font-size:10px; line-height:1.7; padding-top:7px; } .below-progress .text-action { font-size:10px; line-height:1.7; max-width:130px; text-align:left; } .workspace-footer { font-size:10px; } .dialog { padding:24px; } .dialog .eyebrow { font-size:10px; } .dialog input:not([type='range']),.dialog textarea { font-size:16px; } .dialog .field-label { font-size:13px; } .dialog-bottom { flex-direction:column; align-items:stretch; gap:16px; } .dialog-bottom>span { font-size:11px; } .setting-row,.setting-group>label { font-size:13px; } .setting-row select { max-width:145px; font-size:12px; } .selection-bar { flex-wrap:wrap; gap:6px; } .selection-bar>span { width:100%; font-size:11px; } .selection-bar .icon-button { width:30px; height:30px; padding:7px; } .summary-actions { flex-direction:column; } .summary-actions button { width:100%; } }
@media (max-width:350px) { .header-nav { font-size:12px; } .header-right .icon-button { width:34px; padding:7px; } .site-header { gap:12px; } h1 { font-size:31px; } .document-heading { gap:8px; } .document-actions { flex-direction:column; margin-top:18px; } .settings-button span { display:none; } .settings-button { padding:10px; } .transport { gap:8px; } .transport-secondary { width:36px; } .play-button { min-width:0; font-size:12px; padding-inline:12px; } .reader-controls { padding:16px; } .stage-hint { font-size:10px; } .context-panel { padding:14px; } .context-heading { font-size:8px; } .dialog { padding:20px; } .setting-row select { max-width:132px; font-size:11px; } .setting-row { gap:8px; font-size:12px; } #position-words { display:block; margin:3px 0 0; text-align:right; } }
@media (prefers-reduced-motion:reduce) { .article { scroll-behavior:auto; } }

body.reading-fullscreen { overflow:hidden; }
.reading-fullscreen>.site-header,.reading-fullscreen>.analytics-panel,.reading-fullscreen .sidebar,.reading-fullscreen .workspace-top,.reading-fullscreen .document-heading,.reading-fullscreen .workspace-footer,.reading-fullscreen .keyboard-hint,.reading-fullscreen .below-progress { display:none; }
.reading-fullscreen .app-layout { display:block; min-height:100dvh; }
.reading-fullscreen .main-content { height:100dvh; max-width:1200px; padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); overflow-y:auto; }
.reading-fullscreen #document-view { display:flex; flex:1; flex-direction:column; min-height:0; }
.reading-fullscreen .reader-toolbar { position:sticky; top:0; z-index:2; flex-shrink:0; padding-block:4px; background:var(--bg); }
.reading-fullscreen .reading-card { display:flex; flex:1 0 280px; flex-direction:column; min-height:280px; }
.reading-fullscreen .text-panel { display:flex; flex:1; flex-direction:column; min-height:0; }
.reading-fullscreen .article { flex:1; width:100%; max-width:76ch; max-height:none; min-height:100px; margin-inline:auto; }
.reading-fullscreen .reader-controls,.reading-fullscreen .selection-bar,.reading-fullscreen .storage-error { flex-shrink:0; }
.reading-fullscreen .rsvp-panel { display:flex; flex:1; flex-direction:column; min-height:170px; }
.reading-fullscreen .word-stage { flex:1; height:auto; min-height:110px; }
.reading-fullscreen .context-panel { flex-shrink:0; margin-top:12px; }
.reading-fullscreen .context-panel p { max-height:clamp(80px,16dvh,160px); margin-block:8px; }
.reading-fullscreen .context-footer>span { display:none; }
.reading-fullscreen .progress-section { flex-shrink:0; margin-top:12px; }
@media (max-width:520px) {
  .fullscreen-toggle { min-height:44px; min-width:44px; justify-content:center; }
  .fullscreen-toggle span { display:none; }
  .reader-actions { gap:2px; }
  .reading-fullscreen .main-content { padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .reading-fullscreen .settings-button span { display:none; }
  .reading-fullscreen .fullscreen-toggle span { display:inline; }
  .reading-fullscreen .reading-card { flex-basis:285px; min-height:285px; }
  .reading-fullscreen .rsvp-panel { padding:14px 16px 10px; }
  .reading-fullscreen .reader-controls { padding:10px 12px; gap:8px; }
  .reading-fullscreen .speed-control { padding-top:8px; }
  .reading-fullscreen .speed-control button { width:30px; height:30px; }
  .reading-fullscreen #speed-value { font-size:22px; }
  .reading-fullscreen .speed-unit { font-size:9px; margin-top:0; }
  .reading-fullscreen .stage-hint { font-size:10px; }
  .reading-fullscreen .context-panel { padding:10px 14px; margin-top:8px; }
  .reading-fullscreen .context-panel p { font-size:17px; }
  .reading-fullscreen .progress-section { margin-top:8px; }
}

.article p.selected-paragraph { background:var(--accent-soft); border-radius:var(--radius-2); outline:2px solid var(--selected); outline-offset:3px; }
.selection-bar { flex-wrap:wrap; }
.selection-bar .small-primary { min-height:44px; }
.context-explain { margin-block:12px; min-height:44px; }
.explanation-dialog { overflow-wrap:anywhere; }
.explanation-source { margin:0 0 20px; padding:12px 16px; border-left:3px solid var(--green); background:var(--accent-soft); font-size:14px; line-height:1.7; white-space:pre-wrap; max-height:170px; overflow-y:auto; }
#explanation-result { font-size:15px; line-height:1.8; }
#explanation-result h3 { margin:20px 0 8px; font-size:16px; font-weight:550; }
#explanation-answer,#explanation-example { white-space:pre-wrap; }
@media (max-width:520px) { .text-mode-label>span:last-child { max-width:150px; line-height:1.5; text-align:right; } .selection-bar .small-primary { padding-inline:4px; } .context-footer { flex-wrap:wrap; gap:8px; } }