:root { --paper:#f7f3ee; --ink:#3f3b4d; --mute:#7b7689; --sage:#7d8f78; --lav:#8e86b0; --gold:#b99a55; --line:rgba(120,110,150,.18); --glass:rgba(255,255,255,.62); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  font:18px/1.8 'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; font-weight:400; -webkit-font-smoothing:antialiased; }
.hero { position:relative; height:340px; background:#ddd center 45%/cover no-repeat; transition:background-image .6s;
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); }
.top { position:absolute; top:0; left:0; right:0; z-index:5; padding:18px 20px 0; max-width:860px; margin:0 auto; }
.brand { font-size:15px; letter-spacing:.42em; text-transform:uppercase; color:#4a4560; font-weight:500; }
nav { display:flex; gap:4px; flex-wrap:wrap; margin-top:10px; }
nav button { background:none; border:0; color:#5a5570; padding:6px 12px; font:500 14px/1.2 system-ui,sans-serif; letter-spacing:.04em; cursor:pointer; border-radius:20px; }
nav button.on { background:rgba(255,255,255,.7); backdrop-filter:blur(6px); color:#2d2a3d; }
.badge { background:rgba(255,255,255,.85); color:var(--lav); border-radius:10px; padding:0 7px; font-size:11px; margin-left:3px; }
main { flex:1; max-width:760px; width:100%; margin:-70px auto 0; padding:0 20px 50px; position:relative; z-index:2; }
.tab { display:none; animation:fade .7s ease; } .tab.on { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
h1 { font-weight:400; font-size:34px; letter-spacing:.02em; margin:.1em 0 .25em; line-height:1.25; color:#2d2a3d; }
.eyebrow { color:var(--lav); text-transform:uppercase; letter-spacing:.3em; font:500 11px system-ui,sans-serif; margin:0; }
.lead { color:var(--mute); margin:26px 0 8px; font-size:17px; font-style:italic; }
.note { color:var(--mute); font-size:15px; }
.focus, .chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.chip { background:var(--glass); border:1px solid var(--line); color:var(--mute); border-radius:20px; padding:4px 14px; cursor:pointer; font:14px system-ui,sans-serif; transition:all .25s; }
.chip:hover { border-color:var(--sage); }
.chip.on { background:var(--sage); color:#fff; border-color:var(--sage); }
.manifesto { background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:22px; padding:30px 32px;
  font-size:21px; line-height:1.95; box-shadow:0 20px 50px -30px rgba(90,80,130,.45); text-align:center; }
.manifesto p { margin:0 0 1.1em; padding:2px 8px; border-radius:10px; transition:background .6s, color .6s; } .manifesto p:last-child { margin:0; }
.manifesto .ref { display:block; margin-top:2px; color:var(--lav); font:11px system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.manifesto p.speaking { background:rgba(142,134,176,.14); color:#2d2a3d; }
.empty { color:var(--mute); font-style:italic; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; justify-content:center; }
button { font:500 14px system-ui,sans-serif; letter-spacing:.03em; padding:10px 20px; border-radius:24px; border:1px solid var(--line); background:var(--glass); color:var(--ink); cursor:pointer; transition:all .25s; }
button:hover { border-color:var(--lav); }
button.primary { background:var(--lav); color:#fff; border-color:var(--lav); }
button.primary.breathing { animation:breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { box-shadow:0 0 0 0 rgba(142,134,176,.55); } 50% { box-shadow:0 0 0 14px rgba(142,134,176,0); transform:scale(1.03); } }
button.danger { color:#b46a6a; }
button:disabled { opacity:.5; }
.item { display:flex; gap:12px; align-items:flex-start; padding:16px 4px; border-bottom:1px solid var(--line); }
.item .t { flex:1; } .item .r { color:var(--lav); font:11px system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.star { background:none; border:0; font-size:22px; padding:0 4px; color:#bdb7cc; }
.star.on { color:var(--gold); }
#libList, form { background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:8px 22px; }
form { padding:14px 24px; }
form label { display:block; margin:14px 0; color:var(--mute); font:13px system-ui,sans-serif; letter-spacing:.06em; }
input, textarea { width:100%; margin-top:6px; padding:12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.8); color:var(--ink); font:17px Georgia,serif; }
input:focus, textarea:focus { outline:2px solid rgba(142,134,176,.4); }
footer { text-align:center; color:var(--mute); font-size:13px; padding:20px; max-width:560px; margin:0 auto; font-style:italic; }
@media (max-width:520px) { .hero { height:300px; } .manifesto { font-size:19px; padding:22px 16px; } h1 { font-size:27px; } }
@media (prefers-reduced-motion:reduce) { *, button.primary.breathing { animation:none !important; } }


body.night .brand, body.night nav button { color:#f1ecff; }
body.night nav button.on { background:rgba(255,255,255,.22); color:#fff; }