/* Wisdom Worth Spreading — shared book styles. One reading column like a book page; interactions are "pauses" between passages. */
:root{
  --sky:#F4F7F9; --paper:#FFFFFF; --ink:#1C1E22; --muted:#5D6670; --line:#DCE3E8;
  --gold:#9A6512; --glow:#F2C46B; --friend:#2F7D6B; --enemy:#B04A2F; --pause:#EEF3F6;
  --display:"Marcellus","Trajan Pro",Georgia,serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --size:1.125rem; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-theme="paper"]){
  --sky:#0F1318; --paper:#161B21; --ink:#E9ECEF; --muted:#9AA5AF; --line:#2A323B;
  --gold:#E3A846; --glow:#E3A846; --friend:#5FC2A8; --enemy:#E57E5F; --pause:#1B222A; color-scheme:dark}}
:root[data-theme="dark"]{
  --sky:#0F1318; --paper:#161B21; --ink:#E9ECEF; --muted:#9AA5AF; --line:#2A323B;
  --gold:#E3A846; --glow:#E3A846; --friend:#5FC2A8; --enemy:#E57E5F; --pause:#1B222A; color-scheme:dark}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:var(--size);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sky)}
body.morning{--size:1.25rem}
img{max-width:100%}[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
a{color:var(--gold)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--glow);outline-offset:2px;border-radius:6px}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--sky) 92%,transparent);
  backdrop-filter:blur(8px);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:10px max(16px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);font-family:var(--ui);font-size:.85rem}
.bar-in{max-width:760px;margin:auto;display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.bar .back{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);background:var(--paper)}
.bar .ch{flex:1 1 auto;min-width:0;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:.78rem}
.thermo{flex:0 1 190px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.72rem}
.iconbtn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.iconbtn[aria-pressed="true"]{background:var(--glow);border-color:var(--gold);color:#1C1E22}
@media (max-width:520px){.thermo{flex:0 0 74px}.thermo .lbl{display:none}}
.thermo .track{position:relative;flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--enemy),var(--line) 50%,var(--friend))}
.thermo .knob{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transform:translate(-50%,-50%);left:50%;transition:left .6s ease}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--gold);width:0}
body.morning .thermo, body.morning .pause:not(.keep){opacity:.35}
body.morning .pause:not(.keep):hover, body.morning .pause:not(.keep):focus-within{opacity:1}

main{max-width:680px;margin:auto;padding-block:28px 64px}
.eyebrow{font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,9vw,4rem);line-height:1;margin:.2em 0 .25em;letter-spacing:.04em;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:.04em;margin:2.2em 0 .6em;text-wrap:balance;line-height:1.25}

.text p{margin:0 0 1.15em;color:color-mix(in srgb,var(--ink) 90%,var(--sky));hyphens:auto;-webkit-hyphens:auto}
.text h2{text-align:center}
.text h2::before{content:"";display:block;width:36px;height:2px;background:var(--gold);margin:0 auto .7em;border-radius:2px}
.text p.q{font-style:italic;color:var(--muted)}
.dropcap::first-letter{font-family:var(--display);float:left;font-size:3.6em;line-height:.85;padding:.06em .1em 0 0;color:var(--gold)}
.def{border-left:2px solid var(--gold);padding:.2em 0 .2em 1em;margin:1.2em 0;font-size:.95em}
.def b{font-family:var(--ui);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.law{font-family:var(--display);font-size:1.35rem;line-height:1.4;text-align:center;margin:1.4em 0;text-wrap:balance}
.letter{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:clamp(20px,5vw,44px);box-shadow:0 24px 40px -32px rgba(0,0,0,.4)}
.letter .salute{font-style:italic;font-size:1.15em}
.letter .sign{text-align:right;font-style:italic;margin-top:1.4em}

/* pauses (interactions) */
.pause{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(20,24,30,.04),0 14px 34px -24px rgba(20,24,30,.3);padding:22px clamp(16px,4vw,28px);margin:2.2em 0;font-family:var(--ui);font-size:1rem;line-height:1.55;transition:opacity .3s}
.pause .tag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--glow);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 30%,transparent)}
.pause .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.pause h3{font-family:var(--body);font-weight:600;font-size:1.25rem;margin:.3em 0 .5em;text-wrap:balance}
.pause p{margin:.4em 0}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:11px 20px;cursor:pointer;font-family:var(--ui);font-weight:600;text-decoration:none;font-size:1rem;line-height:1.3}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.gold{background:var(--gold);color:var(--paper)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.reply{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--pause);font-family:var(--body);font-size:1rem}
.reply .from{display:block;font-family:var(--ui);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.example{font-size:.8rem;color:var(--muted)}
.checks{display:grid;gap:8px;margin:10px 0}
.checks label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.checks input{margin-top:4px;accent-color:var(--gold);width:18px;height:18px;flex:none}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.opts button{border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.opts button[aria-pressed="true"]{border-color:var(--ink);font-weight:600}

/* breathing */
.breath{display:grid;place-items:center;height:190px}
.orb{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--glow),color-mix(in srgb,var(--glow) 20%,transparent) 70%);transition:transform 4s ease-in-out}
.orb.in{transform:scale(2.2)}
.breath-label{font-family:var(--body);font-style:italic;color:var(--muted);min-height:1.6em;text-align:center}

/* road of years */
.inputs{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 14px}
.inputs label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:4px}
.inputs input,.inputs select{border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:8px;padding:8px 10px;width:110px}
.road{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;margin:8px 0 6px}
.road i{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--muted);opacity:.7}
.road i.lived{background:var(--muted);opacity:.35}
.road i.now{background:var(--glow);border-color:var(--gold);opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 35%,transparent)}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--muted);flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stats div{background:var(--pause);border-radius:10px;padding:10px 12px;min-width:0}
.stats b{display:block;font-family:var(--body);font-size:1.45rem;font-variant-numeric:tabular-nums;font-weight:600}
.stats span{font-size:.78rem;color:var(--muted)}
@media (max-width:420px){.stats b{font-size:1.15rem}}

/* impermanence */
.scene{height:150px;border-radius:12px;position:relative;overflow:hidden;margin:12px 0;background:linear-gradient(#8fb9d8,#f6e3b8)}
.scene .sun{position:absolute;width:38px;height:38px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 30px #FFD36B;transform:translate(-50%,-50%)}
.scene .ground{position:absolute;left:0;right:0;bottom:0;height:34px;background:#5b7a52;transition:background .4s}
.scene .label{position:absolute;left:12px;top:10px;font-size:.8rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-weight:600;letter-spacing:.04em}
input[type=range]{width:100%;accent-color:var(--gold)}

/* situations */
.sits{display:grid;gap:12px;margin-top:12px}
.sit{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sit p{margin:0 0 8px;font-family:var(--body);font-size:1rem}
.sit .row button{flex:1;min-width:92px;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:8px;padding:8px;cursor:pointer;font-size:.88rem}
.sit .row button[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.sit .fb{font-family:var(--body);font-style:italic;font-size:.95rem;color:var(--muted);margin-top:8px}

/* flight */
.ticket{border:1px dashed var(--muted);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 14px;font-variant-numeric:tabular-nums}
.ticket div{display:flex;flex-direction:column}
.ticket small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stamp{color:var(--enemy);border:2px solid var(--enemy);border-radius:6px;padding:2px 8px;font-weight:600;letter-spacing:.1em;transform:rotate(-6deg);align-self:center}

/* ask */
.qa details{border-top:1px solid var(--line);padding:10px 0}
.qa summary{cursor:pointer;font-weight:600;font-family:var(--body);font-size:1.02rem}
.qa .ans{font-family:var(--body);font-size:1rem;margin-top:8px}

textarea{width:100%;box-sizing:border-box;min-height:90px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:1rem}
.card{border-radius:14px;padding:26px 24px;background:linear-gradient(160deg,var(--paper),var(--pause));border:1px solid var(--line);margin-top:14px}
.card .big{font-family:var(--display);font-size:1.35rem;line-height:1.35;text-wrap:balance}
.card .mine{font-family:var(--body);font-style:italic;margin-top:12px}
.card .sig{font-size:.8rem;color:var(--muted);margin-top:14px;letter-spacing:.06em}

blockquote.closing{font-family:var(--display);font-size:1.35rem;line-height:1.45;text-align:center;margin:3em auto 1em;max-width:30ch;text-wrap:balance}
.cite{text-align:center;font-family:var(--ui);font-size:.85rem;color:var(--muted)}
.next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2.5em;font-family:var(--ui)}
.next a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--paper)}
.next a small{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.next a b{font-family:var(--body);font-size:1.05rem}
.next a.soon{opacity:.6}
@media (max-width:520px){.next{grid-template-columns:1fr}}
.foot{font-family:var(--ui);font-size:.82rem;color:var(--muted);text-align:center;margin:3em 0 1em;display:flex;gap:6px 16px;justify-content:center;flex-wrap:wrap}
.foot a{color:var(--muted)}

/* ---------- book home ---------- */
.site{max-width:1040px;margin:auto;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding-block:14px;font-family:var(--ui);font-size:.92rem}
.site .mark{font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;margin-right:auto}
.site a{color:var(--ink);text-decoration:none}
.site a:hover{color:var(--gold)}
@media (max-width:520px){.site .mark{flex-basis:100%}}
.cover-hero{max-width:1040px;margin:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(20px,5vw,56px) 24px}
.cover-hero h1{font-size:clamp(2.5rem,7vw,4.6rem);line-height:1.02}
.cover-hero .lede{font-size:1.15rem;color:var(--muted);max-width:34ch;margin:.4em 0 1.2em}
.cover-hero .meta{font-family:var(--ui);font-size:.85rem;color:var(--muted);margin-top:14px}
.book3d{max-width:260px;margin:auto;transform:perspective(1400px) rotateY(-18deg) rotateX(2deg);border-radius:3px 8px 8px 3px;transition:transform .7s ease;
  box-shadow:22px 26px 44px rgba(0,0,0,.28),2px 0 0 #e9edf0,4px 1px 0 #dde2e6,6px 2px 0 #d0d6db}
.book3d img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px}
.book3d:hover{transform:perspective(1400px) rotateY(-6deg)}
@media (max-width:700px){.cover-hero{grid-template-columns:1fr}.cover-hero .art{order:-1}.book3d{max-width:170px}}
.wide{max-width:1040px;margin:auto}
.section{padding-block:clamp(32px,6vw,64px);border-top:1px solid var(--line)}
.section h2{margin-top:.2em}
.section .intro{color:var(--muted);max-width:60ch}
.thread{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.side{border-radius:14px;padding:18px 20px;border:1px solid var(--line);background:var(--paper);font-family:var(--ui)}
.side h3{margin:0 0 8px;font-family:var(--body);font-size:1.15rem}
.side.f h3{color:var(--friend)} .side.e h3{color:var(--enemy)}
.side ul{margin:0;padding-left:1.1em;line-height:1.9}
@media (max-width:560px){.thread{grid-template-columns:1fr}}
.dial{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--ui);font-size:.85rem;color:var(--muted)}
.dial .track{position:relative;flex:1;max-width:340px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--enemy),var(--line) 50%,var(--friend))}
.dial .knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transform:translate(-50%,-50%);left:50%}
.path{list-style:none;margin:20px 0 0;padding:0;position:relative}
.path::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.part{font-family:var(--ui);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:18px 0 6px 46px}
.stop{position:relative;padding:10px 0 10px 46px}
.stop .dot{position:absolute;left:6px;top:18px;width:20px;height:20px;border-radius:50%;background:var(--sky);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--ui);font-size:.7rem;color:var(--muted)}
.stop.open .dot{border-color:var(--gold);color:var(--gold)}
.stop.done .dot{background:var(--gold);border-color:var(--gold);color:var(--paper)}
.stop a,.stop .soonbox{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stop a:hover{border-color:var(--gold)}
.stop .soonbox{opacity:.62}
.stop .num{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.stop .num em{font-style:normal;color:var(--gold);font-weight:600}
.stop b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.03em;margin:2px 0}
.stop span.idea{display:block;color:var(--muted);font-size:.98rem}
.cmds{counter-reset:c;list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.cmds li{counter-increment:c;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;font-size:1.08rem}
.cmds li::before{content:counter(c);font-family:var(--display);font-size:1.8rem;color:var(--gold);text-align:right}
.mind{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
@media (max-width:640px){.mind{grid-template-columns:1fr}}
.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;font-family:var(--ui)}
.more a{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px}
.more a:hover{border-color:var(--gold)}
.more b{display:block;font-family:var(--body);font-size:1.08rem;margin-bottom:4px}
.more span{color:var(--muted);font-size:.88rem}
@media (max-width:820px){.more{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.more{grid-template-columns:1fr}}
.late{font-family:var(--ui);font-size:.9rem;background:var(--pause);border-radius:10px;padding:10px 14px;margin-top:12px}

/* ---------- chapter 2 ---------- */
.ctrls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ctrls .col{display:grid;gap:8px;align-content:start}
.ctrls .col > span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.ctrls .f > span{color:var(--friend)} .ctrls .e > span{color:var(--enemy)}
.ctrls button{border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:10px;padding:10px;cursor:pointer;text-align:left;font-size:.92rem}
.ctrls .f button[aria-pressed="true"]{border-color:var(--friend);background:color-mix(in srgb,var(--friend) 14%,var(--sky));font-weight:600}
.ctrls .e button[aria-pressed="true"]{border-color:var(--enemy);background:color-mix(in srgb,var(--enemy) 14%,var(--sky));font-weight:600}
.dialwrap{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-top:8px}
.dialwrap svg{width:150px;height:auto;display:block}
.dialwrap .needle{transition:transform .9s cubic-bezier(.3,1.4,.5,1);transform-origin:75px 80px}
@media (max-width:420px){.dialwrap{grid-template-columns:1fr}.dialwrap svg{margin:auto}}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:.9rem}
.chain span{background:var(--pause);border-radius:999px;padding:5px 11px}
.chain i{font-style:normal;color:var(--muted)}
.chain .st{font-weight:600}
.chain .st.f{color:var(--friend)} .chain .st.e{color:var(--enemy)}
.views{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sky3{height:170px;border-radius:12px;position:relative;overflow:hidden;transition:background .8s}
.sky3 .orb3{position:absolute;border-radius:50%;transition:all .8s ease}
.sky3 .sea{position:absolute;left:0;right:0;bottom:0;height:38px;transition:background .8s}
.sky3 .earth{position:absolute;border-radius:50%;transition:all .8s ease}
.sky3 .say{position:absolute;left:12px;bottom:10px;right:12px;color:#fff;font-family:var(--body);font-style:italic;text-shadow:0 1px 4px rgba(0,0,0,.7);z-index:2}
.roads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.roads .rd{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.92rem}
.roads .rd ol{margin:6px 0 0;padding-left:1.1em;line-height:1.55}
.roads .rd b{display:block;font-family:var(--body)}
.roads .rd.dim{opacity:.45}
@media (max-width:520px){.roads{grid-template-columns:1fr}}
.items{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.items button{border:1px dashed var(--muted);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:.9rem}
.items button[aria-pressed="true"]{border-style:solid;border-color:var(--gold);color:var(--gold);font-weight:600}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bucket{border:2px solid var(--line);border-radius:6px 6px 18px 18px;min-height:130px;padding:10px;cursor:pointer;background:var(--sky);display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--ink);font:inherit}
.bucket.ready{border-color:var(--gold)}
.bucket b{font-size:.78rem;letter-spacing:.06em;line-height:1.3}
.bucket small{font-size:.75rem;color:var(--muted);line-height:1.3}
.bucket .in{display:flex;flex-wrap:wrap;gap:4px}
.bucket .in span{background:var(--pause);border-radius:999px;padding:2px 8px;font-size:.78rem}
.bucket.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (max-width:440px){.buckets{grid-template-columns:1fr}.bucket{min-height:70px}}
.mine-row{display:flex;gap:8px;margin-top:8px}
.mine-row input{flex:1;min-width:0;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:999px;padding:8px 14px}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.2em 0}
.summary div{border-radius:12px;padding:14px 16px;border:1px solid var(--line);background:var(--paper);font-family:var(--ui)}
.summary b{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.summary .f b{color:var(--friend)} .summary .e b{color:var(--enemy)}
.summary ul{margin:0;padding-left:1.1em;line-height:1.8}

/* ---------- chapter opener (title page) ---------- */
.opener{position:relative;isolation:isolate;text-align:center;padding-block:clamp(36px,9vw,72px) 8px}
.opener::before{content:"";position:absolute;left:50%;top:-30px;width:min(560px,100%);height:380px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 42%,transparent),transparent);opacity:.75;pointer-events:none}
.opener .eyebrow{display:block}
.opener .numeral{font-family:var(--display);font-size:clamp(4.6rem,24vw,7.5rem);line-height:.95;color:var(--gold);margin-top:.15em}
.opener .orn{font-family:var(--display);font-size:2.6rem;color:var(--gold);line-height:1;margin-top:.3em}
.opener h1{font-size:clamp(2.3rem,10vw,3.6rem);margin:.15em 0 .2em}
.opener .sub{font-style:italic;color:var(--muted);max-width:28ch;margin:0 auto;font-size:1.08rem}
.opener .meta{font-family:var(--ui);font-size:.8rem;color:var(--muted);margin-top:18px;letter-spacing:.04em}
.opener .rule{width:56px;height:1px;background:var(--gold);margin:26px auto 30px}

/* ---------- Ask Hakim ---------- */
.ask{margin:2.6em 0;border-radius:22px;padding:22px clamp(16px,4.5vw,30px) 24px;border:1px solid var(--line);font-family:var(--ui);
  background:linear-gradient(165deg,var(--paper) 55%,color-mix(in srgb,var(--glow) 14%,var(--paper)));box-shadow:0 18px 40px -30px rgba(20,24,30,.35)}
.ask-head{display:flex;gap:14px;align-items:center}
.mono{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 45%,transparent)}
.ask-head h2{margin:0;font-size:1.55rem;text-align:left}
.ask-head h2::before{display:none}
.ask-head p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.ask-find{position:relative;margin:18px 0 12px}
.ask-find input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:999px;padding:12px 16px 12px 40px;font-size:.98rem}
.ask-find svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.qlist{display:grid;gap:8px}
.qrow{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:var(--body);font-size:1rem;line-height:1.4;transition:border-color .2s,background .2s}
.qrow:hover{border-color:var(--gold)}
.qrow .chev{flex:none;margin-left:auto;color:var(--muted);transition:transform .25s}
.qrow[aria-expanded="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--glow) 12%,var(--paper))}
.qrow[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--gold)}
.bubble{display:flex;gap:10px;align-items:flex-start;margin:2px 0 6px}
.bubble .mono{width:34px;height:34px;font-size:.78rem;box-shadow:none}
.bubble .body{background:var(--sky);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:14px 16px;font-family:var(--body);font-size:1.02rem;line-height:1.7;min-width:0}
.bubble .body p{margin:0 0 .7em}
.bubble .body p:last-of-type{margin-bottom:.4em}
.bubble .sig{font-family:var(--ui);font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.bubble .sig a{color:var(--gold);text-decoration:none;font-weight:600}
.bubble .w{opacity:0;transition:opacity .25s}
.bubble .w.on{opacity:1}
.ask-none{margin-top:10px;padding:14px 16px;border-radius:14px;background:var(--sky);border:1px dashed var(--line);font-size:.92rem}
.ask-foot{margin-top:14px;font-size:.85rem;color:var(--muted)}
.ask-foot a{color:var(--gold)}

/* ---------- home: phone refinements ---------- */
@media (max-width:560px){
  .thread{grid-template-columns:1fr 1fr;gap:10px}
  .side{padding:14px 14px;font-size:.92rem}
  .side h3{font-size:1rem}
  .side ul{padding-left:1em}
  .cover-hero .row .btn{flex:1 1 100%;text-align:center}
  .cover-hero{text-align:center}
  .cover-hero .lede{margin-inline:auto}
  .more{grid-template-columns:1fr 1fr}
  .more a{padding:14px}
  .site{justify-content:center}
  .site .mark{text-align:center;margin-right:0}
}
.stop .soonbox{padding:10px 14px}
.stop .soonbox b{font-size:1.12rem}
.stop .soonbox span.idea{font-size:.9rem}
.side ul{line-height:1.45}
.side li{margin:.35em 0}
/* ---------- chapter 3 ---------- */
.couplet{margin:1.6em 0;padding:24px 18px 18px;text-align:center;border-radius:18px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--glow) 18%,var(--paper)),var(--paper));border:1px solid var(--line)}
.couplet .ur{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;font-size:clamp(.92rem,4.1vw,1.3rem);white-space:nowrap;line-height:2.3;color:var(--ink)}
.couplet .ro{color:var(--muted);margin-top:10px;font-size:.98rem;line-height:1.7}
.couplet figcaption{font-family:var(--ui);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.stairs{display:flex;flex-direction:column;gap:6px;margin:14px 0 10px}
.stairs .top{align-self:flex-end;font-family:var(--ui);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:10px;border:1px dashed var(--line);color:var(--muted)}
.stairs .top.lit{border-style:solid;border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--glow) 18%,var(--paper));box-shadow:0 0 22px -6px var(--glow)}
.step{display:flex;align-items:center;gap:8px;justify-content:space-between;align-self:flex-end;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;background:var(--pause);border-left:4px solid var(--gold);font-size:.95rem;animation:rise .4s ease both}
.stairs .step:nth-last-child(2){width:88%}.stairs .step:nth-last-child(3){width:76%}.stairs .step:nth-last-child(4){width:64%}.stairs .step:nth-last-child(5){width:52%}.stairs .step:nth-last-child(6){width:42%}
.step.empty{border-left-color:var(--line);color:var(--muted);font-style:italic}
.step button{border:0;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;padding:2px 4px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.field{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:12px;padding:10px 14px;margin:4px 0 8px}
.compass{display:grid;gap:10px;margin-top:6px}
.compass .opts{margin:4px 0 0}
.flip{display:block;width:100%;max-width:420px;margin:12px auto 6px;height:130px;border:0;padding:0;background:none;cursor:pointer;perspective:900px;position:relative;font:inherit}
.flip .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;border-radius:18px;font-family:var(--display);font-size:clamp(1.25rem,5.4vw,1.7rem);letter-spacing:.03em;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.3,1.3,.5,1);padding:0 14px}
.flip .face b{font-weight:400;font-size:1.35em;color:inherit}
.flip .front{background:#2B2E35;color:#E6E1D8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.flip .front b{color:#E57E5F}
.flip .back{background:linear-gradient(160deg,#FFF6E2,#F2C46B);color:#3A2A0C;transform:rotateY(180deg)}
.flip .back b{color:#9A6512}
.flip.on .front{transform:rotateY(-180deg)}
.flip.on .back{transform:rotateY(0)}
.regrets{display:grid;gap:8px;margin-top:10px}
.rg{display:grid;grid-template-columns:26px 1fr;gap:4px 10px;align-items:start;text-align:left;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit}
.rg .n{font-family:var(--display);color:var(--gold);font-size:1.3rem;line-height:1.1}
.rg .t{font-family:var(--body);font-style:italic;font-size:.98rem;line-height:1.5}
.rg .root{grid-column:2;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--enemy);max-height:0;overflow:hidden;opacity:0;transition:all .35s}
.rg[aria-pressed="true"]{border-color:var(--enemy);background:color-mix(in srgb,var(--enemy) 8%,var(--paper))}
.rg[aria-pressed="true"] .root{max-height:2em;opacity:1;margin-top:2px}
.roots{font-family:var(--ui);color:var(--enemy);font-weight:600;letter-spacing:.04em;padding-left:1.4em;line-height:1.9}

/* ---------- chapter 4 ---------- */
.daybar{display:flex;height:34px;border-radius:10px;overflow:hidden;margin:14px 0 8px;box-shadow:inset 0 0 0 1px var(--line)}
.daybar span{transition:flex .35s ease}
.daylegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.78rem;color:var(--muted);margin-bottom:10px}
.daylegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sliders{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 0;margin:6px 0}
.sliders label{font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:6px}
.sliders label b{color:var(--ink);font-variant-numeric:tabular-nums}
.motives{display:grid;gap:8px;margin-top:10px}
.mv{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:12px;padding:11px 14px;cursor:pointer;font:inherit;font-size:.95rem}
.mv em{font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:0;transition:opacity .3s;white-space:nowrap}
.mv.f em{color:var(--friend)} .mv.e em{color:var(--enemy)}
.mv[aria-pressed="true"] em{opacity:1}
.mv.f[aria-pressed="true"]{border-color:var(--friend);background:color-mix(in srgb,var(--friend) 10%,var(--paper))}
.mv.e[aria-pressed="true"]{border-color:var(--enemy);background:color-mix(in srgb,var(--enemy) 8%,var(--paper))}

/* ---------- chapter 5 ---------- */
.text p.lead{font-weight:600}
.roots.tips{color:var(--gold)}
.board{position:relative;min-height:170px;border-radius:12px;margin:12px 0 4px;padding:18px 18px 16px;background:radial-gradient(120% 90% at 30% 20%,#355246,#22362E);box-shadow:inset 0 0 0 6px #6B4F33,inset 0 0 0 7px rgba(0,0,0,.25),inset 0 0 40px rgba(0,0,0,.35);overflow:hidden;color:#F1F1EA}
.chalk{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--display);font-size:1.15rem;line-height:1.45;color:#F4F4EC;text-shadow:0 0 2px rgba(255,255,255,.45)}
.chalk span{animation:chalk .5s ease both}
.chalk:empty::before{content:"A clean blackboard.";opacity:.45;font-style:italic;font-family:var(--body);font-size:.95rem}
@keyframes chalk{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
.board.wiping .chalk{animation:wipe 1.3s ease forwards}
@keyframes wipe{0%{opacity:1;filter:none}60%{opacity:.25;filter:blur(3px)}100%{opacity:0;filter:blur(6px)}}
.board.wiping::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:sweep 1.3s ease forwards}
@keyframes sweep{to{left:110%}}
.witness{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-family:var(--display);font-size:1.3rem;line-height:1.35;color:#F7E3B0;animation:chalk 1.2s ease both}
.sitbox{position:relative;height:210px}
.orb.slow{transition:transform 5s ease-in-out}
.sitbox .clock{position:absolute;font-family:var(--ui);font-weight:600;font-variant-numeric:tabular-nums;font-size:1.1rem;color:var(--ink)}
.twinscene{font-family:var(--body);font-style:italic;color:var(--muted);text-align:center;margin:8px 0 12px!important}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.twin{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;min-height:120px;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:14px;padding:12px 14px;cursor:pointer;font-family:var(--body);font-size:.95rem;line-height:1.45;transition:background .3s,border-color .3s}
.twin small{font-family:var(--ui);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.twin span{color:var(--muted)}
.twin[aria-pressed="true"] span{color:var(--ink)}
.twin[data-t="a"][aria-pressed="true"]{border-color:var(--friend);background:color-mix(in srgb,var(--friend) 9%,var(--paper))}
.twin[data-t="b"][aria-pressed="true"]{border-color:var(--enemy);background:color-mix(in srgb,var(--enemy) 7%,var(--paper))}
.sit .tally{font-family:var(--ui);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- chapter 6 ---------- */
.opener.mid{margin-top:2.6em;padding-top:28px;border-top:1px solid var(--line)}
.opener h2.ct{font-family:var(--display);font-weight:400;font-size:clamp(2rem,9vw,3.1rem);line-height:1.12;margin:.15em 0 .25em;text-wrap:balance}
.opener h2.ct::before{display:none}
.text ul.dash{list-style:none;padding-left:.2em;margin:.6em 0 1em}
.text ul.dash li{position:relative;padding-left:1.3em;margin:.25em 0}
.text ul.dash li::before{content:"–";position:absolute;left:0;color:var(--gold)}
.venn{position:relative;height:150px;margin:12px auto 6px;max-width:300px}
.venn .c{position:absolute;top:22px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:.85rem;letter-spacing:.06em;mix-blend-mode:multiply;transition:left .6s ease,opacity .6s;color:var(--ink)}
.venn .t{left:0;background:color-mix(in srgb,var(--glow) 55%,transparent)}
.venn .s{left:calc(50% - 52px);background:color-mix(in srgb,var(--friend) 32%,transparent)}
.venn .d{left:calc(100% - 104px);background:color-mix(in srgb,var(--enemy) 26%,transparent)}
.venn.ts .t{left:calc(50% - 80px)}
.venn.sd .d{left:calc(50% - 24px)}
.venn.one .t,.venn.one .d{left:calc(50% - 52px)}
.venn.one .c{color:transparent;background:color-mix(in srgb,var(--glow) 38%,transparent);mix-blend-mode:normal;box-shadow:0 0 40px color-mix(in srgb,var(--glow) 60%,transparent)}
.venn.one::after{content:"One";position:absolute;left:50%;top:74px;transform:translate(-50%,-50%);font-family:var(--display);font-size:1.4rem;color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .venn .c{mix-blend-mode:screen}}
:root[data-theme="dark"] .venn .c{mix-blend-mode:screen}
.people{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.people button{border:1px dashed var(--muted);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:.9rem}
.people button[aria-pressed="true"]{border-style:solid;border-color:var(--friend);color:var(--friend);font-weight:600}
.enemies{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.enemy{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;font-size:.88rem;line-height:1.4}
.enemy b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--enemy)}
.enemy span{color:var(--muted)}
.enemy[aria-pressed="true"]{border-color:var(--enemy);background:color-mix(in srgb,var(--enemy) 8%,var(--paper))}
.ladder{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rung{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--sky);font-family:var(--body);font-size:.98rem;animation:rise .4s ease both}
.rung span{font-family:var(--ui);font-size:.72rem;font-weight:600;color:var(--muted);width:1.4em}
.rung.now{border-color:var(--gold);background:color-mix(in srgb,var(--glow) 16%,var(--paper))}
.rung em{flex-basis:100%;padding-left:2.1em;font-size:.85rem;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.grow{display:grid;gap:4px;margin-top:10px}
.grow label{display:flex;gap:10px;align-items:center}
.grow label span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--glow);color:#1C1E22;font-family:var(--ui);font-weight:600;font-size:.8rem}
.grow .field{margin:2px 0}

/* ---------- chapter 7 ---------- */
.bucketviz{display:flex;gap:16px;align-items:center;margin:14px 0 6px}
.pail{flex:none;position:relative;width:86px;height:100px;border:3px solid var(--muted);border-top-width:0;border-radius:0 0 16px 16px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:var(--pause);overflow:hidden}
.pail::before{content:"";position:absolute;left:50%;top:-2px;width:4px;height:10px;margin-left:-2px;border-radius:0 0 4px 4px;background:var(--friend);opacity:.7;animation:drip 1.6s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(90px);opacity:0}}
.water{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(color-mix(in srgb,var(--friend) 55%,transparent),var(--friend));transition:height .6s ease}
.bstats{flex:1;display:grid;gap:8px;min-width:0}
.bstats div{background:var(--pause);border-radius:10px;padding:8px 12px}
.bstats b{display:block;font-family:var(--body);font-size:1.3rem;font-variant-numeric:tabular-nums}
.bstats span{font-size:.78rem;color:var(--muted)}
.timer{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:6px 0 12px;font-family:var(--ui);color:var(--muted)}
.timer span{font-family:var(--display);font-size:2.4rem;color:var(--ink);font-variant-numeric:tabular-nums;min-width:1.6em;text-align:center}
.timer.late span{color:var(--enemy)}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.offers button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:14px;padding:14px;cursor:pointer;font:inherit}
.offers small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.offers b{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1}
.offers span{font-size:.85rem;color:var(--muted);line-height:1.35}
.offers button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--glow) 16%,var(--paper))}
.pchart{display:flex;align-items:flex-end;gap:2px;height:150px;margin:16px 0 8px;padding:0 2px;border-bottom:1px solid var(--line)}
.pchart i{flex:1;height:0;background:var(--line);border-radius:3px 3px 0 0;transition:height .2s ease}
.pchart i.on{background:var(--gold)}
.pchart i.mark{box-shadow:0 0 0 1px var(--friend)}
.pday{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ui);margin-bottom:10px}
.pday span{color:var(--muted);font-size:.85rem}
.pday>b{font-family:var(--body);font-size:1.4rem;font-variant-numeric:tabular-nums}
.pfig{margin:1.5em 0;padding:16px 16px 10px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.pfig .pchart{margin-top:0}
.pfig figcaption{display:flex;justify-content:space-between;font-family:var(--ui);font-size:.72rem;color:var(--muted)}
details.ptable{margin:1.2em 0;font-family:var(--ui);border:1px solid var(--line);border-radius:12px;background:var(--paper)}
details.ptable summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:.92rem}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:4px 16px 14px;font-size:.88rem}
.tgrid div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:5px 0;font-variant-numeric:tabular-nums}
.tgrid span{color:var(--muted)}
.tgrid div:last-child b{color:var(--gold)}
@media (max-width:420px){.tgrid{grid-template-columns:1fr}}
.pct{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.pcol{background:var(--pause);border-radius:12px;padding:12px}
.pcol small{display:block;font-size:.75rem;color:var(--muted)}
.pcol b{display:block;font-family:var(--body);font-size:1.6rem;font-variant-numeric:tabular-nums}
.pbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;width:0;transition:width .2s}
.pcol.up b{color:var(--friend)} .pcol.up i{background:var(--friend)}
.pcol.down b{color:var(--enemy)} .pcol.down i{background:var(--enemy)}
ol.laws{padding-left:1.3em}
ol.laws li{margin:.4em 0}
.story{display:grid;gap:8px;margin-top:12px}
.frame{position:relative;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 40px 10px 12px;background:var(--sky);animation:rise .45s ease both;opacity:.75}
.frame.now{opacity:1;border-color:var(--gold);background:color-mix(in srgb,var(--glow) 12%,var(--paper))}
.frame.last.now{border-color:var(--friend);background:color-mix(in srgb,var(--friend) 10%,var(--paper))}
.frame p{margin:0!important;font-family:var(--body);font-size:.98rem}
.frame .fi{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--glow);color:#1C1E22;font-family:var(--ui);font-weight:600;font-size:.78rem;margin-top:2px}
.bf{position:absolute;right:10px;top:10px;width:24px;height:24px;color:var(--gold);animation:flutter .9s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(.55) translateY(-3px)}}
.streak{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:14px 0 6px}
.streak button{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--sky);color:var(--muted);font-family:var(--ui);font-size:.72rem;cursor:pointer;padding:0}
.streak button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--paper);font-weight:600}
.streak button.d24{box-shadow:0 0 0 2px var(--friend)}

/* ---------- chapter 8 ---------- */
.text p.why{font-family:var(--display);font-size:clamp(2.6rem,12vw,3.6rem);text-align:center;color:var(--gold);margin:.4em 0;line-height:1}
.text h3.sub3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:1.6em 0 .3em;color:var(--gold)}
.whys{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.wrung{border-left:2px solid var(--line);padding:6px 0 6px 14px;font-family:var(--body);font-size:1rem;animation:rise .4s ease both}
.wrung span{display:block;font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.wrung.q0{font-weight:600;border-left-color:var(--gold)}
.wrung.now{border-left-color:var(--gold);background:linear-gradient(90deg,color-mix(in srgb,var(--glow) 14%,transparent),transparent)}
#whyMine{margin-top:12px}
.offers button span{font-family:var(--body);font-size:.95rem;color:var(--ink)}
.land{display:flex;gap:16px;align-items:center;margin:14px 0 8px}
.acre{flex:none;position:relative;width:150px;height:150px;border-radius:6px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--friend) 22%,var(--paper)) 0 8px,color-mix(in srgb,var(--friend) 14%,var(--paper)) 8px 16px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--friend) 50%,transparent)}
.home{position:absolute;left:10px;bottom:10px;background:var(--gold);border-radius:2px;transition:width .2s,height .2s;min-width:3px;min-height:3px}
.land .bstats{flex:1}
@media (max-width:360px){.acre{width:120px;height:120px}}

/* ---------- home commandments ---------- */
.cmd-sec{text-align:center}
.cmd-sec .intro{margin-inline:auto}
.tablet{margin:26px auto 0;max-width:620px;border-radius:26px;padding:12px;background:radial-gradient(120% 90% at 50% 18%,#2C3D4C,#10161D 75%);box-shadow:0 30px 60px -30px rgba(16,22,29,.6),0 2px 0 rgba(255,255,255,.04) inset;color:#F4EEDF;position:relative;overflow:hidden}
.tablet::before{content:"";position:absolute;left:50%;top:-80px;width:520px;height:300px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(242,196,107,.22),transparent);pointer-events:none}
.t-in{position:relative;border:1.5px solid rgba(227,179,90,.8);border-radius:18px;padding:clamp(26px,6vw,46px) clamp(16px,5vw,44px) 26px;box-shadow:inset 0 0 0 6px rgba(16,22,29,.0),inset 0 0 0 7px rgba(227,179,90,.28)}
.t-orn{font-family:var(--display);color:#E3B35A;font-size:1.6rem;line-height:1}
.t-title{font-family:var(--display);font-size:clamp(1.9rem,7.5vw,2.7rem);line-height:1.1;margin-top:.3em;letter-spacing:.02em}
.t-sub{font-family:var(--body);font-style:italic;color:rgba(244,238,223,.72);margin-top:.35em;font-size:1rem}
.t-sub::after{content:"";display:block;width:64px;height:1.5px;background:rgba(227,179,90,.85);margin:18px auto 6px}
.t-list{list-style:none;margin:0;padding:0}
.t-item{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:16px 8px 14px;border-radius:14px;transition:background .25s}
.t-item:hover,.t-item:focus-visible{background:rgba(227,179,90,.09)}
.t-item:focus-visible{outline:2px solid #E3B35A;outline-offset:2px}
.t-list li+li .t-item{border-top:1px solid rgba(227,179,90,.16)}
.t-item .rn{display:block;font-family:var(--display);color:#E3B35A;font-size:1.35rem;letter-spacing:.08em;line-height:1}
.t-item .tx{display:block;font-family:var(--body);font-size:clamp(1.08rem,4.4vw,1.28rem);line-height:1.5;margin-top:8px;text-wrap:balance}
.t-sig{font-family:var(--ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,223,.6);margin-top:18px}
.t-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;max-width:620px}
.t-msg{font-family:var(--ui);font-size:.85rem;color:var(--muted);margin:12px auto 0;max-width:46ch;min-height:1.4em}
@media (max-width:520px){.t-actions .btn{flex:1 1 100%}}

/* ---------- chapter 9 ---------- */
.flipcard{margin-top:12px;perspective:900px}
.flipcard .fc{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--sky);display:grid;gap:6px}
.flipcard .back{border-color:var(--friend);background:color-mix(in srgb,var(--friend) 9%,var(--paper))}
.flipcard .fcl{font-family:var(--body);font-size:1.02rem}
.flipcard .fcl b{color:var(--gold)}
.flipcard .back .fcl b{color:var(--friend)}
.flipcard .field{margin:0;background:var(--paper)}
.flipcard.flipping .fc{animation:flipin .5s ease}
@keyframes flipin{0%{transform:rotateY(80deg);opacity:0}100%{transform:none;opacity:1}}
.ring{width:120px;height:120px;margin:12px auto 4px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--gold);background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 30%,transparent),transparent);font-family:var(--display);font-size:1.2rem}
.sit .fb.ok{color:var(--friend);font-style:normal}
.sit .fb.no{color:var(--enemy)}
.mrows{display:grid;gap:4px;margin-top:10px}
.mrows label{display:grid;gap:2px}
.mrows label span{font-size:.8rem;color:var(--muted)}

/* ---------- chapter 10 ---------- */
.jumped{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px dashed var(--gold);border-radius:14px;padding:14px 16px;margin:0 0 1.6em;font-family:var(--ui);font-size:.95rem;line-height:1.5}
.jumped p{margin:0}
.jumped .seal{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--paper);font-size:1rem}
.days{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.day{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:14px;padding:14px 10px;cursor:pointer;font:inherit}
.day small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.day em{font-family:var(--body);font-size:.92rem;color:var(--muted);line-height:1.35}
.day[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--glow) 12%,var(--paper))}
.day[aria-pressed="true"] em{color:var(--ink)}
#dayLast[aria-pressed="false"] .moods{filter:grayscale(1) blur(1.5px);opacity:.55}
.moods{display:flex;flex-direction:column;align-items:center;gap:8px;transition:filter .5s,opacity .5s}
.crowd{display:flex;gap:6px}
.mood{position:relative;display:block;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 34% 40%,#1C1E22 0 2px,transparent 2.5px),radial-gradient(circle at 66% 40%,#1C1E22 0 2px,transparent 2.5px),#F2C46B}
.mood.you{width:44px;height:44px;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent)}
.mood::after{content:"";position:absolute;left:30%;width:40%;height:18%;border:2px solid #1C1E22;box-sizing:border-box}
.mood.smile::after{top:56%;border-top:0;border-radius:0 0 12px 12px}
.mood.cry::after{top:66%;border-bottom:0;border-radius:12px 12px 0 0}
.mood.cry::before{content:"";position:absolute;left:22%;top:50%;width:5px;height:7px;background:#5BA8D9;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.letter{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,5vw,32px);margin:2.4em 0;box-shadow:0 18px 40px -30px rgba(20,24,30,.35);position:relative}
.letter::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:3px;background:var(--gold)}
.letter p{font-size:1.05em;margin:.2em 0 1em}
.letter.small{box-shadow:none;margin:12px 0 0}
.letter.small p{font-size:.98rem}
.letter .sign{font-family:var(--display);font-size:1.2rem;text-align:right;margin-top:1.2em}
.ch10cmd{margin:2.4em 0 0}
.blueprint{margin:3.4em 0 1.6em;padding-top:2.4em;border-top:1px solid var(--line)}
.bp-head{text-align:center}
.bp-head h2{font-size:clamp(2rem,8vw,2.8rem);margin:.15em 0 .2em}
.bp-head p{color:var(--muted);max-width:40ch;margin:0 auto}
.bp-paper{margin:22px auto 0;max-width:640px;background:linear-gradient(#FBF8F1,#F3EDE0);color:#1C1E22;border-radius:6px;padding:clamp(22px,6vw,44px) clamp(18px,5vw,40px);box-shadow:0 26px 50px -30px rgba(20,24,30,.45),inset 0 0 0 1px rgba(154,101,18,.35),inset 0 0 0 8px #FBF8F1,inset 0 0 0 9px rgba(154,101,18,.25)}
.bp-top{text-align:center}
.bp-orn{color:#9A6512;font-family:var(--display);font-size:1.5rem}
.bp-title{font-family:var(--display);font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;margin-top:.2em}
.bp-date{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#5D6670;margin-top:8px}
.bp-cmds{list-style:none;padding:0;margin:20px 0 10px;display:grid;gap:8px}
.bp-cmds li{display:grid;grid-template-columns:34px 1fr;gap:8px;font-family:var(--body);font-size:1rem;line-height:1.45}
.bp-cmds b{font-family:var(--display);font-weight:400;color:#9A6512;text-align:right}
.bp-sub{font-family:var(--ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9A6512;text-align:center;margin:26px 0 10px;font-weight:600}
.bp-sub::before,.bp-sub::after{content:"";display:inline-block;width:28px;height:1px;background:#9A6512;vertical-align:middle;margin:0 10px;opacity:.6}
.bp-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.bp-list li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 0;border-top:1px dashed rgba(154,101,18,.3)}
.bp-list .bn{font-family:var(--display);color:#9A6512;font-size:1.3rem;text-align:right;line-height:1.2}
.bp-list small{display:block;font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#5D6670;font-weight:600}
.bp-list p{margin:2px 0 0;font-family:var(--body);font-size:1rem;line-height:1.45}
.bp-list em{display:block;margin-top:4px;color:#2F7D6B;font-family:var(--body);font-size:.95rem}
.bp-list li.sealed .bn{opacity:.45}
.bp-list li.sealed p{font-style:italic;color:#5D6670}
.bp-list li.sealed a{display:inline-block;margin-top:4px;font-family:var(--ui);font-size:.85rem;color:#9A6512;font-weight:600}
.bp-final{margin-top:20px}
.bp-final label{display:block;font-family:var(--ui);font-size:.8rem;color:#5D6670;margin-bottom:6px}
.bp-final textarea{background:#FFFDF8;color:#1C1E22;border-color:rgba(154,101,18,.35);min-height:64px}
.bp-sig{font-family:var(--ui);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#5D6670;text-align:center;margin-top:22px}
.quiet-end{text-align:center;margin:2.4em 0 1.2em;font-family:var(--ui)}
.thanks-line{font-family:var(--display);font-size:1.25rem;margin:0 0 14px}
details.thanks{max-width:640px;margin:0 auto;text-align:left}
details.thanks summary{cursor:pointer;text-align:center;color:var(--muted);font-size:.9rem;list-style:none}
details.thanks summary::-webkit-details-marker{display:none}
details.thanks summary::after{content:" ＋";color:var(--gold)}
details.thanks[open] summary::after{content:" －"}
.about-line{color:var(--muted);font-size:.88rem;margin-top:18px;line-height:1.8}
@media print{
  body.print-bp *{visibility:hidden!important}
  body.print-bp #bpPaper,body.print-bp #bpPaper *{visibility:visible!important}
  body.print-bp #bpPaper{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;margin:0}
  body.print-bp .bp-list li.sealed{display:none}
  body.print-bp .bar,body.print-bp header.bar{display:none}
}

/* ---------- ch3 flip v2 ---------- */
.flip{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:4/5;max-height:300px;margin:14px auto 10px;border:0;padding:0;background:none;cursor:pointer;perspective:1100px;position:relative;font:inherit;-webkit-tap-highlight-color:transparent}
.flip .face{position:absolute;inset:0;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:20px;padding:18px 16px;box-sizing:border-box;overflow:hidden;font-family:var(--display);font-size:1rem;letter-spacing:.02em;line-height:1.1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,1.25,.5,1);background-image:none}
.flip .face::before,.flip .face::after{content:none}
.flip .face small{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75;font-weight:600}
.flip .acro{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.flip .acro span{font-size:clamp(1.45rem,7vw,1.9rem);white-space:nowrap}
.flip .acro b{display:inline-block;min-width:.8em;font-weight:400;font-size:1.45em;line-height:1}
.flip .hint{font-style:normal;font-family:var(--ui);font-size:.72rem;opacity:.6;margin-top:4px}
.flip .front{background:radial-gradient(120% 90% at 50% 15%,#3A3F49,#22252B);color:#E6E1D8;box-shadow:0 18px 40px -24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07);transform:rotateY(0)}
.flip .front b{color:#E57E5F}
.flip .back{background:radial-gradient(120% 90% at 50% 15%,#FFF8E8,#F2C46B);color:#3A2A0C;box-shadow:0 18px 40px -24px rgba(154,101,18,.6),inset 0 0 0 1px rgba(154,101,18,.25);transform:rotateY(180deg)}
.flip .back b{color:#9A6512}
.flip.on .front{transform:rotateY(-180deg)}
.flip.on .back{transform:rotateY(0)}
@media (prefers-reduced-motion:reduce){.flip .face{transition:none}}

/* ---------- words: notebook, share, quotes ---------- */
.nbtn{position:relative}
.nbadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:var(--paper);font-family:var(--ui);font-size:.62rem;font-weight:600;display:grid;place-items:center;line-height:1}
.wtoast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:80;background:#1C1E22;color:#F4EEDF;font-family:var(--ui);font-size:.9rem;padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.wtoast.on{opacity:1;transform:translate(-50%,0)}
body.noscroll{overflow:hidden}
.ws-ic{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.ws-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wsheet{position:fixed;inset:0;z-index:70}
.ws-back{position:absolute;inset:0;background:rgba(16,22,29,.4);opacity:0;transition:opacity .25s}
.ws-panel{position:absolute;left:0;right:0;bottom:0;margin:auto;max-width:520px;max-height:86vh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:24px 24px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.3,1,.4,1);font-family:var(--ui);box-shadow:0 -20px 50px -30px rgba(0,0,0,.4)}
.wsheet.on .ws-back{opacity:1}.wsheet.on .ws-panel{transform:none}
@media (min-width:700px){.ws-panel{bottom:auto;top:50%;border-radius:24px;transform:translateY(-44%);opacity:0;transition:transform .25s,opacity .25s}.wsheet.on .ws-panel{transform:translateY(-50%);opacity:1}}
.ws-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 8px}
.ws-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ws-head b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.ws-x{border:0;background:var(--pause);color:var(--ink);width:32px;height:32px;border-radius:50%;cursor:pointer}
.ws-prev{background:radial-gradient(120% 90% at 50% 10%,#2C3D4C,#10161D);color:#F4EEDF;border-radius:16px;padding:20px 18px;text-align:center}
.ws-prev p{font-family:var(--body);font-style:italic;font-size:1.04rem;line-height:1.5;margin:0 0 10px}
.ws-prev small{color:#E3B35A;font-size:.74rem;letter-spacing:.06em}
.ws-prev.light{background:var(--pause);color:var(--ink)}
.ws-prev.light p{font-style:normal;font-size:.98rem}
.ws-prev.light small{color:var(--gold)}
.ws-list{display:grid;gap:2px;margin-top:12px}
.ws-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:11px 6px;border-radius:14px;cursor:pointer;font:inherit}
.ws-opt:hover,.ws-opt:focus-visible{background:var(--pause)}
.ws-opt .ws-ic{width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--glow) 18%,var(--paper));color:var(--gold);padding:10px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--gold) 25%,var(--line))}
.ws-opt b{display:block;font-weight:600;font-size:.98rem}
.ws-opt small{display:block;color:var(--muted);font-size:.8rem;margin-top:1px}
.ws-opt.busy{opacity:.55;pointer-events:none}
.nb-empty{text-align:center;color:var(--muted);line-height:1.6;padding:20px 6px}
.nb-item{border-top:1px solid var(--line);padding:14px 2px}
.nb-item:first-child{border-top:0}
.nb-item p{font-family:var(--body);font-size:1.02rem;line-height:1.5;margin:0 0 4px}
.nb-item small{color:var(--muted);font-size:.75rem}
.nb-act{display:flex;gap:14px;margin-top:8px;font-size:.85rem}
.nb-act a,.nb-act button{color:var(--gold);background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:600;text-decoration:none}
.nb-act [data-a=del]{color:var(--muted);font-weight:400;margin-left:auto}
.nb-foot{padding-top:12px;text-align:center}
.qcard{position:relative;margin:3em auto 1.6em;max-width:560px;padding:44px clamp(20px,6vw,40px) 22px;background:var(--paper);border:1px solid var(--line);border-radius:22px;text-align:center;box-shadow:0 22px 50px -34px rgba(20,24,30,.45)}
.qcard .q-mark{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--gold);font-family:var(--display);font-size:3rem;line-height:72px}
.qcard blockquote{margin:0;font-family:var(--body);font-style:italic;font-size:clamp(1.15rem,4.8vw,1.35rem);line-height:1.55;text-wrap:balance}
.qcard .q-by{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:4px}
.qcard .q-dash{width:36px;height:2px;background:var(--gold);border-radius:2px;margin-bottom:6px}
.qcard .q-by b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.06em;color:var(--gold)}
.qcard .q-by b i{font-family:var(--body);font-size:.85em;letter-spacing:0;color:var(--muted)}
.qcard .q-by small{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.q-act{display:flex;justify-content:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.q-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));background:color-mix(in srgb,var(--glow) 12%,var(--paper));color:var(--ink);border-radius:999px;padding:8px 16px;font-family:var(--ui);font-size:.88rem;font-weight:600;cursor:pointer}
.q-btn .ws-ic{width:17px;height:17px;color:var(--gold)}
.q-btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.qcard.dad{background:radial-gradient(120% 90% at 50% 12%,#2C3D4C,#10161D);border-color:rgba(227,179,90,.6);color:#F4EEDF;box-shadow:0 30px 60px -30px rgba(16,22,29,.7),inset 0 0 0 7px #16202A,inset 0 0 0 8px rgba(227,179,90,.35)}
.qcard.dad .q-mark{background:#16202A;border-color:rgba(227,179,90,.6);color:#E3B35A}
.qcard.dad blockquote{font-family:var(--display);font-style:normal;font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.3;letter-spacing:.01em}
.qcard.dad .q-by b{color:#E3B35A;font-size:1.6rem}
.qcard.dad .q-by small{color:rgba(244,238,223,.65)}
.qcard.dad .q-act{border-top-color:rgba(227,179,90,.25)}
.qcard.dad .q-btn{background:rgba(227,179,90,.12);border-color:rgba(227,179,90,.45);color:#F4EEDF}
.qcard.dad .q-btn.ghost{background:transparent;color:rgba(244,238,223,.75)}
.sendletter{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;margin:2.4em 0 0;padding:18px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--glow) 12%,var(--paper)),var(--paper));border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));font-family:var(--ui)}
.sendletter .sl-ic{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--glow) 30%,var(--paper));color:var(--gold);display:grid;place-items:center;font-size:1.1rem}
.sendletter b{font-family:var(--body);font-size:1.06rem}
.sendletter p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.sl-btn,.cmd-open{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));font-size:.92rem;padding:10px 18px;margin-top:6px}
.sl-btn .ws-ic,.cmd-open .ws-ic{width:18px;height:18px;color:var(--gold)}
.cmd-open{margin:0 auto}
.ask-about{display:none}
::selection{background:color-mix(in srgb,var(--glow) 55%,transparent)}

/* ---------- thank-you card ---------- */
.thanks-card{margin:3em 0 1.6em;text-align:center;font-family:var(--ui)}
.thanks-card .thanks-line{font-family:var(--display);font-size:clamp(1.3rem,5.4vw,1.6rem);line-height:1.3;margin:0 0 22px}
.ty-env{position:relative;max-width:600px;margin:0 auto;padding:44px clamp(18px,6vw,36px) 26px;border-radius:20px;background:linear-gradient(170deg,#FFFBF2,#F6ECD6);color:#1C1E22;border:1px solid rgba(154,101,18,.3);box-shadow:0 26px 50px -32px rgba(154,101,18,.55)}
.ty-env::before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(160deg,transparent 49.6%,rgba(154,101,18,.18) 50%,transparent 50.4%) top/100% 90px no-repeat,linear-gradient(200deg,transparent 49.6%,rgba(154,101,18,.18) 50%,transparent 50.4%) top/100% 90px no-repeat;pointer-events:none}
.ty-seal{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#C9842A,#8E5A10);color:#FFF4DD;display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;box-shadow:0 6px 14px -4px rgba(142,90,16,.6),inset 0 0 0 3px rgba(255,244,221,.25)}
.ty-env h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,6vw,2rem);margin:.2em 0 .3em;color:#1C1E22}
.ty-tease{font-family:var(--body);font-style:italic;color:#5D6670;font-size:1.02rem;margin:0 0 16px}
.ty-env .note{text-align:left;margin:20px 0 0;background:#FFFDF8;color:#1C1E22;border-color:rgba(154,101,18,.25);box-shadow:none}
.ty-env .note p{font-size:1rem}
.ty-talk{max-width:600px;margin:18px auto 0;padding:22px clamp(16px,5vw,30px);border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.ty-talk h3{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0 0 6px}
.ty-talk p{color:var(--muted);margin:0 auto 14px;max-width:44ch;line-height:1.55}
.ty-btns{display:grid;gap:8px}
.ty-btns .btn{text-align:center}
@media (min-width:620px){.ty-btns{grid-template-columns:1fr 1fr}.ty-btns .btn:first-child{grid-column:1/-1}}

/* ===== reading comfort (v16) ===== */
:root[data-size="1"]{--size:1.02rem}
:root[data-size="3"]{--size:1.3rem}
:root[data-theme="paper"]{--sky:#F3EBDB;--paper:#FBF6EA;--ink:#2A251E;--muted:#6E6352;--line:#E2D6BF;--gold:#8C5A10;--glow:#E8B65A;--friend:#2F7660;--enemy:#A9472C;--pause:#EFE5D1;color-scheme:light}
.text p,.letter p{hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
.aabtn{font-family:var(--display);font-size:.95rem;letter-spacing:.02em;line-height:1}
.aabtn span{transform:translateY(1px)}
.bar .ch{display:flex;flex-direction:column;line-height:1.25}
.bar .ch .chl{overflow:hidden;text-overflow:ellipsis}
.bar .ch .left{font-size:.68rem;font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--muted);min-height:1em}
.aa{display:grid;gap:18px;padding:4px 2px 6px;font-family:var(--ui)}
.aa-row{display:grid;gap:8px}
.aa-lab{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.aa-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.aa-s{border:0;background:none;color:var(--ink);font-family:var(--display);height:54px;cursor:pointer;border-left:1px solid var(--line)}
.aa-s:first-child{border-left:0}
.aa-s.s1{font-size:.95rem}.aa-s.s2{font-size:1.25rem}.aa-s.s3{font-size:1.6rem}
.aa-s[aria-pressed="true"]{background:color-mix(in srgb,var(--glow) 22%,var(--paper));color:var(--gold)}
.aa-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.aa-t{border:1.5px solid var(--line);border-radius:14px;padding:10px 6px 9px;cursor:pointer;display:grid;justify-items:center;gap:5px;font-size:.8rem;font-family:var(--ui)}
.aa-t .sw{font-family:var(--body);font-size:1.15rem}
.aa-t.t-light{background:#FFFFFF;color:#1C1E22}
.aa-t.t-paper{background:#FBF6EA;color:#2A251E}
.aa-t.t-dark{background:#161B21;color:#E9ECEF}
.aa-t[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 35%,transparent)}
.aa-auto{justify-self:center;border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.82rem;cursor:pointer;padding:4px}

/* pull quotes: the author's own sentence, lifted in place */
.pull{display:block;margin:1.3em 0 1.25em;padding:1.05em .3em .8em;font-family:var(--display);font-size:1.3em;line-height:1.4;letter-spacing:.01em;text-align:center;color:var(--ink);text-wrap:balance;
  border-top:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.pull::before{content:"✦";position:absolute;top:-.62em;left:50%;transform:translateX(-50%);background:var(--sky);color:var(--gold);font-size:.62em;padding:0 .6em}
.pull::after{content:"Tap to share";display:block;margin-top:.7em;font-family:var(--ui);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.75}
.letter .pull::before{background:var(--paper)}
.pull:hover::after{opacity:1}

/* continue where you left off */
.resume{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);z-index:30;display:flex;align-items:center;gap:2px;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 4px 4px 6px;box-shadow:0 14px 34px -12px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1);font-family:var(--ui);max-width:calc(100vw - 32px)}
.resume.on{transform:translate(-50%,0)}
.resume button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.resume .rs-go{padding:9px 10px 9px 12px;font-weight:600;font-size:.92rem;white-space:nowrap}
.resume .rs-go small{font-weight:400;opacity:.7;margin-left:4px}
.resume .rs-go span{color:var(--glow);margin-right:4px}
.resume .rs-x{width:34px;height:34px;border-radius:50%;opacity:.65;font-size:.8rem}

/* one card at a time */
.stepcount{font-family:var(--ui);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.sits.stepping{margin-top:8px}
.sits.stepping .sit{padding:18px 16px;background:var(--sky)}
.sits.stepping .sit p{font-size:1.1rem;margin-bottom:12px}
.sits.stepping .sit .row button{padding:12px 8px;font-size:.95rem;background:var(--paper)}
.sit.slide{animation:stepin .38s cubic-bezier(.2,.8,.2,1)}
@keyframes stepin{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.stepnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.stepnav .sp,.stepnav .sn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;flex:none}
.stepnav button:disabled{opacity:.3;cursor:default}
.stepnav .sd{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.stepnav .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);background:none;padding:0;cursor:pointer;opacity:.6}
.stepnav .dot.ok{background:var(--gold);border-color:var(--gold);opacity:.8}
.stepnav .dot.on{opacity:1;transform:scale(1.35);border-color:var(--ink)}

/* page turn */
body.turnin main{animation:turnin .7s cubic-bezier(.2,.75,.25,1) both;transform-origin:0 30%}
@keyframes turnin{from{opacity:0;transform:perspective(1600px) rotateY(-14deg) translateX(18px)}to{opacity:1;transform:none}}
body.turnin .bar{animation:fadein .5s both}
@keyframes fadein{from{opacity:0}}

/* home question list, compact */
.qlist.limited .qrow.extra{display:none}
.ask-more{display:block;margin:12px auto 0;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 18px;font-family:var(--ui);font-size:.9rem;cursor:pointer}

/* ===== home: an open book (v16) ===== */
.site .aabtn{width:32px;height:32px;margin-left:2px}
.opening{max-width:640px;margin:auto;text-align:center;padding:clamp(12px,4vw,40px) 0 18px;min-height:calc(100svh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}
.tome{position:relative;display:block;width:clamp(118px,31vw,168px);aspect-ratio:540/864;margin:0 auto 22px;padding:0;border:0;background:none;cursor:pointer;perspective:1500px;-webkit-tap-highlight-color:transparent}
.tome-page{position:absolute;inset:3px 5px 3px 0;border-radius:2px 6px 6px 2px;background:linear-gradient(90deg,#E9DFCB,#FBF6EA 14%);box-shadow:0 22px 34px -20px rgba(20,24,30,.55),inset 0 0 0 1px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 14% 0 18%;gap:7px;color:#2A251E;overflow:hidden}
.tp-orn{color:#8C5A10;font-size:.7rem;align-self:center;margin-bottom:6px}
.tp-dear{font-family:var(--body);font-style:italic;font-size:clamp(.72rem,2.6vw,.95rem)}
.tp-l{display:block;width:100%;height:2px;border-radius:2px;background:rgba(42,37,30,.14)}
.tp-l.s{width:60%}
.tome-cover{position:absolute;inset:0;transform-origin:left center;transform:rotateY(-12deg);transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.55,.05,.25,1);border-radius:3px 7px 7px 3px;
  box-shadow:0 26px 40px -22px rgba(20,24,30,.6),0 2px 6px rgba(20,24,30,.18);animation:peek 3.2s 1.2s ease-in-out}
.tome-cover::after{content:"";position:absolute;inset:0;border-radius:7px 3px 3px 7px;background:linear-gradient(90deg,#E4D9C3,#F4EDDF);transform:rotateY(180deg);backface-visibility:hidden}
.tome-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px 7px 7px 3px;backface-visibility:hidden;background:linear-gradient(160deg,#2B3A4A,#C9963F)}
.tome:hover .tome-cover,.tome:focus-visible .tome-cover{transform:rotateY(-34deg)}
@keyframes peek{0%,100%{transform:rotateY(-12deg)}40%,55%{transform:rotateY(-38deg)}}
.opening .eyebrow{margin-bottom:6px}
.title{font-size:clamp(3.1rem,15.4vw,6rem)!important;line-height:.98!important;letter-spacing:.035em;margin:.08em 0 .28em!important}
.title span{display:block}
@media (min-width:700px){.title span{display:inline}.title span:nth-child(2)::after{content:"";display:block}}
.opening .lede{font-size:1.12rem;color:var(--muted);margin:0 auto .2em;max-width:30ch;text-wrap:balance}
.invite{font-family:var(--body);font-style:italic;font-size:1.2rem;margin:.9em auto 1.05em;color:var(--ink);text-wrap:balance}
.btn.begin{display:inline-flex;align-items:center;gap:10px;padding:15px 26px 15px 30px;font-size:1.06rem;background:var(--gold);color:#fff;box-shadow:0 14px 28px -14px color-mix(in srgb,var(--gold) 80%,transparent);transition:transform .2s}
.btn.begin:active{transform:scale(.97)}
.btn.begin svg{transition:transform .3s}.btn.begin:hover svg{transform:translateX(3px)}
.opening .meta{font-family:var(--ui);font-size:.82rem;color:var(--muted);margin:14px 0 0}
.opening .meta a{color:var(--muted);text-underline-offset:3px}
.cue{margin-top:clamp(18px,5vh,44px);display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.cue svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
/* opening the book */
body.opening .opening>*:not(.tome){transition:opacity .45s,transform .45s;opacity:0;transform:translateY(10px)}
body.opening .tome{transition:transform 1.1s cubic-bezier(.55,.05,.25,1);transform:translateY(calc(30svh - 50%)) scale(1.9);z-index:40}
body.opening .tome-cover{animation:none;transform:rotateY(-172deg)}
body.opening::after{content:"";position:fixed;inset:0;z-index:50;background:var(--sky);animation:veil .45s .75s both}
@keyframes veil{from{opacity:0}to{opacity:1}}

/* contents: a page in the book */
.toc-sec{padding:8px 0 clamp(36px,7vw,64px)}
.toc{max-width:560px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:4px 14px 14px 4px;padding:clamp(26px,6vw,46px) clamp(20px,6vw,46px) 26px;
  box-shadow:inset 14px 0 18px -16px rgba(0,0,0,.18),0 26px 44px -34px rgba(20,24,30,.45);position:relative}
.toc-head{text-align:center;margin-bottom:12px}
.toc-head .orn{color:var(--gold);font-size:.85rem}
.toc-head h2{margin:.15em 0 .1em;font-size:2rem;letter-spacing:.12em}
.toc-head p{margin:0;font-family:var(--body);font-style:italic;color:var(--muted);font-size:.98rem}
.toc-list{list-style:none;margin:0;padding:0}
.toc-row{display:grid;grid-template-columns:1.9em minmax(0,auto) 1fr auto;align-items:baseline;gap:0 8px;padding:9px 6px;margin:0 -6px;border-radius:8px;text-decoration:none;color:var(--ink);font-family:var(--body);font-size:1.06rem;line-height:1.35;transition:background .2s}
.toc-row:hover{background:var(--pause)}
.toc-row .n{font-family:var(--display);color:var(--gold);font-size:1rem}
.toc-row .t{text-wrap:balance}
.toc-row .lead{align-self:end;margin-bottom:.38em;border-bottom:1.5px dotted color-mix(in srgb,var(--muted) 55%,transparent);min-width:14px}
.toc-row .s{font-family:var(--ui);font-size:.76rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.toc-row.done .t{color:var(--muted)}
.toc-row.done .s{color:var(--gold);font-size:.9rem;font-weight:600}
.toc-row.here{background:color-mix(in srgb,var(--glow) 14%,var(--paper));box-shadow:inset 3px 0 0 var(--gold)}
.toc-row.here .s{color:var(--gold);font-weight:600;letter-spacing:.04em}
.toc-row .idea{grid-column:2/-1;font-size:.86rem;font-style:italic;color:var(--muted);margin-top:3px}
.toc-part{display:flex;flex-direction:column;align-items:center;margin:18px 0 6px;font-family:var(--ui);text-align:center}
.toc-part span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.toc-part b{font-family:var(--display);font-weight:400;font-size:1.08rem;letter-spacing:.06em;display:flex;align-items:center;gap:12px;width:100%;justify-content:center}
.toc-part b::before,.toc-part b::after{content:"";height:1px;flex:1;max-width:70px;background:var(--line)}
.toc-foot{text-align:center;font-family:var(--body);font-style:italic;color:var(--muted);font-size:.85rem;margin-top:18px}

/* one message, compact */
.msg .scale{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:16px;font-family:var(--ui)}
.msg .sc{border-radius:12px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);font-size:.9rem;line-height:1.5;color:var(--muted)}
.msg .sc b{display:block;font-family:var(--body);font-size:1rem;margin-bottom:2px}
.msg .sc.e b{color:var(--enemy)}.msg .sc.f b{color:var(--friend)}
.msg .dial{grid-column:1/-1;margin:4px 0 0}
.msg .dial .track{max-width:none}
.msg .intro{font-style:italic}
/* author, compact */
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.author .mono.big{width:64px;height:64px;font-size:1.3rem;margin-top:6px}
.author h2{margin:.1em 0 .3em}
.author .intro{margin:0 0 14px}
.author .lnk{font-family:var(--ui);font-weight:600;color:var(--ink);text-decoration:none}
@media (max-width:520px){.author{grid-template-columns:1fr;justify-items:start}.author .mono.big{width:52px;height:52px;font-size:1.05rem}}
.toc-row{grid-template-columns:1.9em minmax(0,max-content) minmax(18px,1fr) auto;align-items:end}
.toc-row .n{align-self:start}
.toc-row .lead{align-self:end;margin-bottom:.42em}
.toc-row .s{line-height:1.8}
.opening .meta a{white-space:nowrap}
@media (max-width:520px){.msg .scale{grid-template-columns:1fr;gap:8px}.msg .sc{padding:10px 14px}}

/* ===== write to Mohammed Hakim (v17) ===== */
.wn{display:grid;gap:12px;padding-bottom:4px}
.wn-paper{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 7%,var(--paper)),var(--paper));border:1px solid var(--line);border-radius:6px 16px 16px 6px;
  padding:18px 18px 16px;box-shadow:inset 10px 0 14px -14px rgba(0,0,0,.22),0 16px 30px -24px rgba(20,24,30,.4);display:grid;gap:10px;margin:0}
.wn-ctx{font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.wn-q{margin:0;padding:8px 0 8px 12px;border-left:2px solid var(--gold);font-family:var(--display);font-size:1.02rem;line-height:1.45;color:var(--ink)}
.wn-dear{font-family:var(--body);font-style:italic;font-size:1.15rem;color:var(--ink)}
.wn textarea{min-height:120px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--line) 70%,transparent) 31px 32px);
  line-height:32px;padding:0 2px;font-family:var(--body);font-size:1.05rem;resize:vertical;outline:none;color:var(--ink)}
.wn textarea:focus{border-bottom-color:var(--gold)}
.wn-from{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
@media (max-width:480px){.wn-from{grid-template-columns:1fr}}
.wn-from input{border:1px solid var(--line);background:var(--sky);color:var(--ink);border-radius:12px;padding:12px 14px;font-family:var(--ui);font-size:16px;min-width:0}
.wn-from input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 25%,transparent)}
.wn-hint{margin:-4px 2px 0;font-family:var(--ui);font-size:.76rem;color:var(--muted)}
.wn-trap{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.wn-send{width:100%;padding:15px;font-size:1.05rem;margin-top:2px}
.wn-send:disabled{opacity:.7}
.wn-err{margin:0;font-family:var(--ui);font-size:.85rem;color:var(--enemy);text-align:center}
.wn-alt{text-align:center;font-family:var(--ui);font-size:.82rem;color:var(--muted);display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.wn-alt button{border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);cursor:pointer;padding:6px 2px}
.wn-done{text-align:center;padding:14px 8px 10px;font-family:var(--body)}
.wn-done h3{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:16px 0 6px;letter-spacing:.03em}
.wn-done p{color:var(--muted);margin:0 auto;max-width:32ch;line-height:1.55}
.wn-done b{color:var(--ink);font-weight:600;word-break:break-all}
.wn-sign{font-style:italic;margin-top:12px}
.wn-env{position:relative;width:120px;height:78px;margin:6px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 30px -20px rgba(0,0,0,.45);animation:envin .6s cubic-bezier(.2,.8,.2,1)}
.wn-env::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.4%,var(--line) 49.6%,transparent 50.4%),linear-gradient(to top left,transparent 49.4%,var(--line) 49.6%,transparent 50.4%);border-radius:6px}
.wn-flap{position:absolute;left:0;right:0;top:0;height:50px;transform-origin:top;background:color-mix(in srgb,var(--glow) 12%,var(--paper));clip-path:polygon(0 0,100% 0,50% 100%);animation:flap .7s .25s both}
.wn-seal{position:absolute;left:50%;top:34px;transform:translate(-50%,0) scale(0);width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-family:var(--display);font-size:.7rem;display:grid;place-items:center;letter-spacing:.04em;animation:seal .4s .85s both;box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 35%,transparent)}
@keyframes envin{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes flap{from{transform:rotateX(180deg)}to{transform:rotateX(0)}}
@keyframes seal{to{transform:translate(-50%,0) scale(1)}}
.ask-foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;font-size:.9rem;color:var(--muted);text-align:center}
.btn.wn-open{display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));padding:11px 20px 11px 12px}
.btn.wn-open .ws-ic{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--glow) 18%,var(--paper));color:var(--gold);padding:6px;box-sizing:border-box}
.btn.wn-open svg,.wn .ws-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lnk-btn{border:0;background:none;padding:0;font:inherit;color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wn-still{display:block;margin-top:8px;border:0;background:none;padding:4px 0;font-family:var(--ui);font-size:.8rem;color:var(--gold);font-weight:600;cursor:pointer}
.pull::after{content:"Tap to share or ask"}
.author .row{gap:10px 14px}