/* floating pill nav */
.pnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:#1d1d1b;color:#f3f2ee;box-shadow:0 10px 30px rgba(18,18,17,.18);font-size:13px;white-space:nowrap}
.pnav .mk{display:flex;align-items:center;gap:7px;padding:0 12px 0 10px;font-weight:600;letter-spacing:-.02em}
.pnav .mk i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pnav a.mk{color:#fff;padding:7px 12px 7px 10px}
.pnav a{color:#b9b8b1;text-decoration:none;padding:7px 11px;border-radius:999px;transition:color .2s,background .2s}
.pnav a:hover{color:#fff}
.pnav a.on{color:#fff;background:rgba(255,255,255,.09)}
.pnav .plus{margin-left:4px;background:#fff;color:#121211;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px}
@media (prefers-color-scheme:dark){.pnav{background:#242422;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.4)}}
@media (max-width:560px){.pnav .lk{display:none}}
/* cover art, one per chapter. Pure CSS, no images */
.cov{position:relative;container-type:inline-size;aspect-ratio:1;border-radius:12px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 12% 8%,rgba(255,255,255,.28),transparent 55%),linear-gradient(150deg,var(--a),var(--b));isolation:isolate}
.cov::before{content:"";position:absolute;width:92%;aspect-ratio:1;right:-38%;bottom:-38%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.35) 0 13%,rgba(255,255,255,.18) 13.5% 14.5%,transparent 15%),repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 1px,transparent 1px 3.5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);z-index:-1}
.cov::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cov .cn{position:absolute;top:8cqw;left:9cqw;font-family:var(--mono);font-size:8.5cqw;letter-spacing:.04em;opacity:.8}
.cov .cp{position:absolute;top:8cqw;right:9cqw;font-family:var(--mono);font-size:6.5cqw;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.cov .ct{position:absolute;left:9cqw;right:9cqw;bottom:9cqw;font-size:12.5cqw;font-weight:500;letter-spacing:-.045em;line-height:.98}
.cov.soon{--a:#b4b3ac;--b:#86857f;color:rgba(255,255,255,.9)}
@media (prefers-color-scheme:dark){.cov.soon{--a:#3a3936;--b:#262522}}
.cov:has(.stamp) .cp{display:none}
.cov .stamp{position:absolute;right:7cqw;top:7cqw;width:17cqw;height:17cqw;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2cqw rgba(255,255,255,.9)}
.cov .stamp svg{width:55%;height:55%}
/* per-chapter drawing replaces the record */
.cov.has-art::before,.cov.has-art .cp{display:none}
.cov .art2{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cov .art2 .spin{transform-box:view-box;transform-origin:70px 38px;animation:covspin 26s linear infinite}
@keyframes covspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cov .art2 .spin{animation:none}}
.cov.mini .art2{display:none}
/* small cover: just the number */
.cov.mini .ct,.cov.mini .cp,.cov.mini::before{display:none}
.cov.mini .cn{inset:0;display:flex;align-items:center;justify-content:center;font-size:34cqw;opacity:.95}
/* the big header every version keeps */
.hello{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.pct{display:block;font-size:clamp(88px,13vw,168px);font-weight:500;letter-spacing:-.075em;line-height:.8;margin:6px 0 22px}
.pct small{font-size:.34em;letter-spacing:-.03em;color:var(--ink-3);margin-left:4px}
.sub{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;color:var(--ink-2)}
.sub b{color:var(--ink);font-weight:500}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 40px));opacity:0;display:flex;align-items:center;gap:12px;background:#1d1d1b;color:#f3f2ee;border-radius:14px;padding:8px 18px 8px 8px;font-size:14px;font-weight:500;box-shadow:0 18px 40px rgba(18,18,17,.3);transition:transform .6s var(--ease),opacity .3s;z-index:60;white-space:nowrap;max-width:calc(100vw - 32px)}
.toast .cov{width:40px;border-radius:8px;flex:none}
.toast span{overflow:hidden;text-overflow:ellipsis}
.toast.show{transform:translate(-50%,0);opacity:1}
.ideas{position:fixed;right:14px;top:18px;z-index:45;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ideas a{text-decoration:none;color:var(--ink-3);padding:6px 10px;border-radius:999px}
.ideas a.on{background:var(--btn);color:var(--btn-ink)}
@media (max-width:1100px){.ideas{display:none}}