:root { --paper:#fff0ef; --ink:#432c39; --accent:#d55370; --display:Trebuchet MS; --text:Georgia; --edge:color-mix(in srgb,var(--ink) 18%,transparent); --soft:color-mix(in srgb,var(--ink) 5%,var(--paper)); --wash:color-mix(in srgb,var(--accent) 12%,var(--paper)); }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text),Georgia,serif;min-width:300px} button,input,textarea{font:inherit} button{cursor:pointer} a{color:inherit} .app-shell{max-width:1600px;margin:auto} .topbar{height:76px;padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--edge)} .identity{display:flex;align-items:center;gap:13px;text-decoration:none;font-family:var(--display),Georgia,serif;font-size:20px;font-weight:700;white-space:nowrap}.identity img{width:38px;height:38px;border-radius:9px}.edition{margin-left:auto;font:600 11px/1.2 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.65}.icon-button{border:1px solid var(--edge);background:transparent;color:var(--ink);width:42px;height:42px;border-radius:50%;font-family:Arial,sans-serif}.menu-button{display:none}
.hero{min-height:440px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);border-bottom:1px solid var(--edge);position:relative;overflow:hidden}.hero-copy{padding:clamp(35px,6vw,86px) clamp(24px,6vw,92px);position:relative;z-index:1}.eyebrow{font:700 11px/1.3 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.hero-number{position:absolute;right:20px;top:22px;font:700 11px Arial,sans-serif;opacity:.45}.hero h1{font:normal clamp(39px,5vw,76px)/1.05 var(--display),Georgia,serif;letter-spacing:-.045em;max-width:850px;margin:25px 0 13px}.author{font-size:18px;margin:0;opacity:.76}.deck{font-size:17px;line-height:1.5;max-width:560px;margin:28px 0 30px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-actions button{padding:15px 19px;border:1px solid var(--accent);border-radius:3px;font:700 13px Arial,sans-serif;display:flex;gap:18px;align-items:center}.primary{background:var(--accent);color:#ffffff}.secondary{color:var(--ink);background:transparent}.hero-meta{display:flex;gap:18px;flex-wrap:wrap;font:600 11px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-top:36px}.hero-art{display:grid;place-items:center;background:var(--wash);position:relative;min-height:320px;border-left:1px solid var(--edge)}.hero-art img{width:min(58%,300px);aspect-ratio:1;object-fit:contain;mix-blend-mode:normal}.art-label{position:absolute;bottom:20px;right:25px;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.5}.art-line{position:absolute;inset:18px;border:1px solid var(--edge);pointer-events:none}
.workspace{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:600px}.rail{padding:38px 16px 30px clamp(20px,4vw,65px);border-right:1px solid var(--edge);display:flex;flex-direction:column;align-items:stretch;gap:4px}.rail button{text-align:left;background:transparent;border:0;border-radius:3px;color:var(--ink);padding:12px 8px;font:600 12px Arial,sans-serif;white-space:nowrap}.rail button:hover,.rail button:focus-visible{background:var(--wash);outline:none}.reader-area{padding:42px clamp(20px,6vw,100px) 80px;max-width:1060px;width:100%;margin:auto;scroll-margin-top:12px}.reader-top{display:flex;justify-content:space-between;gap:15px;align-items:center;font:700 11px Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}.section-label{color:var(--accent);max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-counter{opacity:.65;white-space:nowrap}.progress-track{height:3px;background:var(--edge);margin:16px 0 35px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .2s}.reading-sheet{max-width:760px;margin:auto;padding:clamp(24px,4vw,52px);background:var(--soft);border:1px solid var(--edge);min-height:380px}.reading-sheet h2{font:normal clamp(27px,3vw,41px)/1.18 var(--display),Georgia,serif;margin:0 0 33px;letter-spacing:-.025em}.page-text{font-family:var(--text),Georgia,serif;font-size:var(--reading-size,19px);line-height:var(--reading-line,1.75);overflow-wrap:anywhere}.page-text p{margin:0 0 1.15em;white-space:pre-wrap}.page-text h3{font:700 1.15em/1.35 var(--display),Georgia,serif;margin:1.6em 0 .6em}.page-text .editorial{font-size:.82em;opacity:.7;border-left:2px solid var(--accent);padding-left:12px}.page-actions{max-width:760px;margin:20px auto 0;display:flex;justify-content:space-between;gap:8px}.page-actions button,.jump-row button{background:transparent;border:1px solid var(--edge);color:var(--ink);padding:11px 14px;font:700 12px Arial,sans-serif}.page-actions button:hover,.jump-row button:hover{border-color:var(--accent)}.page-actions button:disabled{opacity:.35;cursor:default}.jump-row{max-width:760px;margin:16px auto 0;display:flex;align-items:center;gap:9px;font:12px Arial,sans-serif}.jump-row label{opacity:.7}.jump-row input{width:65px;padding:8px;border:1px solid var(--edge);color:var(--ink);background:transparent}.jump-row #savedStatus{margin-left:auto;opacity:.6}footer{border-top:1px solid var(--edge);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px clamp(20px,5vw,72px) 40px;font:12px/1.5 Arial,sans-serif;opacity:.75}footer a{text-decoration:underline;text-underline-offset:3px}
.scrim{position:fixed;inset:0;background:#0009;z-index:19}.drawer{position:fixed;z-index:20;inset:0 0 0 auto;width:min(460px,100vw);background:var(--paper);border-left:1px solid var(--edge);box-shadow:-12px 0 50px #0002;display:flex;flex-direction:column}.drawer[hidden],.scrim[hidden]{display:none}.drawer-head{padding:30px 26px 20px;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;gap:10px}.drawer-head h2{font:normal 34px/1.1 var(--display),Georgia,serif;margin:7px 0 0}.drawer-body{overflow:auto;padding:24px 26px 50px;flex:1}.drawer-body p{line-height:1.5}.drawer-body button{color:var(--ink)}.panel-list{display:flex;flex-direction:column;gap:6px}.panel-list button{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;border:1px solid var(--edge);padding:12px;background:transparent}.panel-list button:hover{border-color:var(--accent);background:var(--wash)}.panel-list .num{min-width:35px;color:var(--accent);font:700 11px Arial,sans-serif}.panel-list .title{line-height:1.3}.panel-list .active{border-color:var(--accent);background:var(--wash)}.panel-note{font:12px/1.5 Arial,sans-serif;opacity:.7}.panel-field{display:flex;flex-direction:column;gap:6px;margin:17px 0}.panel-field input,.panel-field textarea{width:100%;border:1px solid var(--edge);padding:12px;color:var(--ink);background:var(--soft)}.panel-field textarea{min-height:150px;resize:vertical}.panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.panel-actions button,.panel-primary{border:1px solid var(--accent);padding:11px 14px;background:var(--accent);color:#ffffff;font:700 12px Arial,sans-serif}.panel-actions button.secondary-action{background:transparent;color:var(--ink)}.result-snippet{display:block;font:12px/1.4 Arial,sans-serif;opacity:.7;margin-top:6px}.feature-stat{font:normal 42px/1 var(--display),Georgia,serif;margin:18px 0 6px;color:var(--accent)}.feature-card{border:1px solid var(--edge);background:var(--soft);padding:17px;margin:12px 0}.feature-card blockquote{margin:0;font:italic 18px/1.5 var(--text),Georgia,serif}.feature-card small{display:block;margin-top:10px;opacity:.65}.check-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--edge)}.check-row input{accent-color:var(--accent);margin-top:3px}.mini-preview{font:16px/1.55 var(--text),Georgia,serif;max-height:250px;overflow:auto;white-space:pre-wrap}.compact .reading-sheet{padding:16px}.compact .page-text{line-height:1.35}.focus .topbar,.focus .hero,.focus .rail,.focus footer,.focus .reader-top,.focus .progress-track{display:none}.focus .workspace{display:block}.focus .reader-area{padding-top:20px}.focus .reading-sheet{border:0;background:transparent}.focus .page-actions{margin-top:15px}
body[data-layout="1"] .hero{grid-template-columns:1fr 1fr}body[data-layout="1"] .hero-art{background:var(--accent)}body[data-layout="1"] .hero-art img{transform:rotate(-9deg);box-shadow:20px 20px 0 #0002}body[data-layout="1"] .reading-sheet{border-radius:18px}body[data-layout="1"] .progress-track{height:7px;border-radius:8px}body[data-layout="1"] .progress-track span{border-radius:8px}
body[data-layout="2"] .topbar{border-bottom:0}body[data-layout="2"] .hero{grid-template-columns:1fr;text-align:center;min-height:0}body[data-layout="2"] .hero-copy{padding-bottom:45px}body[data-layout="2"] .hero h1{margin-left:auto;margin-right:auto}body[data-layout="2"] .deck{margin-left:auto;margin-right:auto}body[data-layout="2"] .hero-actions,body[data-layout="2"] .hero-meta{justify-content:center}body[data-layout="2"] .hero-art{display:none}body[data-layout="2"] .workspace{grid-template-columns:1fr}body[data-layout="2"] .rail{flex-direction:row;justify-content:center;flex-wrap:wrap;padding:12px;border-right:0;border-bottom:1px solid var(--edge)}body[data-layout="2"] .rail button{text-align:center}body[data-layout="2"] .reading-sheet{background:transparent;border:0;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
body[data-layout="3"] .hero{grid-template-columns:minmax(0,1fr) 34%}body[data-layout="3"] .hero-art{background:var(--paper)}body[data-layout="3"] .hero-art img{border:8px double var(--accent);border-radius:50%;padding:24px}body[data-layout="3"] .rail{background:var(--wash)}body[data-layout="3"] .reading-sheet{background:var(--paper);box-shadow:10px 10px 0 var(--wash)}body[data-layout="3"] .page-actions button{border-radius:40px}
body[data-layout="4"] .hero{grid-template-columns:1fr 300px}body[data-layout="4"] .hero-copy{border-left:12px solid var(--accent);margin:35px 0 35px 35px;padding-top:30px;padding-bottom:30px}body[data-layout="4"] .hero h1{text-transform:uppercase;letter-spacing:-.06em}body[data-layout="4"] .hero-art{background:transparent;border:0}body[data-layout="4"] .hero-art img{transform:scale(.82)}body[data-layout="4"] .rail{border-right:0;border-bottom:1px solid var(--edge)}body[data-layout="4"] .reading-sheet{border-left:6px solid var(--accent)}
#exitFocus{display:none}.focus #exitFocus{display:block;position:fixed;z-index:10;right:18px;top:14px;background:var(--paper);color:var(--ink);border:1px solid var(--edge);padding:10px 14px;font:700 12px Arial,sans-serif}.focus .reader-area{padding-top:70px}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.rail{flex-direction:row;overflow:auto;white-space:nowrap;padding:10px 15px;border-right:0;border-bottom:1px solid var(--edge)}.rail button{padding:10px}.hero{grid-template-columns:1fr 35%}.hero-copy{padding:40px 25px}.hero h1{font-size:clamp(38px,7vw,61px)}.hero-art{min-height:0}.hero-art img{width:80%}body[data-layout="4"] .hero{grid-template-columns:1fr 25%}}
@media(max-width:600px){.topbar{height:62px;padding:0 17px}.identity{font-size:18px}.edition{display:none}.menu-button{display:block;margin-left:auto}.hero,.hero[data-layout],body[data-layout="1"] .hero,body[data-layout="3"] .hero,body[data-layout="4"] .hero{display:block}.hero-copy{padding:36px 22px 35px}.hero h1{font-size:clamp(36px,11vw,53px);margin:20px 0 10px}.deck{margin:20px 0}.hero-art{display:none}.hero-meta{margin-top:23px}.rail{gap:0}.rail button{font-size:11px}.reader-area{padding:26px 12px 55px}.reading-sheet{padding:22px 18px;min-height:300px}.reading-sheet h2{font-size:28px}.page-text{font-size:var(--reading-size,18px)}.page-actions button{font-size:11px;padding:10px}.jump-row{flex-wrap:wrap}.jump-row #savedStatus{width:100%;margin-left:0}body[data-layout="4"] .hero-copy{margin:0 0 0 16px}body[data-layout="2"] .hero-copy{text-align:left}body[data-layout="2"] .hero-actions,body[data-layout="2"] .hero-meta{justify-content:flex-start}}
@media(max-width:900px){.workspace,body[data-layout="2"] .workspace{grid-template-columns:minmax(0,1fr)}.rail,.reader-area{min-width:0}}

body.alternate{--paper:#17242c;--ink:#f3eee4;}