/* EchoSphere's navy/blue identity; serif is reserved for reading. */
:root {
  color-scheme:dark;
  --paper:#08111f; --surface:#101d2e; --input:#0b1625; --hover:#1b2e46;
  --ink:#e7eef9; --muted:#a4b3c7; --line:#2e4057; --accent:#9cc5ff;
  --button-ink:#081829; --button-hover:#bedaff; --error:#ffb4ab; --radius:8px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif; line-height:1.8; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:5px; }
button,input { font:inherit; }
button { min-height:44px; padding:10px 18px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); cursor:pointer; transition:background-color .16s,border-color .16s; }
button:hover:not(:disabled) { border-color:var(--accent); background:var(--hover); }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; left:20px; top:12px; transform:translateY(-160%); background:var(--ink); color:var(--paper); padding:10px 16px; z-index:10; }
.skip-link:focus { transform:none; }
.masthead { max-width:1280px; min-height:76px; margin:0 auto; padding:14px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.masthead a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; font-weight:650; text-decoration:none; }
.masthead a:hover { color:var(--accent); }
.masthead>span { font-size:12px; color:var(--muted); }
main { max-width:1280px; margin:0 auto; padding:0 40px; }
.library-opening { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:48px; padding:40px 0 32px; }
.introduction { min-width:0; }
h1,h2,h3,p { margin:0 0 12px; }
.eyebrow { margin-bottom:12px; letter-spacing:.13em; font-size:11px; font-weight:500; color:var(--muted); }
h1 { font-size:clamp(32px,3.6vw,48px); font-weight:650; letter-spacing:.015em; line-height:1.3; }
h1 span { display:inline-block; margin-left:18px; color:var(--accent); font-weight:400; }
.lead { font-size:clamp(17px,1.7vw,21px); margin:16px 0; letter-spacing:.02em; }
.introduction>div>p:last-child { max-width:43em; color:var(--muted); font-size:13px; line-height:1.9; }
.journey { display:flex; flex-wrap:wrap; gap:8px 28px; margin:24px 0 0; padding:16px 0 0 20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.journey li { padding-left:2px; }
.journey li::marker { color:var(--accent); }
.library-art { margin:0; }
.library-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); }
.search-panel { padding:24px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
h2 { font-size:20px; font-weight:650; letter-spacing:.01em; }
.search-panel h2 { margin-bottom:18px; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
.search-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto; gap:18px; align-items:end; }
label { display:block; font-size:14px; font-weight:600; }
label span { color:var(--muted); font-size:12px; font-weight:400; margin-left:7px; }
input { display:block; width:100%; margin-top:8px; min-height:50px; border:1px solid var(--line); border-radius:6px; padding:10px 13px; background:var(--input); color:var(--ink); }
input::placeholder { color:var(--muted); opacity:1; }
.primary { min-height:50px; min-width:148px; background:var(--accent); color:var(--button-ink); border-color:var(--accent); font-weight:700; }
.primary:hover:not(:disabled) { background:var(--button-hover); color:var(--button-ink); border-color:var(--button-hover); }
.primary span { margin-left:20px; }
.hint,.storage-note { color:var(--muted); font-size:12px; line-height:1.9; }
.hint { margin-top:12px; }
.storage-note { border-top:1px solid var(--line); padding-top:14px; margin:16px 0 0; }
.status { min-height:2em; margin:22px 0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.status[data-error="true"] { color:var(--error); }
.status[data-waiting="true"],main[aria-busy="true"] .status { color:var(--accent); }
#shelf>h2 { margin:36px 0 20px; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.book-card { display:flex; flex-direction:column; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); background:var(--surface); padding:24px; overflow-wrap:anywhere; }
.book-card h3 { font-size:21px; line-height:1.65; font-weight:600; }
.book-card p { font-size:13px; }
.book-card .eyebrow { font-size:10px; }
.book-card .tags { color:var(--muted); font-size:12px; margin-top:auto; padding-top:16px; }
.book-card button { width:100%; margin-top:12px; }
#more-books { display:block; margin:24px auto; }
.reading-room { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.book-heading { max-width:760px; }
.book-heading h2 { font-size:clamp(24px,3vw,34px); font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
#book-synopsis { color:var(--muted); font-size:14px; }
.reading-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px; border-top:1px solid var(--line); margin-top:28px; }
.contents { align-self:start; padding:26px 0; }
.contents h3 { font-size:16px; }
.contents ol { list-style:none; padding:0; }
.contents li { margin-bottom:10px; }
.contents button { width:100%; text-align:left; font-size:13px; padding:12px; overflow-wrap:anywhere; }
.contents button[aria-current="true"] { border-color:var(--accent); background:var(--hover); }
.contents small { display:block; color:var(--muted); margin-top:5px; font-size:11px; }
.contents summary { min-height:44px; cursor:pointer; padding:12px 0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.contents .section-list { margin:10px 0 0 8px; border-left:1px solid var(--line); padding-left:12px; }
.contents details>button { margin-top:8px; }
article { min-width:0; padding:30px 0 20px 36px; border-left:1px solid var(--line); }
article h3 { max-width:34em; font-size:24px; line-height:1.7; overflow-wrap:anywhere; }
.prose { max-width:38em; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; white-space:pre-wrap; overflow-wrap:anywhere; line-height:2.25; font-size:17px; margin:24px 0 28px; }
.chapter-navigation { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:28px; }
footer { border-top:1px solid var(--line); margin-top:56px; padding:24px 0 36px; color:var(--muted); font-size:12px; }
@media (max-width:1024px) {
  .library-opening { gap:28px; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reading-layout { grid-template-columns:220px minmax(0,1fr); gap:24px; }
  article { padding-left:24px; }
}
@media (max-width:760px) {
  main { padding:0 20px; }
  .masthead { min-height:64px; padding:10px 20px; }
  .library-opening { grid-template-columns:1fr; gap:24px; padding:28px 0; }
  .library-art img { aspect-ratio:3/1; object-position:center 44%; }
  .journey { gap:8px 22px; margin-top:20px; font-size:11px; }
  .search-panel { padding:22px 20px; }
  .search-fields { grid-template-columns:1fr; gap:16px; }
  input { font-size:16px; }
  .book-grid,.reading-layout { grid-template-columns:1fr; }
  .contents { padding:24px 0 0; }
  article { border-left:0; border-top:1px solid var(--line); padding:24px 0; }
  .prose { font-size:16px; line-height:2.2; }
}
@media (prefers-color-scheme:light) {
  :root { color-scheme:light; --paper:#f5f7fb; --surface:#fff; --input:#f8faff; --hover:#e6effc; --ink:#15263d; --muted:#53647b; --line:#c5d0df; --accent:#285a9e; --button-ink:#fff; --button-hover:#1c467f; --error:#a02b24; }
}
@media (prefers-reduced-motion:reduce) { button { transition:none; } }