:root { color-scheme: light dark; --paper:#fff; --ink:#172737; --muted:#5d6870; --line:#dde2e5; --accent:#954b24; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:30px; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Georgia,'Times New Roman',serif; } a { color:inherit; text-underline-offset:5px; } button,a { -webkit-tap-highlight-color:transparent; } a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
header { max-width:1120px; margin:auto; padding:25px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } header a { text-decoration:none; } header > a:last-child { font:15px system-ui,sans-serif; } .brand { font-size:26px; }.brand span { color:var(--accent); } .skip { position:absolute; top:-80px; padding:15px; background:var(--paper); z-index:10; }.skip:focus { top:0; }
.introduction { max-width:780px; margin:70px auto 0; text-align:center; padding:0 24px; }.eyebrow { font:13px/1.5 system-ui,sans-serif; letter-spacing:3px; color:var(--accent); } h1 { font-size:clamp(38px,6vw,68px); line-height:1.1; font-weight:400; letter-spacing:-1.8px; margin:22px 0; }.dek { font-size:25px; line-height:1.45; }.description { max-width:560px; margin:25px auto; font-size:19px; line-height:1.75; color:var(--muted); }.read-button { display:inline-flex; gap:22px; padding:15px 24px; background:var(--ink); color:var(--paper); font:16px system-ui,sans-serif; text-decoration:none; border-radius:3px; }.preview-label { color:var(--muted); font:14px/1.5 system-ui,sans-serif; margin:18px 0 0; }
.opening-art { max-width:1040px; margin:38px auto; padding:0 20px; } img { width:100%; height:auto; display:block; background:#fff; }.contents { max-width:730px; padding:20px 24px 60px; margin:auto; }.contents h2 { font-size:32px; font-weight:400; }.contents ol { padding:0; list-style:none; }.contents li a { display:flex; gap:25px; padding:24px 0; border-top:1px solid var(--line); text-decoration:none; align-items:baseline; }.contents li span { font:14px system-ui,sans-serif; color:var(--muted); min-width:90px; }.contents li strong { font-size:23px; font-weight:400; }
.chapter { max-width:800px; margin:50px auto 70px; padding:0 28px; }.chapter-heading { text-align:center; }.chapter-heading h1 { font-size:clamp(38px,5vw,54px); }.chapter-art { margin:35px 0; }.reading-controls:not([hidden]) { display:flex; justify-content:flex-end; gap:12px; align-items:center; margin-bottom:25px; font:14px system-ui,sans-serif; color:var(--muted); }.reading-controls button { min-height:44px; min-width:44px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); cursor:pointer; font-size:18px; } button:disabled { opacity:.4; } article { font-size:var(--reading-size,21px); line-height:1.9; } article p { margin:0 0 1.3em; } article hr { border:0; width:70px; height:1px; background:var(--line); margin:40px auto; }.chapter-navigation { border-top:1px solid var(--line); padding-top:25px; display:flex; gap:24px; justify-content:space-between; font:15px/1.6 system-ui,sans-serif; }.chapter-navigation span { color:var(--muted); } footer { max-width:1120px; margin:auto; border-top:1px solid var(--line); padding:28px; display:flex; justify-content:space-between; gap:20px; font:14px/1.5 system-ui,sans-serif; color:var(--muted); }
@media(max-width:600px) { header { padding:20px; }.brand { font-size:23px; }.introduction { margin-top:44px; } h1 { letter-spacing:-1px; }.dek { font-size:22px; }.chapter { padding:0 23px; margin-top:34px; }.opening-art { padding:0; }.contents li a { gap:12px; }.contents li strong { font-size:21px; } footer { padding:24px; } }
@media(prefers-color-scheme:dark) { :root { --paper:#101c28; --ink:#e5eaf0; --muted:#b3bdc7; --line:#344453; --accent:#e6aa7f; } }
.dek { max-width:550px; margin:24px auto; font-size:23px; }
.synopsis { max-width:580px; margin:28px auto 30px; text-align:left; font-size:19px; line-height:1.75; color:var(--muted); }
.synopsis p { margin:0 0 1em; }
.preview-context { font-size:18px; line-height:1.6; color:var(--muted); }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }