/* Bindery UI.
   Direction: TubeForge's warm dashboard (palette, density, sidebar grouping)
   crossed with Gumroad's interface language (hard near-black borders, offset
   shadows with no blur, chunkier type).

   The loud treatment goes on interactive and featured elements only. This app
   is operated daily; a screen that shouts everywhere is exhausting by day three.

   Sales-page rules are namespaced under #sales — both surfaces live in one HTML
   file, so a generic class name in one silently restyles the other. */

:root{
  --bg:#FFF4EE;        /* page ground */
  --card:#FFFFFF;      /* raised surface */
  --sunk:#FFF9F6;      /* inset fields */
  --ink:#2B1810;       /* primary text, and the border colour */
  --mut:#8A6A58;       /* secondary text */
  --mut2:#B09484;      /* tertiary, hints, small caps labels */
  --line:#FFE0D2;      /* hairline dividers inside calm areas */
  --acc:#FF5A1F;       /* the one accent */
  --acc-bg:#FFE8DE;    /* accent tint: active nav, badges */
  --acc-ink:#C2410C;   /* accent text on tint */
  --ok:#16A34A; --ok-bg:#E7F6EC;
  --warn:#C0503A;
  --r:12px;            /* card radius */
  --r-s:9px;           /* control radius */
  --gap:14px;
  --shadow:3px 3px 0 var(--ink);
  --shadow-sm:2px 2px 0 var(--ink);
  --sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--acc-ink)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em}

/* Any class that sets `display` and is ever toggled with the hidden attribute
   needs this written at the same time, or hidden="" silently does nothing. */
[hidden]{display:none !important}

/* ============================ sales page ============================ */

#sales .s-wrap{max-width:780px;margin:0 auto;padding:0 22px}

/* sticky top bar: brand left, buy + log in right */
#sales .s-top{position:sticky;top:0;z-index:20;background:rgba(255,244,238,.94);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
#sales .s-top-in{max-width:1080px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px}
.s-brand{display:flex;align-items:center;gap:0;font-size:18px;font-weight:800;
  color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.s-brand .b2{color:var(--acc)}
#sales .s-top-buy{color:var(--mut);text-decoration:none;font-size:14px;font-weight:600;padding:0 4px}
#sales .s-top-buy:hover{color:var(--ink)}
#sales .s-top .btn{text-decoration:none;line-height:1.2}
#sales .s-foot{color:var(--mut2);text-align:center}

/* login screen */
#loginpage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 22px}
.lp{width:100%;max-width:400px}
.lp-brand{justify-content:center;margin-bottom:22px}
.lp-card{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow)}
.lp-h{font-size:24px;font-weight:800;margin:0 0 4px}
.lp-s{color:var(--mut);font-size:14px;margin:0 0 20px}
.lp-btn{width:100%;margin-top:4px}
.lp-back{text-align:center;color:var(--mut2);font-size:13px;margin-top:18px}
#sales .s-hero{background:var(--ink);color:#FFF4EE;padding:66px 0 58px;margin-bottom:46px}
#sales .s-kicker{color:#C4A08C;font-size:13px;letter-spacing:.4px;margin-bottom:14px}
#sales h1{font-size:36px;font-weight:800}
#sales h1 em{color:#FF8A5B;font-style:normal}
#sales .s-lede{color:#E3CFC2;font-size:17px;max-width:56ch;margin:18px 0 26px}
#sales .s-cta{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;
  padding:13px 26px;border:1px solid var(--ink);border-radius:var(--r-s);
  font-weight:700;box-shadow:var(--shadow)}
#sales .s-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
#sales .s-note{color:#B09484;font-size:13px;margin-top:14px}
#sales .s-block{margin-bottom:46px}
#sales h2{font-size:22px;font-weight:800}
#sales p{color:var(--mut);max-width:66ch}

#sales .s-demo{display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
#sales .s-demo-in,#sales .s-demo-out{flex:1;min-width:0}
#sales .s-demo-label{font-size:11px;color:var(--mut2);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:8px}
#sales .s-demo pre{font:11px/1.5 ui-monospace,Consolas,monospace;color:var(--mut);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px;margin:0;overflow:auto}
#sales .s-demo-arrow{color:var(--acc);font-size:24px;flex:none}
#sales .s-pages{display:flex;gap:7px}
#sales .s-pg{flex:1;aspect-ratio:2/3;background:#FFFDFB;border:1px solid var(--ink);
  border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:4px;justify-content:center}
#sales .s-pg i{display:block;height:3px;background:#E8D5C8;border-radius:2px}
#sales .s-pg i:nth-child(2){width:88%}#sales .s-pg i:nth-child(3){width:64%}
#sales .s-pg b{display:block;height:10px;background:var(--ink);border-radius:2px}
#sales .s-pg-dark{background:var(--ink);align-items:center}
#sales .s-pg-dark span{color:#FFF4EE;font-size:9px;letter-spacing:1px}
#sales .s-pg-card{align-items:center}
#sales .s-pg-card span{color:var(--mut2);font-size:15px}
#sales .s-cap{font-size:13px;color:var(--mut2);margin-top:12px}

#sales .s-steps{color:var(--mut);padding-left:20px}
#sales .s-steps li{margin-bottom:8px}
#sales .s-limits ul{list-style:none;padding:0;margin:0 0 18px}
#sales .s-limits li{padding:10px 0 10px 30px;position:relative;color:var(--mut);
  border-bottom:1px solid var(--line)}
#sales .s-limits li:before{position:absolute;left:0;top:10px;font-weight:800}
#sales .s-limits .y:before{content:"✓";color:var(--ok)}
#sales .s-limits .w:before{content:"!";color:#B45309}
#sales .s-limits .n:before{content:"✕";color:var(--warn)}
#sales .s-rule{background:var(--acc-bg);border:1px solid var(--ink);border-radius:var(--r);
  padding:14px 16px;color:var(--acc-ink);max-width:none}

#sales .s-filter{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#sales .s-for,#sales .s-not{background:var(--card);border:1px solid var(--ink);
  border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
#sales .s-for h3,#sales .s-not h3{font-size:14px;margin-bottom:10px;font-weight:800}
#sales .s-for h3{color:var(--ok)}#sales .s-not h3{color:var(--warn)}
#sales .s-for ul,#sales .s-not ul{margin:0;padding-left:18px;color:var(--mut);font-size:14px}
#sales .s-for li,#sales .s-not li{margin-bottom:7px}

#sales .s-price{display:grid;grid-template-columns:1fr 230px;gap:18px;background:var(--card);
  border:1px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
#sales .s-price ul{margin:0;padding-left:18px;color:var(--mut);font-size:14px}
#sales .s-price li{margin-bottom:7px}
#sales .s-buy{text-align:center;border-left:1px solid var(--line);padding-left:18px}
#sales .s-amt{font-size:44px;font-weight:800}
#sales .s-amt-sub{color:var(--mut2);font-size:12px;margin-bottom:16px}

#sales .s-faq dt{font-weight:700;margin-top:14px}
#sales .s-faq dd{margin:4px 0 0;color:var(--mut)}
#sales .s-legal p{font-size:12.5px;color:var(--mut2)}
.s-err{color:var(--warn);font-size:13px;margin-top:10px}

@media(max-width:720px){
  #sales h1{font-size:27px}
  #sales .s-filter,#sales .s-price{grid-template-columns:1fr}
  #sales .s-buy{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}
  #sales .s-demo{flex-direction:column;align-items:stretch}
  #sales .s-demo-arrow{transform:rotate(90deg);text-align:center}
}

/* ============================= app shell ============================= */

#app{display:flex;min-height:100vh}

.side{width:230px;flex:none;background:var(--card);border-right:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column}
/* gap:0 — a flex gap would sit between the "Bin" text node and the "dery"
   span and split the wordmark in half. The mark gets its own margin instead. */
.brand{display:flex;align-items:center;gap:0;font-size:19px;font-weight:800;
  padding:0 6px 18px;letter-spacing:-.03em}
.brand-mark{width:30px;height:30px;flex:none;display:grid;place-items:center;margin-right:9px;
  background:var(--acc);color:#fff;border:1px solid var(--ink);border-radius:8px;font-size:15px}
.brand .b2{color:var(--acc)}

.nav-head{font-size:10.5px;color:var(--mut2);letter-spacing:.9px;text-transform:uppercase;
  font-weight:700;padding:18px 8px 7px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-s);
  color:var(--mut);text-decoration:none;font-size:14.5px;font-weight:500;margin-bottom:2px;
  border:1px solid transparent}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--acc-bg);color:var(--acc-ink);font-weight:700}
.nav-item.active .nav-ico{color:var(--acc)}
.nav-ico{color:var(--mut2);font-size:15px;width:17px;text-align:center;flex:none}
.nav-item.locked{color:var(--mut2)}
.nav-tick{margin-left:auto;color:var(--ok);font-weight:800}
.badge{margin-left:auto;font-size:10px;background:var(--acc-bg);color:var(--acc-ink);
  border:1px solid var(--acc-ink);padding:1px 7px;border-radius:20px;letter-spacing:.4px;font-weight:700}
.nav-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}

/* Centre the content column: on wide monitors a left-pinned 1180px view left
   a dead third of the screen on the right. */
.main{flex:1;min-width:0;padding:14px 26px 48px;max-width:1360px;margin:0 auto}

.topbar{display:flex;align-items:center;gap:14px;padding-bottom:20px}
.search{flex:1;max-width:420px;position:relative}
.search input{width:100%;padding:10px 13px 10px 36px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);color:var(--ink)}
.search:before{content:"⌕";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--mut2);font-size:16px}
.search input:focus{outline:0;border-color:var(--ink)}
.spacer{flex:1}
.acct{color:var(--mut);font-size:13px;white-space:nowrap}
.acct b{color:var(--ink);font-weight:600}

.btn{background:var(--card);border:1px solid var(--ink);border-radius:var(--r-s);
  padding:9px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  box-shadow:var(--shadow-sm);white-space:nowrap}
.btn:hover{background:var(--bg)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.primary{background:var(--acc);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#F04E14}
.btn.ghost{box-shadow:none;border-color:var(--line);font-weight:500;color:var(--mut)}
.btn.mini{padding:6px 12px;font-size:13px;box-shadow:none;border-color:var(--line)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}

.view{max-width:1180px;margin:0 auto}
.page-h{font-size:30px;font-weight:800;margin:0 0 4px}
.page-sub{color:var(--mut);font-size:14.5px;margin:0 0 22px}

/* Welcome banner — left accent rule, collapsible guide */
.banner{display:flex;align-items:flex-start;gap:14px;background:var(--card);
  border:1px solid var(--ink);border-left:5px solid var(--acc);border-radius:var(--r);
  padding:16px 18px;margin-bottom:22px;box-shadow:var(--shadow)}
.banner-ico{font-size:22px;line-height:1.2;flex:none}
.banner-b{flex:1;min-width:0}
.banner-t{font-weight:700;font-size:15px}
.banner-s{color:var(--mut);font-size:13.5px}
.banner-a{background:none;border:0;color:var(--acc);font:inherit;font-size:11.5px;
  font-weight:800;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;padding:2px 0}
.banner-guide{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--mut);font-size:14px}
.banner-guide ol{margin:0;padding-left:20px}
.banner-guide li{margin-bottom:6px}

/* Stat tiles and shortcut cards share one grid so the two rows line up */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow)}
.tile-l{font-size:10.5px;color:var(--mut2);letter-spacing:.9px;text-transform:uppercase;
  font-weight:700;margin-bottom:8px}
.tile-v{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.tile-v.sm{font-size:22px}
.tile-n{color:var(--mut2);font-size:12.5px;margin-top:4px}

.shortcut{display:block;background:var(--card);border:1px solid var(--ink);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.shortcut:hover{background:#FFFBF9;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.shortcut-ico{font-size:22px;margin-bottom:10px}
.shortcut-t{font-weight:700;font-size:15.5px;margin-bottom:3px}
.shortcut-s{color:var(--mut);font-size:13.5px}

/* Cards for the working views */
.card{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);
  padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.calm{border-color:var(--line);box-shadow:none}
.card-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:12px}
.card-head .btn,.card-head .mini-inp{margin-left:auto}

.lbl{display:block;font-size:12px;color:var(--mut2);font-weight:600;margin:0 0 5px;
  min-height:16px;line-height:16px}
.inp,.ta{width:100%;padding:10px 12px;font:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--sunk);color:var(--ink);margin-bottom:14px}
.ta{font:12.5px/1.65 ui-monospace,Consolas,monospace;resize:vertical}
.inp:focus,.ta:focus{outline:0;border-color:var(--ink);background:var(--card)}
.mini-inp{margin:0 0 0 auto;max-width:280px}
.hint{font-size:12.5px;color:var(--mut2);margin:0 0 12px}
.mono{font-family:ui-monospace,Consolas,monospace}

.setgroup{font-size:10.5px;color:var(--mut2);letter-spacing:.9px;text-transform:uppercase;
  font-weight:700;margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.card .setgroup:first-child{border-top:0;padding-top:0;margin-top:0}
/* Columns align at the top: end-alignment drops one label below the other the
   moment its text wraps and the other's does not. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;align-items:start}
.grid2 .ctl{min-height:42px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grid2 .ctl .inp{margin-bottom:0}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);padding:11px 13px}
.stat-l{font-size:10.5px;color:var(--mut2);letter-spacing:.7px;text-transform:uppercase;font-weight:700}
.stat-v{font-size:22px;font-weight:700;letter-spacing:-.02em}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
.kv dt{color:var(--mut2);font-weight:600}
.kv dd{margin:0}

.pill{display:inline-block;background:var(--ok-bg);color:#0F6E3C;border:1px solid #0F6E3C;
  font-size:11px;font-weight:700;padding:1px 9px;border-radius:20px;margin:0 4px 4px 0}

.log{font:12px/1.7 ui-monospace,Consolas,monospace;color:var(--mut);white-space:pre-wrap;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 13px;margin:12px 0;max-height:290px;overflow:auto}
.log .ok{color:var(--ok)} .log .bad{color:var(--warn)}

/* ---------------- studio ---------------- */
/* Book centre-stage, options in a right rail. The stage is deliberately dark:
   white paper on the warm ground reads as two more cards; on near-black it
   reads as a physical book. */
.view-wide{max-width:1280px}
.studio{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:14px;align-items:start}
/* The stage is lit, not painted: a reading lamp somewhere above throws a cone
   of warm light down onto the book; the rest of the room falls into shadow. */
.st-stage{position:relative;border:1px solid var(--ink);
  background:radial-gradient(130% 100% at 50% 30%, #33241736 0%, #241a1200 40%),
             linear-gradient(#221912, #150f0a);
  background-color:#1a120c;
  border-radius:var(--r);padding:30px 16px;box-shadow:var(--shadow);
  display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:560px}
/* the lamp itself: a narrow cone from above centre, widening as it falls,
   pooling into a soft ellipse of light at the level of the pages */
.st-stage:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% -14%,
      transparent 42%, rgba(255,213,158,.04) 45.5%, rgba(255,225,180,.14) 50%,
      rgba(255,213,158,.04) 54.5%, transparent 58%),
    radial-gradient(60% 36% at 50% 58%, rgba(255,216,164,.16), transparent 72%),
    radial-gradient(90% 60% at 50% 108%, rgba(0,0,0,.55), transparent 60%)}
.st-stage > *{position:relative;z-index:1}
#flipbook{margin:0 auto}
/* pages are canvases StPageFlip positions; it needs them block-level */
.st-page{background:#fff;overflow:hidden}
.st-page canvas{display:block;width:100%;height:100%;background:#fff}
.st-pill{position:absolute;top:14px;right:14px;background:var(--acc);color:#fff;
  border:1px solid var(--ink);border-radius:20px;padding:6px 14px;font-size:12.5px;
  font-weight:700;box-shadow:var(--shadow-sm)}
.st-rail{position:sticky;top:14px}
.st-card .inp{margin-bottom:12px}
/* numbered steps in the rail: the linear job made visible, no clicks needed */
.st-step{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut2);
  letter-spacing:.9px;text-transform:uppercase;font-weight:700;
  margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.st-card .st-step:first-child{border-top:0;padding-top:0;margin-top:0}
.st-step i{font-style:normal;background:var(--acc);color:#fff;border-radius:6px;
  padding:1px 6px;font-size:10.5px;letter-spacing:0}
.st-book-line{font-size:13.5px;font-weight:600;margin-bottom:8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.st-edit{width:100%;margin-bottom:2px}
.st-log{max-height:140px;font-size:11px}
/* the list drawer: a wide card that appears above the stage, inside the Studio */
.st-editor{border-color:var(--acc)}
.st-meta{display:grid;grid-template-columns:2fr 2fr 1fr;gap:0 12px}
@media(max-width:900px){.st-meta{grid-template-columns:1fr}}
.lbl-soft{font-weight:400;text-transform:none;letter-spacing:0}
.st-stats{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.st-stat{display:flex;justify-content:space-between;font-size:13.5px}
.st-stat span{color:var(--mut2)}
.st-stat b{font-weight:700}
.st-dl{display:block;text-align:center;text-decoration:none}
.pv-bar{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:16px}
.pv-count{font-size:13px;color:var(--mut);min-width:110px;text-align:center;font-weight:600}
.pv-sound{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut2);cursor:pointer}
@media(max-width:1050px){
  .studio{grid-template-columns:1fr}
  .st-rail{position:static}
  .st-stage{min-height:0;padding:18px 8px}
}

/* ---------------- dashboard hero ---------------- */
.hero{display:flex;gap:24px;align-items:center;background:var(--card);
  border:1px solid var(--ink);border-radius:var(--r);padding:26px 28px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.hero-b{flex:1;min-width:0}
.hero-hi{color:var(--mut2);font-size:14px;font-weight:600;margin-bottom:6px}
.hero-h{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.15}
.hero-h span{color:var(--acc)}
.hero-s{color:var(--mut);font-size:14.5px;max-width:52ch;margin:0 0 16px}
.hero-cta{text-decoration:none;display:inline-block}
.hero-art{flex:none;display:flex;gap:0;align-items:flex-end}
.hero-art .lp-book{margin-left:-26px}

/* mock book covers — pure CSS, no fake photos */
.lp-book{width:108px;height:158px;background:#221a13;border-radius:3px 8px 8px 3px;
  border:1px solid #000;box-shadow:6px 8px 18px rgba(43,24,16,.35), inset 6px 0 8px -6px rgba(255,255,255,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:12px;text-align:center;transform:rotate(-2deg)}
.lp-book i{font-style:normal;color:#FFF4EE;font-weight:800;font-size:12px;line-height:1.3}
.lp-book u{text-decoration:none;color:#E9A184;font-size:8.5px;letter-spacing:.6px;font-weight:700}
.lp-b2{transform:rotate(2deg) translateY(8px);background:#2b2117}
.lp-b3{transform:rotate(6deg) translateY(18px);background:#1c1812}

/* ---------------- niche ideas teaser ---------------- */
.lib-soft{font-weight:400;letter-spacing:0;text-transform:none;color:var(--mut2)}
.nich-card{padding:6px 18px}
.nich-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.nich-row b{flex:1;min-width:0;font-size:14.5px}
.nich-row .pill{margin:0}
.warn-pill{background:#FDF0E0;color:#8a5a12;border-color:#8a5a12}
.nich-locked b,.nich-locked .pill{filter:blur(0);opacity:.45}
.nich-locked .badge{text-decoration:none}
.nich-more{display:block;padding:12px 0 10px;font-size:13.5px;font-weight:600;color:var(--acc-ink)}

/* ---------------- login split ---------------- */
.lp-split{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.lp-left{background:var(--bg);padding:44px 56px;display:flex;flex-direction:column}
.lp-left .s-brand{margin-bottom:52px}
.lp-head{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}
.lp-head em{font-style:normal;color:var(--acc)}
.lp-lede{color:var(--mut);font-size:16px;max-width:46ch;margin:0 0 44px}
.lp-books{display:flex;align-items:flex-end;padding-left:14px}
.lp-books .lp-book{width:150px;height:220px;margin-left:-34px}
.lp-books .lp-book i{font-size:15px}
.lp-books .lp-book u{font-size:10px}
.lp-right{background:var(--card);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:44px 32px;border-left:1px solid var(--line)}
.lp-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--ink);
  border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow)}
.lp-h{font-size:24px;font-weight:800;margin:0 0 4px}
.lp-s{color:var(--mut);font-size:14px;margin:0 0 20px}
.lp-btn{width:100%;margin-top:4px}
.lp-passwrap{position:relative}
.lp-passwrap .inp{padding-right:40px}
.lp-eye{position:absolute;right:8px;top:7px;background:none;border:0;cursor:pointer;
  font-size:15px;opacity:.55;padding:4px}
.lp-eye:hover{opacity:1}
.lp-help{color:var(--mut2);font-size:12.5px;margin:14px 0 0}
.lp-back{color:var(--mut2);font-size:13px;margin-top:18px}
@media(max-width:900px){
  .lp-split{grid-template-columns:1fr}
  .lp-left{padding:28px 22px 36px}
  .lp-head{font-size:28px}
  .lp-books .lp-book{width:110px;height:160px}
}

/* ---------------- chips ---------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{background:var(--sunk);border:1px solid var(--line);border-radius:20px;
  padding:6px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--acc-bg);border-color:var(--acc-ink);color:var(--acc-ink)}

/* ---------------- royalty ---------------- */
.roy{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 13px;margin:0 0 12px}
.roy-h{font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:700;
  color:var(--mut2);margin-bottom:8px}
.roy-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mut2);margin-bottom:6px}
.roy-inp{margin:0;max-width:96px;padding:6px 9px}
.roy-net{color:var(--ok)}
.roy-net.roy-bad{color:var(--warn)}

/* ---------------- build stages ---------------- */
.st-stages{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:16px;background:rgba(255,244,238,.95);border:1px solid var(--ink);
  border-radius:20px;padding:7px 18px;font-size:12px;font-weight:600;color:var(--mut2)}
.st-stages span{position:relative;padding-left:14px}
.st-stages span:before{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--line)}
.st-stages span.on{color:var(--ink)}
.st-stages span.on:before{background:var(--acc)}

/* ---------------- physical book: decks + hard covers ---------------- */
.bookwrap{display:flex;align-items:center;justify-content:center;position:relative}
.bookwrap #flipbook{flex:none}
/* Gravity: the soft pool of shadow under the block is what separates an
   object resting on a surface from a picture stuck to a wall. */
.bookwrap:before{content:"";position:absolute;left:4%;right:4%;bottom:-16px;height:30px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 68%)}

/* Fullscreen reading mode */
.st-stage-wrap.full{position:fixed;inset:0;z-index:120;background:#1b140e;
  display:flex;flex-direction:column;padding:14px 14px 6px}
.st-stage-wrap.full .st-stage{flex:1;border-radius:8px;box-shadow:none;min-height:0}
.st-stage-wrap.full .pv-bar{margin:10px 0 6px}
.st-stage-wrap.full .pv-count{color:#E3CFC2}
.st-stage-wrap.full .pv-sound{color:#B09484}
.deck{width:0;align-self:center;border-radius:2px;transition:width .5s ease;
  background:repeating-linear-gradient(to right,#e9e2d5 0 1px,#f8f4ea 1px 3px);
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.deck-left{border-right:1px solid #d8d0bf}
.deck-right{border-left:1px solid #d8d0bf}
.st-page.st-cover{background:#221a13}
.st-page.st-cover canvas{background:#221a13}

/* ---------------- upgrade pages ---------------- */
.up-hero{background:var(--card);border:1px solid var(--ink);border-left:5px solid var(--acc);
  border-radius:var(--r);padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
.up-badge{margin-bottom:10px;display:inline-block}
.up-state{margin-top:6px}
.up-active{display:inline-block;background:var(--ok-bg);color:#0F6E3C;border:1px solid #0F6E3C;
  border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700}

/* ---------------- the library ---------------- */
.lib-row{display:flex;gap:14px;align-items:flex-start}
.lib-thumb{width:64px;height:96px;flex:none;border-radius:3px 5px 5px 3px;
  border:1px solid var(--ink);object-fit:cover;box-shadow:3px 3px 0 rgba(43,24,16,.25)}
.lib-thumb-ph{display:grid;place-items:center;background:#221a13;color:#FFF4EE;font-size:20px}
.lib-body{flex:1;min-width:0}
.lib-head{font-size:11px;color:var(--mut2);letter-spacing:.9px;text-transform:uppercase;
  font-weight:700;margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.lib-t{font-weight:700;font-size:15.5px;margin-bottom:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lib-actions{display:flex;gap:8px;margin-top:12px}
.lib-none{color:var(--mut2);font-size:14px;padding:8px 2px}

/* Empty states carry the onboarding: a first-time buyer sees them before
   anything else, so they say what will appear and how to make the first one. */
.empty{text-align:center;padding:34px 20px;color:var(--mut)}
.empty-ico{font-size:28px;margin-bottom:10px}
.empty-t{font-weight:700;color:var(--ink);margin-bottom:4px}
.empty-s{font-size:13.5px;margin-bottom:14px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#FFF4EE;padding:12px 20px;border-radius:var(--r-s);font-size:14px;
  font-weight:500;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--warn)}

@media(max-width:900px){
  #app{flex-direction:column}
  .side{width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav-foot{margin-top:16px}
  .main{padding:14px 18px 40px}
  .grid2{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
  .search{max-width:none;order:3;flex-basis:100%}
  .page-h{font-size:24px}
}