/* ---------------------------------------------------------------------------
   The site's own look - "Parchment and ink" (Tom chose it on 2026-10-21, over the first "Moth-light" of
   2026-10-07, whose night slate and teal every AI-made Skyrim site shares: research/layout/palette/).

     night   warm charcoal and candlelight, a copper-rose for what you act on
     day     warm paper, brown-black ink, an oxblood accent

   Candle amber is anything about the visitor (their character, their files);
   each tool has its own ink: Your playthrough candle, the roll moth-light, the
   guide builder rose, the catalogue lichen, the Ledger amethyst. Titles in
   Marcellus SC, reading in Alegreya, controls in Jost: Google's free faces.
   Nothing here is Bethesda's - no game fonts, art or textures; the emblem and
   icons are drawn for this site.

   A page follows the reader's own setting and remembers a choice made with the
   lamp (data-theme="day"|"night" on <html>). theme.js draws the masthead, the
   collections and the foot; every page loads this file first, then its own.
   ------------------------------------------------------------------------- */
:root{
  /* --- night (the default) --- */
  --bg:#15110d; --bg-2:#1a1510; --surface:#201a14; --surface-2:#272018; --surface-3:#30281f;
  --line:#3a3026; --line-2:#50432f;
  --fg:#efe6d4; --fg-2:#cdbfa6; --fg-3:#a39479;
  --accent:#d9917a; --on-accent:#1b0f0a; --warm:#e6b56e;
  --t-read:#e6b56e; --t-roll:#d9917a; --t-write:#e3a0b4; --t-arch:#b5c98c; --t-ledger:#c5b0e0;
  --bad:#e88e7a; --good:#a9cd8e; --frost-c:#93bfd2; --shade-c:#b9a9d6;
  --glow:rgba(217,145,122,.14); --emb-scroll:#ece0c4; --shadow:rgba(0,0,0,.5);
  --well-c:rgba(0,0,0,.25); --lift-c:rgba(255,255,255,.03);
  /* A phase's accent comes from the guide; as text it is mixed toward the ink */
  --ph-mix:62%;
  color-scheme:dark;
}
/* --- day: the reader's own setting, unless this page was told otherwise --- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="night"]){
    --bg:#f1e9d8; --bg-2:#e9dfca; --surface:#fbf6ea; --surface-2:#f5eedd; --surface-3:#ebe1cb;
    --line:#d9cbad; --line-2:#bfac87;
    --fg:#2a1f17; --fg-2:#4e3f32; --fg-3:#66553f;
    --accent:#7d2a22; --on-accent:#fff8ee; --warm:#8a5410;
    --t-read:#8a5410; --t-roll:#7d2a22; --t-write:#8c3b5a; --t-arch:#4a6326; --t-ledger:#5a3f78;
    --bad:#9e2f1f; --good:#3f6a24; --frost-c:#2f5c74; --shade-c:#5a4a6e;
    --glow:rgba(125,42,34,.10); --emb-scroll:#fbf3df; --shadow:rgba(60,40,20,.18);
    --well-c:rgba(80,50,20,.06); --lift-c:rgba(255,255,255,.55);
    /* A phase's accent drawn for a dark palette needs more ink on birch: 40% - measured, not guessed */
    --ph-mix:40%;
    color-scheme:light;
  }
}
:root[data-theme="day"]{
  --bg:#f1e9d8; --bg-2:#e9dfca; --surface:#fbf6ea; --surface-2:#f5eedd; --surface-3:#ebe1cb;
  --line:#d9cbad; --line-2:#bfac87;
  --fg:#2a1f17; --fg-2:#4e3f32; --fg-3:#66553f;
  --accent:#7d2a22; --on-accent:#fff8ee; --warm:#8a5410;
  --t-read:#8a5410; --t-roll:#7d2a22; --t-write:#8c3b5a; --t-arch:#4a6326; --t-ledger:#5a3f78;
  --bad:#9e2f1f; --good:#3f6a24; --frost-c:#2f5c74; --shade-c:#5a4a6e;
  --glow:rgba(125,42,34,.10); --emb-scroll:#fbf3df; --shadow:rgba(60,40,20,.18);
  --well-c:rgba(80,50,20,.06); --lift-c:rgba(255,255,255,.55);
  --ph-mix:40%;
  color-scheme:light;
}
/* the faces, and the names the pages were written with (kept working, now in these colours) */
:root, :root[data-theme]{
  --f-display:"Marcellus SC",Georgia,serif; --f-body:"Alegreya",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif;
  --r:5px; --ease:cubic-bezier(.2,.7,.2,1);
  --title:var(--f-display); --text:var(--f-body); --display:var(--f-body); --hand:var(--f-body); --serif:var(--f-body); --mono:var(--f-ui);
  --bg-1:var(--bg-2); --bg-3:var(--bg); --void:var(--bg); --deep:var(--bg-2);
  --iron:var(--surface); --iron-2:var(--surface-2); --iron-3:var(--surface-3); --panel:var(--surface-2); --panel-2:var(--surface-3);
  --edge:var(--line); --edge-2:var(--line-2); --rule:var(--line); --rule-2:var(--line-2);
  --brass:var(--accent); --brass-pale:var(--accent); --brass-dim:color-mix(in srgb,var(--accent) 55%,var(--bg));
  --brass-glow:var(--glow); --on-brass:var(--on-accent);
  --gold:var(--accent); --gold-pale:var(--accent); --gold-dim:color-mix(in srgb,var(--accent) 55%,var(--bg));
  --bone:var(--fg); --bone-2:var(--fg-2); --bone-3:var(--fg-3);
  --page:var(--surface-2); --page-2:var(--surface); --page-edge:var(--line-2); --ink:var(--fg); --ink-2:var(--fg-2); --ink-3:var(--fg-3);
  --blood:var(--bad); --ember:var(--warm); --frost:var(--frost-c); --moss:var(--good); --shade:var(--shade-c);
  --sink:var(--shadow); --lift:var(--lift-c); --well:var(--well-c);
}
@media (prefers-color-scheme: light){ :root:not([data-theme="night"]){
  --brass-dim:color-mix(in srgb,var(--accent) 70%,var(--bg)); --gold-dim:color-mix(in srgb,var(--accent) 70%,var(--bg));
} }
:root[data-theme="day"]{ --brass-dim:color-mix(in srgb,var(--accent) 70%,var(--bg)); --gold-dim:color-mix(in srgb,var(--accent) 70%,var(--bg)) }

/* ---- the page ------------------------------------------------------------ */
*{box-sizing:border-box}
html{background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;min-height:100vh;color:var(--fg);font-family:var(--f-body);font-size:19px;line-height:1.58;font-weight:400;
  background:radial-gradient(1100px 560px at 8% -160px,var(--glow),transparent 70%),var(--bg)}
/* reading size, from the masthead's Aa (localStorage "siteText") */
:root[data-text="l"] body{zoom:1.1}
:root[data-text="xl"] body{zoom:1.22}
a{color:var(--accent)}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,.title{font-family:var(--f-display);font-weight:400;color:var(--fg);letter-spacing:.01em;margin:0}
h1{font-size:clamp(36px,5.2vw,56px);line-height:1.05}
h2{font-size:30px;line-height:1.15}
h3{font-size:21px;line-height:1.25}
/* a small heading over a part of a page: the reading face's italic - no tracked capitals */
.eyebrow,.label{font-family:var(--f-body);font-style:italic;font-size:16px;letter-spacing:0;text-transform:none;color:var(--fg-3);font-weight:400}
.lede{font-family:var(--f-body);font-size:20px;line-height:1.5;color:var(--fg-2)}
/* a section's name inside a card */
.k{font-family:var(--f-display);font-size:16px;letter-spacing:.04em;text-transform:none;color:var(--fg-2);font-weight:400}
.small{font-family:var(--f-ui);font-size:13.5px;letter-spacing:0;color:var(--fg-3)}
/* ---- rules and ornament -------------------------------------------------- */
.rule{border:0;height:1px;margin:22px 0;background:var(--line)}
/* A phase's accent comes from the guide and was drawn for one dark palette; as
   text it is mixed toward this page's ink, so it carries in both lights. The
   raw accent still draws rules, borders and marks. */
.phase{--ph-text:color-mix(in srgb, var(--ph, var(--accent)) var(--ph-mix,62%), var(--fg))}
/* ---- surfaces ------------------------------------------------------------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px 24px;margin-bottom:16px;
      box-shadow:0 18px 40px -30px var(--shadow)}
.card.lit{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
/* what a person writes or reads: a calmer surface */
.page{background:var(--surface-2);color:var(--fg);border:1px solid var(--line);border-radius:var(--r)}
.page h1,.page h2,.page h3{color:var(--fg)}
.page .k{color:var(--fg-2)}
/* ---- controls ------------------------------------------------------------ */
button,.seg label,select,input[type=text],input[type=number],input[type=search],textarea{font-family:var(--f-ui);font-size:15px;color:var(--fg);
  background:var(--surface-2);border:1px solid var(--line-2)}
button,.seg label{letter-spacing:.01em;text-transform:none;font-weight:400;border-radius:var(--r);
  padding:9px 16px;cursor:pointer;min-height:40px;transition:border-color .15s,color .15s,background .15s}
button:hover,.seg label:hover{border-color:var(--accent);color:var(--fg)}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500}
button.primary:hover{filter:brightness(1.06)}
button.quiet{background:transparent;border-color:var(--line-2);color:var(--fg-2);padding:7px 13px;min-height:36px}
/* a link that does a button's job (a sign-in, a download), drawn as one */
a.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-size:15px;letter-spacing:.01em;color:var(--fg);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 16px;min-height:40px;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
a.btn:hover{border-color:var(--accent);color:var(--fg)}
a.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500}
a.btn.quiet{background:transparent;color:var(--fg-2);padding:7px 13px;min-height:36px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{border:0;border-radius:0;background:transparent;color:var(--fg-2);min-height:36px;padding:7px 14px}
.seg input:checked + label{background:var(--accent);color:var(--on-accent)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:-2px}
.seg input:disabled + label{display:none}
/* a choice that belongs to one collection (base GTS's edition): a smaller row */
.subtabs{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px}
.subtabs[hidden],.seg[hidden]{display:none}
.subtabs .seg label{font-size:13.5px;padding:5px 11px;min-height:32px}
.subtabs .hint{font-family:var(--f-body);font-size:15.5px;line-height:1.4;color:var(--fg-3)}
select{border-radius:var(--r);padding:8px 12px;min-height:40px;max-width:100%;font-family:var(--f-body);font-size:18px;letter-spacing:0}
input[type=text],input[type=number],input[type=search],textarea{border-radius:var(--r);padding:10px 13px;width:100%;font-family:var(--f-body);font-size:18px;letter-spacing:0}
textarea{min-height:90px;resize:vertical;line-height:1.55}
/* what the author writes: their ink, on a page of its own */
input.ink,textarea.ink{background:var(--surface);color:var(--fg);border-color:var(--line-2);border-left:3px solid color-mix(in srgb,var(--t-write) 60%,var(--line-2));
  font-family:var(--f-body);font-size:18.5px;line-height:1.5}
input.ink::placeholder,textarea.ink::placeholder{color:var(--fg-3);font-style:italic}
input.ink:focus,textarea.ink:focus{border-color:var(--t-write)}
label.f{display:block;font-family:var(--f-ui);font-size:15px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--fg-2);margin:18px 0 6px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---- meaning: can't, worth knowing ---------------------------------------- */
.issues{list-style:none;margin:10px 0 0;padding:0}
.issues li{position:relative;margin:8px 0;padding:11px 15px 11px 16px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--fg-3);font-size:18px;color:var(--fg)}
.issues li .lab{font-family:var(--f-display);font-size:15px;letter-spacing:.04em;text-transform:none;margin-right:10px}
.issues li.cant{border-left-color:var(--bad)}
.issues li.cant .lab{color:var(--bad)}
.issues li.note{border-left-color:var(--warm)}
.issues li.note .lab{color:var(--warm)}
.issues li .fix{display:block;color:var(--fg-2);font-size:17px;margin-top:5px;font-style:italic}
.issues li .fix::before{content:"What you can do — ";font-style:normal;font-family:var(--f-ui);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--fg-3)}
/* ---- folds: an explanation folds, never a choice or its consequence ------- */
.fold{display:inline-flex;gap:9px;align-items:center;cursor:pointer;color:var(--fg-3);font-family:var(--f-body);font-style:italic;font-size:16px}
.fold:hover{color:var(--fg)}
.fold::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;opacity:.8;transition:transform .2s var(--ease);flex:none}
details[open] > summary.fold::before{transform:rotate(90deg)}
summary.fold{list-style:none}
summary.fold::-webkit-details-marker{display:none}
details.why{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
details.why > summary{cursor:pointer;font-family:var(--f-body);font-style:italic;font-size:16px;letter-spacing:0;color:var(--fg-3);list-style:none;display:inline-flex;gap:9px;align-items:center}
details.why > summary::-webkit-details-marker{display:none}
details.why > summary::before{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;opacity:.8;transition:transform .2s var(--ease)}
details.why[open] > summary::before{transform:rotate(90deg)}
details.why > summary:hover{color:var(--fg)}
details.why ul{margin:8px 0 0;padding-left:18px;font-size:17.5px;color:var(--fg-2)}
details.why li{margin:4px 0}
details.why li b{color:var(--fg);font-weight:500}
/* ---- layout -------------------------------------------------------------- */
main{position:relative;max-width:1260px;margin:0 auto;padding:30px 32px 60px;
     overflow-wrap:break-word}  /* a plugin's file name or an EditorID is one long word: it breaks rather than run off a phone */
.intro{max-width:1260px;margin:0 auto;padding:30px 32px 0}
.intro h1{margin:8px 0 10px}
.intro .lede{margin:0 0 22px}
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb .dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--accent));flex:none}
:root:not([data-theme="day"]) .crumb .dot{box-shadow:0 0 10px var(--c,var(--accent))}
.crumb .sep{opacity:.5}
footer{font-family:var(--f-ui);font-size:14px;line-height:1.8;color:var(--fg-3)}
#foot{max-width:1260px;margin:0 auto;padding:0 32px 18px;font-family:var(--f-body);font-size:15.5px;line-height:1.6;color:var(--fg-3)}
#foot:empty{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.empty{color:var(--fg-3);font-style:italic}

/* ---- the masthead (drawn by theme.js) -------------------------------------- */
.mast{position:relative;z-index:30;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent)}
.mast-top{display:flex;align-items:center;gap:28px;max-width:1260px;margin:0 auto;padding:20px 32px 8px;min-height:84px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--fg);position:relative;flex:none}
.emblem{width:56px;height:56px;flex:none;color:var(--accent);overflow:visible}
:root:not([data-theme="day"]) .emblem{filter:drop-shadow(0 0 10px rgba(217,145,122,.28))}
@media (prefers-color-scheme: light){ :root:not([data-theme="night"]) .emblem{filter:none} }
.word{display:block;font-family:var(--f-display);font-size:30px;letter-spacing:.06em;line-height:1;font-weight:400}
.tagline{display:block;font-family:var(--f-body);font-style:italic;font-size:15px;color:var(--fg-3);margin-top:5px}
.mine{display:flex;gap:4px;align-items:center;margin-left:8px}
.mine>a{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r);color:var(--fg-2);text-decoration:none;font-family:var(--f-ui);font-size:15.5px;letter-spacing:.01em;white-space:nowrap}
.mine>a .ic{color:var(--c)}
.mine>a:hover{color:var(--fg);background:var(--surface)}
.mine>a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--c)}
.tools{display:flex;gap:8px;align-items:center;margin-left:auto}
.mast .chip{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 9px;min-height:38px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-family:var(--f-ui);font-size:14px;letter-spacing:.01em;color:var(--fg);cursor:pointer}
.mast .chip .ic{color:var(--fg-2)}
.mast .chip b{font-weight:500}
.mast .chip span{color:var(--fg-3)}
.iconbtn{width:38px;height:38px;min-height:38px;padding:0;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:transparent;cursor:pointer;color:var(--fg-2)}
.iconbtn:hover,.mast .chip:hover{border-color:var(--accent);color:var(--fg)}
.menu-btn{display:none}
/* the third tab: the modlist the visitor plays (chosen in Settings); its menu holds that modlist's tools */
.coltab{position:relative}
.coltab>button{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;min-height:0;border:0;border-radius:var(--r);background:none;color:var(--fg);
  font-family:var(--f-ui);font-size:15.5px;letter-spacing:.01em;white-space:nowrap;box-shadow:inset 0 -2px 0 var(--accent)}
.coltab>button:hover{background:var(--surface);color:var(--fg)}
.coltab>button .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.coltab.yours>button{box-shadow:inset 0 -2px 0 var(--t-read)}
.coltab.yours>button .dot{background:var(--t-read)}
.coltab>button .ic{width:10px;height:10px;opacity:.6;transition:transform .2s var(--ease)}
.coltab.open>button .ic{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 6px);left:0;width:392px;max-width:calc(100vw - 24px);background:var(--surface-2);border:1px solid var(--line-2);border-top:2px solid var(--accent);border-radius:0 0 var(--r) var(--r);box-shadow:0 22px 50px -12px var(--shadow);padding:8px;display:none;transform-origin:top center;z-index:40}
.coltab.open .menu{display:block;animation:unfold .2s var(--ease)}
.mi{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 10px;border-radius:var(--r);text-decoration:none;color:var(--fg)}
.mi:hover{background:var(--surface-3)}
.mi .ic{width:22px;height:22px;color:var(--c);justify-self:center}
.mi b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.2}
.mi small{display:block;font-size:14.5px;color:var(--fg-3);font-style:italic;line-height:1.3}
.mi.here{background:var(--surface-3);box-shadow:inset 3px 0 0 var(--c)}
.mi .here-tag{font-family:var(--f-ui);font-size:12px;letter-spacing:.02em;color:var(--c)}
.mi.off{opacity:.55;cursor:default}
.mi.off:hover{background:none}
/* "Your game": drop a Plugins.txt (or a snapshot) right in its menu, or click to choose one */
.menu-drop{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;margin:2px 0 6px;padding:12px 10px;border:1.5px dashed color-mix(in srgb,var(--t-read) 55%,var(--line-2));border-radius:var(--r);
  background:color-mix(in srgb,var(--t-read) 5%,transparent);cursor:pointer;color:var(--fg)}
.menu-drop .ic{width:22px;height:22px;color:var(--t-read);justify-self:center}
.menu-drop b{display:block;font-family:var(--f-ui);font-weight:500;font-size:15px}
.menu-drop small{display:block;font-size:14.5px;color:var(--fg-3);font-style:italic;line-height:1.3}
.menu-drop:hover,.menu-drop.over{border-color:var(--t-read);background:color-mix(in srgb,var(--t-read) 12%,transparent)}
.sheet .menu-drop{margin:4px 10px 12px}
.menu hr{border:0;border-top:1px solid var(--line);margin:8px 6px}
.menu .note{margin:2px 10px 8px;font-size:14.5px;color:var(--fg-3);font-style:italic;line-height:1.35}
.edition{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:6px 10px 8px}
.toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;font-family:var(--f-ui);font-size:13.5px;letter-spacing:.01em}
.toggle button{font-size:13.5px;padding:4px 10px;min-height:30px;border:0;border-radius:0;background:transparent;color:var(--fg-3)}
.toggle button.on{background:var(--accent);color:var(--on-accent)}
.tick{display:inline-flex;gap:8px;align-items:center;font-family:var(--f-ui);font-size:13.5px;color:var(--fg-2);cursor:pointer}
.tick input{width:15px;height:15px;accent-color:var(--accent);margin:0}
.realm-phone{display:none}
/* popovers from the masthead: the satchel, reading size */
.pop{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 24px);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 22px 50px -12px var(--shadow);padding:14px 16px;z-index:45;display:none;animation:unfold .2s var(--ease);font-size:16px;line-height:1.45}
.pop.open{display:block}
.pop h3{font-size:18px;margin:0 0 8px}
.pop p{margin:6px 0;color:var(--fg-2)}
.pop .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kept{margin:8px 0;padding:0;list-style:none}
.kept li{padding:6px 0;border-bottom:1px solid var(--line);color:var(--fg)}
.kept li small{display:block;color:var(--fg-3);font-size:14px}
/* signed in, each file says whether the account has it (Tom, R1#3, 2026-10-14: "A, build it") */
.kept li.k{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center}
.kept li.k .c{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.kept .where{font-family:var(--f-ui);font-size:13.5px;color:var(--fg-3);white-space:nowrap}
.kept .where.on{color:var(--good)}
.kept li.k button{min-height:32px;padding:4px 12px;font-size:14px}
.files-on{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;margin:2px 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.files-on b{display:block;font-family:var(--f-ui);font-weight:500;font-size:15px;color:var(--fg)}
.files-on small{display:block;color:var(--fg-3);font-size:14.5px}
.files-on .seg label{min-height:32px;padding:5px 11px;font-size:14px}
@media (max-width:560px){ .kept li.k{grid-template-columns:1fr} .kept li.k .c{justify-content:flex-start} }
.tools-wrap{position:relative}
/* Settings: what the visitor plays (with base GTS's edition), and their files - a page of its own later */
.pop.settings{width:400px;padding:16px 18px 14px;max-height:calc(100vh - 120px);overflow:auto}
.pop.settings h3{font-size:20px;margin:0 0 4px}
.pop.settings .k,.sheet .k{display:block;margin:12px 0 6px;font-family:var(--f-body);font-style:italic;font-size:15px;color:var(--fg-3)}
.pop.settings .note{margin:6px 2px 2px;font-size:14.5px;color:var(--fg-3);font-style:italic;line-height:1.35}
.pick{display:grid;gap:2px}
.pick>label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r);font-family:var(--f-ui);font-size:15px;color:var(--fg-2);cursor:pointer}
.pick>label:hover{background:var(--surface-3);color:var(--fg)}
.pick>label.on{background:var(--surface-3);color:var(--fg)}
.pick>label input{width:15px;height:15px;margin:0;accent-color:var(--accent);flex:none}
.pick>label small{margin-left:auto;font-family:var(--f-body);font-style:italic;font-size:14px;color:var(--fg-3)}
.pick .edition{padding:2px 8px 8px 33px}
.sheet .pick{margin:0 2px}
.sheet .files{padding:0 10px}
.sheet .files .menu-drop{margin:4px 0 8px}
.sheet .files .note{margin:2px 0 8px;font-size:14.5px;color:var(--fg-3);font-style:italic;line-height:1.35}
/* the phone's sheet: everything the masthead holds, one list */
.sheet{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 70%,transparent);display:none}
.sheet.open{display:block}
.sheet-in{position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);overflow:auto;background:var(--surface);border-left:1px solid var(--line-2);padding:14px 16px 30px;animation:slidein .22s var(--ease)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet h3{font-size:16px;color:var(--fg-3);font-family:var(--f-body);font-style:italic;margin:16px 0 6px}
.sheet a.go,.sheet button.go{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--fg);text-decoration:none;font-family:var(--f-ui);font-size:16px;text-align:left}
.sheet a.go:hover,.sheet button.go:hover{background:var(--surface-3)}
.sheet .go .ic{color:var(--c)}
.sheet details{border-bottom:1px solid var(--line)}
.sheet details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:6px 10px;font-family:var(--f-ui);font-size:16px;cursor:pointer;color:var(--fg)}
.sheet details summary::-webkit-details-marker{display:none}
.sheet details[open] summary .ic{transform:rotate(180deg)}
.sheet details.on summary{color:var(--accent)}
.sheet .edition{padding:4px 10px 12px}

/* ---- the foot (drawn by theme.js) ---------------------------------------- */
.foot{border-top:1px solid var(--line);margin-top:10px}
/* a page's own notes on where its facts come from, folded */
.foot .sources{max-width:1260px;margin:0 auto;padding:16px 32px 0}
.foot .sources summary{list-style:none}
.foot .sources summary::-webkit-details-marker{display:none}
.foot .sources #foot{padding:10px 0 4px}
.foot-in{max-width:1260px;margin:0 auto;padding:26px 32px 40px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start}
.foot-navs{display:grid;grid-template-columns:auto auto auto;gap:6px 48px}
.foot .sign .sign-free{display:block;margin-top:6px;font-style:normal;font-family:var(--f-ui);font-size:14px;color:var(--fg-2)}
/* whose game it is: one quiet line under the sign, on every page (launch review, 2026-10-21) */
.foot .sign .sign-legal{display:block;margin-top:8px;font-style:normal;font-family:var(--f-ui);font-size:13px;line-height:1.5;color:var(--fg-3)}
.foot .emblem{width:40px;height:40px;opacity:.85}
.foot p{margin:0;color:var(--fg-3);font-family:var(--f-body);font-size:15px;font-style:italic;line-height:1.55}
.foot b{font-family:var(--f-display);font-weight:400;font-size:18px;letter-spacing:.05em;color:var(--fg-2);font-style:normal}
.foot nav{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.foot nav .label{font-size:15px;margin-bottom:2px}
.foot nav a,.foot nav button{font-family:var(--f-ui);font-size:14px;letter-spacing:.01em;color:var(--fg-2);text-decoration:none;background:none;border:0;padding:0;min-height:0;cursor:pointer}
.foot nav a:hover,.foot nav button:hover{color:var(--accent)}

/* ---- About: a short explanation before anything leaves the site (theme.js openAbout) ---- */
dialog.explain,dialog.welcome{color:var(--fg);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 24px 60px var(--shadow);padding:0}
dialog.explain{width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border-top:2px solid var(--accent)}
dialog.explain::backdrop,dialog.welcome::backdrop{background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(3px)}
dialog.explain[open]{animation:unfold .22s var(--ease)}
/* the sign-in popup (theme.js askSignin): a signed-out save, rating or vote */
dialog.signin-box{width:min(460px,calc(100vw - 32px))}
.signin-box .explain-in{padding:22px 24px 20px}
.signin-box h2{font-size:24px;margin:0 0 8px;line-height:1.2}
.signin-box .why{font-size:16.5px;line-height:1.5;color:var(--fg-2);margin:0 0 16px}
.signin-box .ways{display:grid;gap:10px;margin:0 0 14px}
.signin-box .ways a.button,.signin-box .ways button{display:block;width:100%;box-sizing:border-box;text-align:center;padding:10px 14px;border:1px solid var(--accent);border-radius:var(--r);
  font-family:var(--f-ui);font-size:16px;color:var(--accent);background:transparent;text-decoration:none}
.signin-box .ways a.button.first{background:var(--accent);color:var(--on-accent)}
.signin-box .ways a.button:hover{background:var(--accent);color:var(--on-accent)}
.signin-box .ways button:disabled{opacity:.55;cursor:default}
.signin-box .small{font-family:var(--f-ui);font-size:13.5px;line-height:1.5;color:var(--fg-3);margin:0 0 14px}
.signin-box .small a{color:var(--accent)}
.signin-box .foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:12px}
/* why Discord or Google (FEEDBACK R13#4: research/accounts/shots/why.png), in the sign-in box and Settings */
.why-fold{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.why-fold summary{cursor:pointer;font-family:var(--f-ui);font-size:14.5px;color:var(--fg)}
.why-fold p{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.signin-box .said{font-family:var(--f-ui);font-size:15px;line-height:1.45;color:var(--bad);margin:0 0 14px}
/* the handle box (FEEDBACK R13#2: research/accounts/shots/handle.png) */
.handle-box .foot{justify-content:space-between;gap:10px;flex-wrap:wrap}
.hfield{margin:0 0 14px}
.hfield label{display:block;font-family:var(--f-ui);font-size:14.5px;color:var(--fg);margin:0 0 6px}
.hfield .note{font-family:var(--f-ui);font-size:13.5px;line-height:1.45;color:var(--fg-3);margin:6px 0 0}
.hfield .note.ok{color:var(--good)}
.hfield .note.bad{color:var(--bad)}
.handle-in{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:0 10px}
.handle-in:focus-within{border-color:var(--accent)}
.handle-in span{font-family:var(--f-ui);font-size:17px;color:var(--fg-3)}
.handle-in input{border:0;background:none;flex:1;font-size:17px;padding:10px 4px;color:var(--fg);outline:none;min-width:0}
.hfield input.plain{width:100%;box-sizing:border-box;font-size:17px;padding:10px 12px}
/* the account chip's menu (FEEDBACK R13#3: research/accounts/shots/a-in.png) */
/* no icon beside the words (as drawn): the masthead has no room to spare; on a phone, where chips are icons, it comes back */
.mast .acct-wrap .chip{padding-left:13px}
.mast .acct-wrap .chip .ic{display:none}
.mast .acct-wrap .chip b{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the masthead holds a name or Sign in as well now (it is 1260 wide at most, so every width) */
.mast-top{gap:18px} .mine{margin-left:0} .tools{gap:6px}
/* the narrowest phones: Settings is in the menu (Every setting), and Sign in takes its place */
@media (max-width:360px){ .mast .tools #settings{display:none} }
.pop.acct{width:260px;padding:8px}
.pop.acct .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;font-family:var(--f-ui);font-size:14px;color:var(--fg-2);overflow-wrap:anywhere}
.pop.acct .who b{display:block;font-family:var(--f-display);font-weight:400;font-size:18px;color:var(--fg)}
.pop.acct a,.pop.acct button.item{display:block;width:100%;box-sizing:border-box;text-align:left;padding:9px 10px;border:0;border-radius:var(--r);background:none;font-family:var(--f-ui);font-size:15px;color:var(--fg);text-decoration:none;min-height:0}
.pop.acct a:hover,.pop.acct button.item:hover,.pop.acct a:focus-visible,.pop.acct button.item:focus-visible{background:var(--surface)}
.pop.acct .sep{height:1px;background:var(--line);margin:6px 0}
/* something new about their guides (FEEDBACK R13#1) */
.mast .acct-wrap .chip .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pop.acct .newn{margin-left:8px;color:var(--accent);white-space:nowrap}
/* the Library's line for what a player hid */
.hid-line{font-family:var(--f-ui);font-size:14.5px;color:var(--fg-3);margin:4px 0 12px}
.hid-line a{color:var(--accent)}
/* an author's handle beside their name, wherever a guide says whose it is */
.handle{color:var(--fg-3);font-family:var(--f-ui);font-size:.9em}
.explain-in{position:relative;padding:22px 26px 22px;font-size:17.5px;line-height:1.55}
.explain-in h2{font-size:27px;margin:0 40px 10px 0}
.explain-in p{margin:0 0 10px;color:var(--fg-2)}
.explain-in ul{margin:0 0 6px;padding-left:20px;color:var(--fg-2)}
.explain-in li{margin:0 0 8px}
.explain-in b{color:var(--fg);font-weight:500}
.explain-in code{font-family:var(--f-ui);font-size:14.5px;background:var(--surface-3);padding:1px 6px;border-radius:3px;color:var(--fg)}
.explain-in .x{position:absolute;top:14px;right:14px}
.explain-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.explain-go a.button,.explain-go button{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-family:var(--f-ui);font-size:15px;text-decoration:none}
.explain-go button[disabled]{background:transparent;border-color:var(--line-2);color:var(--fg-3);cursor:not-allowed}
.explain-go span{font-style:italic;color:var(--fg-3);font-size:15.5px}
button.linkish{display:inline;min-height:0;padding:0;background:none;border:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
ol.rules{margin:0 0 10px;padding-left:24px;color:var(--fg-2)}
ol.rules li{margin:0 0 7px}
ol.rules li::marker{font-family:var(--f-ui);font-size:14px;color:var(--fg-3)}
.consequence{font-style:italic;color:var(--fg-3)!important}

/* ---- the first visit: what each part does, the rules, the way in (theme.js welcome) ---- */
dialog.welcome{width:min(780px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;border-top:2px solid var(--accent)}
dialog.welcome[open]{animation:rise .4s var(--ease)}
dialog.welcome.leaving{opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
.welcome-in{padding:28px 34px 30px;font-size:17.5px;line-height:1.55}
.welcome-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.welcome-head .emblem{width:64px;height:64px;color:var(--accent)}
.welcome-head h1{font-size:clamp(34px,6vw,46px);line-height:1;margin:0}
.welcome-head .tagline{margin:4px 0 0;font-style:italic;color:var(--fg-3)}
.welcome-in .lede{font-size:19px;margin:0 0 18px}
.welcome-in h2{font-size:22px;margin:22px 0 10px}
.parts{border-top:1px solid var(--line)}
.part{border-bottom:1px solid var(--line)}
.part summary{list-style:none;display:grid;grid-template-columns:26px 1fr 16px;gap:12px;align-items:center;min-height:48px;padding:6px 4px;cursor:pointer}
.part summary::-webkit-details-marker{display:none}
.part summary .ic{width:20px;height:20px;color:var(--c,var(--fg-3))}
.part summary b{font-family:var(--f-ui);font-weight:500;font-size:16.5px;color:var(--fg)}
.part summary b[style]{color:var(--fg)}
.part summary .chev{width:12px;height:12px;color:var(--fg-3);transition:transform .2s var(--ease)}
.part[open] summary .chev{transform:rotate(180deg)}
.part > p,.part > ul{margin:0 4px 14px 42px;color:var(--fg-2);font-size:16.5px}
.part > ul{padding-left:18px}
.part > p + p{margin-top:-6px}
.enter{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.enter button{min-height:48px;padding:11px 28px;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-size:20px;letter-spacing:.04em;cursor:pointer}
.enter button:hover{filter:brightness(1.07)}
.enter p{margin:0;font-size:15.5px;font-style:italic;color:var(--fg-3)}
@media (max-width:760px){
  .welcome-in{padding:20px 18px 22px}
  .explain-in{padding:18px 18px 18px}
  .part > p,.part > ul{margin-left:4px}
  .foot-navs{grid-template-columns:1fr 1fr;gap:6px 24px}
  /* a thumb's target (the stranger pass, 2026-10-18: 20 px tall on phones) */
  .foot nav{gap:2px}
  .foot nav a,.foot nav button{padding:6px 0;text-align:left}
}
/* the sign at the foot of every page: the name, the credit, what the name means */
.sign{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.6;color:var(--fg-3)}
.sign .mark{font-family:var(--f-display);font-weight:400;letter-spacing:.05em;color:var(--fg-2)}
/* the sign in three lines: the tagline and its maker, the Moth Priests' line, then what this one reads (Tom, 2026-10-07:
   "three lines would look better") */
.sign .sign-by,.sign .sign-lore{display:block}
.sign .sign-by + .sign-lore{margin-top:3px}
/* "Report a problem" (site/report.js): a quiet line, and a panel over the page */
.report-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;max-width:1260px;margin:0 auto;padding:0 32px 14px;font-family:var(--f-body);font-size:15px;color:var(--fg-3)}
dialog.report{width:min(660px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:22px 24px 20px;
      background:var(--surface-2);color:var(--fg);border:1px solid var(--line-2);border-top:2px solid var(--accent);
      border-radius:var(--r);box-shadow:0 24px 60px var(--shadow)}
dialog.report::backdrop{background:rgba(5,9,12,.62)}
dialog.report h2{margin:0 0 6px;font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.02em;color:var(--fg)}
.report-lede{margin:0 0 14px;font-family:var(--f-body);font-size:16.5px;line-height:1.55;color:var(--fg-2)}
dialog.report fieldset{border:0;margin:0 0 14px;padding:0;display:grid;gap:6px}
dialog.report legend{padding:0;margin:0 0 6px;font-family:var(--f-display);font-size:16px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--fg-2)}
.report-choice{display:flex;gap:10px;align-items:flex-start;font-family:var(--f-body);font-size:16.5px;line-height:1.45;color:var(--fg);cursor:pointer}
.report-choice input{margin-top:4px;accent-color:var(--accent)}
.report-choice[hidden]{display:none}
dialog.report textarea{margin:0 0 12px}
.report-k{margin:14px 0 6px}
.report-text{margin:0;padding:10px 12px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;
      font-family:var(--f-ui);font-size:13.5px;line-height:1.6;color:var(--fg-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.report-status{min-height:1.4em;margin:8px 0 0;font-family:var(--f-body);font-size:15px;color:var(--good)}
.report-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.report-forum{font-family:var(--f-ui);font-size:14px;letter-spacing:0;text-transform:none;color:var(--accent)}

/* ---- motion: slow and small, and none at all for anyone who asks for less ---- */
@keyframes breathe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
@keyframes flutter{to{transform:scaleX(.45)}}
@keyframes unfold{from{opacity:0;transform:scaleY(.94) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes candle{0%,100%{box-shadow:0 12px 32px -12px var(--t-roll)}50%{box-shadow:0 12px 40px -8px var(--t-roll)}}
.emblem .wings{transform-origin:60px 56px;transform-box:view-box;animation:breathe 7s ease-in-out infinite}
.brand:hover .emblem .wings{animation:flutter .13s ease-in-out 10 alternate}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details.ch::details-content,details.aside::details-content,details.why::details-content{height:0;overflow:clip;transition:height .35s var(--ease),content-visibility .35s allow-discrete}
  details.ch[open]::details-content,details.aside[open]::details-content,details.why[open]::details-content{height:auto}
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  @view-transition{navigation:none}}

/* ---- the Settings page's reading choices (site/settings.html), set on <html> by every page's head --------- */
.mast a.chip{text-decoration:none}
.mast .chip[aria-current]{border-color:var(--accent)}
/* letters: the device's own plainer face for reading; titles and controls keep theirs */
:root[data-letters="plain"]{--f-body:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* line spacing: more room between the lines of a passage */
:root[data-spacing="wide"] body,
:root[data-spacing="wide"] :is(p,li,dd,blockquote,.lede,.says,.what span,.note){line-height:1.9!important}
/* less motion: nothing moves or glows (a page crossing over is stopped in each page's head) */
:root[data-motion="less"] *,:root[data-motion="less"] *::before,:root[data-motion="less"] *::after{animation:none!important;transition:none!important}
:root[data-motion="less"] .emblem{filter:none!important}
:root[data-motion="less"] .crumb .dot{box-shadow:none!important}
:root[data-motion="less"] body{background:var(--bg)}
/* higher contrast: brighter ink and firmer lines by night, darker by day (never on paper: print keeps its own) */
@media screen{
  :root[data-contrast="more"]{--fg:#f4f7f8;--fg-2:#d6e0e4;--fg-3:#bccad1;--line:#2e4251;--line-2:#4e6a7b}
  :root[data-contrast="more"][data-theme="day"]{--fg:#060e13;--fg-2:#1c2a32;--fg-3:#2e414b;--line:#b6c5c9;--line-2:#85a0a7}
}
@media screen and (prefers-color-scheme: light){
  :root[data-contrast="more"]:not([data-theme="night"]){--fg:#060e13;--fg-2:#1c2a32;--fg-3:#2e414b;--line:#b6c5c9;--line-2:#85a0a7}
}

/* ---- narrower screens ------------------------------------------------------ */
@media (max-width:1200px){ .mine>a span{display:none} .mine>a{padding:9px} }
@media (max-width:960px){
  .mast .chip b{display:none}
  .mast .chip{padding:9px;min-height:44px}
  .mast .acct-wrap .chip{padding:9px}
  .mast .acct-wrap .chip .ic{display:inline}
  .tools .hide-phone,.mast-top .mine{display:none}
  .iconbtn,.menu-btn{width:44px;height:44px}
  .menu-btn{display:grid}
  .mine-phone{display:flex!important;border-top:1px solid var(--line);margin:0}
  .mine-phone a{flex:1;justify-content:center;text-align:center;padding:12px 6px;min-height:46px;border-radius:0;font-size:15px;display:flex;align-items:center;gap:7px;color:var(--fg-2);text-decoration:none;font-family:var(--f-ui)}
  .mine-phone a+a{border-left:1px solid var(--line)}
  .mine-phone a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--c)}
  .realm-phone{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1196px;margin:10px 32px 12px;padding:10px 14px;min-height:46px;width:calc(100% - 64px);
    border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-family:var(--f-ui);font-size:15.5px;color:var(--fg-2);text-align:left}
  .realm-phone b{color:var(--fg);font-weight:500}
}
@media (max-width:760px){
  body{font-size:17.5px}
  .mast-top{padding:12px 16px 8px;gap:10px;min-height:0}
  .emblem{width:42px;height:42px}
  .brand{gap:10px}
  .word{font-size:21px}
  .tagline{font-size:13px;margin-top:3px}
  .realm-phone{margin:10px 16px 12px;width:calc(100% - 32px)}
  main{padding:20px 16px 50px}
  .intro{padding:20px 16px 0}
  .intro .lede{font-size:17.5px;margin-bottom:16px}
  #foot,.report-line,.foot .sources{padding-left:16px;padding-right:16px}
  .foot .sources #foot{padding-left:0;padding-right:0}
  .two{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;padding:22px 16px 30px}
  .foot nav{justify-content:flex-start}
  .card{padding:18px 16px 20px}
  /* a larger text size leaves the masthead as it is on a phone: grown, its menu button ran past a 320 px edge */
  :root[data-text="l"] .mast{zoom:calc(1/1.1)}
  :root[data-text="xl"] .mast{zoom:calc(1/1.22)}
}
/* the board (site/board.js: library.html's head, board.html): the week's guide, then the guides rated highest */
.show{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--warm);border-radius:var(--r);background:var(--surface)}
.show .kick{grid-column:1/-1;font-family:var(--f-ui);font-size:13.5px;color:var(--warm);margin:0}
.show h3{font-size:26px;margin:0;line-height:1.2}
.show h3 a{color:var(--fg);text-decoration:none}
.show h3 a:hover{color:var(--accent)}
.show .m{font-family:var(--f-ui);font-size:14px;color:var(--fg-3);margin:2px 0 8px}
.show .ab{font-size:16.5px;line-height:1.5;color:var(--fg-2);margin:0;max-width:68ch;overflow-wrap:anywhere}
.show .side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;text-align:right}
.show .stars{font-family:var(--f-ui);font-size:15px;color:var(--fg-2)}
.show .stars b{font-family:var(--f-display);font-size:24px;font-weight:normal;color:var(--fg)}
.show .open{text-decoration:none}
.show .open span{display:inline-block;padding:6px 16px;border:1px solid var(--accent);border-radius:var(--r);font-family:var(--f-ui);font-size:15px;color:var(--accent)}
.show .open:hover span{background:var(--accent);color:var(--on-accent)}
.board-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:0 0 10px}
.board-tools label{display:grid;gap:4px;font-family:var(--f-ui);font-size:14px;color:var(--fg-3)}
.board-tools select{min-height:38px;font-size:15.5px;padding:4px 8px;max-width:100%}
.board-grid{width:100%;border-collapse:collapse;font-size:15.5px}
.board-grid th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2);font-family:var(--f-ui);font-size:14px;font-weight:normal;color:var(--fg-3)}
.board-grid td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--fg-2);vertical-align:baseline}
.board-grid td.r{font-family:var(--f-display);font-size:19px;color:var(--fg-3);width:2.4ch;text-align:right;padding-right:4px}
.board-grid tr.top td.r{color:var(--warm)}
.board-grid td.t a{font-family:var(--f-display);font-size:17.5px;line-height:1.25;color:var(--fg);text-decoration:none;overflow-wrap:anywhere}
.board-grid td.t a:hover{color:var(--accent)}
.board-grid .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.board-grid .few{color:var(--fg-3)}
.board-grid .sub{display:none;font-size:14px;color:var(--fg-3)}
.board-foot{font-family:var(--f-ui);font-size:14px;color:var(--fg-3);margin:10px 0 0;max-width:72ch}
.past{list-style:none;margin:0;padding:0}
.past li{display:grid;grid-template-columns:10em minmax(0,1fr) auto;gap:4px 16px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.past .wk{font-family:var(--f-ui);font-size:14px;color:var(--fg-3)}
.past a{font-family:var(--f-display);font-size:17px;color:var(--fg);text-decoration:none}
.past a:hover{color:var(--accent)}
.past .by{font-size:15px;color:var(--fg-3)}
.past .col{font-family:var(--f-ui);font-size:14px;color:var(--fg-3);text-align:right}
@media (max-width:760px){
  .show{grid-template-columns:1fr}
  .show .side{flex-direction:row;align-items:center;text-align:left}
  .board-grid .wide{display:none}
  .board-grid .sub{display:block}
  .past li{grid-template-columns:1fr}
  .past .col{text-align:left}
}
.mine-phone{display:none}
@media print{
  :root{--bg:#fff;--bg-2:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#fff;--fg:#111;--fg-2:#333;--fg-3:#555;--line:#ccc;--line-2:#bbb;--shadow:transparent;
    /* paper is paper: the accent does not depend on which lamp was lit */
    --ph-mix:40%}
  body{background:#fff;zoom:1}
  .mast,.realm-phone,.foot nav,button,.controls,.subtabs,.report-line,dialog.report,.sheet,.pop{display:none!important}
  .card{box-shadow:none;break-inside:avoid-page}
}

/* spoilers (theme.js siteSpoil): an author's veil, the site's "What happens", the bar above a page that holds them */
.spoil{background:color-mix(in srgb,var(--fg-3) 34%,var(--surface-2));color:transparent;border-radius:3px;padding:0 2px;cursor:pointer;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;user-select:none;transition:background .2s}
.spoil:hover,.spoil:focus-visible{background:color-mix(in srgb,var(--fg-3) 50%,var(--surface-2))}
.spoil.shown{background:color-mix(in srgb,var(--fg-3) 16%,transparent);color:inherit;cursor:auto;user-select:auto}
button.sp-what{display:inline;min-height:0;padding:0;margin-left:4px;background:none;border:0;font-family:var(--f-ui);font-size:13.5px;color:var(--fg-3);
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;cursor:pointer;white-space:nowrap}
button.sp-what:hover,button.sp-what:focus-visible{color:var(--accent)}
.sp-told{display:block;margin:8px 0 2px;padding:6px 12px;border-left:2px solid var(--line-2);color:var(--fg-2);font-size:.97em}
.sp-told[hidden]{display:none}
.sp-told .k2{display:block;font-family:var(--f-ui);font-size:12.5px;color:var(--fg-3);margin-bottom:2px}
.sp-hid{font-family:var(--f-ui);font-size:.88em;color:var(--fg-3)}
.sp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 18px;padding:9px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);font-family:var(--f-ui);font-size:14px;color:var(--fg-2)}
.sp-bar b{color:var(--fg);font-weight:500}
.sp-bar .sp-acts{display:inline-flex;gap:8px;align-items:center}
.sp-bar .linkish,.sp-bar a{font-size:14px}
.sp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:6px 0 4px;font-family:var(--f-ui);font-size:13.5px;color:var(--fg-3)}
.sp-tools button{min-height:30px;padding:3px 10px;font-size:13.5px}
.sp-tools code{font-size:13px;color:var(--fg-2)}