:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

  /* One dark world by choice: a tape played back in a dark room. */
  :root {
    color-scheme: dark;
    --ink0: #0a0908;
    --ink1: #110f0c;
    --ink2: #171310;
    --ink3: #221c16;
    --line: #2f261d;
    --line-strong: #4a3b2c;
    --bone: #e9dcc1;
    --parch: #b8ab92;
    --parch-dim: #8c8069;
    --lamp: #f0b13a;
    --lamp-deep: #b97d1a;
    --rec: #e23a2e;
    --rec-deep: #7c1c16;
    --paper: #efe6d2;
    --paper-ink: #2a231b;
    --paper-dim: #6b5f4d;
    --card-edge: #cfc6b4;
    --card-blue: #86b6d6;
    --udder: #eea3b4;
    --display: "Grenze Gotisch", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", "Segoe UI", sans-serif;
    --osd: "VT323", "Lucida Console", "Courier New", monospace;
    --measure: 62ch;
    --gutter: clamp(16px, 4vw, 48px);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { background: var(--ink0); }
  body {
    margin: 0; color: var(--parch); font-family: var(--body); font-size: 17px; line-height: 1.55;
    padding-inline: var(--gutter); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  ::selection { background: var(--lamp); color: var(--ink0); }
  a { color: var(--bone); }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
  h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
  p { margin: 0; }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; color: inherit; }

  /* tape */
  .tape-noise { position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px); mix-blend-mode: multiply; opacity: .7; }
  .tape-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); transition: background 1.2s; }
  .tape-grain { position: fixed; inset: -50%; pointer-events: none; z-index: 51; opacity: .055; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
  @keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); } 60% { transform: translate(-1%,4%); } 80% { transform: translate(4%,-1%); } 100% { transform: translate(0,0); } }
  [data-farm="furious"] .tape-vignette { background: radial-gradient(ellipse at center, rgba(90,8,4,.08) 40%, rgba(120,12,6,.62) 100%); }

  /* camcorder OSD */
  .osd { position: fixed; z-index: 60; pointer-events: none; font-family: var(--osd); font-size: clamp(17px, 2vw, 22px); line-height: 1; color: var(--bone); text-shadow: 0 0 6px rgba(233,220,193,.35), 1px 0 0 rgba(226,58,46,.35), -1px 0 0 rgba(90,160,255,.25); letter-spacing: .04em; }
  .osd-rec { top: calc(env(safe-area-inset-top, 0px) + 14px); left: var(--gutter); display: flex; flex-direction: column; gap: 6px; }
  .osd-rec .dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--rec); margin-right: .35em; box-shadow: 0 0 8px var(--rec); animation: blink 1.4s steps(1) infinite; vertical-align: 5%; }
  @keyframes blink { 50% { opacity: .15; } }
  .osd-stamp { right: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
  .osd-stamp .osd-phase { color: var(--lamp); font-size: .78em; }
  .osd-stamp .osd-phase.red { color: var(--rec); }
  .osd-bat { top: calc(env(safe-area-inset-top, 0px) + 14px); right: var(--gutter); display: flex; align-items: center; gap: 8px; }
  .osd-bat .cell { width: 34px; height: 13px; border: 1.5px solid var(--bone); position: relative; }
  .osd-bat .cell::after { content: ""; position: absolute; right: -5px; top: 3px; width: 3px; height: 5px; background: var(--bone); }
  .osd-bat .cell i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: var(--fill, 90%); background: var(--bone); }
  .osd-bat .nolight { display: none; color: var(--rec); }
  [data-light="taken"] .osd-bat .cell { display: none; }
  [data-light="taken"] .osd-bat .nolight { display: inline; }

  /* shell */
  .page { max-width: 1180px; margin: 0 auto; }
  section { padding-block: clamp(56px, 9vw, 116px); border-top: 1px solid var(--line); }
  .eyebrow { font-family: var(--osd); text-transform: uppercase; letter-spacing: .16em; font-size: 17px; color: var(--lamp); display: inline-flex; align-items: center; gap: 12px; }
  .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--lamp); }
  .h2 { font-family: var(--display); font-weight: 600; color: var(--bone); font-size: clamp(36px, 5.6vw, 64px); line-height: 1; letter-spacing: .005em; margin-top: 14px; max-width: 20ch; }
  .lede { max-width: var(--measure); font-size: clamp(18px, 2vw, 21px); line-height: 1.5; margin-top: 22px; color: var(--parch); }
  .lede strong { color: var(--bone); font-weight: 700; }
  .say { font-family: var(--osd); color: var(--bone); letter-spacing: .04em; font-size: 1.08em; }
  .say.lamp { color: var(--lamp); }
  .say.red { color: var(--rec); }
  .btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--osd); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 14px 22px; border: 1.5px solid var(--lamp); color: var(--ink0); background: var(--lamp); transition: box-shadow .25s, transform .15s, background .2s; }
  .btn:hover { box-shadow: 0 0 26px rgba(240,177,58,.35); transform: translateY(-1px); background: #f6c257; }
  .btn.ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); }
  .btn.ghost:hover { border-color: var(--bone); box-shadow: none; }
  .btn.red { background: var(--rec-deep); border-color: var(--rec); color: var(--bone); }
  .btn.red:hover { background: #962219; box-shadow: 0 0 26px rgba(226,58,46,.35); }
  .btn .k { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 5px; border: 1px solid currentColor; font-size: 16px; }
  .btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }

  /* hero */
  .hero { position: relative; padding-block: clamp(70px, 10vw, 120px) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; border-top: 0; isolation: isolate; }
  .hero-bg { position: absolute; top: -40px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; overflow: hidden; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .95; filter: saturate(.85) brightness(1.35) contrast(1.12); }
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,.2) 55%, var(--ink0) 100%), linear-gradient(90deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 55%); }
  .hero-logo { position: relative; justify-self: center; width: min(100%, 520px); }
  .hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(240,177,58,.18)) drop-shadow(0 14px 30px rgba(0,0,0,.8)); animation: tunein 1.6s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes tunein {
    0% { opacity: .4; transform: translateX(-18px) scaleX(1.06); filter: blur(3px) drop-shadow(8px 0 0 rgba(226,58,46,.6)) drop-shadow(-8px 0 0 rgba(80,150,255,.5)); }
    35% { opacity: 1; transform: translateX(6px) scaleX(.99); }
    55% { transform: translateX(-2px) scaleX(1.01); filter: blur(0) drop-shadow(2px 0 0 rgba(226,58,46,.4)) drop-shadow(-2px 0 0 rgba(80,150,255,.35)); }
    100% { transform: none; }
  }
  .hero-copy { display: grid; gap: 22px; }
  .hero-kicker { font-family: var(--osd); color: var(--lamp); letter-spacing: .14em; text-transform: uppercase; font-size: 18px; }
  .hero-title { font-family: var(--display); font-weight: 800; color: var(--bone); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; }
  .hero-title em { font-style: normal; color: var(--lamp); }
  .hero-sub { font-size: clamp(18px, 2.1vw, 22px); max-width: 46ch; line-height: 1.45; }
  .hero-sub b { color: var(--bone); }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
  .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--osd); font-size: 19px; color: var(--parch); letter-spacing: .05em; margin-top: 6px; }
  .hero-facts span::before { content: "■ "; color: var(--lamp); font-size: .7em; vertical-align: 15%; }

  /* the night */
  .clock { margin-top: 44px; display: grid; gap: 16px; }
  .clock-bar { position: relative; height: 10px; background: var(--ink3); border: 1px solid var(--line); }
  .clock-bar i { position: absolute; top: -1px; bottom: -1px; left: var(--l); width: var(--w); background: var(--seg); }
  .phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .phase { border: 1px solid var(--line); background: var(--ink1); padding: 20px 18px 22px; display: grid; gap: 10px; align-content: start; position: relative; }
  .phase::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--seg, var(--lamp)); }
  .phase .t { font-family: var(--osd); color: var(--parch-dim); font-size: 18px; letter-spacing: .08em; }
  .phase h3 { font-family: var(--display); font-weight: 600; color: var(--bone); font-size: 28px; line-height: 1; }
  .phase p { font-size: 16px; line-height: 1.5; }
  .phase .card-line { font-family: var(--osd); font-size: 17px; color: var(--bone); letter-spacing: .03em; border-left: 2px solid var(--lamp); padding-left: 10px; line-height: 1.25; }
  .horn { margin-top: 14px; border: 1px solid var(--rec-deep); background: #170c0a; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
  .horn .at { font-family: var(--osd); color: var(--rec); font-size: 22px; letter-spacing: .06em; }
  .horn .say { font-size: 22px; }
  .horn p { font-size: 16px; flex-basis: 100%; }

  /* chore card toy, drawn like the in-game card */
  .milk { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
  .cc-wrap { position: relative; padding-top: 38px; }
  .cc { position: relative; background: #0b0a09; border: 2px solid var(--card-edge); font-family: var(--osd); color: var(--bone); user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; }
  .cc:focus-visible { box-shadow: 0 0 0 3px var(--lamp); }
  .cc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px 0; }
  .cc-head .title { font-size: 26px; letter-spacing: .06em; }
  .cc-head .count { font-size: 19px; color: var(--parch); letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cc-head .grade { color: var(--bone); margin-left: 12px; }
  .cc-scene { position: relative; height: clamp(150px, 22vw, 200px); cursor: pointer; }
  .cc-scene svg { position: absolute; left: 50%; top: 4px; height: calc(100% - 4px); width: auto; transform: translateX(-50%); overflow: visible; }
  .cc-scene .udder { transform-box: fill-box; transform-origin: top center; transition: transform .08s; }
  .cc-scene.squeeze .udder { transform: scaleY(.72); }
  .pop { position: absolute; font-size: 24px; letter-spacing: .04em; opacity: 0; pointer-events: none; }
  .pop.show { animation: pop .7s ease-out; }
  .pop.red { color: var(--rec); }
  @keyframes pop { 0% { opacity: 1; transform: translateY(4px) scale(.9); } 30% { opacity: 1; transform: translateY(-4px) scale(1.08); } 100% { opacity: 0; transform: translateY(-14px); } }
  .cc-lane { position: relative; height: 46px; margin: 0 14px; cursor: pointer; }
  .cc-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #6d665a; }
  .cc-lane .miss-bin { position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--rec); }
  .cc-lane .box { position: absolute; left: 15%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--card-blue); background: rgba(134,182,214,.12); }
  .cc-lane .box.flash { background: rgba(134,182,214,.55); }
  .cc-lane .now { position: absolute; left: 15%; top: -14px; transform: translateX(-50%); color: var(--card-blue); font-size: 18px; letter-spacing: .04em; }
  .drop { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -7px 0 0 -6px; background: #f3efe6; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
  .drop.gone { display: none; }
  .cc-foot { padding: 10px 14px 14px; display: grid; gap: 6px; text-align: center; }
  .cc-foot .keys { font-size: 17px; color: var(--parch); letter-spacing: .05em; }
  .cc-foot .quip { font-size: 23px; letter-spacing: .04em; min-height: 1.15em; }
  .cc-foot .quip.red { color: var(--rec); }
  .cc-threat { position: absolute; left: 7%; right: 7%; top: 0; height: 34px; background: var(--rec-deep); color: var(--bone); font-family: var(--osd); font-size: 19px; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 10px; animation: throb .7s ease-in-out infinite alternate; }
  .cc-threat button { background: var(--bone); color: var(--rec-deep); border: 0; font-family: var(--osd); font-size: 18px; padding: 2px 10px; letter-spacing: .06em; }
  @keyframes throb { from { background: var(--rec-deep); } to { background: #a8261d; } }
  .cc-result { position: absolute; inset: 0; background: rgba(11,10,9,.94); display: grid; place-content: center; gap: 10px; text-align: center; padding: 18px; }
  .cc-result .big { font-size: clamp(30px, 4vw, 40px); letter-spacing: .06em; }
  .cc-result .small { font-size: 19px; color: var(--parch); letter-spacing: .04em; max-width: 36ch; margin-inline: auto; }
  .cc-result.cut { background: #000; }
  .cc-result.cut .big { color: var(--rec); }
  .cc-play { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 14px; }
  .cc-play p { font-size: 15.5px; color: var(--parch-dim); }
  .milk-notes { display: grid; gap: 14px; }
  .milk-notes h3 { font-family: var(--osd); font-weight: 400; color: var(--lamp); letter-spacing: .14em; font-size: 18px; }
  .hens { display: flex; flex-wrap: wrap; gap: 6px; }
  .hens span { font-family: var(--osd); font-size: 17px; color: var(--bone); border: 1px solid var(--line-strong); padding: 3px 8px; letter-spacing: .04em; }
  .milk-notes p { font-size: 16px; }
  .cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
  .cards4 figure { margin: 0; border: 1px solid var(--line); background: #000; display: grid; align-content: start; }
  .cards4 img { width: 100%; height: auto; image-rendering: pixelated; }
  .cards4 figcaption { padding: 10px 12px 12px; background: var(--ink1); display: grid; gap: 4px; }
  .cards4 figcaption b { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--bone); line-height: 1.05; }
  .cards4 figcaption span { font-family: var(--osd); font-size: 16px; letter-spacing: .03em; color: var(--parch); line-height: 1.2; }
  .gags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
  .gags span { font-family: var(--osd); font-size: 17px; letter-spacing: .04em; color: var(--bone); border: 1px solid var(--line); background: var(--ink1); padding: 6px 10px; }
  .gags span.miss { color: var(--rec); }

  /* the widow's hall */
  .widow-wrap { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
  .hall { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid var(--line-strong); cursor: crosshair; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .hall:focus-visible { box-shadow: 0 0 0 3px var(--lamp); }
  .hall .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.85) contrast(1.06) saturate(.8); transition: filter .8s; }
  .hall .widow { position: absolute; width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; }
  .hall .shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 190px at var(--x, 50%) var(--y, 45%), rgba(255,226,170,.16) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); opacity: 0; transition: opacity .25s; }
  .hall.watched .shade { opacity: 1; }
  .hall.hop .bg, .hall.hop .widow { animation: hop .2s steps(3); }
  @keyframes hop { 0% { translate: 5px 0; filter: brightness(2.3) contrast(1.3); } 50% { translate: -4px 1px; } 100% { translate: 0 0; } }
  .hall .gone-msg { position: absolute; inset: 0; display: none; place-content: center; text-align: center; gap: 10px; padding: 20px; font-family: var(--osd); }
  .hall .gone-msg b { font-size: clamp(26px, 3.6vw, 40px); color: var(--rec); letter-spacing: .06em; font-weight: 400; }
  .hall .gone-msg span { font-size: 19px; color: var(--parch); letter-spacing: .04em; }
  .hall.taken { cursor: default; }
  .hall.taken .bg { filter: brightness(.12) saturate(0); }
  .hall.taken .widow { display: none; }
  .hall.taken .gone-msg { display: grid; }
  .readout { display: grid; gap: 14px; }
  .chip { font-family: var(--osd); font-size: 20px; letter-spacing: .06em; padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--ink1); color: var(--parch); display: flex; justify-content: space-between; gap: 10px; }
  .chip.on { color: var(--lamp); border-color: var(--lamp-deep); }
  .chip.off { color: var(--rec); border-color: var(--rec-deep); }
  .steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .steps i { height: 16px; border: 1px solid var(--line-strong); background: var(--ink2); }
  .steps i.on { background: var(--bone); border-color: var(--bone); }
  .steps i.on.close { background: var(--rec); border-color: var(--rec); }
  .status { font-family: var(--osd); font-size: 21px; color: var(--bone); letter-spacing: .04em; line-height: 1.2; min-height: 2.4em; }
  .readout .row { display: flex; flex-wrap: wrap; gap: 10px; }
  .readout .fine { font-size: 15.5px; color: var(--parch-dim); }

  /* the lineup */
  .lineup-scroll { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line-strong); background: #1a1613; }
  .lineup { position: relative; min-width: 760px; }
  .lineup img { width: 100%; height: auto; }
  .lineup .m { position: absolute; left: 10px; transform: translateY(-115%); font-family: var(--osd); font-size: 16px; color: var(--bone); opacity: .75; letter-spacing: .06em; pointer-events: none; }
  .plates { position: relative; height: 62px; border-top: 1px solid var(--line-strong); background: var(--ink1); }
  .plate { position: absolute; top: 10px; transform: translateX(-50%); background: var(--ink2); border: 1px solid var(--line-strong); color: var(--parch); font-family: var(--osd); font-size: 17px; letter-spacing: .06em; padding: 4px 9px 5px; line-height: 1.05; white-space: nowrap; text-align: center; }
  .plate small { display: block; font-size: 13px; color: var(--parch-dim); letter-spacing: .12em; }
  .plate:hover { border-color: var(--bone); color: var(--bone); }
  .plate[aria-pressed="true"] { background: var(--lamp); border-color: var(--lamp); color: var(--ink0); }
  .plate[aria-pressed="true"] small { color: var(--ink0); }
  .sheet { margin-top: 16px; background: var(--paper); color: var(--paper-ink); font-family: var(--osd); padding: 20px 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 28px; box-shadow: 0 24px 50px rgba(0,0,0,.55); position: relative; }
  .sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
  .sheet .fields { display: grid; gap: 6px; align-content: start; }
  .sheet .f { display: grid; grid-template-columns: 9ch 1fr; gap: 10px; font-size: 19px; letter-spacing: .03em; border-bottom: 1px dashed #a39679; padding-bottom: 4px; }
  .sheet .f span:first-child { color: var(--paper-dim); letter-spacing: .1em; font-size: 16px; padding-top: 2px; }
  .sheet .name { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 42px); line-height: 1; margin-bottom: 8px; }
  .sheet .rule { font-size: 24px; line-height: 1.15; letter-spacing: .03em; border: 3px solid #b3231a; color: #b3231a; padding: 10px 12px; transform: rotate(-1.2deg); }
  .sheet .rule small { display: block; font-size: 15px; letter-spacing: .16em; margin-bottom: 4px; }
  .sheet .ezra-says { font-size: 19px; line-height: 1.25; color: var(--paper-ink); margin-top: 14px; }
  .sheet .ezra-says small { display: block; font-size: 15px; letter-spacing: .14em; color: var(--paper-dim); margin-bottom: 2px; }
  .also { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .also h3 { grid-column: 1 / -1; font-family: var(--osd); font-weight: 400; color: var(--lamp); letter-spacing: .14em; font-size: 18px; margin-bottom: 8px; }
  .also div { border-top: 1px solid var(--line); padding: 12px 0; display: grid; grid-template-columns: 11ch 1fr; gap: 4px 14px; }
  .also b { font-family: var(--display); font-weight: 600; color: var(--bone); font-size: 21px; line-height: 1.1; }
  .also p { font-size: 15.5px; line-height: 1.45; }
  .also p .say { font-size: 16.5px; color: var(--lamp); }

  /* the quiz */
  .quiz { margin-top: 40px; border: 1px solid var(--line-strong); background: var(--ink1); max-width: 900px; }
  .quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-family: var(--osd); }
  .quiz-head .stamp { color: var(--lamp); font-size: 21px; letter-spacing: .06em; }
  .pips { display: flex; gap: 5px; }
  .pips i { width: 14px; height: 14px; border: 1px solid var(--line-strong); background: var(--ink2); }
  .pips i.now { border-color: var(--bone); }
  .pips i.ok { background: var(--lamp); border-color: var(--lamp); }
  .pips i.bad { background: var(--rec); border-color: var(--rec); }
  .quiz-body { padding: 22px 20px 24px; display: grid; gap: 18px; }
  .quiz-body .who { font-family: var(--osd); color: var(--parch-dim); letter-spacing: .14em; font-size: 16px; }
  .quiz-body .q { font-size: clamp(20px, 2.3vw, 25px); color: var(--bone); line-height: 1.35; max-width: 48ch; }
  .opts { display: grid; gap: 8px; }
  .opt { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; background: var(--ink2); border: 1px solid var(--line-strong); color: var(--bone); font-size: 17.5px; transition: border-color .15s, background .15s; }
  .opt:hover:not([disabled]) { border-color: var(--bone); background: var(--ink3); }
  .opt .k { font-family: var(--osd); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); color: var(--parch); font-size: 18px; }
  .opt[disabled] { cursor: default; color: var(--parch-dim); }
  .opt.picked.ok { border-color: var(--lamp); color: var(--bone); background: #1e170f; }
  .opt.picked.bad { border-color: var(--rec); color: var(--bone); background: #1c0e0b; }
  .opt.reveal { border-color: var(--lamp-deep); color: var(--parch); }
  .outcome { border-left: 3px solid var(--lamp); padding: 4px 0 4px 16px; display: grid; gap: 8px; }
  .outcome.bad { border-left-color: var(--rec); }
  .outcome .verdict { font-family: var(--osd); font-size: 24px; letter-spacing: .06em; color: var(--lamp); }
  .outcome.bad .verdict { color: var(--rec); }
  .outcome p { font-size: 17px; max-width: 58ch; }
  .outcome .rule { font-family: var(--osd); font-size: 19px; color: var(--bone); letter-spacing: .04em; }
  .quiz-foot { display: flex; flex-wrap: wrap; gap: 10px; }
  .result-big { font-family: var(--osd); font-size: clamp(26px, 3.4vw, 36px); color: var(--bone); letter-spacing: .05em; line-height: 1.15; max-width: 30ch; }
  .result-score { font-family: var(--osd); font-size: 20px; color: var(--lamp); letter-spacing: .08em; }

  /* ezra */
  .ezra { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); margin-top: 40px; align-items: start; }
  .ezra-card { border: 1px solid var(--line); background: radial-gradient(circle at 30% 72%, rgba(240,177,58,.22), rgba(0,0,0,0) 50%), #221d19; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 18px; align-items: end; }
  .ezra-card img { height: 230px; width: auto; }
  .ezra-card .tag { font-family: var(--osd); display: grid; gap: 6px; }
  .ezra-card .tag b { font-weight: 400; color: var(--lamp); font-size: 26px; letter-spacing: .1em; }
  .ezra-card .tag span { color: var(--parch); font-size: 17px; letter-spacing: .04em; line-height: 1.2; }
  .ezra-notes { display: grid; gap: 12px; margin-top: 18px; font-size: 16px; }
  .ask { border: 1px solid var(--line-strong); background: var(--ink1); }
  .ask-head { font-family: var(--osd); display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--bone); letter-spacing: .08em; font-size: 20px; }
  .ask-head span:last-child { color: var(--parch-dim); font-size: 16px; }
  .ask-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-list button { text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 10px 14px; font-family: var(--osd); font-size: 18px; color: var(--parch); letter-spacing: .04em; display: grid; grid-template-columns: 2.4ch 1fr; gap: 6px; }
  .ask-list button:nth-child(2n) { border-right: 0; }
  .ask-list button:hover { color: var(--bone); background: var(--ink2); }
  .ask-list button[aria-pressed="true"] { color: var(--ink0); background: var(--lamp); }
  .ask-list button .n { opacity: .7; }
  .answer { padding: 16px 18px 20px; display: grid; gap: 6px; min-height: 124px; align-content: start; }
  .answer .asked { font-family: var(--osd); color: var(--parch-dim); font-size: 17px; letter-spacing: .06em; }
  .answer .said { font-family: var(--osd); color: var(--lamp); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: .04em; line-height: 1.15; }

  /* crew + wheel */
  .crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
  .card { border: 1px solid var(--line); background: var(--ink1); padding: 20px 18px 22px; display: grid; gap: 10px; align-content: start; }
  .card .k { font-family: var(--osd); color: var(--lamp); letter-spacing: .12em; font-size: 16px; text-transform: uppercase; }
  .card h3 { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--bone); line-height: 1; }
  .card p { font-size: 15.5px; line-height: 1.45; }
  .card .say { font-size: 17px; }
  .wheel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); margin-top: 48px; align-items: center; }
  .wheel-disc { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
  .wheel-disc canvas { width: 100%; height: 100%; display: block; transition: transform 3.4s cubic-bezier(.12,.72,.08,1); }
  .wheel-disc .pointer { position: absolute; left: 50%; top: -6px; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 26px solid var(--lamp); transform: translateX(-50%); filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); z-index: 2; }
  .deal { display: grid; gap: 14px; }
  .deal h3 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); color: var(--bone); line-height: 1.05; }
  .deal p { font-size: 16.5px; max-width: 52ch; }
  .dealt { border: 3px solid var(--lamp-deep); background: #1a1108; padding: 16px 18px; display: grid; gap: 8px; box-shadow: inset 0 0 0 2px #0a0908; min-height: 132px; align-content: center; }
  .dealt .tier { font-family: var(--osd); font-size: 19px; letter-spacing: .16em; color: var(--lamp); }
  .dealt .job { font-family: var(--osd); font-size: clamp(26px, 3vw, 34px); color: var(--bone); letter-spacing: .04em; line-height: 1.05; }
  .dealt .rule { font-family: var(--osd); font-size: 17px; color: var(--parch); letter-spacing: .05em; }
  .dealt.spinning .job { color: var(--parch-dim); }

  /* tape gallery */
  .tape-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .tape-grid figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 16/10; cursor: none; }
  .tape-grid figure.wide { grid-column: span 2; }
  .tape-grid img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) contrast(1.05); transition: filter .3s; }
  .tape-grid figure .torch { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(circle 150px at var(--x, 50%) var(--y, 50%), rgba(240,200,120,.28) 0%, rgba(240,200,120,.08) 40%, rgba(0,0,0,.72) 100%); mix-blend-mode: screen; }
  .tape-grid figure .shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(circle 150px at var(--x, 50%) var(--y, 50%), transparent 0%, transparent 50%, rgba(0,0,0,.78) 100%); }
  .tape-grid figure:hover .torch, .tape-grid figure:hover .shade { opacity: 1; }
  .tape-grid figure:hover img { filter: brightness(1.2) contrast(1.05); }
  .tape-grid figcaption { position: absolute; left: 12px; bottom: 10px; right: 12px; font-family: var(--osd); font-size: 17px; color: var(--bone); letter-spacing: .06em; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); }
  .tape-grid figure .rec { position: absolute; left: 12px; top: 8px; font-family: var(--osd); font-size: 15px; color: var(--bone); letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
  .tape-grid figure .rec::before { content: "●"; color: var(--rec); margin-right: 5px; }
  [data-light="taken"] .tape-grid figure { cursor: default; }
  [data-light="taken"] .tape-grid figure .torch, [data-light="taken"] .tape-grid figure .shade { display: none; }
  [data-light="taken"] .tape-grid figure:hover img, [data-light="taken"] .tape-grid img { filter: brightness(.4) contrast(1.05); }
  .tape-note { margin-top: 14px; font-family: var(--osd); color: var(--parch-dim); letter-spacing: .06em; font-size: 17px; }
  .tape-note .taken-note { display: none; color: var(--rec); }
  [data-light="taken"] .tape-note .taken-note { display: inline; }
  @media (hover: none) { .tape-grid figure { cursor: default; } .tape-grid img { filter: brightness(.95); } }

  /* nine nights */
  .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
  .act { border: 1px solid var(--line); background: var(--ink1); padding: 22px 20px; display: grid; gap: 10px; align-content: start; }
  .act .n { font-family: var(--osd); color: var(--parch-dim); letter-spacing: .12em; font-size: 16px; }
  .act h3 { font-family: var(--display); font-weight: 600; font-size: 34px; color: var(--bone); line-height: 1; }
  .act .where { font-family: var(--osd); color: var(--lamp); letter-spacing: .06em; font-size: 17px; }
  .act p { font-size: 15.5px; }
  .ending { margin-top: 18px; background: var(--paper); color: var(--paper-ink); font-family: var(--osd); font-size: 19px; padding: 18px 20px; letter-spacing: .03em; line-height: 1.3; }

  /* lines */
  .lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
  .lines > .line { border: 1px solid var(--line); background: var(--ink1); padding: 22px 20px; display: grid; gap: 14px; align-content: space-between; }
  .lines .line q { quotes: "\201C" "\201D"; font-family: var(--display); font-weight: 600; font-size: 25px; color: var(--bone); line-height: 1.12; }
  .lines .line .src { font-family: var(--osd); color: var(--parch-dim); letter-spacing: .08em; font-size: 16px; }

  /* the bell */
  .bell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
  .bell-copy { display: grid; gap: 22px; align-content: start; }
  .bell-copy .row { display: flex; flex-wrap: wrap; gap: 10px; }
  .notices { border: 1px solid var(--line-strong); background: #000; min-height: 280px; padding: 20px 22px; display: grid; gap: 12px; align-content: start; font-family: var(--osd); }
  .notices .idle { color: var(--parch-dim); font-size: 19px; letter-spacing: .05em; }
  .notices p { font-size: clamp(22px, 2.6vw, 30px); color: var(--bone); letter-spacing: .05em; line-height: 1.1; }
  .notices p.red { color: var(--rec); }
  .notices p.big { font-size: clamp(40px, 6vw, 64px); color: var(--lamp); }
  .notices p.in { animation: notice .35s steps(3); }
  @keyframes notice { 0% { opacity: 0; transform: translateX(-10px); } 60% { opacity: 1; transform: translateX(3px); } 100% { transform: none; } }
  .shake { animation: shake .45s steps(6); }
  @keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 2px); } }

  footer { border-top: 1px solid var(--line); padding-block: 40px 120px; display: grid; gap: 22px; }
  .foot-row { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--osd); font-size: 18px; letter-spacing: .06em; color: var(--parch-dim); }
  .foot-row b { color: var(--bone); font-weight: 400; }
  .foot-slate { font-family: var(--display); font-size: 28px; color: var(--bone); font-weight: 600; }
  .foot-fine { font-size: 14.5px; color: var(--parch-dim); max-width: 70ch; }

  @media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; }
    .hero-logo { width: min(100%, 420px); justify-self: start; }
    .phases, .crew, .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .milk, .widow-wrap, .ezra, .wheel, .bell, .lines, .acts { grid-template-columns: 1fr; }
    .widow-wrap .readout { max-width: 560px; }
    .tape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tape-grid figure.wide { grid-column: span 2; }
    .sheet { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    body { font-size: 16px; }
    .osd { font-size: 15px; }
    .osd-bat { display: none; }
    .phases, .crew, .cards4, .tape-grid, .also { grid-template-columns: 1fr; }
    .tape-grid figure.wide { grid-column: auto; }
    .ask-list { grid-template-columns: 1fr; }
    .ask-list button { border-right: 0; }
    .cc-head .title { font-size: 21px; }
    .cc-head .count { font-size: 16px; }
    .cc-foot .quip { font-size: 19px; }
    .cc-threat { font-size: 15px; left: 2%; right: 2%; }
    .ezra-card img { height: 180px; }
    .also div { grid-template-columns: 1fr; }
    .sheet .f { grid-template-columns: 8ch 1fr; font-size: 17px; }
  }

  /* ---------- v4: the top bar (languages, download, the file) ---------- */
  .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: calc(env(safe-area-inset-top, 0px) + 54px) 0; font-family: var(--osd); position: relative; z-index: 5; }
  .langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .langs .cap { color: var(--parch-dim); font-size: 16px; letter-spacing: .14em; margin-right: 8px; }
  .langs button { background: transparent; border: 1px solid var(--line-strong); color: var(--parch); font-family: var(--osd); font-size: 18px; letter-spacing: .06em; line-height: 1; padding: 6px 10px; min-height: 32px; }
  .langs button:hover { border-color: var(--bone); color: var(--bone); }
  .langs button[aria-pressed="true"] { background: var(--lamp); border-color: var(--lamp); color: var(--ink0); }
  .langs button[lang="ja"] { font-family: "DotGothic16", "Hiragino Sans", "Yu Gothic", sans-serif; font-size: 15px; }
  .langs button[lang="ko"] { font-family: "Nanum Gothic Coding", "Malgun Gothic", sans-serif; font-size: 15px; }
  .langs button[lang="zh-Hans"] { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 15px; }
  .acct { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .navlink { font-family: var(--osd); font-size: 19px; letter-spacing: .08em; color: var(--bone); text-decoration: none; border: 1px solid var(--line-strong); padding: 6px 12px; line-height: 1; min-height: 32px; display: inline-flex; align-items: center; gap: 8px; }
  .navlink:hover { border-color: var(--bone); }
  .navlink.strong { border-color: var(--lamp-deep); color: var(--lamp); }
  .navlink.strong:hover { border-color: var(--lamp); }
  .navlink .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
  .hero { padding-block: clamp(34px, 6vw, 72px) clamp(40px, 6vw, 80px); }

  /* ---------- v4: the tapes (downloads) ---------- */
  .tapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
  .cassette { position: relative; background: #151210; border: 1px solid #2c241c; border-radius: 6px; padding: 16px 16px 20px; display: grid; gap: 14px; align-content: start; box-shadow: inset 0 0 0 3px #0c0a08, 0 18px 40px rgba(0,0,0,.45); }
  .cassette .label { background: var(--paper); color: var(--paper-ink); border-radius: 3px; padding: 12px 14px 14px; display: grid; gap: 4px; position: relative; overflow: hidden; }
  .cassette .label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--rec) 0 18px, var(--lamp) 18px 36px); opacity: .85; }
  .cassette .label .brand { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--paper-ink); }
  .cassette .label .plat { font-family: var(--osd); font-size: 30px; letter-spacing: .06em; line-height: 1; }
  .cassette .label .spec { font-family: var(--osd); font-size: 16px; letter-spacing: .06em; color: var(--paper-dim); padding-bottom: 8px; }
  .cassette .reels { display: flex; justify-content: center; gap: 44px; padding: 4px 0; }
  .cassette .reels i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #3a3027; background: radial-gradient(circle, #0a0908 0 7px, #2a221b 8px 13px, #0f0c0a 14px); }
  .cassette.live .reels i { animation: reel 3.2s linear infinite; background: conic-gradient(from 0deg, #0f0c0a 0 20deg, #2a221b 20deg 60deg, #0f0c0a 60deg 140deg, #2a221b 140deg 180deg, #0f0c0a 180deg 260deg, #2a221b 260deg 300deg, #0f0c0a 300deg); }
  @keyframes reel { to { transform: rotate(360deg); } }
  .cassette .stamp { justify-self: start; font-family: var(--osd); font-size: 19px; letter-spacing: .12em; padding: 3px 10px; border: 2px solid currentColor; line-height: 1.1; }
  .cassette.live .stamp { color: var(--lamp); }
  .cassette.later .stamp { color: var(--rec); transform: rotate(-3deg); }
  .cassette ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .cassette li { font-size: 15.5px; line-height: 1.45; padding-left: 16px; position: relative; }
  .cassette li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--lamp-deep); }
  .cassette .url { font-family: var(--osd); font-size: 18px; color: var(--bone); letter-spacing: .04em; user-select: all; -webkit-user-select: all; word-break: break-all; }
  .cassette .url small { display: block; color: var(--parch-dim); font-size: 15px; letter-spacing: .08em; user-select: none; -webkit-user-select: none; }
  .cassette .waiting { font-family: var(--osd); font-size: 17px; color: var(--parch); letter-spacing: .05em; min-height: 1.2em; }
  .cassette .btn { justify-self: start; }
  .cassette.later { opacity: .92; }
  .dl-lang { margin-top: 18px; font-family: var(--osd); font-size: 18px; color: var(--parch-dim); letter-spacing: .05em; }

  /* ---------- v4: the personnel office (accounts) ---------- */
  .office { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
  .folder { position: relative; background: #c9a86a; border-radius: 4px 14px 4px 4px; padding: 26px 18px 18px; box-shadow: 0 24px 50px rgba(0,0,0,.55); }
  .folder::before { content: ""; position: absolute; left: 0; top: -14px; width: 42%; height: 18px; background: #c9a86a; border-radius: 8px 8px 0 0; }
  .folder .tabtext { position: absolute; left: 14px; top: -11px; font-family: var(--osd); font-size: 15px; letter-spacing: .14em; color: #4a3a22; }
  .form { background: var(--paper); color: var(--paper-ink); padding: 20px 20px 22px; font-family: var(--osd); display: grid; gap: 16px; position: relative; min-height: 260px; }
  .form::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
  .form h3 { font-family: var(--osd); font-weight: 400; font-size: 28px; letter-spacing: .08em; line-height: 1.05; }
  .form .sub { font-family: var(--body); font-size: 16px; color: var(--paper-dim); line-height: 1.45; }
  .form .row2 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  .form .no { font-size: 20px; color: #b3231a; letter-spacing: .1em; }
  .form label, .form legend { font-size: 16px; letter-spacing: .12em; color: var(--paper-dim); }
  .form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
  .form input[type="text"] { font-family: var(--osd); font-size: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink); background: transparent; border: 0; border-bottom: 2px solid #8d7f66; padding: 4px 2px; width: 100%; border-radius: 0; }
  .form input[type="text"]:focus { outline: none; border-bottom-color: var(--paper-ink); background: rgba(0,0,0,.04); }
  .form .hint { font-size: 15px; color: var(--paper-dim); letter-spacing: .04em; }
  .opts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .opts3 { display: flex; flex-wrap: wrap; gap: 6px; }
  .pick { position: relative; display: block; }
  .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .pick span { display: grid; gap: 2px; border: 1.5px solid #a39679; padding: 8px 10px; font-size: 17px; letter-spacing: .04em; line-height: 1.1; cursor: pointer; background: rgba(255,255,255,.25); }
  .pick span small { font-family: var(--body); font-size: 13.5px; letter-spacing: 0; color: var(--paper-dim); line-height: 1.3; }
  .pick input:checked + span { border-color: var(--paper-ink); background: var(--paper-ink); color: var(--paper); }
  .pick input:checked + span small { color: #cfc6b4; }
  .pick input:focus-visible + span { outline: 2px solid #b3231a; outline-offset: 2px; }
  .form .err { color: #b3231a; font-size: 18px; letter-spacing: .04em; min-height: 1.2em; }
  .form .btn { justify-self: start; }
  .form .btn.ink { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
  .form .btn.ink:hover { background: #3d3327; box-shadow: none; }
  .form .btn.line { background: transparent; border-color: #8d7f66; color: var(--paper-ink); }
  .form .btn.line:hover { border-color: var(--paper-ink); box-shadow: none; }
  .form .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .fileview { display: grid; gap: 6px; }
  .fileview .f { display: grid; grid-template-columns: minmax(9ch, 13ch) 1fr; gap: 10px; font-size: 19px; letter-spacing: .03em; border-bottom: 1px dashed #a39679; padding-bottom: 5px; }
  .fileview .f span:first-child { color: var(--paper-dim); letter-spacing: .1em; font-size: 16px; padding-top: 2px; }
  .fileview .cs { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: .02em; word-break: break-word; }
  .approved { position: absolute; right: 18px; top: 16px; transform: rotate(8deg); border: 3px solid #b3231a; color: #b3231a; font-size: 18px; letter-spacing: .16em; padding: 3px 9px; opacity: .78; }
  .board { border: 1px solid var(--line-strong); background: var(--ink1); }
  .board h3 { font-family: var(--osd); font-weight: 400; color: var(--lamp); letter-spacing: .14em; font-size: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
  .board h3 span:last-child { color: var(--parch-dim); font-variant-numeric: tabular-nums; }
  .board ol { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
  .board li { display: grid; grid-template-columns: 5ch 1fr auto; gap: 10px; align-items: baseline; padding: 9px 16px; border-bottom: 1px solid var(--line); font-family: var(--osd); }
  .board li .n { color: var(--parch-dim); font-size: 16px; font-variant-numeric: tabular-nums; }
  .board li .who { display: grid; gap: 1px; min-width: 0; }
  .board li .who b { font-weight: 400; color: var(--bone); font-size: 20px; letter-spacing: .06em; overflow-wrap: anywhere; }
  .board li .who small { color: var(--parch-dim); font-size: 15px; letter-spacing: .04em; }
  .board li .p { color: var(--parch); font-size: 15px; letter-spacing: .06em; }
  .board li.me { background: #1e170f; }
  .board li.me .who b { color: var(--lamp); }
  .board .empty { padding: 18px 16px; font-family: var(--osd); color: var(--parch-dim); font-size: 18px; letter-spacing: .05em; }
  /* The room board wears the crew board's frame and rows; only its own three
     pieces are new: the status line under the list, the row of buttons, and
     the password mark in the column the crew board spends on a platform. */
  .board.rooms { max-width: 860px; }
  .board.rooms ol { max-height: 320px; }
  .board.rooms li .p { color: var(--lamp); }
  .rooms-note { padding: 14px 16px; font-family: var(--osd); color: var(--parch-dim); font-size: 18px; letter-spacing: .05em; }
  .rooms-note.bad { color: var(--rec); }
  .rooms-note:empty { display: none; }
  .rooms-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
  .rooms-foot .btn { font-size: 18px; padding: 10px 16px; }
  .quiz .outcome .rule .lab { color: var(--parch-dim); }

  /* ---------- v4: Japanese, Korean and Chinese ---------- */
  html[lang="ja"] { --display: "Grenze Gotisch", "Zen Antique", "Hiragino Mincho ProN", "Yu Mincho", serif; --body: "Alegreya Sans", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; --osd: "DotGothic16", "VT323", "MS Gothic", monospace; }
  html[lang="ko"] { --display: "Grenze Gotisch", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif; --body: "Alegreya Sans", "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --osd: "Nanum Gothic Coding", "VT323", monospace; }
  html[lang="zh-Hans"] { --display: "Grenze Gotisch", "Noto Serif SC", "Songti SC", "SimSun", serif; --body: "Alegreya Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --osd: "ZCOOL QingKe HuangYou", "Noto Sans SC", "VT323", monospace; }
  html.cjk { --measure: 38em; }
  html.cjk body { line-height: 1.75; }
  html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
  html[lang="ja"] body, html[lang="zh-Hans"] body { line-break: strict; }
  html.cjk .h2 { line-height: 1.3; max-width: 17em; font-size: clamp(28px, 4.2vw, 48px); }
  html.cjk .hero-title { line-height: 1.32; font-size: clamp(28px, 3.7vw, 46px); }
  html.cjk .phase h3, html.cjk .card h3, html.cjk .act h3, html.cjk .also b, html.cjk .cards4 figcaption b { line-height: 1.3; }
  html.cjk .lines .line q { font-size: 21px; line-height: 1.45; }
  html.cjk .sheet .name, html.cjk .deal h3 { line-height: 1.25; }
  html.cjk .eyebrow, html.cjk .hero-kicker, html.cjk .cc-head, html.cjk .chip, html.cjk .ask-head, html.cjk .quiz-head, html.cjk .dealt .tier, html.cjk .board h3, html.cjk .langs .cap { letter-spacing: .06em; }
  html.cjk :is(.say, .card-line, .cc-foot .quip, .status, .answer .said, .dealt .job, .notices p, .sheet .f, .sheet .rule, .ezra-says, .opt, .outcome .rule, .result-big, .gags span, .cards4 figcaption span, .ending, .tape-grid figcaption, .ask-list button, .cc-result .small, .hall .gone-msg span, .fileview .f, .form .err, .cassette .url, .board li .who b, .dl-lang) { letter-spacing: .02em; }
  html.cjk .eyebrow { font-size: 14.5px; }
  html.cjk .btn { font-size: 18px; letter-spacing: .04em; }
  html.cjk .hero-facts { font-size: 16px; }
  html.cjk .phase .card-line, html.cjk .cc-foot .keys, html.cjk .gags span, html.cjk .cards4 figcaption span, html.cjk .hens span { font-size: 14.5px; line-height: 1.45; }
  html.cjk .horn .say, html.cjk .horn .at { font-size: 18px; }
  html.cjk .cc-head .title { font-size: 20px; }
  html.cjk .cc-head .count { font-size: 15px; }
  html.cjk .cc-foot .quip { font-size: 17px; line-height: 1.4; }
  html.cjk .cc-threat { font-size: 15px; }
  html.cjk .cc-result .big { font-size: clamp(22px, 3vw, 30px); }
  html.cjk .cc-result .small, html.cjk .status, html.cjk .ezra-says, html.cjk .sheet .f { font-size: 16px; line-height: 1.5; }
  html.cjk .sheet .rule { font-size: 19px; line-height: 1.4; }
  html.cjk .chip { font-size: 16px; }
  html.cjk .hall .gone-msg b { font-size: clamp(20px, 2.8vw, 30px); }
  html.cjk .hall .gone-msg span { font-size: 15px; }
  html.cjk .plate { font-size: 14px; }
  html.cjk .plate small { font-size: 11px; }
  html.cjk .quiz-head .stamp { font-size: 16px; }
  html.cjk .outcome .verdict { font-size: 19px; }
  html.cjk .outcome .rule { font-size: 15.5px; line-height: 1.5; }
  html.cjk .result-big { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.45; }
  html.cjk .ezra-card .tag b { font-size: 21px; }
  html.cjk .ezra-card .tag span { font-size: 14px; line-height: 1.5; }
  html.cjk .ask-head { font-size: 16px; }
  html.cjk .ask-list button { font-size: 14.5px; line-height: 1.4; }
  html.cjk .answer .said { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; }
  html.cjk .dealt .job { font-size: clamp(19px, 2.3vw, 25px); line-height: 1.35; }
  html.cjk .dealt .rule, html.cjk .dealt .tier { font-size: 15px; }
  html.cjk .tape-grid figcaption, html.cjk .tape-note { font-size: 14.5px; }
  html.cjk .ending { font-size: 16px; line-height: 1.6; }
  html.cjk .notices p { font-size: clamp(18px, 2vw, 23px); line-height: 1.4; }
  html.cjk .notices p.big { font-size: clamp(32px, 4.6vw, 50px); }
  html.cjk .notices .idle { font-size: 16px; line-height: 1.6; }
  html.cjk .act .where, html.cjk .act .n, html.cjk .card .k, html.cjk .lines .line .src { font-size: 14px; }
  html.cjk .foot-row { font-size: 15px; }
  html.cjk .cassette .label .plat { font-size: 24px; }
  html.cjk .cassette .stamp { font-size: 15px; }
  html.cjk .cassette .waiting, html.cjk .dl-lang { font-size: 15px; }
  html.cjk .form h3 { font-size: 22px; }
  html.cjk .form label, html.cjk .form legend, html.cjk .form .hint { font-size: 14px; }
  html.cjk .pick span { font-size: 15px; }
  html.cjk .fileview .f { font-size: 16px; }
  html.cjk .board li .who b { font-size: 17px; }
  html.cjk .navlink { font-size: 16px; }

  @media (max-width: 980px) {
    .tapes { grid-template-columns: 1fr 1fr; }
    .office { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 44px); }
    .tapes, .opts2 { grid-template-columns: 1fr; }
    .langs .cap { width: 100%; }
    .fileview .f { grid-template-columns: 1fr; gap: 2px; }
  }

/* ================= accounts (the split) =================
   The sign in / sign up / profile / settings pages reuse the office
   folder; these are the pieces the single page never needed. Same
   register: paper, ink, lamp. */
.auth { border-top: 0; padding-top: clamp(40px, 6vw, 72px); }
.office.solo { grid-template-columns: minmax(0, 1fr); max-width: 660px; }
.form input[type="password"] { font-family: var(--osd); font-size: 26px; letter-spacing: .08em; color: var(--paper-ink); background: transparent; border: 0; border-bottom: 2px solid #8d7f66; padding: 4px 2px; width: 100%; border-radius: 0; }
.form input[type="password"]:focus { outline: none; border-bottom-color: var(--paper-ink); background: rgba(0,0,0,.04); }
.form .hint { font-size: 15px; letter-spacing: .1em; color: var(--paper-dim); margin: 10px 0 18px; }
.form .hint a { color: var(--paper-ink); }
.form .oknote { font-family: var(--osd); font-size: 20px; letter-spacing: .1em; color: var(--paper-ink); margin: 10px 0; }
.form h3 { font-family: var(--display); font-weight: 600; color: var(--paper-ink); font-size: 22px; margin: 6px 0 12px; }
.form fieldset { border: 0; padding: 0; margin: 18px 0; }
.form fieldset legend { margin-bottom: 8px; }
.form form + form { margin-top: 28px; padding-top: 24px; border-top: 2px dashed #8d7f66; }
.navsignout { display: inline; margin: 0; }
.navlink.asbtn { background: transparent; cursor: pointer; font: inherit; }

/* ================= the account spine =================
   Crew, outfits and the room board are dark panels on the page rather than
   paper in a folder, so they wear the crew board's register: ink, a hairline,
   lamp for what matters, red for what costs you something. .slab is the panel
   everything else sits in; .people is the row list; the paper variants of the
   same names stay inside .form and win on specificity, so a button in the
   folder is still ink on manila. */
.acct-page { padding-top: clamp(28px, 4.6vw, 52px); }
.acct-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.acct-head .h2 { margin-top: 0; max-width: 26ch; }
.acct-tools { flex: 0 1 380px; min-width: min(100%, 300px); }
.navlink.here { border-color: var(--lamp); color: var(--lamp); }

/* Where the home page wears its language switcher, every other page wears
   the name instead. The switcher is driven by assets/site.js, which only the
   home page loads, so on the account pages it used to render six buttons that
   did nothing at all — and an inert control is worse than no control. */
.topbrand { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1; letter-spacing: .04em; color: var(--bone); text-decoration: none; }
.topbrand:hover { color: var(--lamp); }

.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.subnav .tab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--osd); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; line-height: 1; color: var(--parch); border: 1px solid var(--line-strong); padding: 8px 13px; }
.subnav .tab:hover { color: var(--bone); border-color: var(--bone); }
.subnav .tab.here { background: var(--lamp); border-color: var(--lamp); color: var(--ink0); }
.badge { font-family: var(--osd); font-weight: 400; font-size: 14px; letter-spacing: .04em; min-width: 1.7em; padding: 2px 6px; text-align: center; border-radius: 999px; background: var(--rec); color: #fff; }
.subnav .tab.here .badge { background: var(--ink0); color: var(--lamp); }

.flash { font-family: var(--osd); font-size: 19px; letter-spacing: .06em; line-height: 1.35; padding: 11px 14px; margin: 0 0 18px; border: 1px solid; }
.flash.good { color: var(--lamp); border-color: var(--lamp-deep); background: #1a1108; }
.flash.bad { color: #ffb9ae; border-color: var(--rec); background: #1c0e0b; }
.form .flash { font-size: 17px; border-width: 2px; }
.form .flash.good { color: #2f5d2a; border-color: #6d8f67; background: rgba(109,143,103,.18); }
.form .flash.bad { color: #8f1d15; border-color: #b3231a; background: rgba(179,35,26,.12); }

.crew-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.col-main, .col-side, .docket { display: grid; gap: 16px; align-content: start; min-width: 0; }
.slab { border: 1px solid var(--line-strong); background: var(--ink1); padding: 16px 18px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.slab h3 { font-family: var(--osd); font-weight: 400; color: var(--lamp); letter-spacing: .14em; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slab h3 .count { color: var(--parch-dim); font-variant-numeric: tabular-nums; }
.slab.glow { border-color: var(--lamp-deep); box-shadow: inset 0 0 34px rgba(240,177,58,.1); }
.slab .empty { font-family: var(--osd); color: var(--parch-dim); font-size: 18px; letter-spacing: .05em; line-height: 1.4; }
.slab .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.help { font-family: var(--osd); color: var(--parch-dim); font-size: 15.5px; letter-spacing: .06em; line-height: 1.55; }
.form .help { color: var(--paper-dim); }
.help a { color: inherit; }
.caps { color: #b3231a; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.notes li { position: relative; padding-left: 17px; font-family: var(--osd); color: var(--parch); font-size: 16px; letter-spacing: .05em; line-height: 1.45; }
.notes li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--lamp-deep); }
.standing { font-family: var(--osd); color: var(--bone); font-size: 18px; letter-spacing: .05em; line-height: 1.45; }
.blurb { font-size: 17px; line-height: 1.45; color: var(--paper-ink); margin: 2px 0 8px; }

.people { list-style: none; margin: 0; padding: 0; display: grid; }
/* A crew or a roster can hold 200 or 500 names, and a page left open in a
   tab is a page that grows. The home board's own list is capped at 440 px
   and scrolls; these are the same lists and they deserve the same ceiling,
   so a long roster pushes the rest of the page instead of the window. */
.people-scroll { max-height: 440px; overflow-y: auto; }
.person { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; padding-bottom: 2px; }
.people.tight .person { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
.ava { width: 46px; height: 46px; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .02em; color: var(--ink0); border: 1px solid rgba(0,0,0,.45); }
.ava[data-tint="0"] { background: #c9a86a; }
.ava[data-tint="1"] { background: #8fa37e; }
.ava[data-tint="2"] { background: #b98a72; }
.ava[data-tint="3"] { background: #8b93a8; }
.person .who { display: grid; gap: 2px; min-width: 0; }
.person .who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 20px; letter-spacing: .06em; overflow-wrap: anywhere; }
.person .who small { font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .05em; }
.person .who em { font-style: normal; color: var(--parch); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.you { font-family: var(--osd); font-style: normal; font-size: 13px; letter-spacing: .12em; color: var(--ink0); background: var(--lamp); padding: 1px 6px; margin-left: 7px; vertical-align: 2px; }
/* A callsign is a door: every row that names somebody (crew lists, asks sent,
   an outfit roster) opens their file. It keeps the row's own type and colour
   so the list still reads as one line, and only the hover says "link". */
.person .who b a.cslink { color: inherit; text-decoration: none; }
.person .who b a.cslink:hover, .person .who b a.cslink:focus-visible { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; }
.fileview .f span.now { color: var(--lamp); }
.person .seen { display: grid; gap: 4px; justify-items: end; text-align: right; font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .06em; }
.person .seen.now { color: var(--bone); }
.person .act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 6%; }
.dot.on { background: #7fb069; box-shadow: 0 0 8px rgba(127,176,105,.75); }
.dot.rec { background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: blink 1.4s steps(1) infinite; }
.live { font-family: var(--osd); font-size: 15px; letter-spacing: .06em; color: var(--rec); text-decoration: none; }
.live:hover { color: var(--bone); }
.tag { font-family: var(--osd); font-size: 14px; letter-spacing: .1em; color: var(--parch); border: 1px solid var(--line-strong); padding: 2px 7px; }
.tag.keeper { color: var(--lamp); border-color: var(--lamp-deep); }

.recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.recs li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px dashed var(--line-strong); font-family: var(--osd); }
.recs li span { color: var(--parch-dim); font-size: 15px; letter-spacing: .1em; }
.recs li b { font-weight: 400; color: var(--bone); font-size: 18px; letter-spacing: .05em; text-align: right; }
.doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doors a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none; border: 1px solid var(--line-strong); background: var(--ink2); }
.doors a:hover { border-color: var(--lamp-deep); }
.doors b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--lamp); font-variant-numeric: tabular-nums; }
.doors span { font-family: var(--osd); color: var(--parch); font-size: 15.5px; letter-spacing: .07em; line-height: 1.35; }
.facts { margin: 0; display: grid; grid-template-columns: minmax(9ch, 14ch) minmax(0, 1fr); gap: 7px 12px; font-family: var(--osd); }
.facts dt { color: var(--parch-dim); font-size: 15px; letter-spacing: .1em; }
.facts dd { margin: 0; color: var(--bone); font-size: 17px; letter-spacing: .04em; overflow-wrap: anywhere; }
.facts code, .help code, .ometa code { font-family: var(--osd); color: var(--lamp); letter-spacing: .08em; }

/* The room rows: the same five pieces on the outfit page's mini board and on
   the room board itself, which is why one list class serves both. */
.minirooms { list-style: none; margin: 0; padding: 0; display: grid; }
/* The outfit page's "on the farm right now" list is the same rows as the
   board and can hold one per seat, so it shares the board's ceiling. */
.minirooms-scroll { max-height: 320px; overflow-y: auto; }
.minirooms li { display: grid; grid-template-columns: 7ch minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.minirooms li:last-child { border-bottom: 0; }
.rcode { font-family: var(--osd); font-size: 20px; letter-spacing: .1em; color: var(--lamp); user-select: all; -webkit-user-select: all; }
.rname { font-family: var(--osd); font-size: 19px; letter-spacing: .05em; color: var(--bone); overflow-wrap: anywhere; }
.rwho { grid-column: 2; font-family: var(--osd); font-size: 15px; letter-spacing: .05em; color: var(--parch-dim); overflow-wrap: anywhere; }
.rseats { font-family: var(--osd); font-size: 17px; letter-spacing: .06em; color: var(--parch); font-variant-numeric: tabular-nums; }
.rage { font-family: var(--osd); font-size: 15px; letter-spacing: .06em; color: var(--parch-dim); }
.rlock { font-family: var(--osd); font-size: 14px; letter-spacing: .1em; color: var(--rec); }
.minirooms li .btn { grid-column: 2; justify-self: start; margin-top: 4px; }
.roomrow.you-in { background: #1e170f; }
.roomrow.mine { box-shadow: inset 3px 0 0 var(--lamp); }
.rcrew { grid-column: 2; font-family: var(--osd); font-size: 15px; letter-spacing: .05em; color: var(--lamp); }

.ocards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ocard { border: 1px solid var(--line-strong); background: var(--ink2); padding: 14px 15px 15px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ohead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.oname { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--bone); text-decoration: none; overflow-wrap: anywhere; }
.oname:hover { color: var(--lamp); }
.ometa { font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .06em; line-height: 1.5; }
.oblurb { color: var(--parch); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.oact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.field { display: grid; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field.bad input, .field.bad textarea { border-color: #b3231a; }
.pw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.reveal { font-family: var(--osd); font-size: 15px; letter-spacing: .1em; color: var(--paper-ink); background: transparent; border: 1.5px solid #8d7f66; padding: 7px 11px; cursor: pointer; }
.reveal:hover { border-color: var(--paper-ink); }
.slab .reveal, .acct-page .reveal { color: var(--bone); border-color: var(--line-strong); }
.meter { display: block; height: 6px; background: rgba(0,0,0,.18); border: 1px solid #a39679; }
.meter i { display: block; height: 100%; width: 0; background: #b3231a; transition: width .2s, background .2s; }
.meter i[data-level="1"] { width: 34%; background: #b3231a; }
.meter i[data-level="2"] { width: 67%; background: var(--lamp-deep); }
.meter i[data-level="3"] { width: 100%; background: #6d8f67; }
.find { display: grid; gap: 7px; }
.find label { font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .12em; }
.find .pw { grid-template-columns: minmax(0, 1fr) auto; }
.find input[type="text"] { font-family: var(--osd); font-size: 19px; letter-spacing: .06em; color: var(--bone); background: var(--ink2); border: 1px solid var(--line-strong); padding: 9px 11px; width: 100%; border-radius: 0; }
.find input[type="text"]:focus { outline: none; border-color: var(--lamp); }
.newoutfit { display: grid; gap: 12px; }
.newoutfit form { display: grid; gap: 4px; }
.toggle[aria-expanded="true"] { border-color: var(--bone); color: var(--bone); }
.handover, .walkout { display: grid; gap: 10px; }
.danger { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.btn.sm { font-size: 16px; padding: 9px 13px; letter-spacing: .08em; }
.btn.ink:not(.form *) { background: var(--lamp); border-color: var(--lamp); color: var(--ink0); }
.btn.line:not(.form *) { background: transparent; border-color: var(--line-strong); color: var(--bone); }
.btn.line:not(.form *):hover { border-color: var(--bone); box-shadow: none; }
.danger-link:not(.form *) { border-color: var(--rec); color: #ffb9ae; }
.danger-link:not(.form *):hover { background: var(--rec); color: #fff; box-shadow: none; }
.acct-foot { margin-top: clamp(30px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

@media (max-width: 980px) {
  .crew-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-tools { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .person { grid-template-columns: 38px minmax(0, 1fr); }
  .person .seen, .person .act { grid-column: 2; justify-items: start; text-align: left; justify-content: flex-start; }
  .ava { width: 38px; height: 38px; font-size: 16px; }
  .minirooms li { grid-template-columns: minmax(0, 1fr) auto; }
  .rcode { grid-column: 1; }
  .rname { grid-column: 1; }
  .rwho, .rcrew { grid-column: 1 / -1; }
  .minirooms li .btn { grid-column: 1; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .facts dd { margin-bottom: 8px; }
  .newitem header { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ndate { justify-self: start; }
}

/* ================= the desk, the wall, the barred list =================
   Three additions to the account spine, in its own hand: the desk (a ledger
   of what happened to a file while its owner was away), an outfit's wall (the
   one place on the site where a contractor writes text other contractors
   read), and the settings sections that decide who may reach you at all.
   Every one reuses .slab, .person, .ava and .tag rather than growing a second
   visual language — a desk line and a crew line are the same object with
   different words in it, and they should look like it. */

/* Settings' own tabs sit UNDER the account spine and have to read as smaller:
   the spine says which page you are on, these say which half of one page. */
.setnav { display: flex; flex-wrap: wrap; gap: 6px; margin: -14px 0 24px; }
.setnav .tab { display: inline-block; font-family: var(--osd); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; line-height: 1; color: var(--parch-dim); border: 1px solid var(--line); border-bottom: 0; padding: 6px 11px; }
.setnav .tab:hover { color: var(--bone); border-color: var(--line-strong); }
.setnav .tab.here { color: var(--lamp); border-color: var(--lamp-deep); background: var(--ink1); }

/* The desk. A note is a .person-shaped row — monogram, the sentence, the
   stamp. Unread gets a left edge and a tint that fades out, not a filled
   background: forty unread notes in a solid highlight is unreadable, and the
   edge is what the eye actually tracks down a list. */
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; }
.note { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0 11px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.note:last-child { border-bottom: 0; }
.note.unread { border-left-color: var(--lamp); background: linear-gradient(90deg, rgba(240,177,58,.08), transparent 45%); }
.note .who { display: grid; gap: 2px; min-width: 0; }
.note .who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 19px; letter-spacing: .05em; line-height: 1.3; overflow-wrap: anywhere; }
.note.unread .who b { color: var(--lamp); }
.note .who b a.cslink { color: inherit; text-decoration: none; }
.note .who b a.cslink:hover, .note .who b a.cslink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.note .who small { color: var(--parch); font-size: 15px; line-height: 1.4; }
.note .seen { font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.tag.fresh { color: var(--ink0); background: var(--lamp); border-color: var(--lamp); }

/* An invite is an .ocard with the lamp on. It is waiting on a decision and
   the directory underneath it is not, so it gets the same treatment the room
   board gives a room that is open right now. */
.ocard.invite { border-color: var(--lamp-deep); box-shadow: inset 0 0 30px rgba(240,177,58,.09); }

/* The wall. Same row shape as the desk, but the body is the point, so the
   middle column carries a line of type rather than a title and a subtitle. */
.postbox { display: grid; gap: 6px; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; max-height: 520px; overflow-y: auto; }
.post { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 11px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; }
.post .who { min-width: 0; }
.post .who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 17px; letter-spacing: .06em; overflow-wrap: anywhere; }
.post .who em { display: block; font-style: normal; color: var(--parch); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; margin-top: 2px; }
.post .seen { font-family: var(--osd); color: var(--parch-dim); font-size: 14px; letter-spacing: .06em; white-space: nowrap; padding-top: 3px; }
.post .act { display: flex; gap: 8px; padding-top: 1px; }

/* The keeper's outstanding invites, and the form that makes them, both inside
   the desk slab: two rules that separate furniture from furniture. */
.invited { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.invited h4 { margin: 0; font-family: var(--osd); font-weight: 400; color: var(--parch); letter-spacing: .14em; font-size: 16px; display: flex; justify-content: space-between; gap: 10px; }
.invited h4 .count { color: var(--parch-dim); font-variant-numeric: tabular-nums; }
.invitebox { border-top: 1px solid var(--line); padding-top: 14px; }

/* A full-width switch row. The notices form is checkboxes with a sentence
   under each, not the two-across radio picks the rest of settings wears. */
.pick.wide { grid-column: 1 / -1; align-items: start; }
.pick.wide small { display: block; }

/* An inset note inside a folder's form: furniture, not a field, so it gives
   up the slab's fill and keeps only its edge. */
.slab.inset { background: transparent; border-color: var(--line); }

/* The shredder once it has been asked for twice. .danger on its own is a rule
   about spacing; on a slab it also has to look like the one thing on the page
   that does not undo. */
.slab.danger { border-color: var(--rec); box-shadow: inset 0 0 30px rgba(255,90,60,.09); }

/* The fold's open state. The forms hide with [hidden], so without this the
   only sign a toggle had done anything was its own label changing — and a
   button that says "Close the form" over a form you cannot see is a lie. */
.newoutfit.open > .toggle, .slab.open > .toggle { color: var(--lamp); border-color: var(--lamp-deep); }

@media (max-width: 560px) {
  .note { grid-template-columns: 38px minmax(0, 1fr); }
  .note .seen, .note .tag { grid-column: 2; justify-self: start; }
  .post { grid-template-columns: 34px minmax(0, 1fr); }
  .post .seen, .post .act { grid-column: 2; justify-self: start; }
  .setnav { gap: 4px; }
  .setnav .tab { font-size: 14px; padding: 6px 9px; }
}

/* ================= the notice board =================
   News is a stack of filed items, not a table: each one is a header with its
   badge and the date it was last edited, the text as the operator typed it
   (newlines kept, nothing else), and a line saying who it was aimed at. A
   level colours the badge and the left edge, and only the levels that mean
   something get one — `info` is the default and stays quiet. */
.newscol { display: grid; gap: 16px; align-content: start; }
.newslist { gap: 0; }
.newslist h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.newitem { padding: 16px 0 15px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; padding-left: 12px; display: grid; gap: 7px; }
.newitem:last-of-type { border-bottom: 0; }
.newitem header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.newitem h3 { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--bone); margin: 0; overflow-wrap: anywhere; }
.nlvl, .npin { font-family: var(--osd); font-size: 13px; letter-spacing: .12em; padding: 2px 7px; border: 1px solid var(--line-strong); color: var(--parch); white-space: nowrap; }
.npin { color: var(--lamp); border-color: var(--lamp-deep); }
.ndate { font-family: var(--osd); font-size: 15px; letter-spacing: .08em; color: var(--parch-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nbody { color: var(--parch); font-size: 17px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.nmeta { font-family: var(--osd); font-size: 14.5px; letter-spacing: .07em; color: var(--parch-dim); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.nmeta a { color: var(--lamp); text-decoration: none; border-bottom: 1px solid var(--lamp-deep); }
.nmeta a:hover { color: var(--bone); border-color: var(--bone); }
.newitem.lv-critical { border-left-color: var(--rec); }
.newitem.lv-critical .nlvl { color: #ffb9ae; border-color: var(--rec); background: #1c0e0b; }
.newitem.lv-critical h3 { color: #ffd9d1; }
.newitem.lv-warning { border-left-color: var(--lamp); }
.newitem.lv-warning .nlvl { color: var(--lamp); border-color: var(--lamp-deep); background: #1a1108; }
.newitem.lv-event { border-left-color: #6d8f67; }
.newitem.lv-event .nlvl { color: #b6cdb0; border-color: #6d8f67; }

/* ================= messages =================
   A thread is a column of bubbles, not a table: this is the one place on the
   site where the ORDER of the rows is the content, and a grid with a column
   for the stamp would read as a ledger of separate facts rather than as one
   conversation. Mine go right and carry the lamp; theirs go left and carry the
   furniture's own fill, so the eye finds the seam without reading a name.

   The inbox, by contrast, IS a row list — it is the desk's shape, because it
   is the same kind of thing: a stack of unread work with a stamp on the right
   and a count of what is waiting. It reuses .note's proportions so the two
   lists on either side of the same tab bar do not look like different sites. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.thread-head { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.thread-head .who { display: grid; gap: 2px; min-width: 0; }
.thread-head .who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 22px; letter-spacing: .06em; line-height: 1.2; overflow-wrap: anywhere; }
.thread-head .who b a.cslink { color: inherit; text-decoration: none; }
.thread-head .who b a.cslink:hover, .thread-head .who b a.cslink:focus-visible { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; }
.thread-head .who small { color: var(--parch); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.thread-head .who small.now { color: var(--lamp); }
.thread-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.thread-tools form { margin: 0; }

.thread-slab { gap: 0; }
.thread { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; gap: 9px; max-height: 60vh; overflow-y: auto; }
.msg { display: grid; gap: 3px; justify-items: start; max-width: min(78%, 46ch); }
.msg.mine { justify-self: end; justify-items: end; }
.bubble { border: 1px solid var(--line-strong); background: var(--ink3); color: var(--bone); font-size: 17px; line-height: 1.5; padding: 9px 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.mine .bubble { background: #1e170f; border-color: var(--lamp-deep); }
.msg .stamp { font-family: var(--osd); font-size: 14px; letter-spacing: .07em; color: var(--parch-dim); padding: 0 3px; }

/* The reply box is the one textarea on the site, so it carries its own look
   rather than inheriting an input rule written for a single-line field. */
.reply { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.reply textarea, .wall-form textarea { font-family: var(--body); font-size: 17px; line-height: 1.5; color: var(--bone); background: var(--ink2); border: 1px solid var(--line-strong); border-radius: 0; padding: 10px 12px; width: 100%; resize: vertical; min-height: 74px; }
.reply textarea:focus, .wall-form textarea:focus { outline: none; border-color: var(--lamp); }
.reply-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.reply-row .help { margin: 0; flex: 1 1 24ch; }
.stack { display: grid; gap: 10px; }

.msg-list { list-style: none; margin: 0; padding: 0; display: grid; }
.msgrow { border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.msgrow:last-child { border-bottom: 0; }
.msgrow.unread { border-left-color: var(--lamp); background: linear-gradient(90deg, rgba(240,177,58,.08), transparent 45%); }
.msglink { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0 11px 10px; text-decoration: none; }
.msglink:hover, .msglink:focus-visible { background: rgba(240,177,58,.05); }
.msglink .who { display: grid; gap: 2px; min-width: 0; }
.msglink .who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 19px; letter-spacing: .05em; line-height: 1.3; overflow-wrap: anywhere; }
.msgrow.unread .msglink .who b { color: var(--lamp); }
.msglink .who small { color: var(--parch); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msglink .seen { font-family: var(--osd); color: var(--parch-dim); font-size: 15px; letter-spacing: .06em; white-space: nowrap; }

/* ================= the feed =================
   One row per line anybody has left anywhere you belong. The shape is the
   desk's and the wall's, because it is doing the same job as both: a name, a
   stamp, and the text — but the text is the point here, so it gets its own
   line at full width under the attribution instead of sitting in a column
   beside it. */
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; }
.feed-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 13px 0 13px 10px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { border-left-color: var(--line-strong); }
.feed-body { display: grid; gap: 5px; min-width: 0; }
.feed-who { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.feed-who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 19px; letter-spacing: .05em; overflow-wrap: anywhere; }
.feed-who b a.cslink { color: inherit; text-decoration: none; }
.feed-who b a.cslink:hover, .feed-who b a.cslink:focus-visible { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; }
.feed-where { font-family: var(--osd); font-size: 15px; letter-spacing: .06em; color: var(--parch-dim); }
.feed-where a { color: var(--lamp); text-decoration: none; border-bottom: 1px solid var(--lamp-deep); }
.feed-where a:hover { color: var(--bone); border-color: var(--bone); }
.feed-text { margin: 0; color: var(--parch); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.feed-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.feed-meta > span { font-family: var(--osd); font-size: 14px; letter-spacing: .07em; color: var(--parch-dim); white-space: nowrap; }
.feed-meta form { margin: 0; }

/* ================= a file's own wall =================
   Deliberately NOT the outfit wall's .post rows: this one lives under a
   contractor file rather than inside a group's slate, and it carries a delete
   button on nearly every line, so it borrows the feed's attribution-and-text
   stack instead of a four-column grid. */
.wall-slab { margin-top: 16px; }
.wall-list { list-style: none; margin: 0; padding: 0; display: grid; }
.wall-line { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.wall-line:last-child { border-bottom: 0; }
.wall-body { display: grid; gap: 4px; min-width: 0; }
.wall-who { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wall-who b { font-family: var(--osd); font-weight: 400; color: var(--bone); font-size: 17px; letter-spacing: .06em; overflow-wrap: anywhere; }
.wall-who b a.cslink { color: inherit; text-decoration: none; }
.wall-who b a.cslink:hover, .wall-who b a.cslink:focus-visible { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; }
.wall-when { font-family: var(--osd); font-size: 14px; letter-spacing: .07em; color: var(--parch-dim); white-space: nowrap; }
.wall-text { margin: 0; color: var(--parch); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.wall-body form { margin: 0; justify-self: start; }
.wall-form { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }

@media (max-width: 560px) {
  .thread-head { grid-template-columns: 38px minmax(0, 1fr); }
  .thread-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .msglink { grid-template-columns: 38px minmax(0, 1fr); padding: 11px 0 11px 8px; }
  .msglink .seen, .msglink .tag { grid-column: 2; justify-self: start; }
  .msg { max-width: 88%; }
  .feed-item, .wall-line { grid-template-columns: 34px minmax(0, 1fr); }
  .reply-row { flex-direction: column; align-items: stretch; }
  .reply-row .help { flex: 1 1 auto; }
}


/* The game's own logo (logo_grimstead.png, the title screen's) as the top bar brand. */
.topbrand { display: inline-flex; align-items: center; }
.topbrand .logo-img { display: block; width: 78px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); transition: transform .2s; }
.topbrand:hover .logo-img { transform: rotate(-3deg) scale(1.04); }
.foot-slate img { display: block; width: 88px; height: auto; }

/* /download — the home page's tapes, one per platform, plus the install notes. */
.dl-tapes { margin-top: 8px; }
.cassette { scroll-margin-top: 24px; }
.cassette:target { outline: 2px solid var(--lamp); outline-offset: 4px; }
.cassette .dl-facts li b { color: var(--bone); }
.cassette .dl-wait { font-size: 15px; color: var(--parch); margin: 0; }
.cassette span.btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 28px; align-items: start; }
.dl-steps ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.dl-steps code, .dl-verify code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }
.dl-verify pre { margin: 0; padding: 12px 14px; background: #0c0a08; border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.dl-notes-body { margin: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.dl-together .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cassette .dl-facts li { font-size: 15px; color: var(--parch); }
/* --- signup v2 --- */
/* Sign-up v2: password confirmation, date of birth, rules tick, honeypot,
   live match/availability lines, and the "What you get" panel. Manila
   register throughout (paper, ink, the red stamp) — no new colours, no new
   visual language. The panel reuses the dark .board frame the crew board
   wears, so the two columns read as one page. */
.form .offscreen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form select { font-family: var(--osd); font-size: 20px; letter-spacing: .04em; color: var(--paper-ink); background: rgba(255,255,255,.25); border: 1.5px solid #a39679; padding: 7px 8px; width: 100%; border-radius: 0; text-transform: none; }
.form select:focus { outline: none; border-color: var(--paper-ink); }
.field.bad select { border-color: #b3231a; }
.dob { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.dob > span { display: grid; gap: 4px; min-width: 0; }
.form .dob label { font-size: 14px; }
.form .match, .form .avail { font-family: var(--osd); font-size: 17px; letter-spacing: .04em; margin: 2px 0 0; min-height: 1.2em; }
.form .match[data-ok="true"], .form .avail[data-ok="true"] { color: #2f5d2a; }
.form .match[data-ok="false"], .form .avail[data-ok="false"] { color: #b3231a; }
.form .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; letter-spacing: .02em; cursor: pointer; }
.form .agree input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--paper-ink); }
.form .agree a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 2px; }
.form .agree a:hover { color: #b3231a; }
.board.get ul { list-style: none; margin: 0; padding: 0; }
.board.get li { display: block; position: relative; padding: 10px 16px 10px 28px; border-bottom: 1px solid var(--line); font-family: var(--osd); font-size: 18px; letter-spacing: .05em; line-height: 1.4; color: var(--parch); }
.board.get li:last-child { border-bottom: 0; }
.board.get li::before { content: ""; position: absolute; left: 14px; top: 1.05em; width: 7px; height: 7px; background: var(--lamp-deep); }
.form .rule-list { margin: 4px 0 6px; padding-left: 26px; display: grid; gap: 9px; }
.form .rule-list li { font-family: var(--body); font-size: 16.5px; line-height: 1.45; color: var(--paper-ink); }
@media (max-width: 560px) {
  .dob { grid-template-columns: minmax(0, 1fr); }
}
/* --- end signup v2 --- */