@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
:root { --paper:#f5f0e8; --ink:#242321; --muted:#8a847a; --line:#ded6ca; --accent:#a23b31; --panel:#eee8df; --serif:'Noto Serif SC',serif; --sans:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
body { font-family:var(--serif); transition:background .25s,color .25s; }
.app-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:100vh; }
.sidebar { border-right:1px solid var(--line); padding:30px 22px 24px; display:flex; flex-direction:column; background:color-mix(in srgb,var(--paper) 84%,#fff); }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:58px; font-family:var(--sans); letter-spacing:.05em; }
.brand-mark { width:37px; height:37px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-size:12px; font-weight:600; letter-spacing:-.08em; }
.brand strong,.brand small { display:block; }.brand strong { font-size:15px; }.brand small { color:var(--muted); font-size:8px; margin-top:3px; letter-spacing:.16em; }
.sidebar-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:13px; font-weight:600; }.sidebar-heading span:last-child { color:var(--muted); font:11px var(--sans); }
.search-box { height:38px; border:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 10px; color:var(--muted); margin-bottom:15px; background:rgba(255,255,255,.28); }.search-box input { border:0; outline:0; width:100%; background:transparent; color:var(--ink); font:12px var(--serif); }.search-box span { font:23px var(--sans); line-height:1; transform:rotate(-20deg); }
.chapter-list { overflow:auto; flex:1; padding-right:3px; }.chapter-item { display:flex; align-items:baseline; gap:13px; padding:11px 9px; border-left:2px solid transparent; cursor:pointer; transition:.15s; }.chapter-item:hover { background:var(--panel); }.chapter-item.active { border-color:var(--accent); background:var(--panel); }.chapter-number { color:var(--muted); font:11px var(--sans); }.chapter-title { font-size:13px; }
.sidebar-foot { margin-top:25px; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font:9px/1.7 var(--sans); letter-spacing:.13em; }.sidebar-foot span { letter-spacing:.04em; }
.reader { min-width:0; display:flex; flex-direction:column; }.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,90px); border-bottom:1px solid var(--line); font:10px var(--sans); letter-spacing:.12em; }.crumb { display:flex; gap:12px; color:var(--muted); }.crumb span:last-child { color:var(--ink); }.crumb b { font-weight:400; color:var(--line); }.reader-tools { display:flex; gap:8px; }.tool-button,.icon-button { border:1px solid var(--line); background:transparent; color:var(--ink); height:30px; min-width:32px; cursor:pointer; font:11px var(--sans); }.tool-button:hover,.icon-button:hover { border-color:var(--ink); }.mobile-only { display:none; }
.progress-track { height:2px; background:var(--line); }.progress-track div { height:100%; width:0; background:var(--accent); transition:width .1s; }
.article { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:80px 0 70px; flex:1; }.loading { color:var(--muted); text-align:center; padding:100px 0; font-size:14px; }.loading span { letter-spacing:4px; }
.eyebrow { color:var(--accent); font:11px var(--sans); letter-spacing:.17em; margin-bottom:18px; }.article h1 { font-size:clamp(30px,4vw,50px); line-height:1.2; font-weight:600; letter-spacing:-.05em; margin:0 0 18px; }.article-lede { color:var(--muted); font-size:14px; line-height:1.9; margin:0 0 55px; }.rule { height:1px; background:var(--line); margin:0 0 40px; }
.scene { margin:48px 0 58px; }.scene-label { display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--muted); font:10px var(--sans); letter-spacing:.14em; text-transform:uppercase; }.scene-label::after { content:''; height:1px; width:60px; background:var(--line); }.line { display:grid; grid-template-columns:105px 1fr; gap:24px; margin:0 0 20px; font-size:var(--reading-size,16px); line-height:2.05; }.speaker { color:var(--accent); font-size:11px; padding-top:7px; font-weight:600; }.speaker.narrator { color:var(--muted); }.dialogue { white-space:pre-wrap; text-wrap:pretty; }.mission { margin:34px 0; padding:16px 18px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); display:flex; gap:15px; align-items:baseline; }.mission-tag { color:var(--accent); font:10px var(--sans); letter-spacing:.1em; }.mission-text { font-size:14px; font-weight:600; }
.reader-footer { width:min(760px,calc(100% - 48px)); margin:0 auto; padding:24px 0 34px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }.nav-button { border:0; background:transparent; color:var(--ink); cursor:pointer; font:12px var(--serif); padding:8px 0; }.nav-button:disabled { color:var(--muted); cursor:not-allowed; }.nav-button:hover:not(:disabled) { color:var(--accent); }.footer-progress { display:flex; align-items:center; gap:10px; color:var(--muted); font:10px var(--sans); }.footer-progress span:first-child { color:var(--ink); }.footer-progress i { width:70px; height:1px; background:var(--line); }
body.dark { --paper:#20201d; --ink:#eee8df; --muted:#aaa296; --line:#45423c; --panel:#2d2b27; --accent:#d36e5f; }.dark .sidebar { background:#1b1b19; }.dark .search-box { background:rgba(255,255,255,.03); }.dark .brand-mark { background:var(--accent); color:var(--paper); }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { position:fixed; z-index:5; inset:0 auto 0 0; width:280px; transform:translateX(-100%); transition:transform .2s; box-shadow:8px 0 30px rgba(0,0,0,.12); }.sidebar.open { transform:translateX(0); }.mobile-only { display:inline-block; }.topbar { height:62px; padding:0 18px; gap:14px; }.crumb { flex:1; overflow:hidden; white-space:nowrap; }.reader-tools { gap:4px; }.article { width:calc(100% - 36px); padding-top:50px; }.line { grid-template-columns:1fr; gap:4px; margin-bottom:25px; }.speaker { padding-top:0; }.reader-footer { width:calc(100% - 36px); }.footer-progress { display:none; } }