/* Layout: sticky section sidebar on wide screens + a viewing ledger (list or poster wall) with a details sheet */
:root{
  --bg:#ECEEF2; --surface:#FFFFFF; --ink:#16181D; --muted:#5D6270; --line:#D5D8DF;
  --accent:#C8102E; --accent-ink:#FFFFFF; --done:#1F8A5B; --chip:#E3E6EC;
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  /* tile base hues per universe */
  --u-mcu:355; --u-xmen:42; --u-sony:214; --u-tv:272; --u-anim:172; --u-legacy:24;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111318; --surface:#1A1D24; --ink:#EDEFF3; --muted:#9AA0AE; --line:#2B2F39;
    --accent:#F0485F; --accent-ink:#16181D; --done:#3CC488; --chip:#262A33; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111318; --surface:#1A1D24; --ink:#EDEFF3; --muted:#9AA0AE; --line:#2B2F39;
  --accent:#F0485F; --accent-ink:#16181D; --done:#3CC488; --chip:#262A33; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:900px;margin:0 auto;padding-inline:16px;padding-block:28px 64px}
.layout{display:block}
.mainc{min-width:0}
.side{display:none}
@media (min-width:1180px){
  .wrap{max-width:1220px}
  .layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
  .side{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);max-height:calc(100vh - 48px);overflow:auto;padding-top:8px}
}
.side .sh{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.side .sh:first-child{margin-top:0}
.sls{display:grid;gap:4px}
.sl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sl:hover{background:var(--surface)}
.sl .sn{font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.sl .sc{font-family:var(--mono);font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sl .sb{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--chip);overflow:hidden}
.sl .sb i{display:block;height:100%;background:var(--done)}
.sw{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sw button{all:unset;cursor:pointer;display:block;padding:6px 10px;border-radius:8px;font-weight:600;font-size:.9rem;border-left:3px solid var(--accent)}
.sw button:hover{background:var(--surface)}
.sw button:focus-visible{outline:2px solid var(--accent)}
.se{color:var(--muted);font-size:.85rem;margin:0;padding:0 10px}
section.grp{scroll-margin-top:80px}
.vseg{margin-left:auto}

header.top h1{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,9vw,4.4rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;margin:0;text-wrap:balance}
header.top h1 span{color:var(--accent)}
header.top p{color:var(--muted);margin:.6rem 0 0;max-width:62ch}
header.top p.sub{color:var(--ink);font-size:1.02rem}
header.top p.hint{font-size:.88rem}

.progress{margin-top:22px;display:grid;gap:8px}
.progress .nums{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.progress .big{font-family:var(--display);font-weight:800;font-size:2rem;font-variant-numeric:tabular-nums}
.progress .big small{font-size:1rem;color:var(--muted);font-weight:600}
.bar{height:10px;border-radius:5px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s ease}

.next{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:14px;align-items:center}
.next .lbl{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.next .t{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.05;text-transform:uppercase}
.next .info{flex:1;min-width:0}
.next .meta{color:var(--muted);font-size:.85rem;margin-top:2px}
.btn{font:inherit;font-weight:600;font-size:.85rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:focus-visible,.row:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.controls{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);margin-top:18px;padding-block:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
.controls input[type=search]{flex:1 1 180px;min-width:0;font:inherit;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.seg{display:flex;background:var(--chip);border-radius:999px;padding:3px}
.seg button{font:inherit;font-size:.82rem;font-weight:600;border:0;background:transparent;color:var(--muted);padding:5px 12px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
label.tog{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
label.tog input{accent-color:var(--accent);width:16px;height:16px}

.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.78rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

section.grp{margin-top:30px}
.grp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;cursor:pointer;user-select:none;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.grp-h h2{font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1}
.grp-h .c{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap}
.grp-h{flex-wrap:wrap;row-gap:4px}
@media (max-width:480px){.grp-h .c{white-space:normal;font-size:.72rem}}
.grp-h .chev{display:inline-block;transition:transform .2s;margin-right:6px;color:var(--muted)}
section.collapsed .chev{transform:rotate(-90deg)}
section.collapsed ol{display:none}
.grp-d{color:var(--muted);font-size:.85rem;margin:8px 0 0;max-width:65ch}

ol.list{list-style:none;margin:6px 0 0;padding:0}
.row{display:grid;grid-template-columns:2.4rem 84px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 12px 12px 4px;border-bottom:1px solid var(--line);border-radius:8px}
.row .cover{cursor:pointer}
button.ti{all:unset;display:block;cursor:pointer;min-width:0;border-radius:6px}
button.ti:focus-visible,button.ck:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.ti .t,button.ti .m,button.ti .note{display:block}
button.ti .m{display:flex}
button.ck{font:inherit;background:transparent;cursor:pointer;padding:0}
.rt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dur{font-variant-numeric:tabular-nums}
.ptime{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.det{grid-column:3 / -1;border-top:1px solid var(--line);padding:14px 0 6px;margin-right:42px;display:grid;gap:14px;min-width:0}
.det p{margin:0;max-width:62ch}
.det dl{margin:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.det dt{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.det dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.det dd small{font-weight:400;color:var(--muted)}
.det a{color:var(--accent);font-weight:600;font-size:.85rem;text-decoration:none}
.det a:hover{text-decoration:underline}
@media (max-width:480px){.det{grid-column:2 / -1;margin-right:0}}
.row:hover{background:var(--surface)}
.row.sub{padding-block:8px}
.row.open{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.row.sub .cover{justify-self:center}
.row.sub .num::before{content:"↳";color:var(--muted)}
.num{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

.cover{position:relative;width:84px;aspect-ratio:2/3;max-width:100%;border-radius:5px;overflow:hidden;
  background:linear-gradient(155deg,hsl(var(--h) 72% 48%),hsl(calc(var(--h) + 28) 65% 16%));
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:filter .3s}
.cover::before{content:"";position:absolute;inset:0;opacity:.28;
  background-image:radial-gradient(circle,rgba(255,255,255,.75) 1px,transparent 1.4px);background-size:5px 5px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.cover b{position:absolute;left:6px;right:6px;bottom:6px;font-family:var(--display);font-weight:900;font-size:15px;line-height:.95;color:#fff;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.5);overflow-wrap:anywhere}
.cover em{position:absolute;top:5px;left:6px;font-style:normal;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.85)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover.has-img::before{display:none}
.cover img.tm{opacity:0;transition:opacity .3s}
.cover img.tm.ok{transition:none}
.cover img.tm.ok{opacity:1}
.cover.drop{outline:2px dashed var(--accent);outline-offset:2px}
.pact{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.watch{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.watch .wl{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.watch a.btn{text-decoration:none}
.watch a.btn:not(.primary){color:var(--ink)}
.watch a.btn.primary{color:var(--accent-ink)}
.tipcard{margin-top:26px;padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;gap:10px}
.tipcard p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}
.tipcard a{text-decoration:none;justify-self:start;color:var(--accent-ink)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.88rem;font-weight:600;max-width:calc(100% - 32px);z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.row.sub .cover{width:60px}
.row.sub .cover b{font-size:11px}
.row.sub .cover em{display:none}

.ti{min-width:0}
.ti .t{font-weight:600;line-height:1.25}
.row.sub .ti .t{font-weight:500;font-size:.92rem}
.ti .m{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:3px;font-size:.76rem;color:var(--muted)}
.chip{background:var(--chip);border-radius:4px;padding:1px 6px;font-weight:600;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase}
.chip.opt{background:transparent;border:1px dashed var(--muted)}
.chip.soon{background:var(--accent);color:var(--accent-ink)}
.ti .note{color:var(--muted);font-size:.8rem;margin-top:3px}

.ck{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:.2s;flex:none}
.ck svg{width:16px;height:16px;opacity:0;transition:.2s}
.ck .pl{position:absolute;width:13px;height:13px;opacity:0;color:var(--accent-ink);transition:.2s}
.ck{position:relative}
.row.watching .ck{background:var(--accent);border-color:var(--accent)}
.row.watching .ck .pl{opacity:1}
.row.watching{box-shadow:inset 3px 0 0 var(--accent)}
.chip.ng{background:var(--accent);color:var(--accent-ink)}
.uni{display:inline-flex;align-items:center;gap:5px}
.uni i{width:8px;height:8px;border-radius:50%;background:hsl(var(--h) 72% 45%);display:inline-block}
.stseg{justify-self:start}
.nbtns{display:flex;gap:8px;flex-wrap:wrap}
.row.done .ck{background:var(--done);border-color:var(--done)}
.row.done .ck svg:not(.pl){opacity:1}
.row.done .ck svg.pl{opacity:0}
.row.done:not(.open) .ti .t{color:var(--muted)}
.row.done:not(.open) .cover{filter:grayscale(.6) brightness(.9)}
.chip.wd{background:var(--done);color:#fff}
.stseg button[data-st="w"][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.stseg button[data-st="1"][aria-pressed="true"]{background:var(--done);color:#fff}

.empty{color:var(--muted);padding:14px 4px;font-size:.9rem}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
footer .fcol{display:grid;gap:6px;max-width:62ch}
footer a{color:var(--ink)}
footer .fbtns{display:flex;gap:8px;flex-wrap:wrap}
footer .fbtns a.btn{text-decoration:none;color:var(--accent-ink)}
@media (max-width:480px){
  .row{grid-template-columns:1.4rem 58px minmax(0,1fr) auto;gap:10px}
  .cover{width:58px}.row.sub .cover{width:44px}
  .cover b{font-size:11px}.row.sub .cover b{font-size:9px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))!important;gap:16px 12px!important}
  .mtop{grid-template-columns:96px minmax(0,1fr)!important}
  .next{flex-wrap:wrap}
}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;padding-block:14px}
.card{display:flex;flex-direction:column;gap:6px;min-width:0}
.cwrap{position:relative}
.card .cover{width:100%;text-align:left;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;border:0;padding:0;display:block;transition:transform .2s,filter .3s}
.card .cover:hover{transform:translateY(-2px)}
.card .cover b{font-size:20px;left:10px;right:10px;bottom:10px}
.card .cover em{display:none}
.card .cover:focus-visible,.ct:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card .ck{position:absolute;top:8px;right:8px;background:var(--surface);border-color:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card .cn{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:.7rem;background:rgba(0,0,0,.6);color:#fff;padding:1px 6px;border-radius:4px}
.card.done .ck{background:var(--done);border-color:var(--done)}
.card.done .cover{filter:grayscale(.6) brightness(.85)}
.card.watching .cover{outline:3px solid var(--accent);outline-offset:2px}
.card.watching .ck{background:var(--accent);border-color:var(--accent)}
.card.watching .ck .pl{opacity:1}
.card.done .ck svg:not(.pl){opacity:1}
.ct{all:unset;cursor:pointer;font-weight:600;line-height:1.25;font-size:.92rem}
.card.done .ct{color:var(--muted)}
.cm{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.modal{position:fixed;inset:0;z-index:30;background:rgba(10,12,16,.55);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.sheet{position:relative;background:var(--surface);color:var(--ink);border-radius:16px;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;display:grid;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.mx{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
.mtop{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;align-items:end;padding-right:36px}
.mtop .cover{width:100%;border-radius:8px}
.mtop .cover b{font-size:18px;left:8px;right:8px;bottom:8px}
.mhead h3{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1;text-transform:uppercase;margin:4px 0 8px;text-wrap:balance}
.mhead .lbl{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mhead .m{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:.76rem;color:var(--muted)}
.sheet .det{grid-column:auto;margin-right:0;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  @keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22)}65%{transform:scale(.94)}100%{transform:scale(1)}}
  @keyframes cpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
  @keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @keyframes sheet{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  .fx-in .row,.fx-in .card,.fx-in .grp-h{animation:rise .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
  .fx-soft .row,.fx-soft .card{animation:fadein .2s ease both}
  .ck.pop{animation:pop .42s cubic-bezier(.3,.7,.3,1)}
  .cover.pop{animation:cpop .4s ease}
  .det.opening{animation:open .26s ease both}
  .modal:not([hidden]){animation:fadein .2s ease}
  .modal:not([hidden]) .sheet{animation:sheet .28s cubic-bezier(.2,.8,.2,1)}
  .toast:not([hidden]){animation:toast .25s ease}
  .row{transition:background .2s ease,box-shadow .2s ease}
  .seg button{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
  .btn{transition:transform .12s ease,border-color .2s ease,background .2s ease}
  .btn:active,.seg button:active{transform:scale(.96)}
  .sl{transition:background .2s ease}
  .sl .sb i{transition:width .5s ease}
  .grp-h .chev{transition:transform .25s ease}
  .ck:hover{transform:scale(1.08)}
  .ck{transition:background .25s ease,border-color .25s ease,transform .15s ease}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- SagaTrack shell: header, account, paywall, login ---------- */
.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:1220px;margin:0 auto;padding-inline:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--ink);line-height:1}
.logo span{color:var(--accent)}
.topbar .sagas{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.topbar .sagas a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;padding:6px 10px;border-radius:999px}
.topbar .sagas a:hover{color:var(--ink);background:var(--surface)}
.topbar .sagas a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.topbar .tr{display:flex;gap:8px;align-items:center;margin-left:auto}
.btn.ghost{background:transparent}
.pro{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--done);color:#fff;padding:4px 9px;border-radius:999px}
.acct{position:relative}
.acct .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);min-width:230px;padding:6px;display:grid}
.acct .mi{all:unset;box-sizing:border-box;display:block;padding:9px 12px;border-radius:8px;font-size:.88rem;cursor:pointer;color:var(--ink)}
.acct button.mi:hover,.acct button.mi:focus-visible{background:var(--chip)}
.acct .mi.muted{color:var(--muted);cursor:default;font-size:.8rem;padding-block:4px}
.acct .mi.danger{color:var(--accent)}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.eyebrow a{color:var(--muted)}
@media (max-width:720px){.topbar .sagas{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}.topbar .sagas a{white-space:nowrap}}

/* Locked preview */
.lockd{pointer-events:auto;cursor:pointer}
.row.lockd .cover,.card.lockd .cover{filter:blur(3px) saturate(.6);opacity:.7}
.row.lockd .ck{border-style:dashed;opacity:.5}
.bar{display:block;height:11px;border-radius:6px;background:var(--chip);width:62%}
.bar.short{width:38%;margin-top:7px;height:9px}
.card.lockd .ct.bar{height:11px}
.paywall{list-style:none;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin:14px 0 6px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.paywall .pw-ic{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.paywall .pw-ic svg{width:18px;height:18px}
.paywall .pw-t{flex:1 1 260px;min-width:0;display:grid;gap:3px}
.paywall .pw-t b{font-family:var(--display);font-weight:800;font-size:1.35rem;text-transform:uppercase;line-height:1.05}
.paywall .pw-t span{color:var(--muted);font-size:.9rem}
.paywall .pw-b{display:flex;gap:8px;flex-wrap:wrap}
.lockmore{list-style:none;grid-column:1/-1;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.85rem;padding:12px 4px}
.lockmore svg,.sn svg{width:12px;height:12px;vertical-align:-1px;color:var(--muted)}

/* Login dialog */
.sheet.auth{max-width:440px}
.sheet.auth h3{font-family:var(--display);font-weight:900;font-size:1.8rem;text-transform:uppercase;margin:0;line-height:1}
.sheet.auth form{display:grid;gap:10px}
.sheet.auth label{font-size:.8rem;font-weight:600;color:var(--muted)}
.sheet.auth input{font:inherit;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.sheet.auth input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sheet.auth .btn{justify-content:center;padding:10px 14px}

/* Pre-rendered list for search engines and no-JS visitors */
.seo-list{color:var(--muted)}
.seo-list h2{font-family:var(--display);font-size:1.4rem;text-transform:uppercase;color:var(--ink);margin:24px 0 8px}
.seo-list ol{padding-left:22px;margin:0}
.seo-list li{padding:3px 0}
.toast{z-index:60}

/* ---------- Landing page ---------- */
.lp .hero{max-width:1220px;margin:0 auto;padding-inline:16px;padding-block:56px 40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.lp .hero h1{font-family:var(--display);font-weight:900;font-size:clamp(3rem,8vw,6rem);line-height:.88;text-transform:uppercase;margin:0;text-wrap:balance}
.lp .hero h1 span{color:var(--accent)}
.lp .lead{font-size:1.15rem;line-height:1.5;max-width:52ch;margin:18px 0 0}
.lp .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn.big{padding:12px 20px;font-size:.98rem;text-decoration:none}
a.btn{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
a.btn.primary{color:var(--accent-ink)}
.lp .fine{color:var(--muted);font-size:.85rem;margin:12px 0 0}
.hero-art{position:relative;height:420px}
.hero-art .hp{position:absolute;width:150px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.28);background:linear-gradient(155deg,hsl(var(--h) 72% 48%),hsl(calc(var(--h) + 28) 65% 16%))}
.hero-art .hp img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art .hp:nth-child(1){left:2%;top:60px;transform:rotate(-8deg)}
.hero-art .hp:nth-child(2){left:22%;top:10px;transform:rotate(-3deg);z-index:2}
.hero-art .hp:nth-child(3){left:42%;top:40px;transform:rotate(3deg);z-index:3}
.hero-art .hp:nth-child(4){left:62%;top:0;transform:rotate(7deg);z-index:2}
.hero-art .hp:nth-child(5){left:12%;top:230px;transform:rotate(4deg);z-index:4}
.hero-art .hp:nth-child(6){left:34%;top:250px;transform:rotate(-5deg);z-index:5}
.hero-art .hp:nth-child(7){left:56%;top:220px;transform:rotate(-2deg);z-index:4}
.lp-sec{max-width:1220px;margin:0 auto;padding-inline:16px;padding-block:40px}
.lp-sec>h2{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3rem);text-transform:uppercase;margin:0 0 20px;line-height:1}
.saga-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.saga-card{display:grid;grid-template-rows:auto 1fr;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.saga-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.saga-card .art{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:10px 10px 0}
.saga-card .art span{aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:linear-gradient(155deg,hsl(var(--h) 72% 48%),hsl(calc(var(--h) + 28) 65% 16%))}
.saga-card .art img{width:100%;height:100%;object-fit:cover;display:block}
.saga-card .body{padding:14px 14px 16px;display:grid;gap:6px;align-content:start}
.saga-card h3{font-family:var(--display);font-weight:900;font-size:1.7rem;text-transform:uppercase;margin:0;line-height:1}
.saga-card p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.4}
.saga-card .st{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.saga-card .go{color:var(--accent);font-weight:700;font-size:.88rem;margin-top:4px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:6px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:900;font-size:2.4rem;color:var(--accent);line-height:1}
.steps b{font-size:1.05rem}
.steps span{color:var(--muted);font-size:.92rem;line-height:1.45}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:760px}
.plan{position:relative;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.plan.best{border:2px solid var(--accent)}
.plan .tag{position:absolute;top:-12px;left:18px;margin:0;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.plan h3{margin:0;font-family:var(--display);font-weight:900;font-size:1.6rem;text-transform:uppercase}
.plan .price{margin:0;font-family:var(--display);font-weight:900;font-size:3rem;line-height:1}
.plan .price small{font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--muted)}
.plan ul{margin:4px 0 8px;padding-left:18px;display:grid;gap:6px;font-size:.93rem}
.plan .btn{justify-self:start}
.faq{max-width:760px;margin-left:max(16px,calc((100% - 1220px)/2 + 16px))}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem}
.faq details p{margin:10px 0 0;color:var(--muted);line-height:1.5}
.lp-foot{max-width:1220px;margin:20px auto 0;padding-inline:16px;padding-block:24px 48px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.lp-foot .fcol{display:grid;gap:6px}
.lp-foot a{color:var(--ink)}
@media (max-width:860px){.lp .hero{grid-template-columns:1fr;padding-block:32px 16px}.hero-art{height:300px}.hero-art .hp{width:108px}.hero-art .hp:nth-child(n+5){top:160px}}
@media (max-width:480px){.hero-art{height:250px}.hero-art .hp{width:88px}.hero-art .hp:nth-child(n+5){top:130px}}

/* ---------- Plain pages (privacy, terms) ---------- */
.doc{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:32px 64px;line-height:1.6}
.doc h1{font-family:var(--display);font-weight:900;font-size:2.6rem;text-transform:uppercase;margin:0 0 8px;line-height:1}
.doc h2{font-size:1.15rem;margin:28px 0 6px}
.doc .note{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.9rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.saga-card{transition:none}}