:root{--ink:#08273a;--gold:#d3a63c;--cream:#fff9eb;--soft:#e8f1ee}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#fff7dc 0,#e7efe9 38%,#08273a 120%);color:var(--ink);font-family:Aptos,Arial,sans-serif;min-height:100vh}
header{text-align:center;padding:32px 18px 20px}h1{font-size:clamp(1.8rem,5vw,3.7rem);margin:.25rem 0;line-height:1.05}header p{font-size:clamp(1rem,2.3vw,1.35rem);color:#725510;margin:.5rem}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800;color:#8a6418}
main{max-width:1180px;margin:auto;padding:0 18px 36px}.reader{display:grid;grid-template-columns:54px minmax(0,1fr) 54px;align-items:center;gap:12px}.page-shell{background:#061d2c;padding:10px;border-radius:20px;box-shadow:0 22px 60px #00152255}.page-shell img{width:100%;display:block;border-radius:12px;aspect-ratio:16/9;object-fit:contain;background:#061d2c}.nav{height:70px;border:0;border-radius:50%;font-size:3rem;line-height:1;background:#fff;color:var(--ink);box-shadow:0 6px 22px #00152233;cursor:pointer}.nav:disabled{opacity:.25}.controls{display:flex;gap:14px;align-items:center;justify-content:center;padding:16px}.controls input{width:min(420px,60vw);accent-color:var(--gold)}
.welcome{background:#fffffff0;border:1px solid #fff;border-radius:20px;padding:28px;text-align:center;box-shadow:0 16px 40px #00152225}.welcome h2{margin:0;font-size:clamp(1.5rem,3vw,2.5rem)}.welcome>p{font-size:1.25rem;color:#866016}blockquote{font-family:Georgia,serif;font-size:1.12rem;margin:24px auto;max-width:760px}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.actions a{padding:13px 18px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:800}.actions .primary{background:var(--ink);color:white}.actions a:hover{transform:translateY(-2px)}footer{text-align:center;padding:24px;color:white;background:#08273ae8}
@media(max-width:700px){.reader{grid-template-columns:1fr}.nav{position:fixed;z-index:3;bottom:18px;width:52px;height:52px}.prev{left:15px}.next{right:15px}.page-shell{padding:5px;border-radius:12px}.welcome{padding:22px 16px}.controls{padding-bottom:18px}}