@font-face { font-family: DM Sans; src: url('./fonts/dm-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: DM Sans; src: url('./fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; unicode-range: U+0100-024F,U+1E00-1EFF; }
@font-face { font-family: Newsreader; src: url('./fonts/newsreader-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Newsreader; src: url('./fonts/newsreader-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-024F,U+1E00-1EFF; }
@font-face { font-family: Newsreader; src: url('./fonts/newsreader-latin-wght-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: Newsreader; src: url('./fonts/newsreader-latin-ext-wght-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0100-024F,U+1E00-1EFF; }

:root {
  color-scheme: light;
  --bg: #fbf4e9;
  --rail: #f6ead8;
  --paper: #fffaf1;
  --ink: #2e1d1c;
  --muted: #685248;
  --line: #e3d1bb;
  --accent: #751a33;
  --button: #70172f;
  --on-button: #fff7eb;
  --accent-soft: #f3e3d1;
  --gold: #ac7343;
  --highlight: #f4dc9f;
  --green: #26824a;
  --shadow: 0 3px 5px #56301c0a, 0 12px 30px #653a1c0f;
  --serif: Newsreader, Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --text-size: 21px;
  font: 15px/1.5 var(--sans);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #201719;
  --rail: #2b1d20;
  --paper: #2c2021;
  --ink: #f8e9dc;
  --muted: #d0b8ad;
  --line: #583d3b;
  --accent: #f3b9c3;
  --button: #efb8c3;
  --on-button: #391525;
  --accent-soft: #42282b;
  --gold: #d2a278;
  --highlight: #6c4c25;
  --green: #9cdaa9;
  --shadow: 0 3px 7px #1005065c, 0 12px 28px #10050636;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 0; height: 100%; }
body { background: radial-gradient(ellipse at 12% 0%, var(--paper), var(--bg) 72%); color: var(--ink); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .43; cursor: default; }
a { color: var(--accent); text-underline-offset: .18em; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 520; letter-spacing: -.026em; line-height: 1.08; }
h1 { font-size: clamp(2.85rem, 5vw, 4.35rem); font-weight: 625; letter-spacing: -.042em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 600; }
h3 { font-size: 1.6rem; }
.layout { display: grid; grid-template-columns: clamp(205px, 18vw, 252px) minmax(0, 1fr); height: 100%; height: 100dvh; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; gap: clamp(25px, 4vh, 42px); min-height: 0; padding: 27px 17px 20px; overflow: auto; border-right: 1px solid var(--line); background: linear-gradient(145deg, var(--paper), var(--rail) 74%); }
.brand { display: inline-flex; align-items: center; align-self: start; gap: 10px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--ink); font: 680 2.28rem/1 var(--serif); letter-spacing: -.045em; }
.brand > span:last-child { padding-top: 5px; }
.brand-mark, .voice-mark, .empty-icon { display: inline-grid; flex: none; place-items: center; border-radius: 50%; width: 43px; height: 43px; background: var(--button); color: var(--on-button); }
.brand-mark { background: radial-gradient(at 78% 0, #902643, #550f24); color: #fff3e1; box-shadow: inset 0 0 0 1px #fff2d34d, 0 3px 8px #52223624; }
.brand-mark svg { width: 25px; height: 25px; }
.navigation { display: grid; gap: 6px; }
.navigation button, .voice-chip { display: flex; align-items: center; gap: 12px; padding: 11px 13px; min-height: 46px; border: 1px solid transparent; border-radius: 11px; background: none; text-align: left; color: var(--ink); font-weight: 640; }
.navigation button svg { color: var(--accent); }
.navigation button:hover { background: var(--accent-soft); color: var(--accent); }
.navigation button[aria-current=page] { background: linear-gradient(115deg,#641329,#7a1b30 75%,#641329); color: #fff6ec; box-shadow: inset 0 0 0 1px #e9c3a940, 0 4px 9px #6d263b2b; }
.navigation button[aria-current=page] svg { color: inherit; }
.sidebar-tail { display: grid; flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
.sidebar-art { align-self: end; justify-self: center; width: 100%; height: 100%; max-width: 228px; max-height: 342px; object-fit: contain; object-position: center bottom; opacity: .64; pointer-events: none; }
:root[data-theme=dark] .sidebar-art { opacity: .34; }
.voice-chip { grid-row: 2; position: relative; width: 100%; border-color: var(--line); border-radius: 15px; background: linear-gradient(145deg, var(--paper), var(--rail)); box-shadow: var(--shadow); }
.voice-mark { width: 36px; height: 36px; background: var(--accent-soft); color: var(--accent); }
.voice-mark svg { width: 18px; height: 18px; }
.voice-chip strong { color: var(--ink); }
small { display: block; font-size: .77rem; font-weight: 500; color: var(--muted); }
.voice-dot { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #b89054; }
[data-voice=ready] .voice-dot { background: var(--green); }
[data-voice=unavailable] .voice-dot { background: var(--accent); }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
main { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
.page { width: min(100%, 1350px); padding: clamp(27px, 3.3vw, 49px) clamp(25px, 4vw, 65px) 28px; margin: auto; }
.page-narrow, #view-settings { max-width: 1060px; }
#view-settings { container-type: inline-size; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(20px, 2.6vw, 34px); }
.page-head h1 { color: var(--accent); }
.page-head p { margin-top: 4px; color: var(--muted); }
.button, .icon-button, .plain { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; font-weight: 680; line-height: 1.2; }
.button svg, .plain svg, .icon-button svg { width: 18px; height: 18px; }
.primary { background: var(--button); color: var(--on-button); box-shadow: inset 0 0 0 1px #ffe6cf40, 0 4px 9px #5f16342a; }
.primary:hover:not(:disabled) { filter: brightness(1.13); }
.outline, .icon-button { color: var(--accent); border-color: var(--line); background: var(--paper); }
.outline:hover:not(:disabled), .icon-button:hover:not(:disabled), .plain:hover { background: var(--accent-soft); }
.icon-button { width: 44px; padding: 0; }
.plain { color: var(--accent); }
.top-import { flex: none; }
.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  position: relative;
  isolation: isolate;
  min-height: clamp(253px, 24vw, 326px);
  padding: clamp(32px, 3.7vw, 51px) clamp(28px, 4.4vw, 60px);
  background: #f7dfb0 url('./art/library-banner.webp') right bottom / cover no-repeat;
  border: 1px solid #ad7949;
  border-radius: 19px;
  color: #411b17;
  box-shadow: 0 8px 24px #5f311f32;
}
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; }
.hero::before { inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(90deg, #fff1d0e8, #fff1d0a8 62%, transparent 87%); }
.hero::after { inset: 8px; border: 1px solid #aa733f9e; border-radius: 12px; box-shadow: inset 0 0 0 2px #ffe5ab70; }
.hero-ornament { position: absolute; top: 12px; left: 50%; width: 87px; height: 18px; transform: translateX(-50%); color: #94612d; }
.hero-copy { grid-column: 1 / -1; width: min(100%, 37rem); overflow-wrap: anywhere; }
#hero-cover:not([hidden]) + .hero-copy { grid-column: 2; }
.hero h2 { color: #60182b; font-size: clamp(2.55rem, 5vw, 4.15rem); line-height: .98; }
.hero p { margin-top: 7px; }
.hero .hero-kicker { display: flex; align-items: center; gap: 8px; color: #682237; font-weight: 720; margin: 0 0 7px; }
.hero-kicker svg { width: 17px; height: 17px; }
.hero-chapter { font-size: .92rem; }
.hero #hero-action { margin-top: 15px; background: #70172f; color: #fff7eb; }
.hero .book-progress { width: min(100%, 19rem); margin-top: 9px; color: inherit; }
.hero .book-progress { --progress-track: #592a2030; --progress-fill: #741a31; }
#hero-cover { width: clamp(96px, 12vw, 158px); }
#hero-cover .cover { box-shadow: 2px 7px 10px #4d251953, 8px 15px 24px #4d251944; }
:root[data-theme=dark] .hero { background-image: url('./art/library.webp'); color: #ffedda; border-color: #74524b; }
:root[data-theme=dark] .hero::before { background: linear-gradient(90deg, #210a12eb, #2b1018ee 55%, #2b10183a 86%); }
:root[data-theme=dark] .hero :is(h2, .hero-kicker, .hero-ornament) { color: #ffdec1; }
:root[data-theme=dark] .hero #hero-action { background: #efb8c3; color: #391525; }
:root[data-theme=dark] .hero .book-progress { --progress-track: #efb8c34d; --progress-fill: #efb8c3; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: clamp(24px, 3.4vw, 44px) 0 14px; }
.section-head span { color: var(--muted); font-size: .86rem; }
.empty { display: flex; align-items: center; gap: 18px; min-height: 112px; padding: clamp(18px, 3vw, 28px); border: 1px dashed var(--line); border-radius: 14px; background: linear-gradient(145deg, var(--paper), var(--bg)); }
.empty-icon { background: var(--accent-soft); color: var(--accent); width: 54px; height: 54px; }
.empty-icon svg { width: 26px; height: 26px; }
.empty p { margin-top: 5px; color: var(--muted); }
.local-note { display: flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--muted); font-size: .82rem; }
.local-note svg { width: 15px; height: 15px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 146px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.book-card { position: relative; min-width: 0; }
.book-open { display: grid; align-content: start; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.cover { aspect-ratio: 5 / 7; width: 100%; display: grid; place-items: center; position: relative; isolation: isolate; background: var(--book-color, #642138); color: #ffebc1; border-radius: 5px 9px 9px 5px; overflow: hidden; text-align: center; }
.cover::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg,#1d0b115e,#1305081c 4%,#fff1ce3b 6%,transparent 12%); box-shadow: inset -2px 0 #f9e2b361, inset 0 1px #f9e2b34f; }
.cover-binding { position: absolute; inset: 6% 7% 6% 10%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2%; padding: 4%; border: 3px double #f0c98b9c; border-radius: 7px; background: radial-gradient(ellipse at 68% 17%, #fff1bc26, transparent 75%); }
.cover-binding svg { width: 57%; height: auto; aspect-ratio: 88 / 18; color: #e7b777; }
.cover-binding svg:nth-of-type(2) { width: 23%; aspect-ratio: 1; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #312427; }
.cover-label { font: 620 clamp(.92rem, 2vw, 1.45rem)/1.03 var(--serif); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.book-open:hover .cover { filter: brightness(1.08); }
.book-open:hover, .add-book:hover { border-color: var(--gold); }
.book-details { display: grid; gap: 5px; padding: 10px 11px 11px; min-width: 0; }
.book-title { font: 600 1.35rem/1.1 var(--serif); overflow-wrap: anywhere; }
.book-author { color: var(--muted); overflow-wrap: anywhere; font-size: .85rem; }
.book-remove { position: absolute; z-index: 1; top: 7px; right: 7px; width: 38px; min-height: 38px; background: var(--paper); box-shadow: var(--shadow); }
.book-remove svg { width: 15px; height: 15px; }
.book-progress { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .78rem; }
progress { accent-color: var(--accent); width: 100%; height: .5rem; }
.book-progress progress { appearance: none; flex: 1; min-width: 0; height: .4rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--progress-track, var(--line)); }
.book-progress progress::-webkit-progress-bar { background: transparent; }
.book-progress progress::-webkit-progress-value { background: var(--progress-fill, var(--accent)); border-radius: 999px; }
.book-progress progress::-moz-progress-bar { background: var(--progress-fill, var(--accent)); border-radius: 999px; }
.book-progress > span { white-space: nowrap; }
.add-book { align-self: start; display: grid; justify-items: center; align-content: center; gap: 7px; width: 100%; aspect-ratio: 5 / 7; padding: 10px; border: 1px dashed var(--gold); border-radius: 10px; background: var(--paper); color: var(--accent); font-weight: 690; }
.add-book svg { width: 27px; height: 27px; }
.add-book:hover { background: var(--accent-soft); }
body[data-view=reader] .layout { grid-template-columns: minmax(0, 1fr); }
body[data-view=reader] .sidebar { display: none; }
body[data-view=reader] main { background: radial-gradient(ellipse at 50% 18%, var(--paper) 32%, var(--bg) 96%); }
.reader-bar { display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; align-items: center; gap: 8px; flex: none; padding: 8px clamp(8px, 4vw, 58px); border-bottom: 1px solid var(--line); background: linear-gradient(100deg, var(--rail), var(--paper), var(--rail)); box-shadow: var(--shadow); z-index: 1; }
.reader-bar > button { justify-self: start; }
.reader-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: var(--ink); font: 660 1.42rem/1.25 var(--serif); padding: 5px 0 2px; }
.reader-actions { display: flex; justify-content: end; gap: 8px; }
.reader { max-width: 880px; margin: auto; padding: clamp(27px, 5vw, 69px) clamp(22px, 6vw, 78px) 42px; }
.chapter-heading { display: flex; justify-content: center; align-items: center; gap: 13px; color: var(--accent); margin-bottom: 14px; text-align: center; font: 640 1.3rem/1.2 var(--serif); overflow-wrap: anywhere; }
.chapter-heading::before, .chapter-heading::after { content: ''; flex: 0 0 clamp(14px, 4vw, 37px); height: 1px; background: var(--gold); }
.prose { font: var(--text-size)/1.64 var(--serif); overflow-wrap: anywhere; }
.prose :is(h1,h2,h3,h4,h5,h6) { font-family: var(--serif); line-height: 1.08; margin: 1.15em 0 .5em; }
.prose h1 { font-size: 2.2em; }
.prose h2 { font-size: 1.72em; }
.prose h3 { font-size: 1.4em; }
.prose > :first-child, .prose > :first-child > :first-child { margin-top: 0; }
.reader .prose > :first-child:is(h1,h2,h3) { text-align: center; }
.reader .prose > :first-child:is(h1,h2,h3)::after { content: ''; display: block; width: 55px; margin: .35em auto 0; border-bottom: 3px double var(--gold); }
.prose :is(p, blockquote, pre, ul, ol, dl, figure, table) { margin: 0 0 .85em; }
.prose blockquote { border-left: 2px solid var(--line); padding-left: 1em; font-style: italic; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1em auto; }
.prose table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.prose :is(td,th) { border: 1px solid var(--line); padding: 5px 10px; }
.prose pre { white-space: pre-wrap; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.sentence { scroll-margin: 22px 0; }
.sentence.current { background: var(--highlight); border-radius: .15em; box-shadow: 0 1px var(--gold); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.chapter-links { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 38px; padding-top: 20px; }
.chapter-links button:last-child { margin-left: auto; }
.player { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2vw, 24px); margin: 0 clamp(9px, 2.2vw, 32px) max(10px, env(safe-area-inset-bottom)); padding: 10px clamp(12px, 2.5vw, 30px); border: 1px solid #8c4052; border-radius: 16px; background: radial-gradient(ellipse at 44% 0, #812335, #5a1429 62%, #430c21); color: #fff4e5; box-shadow: inset 0 1px #f6c4a335, 0 8px 20px #46112350; z-index: 1; }
.player-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.player-info > div { min-width: 0; }
.player-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 660 1.35rem/1.15 var(--serif); padding-top: 3px; }
.player-info small { color: #f3d7ca; overflow-wrap: anywhere; }
.player-cover { display: block; width: 39px; flex: none; }
.player-cover .cover-label, #hero-cover .cover-label { display: none; }
.player-cover .cover-binding { border-width: 1px; }
.player .voice-mark { background: #fce9d6; color: #68152e; }
.player-buttons { display: flex; align-items: center; gap: 9px; }
.player .play { min-width: 118px; min-height: 47px; border-radius: 24px; background: #fff1db; color: #60182e; }
.player .stop { border-radius: 50%; background: #ffffff12; color: #fff2e0; border-color: #ffd7ac70; }
.player .stop:hover:not(:disabled) { background: #ffffff2e; }
.player button:focus-visible { outline-color: #ffe1b6; }
.player-detail { display: flex; justify-content: flex-end; align-items: center; gap: 13px; color: #f6d7c9; font-size: .84rem; text-align: right; }
.waveform { width: clamp(52px, 9vw, 112px); height: 24px; color: #eec58c; opacity: .57; }
.player[data-state=playing] .waveform { opacity: 1; }
.panel { margin-bottom: 17px; padding: clamp(17px, 3vw, 27px); background: linear-gradient(145deg, var(--paper), var(--bg)); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.editor label { display: block; font-weight: 700; margin-bottom: 8px; }
textarea { display: block; width: 100%; min-height: 8em; padding: 14px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: var(--text-size)/1.5 var(--serif); }
.text-preview { white-space: pre-wrap; padding: 17px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 13px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
@container (max-width: 536px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
.settings-panel { min-width: 0; margin: 0; }
.settings-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.settings-title h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); padding-top: 4px; }
.settings-panel p { color: var(--muted); margin: 9px 0; }
.settings-panel progress { max-width: 260px; }
.settings-panel .button { margin-top: 3px; }
.settings-panel [data-appearance=size] { margin-top: 18px; }
.voice-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); background: var(--paper); font-size: .78rem; }
.about { display: flex; gap: 16px; margin-top: 18px; color: var(--muted); font-size: .82rem; }
fieldset { border: 0; padding: 0; margin: 15px 0; }
legend { font-weight: 680; padding: 0; margin-bottom: 6px; }
.segmented { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--rail); border: 1px solid var(--line); border-radius: 10px; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 6px 12px; border-radius: 6px; }
.segmented input:checked + span { background: var(--button); color: var(--on-button); font-weight: 680; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.size-control { max-width: 420px; display: grid; grid-template-columns: 1fr auto; gap: 8px; font-weight: 680; }
.size-control input { width: 100%; grid-column: 1 / -1; accent-color: var(--accent); }
.size-control output { color: var(--accent); }
dialog { color: var(--ink); width: min(440px, calc(100% - 26px)); max-height: calc(100dvh - 25px); padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }
dialog::backdrop { background: #1a101597; }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: none; border-radius: 14px 0 0 14px; }
.drawer nav { display: grid; gap: 4px; }
.drawer nav button { text-align: left; border: 0; padding: 11px 12px 11px calc(12px + var(--depth,0) * 13px); border-radius: 7px; background: transparent; overflow-wrap: anywhere; }
.drawer nav button:hover, .drawer nav button[aria-current=true] { color: var(--accent); background: var(--accent-soft); }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
.install-guide { width: min(850px, calc(100% - 26px)); padding: 0; background: linear-gradient(140deg, var(--paper), var(--bg)); box-shadow: 0 14px 42px #19070b6b; }
.install-guide header { position: sticky; z-index: 1; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; justify-content: start; gap: 13px; margin: 0; padding: clamp(13px, 3vw, 25px); border-bottom: 1px solid var(--line); background: var(--paper); }
.install-guide header h2 { color: var(--accent); }
.install-guide header p { color: var(--muted); }
.install-guide .voice-mark { width: 43px; height: 43px; }
.install-body { padding: clamp(13px, 3vw, 24px); }
.install-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.install-list li { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.install-list img { flex: none; }
.install-list h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; font: 750 .97rem/1.25 var(--sans); letter-spacing: 0; }
.install-list h3 small { color: var(--accent); font-weight: 680; }
.install-list p { margin-top: 5px; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.install-list [lang=en] { color: var(--ink); font-weight: 630; }
.install-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: .89rem; }
.install-note svg { color: var(--accent); }
.install-body > .primary { margin-top: 16px; }
.notice { position: fixed; z-index: 5; bottom: 78px; left: 50%; transform: translateX(-50%); width: min(490px, calc(100% - 30px)); background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 10px 10px 10px 16px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notice button { flex: none; }
.noscript { position: fixed; inset: auto 15px 15px; padding: 15px; background: var(--paper); }

@media (max-width: 1000px) {
  .sidebar { padding-inline: 12px; }
  .hero { background-position: 64% bottom; }
}
@media (max-height: 690px) {
  .sidebar-tail { row-gap: 0; }
  .sidebar-art { display: none; }
}
@media (max-width: 700px) {
  .layout { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  .workspace { grid-row: 1; }
  .sidebar { grid-row: 2; padding: 4px 8px max(5px, env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); }
  .sidebar .brand, .sidebar-tail { display: none; }
  .navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .navigation button { justify-content: center; flex-direction: column; text-align: center; gap: 2px; padding: 6px 3px; font-size: .72rem; line-height: 1.2; }
  .navigation svg { width: 19px; height: 19px; }
  .page { padding-inline: clamp(15px, 4vw, 28px); }
  .page-head { gap: 11px; }
  .top-import { padding-inline: 10px; }
  .hero { min-height: 230px; padding: 36px clamp(17px, 5vw, 35px) 29px; gap: 13px; background-position: 42% bottom; }
  .hero::before { background: linear-gradient(90deg, #fff1d0df, #fff1d0bd 83%, #fff1d080); }
  :root[data-theme=dark] .hero::before { background: linear-gradient(90deg, #210a12ef, #2b1018e6 85%, #2b1018a6); }
  .hero h2 { font-size: clamp(1.95rem, 5.3vw, 3.4rem); }
  #hero-cover { width: clamp(63px, 19vw, 111px); }
  .cover-binding { border-width: 2px; }
  .empty { flex-wrap: wrap; gap: 13px; }
  .empty h3 { font-size: 1.36rem; }
  .empty-icon { width: 40px; height: 40px; }
  .empty-icon svg { width: 22px; height: 22px; }
  .book-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%, 126px),1fr)); gap: 14px; }
  body[data-view=reader] .layout { grid-template-rows: minmax(0, 1fr); }
  .reader-bar { grid-template-columns: auto minmax(0,1fr) auto; }
  .reader-bar .plain { width: 44px; padding: 0; }
  .reader-bar .plain span { display: none; }
  .reader-actions { gap: 4px; }
  .reader-actions .icon-button { width: 44px; }
  .player { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .player-detail { display: none; }
  .player .play { min-width: 96px; padding-inline: 10px; }
  .player-buttons { gap: 5px; }
  .player-cover { width: 32px; }
  .player-info { gap: 7px; }
  .player-info strong { font-size: 1.12rem; }
}
@media (max-width: 540px) {
  .settings-grid, .install-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-head:has(.top-import) { align-items: flex-start; flex-direction: column; }
  .page-head h1 { font-size: clamp(2.65rem, 10vw, 3.6rem); }
  .page-head p { max-width: 35ch; }
  .install-guide header { gap: 8px; }
  .install-guide header .voice-mark { width: 35px; height: 35px; }
  .install-guide header p { font-size: .85rem; }
}
@media (prefers-reduced-motion: no-preference) {
  button, .cover { transition: background-color .16s ease, color .16s ease, border-color .16s ease, filter .16s ease; }
}