/* ==========================================================================
   Locust — styles
   Dark, quiet chrome; the accent is used for state (live, active, progress),
   not decoration. Three families: Playfair for titles and the wordmark,
   Manrope for the interface, Literata for anything you read or write.
   ========================================================================== */

:root{
  --void:#08090F;
  --surface:#12151F;
  --surface-2:#1A1E2B;
  --surface-3:#232838;
  --line:#262B3A;
  --line-soft:#1B1F2C;
  --text:#E8E9F0;
  --muted:#8A90A6;
  --faint:#5C627A;

  --ac-rgb:168,85,247;
  --ac-deep-rgb:124,58,237;
  --ac:rgb(var(--ac-rgb));
  --ac-deep:rgb(var(--ac-deep-rgb));
  --ac-soft:#D8B4FE;
  --ac-dim:rgba(var(--ac-rgb),.14);
  --ember:#E5342B;
  --ok:#3DD68C;

  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --read:'Literata',Georgia,'Times New Roman',serif;

  --r-sm:10px; --r:16px; --r-lg:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:74px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --gutter:18px;
  --page:1240px;                    /* the frame every page sits in on a computer */

  /* The mark is masked artwork, so its colour is a token rather than a file.
     Set from prefs at boot; the glow is derived so it always opposes the
     mark and the tile it sits on, which is what keeps a black logo visible
     on black and a white one visible on white. */
  --logo:#A855F7;
  --logo-glow:rgba(255,255,255,.55);
  --mark-bg:#000;

  /* Chrome that sits over content, and the two states that were hardcoded
     dark before there was anything but dark. */
  --chrome:rgba(8,9,15,.86);
  --danger:#FF8A80;
  --press:rgba(255,255,255,.06);
}

/* Light appearance. Only the palette moves - the accent stays the same
   purple, because the mark's colour is the thing that is meant to change,
   not the app around it. */
:root[data-theme="light"]{
  --void:#F6F6F9;
  --surface:#FFFFFF;
  --surface-2:#F1F2F6;
  --surface-3:#E4E6EE;
  --line:#D8DAE4;
  --line-soft:#E8EAF1;
  --text:#14161F;
  --muted:#5D6478;
  --faint:#8A90A2;
  --ac-soft:#7C3AED;
  --mark-bg:#FFFFFF;
  --chrome:rgba(246,246,249,.86);
  --danger:#C0392B;                 /* #FF8A80 is unreadable on white */
  --press:rgba(0,0,0,.05);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;scrollbar-width:none}
*::-webkit-scrollbar{display:none}
html,body{margin:0;padding:0;height:100%;width:100%;max-width:100%;overflow-x:clip}
body{
  background:var(--void);color:var(--text);
  font-family:var(--ui);font-size:15px;line-height:1.5;
  overscroll-behavior:none;
  /* Sideways gestures belong to the page swipe in nav.js, not to the browser.
     pan-y means nothing can be dragged past the edge of a screen however wide
     its content turns out to be, which is stronger than clipping alone:
     clipping hides the overflow, this stops the drag from starting. Vertical
     scrolling and pinch zoom are untouched. */
  touch-action:pan-y pinch-zoom;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 46% at 12% 4%,rgba(var(--ac-deep-rgb),.16),transparent 68%);
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0;color:inherit}
input,textarea,select{background:none;border:0;outline:none;width:100%}
textarea{resize:vertical;min-height:44px}
/* The description grows to fit what is in it (growDesc in story.js), so there
   is nothing to drag open and nothing to scroll inside. */
#sDesc{resize:none;overflow-y:hidden}
h1,h2,h3{margin:0;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid rgba(var(--ac-rgb),.7);outline-offset:2px}
/* Not on a field you type in. Each sits in a box that lights its own border
   while you type (.inp, the comment and message boxes), and the ring drawn
   inside that box as well was one box too many. Buttons, switches and
   links keep it, so a keyboard can still see where it is. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
[hidden]{display:none !important}

/* ---------- shell ---------- */
/* The swipe animations translate a view sideways, and any one stubborn wide
   child would widen the page. Clip at the column so neither can. */
/* No top padding here. The safe-area strip is the header's, so the header's
   own background covers it - left on #app, the glow behind showed through
   above the bar and left a seam across the top of every screen. */
#app{position:relative;z-index:1;min-height:100%;max-width:100%;overflow-x:clip;padding:0 var(--gutter) calc(var(--nav-h) + var(--safe-b) + 24px)}
.view{display:none;max-width:680px;margin:0 auto}
.view.on{display:block;animation:rise .28s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

.top{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-t) + 16px) 0 14px;margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);
  isolation:isolate;
}
/* Headers live inside the centered reading column, but their chrome belongs
   to the window. Put its background on a viewport-wide pseudo-element so a
   wide desktop window never leaves a hard edge beside the header. */
.top::before{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:linear-gradient(var(--void) 78%,transparent);
}
/* Same 44px tile, same radius, same hairline as the <img> it replaced. The
   artwork is a mask over --logo instead of baked-in pixels, and mask
   center/cover reproduces what object-fit:cover was doing. */
/* The reader's top bar carries the mark too, smaller. */
.top .mark,.rrow .mark,.ldbar .mark{
  width:44px;height:44px;border-radius:12px;background:var(--mark-bg);
  box-shadow:0 0 0 1px var(--line);position:relative;overflow:hidden;flex:none;display:block;
}
.top .mark::after,.rrow .mark::after,.ldbar .mark::after,.empty .glyph::after{
  content:'';position:absolute;inset:0;background:var(--logo);
  -webkit-mask:url(logo.png) center/cover no-repeat;
          mask:url(logo.png) center/cover no-repeat;
  filter:drop-shadow(0 0 2px var(--logo-glow)) drop-shadow(0 0 5px var(--logo-glow));
}
.top .titles{flex:1;min-width:0}
.wordmark{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.05;letter-spacing:-.01em}
/* A story's title can sit where the page name goes, and titles run long. */
.top .wordmark{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Back, where there is somewhere to go back to, sits ahead of the mark. */
.top .tback{margin-right:-6px}
.top .tagline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A header with a back arrow and three buttons has little room left on a
   phone for the name and the tagline. Closer spacing and a slightly smaller
   mark give it back without dropping either. */
@media (max-width:420px){
  .top{gap:8px}
  .top .mark{width:38px;height:38px;border-radius:10px}
}
.tagline{font-size:12px;color:var(--muted);margin-top:2px}


/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  transition:transform .12s var(--ease),background .15s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn.sm{padding:9px 14px;font-size:13px}
.btn.pri{background:var(--ac-deep);border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(var(--ac-deep-rgb),.28)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:rgba(229,52,43,.35)}
.btn.block{width:100%}
.btn:disabled{opacity:.4;pointer-events:none}
.icb{
  width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);flex:none;transition:background .15s,color .15s;
}
.icb:hover,.icb.on{background:var(--surface-2);color:var(--text)}
.icb.warn{color:var(--danger)}
.icb.aa{font-family:var(--display);font-size:16px;font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- fields ---------- */
.field{margin-bottom:18px}
.field.last{margin-bottom:0}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}
.inp{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;transition:border-color .15s}
.inp:focus-within{border-color:rgba(var(--ac-rgb),.55)}
.inp.at{display:flex;align-items:center;gap:2px}
.inp.at span{color:var(--faint)}
.hint{font-size:12px;color:var(--faint);margin-top:8px}
.sub{color:var(--muted);font-size:14px;line-height:1.5}
.divide{height:1px;background:var(--line-soft);margin:18px 0}

/* Two kinds of switch, kept apart on purpose. .seg picks an option - a
   rating, a reader's page colour. .tabs moves between the sections of a
   page, underlined the way a site's page tabs are, and every page's
   sections use it so they all read the same. */
.tabs{display:flex;gap:26px;overflow-x:auto;margin-bottom:18px;border-bottom:1px solid var(--line-soft)}
.tabs button{position:relative;flex:none;padding:12px 2px 11px;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .15s}
.tabs button:hover{color:var(--text)}
/* The underline is a background stripe: not ::after, which Messages' unread
   dot uses, and not an inset shadow, which left a hairline down the edge of
   a tab that did not start on a whole pixel. */
.tabs button.on{color:var(--text);background:linear-gradient(var(--ac),var(--ac)) bottom/100% 3px no-repeat}
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;margin-bottom:14px}
.seg.wrap{flex-wrap:wrap;border-radius:14px}
.seg button{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.seg button.on{background:var(--surface-3);color:var(--text)}

.tog{display:flex;align-items:center;gap:12px;font-size:14px;cursor:pointer}
.tog input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--surface-3);position:relative;flex:none;transition:background .2s;margin:0}
.tog input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.tog input:checked{background:var(--ac-deep)}
.tog input:checked::after{transform:translateX(18px)}
.tog.small{font-size:13px;color:var(--muted)}
.tog.small input{width:34px;height:20px}
.tog.small input::after{width:14px;height:14px}
.tog.small input:checked::after{transform:translateX(14px)}

.tagwrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;min-height:46px}
.tagwrap:focus-within{border-color:rgba(var(--ac-rgb),.55)}
.tagwrap input{flex:1;min-width:110px;padding:4px 2px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;border-radius:999px;background:var(--ac-dim);color:var(--ac-soft);font-size:13px;font-weight:600}
.chip button{color:inherit;opacity:.7;font-size:15px;line-height:1;width:18px;height:18px}

/* ---------- blocks & cards ---------- */
.block{padding:20px 0 22px;border-bottom:1px solid var(--line-soft)}
.block:last-of-type{border-bottom:0}
.block h2,.card h2{font-family:var(--display);font-weight:600;font-size:20px;margin-bottom:6px}
.block > .sub,.card > .sub{margin-bottom:14px}
.blockhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.blockhead .sub{margin:0}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:20px;margin-top:16px}

/* ---------- library ---------- */
/* The sign-in form is only there to tell password managers which boxes
   are the sign-in; it adds no box of its own. */
#lgCreds{display:contents}
.srow{display:none;gap:10px;align-items:center;margin-bottom:14px}
.srow.on{display:flex}
.srow .inp{flex:1}
.resume{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-soft);margin-bottom:16px;
}
.resume .rart{width:52px;height:68px;border-radius:9px;background:var(--surface-3);overflow:hidden;flex:none}
.resume .rart img{width:100%;height:100%;object-fit:cover;display:block}
.resume .rtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.resume .rtxt small{font-size:12px;color:var(--ac-soft);font-weight:600}
.resume .rtxt b{font-family:var(--display);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume .rtxt span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume .go{color:var(--faint)}

/* minmax(0,1fr), not 1fr: a bare 1fr floors the column at the item's
   min-content, and .tile h3 is nowrap, so one long story title widened its
   column and pushed the next tile off the screen. */
.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
@media (min-width:520px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{text-align:left;display:block;min-width:0;animation:rise .32s var(--ease) both}
.tile .art{aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--surface-2);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.35);margin-bottom:10px}
.tile .art img,.art .stack img{width:100%;height:100%;object-fit:cover;display:block}
.tile h3{font-family:var(--display);font-size:16px;line-height:1.25;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile p{font-size:12px;color:var(--muted);margin-top:3px}
.goalbar{height:3px;border-radius:2px;background:var(--surface-3);margin-top:8px;overflow:hidden}
.goalbar i{display:block;height:100%;background:var(--ac);border-radius:2px}
.blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;font-family:var(--display);font-style:italic}
.stack{position:absolute;inset:0}
.stack img{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.stack img.live{opacity:1}

.empty{text-align:center;padding:52px 12px 30px}
.empty .glyph{width:84px;height:84px;margin-bottom:18px;opacity:.95;position:relative;display:block;margin-left:auto;margin-right:auto}
.empty h3{font-family:var(--display);font-size:22px;font-weight:600;margin-bottom:8px}
.empty p{color:var(--muted);margin-bottom:20px;max-width:32ch;margin-left:auto;margin-right:auto}

.chlist{display:flex;flex-direction:column;gap:8px}
.ch{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 12px 12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);
  animation:rise .3s var(--ease) both;text-align:left;
}
.ch .n{width:26px;flex:none;text-align:center;font-family:var(--display);font-size:17px;color:var(--faint)}
.ch .n .alt{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ac-soft)}
.ch .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.ch .body b{font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .body span{font-size:12px;color:var(--muted)}
.ch .body mark{background:var(--ac-dim);color:var(--ac-soft);border-radius:3px;padding:0 2px}
.ch a.body{color:inherit;text-decoration:none}
.ch > .btn{flex:none}
.ch .acts{display:flex;gap:0;flex:none}
.ch .acts .icb{width:34px;height:34px}
.ch .acts .icb:disabled{opacity:.25}
.ch.cur{border-color:rgba(var(--ac-rgb),.5)}
/* Public or Private, per chapter. Filled when it is out there as chosen,
   hollow when the choice has not been pushed yet. */
.ch .acts .vis{align-self:center;margin-right:4px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--faint)}
.ch .acts .vis.on{background:var(--ac-dim);border-color:rgba(var(--ac-rgb),.55);color:var(--ac-soft)}
.ch .acts .vis.wait{border-style:dashed}
.ch .acts .vis .vico{display:none;position:relative;align-items:center;justify-content:center}
[data-layout="phone"] .ch .acts .vis{width:34px;height:34px;padding:0;margin:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
[data-layout="phone"] .ch .acts .vis .vtxt{display:none}
[data-layout="phone"] .ch .acts .vis .vico{display:inline-flex}
[data-layout="phone"] .ch .acts .vis:not(.on) .vico::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:2px;border-radius:2px;background:currentColor;transform:rotate(-40deg)}
/* A part's four small buttons are one menu on a phone (phone.css). */
.ch .acts .cmore{display:none}
/* The push checklist: one row per thing that could go out. */
.prows{display:flex;flex-direction:column;gap:6px;margin:14px 0 6px;max-height:50vh;overflow-y:auto}
.prow{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft)}
.prow input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:rgb(var(--ac-rgb))}
.prow span{display:flex;flex-direction:column;gap:2px;min-width:0}
.prow b{font-family:var(--display);font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow small{font-size:12px;color:var(--muted)}
.prow.off{opacity:.6;padding-left:42px}
.shbtns{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.shbtns .btn:disabled{opacity:.5}
/* Who a conversation is with, at the head of its row: their photo, or their
   initials until they have one. */
.chav{
  width:40px;height:40px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-3);
  color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.02em;
}
.chav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- story ---------- */
/* The card at the top: the cover, where the story stands, and the buttons
   that change it. On a phone the buttons take a row of their own under the
   cover; the computer layout moves them to the right (see the end). */
.shero{
  display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"art meta" "acts acts" "hint hint";
  gap:0 16px;align-items:start;margin:4px 0 6px;padding:16px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
}
.shero .art{grid-area:art;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--surface-2);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.shero .art img{width:100%;height:100%;object-fit:cover;display:block}
.shmeta{grid-area:meta;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.shmeta .pubstate{margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.shcount{font-size:12.5px;color:var(--faint)}
/* Rows are spaced by margins, not the grid's gap, so a hint with nothing to
   say leaves no hole where it would have been. */
.shacts{grid-area:acts;display:flex;gap:10px;margin-top:14px}
.shacts .btn{flex:1}
.shero .hint{grid-area:hint;margin:10px 0 0}
.shero .hint:empty{display:none}
.pubstate.live::before{background:var(--ok)}
/* Every block on the story page keeps its rule underneath, the last in a
   column included - on a phone the columns run on into each other. */
#v-story div.block{border-bottom:1px solid var(--line-soft)}   /* div: .btn.block is a button */
/* The computer layout's switch between chapters, details and notes, and its
   Read button beside the cover. A phone shows every section and reads from
   the button at the foot of the page. */
#v-story .stabs,#v-story .sread{display:none}
/* Settings' switch between its groups is the phone's alone (phone.css). */
.setstabs{display:none}
/* Miscellaneous holds two things, so Notes keeps a heading of its own. */
.smisc > h2{margin-bottom:14px}
.smisc .sgoal{margin-bottom:22px}
.smisc h3{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:4px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.thumb{position:relative;width:54px;height:72px;border-radius:9px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.first{border-color:rgba(var(--ac-rgb),.6)}
.thumb .x{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1}
.thumb.add{display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);border-style:dashed}
.two{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
/* A placeholder is one field now - the author names it, the reader answers it. */
.two.one{grid-template-columns:1fr auto}
.two .inp{padding:9px 12px}

/* ---------- desk ---------- */
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat > div{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 12px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:24px;font-weight:600}
.stat span{font-size:12px;color:var(--muted)}
.stat.inner{grid-template-columns:1fr 1fr;margin-top:6px}
.stat.inner > div{background:var(--surface-2)}
.week{display:flex;gap:8px;height:84px;align-items:flex-end;margin-top:16px;padding:0 2px}
.week .d{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.week .bar{width:100%;border-radius:6px 6px 3px 3px;background:var(--ac);opacity:.85;min-height:4px}
.week .d.zero .bar{background:var(--surface-3);opacity:1}
.week span{font-size:10px;color:var(--faint);font-weight:600}
.infobar{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--ac-dim);border:1px solid rgba(var(--ac-rgb),.25);font-size:13px;margin-bottom:16px}
.infobar b{display:block;margin-bottom:2px}
.alarmbar{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:rgba(229,52,43,.12);border:1px solid rgba(229,52,43,.35);font-size:13px;margin-bottom:16px}

/* ---------- profile ---------- */
/* (see 'a writer's page', further down) */

/* An empty state that fills its card. Not to be confused with .blank, which
   is the absolutely-positioned "No cover" sitting inside a cover box. */
.nothing{padding:36px 18px;text-align:center}
.nothing h2{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:6px}
.nothing .sub{margin:0}
.pbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.pbadge svg{width:13px;height:13px;color:var(--ac-soft)}
.pbadge[title],.pseal[title]{cursor:help}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatches button{width:38px;height:38px;border-radius:50%;border:3px solid transparent;transition:transform .15s var(--ease)}
.swatches button.on{border-color:#fff;transform:scale(1.1)}

/* ---------- bottom nav ---------- */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:space-around;align-items:stretch;
  height:calc(var(--nav-h) + var(--safe-b));padding:8px 10px var(--safe-b);
  background:var(--chrome);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);
  transition:transform .25s var(--ease);
}
#nav.hide{transform:translateY(110%)}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--faint);font-size:11px;font-weight:600;border-radius:14px}
#nav button i{display:flex}
#nav button.on{color:var(--ac-soft)}

/* ---------- sheet ---------- */
#scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center}
#scrim.on{display:flex}
#sheet{
  width:100%;max-width:680px;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px var(--gutter) calc(20px + var(--safe-b));max-height:82vh;overflow:auto;
  animation:sheetUp .28s var(--ease) both;border-top:1px solid var(--line);
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
#sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 18px}
#sheet h3{font-family:var(--display);font-size:20px;margin-bottom:6px}
#sheet .sub{margin-bottom:16px}
#sheet .chlist{margin-top:6px}

/* Picking a story lifts it out of the shelf: everything behind goes soft,
   grey and dim, and the book is the only thing left in focus. The blur is
   backdrop-filter, so it costs nothing until the overlay is up; where it is
   not supported the flat wash underneath still carries the effect. */
#pickBack{
  position:fixed;inset:0;z-index:42;display:none;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 20px) var(--gutter) calc(var(--safe-b) + 20px);
  background:rgba(6,7,12,.5);
  -webkit-backdrop-filter:blur(18px) saturate(.45) brightness(.55);
  backdrop-filter:blur(18px) saturate(.45) brightness(.55);
  animation:pickFade .22s var(--ease) both;
}
#pickBack.on{display:flex}
#pick{width:min(60vw,236px);max-width:100%;text-align:center}
.pkart{
  width:100%;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--surface-2);
  position:relative;box-shadow:0 26px 64px rgba(0,0,0,.65);margin:0;
  animation:pickRise .34s var(--ease) both;
}
.pkart img{width:100%;height:100%;object-fit:cover;display:block}
.pkart .blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#pick h3{
  font-family:var(--display);font-size:19px;font-weight:700;line-height:1.25;margin-top:16px;
  animation:pickRise .34s var(--ease) both;animation-delay:40ms;
}
.pksub{font-size:12px;color:var(--muted);margin-top:5px;animation:pickRise .34s var(--ease) both;animation-delay:70ms}
.picks{display:flex;flex-direction:column;margin-top:18px}
.picks button{
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.01em;
  padding:11px 8px;border-radius:10px;color:var(--text);
  animation:pickRise .3s var(--ease) both;
}
.picks button:active{background:var(--press)}
.picks button.warn{color:var(--danger)}
@keyframes pickFade{from{opacity:0}to{opacity:1}}
@keyframes pickRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- settings ---------- */
/* A card you press. Same skin as the others so the Profile reads as one
   column rather than cards plus a stray button. */
.rowcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.rowcard span{flex:1;min-width:0}
.rowcard b{display:block;font-family:var(--display);font-size:16px;font-weight:600}
.rowcard small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.rowcard .go{color:var(--faint);flex:none}

.hue{display:flex;align-items:flex-start;gap:18px;margin:4px 0 16px}
.hexfield{flex:1;min-width:0;margin:0}
.hexinp{display:flex;align-items:center;gap:4px}
.hexinp .hash{color:var(--muted);font-weight:600}
.hexinp input{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.hexinp.bad{box-shadow:0 0 0 1px #ef4444}
/* The preview is the mark at the size it is worn in a header, so what you
   are choosing is what you will see. */
.markpreview{
  width:76px;height:76px;flex:none;border-radius:20px;background:var(--mark-bg);
  box-shadow:0 0 0 1px var(--line);position:relative;overflow:hidden;display:block;
}
.markpreview::after{
  content:'';position:absolute;inset:0;background:var(--logo);
  -webkit-mask:url(logo.png) center/cover no-repeat;
          mask:url(logo.png) center/cover no-repeat;
  filter:drop-shadow(0 0 3px var(--logo-glow)) drop-shadow(0 0 8px var(--logo-glow));
}
.field label b{float:right;color:var(--muted);font-weight:600}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--logo);
  border:2px solid var(--text);margin-top:-7px;
}
.picks.stacked{gap:2px;margin-top:12px}
.picks.stacked button{font-family:var(--ui);font-size:14.5px;font-weight:600;padding:12px;text-align:left}

#menuBack{position:fixed;inset:0;z-index:45;display:none}
#menuBack.on{display:block}
#menu{
  position:absolute;top:calc(var(--safe-t) + 52px);right:14px;min-width:210px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);animation:pop .16s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
#menu button{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:500}
#menu button:hover{background:var(--surface-3)}
#menu button.warn{color:var(--danger)}

#toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);transform:translate(-50%,10px);z-index:60;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);max-width:88vw;text-align:center;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* A new version of the site, offered rather than forced (refresh.js). Where
   the toast sits, a step above it. */
.updbar{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);transform:translate(-50%,16px);z-index:59;
  display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;max-width:calc(100vw - 24px);
  background:var(--surface-3);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s var(--ease)
}
.updbar.on{opacity:1;transform:translate(-50%,0)}
.updbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.updbar .icb{width:32px;height:32px}
@media (min-width:720px){[data-layout="desk"] .updbar{bottom:24px}}

/* Pull to refresh: a dot that comes down with the finger and turns over
   once letting go would refresh. The browser's own pull-to-reload is off
   on a phone, so the two never both fire. */
.ptr{
  position:fixed;left:50%;top:calc(var(--safe-t) + 6px);z-index:58;width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:var(--ac-soft);
  background:var(--surface-2);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.3);
  transform:translate(-50%,calc(var(--pull,0px) - 48px));opacity:0;pointer-events:none;transition:opacity .15s
}
.ptr.on{opacity:1}
.ptr svg{transition:transform .2s var(--ease)}
.ptr.ready svg{transform:rotate(180deg)}
.ptr.busy{transform:translate(-50%,40px);transition:opacity .15s,transform .2s var(--ease)}
.ptr.busy svg{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
html[data-layout="phone"]{overscroll-behavior-y:contain}

/* ---------- editor ---------- */
#v-editor{position:fixed;inset:0;z-index:30;background:var(--void);display:none;flex-direction:column}
#v-editor.on{display:flex}
.ehead{display:flex;align-items:center;gap:6px;padding:calc(var(--safe-t) + 6px) 8px 6px;flex:none}
/* Room between the back arrow and the right-hand buttons. The chapter's
   title is right there on the page; a second copy up here was noise. */
.espace{flex:1}
.saved{width:8px;height:8px;border-radius:50%;background:var(--ok);transition:background .3s;margin-right:6px;flex:none}
.saved.dirty{background:var(--faint)}
.escroll{flex:1;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:4px var(--gutter) 200px;-webkit-overflow-scrolling:touch}
.ebanner{
  display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:12px;
  border:1px dashed var(--line);color:var(--faint);margin:6px 0 16px;overflow:hidden;
}
.ebanner.set{height:auto;border:0;aspect-ratio:16/7}
.ebanner img{width:100%;height:100%;object-fit:cover;display:block}
.etitle{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.2;padding:4px 0;text-align:center}
.etitle::placeholder{color:var(--faint)}
.erule{width:38px;height:2px;background:var(--ac);border-radius:2px;margin:12px auto 18px;opacity:.8}
/* Lines inside a paragraph sit close; the space between paragraphs does the
   separating. Loose leading on both makes the two levels compete. */
#editor{
  font-family:var(--read);font-size:17.5px;line-height:1.55;color:var(--text);
  min-height:60vh;outline:none;caret-color:var(--ac);word-wrap:break-word;
}
#editor div{min-height:1.55em}
/* Paragraph spacing: the gap is margin, not an empty line, so there is
   nothing in it for the caret to sit in or the backspace key to eat. */
#editor.spaced > div{margin-bottom:1em}
#editor.spaced > div:last-child{margin-bottom:0}
#editor img{max-width:100%;border-radius:10px;display:block;margin:10px auto}
#editor img::selection{background:var(--ac-dim)}
.bubble{
  position:fixed;z-index:35;display:none;gap:2px;padding:4px;border-radius:12px;
  background:var(--surface-3);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.bubble.on{display:flex}
.bubble button,.fmtdock button{width:36px;height:34px;border-radius:8px;font-family:var(--display);font-size:15px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.bubble button.on,.fmtdock button.on{background:var(--ac-dim);color:var(--ac-soft)}
/* Everything around the text is controls, never text: a selection dragged
   past the edge of the draft must not spread into the buttons, and a long
   press on one must not offer to copy it. */
.ehead,.efoot,.bubble,.pill,.ebanner,.erule,.efocusx{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#v-editor button svg{pointer-events:none}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px;align-self:center}
.efoot{
  position:absolute;left:0;right:0;bottom:0;z-index:33;
  background:rgba(8,9,15,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);
  transform:translateY(110%);transition:transform .2s var(--ease);
}
.efoot.on{transform:none}
.fmtdock{display:none;gap:4px;padding:6px 10px 0;justify-content:center}
.fmtdock button{width:42px;height:38px}
.fmtdock.on{display:flex}
.ebar{display:flex;align-items:center;gap:2px;padding:4px 8px calc(4px + var(--safe-b))}
.ecount{margin-left:auto;font-size:12px;color:var(--muted);padding-right:8px;font-weight:600}
.pill{
  position:absolute;top:calc(var(--safe-t) + 56px);right:14px;z-index:34;
  padding:7px 12px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ac-soft);box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.frpanel{
  position:absolute;left:0;right:0;top:calc(var(--safe-t) + 52px);z-index:34;display:none;flex-direction:column;gap:8px;
  padding:12px var(--gutter);background:var(--surface);border-bottom:1px solid var(--line);
}
.frpanel.on{display:flex}
.frpanel .inp{padding:9px 12px}
.frrow{display:flex;align-items:center;gap:10px}
.frres{flex:1;font-size:12px;color:var(--muted)}

/* ---------- reader ---------- */
#v-reader{position:fixed;inset:0;z-index:31;background:var(--void);display:none;flex-direction:column}
#v-reader.on{display:flex}
.rtop{flex:none;padding-top:var(--safe-t);background:var(--void);transition:opacity .25s,transform .25s var(--ease)}
.rrow{display:flex;align-items:center;gap:4px;padding:6px 8px}
.rrow .mark{width:32px;height:32px;border-radius:9px;margin-left:2px}
.rbrand{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:8px;line-height:1.1}
/* The story's name, which can be long: one line, cut short with an ellipsis
   rather than wrapping into the buttons beside it. */
.rbrand .wordmark{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbrand .tagline{font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The story's name moved out of the bar to make room for the mark, and sits
   above the chapter's own heading instead. */
.rwhere{font-size:12px;font-weight:700;color:var(--ac-soft);padding:6px 10px;border-radius:999px;background:var(--ac-dim);white-space:nowrap}
.rprog{height:2px;background:var(--line-soft)}
.rprog i{display:block;height:100%;width:0;background:var(--ac);transition:width .15s}
/* --cmgut is the strip beside the text where a paragraph's comment bubble
   sits. It is the reader's margin on both sides, so the text is centred
   and the bubble lives in the margin rather than taking width from one
   side of the text - which pushed every line, centred line and picture
   left of centre on a phone. */
#v-reader{--cmgut:30px}
.rbody{flex:1;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;padding:22px max(var(--gutter),var(--cmgut)) 120px;-webkit-overflow-scrolling:touch;max-width:720px;width:100%;margin:0 auto}
.rbanner{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:14px;margin-bottom:22px;display:block}
.rkick{font-size:12px;font-weight:700;color:var(--ac-soft);text-align:center}
.rtitle{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.15;text-align:center;margin:8px 0 6px}
.rhead{text-align:center;margin-bottom:24px}
.rkick:empty{display:none}
/* The chapter's own reads, votes and comments, under its title. */
.rstats{display:flex;justify-content:center;gap:20px;margin-top:12px;font-family:var(--ui);font-size:14px;color:var(--muted)}
.rstats span{display:inline-flex;align-items:center;gap:6px}
.rstats b{font-weight:600}
/* Who wrote it: under the title on a phone, beside the text on a computer. */
.rauthor:empty{display:none}
.rauth{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 26px;font-family:var(--ui);font-size:14px;color:var(--muted)}
.rauth b{color:var(--text);font-weight:700}
.rauth:hover b{color:var(--ac-soft)}
.rauth small{font-size:12px;color:var(--faint)}
.face.rauthor{width:52px;height:52px;font-size:17px}
.prose{font-family:var(--read);color:var(--text)}
.prose p{margin:0 0 1.15em}
/* Laid out as the writer saw it in the editor: a blank line they typed is
   a line's height (the <br> in it), and with paragraph spacing off
   (.tight) lines sit close, so a poem's stanzas read as stanzas. */
.prose > .gap{margin:0 0 1.15em}
.ednote > .gap{margin-bottom:.9em}
.prose.tight p,.prose.tight > .gap{margin-bottom:0}
.prose img{max-width:100%;border-radius:12px;display:block;margin:18px auto}
.prose .swap{background:var(--ac-dim);color:var(--ac-soft);border-radius:4px;padding:0 3px}
.rend{margin-top:44px;text-align:center}
.rbar{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:10px var(--gutter) calc(10px + var(--safe-b));
  background:linear-gradient(transparent,var(--void) 60%);transition:opacity .25s,transform .25s var(--ease);
}
/* Solid, so the line being read never shows through Previous and Next. */
.rbar .btn{background:var(--surface)}
#v-reader.bare .rtop,#v-reader.bare .rbar{opacity:0;pointer-events:none}
#v-reader.bare .rtop{transform:translateY(-100%)}
#v-reader.bare .rbar{transform:translateY(100%)}

/* ---------- comfort ---------- */
.szrow{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.szrow b{font-family:var(--display);font-size:18px;min-width:52px;text-align:center}

/* Lit while a blank in this story still has no answer. */
.rrow .icb.flag{color:var(--ac-soft)}

/* A page's own section heading - Home's shelves, a writer's stories - in
   the title face, the same size wherever one appears. */
.sechead{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.25;margin:6px 0 14px}
/* A group's heading with See all beside it (Home: Originals, Fanfiction). */
.sechead.orighead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sechead.orighead h2{font:inherit;margin:0}
.shelf + .sechead,.chlist + .sechead{margin-top:34px}
#continueStrip:not(:empty){margin-bottom:30px}
.conts{display:grid;gap:10px}
.conts .resume{margin:0}
@media (min-width:720px){[data-layout="desk"] .conts{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
#continueStrip{margin-bottom:18px}

/* ---------- Sign in with Google ----------
   To developers.google.com/identity/branding-guidelines, not to the app's own
   button style - the guidelines do not allow the button to be restyled.
     dark:  fill #131314, stroke #8E918F 1px inside, text #E3E3E3
     light: fill #FFFFFF, stroke #747775 1px inside, text #1F1F1F
     Google Sans Medium 14/20; 40px tall (the official assets); logo 20px;
     12px before the logo, 10px between logo and text, 12px after the text.
   The stroke is an inset shadow because "inside" means inside the edge, and
   a border would add to the size. Logo and text are centred together, which
   is one of the two alignments Google's own button offers. */
.gsi{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:400px;height:40px;margin:0 auto;padding:0 12px;
  border-radius:20px;overflow:hidden;cursor:pointer;
  background:#131314;box-shadow:inset 0 0 0 1px #8E918F;color:#E3E3E3;
  font-family:'Google Sans',Roboto,Arial,sans-serif;font-weight:500;font-size:14px;line-height:20px;
}
.gsi-logo{display:block;width:20px;height:20px;flex:none;margin-right:10px}
.gsi-logo svg{display:block}
.gsi-text{white-space:nowrap}
/* Pressed and hovered states as a veil of the text colour, the way Google's
   own button does it - never a change to the fill or the logo. */
.gsi::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none}
.gsi:hover::after{opacity:.08}
.gsi:active::after{opacity:.12}
.gsi:disabled{cursor:default}
.gsi:disabled > *{opacity:.38}
:root[data-theme="light"] .gsi{background:#FFFFFF;box-shadow:inset 0 0 0 1px #747775;color:#1F1F1F}

/* The blank's own spelling beside its plain name - "Your name  Y/N" - so the
   reader can match it to what they see in a chapter. */
.blankkey{margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--faint)}

/* ---------- the notebook bar ---------- */
/* Shelf/Desk on the left, the sort on the right, one row between the header
   and the first story. */
.nbbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;border-bottom:1px solid var(--line-soft)}
.nbbar .tabs{margin:0;border-bottom:0}
.sortbtn{
  display:inline-flex;align-items:center;gap:5px;padding:8px 4px 8px 10px;
  font-size:13px;font-weight:600;color:var(--muted);border-radius:999px;
}
.sortbtn svg{width:14px;height:14px;opacity:.8}
.sortbtn:active{color:var(--text)}

/* ---------- is the shelf behind? ---------- */
.pubstate{margin:3px 0 0;font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:6px}
.pubstate::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.pubstate.stale{color:var(--ac-soft)}
.pubstate.stale::before{background:rgb(var(--ac-rgb))}
#pubHint.stale{color:var(--ac-soft)}

/* ---------- unread ---------- */
.pfbtn img{border-radius:50%}

/* ---------- following ---------- */
#pfEditRow{align-items:center}

/* ---------- the board ---------- */
/* A writer's board, the way a writing site's conversations look: a box to
   post in, then a card per post - face, name, when, a menu - its newest
   replies under it and a box to answer in. */
.pcompose{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.pcomposebox{flex:1;min-width:0}
.pcompose textarea{resize:none;overflow-y:hidden;min-height:22px;line-height:1.5}
.pcomposego{justify-content:space-between;margin-top:10px}
.pcomposego .hint{margin:0}
.face.ann{width:44px;height:44px;font-size:14px}
.face.rep{width:32px;height:32px;font-size:11px}
.annpost{position:relative;padding:18px 20px 16px;margin:0 0 16px}
.annpin{position:absolute;left:-30px;top:20px;color:var(--ac-soft)}
.annhead{display:flex;align-items:center;gap:12px}
.annwho{flex:1;min-width:0;display:flex;flex-direction:column}
.annwho b{font-size:15px;font-weight:700}
.annwho span{font-size:12.5px;color:var(--faint)}
.annbody{margin:14px 0 2px;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.mention{color:var(--ac-soft);font-weight:600;text-decoration:none;cursor:pointer}
.mention:hover{text-decoration:underline;text-underline-offset:2px}
.annreps{margin:14px -20px 0;padding:0 20px;border-top:1px solid var(--line-soft)}
.annall{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 0;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.annall:hover{color:var(--text)}
.annrep{display:flex;gap:10px;padding:12px 0 0}
.annrepbody{flex:1;min-width:0}
.annrepbody p{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.annrepbody b{font-weight:700;margin-right:2px}
.annrepbody .cwriter{margin-right:4px}
.annrepfoot{display:block;margin-top:2px;font-size:12px;color:var(--faint)}
.annreply{display:flex;align-items:center;gap:10px;margin-top:14px}
.annreply .inp{flex:1;min-width:0;padding:8px 12px}
@media (max-width:860px){.annpin{position:static;display:inline-flex;margin:-4px 0 6px}}
.lnk{background:none;border:0;padding:0;font-size:12px;color:var(--ac-soft);font-weight:600}
.lnk.warn{color:var(--danger,#e5342b)}
.cmt{padding:8px 0}
.cmt p{margin:4px 0 0;font-size:13.5px;white-space:pre-wrap}
.cmthead{display:flex;gap:8px;align-items:center;font-size:12px}
.cmthead b{font-size:13px}
.cmthead .oseal{margin-left:-4px}
.cmthead span,.cmthead time{color:var(--faint)}
/* A time you can ask for the exact moment: hover on a computer, tap anywhere. */
time.stamp{cursor:pointer;font-variant-numeric:tabular-nums;text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
time.stamp:hover{text-decoration-color:currentColor}
time.stamp.exact{color:var(--ac-soft)}

/* ---------- published work from other people ---------- */
/* Their covers are files, and files do not cross accounts yet, so most tiles
   on Home say so rather than showing a broken image. */
/* A cover for a story without art: the title on a binding of its own colour.
   .blank.gencover rather than .gencover so it outranks .pkart .blank, which
   centres everything, in the pick overlay. Container units size the title to
   whatever box it lands in - a shelf tile, the story page, the pick overlay. */
.blank.gencover{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;
  padding:13% 11% 12%;text-align:left;font-style:normal;overflow:hidden;
  border-radius:inherit;container-type:inline-size;
  background:
    radial-gradient(130% 90% at 100% 0%, hsl(calc(var(--h) + 40) 55% 34% / .85), transparent 62%),
    linear-gradient(160deg, hsl(var(--h) 42% 24%), hsl(calc(var(--h) + 25) 50% 11%));
  color:hsl(var(--h) 75% 90%);
}
/* A short rule at the top, the way a plain binding carries one, and it holds
   the title down at the foot where a jacket's type would sit. */
.blank.gencover::before{
  content:"";width:24%;height:2px;border-radius:2px;margin-bottom:auto;
  background:hsl(var(--h) 70% 82% / .65);
}
.gctitle{
  font-family:var(--display);font-weight:700;font-style:normal;line-height:1.08;
  font-size:15px;font-size:clamp(12px, 11.5cqw, 34px);
  color:hsl(var(--h) 80% 93%);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.gcby{
  font-size:10px;font-size:clamp(9px, 5cqw, 13px);font-style:normal;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--h) 40% 80% / .8);
}
.resume .rart.gen{
  background:linear-gradient(160deg, hsl(var(--h) 42% 28%), hsl(calc(var(--h) + 25) 50% 13%));
}
/* The lines under a cover, the same on every shelf: title, writer, then
   where it stands. */
.tile p{margin:0}
.tile .by{color:var(--ac-soft)}
.tile .meta{color:var(--faint);font-size:11.5px;margin-top:2px}

/* ---------- the account button ---------- */
/* Top right of every header, the way a reader expects to find themselves.
   Falls back to initials, because an account exists before a photo does. */
/* Not overflow:hidden - that clipped the unread dot to the circle. The photo
   rounds itself instead (border-radius on the img, above). */
.pfbtn{
  width:34px;height:34px;border-radius:50%;flex:none;position:relative;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;
  transition:border-color .15s,transform .15s var(--ease);
}
/* Pinned to the circle rather than sized by height:100%, which the phone's
   WebView did not resolve inside a button - a portrait photo kept its own
   shape and hung out below the circle as an oval. */
.pfbtn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pfbtn:active{transform:scale(.94)}
/* A dot only when there is something to say - signed out, or a sync that
   failed. Decoration would make it meaningless. */
.pfbtn.flag{border-color:rgba(var(--ac-rgb),.6);box-shadow:0 0 0 2px rgba(var(--ac-rgb),.16)}
.menuhead{
  padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--faint);line-height:1.4;word-break:break-word;
}
.menuhead b{display:block;color:var(--text);font-size:13.5px;font-weight:600}

/* ---------- sign in ---------- */
/* An overlay, not a view, for the same reason the editor is one: it has to
   cover the nav bar as well as the page underneath. */
#v-login{
  position:fixed;inset:0;z-index:40;background:var(--void);display:none;overflow-y:auto;
  padding:calc(var(--safe-t) + 44px) var(--gutter) calc(var(--safe-b) + 40px);
}
#v-login.on{display:block}
.lbox{width:100%;max-width:400px;margin:0 auto}
/* The same masked artwork as the header mark, larger. It follows the colour
   the writer picked, so the first screen already looks like their app. */
.lmark{
  width:64px;height:64px;border-radius:18px;background:var(--mark-bg);
  box-shadow:0 0 0 1px var(--line);position:relative;overflow:hidden;display:block;margin:0 auto;
}
.lmark::after{
  content:'';position:absolute;inset:0;background:var(--logo);
  -webkit-mask:url(logo.png) center/cover no-repeat;
          mask:url(logo.png) center/cover no-repeat;
  filter:drop-shadow(0 0 2px var(--logo-glow)) drop-shadow(0 0 6px var(--logo-glow));
}
.lwm{font-size:31px;text-align:center;margin:16px 0 0}
.lsub{color:var(--muted);font-size:14px;text-align:center;margin:9px 0 26px;line-height:1.5}
.ldiv{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--faint);font-size:12px}
.ldiv::before,.ldiv::after{content:'';flex:1;height:1px;background:var(--line)}
.lerr{
  color:var(--danger);font-size:13px;line-height:1.5;margin:0 0 4px;
  background:rgba(229,52,43,.08);border:1px solid rgba(229,52,43,.28);
  border-radius:var(--r-sm);padding:10px 12px;
}
#lgGo,#lgWhoGo{margin-top:18px}
#edErr{margin-top:12px}
.lrow{display:flex;justify-content:space-between;gap:12px;margin-top:15px}
.linkish{color:var(--ac-soft);font-size:13px;font-weight:600}
.linkish.quiet{display:block;margin:30px auto 0;color:var(--faint);font-weight:500}
.linkish:disabled,.btn.busy{opacity:.45;pointer-events:none}
/* Back to the landing, when the gate was opened from it. */
.lback{position:absolute;top:calc(var(--safe-t) + 10px);left:10px}

/* ---------- the landing ---------- */
/* An overlay like the gate, one step under it: either corner button opens
   the gate on top, and the gate's back arrow uncovers this again.

   Every moving part reads one number, --p, how far through its scene you
   have scrolled (set by landing.js), and derives its own stretch of it with
   clamp(). So each part's initial state is also what shows before its scene
   pins, and each one has a finished state that the reduced-motion page can
   simply show. */
#v-land{
  position:fixed;inset:0;z-index:39;background:var(--void);display:none;
  overflow-y:auto;overscroll-behavior:contain;outline:none;
}
#v-land.on{display:block}

.ldbar{
  position:fixed;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-t) + 12px) var(--gutter) 12px;
  transition:background .2s,box-shadow .2s;
}
#v-land.stuck .ldbar{
  background:var(--chrome);box-shadow:0 1px 0 var(--line-soft);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* The big mark is on screen at the top; the bar only takes it over once
   the opening scene has gone. */
.ldbrand{
  display:flex;align-items:center;gap:9px;min-width:0;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s var(--ease);
}
#v-land.past .ldbrand{opacity:1;transform:none}
.ldbar .mark{width:30px;height:30px;border-radius:8px}
.ldbrand .wordmark{font-size:19px}
.ldprog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ac);
  transform-origin:0 50%;transform:scaleX(var(--t,0));
}

.ldin{position:relative}
/* Parallax proper: glyphs spread down the whole page, each held back by its
   own fraction of the scroll, so the near ones pass faster than the far. */
.ldbg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ldbg i{
  position:absolute;left:var(--x);top:var(--top);
  font-family:var(--display);font-style:normal;font-weight:700;font-size:var(--sz);line-height:1;
  color:var(--ac-soft);opacity:.07;
  transform:translateY(calc(var(--y,0) * var(--k) * 1px));will-change:transform;
}

.lds{position:relative;height:calc(var(--len,220) * 1vh);height:calc(var(--len,220) * 1svh)}
.ldstick{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:calc(var(--safe-t) + 74px) var(--gutter) calc(var(--safe-b) + 24px);
}
.ldtext{
  --e:clamp(0, var(--p,0) * 6, 1);
  width:100%;max-width:440px;margin:0 auto;
  opacity:calc(.35 + var(--e) * .65);transform:translateY(calc((1 - var(--e)) * 22px));
}
.ldkick{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-soft);margin:0 0 10px}
.ldtext h2{font-family:var(--display);font-weight:700;font-size:27px;line-height:1.15;letter-spacing:-.01em;margin:0 0 12px}
.ldtext p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.ldvis{position:relative;width:100%;max-width:380px;margin:0 auto}

/* Two words in one place, crossing over as --w goes from 0 to 1. */
.ldswap{display:inline-grid}
.ldswap>*{grid-area:1/1}
.ldswap .a{opacity:calc(1 - var(--w,0))}
.ldswap .b{opacity:var(--w,0)}

/* opening */
.ldhero .ldstick{align-items:center;text-align:center;gap:0}
.ldglow{
  position:absolute;left:50%;top:50%;width:120vmin;height:120vmin;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--ac-rgb),.2), transparent 62%);
  transform:translate(-50%,-50%) scale(calc(.7 + var(--p,0) * .8));opacity:calc(1 - var(--p,0) * .8);
}
.ldmark{
  width:92px;height:92px;border-radius:26px;position:relative;
  transform:translateY(calc(var(--p,0) * -150px)) scale(calc(1 + var(--p,0) * .3));
  opacity:calc(1 - var(--p,0) * .75);
}
.ldwm{
  font-size:56px;margin:22px 0 0;position:relative;
  transform:translateY(calc(var(--p,0) * -90px));opacity:calc(1 - var(--p,0) * .75);
}
.ldlede{
  font-family:var(--read);font-size:17px;line-height:1.55;color:var(--muted);max-width:330px;margin:14px auto 0;position:relative;
  transform:translateY(calc(var(--p,0) * -40px));opacity:calc(1 - var(--p,0) * .9);
}
.ldcue{
  margin-top:52px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:calc(1 - var(--p,0) * 5);
}
.ldcue::after{
  content:'';width:1px;height:34px;background:linear-gradient(var(--faint),transparent);
  transform-origin:50% 0;animation:ldcue 1.8s var(--ease) infinite;
}
@keyframes ldcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* the Notebook: a chapter types itself, then saves with no connection */
.ldpage{
  --w:clamp(0, (var(--p,0) - .8) * 10, 1);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.ldpghead{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:14px}
.ldchip{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.ldsaved{display:inline-flex;align-items:center;gap:7px}
.ldsaved i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ldsaved .ldswap{justify-items:end}
.ldpgt{font-family:var(--display);font-size:20px;font-weight:700;margin:0 0 8px}
.ldlines{overflow:hidden}
.ldlines span{
  --l:clamp(0, (var(--p,0) - .06) * 7 - var(--i), 1);
  display:block;font-family:var(--read);font-size:15px;line-height:1.75;white-space:nowrap;
  clip-path:inset(0 calc((1 - var(--l)) * 100%) 0 0);
}

/* publishing: the book crosses from the Notebook to Home */
.ldpub{
  --m:clamp(0, (var(--p,0) - .2) / .55, 1);
  --w:clamp(0, (var(--m) - .85) * 7, 1);
  container-type:inline-size;aspect-ratio:10/7.4;
}
.ldtray{
  position:absolute;bottom:0;width:46%;height:100%;border-radius:var(--r);
  border:1px dashed var(--line);background:var(--surface);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;
}
.ldtray.l{left:0}
.ldtray.r{
  right:0;border-style:solid;
  box-shadow:0 0 0 1px rgba(var(--ac-rgb), calc(var(--w) * .6)), 0 0 40px rgba(var(--ac-rgb), calc(var(--w) * .22));
}
.ldtray b{font-size:13px}
.ldtray small{font-size:11px;color:var(--faint)}
.ldbook{
  position:absolute;top:7%;left:9cqw;width:28cqw;display:flex;flex-direction:column;align-items:center;
  transform:
    translate(calc(var(--m) * 54cqw), calc(var(--m) * (1 - var(--m)) * -24cqw))
    rotate(calc(var(--m) * (1 - var(--m)) * 24deg));
}
.ldcov{
  position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:6px;overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.ldstate{margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;justify-items:center}
.ldstate .a{color:var(--faint)}
.ldstate .b{color:var(--ac-soft)}

/* readers: counts arrive in the margin, then a note, then a vote */
.ldread{
  --n:clamp(0, (var(--p,0) - .55) * 7, 1);
  --w:clamp(0, (var(--p,0) - .8) * 10, 1);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 46px 16px 20px;box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.ldread p{position:relative;font-family:var(--read);font-size:14.5px;line-height:1.65;margin:0 0 10px;border-radius:6px}
.ldread p.hl{background:rgba(var(--ac-rgb), calc(var(--n) * .1));box-shadow:0 0 0 4px rgba(var(--ac-rgb), calc(var(--n) * .1))}
.ldbub{
  --c:clamp(0, (var(--p,0) - .12 - var(--i) * .13) * 8, 1);
  position:absolute;right:-38px;top:2px;min-width:26px;height:20px;padding:0 7px;
  border-radius:10px 10px 10px 3px;background:var(--ac-dim);color:var(--ac-soft);
  font-size:11px;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center;
  opacity:var(--c);transform:scale(calc(.4 + var(--c) * .6));transform-origin:0 100%;
}
.ldnote{
  padding:9px 12px;border-left:2px solid var(--ac);background:var(--surface-2);border-radius:0 10px 10px 0;
  font-family:var(--read);font-size:13.5px;line-height:1.5;
  opacity:var(--n);transform:translateY(calc((1 - var(--n)) * 14px));
}
.ldnote b{display:block;font-family:var(--ui);font-size:12px;color:var(--ac-soft)}
.ldvote{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ldvote svg{
  fill:rgba(var(--ac-rgb), var(--w));stroke:var(--ac-soft);stroke-width:1.6;stroke-linejoin:round;
  transform:scale(calc(1 + var(--w) * (1 - var(--w)) * 1.2));
}

/* reader-insert: the reader answers, and the blanks become their answers */
.ldins{
  --f:clamp(0, (var(--p,0) - .1) * 6, 1);
  --w:clamp(0, (var(--p,0) - .45) * 7, 1);
  text-align:center;
}
.ldfill{
  display:inline-flex;gap:8px;padding:8px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  opacity:var(--f);transform:translateY(calc((1 - var(--f)) * 16px));
}
.ldfill span{display:flex;flex-direction:column;align-items:flex-start;padding:7px 12px;border-radius:10px;background:var(--surface-2);min-width:112px}
.ldfill small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ldfill b{font-size:15px}
.ldsent{font-family:var(--read);font-size:22px;line-height:1.55;margin:26px 0 0}
.ldblank{justify-items:center;vertical-align:baseline}
.ldblank .a{
  color:var(--ac-soft);background:var(--ac-dim);padding:0 5px;border-radius:5px;
  font-family:var(--ui);font-weight:700;font-size:.8em;align-self:center;
}
.ldblank .b{box-shadow:inset 0 -2px 0 rgba(var(--ac-rgb),.55)}

/* finding stories: tags at three depths, and a ranking in the middle */
.ldtags{
  --q:clamp(0, (var(--p,0) - .45) * 7, 1);
  height:clamp(240px, 40svh, 380px);overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent, #000 16%, #000 84%, transparent);
          mask-image:linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
/* The tags step back once the ranking comes forward, or the card reads as
   one more chip lying on top of the others. */
.ldlayer{
  position:absolute;inset:0;opacity:calc(1 - var(--q) * .6);
  transform:translateY(calc((.5 - var(--p,0)) * var(--d) * 260px));
}
.ldlayer span{
  position:absolute;padding:6px 12px;border-radius:999px;white-space:nowrap;
  font-size:13px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
}
.ldlayer.far span{opacity:.35;font-size:11.5px}
.ldlayer.mid span{opacity:.7}
.ldlayer.near span{border-color:rgba(var(--ac-rgb),.35)}
/* The tag being ranked turns into the card rather than lying under it. */
.ldlayer .ranked{opacity:calc(1 - var(--q) * 1.5)}
.ldrank{
  position:absolute;left:50%;top:50%;z-index:1;text-align:center;
  padding:14px 24px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  opacity:var(--q);transform:translate(-50%,-50%) scale(calc(.85 + var(--q) * .15));
}
.ldrank b{display:block;font-family:var(--display);font-size:34px;line-height:1.1;color:var(--ac-soft)}
.ldrank span{font-size:12.5px;color:var(--muted)}

/* the way in */
.ldend{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:96px var(--gutter) calc(var(--safe-b) + 40px);
}
.ldend h2{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.15;margin:22px 0 10px}
.ldend>p{color:var(--muted);max-width:380px;margin:0 auto 26px;line-height:1.6}
.ldcta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}
.ldend .ldfoot{margin:44px 0 0;font-size:12px;color:var(--faint)}

[data-layout="desk"] .ldbar{padding-left:32px;padding-right:32px}
[data-layout="desk"] .ldstick{
  flex-direction:row;align-items:center;justify-content:center;gap:clamp(40px,6vw,96px);
  padding-left:48px;padding-right:48px;
}
[data-layout="desk"] .ldhero .ldstick{flex-direction:column}
[data-layout="desk"] .ldtext{margin:0;flex:0 1 420px}
[data-layout="desk"] .ldvis{margin:0;flex:0 1 480px;max-width:480px}
[data-layout="desk"] .lds.flip .ldtext{order:2}
[data-layout="desk"] .ldtext h2{font-size:40px}
[data-layout="desk"] .ldtext p{font-size:16px}
[data-layout="desk"] .ldwm{font-size:84px}
[data-layout="desk"] .ldlede{font-size:20px;max-width:440px}
[data-layout="desk"] .ldend h2{font-size:48px}
[data-layout="desk"] .ldcta{flex-direction:row;justify-content:center;max-width:none}
@media (max-width:760px){
  [data-layout="desk"] .ldstick{flex-direction:column}
  [data-layout="desk"] .lds.flip .ldtext{order:0}
}

/* Motion turned down: nothing pins, landing.js puts every scene at its end,
   and it reads as an ordinary page. */
@media (prefers-reduced-motion:reduce){
  .lds{height:auto}
  .ldstick{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .ldbg{display:none}
}

/* ---------- the computer layout ----------
   Phone or computer is decided by what the device says it is (js/layout.js
   sets data-layout on <html>), not by the width of the window, so a phone
   asking for the desktop site gets this and a computer's narrow window
   stays a computer. The phone layout is everything above, at any width.

   The tabs move from the bottom bar into the header, sheets become dialogs
   in the middle of the window, and the writing column keeps a measure. */
.tnav{display:none}
[data-layout="desk"] #sheet .grab{display:none}
[data-layout="desk"] #scrim{align-items:center;padding:24px}
[data-layout="desk"] #sheet{
  max-width:560px;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px 24px;animation:pop .18s var(--ease) both;
}
/* A line of prose as wide as a monitor is hard to follow and harder to
   write. The reader already stops at 720px; the editor stops beside it. */
[data-layout="desk"] .escroll > *{max-width:760px;margin-left:auto;margin-right:auto}
[data-layout="desk"] .etitle{display:block}   /* an input is inline, and auto margins skip it */
/* Something to answer the mouse, which a thumb never needed. */
[data-layout="desk"] .tile .art{transition:transform .2s var(--ease),box-shadow .2s}
[data-layout="desk"] .tile:hover .art{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.45)}
[data-layout="desk"] .ch,[data-layout="desk"] .resume{transition:border-color .15s}
[data-layout="desk"] .ch:hover,[data-layout="desk"] .resume:hover{border-color:var(--line)}

/* Below 720px even a computer's window has no room for tabs in the header,
   so the bar along the bottom stays. */
@media (min-width:720px){
  [data-layout="desk"]{--nav-h:0px}
  [data-layout="desk"] #nav{display:none}
  [data-layout="desk"] .top .titles{flex:0 1 auto;max-width:340px}
  [data-layout="desk"] .tnav{display:flex;flex:1;min-width:0;gap:2px;margin-left:14px}
  .tnav button{
    padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);
    white-space:nowrap;transition:background .15s,color .15s;
  }
  .tnav button:hover{color:var(--text);background:var(--press)}
  .tnav button.on{color:var(--text);background:var(--surface-2)}

  /* The story's card: cover, standing, and the buttons down the right, the
     way a list of your stories on a writing site puts them. */
  [data-layout="desk"] .shero{
    grid-template-columns:120px minmax(0,1fr) auto;grid-template-areas:"art meta acts" "art hint acts";
    grid-template-rows:auto 1fr;gap:0 22px;padding:18px;
  }
  [data-layout="desk"] .shmeta{padding-top:6px}
  [data-layout="desk"] .shacts{flex-direction:column;min-width:200px;margin-top:0}
  [data-layout="desk"] .shacts .btn{flex:none}

  /* Everything else about the story is one panel showing one section at a
     time, not every section down a page that scrolls forever. */
  [data-layout="desk"] #v-story .stabs{display:flex}
  [data-layout="desk"] .smain{
    margin-top:16px;padding:14px 22px 4px;
    background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  }
  [data-layout="desk"] #v-story .smain > .block{padding:4px 0 18px;border-bottom:0}
  [data-layout="desk"] #v-story .smain > .block:not(.on){display:none}
  /* The switch already names the section. */
  [data-layout="desk"] .smain > .block > h2,[data-layout="desk"] .smain .blockhead h2{display:none}
  /* A number of words does not need the panel's whole width. */
  [data-layout="desk"] .sgoal{max-width:240px}

}

/* The room a computer screen has: the header runs edge to edge, the mark at
   the far left and the avatar at the far right, and every page fills the
   width - a page that stopped at 880px left a third of the screen empty.
   What fills it is more columns, not longer lines: shelves of covers, cards
   side by side. Only prose keeps a measure, in the reader and the editor. */
@media (min-width:960px){
  /* Every page in one centred frame, the same width everywhere, with the
     same margin on both sides - the symmetry a page that ran to the right
     edge never had. Banners and header backgrounds still run the width of
     the window; the content inside them lines up with the frame. */
  [data-layout="desk"]{--gutter:40px}
  [data-layout="desk"] .view{max-width:var(--page)}
  [data-layout="desk"] .shelf{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:28px 22px}
  [data-layout="desk"] .sechead{font-size:24px}
  /* Settings in its three groups side by side - how it looks, how it reads,
     your account and data - which come out close to the same height. Two
     across on a smaller screen, where a third of it is too narrow for the
     colour wheel. */
  [data-layout="desk"] .setcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
  [data-layout="desk"] .setcol > .card:first-child{margin-top:0}
  [data-layout="desk"] .setcols{padding-top:16px}
  /* The book down the left, as one card: the cover, where it stands, the
     buttons that change that, the cover's images, and Read. The panel
     beside it takes the rest of the width. */
  [data-layout="desk"] .scols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0 28px;align-items:start;margin-top:4px}
  [data-layout="desk"] .sside{
    padding:16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  }
  [data-layout="desk"] .shero{
    grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "meta" "acts" "hint";grid-template-rows:none;
    margin:0;padding:0;background:none;border:0;border-radius:0;
  }
  [data-layout="desk"] .shmeta{padding-top:14px}
  [data-layout="desk"] .shacts{min-width:0;margin-top:14px}
  [data-layout="desk"] #v-story .scover{margin-top:16px;padding:14px 0 0;border-top:1px solid var(--line-soft);border-bottom:0}
  [data-layout="desk"] .scover h2{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
  [data-layout="desk"] .scover > .sub{display:none}
  [data-layout="desk"] .scover .thumbs{margin-top:10px}
  [data-layout="desk"] #v-story .sread{display:inline-flex;margin-top:14px;padding:11px 18px}
  [data-layout="desk"] #v-story .sreadrow{display:none}
  [data-layout="desk"] .smain{margin-top:0}
  [data-layout="desk"] .rrow{padding:10px var(--gutter)}
  /* The reader: the text keeps its 720px measure in the middle of the page
     and who wrote it hangs in a column to its left, as on a writing site; a
     matching empty column on the right keeps the text centred under its
     title. */
  [data-layout="desk"] .rbody{max-width:1240px}
  /* The bubble sits in the gap beside the 720px text, which stays centred
     under its title. */
  [data-layout="desk"] #v-reader{--cmgut:40px}
  [data-layout="desk"] .rcols{display:grid;grid-template-columns:minmax(0,200px) minmax(0,720px) minmax(0,200px);gap:0 44px;justify-content:center;align-items:start}
  [data-layout="desk"] .rauthor{position:sticky;top:24px;padding-top:6px}
  [data-layout="desk"] .rauth{margin:0 auto}
  [data-layout="desk"] .face.rauthor{width:88px;height:88px;font-size:28px}
  [data-layout="desk"] .rhead{margin-bottom:34px}
  [data-layout="desk"] #rBanner{max-width:960px;margin:0 auto}
}

@media (min-width:1280px){
  [data-layout="desk"] .setcols{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- rating, warnings, tags (the writer's side) ---------- */
#sRatingField.want .seg{box-shadow:0 0 0 2px rgba(var(--ac-rgb),.65)}
.warns{display:flex;flex-wrap:wrap;gap:6px}
.wchip{padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.wchip.on{background:rgba(229,52,43,.12);border-color:rgba(229,52,43,.5);color:var(--danger)}
/* The same chips for pronouns, where on is a choice rather than a warning. */
.wchip.pchip.on{background:var(--ac-dim);border-color:rgba(var(--ac-rgb),.55);color:var(--ac-soft)}
.tagsug{
  display:flex;flex-direction:column;margin-top:6px;padding:4px;max-height:290px;overflow:auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.tagsug button{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;font-size:14px;text-align:left}
.tagsug button.on,.tagsug button:hover{background:var(--surface-3)}
.tagsug small{flex:none;font-size:12px;color:var(--faint)}

/* Teen and Mature, on the cover itself. */
.rbadge{
  position:absolute;top:7px;left:7px;z-index:1;padding:2px 7px;border-radius:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(0,0,0,.62);
}
.rbadge.mature{background:rgba(214,40,32,.9)}
.bkmini .rbadge{display:none}
/* The Locuust Original tag (originals.js puts it in a cover's markup): a
   strip along the foot of the cover - the mark in its tile, the same one the
   headers use, so it follows the colour the writer picked - then the word.
   The cover's own corners clip it. */
.orig{
  display:flex;align-items:center;gap:6px;position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:26px;padding:0 7px;background:rgba(0,0,0,.78);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;
}
.orig i{
  position:relative;flex:none;display:block;width:18px;height:18px;border-radius:5px;overflow:hidden;
  background:var(--mark-bg);box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
.orig i::after{
  content:'';position:absolute;inset:0;background:var(--logo);
  -webkit-mask:url(logo.png) center/cover no-repeat;mask:url(logo.png) center/cover no-repeat;
  filter:drop-shadow(0 0 2px var(--logo-glow));
}
.tgrow .orig,.pstory .orig{height:15px;padding:0 4px;gap:3px;font-size:5.5px;letter-spacing:.1em}
.tgrow .orig i,.pstory .orig i{width:10px;height:10px;border-radius:3px}
#bkArt .orig{height:32px;padding:0 10px;gap:8px;font-size:11px}
#bkArt .orig i{width:22px;height:22px;border-radius:6px}
.bkmini .orig,#shelf .tile .art .orig,#readingList .tile .art .orig{display:none}

/* ---------- a published story, before chapter one ---------- */
.bkhero{
  display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"art meta" "acts acts" "blurb blurb";
  gap:0 16px;align-items:start;margin:6px 0 20px;
}
.bkhero .art{grid-area:art;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--surface-2);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.bkhero .art img{width:100%;height:100%;object-fit:cover;display:block}
.bkmeta{grid-area:meta;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:2px}
.bktitle{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.15;word-break:break-word}
.bkby{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-size:14px;font-weight:600;color:var(--text)}
.bkby:hover span:last-child{color:var(--ac-soft)}
.bkav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);font-size:11px;font-weight:700;color:var(--muted);position:relative;overflow:hidden;flex:none}
.bkav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Anyone, anywhere a person is listed: their photo, or initials until it
   comes (faces.js). .chav sizes it for a row, .sm for a comment. */
.face{
  width:32px;height:32px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-3);
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.02em;
}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face.sm{width:22px;height:22px;font-size:9px}
.bkstats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.bkstats span{display:inline-flex;align-items:center;gap:5px}
.bkstats b{color:var(--text);font-weight:600}
.bkstats small{display:none;font-size:13px}
.bkacts{grid-area:acts;display:flex;align-items:center;gap:10px;margin-top:16px}
.bkacts .btn{flex:1}
.bkblurb{grid-area:blurb;margin-top:18px}
.bkblurb:empty{display:none}
.bksave{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--text);transition:border-color .15s,background .15s}
.bksave:hover{border-color:var(--muted)}
.bksave.on{color:var(--ac-soft);border-color:rgba(var(--ac-rgb),.7);background:rgba(var(--ac-rgb),.12)}
.bkmain .tabs{margin-bottom:18px}
.bkline{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--muted)}
.bkline svg{flex:none;margin-top:2px;color:var(--faint)}
.bkline b{color:var(--text);font-weight:600}
.bkline.warn svg{color:var(--danger)}
.dot{display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:var(--faint);vertical-align:middle}
.bktags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px}
.bktag{padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text)}
.bktag:hover{border-color:rgba(var(--ac-rgb),.55)}
.bkdesc{font-family:var(--read);font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* A chapter's own warnings: beside it in the list of parts, on the
   writer's chapter row, and before it starts in the reader. */
.partwarn,.chwarn{display:inline-flex;align-items:center;gap:5px;color:var(--danger)}
.partwarn{margin-top:4px;font-size:12px;font-weight:600}
.rwarn{
  display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 14px;border-radius:var(--r);
  background:rgba(229,52,43,.1);border:1px solid rgba(229,52,43,.32);font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--text);
}
.rwarn svg{flex:none;margin-top:2px;color:var(--danger)}
/* A part's Spotify player (spotify.js): the reader's above the text, the
   editor's above the draft, both the width of the column. */
.rmusic{margin:18px 0 22px}
.emusic{margin-bottom:22px}
.rmusic iframe,.emusic iframe{display:block;width:100%;border:0;border-radius:12px;background:rgba(127,127,127,.12)}
/* A list's frame is as tall as the window allows, up to a point: Spotify draws
   more tracks into a taller frame. A song stays at 352, its large layout. */
.rmusic iframe[data-kind="playlist"],.rmusic iframe[data-kind="album"]{height:clamp(352px,60vh,560px)}
.emusic iframe[data-kind="playlist"],.emusic iframe[data-kind="album"]{height:clamp(352px,45vh,480px)}
.musicoff{margin:0;padding:14px;border-radius:12px;background:rgba(127,127,127,.12);color:inherit;opacity:.7;font-family:var(--ui);font-size:13px;text-align:center}
.rwarn b{margin-right:4px}
.bkrank{
  display:flex;align-items:center;gap:10px;width:100%;margin-top:18px;padding:12px 14px;text-align:left;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
}
.bkrank svg:first-child{color:var(--ac-soft)}
.bkrank b{font-family:var(--display);font-size:18px}
.bkrank span{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkrank small{flex:none;font-size:12px;color:var(--faint)}
.bksince{margin-top:16px}
.bkside:empty{display:none}
.bkside{margin-top:24px}
.bkmore{display:flex;flex-direction:column;gap:10px}
.bkmini{display:flex;align-items:center;gap:12px;padding:8px;text-align:left;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r)}
.bkmini:hover{border-color:var(--line)}
.bkmini .art{width:46px;flex:none;aspect-ratio:2/3;border-radius:7px;overflow:hidden;position:relative;background:var(--surface-2)}
.bkmini .art img{width:100%;height:100%;object-fit:cover;display:block}
.bkmini .body{min-width:0;display:flex;flex-direction:column;gap:2px}
.bkmini b{font-family:var(--display);font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkmini small{font-size:12px;color:var(--muted)}
@media (min-width:720px){
  /* Cover on the left at the size a shelf deserves, the particulars beside
     it and the way in at its foot; the summary below, with the writer's
     other stories alongside it. */
  [data-layout="desk"] .bkhero{
    grid-template-columns:220px minmax(0,1fr);grid-template-areas:"art meta" "art acts" "art blurb";grid-template-rows:auto auto 1fr;
    gap:0 30px;margin:10px 0 30px;
  }
  [data-layout="desk"] .bktitle{font-size:32px}
  [data-layout="desk"] .bkmeta{gap:14px;padding-top:6px}
  [data-layout="desk"] .bkstats{font-size:14px;gap:8px 22px}
  [data-layout="desk"] .bkstats small{display:inline}
  /* The way in straight under the particulars, at a button's width, and
     the blurb under it - not pinned to the foot of the cover, which left a
     hole the height of the cover whenever the title was short. */
  [data-layout="desk"] .bkacts{max-width:400px;margin-top:22px}
  [data-layout="desk"] .bkblurb{max-width:760px;margin-top:22px}
}
@media (min-width:960px){
  [data-layout="desk"] .bkcols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 44px;align-items:start}
  /* Beside the story from the top, as a card, the way a writing site
     keeps "more from this writer" in view while you read the blurb. */
  [data-layout="desk"] .bkside{
    margin-top:10px;padding:20px;position:sticky;top:96px;
    background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  }
  [data-layout="desk"] .bkside .sechead{font-size:20px;margin-top:0}
}

.bkallranks{display:block;margin-top:8px}

/* ---------- one tag ---------- */
.tgsub{margin:0 0 14px}
.tglist{display:flex;flex-direction:column;gap:10px}
.tgrow{
  display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px;text-align:left;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
}
.tgrow:hover{border-color:var(--line)}
.tgplace{flex:none;min-width:38px;padding-top:4px;font-family:var(--display);font-size:18px;font-weight:700;color:var(--ac-soft);text-align:center}
.tgrow .art{width:64px;flex:none;aspect-ratio:2/3;border-radius:8px;overflow:hidden;position:relative;background:var(--surface-2)}
.tgrow .art img{width:100%;height:100%;object-fit:cover;display:block}
.tgrow .rbadge{top:4px;left:4px;padding:1px 5px;font-size:9px}
.tgrow .body{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.tgrow b{font-family:var(--display);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgrow small{font-size:12.5px;color:var(--muted)}
.tgnums{font-size:12px;color:var(--faint)}
.tgdesc{font-size:13px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgmore{justify-content:center;margin:16px 0 8px}
/* Rows side by side, as many as fit, rather than one long column. */
@media (min-width:960px){
  [data-layout="desk"] .tglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:12px}
  /* "Looking..." and "Nothing here" are one message, not a story: across the whole width. */
  [data-layout="desk"] .tglist > .nothing{grid-column:1/-1}
}

/* ---------- the editor: saved, goal, notes, focus ---------- */
.esavedat{flex:none;font-size:11px;color:var(--faint);white-space:nowrap}
#eNotes.on{color:var(--ac-soft);background:var(--surface-2)}
.egoal{flex:none;height:2px;background:var(--line-soft)}
.egoal i{display:block;height:100%;width:0;background:var(--ac);transition:width .3s var(--ease)}
.egoal.done i{background:var(--ok)}
.edrawer{
  position:absolute;right:0;bottom:0;top:calc(var(--safe-t) + 54px);z-index:32;width:360px;
  display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line-soft);
}
.edhead{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 6px 18px}
.edhead b{font-family:var(--display);font-size:17px;font-weight:600}
.edbody{flex:1;overflow:auto;padding:4px 18px 24px}
.ednt{font-family:var(--display);font-size:18px;margin:10px 0 0}
.ednote{margin:10px 0 16px;font-size:15px;line-height:1.6}
.ednote p{margin:0 0 .9em}
.ednotes .ednote{max-height:55vh;overflow:auto}
@media (min-width:960px){
  [data-layout="desk"] #v-editor.drawer .escroll{margin-right:360px}
  [data-layout="desk"] #v-editor.drawer .efoot{right:360px}
  [data-layout="desk"] #v-editor.drawer.focus .escroll{margin-right:0}
}
@media (max-width:959px){ .edrawer{display:none !important} }
/* Focus: the bars fade rather than disappear, so the page does not jump. */
.ehead,.egoal,.edrawer{transition:opacity .25s var(--ease)}
#v-editor.focus .ehead,#v-editor.focus .egoal,#v-editor.focus .edrawer{opacity:0;pointer-events:none}
#v-editor.focus .efoot{transform:translateY(110%);pointer-events:none}
.efocusx{
  position:absolute;z-index:36;top:calc(var(--safe-t) + 10px);right:14px;padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  opacity:.3;transition:opacity .2s;
}
.efocusx:hover,.efocusx:focus-visible{opacity:1}
/* Typewriter: room below the last line, so even it can sit mid-page. */
#escroll.tw{padding-bottom:55vh}

/* ---------- the reader: pages, votes ---------- */
/* The reader's own palette, whatever the app's is. */
#v-reader[data-page="light"]{
  --void:#FAF9F6;--surface:#FFFFFF;--surface-2:#F0EFEA;--surface-3:#E4E2DA;--line:#DAD7CE;--line-soft:#E9E6DE;
  --text:#1C1B19;--muted:#5F5B53;--faint:#8C877C;--ac-soft:#7C3AED;--press:rgba(0,0,0,.05);--mark-bg:#FFFFFF;
}
#v-reader[data-page="sepia"]{
  --void:#F4ECD8;--surface:#FBF4E4;--surface-2:#EDE2C8;--surface-3:#E2D5B6;--line:#D8C9A6;--line-soft:#E6DABE;
  --text:#3B2F20;--muted:#6E5E47;--faint:#998669;--ac-soft:#8A4B12;--ac-dim:rgba(138,75,18,.14);--press:rgba(0,0,0,.05);--mark-bg:#FBF4E4;
}
#v-reader[data-page="dark"]{
  --void:#08090F;--surface:#12151F;--surface-2:#1A1E2B;--surface-3:#232838;--line:#262B3A;--line-soft:#1B1F2C;
  --text:#E8E9F0;--muted:#8A90A6;--faint:#5C627A;--ac-soft:#D8B4FE;--press:rgba(255,255,255,.06);--mark-bg:#000;
}
#v-reader[data-page="black"]{
  --void:#000000;--surface:#0B0B0B;--surface-2:#141414;--surface-3:#1E1E1E;--line:#262626;--line-soft:#171717;
  --text:#D8D8D8;--muted:#8A8A8A;--faint:#5E5E5E;--ac-soft:#D8B4FE;--press:rgba(255,255,255,.06);--mark-bg:#000;
}
#v-reader{color:var(--text)}
.pages{display:flex;gap:8px}
.pg{flex:1;height:44px;border-radius:10px;border:1px solid var(--line);font-size:13px;font-weight:600}
.pg.light{background:#FAF9F6;color:#1C1B19}
.pg.sepia{background:#F4ECD8;color:#3B2F20}
.pg.dark{background:#12151F;color:#E8E9F0}
.pg.black{background:#000;color:#D8D8D8}
.pg.on{box-shadow:0 0 0 2px rgb(var(--ac-rgb))}
.rendacts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.rendacts:empty{display:none}
.rvote.on{color:var(--ac-soft);border-color:rgba(var(--ac-rgb),.55)}

/* ---------- comments on paragraphs ---------- */
/* Room in the margin for each paragraph's bubble. Each paragraph's box
   reaches across that margin and down through the gap under it (padding,
   not margin), so the pointer never leaves the paragraph on its way to the
   bubble: hovering anywhere on its lines, beside it or below it shows the
   +. With the bubble outside the box, crossing the 10px between them hid
   it before it could be clicked. */
#rProse > p.para{position:relative;margin:0 calc(-1 * var(--cmgut)) 0 0;padding:0 var(--cmgut) 1.15em 0}
#rProse.tight > p.para{padding-bottom:0}
.pc{
  position:absolute;right:3px;top:.1em;min-width:24px;height:22px;padding:0 6px;border-radius:11px;
  font:600 11.5px/20px var(--ui);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
}
.pc:hover{color:var(--text);border-color:var(--muted)}
.pc.zero{opacity:0;pointer-events:none;transition:opacity .15s}
#rProse > p.para:hover .pc.zero,#rProse > p.para.show .pc.zero{opacity:1;pointer-events:auto}
.cq{
  margin:4px 0 14px;padding:10px 14px;max-height:30vh;overflow:auto;border-left:3px solid rgba(var(--ac-rgb),.6);
  border-radius:0 10px 10px 0;background:var(--surface-2);font-family:var(--read);font-size:14.5px;line-height:1.55;
}
.cmts{display:flex;flex-direction:column;margin-bottom:10px}
.cthread{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.cthread:last-child{border-bottom:0}
.cqs{margin:0 0 2px;font-family:var(--read);font-size:12.5px;font-style:italic;color:var(--faint)}
.cacts{display:flex;gap:14px;margin-top:4px}
.creps{margin:4px 0 0 14px;padding-left:12px;border-left:2px solid var(--line)}
.cwriter{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ac-soft);background:var(--ac-dim);padding:1px 6px;border-radius:5px}
.cbox{position:sticky;bottom:-20px;padding:10px 0 4px;background:var(--surface);border-top:1px solid var(--line-soft)}
.cto{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.cgo{justify-content:flex-end;margin-top:8px}

/* The comments panel on a computer: down the right edge, full height, the
   page dimmed beside it. */
#cmBack{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
#cmBack.on{opacity:1;pointer-events:auto}
#cmDrawer{
  position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(560px,92vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.4);
  transform:translateX(100%);visibility:hidden;transition:transform .26s var(--ease),visibility 0s .26s;
}
#cmDrawer.on{transform:none;visibility:visible;transition:transform .26s var(--ease)}
.cmdhead{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:12px 60px;border-bottom:1px solid var(--line-soft)}
.cmdhead h3{font-family:var(--ui);font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cmdX{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text)}
#cmDrawer .cmsheet{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cmdquote{padding:18px 24px;background:var(--surface-2);font-family:var(--read);font-size:15.5px;line-height:1.6;max-height:34vh;overflow-y:auto;white-space:pre-wrap}
.cmdbox{padding:16px 24px 4px}
.cmdbox .cto{margin:0 0 8px}
.cmdinput{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 18px;border:1px solid var(--line);border-radius:26px;background:var(--surface-2);transition:border-color .15s}
.cmdinput:focus-within{border-color:rgba(var(--ac-rgb),.55)}
.cmdinput textarea{flex:1;min-height:0;max-height:180px;padding:9px 0;resize:none;overflow-y:auto;font-size:14.5px;line-height:1.45}
.cmdsend{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ac-deep);color:#fff;transition:opacity .15s}
.cmdsend:disabled{opacity:.4}
#cmDrawer .cmts{padding:6px 24px 28px;margin:0}
#cmDrawer .cmt{padding:12px 0}
#cmDrawer .face.sm{width:30px;height:30px;font-size:11px}
#cmDrawer .cmt p{margin-top:6px;font-size:14.5px;line-height:1.55}
.cmdempty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 0 24px;color:var(--faint)}
.cmdempty b{font-size:14.5px;color:var(--text)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- a writer's page ----------
   The way a writing site presents somebody: their banner across the whole
   window, darkened enough that white words read on any picture, with the
   picture, name, handle and counts centred over it. A bar of tabs under it
   carries what you can do here at its far end. About is two columns: who
   they are down the side, their stories beside it. A phone stacks the same
   things, with the buttons centred under the banner. */
.phero{
  position:relative;isolation:isolate;
  margin:0 calc(50% - 50vw);text-align:center;
}
/* The banner is 3:1 on every screen - the shape it is cropped to and kept
   at (1920x640) - so the same part of the picture shows everywhere. On a
   phone that is a strip too short to hold the face, name and counts, so
   they sit under it, the face overlapping its edge; a computer puts them
   over it (below). */
.pbanner{
  position:relative;display:block;width:100%;aspect-ratio:3/1;cursor:default;overflow:hidden;
  background:linear-gradient(120deg,rgba(var(--ac-deep-rgb),.9),rgba(var(--ac-rgb),.45) 55%,#14101f);
}
.pbanner:not(:disabled){cursor:pointer}
.pbanner img{width:100%;height:100%;object-fit:cover;display:block}
.pbanner::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.25))}
.phero-in{display:flex;flex-direction:column;align-items:center;max-width:100%;pointer-events:none;
  position:relative;margin-top:-52px;padding:0 16px 22px}
.phero-in > *{pointer-events:auto}
.pavatar{
  position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:12px;
  background:var(--surface-3);border:4px solid var(--void);box-shadow:0 6px 18px rgba(0,0,0,.3);
  display:grid;place-items:center;font-family:var(--display);font-size:34px;font-weight:700;color:var(--ac-soft);
}
.pavatar:disabled{cursor:default}
.pavatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pname{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.15;color:var(--text);max-width:100%;overflow-wrap:anywhere}
.pnamerow{display:flex;align-items:center;justify-content:center;gap:9px;max-width:100%}
/* Locuust Officials. The seal sits on the banner, which is darkened, so its
   glow is the same in every theme; the pill sits on a card, so it is not. */
.pseal{flex:none;display:flex;width:26px;height:26px;filter:drop-shadow(0 0 7px rgba(245,197,66,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.pseal[hidden]{display:none}
.pseal svg{width:100%;height:100%}
.pbadge.official{
  --gold-ink:#F7D774;--gold-line:rgba(245,197,66,.45);--gold-glow:rgba(245,197,66,.22);--gold-wash:rgba(245,197,66,.10);
  position:relative;overflow:hidden;color:var(--gold-ink);border-color:var(--gold-line);
  background:linear-gradient(135deg,var(--gold-wash),rgba(245,197,66,.02) 60%,var(--gold-wash));
  box-shadow:0 0 14px var(--gold-glow),inset 0 0 0 .5px rgba(255,241,184,.18)
}
:root[data-theme="light"] .pbadge.official{--gold-ink:#8A5A00;--gold-line:rgba(183,121,31,.45);--gold-glow:rgba(245,197,66,.35);--gold-wash:rgba(245,197,66,.16)}
.pbadge.official svg{width:15px;height:15px;color:inherit}
/* Light passing over it now and then, the way gold catches it. */
.pbadge.official::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,244,200,.38) 50%,transparent 70%);
  animation:goldsheen 5.5s ease-in-out 1.2s infinite
}
@keyframes goldsheen{0%{transform:translateX(-120%)}28%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.pbadge.official::after{animation:none;display:none}}
/* The same seal beside a name in a line of text: a comment, a byline. Sized
   to the text around it, with a smaller glow than the profile's. */
.oseal{display:inline-flex;vertical-align:-.16em;width:1.08em;height:1.08em;margin-left:.3em;flex:none;
  filter:drop-shadow(0 0 3px rgba(245,197,66,.55))}
.oseal svg{width:100%;height:100%}
/* The silver officials: the same seal in white and silver, the same sheen.
   White on a light page needs an edge, so there the glow turns grey. */
.pseal.silver{filter:drop-shadow(0 0 7px rgba(226,232,240,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.oseal.silver{filter:drop-shadow(0 0 3px rgba(226,232,240,.5))}
:root[data-theme="light"] .oseal.silver{filter:drop-shadow(0 0 1px rgba(71,85,105,.75)) drop-shadow(0 0 2px rgba(148,163,184,.5))}
.pbadge.silver{
  --silver-ink:#E2E8F0;--silver-line:rgba(203,213,225,.5);--silver-glow:rgba(226,232,240,.18);--silver-wash:rgba(226,232,240,.10);
  position:relative;overflow:hidden;color:var(--silver-ink);border-color:var(--silver-line);
  background:linear-gradient(135deg,var(--silver-wash),rgba(226,232,240,.02) 60%,var(--silver-wash));
  box-shadow:0 0 14px var(--silver-glow),inset 0 0 0 .5px rgba(255,255,255,.2)
}
:root[data-theme="light"] .pbadge.silver{--silver-ink:#475569;--silver-line:rgba(100,116,139,.45);--silver-glow:rgba(148,163,184,.3);--silver-wash:rgba(148,163,184,.14)}
:root[data-theme="light"] .pbadge.silver svg{filter:drop-shadow(0 0 .8px rgba(71,85,105,.8))}
.pbadge.silver svg{width:15px;height:15px;color:inherit}
.pbadge.silver::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  animation:goldsheen 5.5s ease-in-out 1.2s infinite
}
@media (prefers-reduced-motion:reduce){.pbadge.silver::after{animation:none;display:none}}
/* And in red. */
.pseal.red{filter:drop-shadow(0 0 7px rgba(196,59,44,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.oseal.red{filter:drop-shadow(0 0 3px rgba(196,59,44,.55))}
.pbadge.red{
  --red-ink:#EE9E92;--red-line:rgba(196,59,44,.6);--red-glow:rgba(196,59,44,.25);--red-wash:rgba(196,59,44,.12);
  position:relative;overflow:hidden;color:var(--red-ink);border-color:var(--red-line);
  background:linear-gradient(135deg,var(--red-wash),rgba(196,59,44,.02) 60%,var(--red-wash));
  box-shadow:0 0 14px var(--red-glow),inset 0 0 0 .5px rgba(237,196,192,.18)
}
:root[data-theme="light"] .pbadge.red{--red-ink:#8F2A1F;--red-line:rgba(143,42,31,.4);--red-glow:rgba(196,59,44,.25);--red-wash:rgba(196,59,44,.12)}
.pbadge.red svg{width:15px;height:15px;color:inherit}
.pbadge.red::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,214,206,.38) 50%,transparent 70%);
  animation:goldsheen 5.5s ease-in-out 1.2s infinite
}
@media (prefers-reduced-motion:reduce){.pbadge.red::after{animation:none;display:none}}
/* Locuust Verified: the same seal and pill in blue, a step below the
   officials'. The sheen is the officials' alone. */
.pseal.verified{filter:drop-shadow(0 0 7px rgba(59,155,255,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.oseal.verified{filter:drop-shadow(0 0 3px rgba(59,155,255,.5))}
.pbadge.verified{
  --blue-ink:#9CCBFF;--blue-line:rgba(59,155,255,.45);--blue-glow:rgba(59,155,255,.2);--blue-wash:rgba(59,155,255,.10);
  color:var(--blue-ink);border-color:var(--blue-line);
  background:linear-gradient(135deg,var(--blue-wash),rgba(59,155,255,.02) 60%,var(--blue-wash));
  box-shadow:0 0 14px var(--blue-glow),inset 0 0 0 .5px rgba(214,236,255,.18)
}
:root[data-theme="light"] .pbadge.verified{--blue-ink:#1550B0;--blue-line:rgba(26,95,208,.4);--blue-glow:rgba(59,155,255,.28);--blue-wash:rgba(59,155,255,.14)}
.pbadge.verified svg{width:15px;height:15px;color:inherit}
/* The other badges (officials.js): a coloured disc with a white symbol -
   the seven sins, the reader's book, the writer's pencil, the author's pen
   - or someone's own logo. Each is tinted by --tint, set where it is drawn,
   so one rule serves them all. Only the two seals above are rosettes. */
.oseal.disc{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tint) 55%,transparent))}
.pseal.disc{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tint) 60%,transparent)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.pbadge.disc,.pbadge.logo{
  color:color-mix(in srgb,var(--tint) 62%,#fff);border-color:color-mix(in srgb,var(--tint) 45%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 12%,transparent),color-mix(in srgb,var(--tint) 3%,transparent) 60%,color-mix(in srgb,var(--tint) 12%,transparent));
  box-shadow:0 0 12px color-mix(in srgb,var(--tint) 20%,transparent)
}
:root[data-theme="light"] .pbadge.disc,:root[data-theme="light"] .pbadge.logo{color:color-mix(in srgb,var(--tint) 70%,#000)}
.pbadge.disc svg{width:15px;height:15px;color:inherit}
/* The white bolt: a white disc needs an edge on a light page, and its pill an ink.
.oseal.boltwhite{filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
:root[data-theme="light"] .oseal.boltwhite,:root[data-theme="light"] .pseal.boltwhite{filter:drop-shadow(0 0 .7px rgba(0,0,0,.75)) drop-shadow(0 0 .7px rgba(0,0,0,.75))}
:root[data-theme="light"] .pbadge.boltwhite{color:#3A3D48;border-color:rgba(0,0,0,.28);background:rgba(0,0,0,.04);box-shadow:none}
/* A logo keeps its own shape: sized by height, as wide as it is. */
.oseal.logo{width:auto;height:1.35em;vertical-align:-.32em}
.oseal.logo img,.pseal.logo img,.pbadge.logo img{display:block;height:100%;width:auto}
.pseal.logo{width:auto;height:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.pbadge.logo img{height:17px}
/* Its white letters vanish on white; a hairline outline keeps them. */
:root[data-theme="light"] .oseal.logo img,:root[data-theme="light"] .pbadge.logo img,
:root[data-theme="light"] .pseal.logo img{filter:drop-shadow(0 0 .6px rgba(0,0,0,.7)) drop-shadow(0 0 .6px rgba(0,0,0,.7))}
.phandle{font-size:14px;color:var(--muted)}
/* The handle, and beside it a second badge where someone has one. */
.phandlerow{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:4px;font-size:14px}
.phmark[hidden]{display:none}
.phmark .oseal{margin-left:.35em}
.phandle:empty{display:none}
/* "Follows you", beside the handle and in a list row. */
.pfyou{font-size:11px;font-weight:600;font-style:normal;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:8px;white-space:nowrap}
.pfyou[hidden]{display:none}
/* Pronouns after the handle, with a dot between when there is one. */
.ppro{color:var(--muted)}
.ppro[hidden]{display:none}
.phandle:not(:empty) ~ .ppro::before{content:'\00b7';margin:0 .45em}
.pstats{display:flex;justify-content:center;margin-top:18px}
.pcounts,.pfollow{display:flex}
.pcounts > div,.pfollow button{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:92px;padding:0 10px;color:var(--text);
}
.pstats b{font-size:19px;font-weight:700;line-height:1.2}
.pstats span{font-size:13px;color:var(--muted)}
.pfollow button:hover span{color:var(--text);text-decoration:underline;text-underline-offset:3px}

.ptabbar{position:relative;display:flex;flex-direction:column-reverse;align-items:center;margin-bottom:18px}
/* The bar's rule runs the width of the window, like the banner above it. */
.ptabbar::after{content:'';position:absolute;left:50%;bottom:0;width:100vw;transform:translateX(-50%);border-bottom:1px solid var(--line-soft)}
.ptabbar .tabs{margin:0;border-bottom:0;justify-content:center;max-width:100%}
.pedit{justify-content:center;flex-wrap:nowrap;gap:8px;padding:14px 0 2px}
.pblocked{margin:0 auto 18px;max-width:460px;font-size:13px;color:var(--muted);text-align:center}

.pcols{display:grid;gap:16px}
.pcols > .card,.pboard > .card{margin-top:0}
.pabout{font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.pabout:empty{display:none}
/* Their Discord username: the symbol, the name, and a copy mark. */
.pdiscord{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:9px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-align:left}
.pdiscord[hidden]{display:none}
.pdiscord:hover{border-color:var(--faint)}
.pabout:empty + .pdiscord{margin-top:0}
.pdiscord .clyde{width:24px;height:auto;flex:none}
.pdtext{display:flex;flex-direction:column;min-width:0;flex:1}
.pdlabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pdname{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdiscord > svg:last-child{width:15px;height:15px;color:var(--muted);flex:none}
.pdiscbtn{display:inline-flex;align-items:center;gap:7px}
.pdiscbtn[hidden]{display:none}
.pdiscbtn .clyde{width:17px;height:auto}
.edclyde{display:flex;align-items:center;margin-right:6px}
.edclyde .clyde{width:18px;height:auto}
.pbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pbadges:empty{display:none}
.pabout:empty + .pbadges{margin-top:0}
.pbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.pbadge svg{width:13px;height:13px;color:var(--ac-soft)}
.pbadge[title],.pseal[title]{cursor:help}
.psince{font-size:13px;color:var(--muted);margin-top:12px}
.psince:empty{display:none}
.psince + .psince{margin-top:4px}
.pfaces{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pfaces:empty{display:none}
.pfacehead{display:flex;justify-content:space-between;width:100%;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pfacehead span{color:var(--faint)}
.pfacerow{display:flex;flex-wrap:wrap;gap:6px}
.face.pf{width:38px;height:38px;font-size:12px}
.face.pf.more{background:var(--ac-dim);color:var(--ac-soft)}

.phead{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.25}
.pmain > .sub{margin:2px 0 4px}
.pstory{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;width:100%;
  padding:16px 0;text-align:left;border-top:1px solid var(--line-soft);animation:rise .3s var(--ease) both;
}
.pstory:first-child{border-top:0}
.pstory .art{aspect-ratio:2/3;border-radius:8px;overflow:hidden;position:relative;background:var(--surface-2);box-shadow:0 6px 18px rgba(0,0,0,.35);align-self:start}
.pstory .art img{width:100%;height:100%;object-fit:cover;display:block}
.pstory .rbadge{top:5px;left:5px;padding:1px 6px;font-size:9.5px}
.pstbody{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:2px}
.psttitle{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.2}
.pstory:hover .psttitle{color:var(--ac-soft)}
.pstnums{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted)}
.pstnums span{display:inline-flex;align-items:center;gap:5px}
.pstdesc{font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pstfoot{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ac-soft)}
.pboard{max-width:820px;margin:0 auto}

@media (min-width:720px){
  /* Over the banner here, so the words go white and the banner darkens
     under them. The header is the banner's shape; it grows past it only
     when a window is too narrow to hold what sits on it. */
  [data-layout="desk"] .phero{display:grid;place-items:center;aspect-ratio:3/1;padding:36px 24px 30px;color:#fff}
  [data-layout="desk"] .pbanner{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;height:100%}
  [data-layout="desk"] .pbanner::after{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.58))}
  [data-layout="desk"] .phero-in{margin-top:0;padding:0}
  [data-layout="desk"] .pavatar{border:3px solid rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.45)}
  [data-layout="desk"] .pname{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  [data-layout="desk"] .phandle,[data-layout="desk"] .ppro{color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.5)}
  [data-layout="desk"] .pcounts > div,[data-layout="desk"] .pfollow button{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
  [data-layout="desk"] .pstats span{color:rgba(255,255,255,.86)}
  [data-layout="desk"] .pfollow button:hover span{color:#fff}
  [data-layout="desk"] .pavatar{width:128px;height:128px;font-size:40px}
  [data-layout="desk"] .pname{font-size:34px}
  [data-layout="desk"] .pseal{width:30px;height:30px}
  [data-layout="desk"] .pseal.logo{width:auto;height:40px}
  [data-layout="desk"] .ptabbar{flex-direction:row;justify-content:space-between;gap:16px}
  [data-layout="desk"] .ptabbar .tabs{justify-content:flex-start}
  [data-layout="desk"] .pedit{padding:0}
  [data-layout="desk"] .pcols{grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:start}
  [data-layout="desk"] .pside{position:sticky;top:96px}
  [data-layout="desk"] .pmain{padding:22px 26px 8px}
  [data-layout="desk"] .pstory{grid-template-columns:112px minmax(0,1fr);gap:20px;padding:20px 0}
  [data-layout="desk"] .psttitle{font-size:21px}
  [data-layout="desk"] .pstory:hover .art{transform:translateY(-2px)}
  [data-layout="desk"] .pstory .art{transition:transform .2s var(--ease)}
}

/* ---------- shared stories ---------- */
/* Who writes it, on the story page: a row per writer, anyone still asked
   faded, and the way out at the foot. */
.swriters .wrlist{margin-top:2px}
.wrrow .body b small{font-weight:600;color:var(--faint);font-size:12px}
.wrrow.asked{opacity:.62}
.wrend{display:block;margin-top:12px}
/* A writer in a part right now: their face beside its title. */
.chhere{display:inline-flex;vertical-align:middle;margin-left:7px}
.face.here{width:20px;height:20px;font-size:8px;box-shadow:0 0 0 2px rgba(var(--ac-rgb),.55)}
/* In the editor's header: everyone else in the story, faces; anyone in this
   part says so in words too. */
.ehere{display:flex;align-items:center;gap:6px;min-width:0;margin-left:4px}
.ehere[hidden]{display:none}
.hereone{display:inline-flex;opacity:.5}
.hereone.same{opacity:1}
.ehere .face.here{width:26px;height:26px;font-size:10px}
.heretxt{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-layout="phone"] .heretxt{display:none}
/* An invitation, at the top of the Notebook. */
.invite{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:var(--ac-dim);border:1px solid rgba(var(--ac-rgb),.25);margin-bottom:14px}
.invtxt{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.invtxt b{display:block;color:var(--text);font-size:14px;margin-bottom:3px}
.invacts{display:flex;gap:8px;flex:none}
[data-layout="phone"] .invite{flex-wrap:wrap;align-items:flex-start}
[data-layout="phone"] .invacts{width:100%}
[data-layout="phone"] .invacts .btn{flex:1}
.tile p.withline{color:var(--faint);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstwith{font-size:12.5px;color:var(--muted)}
/* A published story by several writers: their faces overlapping. */
.bkface{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
.bkav.many{width:auto;background:none;overflow:visible;display:flex}
.bkav.many .bkface{width:30px;height:30px;flex:none;background:var(--surface-3);box-shadow:0 0 0 2px var(--void)}
.bkav.many .bkface + .bkface{margin-left:-9px}
.rauth.many .rfaces{display:flex}
.rauth.many .rfaces button{border-radius:50%;box-shadow:0 0 0 3px var(--void)}
.rauth.many .rfaces button + button{margin-left:-14px}
.rauth.many .rname{color:var(--text);font-weight:700;font-size:inherit;font-family:inherit}
.rauth.many .rname:hover{color:var(--ac-soft)}
#editor img[src^="media:"]{display:block;width:100%;height:120px;border-radius:10px;background:var(--surface-2)}

/* A YouTube link on its own line: the player under it (video.js) */
.prose .yt{display:block;margin:12px 0 4px}
.prose .yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.prose .ytoff{display:block;padding:14px;border-radius:12px;background:rgba(127,127,127,.12);opacity:.7;font-family:var(--ui);font-size:13px;text-align:center}

/* Announcements at the top of Home: pictures in a snapping strip. A phone
   gets each one's taller form (banners.js picks it), whole, never cropped. */
.banners:not(:empty){position:relative;margin-bottom:22px;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.bntrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.bntrack::-webkit-scrollbar{display:none}
.bn{flex:0 0 100%;scroll-snap-align:start;display:block;padding:0;border:0;background:none;color:inherit;text-align:left}
.bn.go{cursor:pointer}
.bn img{display:block;width:100%;height:auto;aspect-ratio:1800/500;user-select:none;-webkit-user-drag:none}
html[data-layout="phone"] .bn img{aspect-ratio:1200/1000}
.bndots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;pointer-events:none}
.bndot{pointer-events:auto;width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s,transform .2s}
.bndot.on{background:#fff;transform:scale(1.25)}

/* Cropping a picture before it is kept (crop.js) */
.cropstage{width:100%;max-width:320px;aspect-ratio:1;margin:0 auto 14px;border-radius:14px;overflow:hidden;background:#000;touch-action:none;cursor:grab;user-select:none}
.cropstage:active{cursor:grabbing}
.cropstage canvas{display:block;width:100%;height:100%}
.cropstage.wide{max-width:none;border-radius:10px}
.cropzoom{display:block;width:100%;max-width:320px;margin:0 auto 18px;accent-color:var(--ac)}

/* The pictures in Edit profile: the face beside its buttons, the banner over
   its, each with what it has to be and how the last change went. */
.edpic.avatar{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.edpic.avatar > :not(.edface):not(.edbtns){grid-column:1 / -1}
.edface{
  width:72px;height:72px;border-radius:50%;overflow:hidden;position:relative;flex:none;
  background:var(--surface-3);display:grid;place-items:center;
  font-family:var(--display);font-size:24px;font-weight:700;color:var(--ac-soft);
}
.edface img,.edban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.edban{
  display:block;position:relative;width:100%;aspect-ratio:3/1;border-radius:10px;overflow:hidden;margin-bottom:10px;
  background:linear-gradient(120deg,rgba(var(--ac-deep-rgb),.9),rgba(var(--ac-rgb),.45) 55%,#14101f);
}
.edbtns{display:flex;flex-wrap:wrap;gap:8px}
.edstat{font-size:13px;line-height:1.45;margin-top:8px;color:var(--muted)}
.edstat.busy::before{
  content:'';display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ptrspin .8s linear infinite;
}
.edstat.ok{color:var(--text)}
.edstat.ok::before{content:'\2713';margin-right:6px;color:var(--ac)}
.edstat.bad{color:var(--danger)}
.edpicnote{margin:-6px 0 18px}

/* Reading lists (list.js) */
.lshead{display:flex;flex-direction:column;gap:8px;margin:4px 0 18px}
.lstitle{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.lsdesc{font-family:var(--read);font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);max-width:68ch}
.lsact{margin-top:4px;gap:8px;justify-content:flex-start}
.lsrow{display:flex;align-items:flex-start;gap:4px}
.lsrow .tgrow{flex:1;min-width:0}
.lsmore{flex:none;margin-top:6px}
.plists{padding-top:6px}
.plistsbar{justify-content:flex-start;margin-bottom:14px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.lcard{display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-soft)}
.lcard:hover{border-color:var(--line)}
.lcard b{font-family:var(--display);font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard small{font-size:12.5px;color:var(--muted)}
.lcol{display:flex;margin-bottom:6px;height:110px}
.lcv{position:relative;display:block;width:74px;height:110px;flex:none;border-radius:8px;overflow:hidden;background:var(--surface-2);box-shadow:0 0 0 2px var(--surface)}
.lcv + .lcv{margin-left:-26px}
.lcv img{width:100%;height:100%;object-fit:cover;display:block}
.lcv .blank{font-size:10px}
.lempty{background:var(--surface-3)}
.atl{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.atlrow{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--surface-2);text-align:left;width:100%}
.atlrow.on{background:rgba(var(--ac-rgb),.14)}
.atlname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlname small{font-weight:400;font-size:12.5px;color:var(--muted)}
.atlck{flex:none;color:var(--ac-soft)}

/* ---------- alerts ---------- */
/* The bell in every header, with how many are new; the page behind it is a
   list like the inbox - a narrow centred column on a computer. */
.abell{position:relative}
.abell.lit{color:var(--text)}
.abadge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--ac-deep);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--void)}
.abadge[hidden]{display:none}
.alwrap{max-width:820px;margin:0 auto}
.allist{padding:4px 0;margin-top:0;margin-bottom:18px;overflow:hidden}
.alrow{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;text-align:left;border-top:1px solid var(--line-soft);transition:background .15s}
.alrow:first-child{border-top:0}
.alrow:hover{background:var(--surface-2)}
.alrow.new{background:color-mix(in srgb,var(--ac-dim) 70%,transparent)}
.alrow.new:hover{background:var(--ac-dim)}
.alface{position:relative;flex:none}
.alkind{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--ac-deep);color:#fff;box-shadow:0 0 0 2px var(--surface)}
.alkind svg{width:11px;height:11px}
.altext{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.45}
.alsays b{font-weight:700}
.alsays i{font-style:normal;font-weight:600;color:var(--ac-soft)}
.alsnip{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.altext .stamp{font-size:12px;color:var(--faint)}
/* Library's History shelf says what it is. */
.libnote{margin:-4px 0 14px;font-size:13px}
/* "Was previously" on a profile: past handles, each with its pen name. */
.ppast{margin-top:14px}
.ppast[hidden]{display:none}
.ppasthead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ppastrow{font-size:13.5px;line-height:1.6;color:var(--text)}
.ppasth{color:var(--muted)}

/* ---------- search results ---------- */
/* Phone first: the words searched and how many came back, a Filters button
   that opens the filters in a sheet, then the rows. A computer moves the
   words and the filters into a column on the left, Wattpad's layout. */
.srtop{margin:4px 0 6px}
.srhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.srterm{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.srhead .sub{margin-top:2px;font-size:13px}
.srside{display:none}
.srcard{padding:4px 18px;margin-top:0}
.srby{font-size:13px;color:var(--muted)}
.srmore{justify-content:center;margin:16px 0 4px}
.srpeople{display:flex;flex-direction:column;gap:10px}
.srperson{display:flex;align-items:center;gap:14px;margin-top:0;padding:14px 16px;animation:rise .3s var(--ease) both}
.srwho{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left}
.face.srf{width:60px;height:60px;font-size:19px;flex:none}
.srwhotext{min-width:0;display:flex;flex-direction:column;gap:2px}
.srwhotext b{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.srwho:hover .srwhotext > b{color:var(--ac-soft)}
.srhandle{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srnums{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.srnums b{color:var(--text);font-weight:700}
/* filters: the same rows in the left column and in the sheet */
.sfgroup{margin-bottom:22px}
.sfgroup h3,#sheet .sfgroup h3{font-family:var(--ui);font-size:15px;font-weight:700;line-height:1.3;margin:0 0 2px}
.sfgroup .sub{font-size:12px;margin-bottom:6px}
.sfgroup h3 + .sfopt{margin-top:8px}
.sfopt{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;border-radius:10px;text-align:left;
  font-size:14.5px;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.sfopt:hover{background:var(--surface-2);color:var(--text)}
.sfopt.on{background:var(--ac-dim);color:var(--text)}
.sfbox{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  border:1.5px solid var(--line);color:#fff;transition:background .15s,border-color .15s}
.sfbox.round{border-radius:999px}
.sfopt.on .sfbox{background:var(--ac-deep);border-color:transparent}
.sfbox svg{width:13px;height:13px}
.srsheet{max-height:60vh;overflow-y:auto;margin:4px -4px 14px;padding:0 4px}
@media (min-width:720px){
  [data-layout="desk"] .srcols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
  [data-layout="desk"] .srleft{position:sticky;top:96px}
  [data-layout="desk"] .srhead{display:block;margin-bottom:20px}
  [data-layout="desk"] .srterm{font-size:30px}
  [data-layout="desk"] #srFilterBtn{display:none}
  [data-layout="desk"] .srside{display:block}
  [data-layout="desk"] .srmain{max-width:860px}
  [data-layout="desk"] .srtop{max-width:620px}
}

/* ---------- the survey ---------- */
/* Phone first: one question to a card, every choice a row the width of the
   thumb's reach, the button at the end the width of the page. A computer
   only gets a narrower column and the choices two to a row. */
.svwrap{max-width:640px;margin:0 auto}
.svintro{margin:6px 0 4px}
.svintro .sechead{margin-bottom:6px}
.svq{padding:18px;transition:border-color .2s}
.svq.miss{border-color:var(--danger)}
.svstep{font-size:12px;font-weight:600;color:var(--faint);margin-bottom:6px}
.svask{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.3;margin-bottom:14px}
.svopts{display:flex;flex-direction:column;gap:8px}
.svopt{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:11px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid transparent;text-align:left;font-size:15px;font-weight:500;line-height:1.35;
  transition:background .15s,border-color .15s}
.svopt:active{transform:scale(.99)}
.svopt.on{background:var(--ac-dim);border-color:rgba(var(--ac-rgb),.45)}
.svdot{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;
  border:1.5px solid var(--line);color:#fff;transition:background .15s,border-color .15s}
.svopt.on .svdot{background:var(--ac-deep);border-color:transparent}
.svdot svg{width:14px;height:14px}
.svother{margin-top:10px}
.svother input{font-size:16px}                /* 16px: a phone zooms in on anything smaller */
.svsend{margin:20px 0 8px}
.svdone{padding-top:48px}
.svtick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;
  background:var(--ac-dim);color:var(--ac-soft);margin-bottom:14px}
.svdonego{justify-content:center;margin-top:18px}
/* results */
.svn{font-size:13px;margin:-8px 0 14px}
.svbars{display:flex;flex-direction:column;gap:12px}
.svbarhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;margin-bottom:6px}
.svbarhead b{flex:none;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.svtrack{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.svtrack span{display:block;height:100%;border-radius:inherit;background:var(--ac-deep)}
.svothhead{font-size:12px;font-weight:600;color:var(--muted);margin:18px 0 8px}
.svothers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.svothers li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;border-radius:10px;
  background:var(--surface-2);font-size:14px;overflow-wrap:anywhere}
.svothers .stamp{flex:none;font-size:12px;color:var(--faint)}
[data-layout="desk"] .svopts{display:grid;grid-template-columns:1fr 1fr}

/* The privacy policy's links: quiet, but readable as links. */
[data-privacy]{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lgfine{margin:14px 0 0;font-size:12px;color:var(--faint);text-align:center}

/* Deleting an account: what goes, and the one tick that decides what stays here. */
.dlist{margin:0 0 12px;padding-left:20px;color:var(--soft)}
.dcheck{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:14px;color:var(--soft);cursor:pointer}
.dcheck input[type=checkbox]{width:18px;height:18px;min-width:18px;padding:0;margin:2px 0 0;flex:none}
.dcheck span{flex:1;min-width:0;line-height:1.45}

/* ---------- reporting ---------- */
.picks.reasons button.on{color:var(--ac-soft);background:var(--ac-dim)}
.bkreport{display:block;margin:22px auto 8px;color:var(--faint);font-size:13px}
.bkreport[hidden]{display:none}
.reports{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.report{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2)}
.report b{font-size:14.5px}
.report span{font-size:12.5px;color:var(--muted)}
.report em{font-size:13px;color:var(--text);font-style:normal;margin-top:2px}
.report .row{margin-top:8px}

/* ---------- the one-time Discord invitation (views/discordPrompt.js) ----------
   A square in the middle of the screen. Blurple #5865F2 is Discord's own, from
   discord.com/branding. */
#dpBack{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
#dpBack.on{display:flex}
#dp{
  position:relative;width:min(340px,100%,calc(100vh - 32px));aspect-ratio:1/1;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:28px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);animation:pop .2s var(--ease) both
}
#dp .icb{position:absolute;top:10px;right:10px}
#dp .dpmark{width:64px;height:auto;flex:none}
#dp h3{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.15;margin:4px 0 0}
#dp p{font-size:14px;line-height:1.45;color:var(--muted);margin:0}
#dp .dpjoin{
  display:inline-flex;align-items:center;justify-content:center;margin-top:6px;padding:12px 26px;border-radius:999px;
  background:#5865F2;color:#fff;font-weight:700;font-size:15px;text-decoration:none;
  transition:transform .12s var(--ease),background .15s
}
#dp .dpjoin:hover{background:#4752C4}
#dp .dpjoin:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){#dp{animation:none}}