/* blackrabbit.lol - night, one light, one rabbit that will not run. */

:root {
  --ink:    #08080a;
  --ink-2:  #0c0c10;
  --bone:   #efece6;
  --ash:    #8f8b84;
  --line:   rgba(239, 236, 230, .13);
  --moon:   #f6f3ec;
  --ember:  #c4452f;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint grain so the black is not a flat void */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- topbar -- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad);
  background: linear-gradient(to bottom, rgba(8, 8, 10, .92), rgba(8, 8, 10, 0));
  backdrop-filter: blur(3px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash);
}
.brand:hover { color: var(--bone); }

.tool-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 9px 16px;
  transition: border-color .25s, background .25s;
}
.tool-link:hover { border-color: rgba(239, 236, 230, .5); background: rgba(239, 236, 230, .05); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 15vh, 170px) var(--pad) clamp(72px, 12vh, 130px);
  overflow: hidden;
}

/* the photograph: bleeds off the right, dissolves into the page on the left */
.portrait {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  pointer-events: none;
  user-select: none;
}

/* and dissolves into the next section along the bottom */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(8, 8, 10, 0), var(--ink) 88%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 22px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(62px, 12.5vw, 152px);
  line-height: .84;
  letter-spacing: -.02em;
  margin: 0 0 30px;
}

.hero h1 span {
  display: block;
  padding-left: .06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 236, 230, .62);
}

.lead {
  font-size: clamp(16.5px, 1.9vw, 19px);
  color: #cfcbc4;
  margin: 0 0 38px;
  max-width: 52ch;
  text-shadow: 0 1px 22px rgba(8, 8, 10, .9);
}

.lead em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14em;
  color: var(--bone);
}

.hero-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 30px;
}

.btn {
  display: inline-block;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  transition: background .25s, color .25s;
}
.btn:hover { background: transparent; color: var(--bone); }
.btn.big { padding: 19px 40px; font-size: 12px; }

.cue {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  transition: border-color .3s, letter-spacing .3s;
}
.cue::after { content: " \2193"; }
.cue:hover { border-color: var(--bone); letter-spacing: .3em; }

/* --------------------------------------------------------------- bands -- */

.band {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(84px, 12vh, 145px) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ink);
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 20px;
}

.band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}

.sub {
  color: var(--ash);
  max-width: 58ch;
  margin: 0 0 52px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.reveal.seen { opacity: 1; transform: none; }

/* --------------------------------------------------------- two rabbits -- */

.rabbits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.col { background: var(--ink); padding: clamp(24px, 3.4vw, 40px); }
.col.black { background: var(--ink-2); }

.col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
}

.ico { width: 20px; height: 29px; flex: none; }
.brand .ico { width: 15px; height: 22px; }
.brand .ico use,
.col.black .ico use { fill: #050506; stroke: var(--moon); stroke-opacity: .7; stroke-width: .7; }
.col.white .ico use { fill: var(--moon); opacity: .8; }

.col ul { list-style: none; margin: 0; padding: 0; }

.col li {
  padding: 15px 0;
  border-bottom: 1px solid rgba(239, 236, 230, .06);
}
.col li:last-child { border-bottom: 0; }

.col.white li { color: var(--ash); }

.col.black li {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--bone);
}

/* ------------------------------------------------------------- lessons -- */

.lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.lesson {
  background: var(--ink);
  padding: clamp(26px, 3.2vw, 40px);
  transition: background .45s ease, opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.lesson:hover { background: var(--ink-2); }

.num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
  opacity: .55;
}

.told {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 29px);
  line-height: 1.2;
  color: var(--bone);
  margin: 16px 0 20px;
}

.told span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}

.says {
  color: #b9b5ae;
  font-size: 15.5px;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.out {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px solid rgba(239, 236, 230, .35);
  padding-bottom: 6px;
}
.out::after { content: " \2192"; }
.out:hover { border-color: var(--bone); }

/* ---------------------------------------------------------------- tool -- */

.tool { background: var(--ink-2); }

.tool-facts {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid var(--line);
}

.tool-facts li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--line);
  color: #b9b5ae;
  font-size: 15.5px;
}

.tool-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 25px;
  width: 8px;
  height: 1px;
  background: var(--ember);
}

/* --------------------------------------------------------------- alone -- */

.alone { text-align: center; }

.field {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 44px auto 8px;
  height: auto;
}

.moon { fill: var(--moon); opacity: .9; }

.herd use {
  fill: var(--moon);
  opacity: .22;
  animation: hop 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes hop {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  42%      { transform: translateY(-9px) scaleY(1.04); }
  58%      { transform: translateY(-3px) scaleY(.98);  }
}

@media (prefers-reduced-motion: reduce) { .herd use { animation: none; } }

.loner use {
  fill: #030304;
  stroke: var(--moon);
  stroke-opacity: .8;
  stroke-width: .5;
  filter: drop-shadow(0 0 26px rgba(246, 243, 236, .3));
}

.ground { fill: #050506; stroke: rgba(239, 236, 230, .09); stroke-width: 1; }

.creed {
  max-width: 30ch;
  margin: 34px auto 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.45;
}

.creed p {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.creed p:last-child { border-bottom: 0; color: var(--bone); }

/* ---------------------------------------------------------------- join -- */

.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 620px;
}

.join-form input[type="text"],
.join-form input[type="email"] {
  flex: 1 1 210px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 15px 17px;
}

.join-form input::placeholder { color: #5f5c57; }
.join-form input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }

.join-form button {
  flex: 0 0 auto;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 30px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.join-form button:hover { background: transparent; color: var(--bone); }

.trap { position: absolute; left: -9999px; }

.fineprint {
  color: #6c6963;
  font-size: 13px;
  margin: 20px 0 0;
  max-width: 56ch;
}

.done {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 28px);
  color: var(--bone);
  border-left: 2px solid var(--bone);
  padding-left: 20px;
  margin: 0;
}

.fail { color: var(--ember); font-size: 15px; margin: 0 0 18px; }

/* -------------------------------------------------------------- footer -- */

footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 52px var(--pad) 64px;
  text-align: center;
  color: var(--ash);
  font-size: 14px;
}

footer p { margin: 6px 0; }
footer strong { color: var(--bone); font-weight: 500; }
footer a { color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--bone); }
footer .small { font-size: 12px; opacity: .6; }

.ico.foot { width: 22px; height: 32px; margin-bottom: 14px; }
.ico.foot use { fill: #050506; stroke: var(--moon); stroke-opacity: .6; stroke-width: .7; }

/* --------------------------------------------------------------- small -- */

@media (max-width: 900px) {
  .portrait {
    width: 100%;
    opacity: .42;
    object-position: 58% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
  }
  .hero { align-items: flex-end; }
  .hero-copy { max-width: none; }
}

@media (max-width: 720px) {
  .rabbits { grid-template-columns: 1fr; }
  .col.black li { font-size: 19px; }
  .topbar { padding: 12px var(--pad); }
  .brand span { display: none; }
}

/* ================================================================ studio ==
   Music, artwork and words - everything the back room feeds the page.
   ========================================================================= */

.navlinks {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.navlinks a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
}
.navlinks a:hover { color: var(--bone); }
.navlinks a.on { color: var(--bone); }

main.inner { padding-top: 78px; margin-left: auto; margin-right: auto; }   /* centres itself whatever width the room's bar gives it - without this, dragging the width pinned the whole site to the left edge, for ever */
.band.top { border-top: 0; }

/* ---------------------------------------------------------------- music -- */

.tracks {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 30px;
}

.track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 26px);
  background: var(--ink);
  padding: clamp(18px, 2.4vw, 26px);
  transition: background .4s ease;
}
.track:hover { background: var(--ink-2); }

.cover {
  width: clamp(76px, 9vw, 104px);
  height: clamp(76px, 9vw, 104px);
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
}

.cover.blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
}
.cover.blank .ico { width: 24px; height: 35px; }
.cover.blank .ico use { fill: #050506; stroke: var(--moon); stroke-opacity: .55; stroke-width: .7; }

.track-body { flex: 1; min-width: 0; }

.track-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 6px;
}

.note { color: var(--ash); font-size: 14px; margin: 0 0 12px; }

audio {
  width: 100%;
  max-width: 460px;
  height: 38px;
  filter: invert(92%) hue-rotate(180deg) contrast(.92);
}

/* -------------------------------------------------------------- artwork -- */

.artstrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.piece { margin: 0; }

.piece img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: opacity .35s ease;
}
.piece a:hover img { opacity: .82; }

.wall .piece img { aspect-ratio: 4 / 5; }

.piece figcaption {
  display: block;
  font-size: 13px;
  color: var(--ash);
  padding-top: 10px;
}
.piece figcaption strong { display: block; color: var(--bone); font-weight: 500; }
.piece figcaption .note { display: block; margin: 4px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- words -- */

.wordlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 30px;
}

.wordcard {
  display: block;
  background: var(--ink);
  padding: clamp(24px, 3vw, 34px);
  text-decoration: none;
  transition: background .4s ease;
}
.wordcard:hover { background: var(--ink-2); }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember);
}

.wordcard h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: var(--bone);
  margin: 12px 0 8px;
}

.ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}
.ref.big { font-size: 12px; margin-bottom: 26px; }

.excerpt { color: #b9b5ae; font-size: 15px; margin: 0; }
.when { color: var(--ash); font-size: 12px; margin: 14px 0 0; }

.lyric {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.55;
  color: var(--bone);
  max-width: 34ch;
  margin: 0 0 40px;
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 3vw, 34px);
}

/* ---------------------------------------------------------------- verse -- */

.verse { text-align: center; }

.verse blockquote {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.4;
  color: var(--bone);
}
.verse blockquote p { margin: 0 0 22px; }

.verse cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
}

.about {
  max-width: 46ch;
  margin: 34px auto 0;
  color: #b9b5ae;
  text-align: left;
  font-size: 16.5px;
}

@media (max-width: 640px) {
  .track { flex-direction: column; align-items: flex-start; }
  .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .navlinks { gap: 6px 14px; }
  .navlinks a { font-size: 10px; letter-spacing: .14em; }
  .brand span { display: none; }
  main.inner { padding-top: 64px; }
}

/* ============================================================= wet black ==
   Black is not one colour. Wet black has a light on it: a hard bright edge,
   a slow falloff, and a pool of reflection underneath. Everything below is
   that idea applied to the page itself.
   ========================================================================= */

:root {
  --ink:   #050506;
  --ink-2: #0a0a0e;
  --wet:   rgba(214, 226, 240, .07);   /* the sheen */
  --edge:  rgba(239, 243, 249, .16);   /* the bright edge water leaves */
}

body {
  background:
    radial-gradient(120% 85% at 78% -8%,  rgba(196, 214, 236, .10) 0%, rgba(196, 214, 236, .03) 34%, rgba(5, 5, 6, 0) 62%),
    radial-gradient(90%  70% at 12% 108%, rgba(150, 168, 190, .05) 0%, rgba(5, 5, 6, 0) 60%),
    var(--ink);
  background-attachment: fixed;
}

/* the drawn rabbit sits in the light instead of bleeding off the edge */
.portrait.draw {
  width: min(46%, 520px);
  height: auto;
  top: 50%;
  right: 3%;
  transform: translateY(-46%);
  -webkit-mask-image: none;
          mask-image: none;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .85))
          drop-shadow(0 0 90px rgba(198, 216, 238, .12));
}

@media (max-width: 900px) {
  .portrait.draw {
    position: relative;
    width: min(70%, 340px);
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto -8px;
    opacity: 1;
    display: block;
  }
  .hero { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
  .hero-copy { margin-top: 8px; }
  .hero-acts { justify-content: center; }
  .lead { margin-left: auto; margin-right: auto; }
}

/* every band is a wet slab: dark, with light caught along its top edge */
.band, footer {
  background:
    linear-gradient(to bottom, rgba(214, 226, 240, .035) 0%, rgba(214, 226, 240, 0) 180px),
    var(--ink);
  border-top: 1px solid var(--edge);
}

.band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(to right,
              rgba(239, 243, 249, 0) 0%,
              rgba(239, 243, 249, .42) 22%,
              rgba(239, 243, 249, .12) 60%,
              rgba(239, 243, 249, 0) 100%);
  pointer-events: none;
}

.tool { background: linear-gradient(to bottom, rgba(214, 226, 240, .06), rgba(5, 5, 6, 1) 60%); }

/* headings read like light sliding off a wet surface */
.band h2, .hero h1 {
  background: linear-gradient(168deg, #ffffff 0%, #e6e9ee 34%, #9aa2ad 76%, #6d747e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero h1 span {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: transparent;
}

/* cards: a bead of light on the top edge, a reflection when you touch them */
.track, .lesson, .wordcard, .col, .piece img, .join-form input {
  position: relative;
  background-image: linear-gradient(to bottom, var(--wet) 0%, rgba(5, 5, 6, 0) 46%);
}

.track:hover, .lesson:hover, .wordcard:hover {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .12) 0%, rgba(5, 5, 6, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .22);
}

.tracks, .wordlist, .rabbits, .lessons { background: var(--edge); }

.cover, .piece img {
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .18), 0 12px 30px rgba(0, 0, 0, .6);
}

/* buttons look like wet stone with a light on the lip */
.btn, .join-form button {
  background-image: linear-gradient(to bottom, #ffffff 0%, #dcdfe4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 26px rgba(0, 0, 0, .55);
}
.btn:hover, .join-form button:hover {
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .3);
}

.tool-link {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .1), rgba(214, 226, 240, 0));
  border-color: var(--edge);
}

/* the moon, and the little rabbits, get the same wet edge */
.moon { filter: drop-shadow(0 0 26px rgba(214, 226, 240, .5)); }
.loner use { filter: drop-shadow(0 0 22px rgba(214, 226, 240, .35)); }

.verse blockquote p {
  background: linear-gradient(170deg, #ffffff 0%, #dfe3e9 40%, #8e959f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* a wet floor under the whole page */
footer { box-shadow: inset 0 60px 60px -60px rgba(214, 226, 240, .07); }

/* Gradient text is beautiful until a browser does not support it, and then the
   heading is simply invisible. Never let that happen. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .band h2, .hero h1, .verse blockquote p { color: var(--bone); background: none; }
}

/* ================================================== studio, room, wall ==
   The three places where somebody actually does something on this site.
   ======================================================================= */

/* ------------------------------------------------------------- studio -- */

.booth {
  border: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(5, 5, 6, 0) 50%);
  padding: clamp(26px, 4vw, 48px);
  text-align: center;
}

.meter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 62px;
  margin-bottom: 26px;
}

.meter span {
  width: 6px;
  height: 8px;
  background: rgba(239, 236, 230, .1);
  transition: height .07s linear, background .12s linear;
}
.meter span.on  { height: 46px; background: var(--bone); }
.meter span.hot { background: var(--ember); }

.clock {
  font-family: var(--mono);
  font-size: clamp(38px, 7vw, 62px);
  letter-spacing: .04em;
  color: var(--bone);
  margin: 0 0 22px;
}

.booth-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ember);
  color: #fff;
  border: 1px solid var(--ember);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 30px;
  cursor: pointer;
}
.rec:disabled { opacity: .45; cursor: default; }
.rec .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; }

.booth.live .rec .dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .booth.live .rec .dot { animation: none; } }

.btn.ghosted {
  background: transparent;
  background-image: none;
  color: var(--bone);
  border-color: var(--edge);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 26px;
}
.btn.ghosted:disabled { opacity: .35; cursor: default; }

.booth-state { color: var(--ash); font-size: 14px; margin: 0 0 22px; }

.keep-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.keep-form input[type="text"] {
  flex: 1 1 240px;
  max-width: 340px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 16px;
}
.keep-form input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.keep-form button { cursor: pointer; }
.keep-form button:disabled { opacity: .4; cursor: default; }

.booth audio { width: 100%; max-width: 520px; margin: 4px auto 0; display: block; }

/* --------------------------------------------------------------- room -- */

.room { border: 1px solid var(--edge); background: var(--ink-2); }

/* The log fills its column. When the side panel is taller - a camera in the
   Cam list, a long list of names - the log grows to match rather than
   leaving a dead band beneath the last line. */
/* One height for the three columns. The log runs from the live strip down to
   the bar; the cameras on the left and the names on the right scroll inside
   the same height, so nothing pushes the bar away from the writing. */
.room-split { --roomh: min(66vh, 680px); align-items: stretch; }
.room-log {
  height: var(--roomh);
  overflow-y: auto;
  padding: 20px clamp(16px, 2.4vw, 28px);
}
.room-split > .camside,
.room-split > .here { height: var(--roomh); max-height: none; overflow-y: auto; }
.live:has(.beams.has) + .room .room-split { --roomh: min(42vh, 440px); }
/* the writing shrinks a little when there is a picture above it, so both fit */


.line { padding: 12px 0; border-bottom: 1px solid rgba(239, 236, 230, .06); }
.line:last-child { border-bottom: 0; }

.line-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.line-head strong { color: var(--bone); font-weight: 500; }
.line-head span   { color: var(--ash); opacity: .7; }
.line-head em {
  font-style: normal;
  color: var(--ember);
  letter-spacing: .18em;
}
.line-head .drop {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .5;
}
.line-head .drop:hover { color: var(--ember); opacity: 1; }

.line-body {
  margin: 0;
  color: #d6d2cb;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.line.host .line-body { color: var(--bone); }

.room-say {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(5, 5, 6, 0));
}
.room-say input {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 15px;
  min-width: 0;
}
#who  { flex: 0 1 170px; }
.linewrap { position: relative; display: flex; flex: 1 1 260px; min-width: 0; }
#line { flex: 1 1 auto; min-width: 0; padding-right: 44px; }

/* The microphone that writes, sitting inside the box on the right.
   Written as .room-say .dictate on purpose: .room-say button styles every
   button in the form like the Send button, and would win against a bare
   .dictate - which is how the mic first appeared as a wide bone slab with
   the icon pushed to the bottom. */
.room-say .dictate {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ash);
  cursor: pointer;
  letter-spacing: 0;
}
.room-say .dictate svg { display: block; width: 18px; height: 18px; }
.room-say .dictate:hover { color: var(--bone); background: transparent; border-color: var(--edge); }
.room-say .dictate.on,
.room-say .dictate.on:hover {
  color: #fff;
  background: rgba(196, 69, 47, .85);
  border-color: rgba(196, 69, 47, 1);
  animation: dictpulse 1.4s ease-in-out infinite;
}
@keyframes dictpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 69, 47, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(196, 69, 47, 0); }
}
@media (prefers-reduced-motion: reduce) { .room-say .dictate.on { animation: none; } }
.room-say input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.room-say button {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
}
.room-say button:hover { background: transparent; color: var(--bone); }

.room-note { color: var(--ember); font-size: 13px; margin: 12px 0 0; min-height: 18px; }

/* --------------------------------------------------------------- wall -- */

.drawkit { border: 1px solid var(--edge); background: var(--ink-2); padding: 16px; }

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--edge);
}

.tool-row { display: flex; align-items: center; gap: 8px; }

.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(239, 236, 230, .25);
  background: var(--s);
  cursor: pointer;
  padding: 0;
}
.swatch.on { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3px var(--bone); }

.size {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  cursor: pointer;
  padding: 0;
}
.size span { display: block; background: var(--bone); border-radius: 50%; }
.size.on { border-color: var(--bone); background: rgba(239, 236, 230, .07); }

.tbtn {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
}
.tbtn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.tbtn.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }

#wall {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--edge);
  background: #0a0a0d;
  cursor: crosshair;
  touch-action: none;
}

.draw-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 16px;
}
.draw-acts input[type="text"] {
  flex: 1 1 200px;
  max-width: 300px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 15px;
}
.draw-acts input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.draw-acts button { cursor: pointer; }
.draw-acts .fineprint { margin: 0; }

@media (max-width: 640px) {
  .tools { gap: 10px 14px; }
  .room-log { height: 54vh; }
}


/* --------------------------------------------------------- logo + doors -- */

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
}
@media (max-width: 720px) { .brand .mark { width: 30px; height: 30px; } }

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.door {
  display: block;
  background-image: linear-gradient(to bottom, var(--wet) 0%, rgba(5, 5, 6, 0) 46%);
  background-color: var(--ink);
  padding: clamp(26px, 3.2vw, 40px);
  text-decoration: none;
  transition: background .4s ease;
}
.door:hover {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .12) 0%, rgba(5, 5, 6, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .22);
}

.door-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
  opacity: .55;
}

.door h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.15;
  color: var(--bone);
  margin: 14px 0 10px;
}
.door h3::after { content: " \2192"; color: var(--ash); font-size: .7em; }

.door p { color: #b9b5ae; font-size: 15.5px; margin: 0; }

/* ================================================ drop, share, poems ==
   ===================================================================== */

/* The bar was see-through, so text scrolled up underneath it and smeared.
   Make it read as glass over black instead. */
.topbar {
  background: linear-gradient(to bottom,
              rgba(5, 5, 6, .97) 0%,
              rgba(5, 5, 6, .93) 62%,
              rgba(5, 5, 6, 0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:target, .track, .band { scroll-margin-top: 90px; }

/* ----------------------------------------------------------- the drop -- */

.dropzone {
  border: 1px dashed rgba(239, 243, 249, .28);
  background: linear-gradient(to bottom, var(--wet), rgba(5, 5, 6, 0) 60%);
  padding: clamp(38px, 7vw, 78px) 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .18s;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: rgba(239, 243, 249, .55);
  outline: none;
}
.dropzone.over {
  border-color: var(--bone);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .16), rgba(5, 5, 6, 0) 70%);
  transform: scale(1.006);
}
.dropzone.cold { opacity: .45; cursor: not-allowed; }

.ico.big { width: 42px; height: 60px; margin-bottom: 18px; }
.ico.big use { fill: #030304; stroke: var(--moon); stroke-opacity: .7; stroke-width: .55; }

.dz-main {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--bone);
  margin: 0 0 8px;
}
.dz-sub { color: var(--ash); font-size: 14px; margin: 0; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--bone);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dropped {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.shot {
  margin: 0;
  border: 1px solid var(--edge);
  background: var(--ink-2);
  overflow: hidden;
}
.shot img { display: block; width: 100%; height: 130px; object-fit: cover; }
.shot figcaption {
  padding: 9px 11px;
  font-size: 12.5px;
  color: var(--ash);
  overflow-wrap: anywhere;
}
.shot.waiting { opacity: .55; }
.shot.waiting img { filter: grayscale(1); }
.shot.ok  figcaption { color: var(--bone); }
.shot.bad { border-color: rgba(196, 69, 47, .5); }
.shot.bad figcaption { color: #e08a78; }
.shot.bad img { opacity: .3; }

/* ---------------------------------------------------------- the share -- */

.share {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.share:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.share.shared { color: var(--ink); background: var(--bone); border-color: var(--bone); }

.share-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.share-row .out { margin-top: 0; }
.share-row .share { margin-top: 0; }

.piece figcaption .share { margin-top: 10px; }

/* the track someone shared you */
.track.lit {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .14) 0%, rgba(5, 5, 6, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .3), inset 3px 0 0 var(--bone);
}

/* ----------------------------------------------------- raps and poems -- */

.kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -30px 0 40px;
}

.kinds a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  border: 1px solid var(--edge);
  padding: 9px 16px;
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(214, 226, 240, 0));
}
.kinds a:hover { color: var(--bone); border-color: rgba(239, 236, 230, .4); }
.kinds a.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.kinds a span { opacity: .6; margin-left: 6px; }
.kinds a.on span { opacity: .55; }

/* ============================================ mic, camera, and the viewer ==
   ========================================================================= */

/* ------------------------------------------------------- room additions -- */

.room { position: relative; }

.dropveil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  background: rgba(5, 5, 6, .88);
  border: 2px dashed rgba(239, 243, 249, .5);
  pointer-events: none;
}
.dropveil.on { display: grid; }
.dropveil span {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  color: var(--bone);
}

.iconbtn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  cursor: pointer;
  padding: 0;
  transition: color .2s, border-color .2s, background .2s;
}
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.iconbtn.rec {
  color: #fff;
  background: var(--ember);
  border-color: var(--ember);
  animation: micpulse 1s ease-in-out infinite;
}
@keyframes micpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .iconbtn.rec { animation: none; } }

/* what you are about to send */
.pending {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .07), rgba(5, 5, 6, 0));
}
.pending img { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--edge); }
.pending audio { flex: 1; max-width: 340px; height: 38px; }
.pending-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pending-side span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
}

/* the camera */
.camera {
  border-top: 1px solid var(--edge);
  padding: 14px 16px;
  background: #050506;
}
.camera video {
  display: block;
  width: 100%;
  max-height: 46vh;
  background: #000;
  border: 1px solid var(--edge);
  transform: scaleX(-1);          /* a mirror, the way a mirror should be */
}
.cam-acts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* a photo sitting in the room */
.shotlink {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 1px solid var(--edge);
  background: none;
  cursor: zoom-in;
  max-width: 320px;
  line-height: 0;
}
.shotlink img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.shotlink:hover { border-color: rgba(239, 236, 230, .45); }

.voicenote {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 38px;
  margin-top: 10px;
}

/* ------------------------------------------------------------- the viewer -- */

body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(3, 3, 4, .97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* half screen: the same viewer, windowed */
.lb.half {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(62vw, 900px);
  height: min(62vh, 640px);
  border: 1px solid var(--edge);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}

.lb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  background: rgba(5, 5, 6, .9);
  flex: none;
  flex-wrap: wrap;
}

.lb-cap {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1;
}
.lb-btn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .5); }
.lb-btn.lb-x { font-size: 16px; padding: 5px 12px; }

.lb-zoom {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  min-width: 52px;
  text-align: center;
}

.lb-stage {
  flex: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-out;
}
.lb-stage.grabby { cursor: grab; }
.lb-stage.grabby:active { cursor: grabbing; }

.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform .08s linear;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 640px) {
  .lb.half { width: 92vw; height: 62vh; }
  .lb-cap { flex-basis: 100%; }
  .iconbtn { width: 42px; height: 42px; }
}

/* the house that built it */
.by {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .55;
  margin-top: 16px !important;
}
.by a { color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--line); }
.by a:hover { color: var(--bone); border-color: var(--bone); opacity: 1; }

/* ------------------------------------------------------------------------
   hidden means HIDDEN.

   The browser's own rule for [hidden] is display:none, but any author rule
   that sets display - .lb{display:flex}, .btn{display:inline-block} - beats
   it and the element stays on screen. That is what pinned the picture
   viewer open over the whole site. One rule, once, for the whole stylesheet.
   ------------------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   The camera was squeezing the conversation off the screen, and the preview
   itself was too small to frame yourself in. Give the picture real room,
   and never let the talk shrink to nothing underneath it.
   ------------------------------------------------------------------------ */

.camera { padding: 16px; }

.camera video {
  width: 100%;
  max-height: min(64vh, 620px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #000;
}

/* a camera that is open should not eat the whole room */
.room-log { min-height: 200px; }

.cam-acts { justify-content: center; }
.cam-acts .tbtn { padding: 13px 26px; font-size: 12px; }

/* if a picture is being sent, show it bigger than a stamp */
.pending img { width: 110px; height: 110px; }

@media (max-width: 640px) {
  .camera video { aspect-ratio: 3 / 4; max-height: 58vh; }
  .pending img { width: 84px; height: 84px; }
}

/* a shared screen is not a mirror, and it should say what you are looking at */
.camera video.noflip { transform: none; object-fit: contain; background: #000; }

.cam-what {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}

/* Mirror is a switch you can see the state of */
.tbtn.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }

/* ============================================== the record of the meetings ==
   ========================================================================== */

.meet-head { margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--edge); }

.meet-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--bone);
  margin: 0 0 8px;
}
.meet-head .meta { color: var(--ash); font-size: 14px; margin: 0 0 16px; }

.who { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.who .pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--edge);
  padding: 6px 11px;
}
.who .pill em { font-style: normal; color: var(--bone); margin-left: 6px; }

.meet { border-left: 1px solid var(--edge); padding-left: clamp(16px, 3vw, 30px); }

.meet .line { padding: 16px 0; border-bottom: 1px solid rgba(239, 236, 230, .06); }
.meet .line:last-child { border-bottom: 0; }
.meet .line.host .line-body { color: var(--bone); }

.gone { color: var(--ash); font-size: 13px; font-style: italic; margin: 10px 0 0; opacity: .7; }

/* the camera panel, blown up to the whole screen */
.camera.isbig,
.camera:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000;
  padding: 20px;
}
.camera.isbig video,
.camera:fullscreen video {
  max-height: calc(100vh - 120px);
  height: auto;
  aspect-ratio: auto;
}
.camera:fullscreen .cam-acts { margin-top: 18px; }

/* Say what the buttons do. An icon on its own is a guess. */
.iconbtn {
  width: auto;
  min-width: 46px;
  height: 46px;
  gap: 9px;
  padding: 0 14px;
  grid-auto-flow: column;
  align-items: center;
}
.ib-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .ib-lbl { display: none; }
  .iconbtn { width: 46px; padding: 0; }
}

/* ==================================================== the wall of faces ==
   Video goes browser to browser. The server only carried the introductions.
   ======================================================================= */

/* The live strip is small and stays out of the way. It grows only when a
   camera is on, and then the picture sits directly above the writing. */
.live {
  border: 1px solid var(--edge);
  border-bottom: 0;
  background: var(--ink-2);
  margin-bottom: 0;
}

.live-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
}
.live-bar .tbtn { padding: 8px 12px; font-size: 10px; }
.live-bar .live-what { font-size: 10px; }
.live-bar .beamgrade { font-size: 10px; padding: 6px 8px; }

.live-what {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
}
.live-what span { color: var(--bone); margin-left: 10px; letter-spacing: .16em; }

.live.on .live-what::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ember);
  margin-right: 10px;
  animation: livedot 1.4s ease-in-out infinite;
}
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live.on .live-what::before { animation: none; } }

.tbtn.leaving { color: var(--ember); border-color: rgba(196, 69, 47, .5); }
.tbtn.off { color: var(--ember); border-color: rgba(196, 69, 47, .45); }

/* Everybody sees everybody. The tiles share the room out evenly and grow as
   people leave, so two people get a big picture each and eight get a wall. */
.live-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--edge);
}
.live-tiles:empty { display: none; }

/* one other person is the common case - give them room */
.live-tiles:has(.tile-live:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .live-tiles:has(.tile-live:nth-child(2):last-child) { grid-template-columns: 1fr; }
}

.tile-live {
  position: relative;
  margin: 0;
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tile-live video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.tile-live.mine video { transform: scaleX(-1); }   /* your own face is a mirror */

/* A shared screen is not a face - showing it back to front would be useless. */
.tile-live.mine.shot video { transform: none; object-fit: contain; }

/* The tile is black on purpose while the camera is off. Say so, rather than
   leaving someone staring at a black square wondering what broke. */
.tile-live.dark::after {
  content: "camera off";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  pointer-events: none;
}

.tile-live figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(5, 5, 6, .92), rgba(5, 5, 6, 0));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-live.mine { outline: 1px solid rgba(239, 243, 249, .35); outline-offset: -1px; }

.tile-live.joining::after {
  content: "connecting";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  background: rgba(5, 5, 6, .8);
}

@media (max-width: 640px) {
  .live-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* somebody is in there waiting for you */
.live.waiting {
  border-color: rgba(196, 69, 47, .55);
  background: linear-gradient(to bottom, rgba(196, 69, 47, .1), rgba(5, 5, 6, 0) 60%);
}
.live.waiting .live-what span { color: var(--ember); }
.live.waiting .tbtn#liveGo {
  color: var(--ink);
  background: var(--bone);
  border-color: var(--bone);
}

/* the track that is playing */
.track.playing {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .14) 0%, rgba(5, 5, 6, 0) 60%);
  box-shadow: inset 3px 0 0 var(--bone);
}
.track.playing h3::after {
  content: " \25B6";
  font-size: .5em;
  vertical-align: middle;
  color: var(--ash);
}

/* your own tile while you are showing a screen: not a mirror, and it fits */
.tile-live.mine.screening video { transform: none; object-fit: contain; background: #000; }
.tile-live.screening figcaption::after { content: " - sharing screen"; color: var(--ember); }
.tbtn.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }

/* the page for something that is not there */
.lost .field { max-width: 720px; opacity: .8; }
.lost .doors { border-color: var(--edge); }

/* ------------------------------------------------- searching and what's new */

.finder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -30px 0 22px;
}

.finder input[type="search"] {
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 15px;
  -webkit-appearance: none;
}
.finder input::placeholder { color: #5f5c57; }
.finder input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }

.finder button {
  flex: none;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 13px 24px;
  cursor: pointer;
}
.finder button:hover { background: transparent; color: var(--bone); }
.finder .cue { border: 0; padding: 0; }
.finder .cue::after { content: ""; }

/* the newest thing, in the hero */
.newest { margin: -18px 0 30px; }

.newest a {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  text-decoration: none;
  color: #cfcbc4;
  font-size: 14.5px;
  border: 1px solid var(--edge);
  padding: 11px 16px;
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .08), rgba(214, 226, 240, 0));
  transition: border-color .25s, color .25s;
}
.newest a:hover { border-color: rgba(239, 236, 230, .45); color: var(--bone); }

.newest span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ember);
}
.newest em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
}

/* a tile that could not connect should say so, not just sit there */
.tile-live.brokenlink { outline: 1px solid rgba(196, 69, 47, .6); outline-offset: -1px; }
.tile-live.brokenlink::after {
  content: "cannot reach them";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember);
  background: rgba(5, 5, 6, .86);
}
.tile-live.joining::after { content: attr(data-state); }

/* ============================================== screens people are showing ==
   Not video - a fresh picture every couple of seconds, which gets through
   any network that can load this page.
   ========================================================================= */

.beams { display: none; }
.beams.has {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--edge);
  border-top: 1px solid var(--edge);
}

.beamtile {
  position: relative;
  margin: 0;
  background: #000;
  overflow: hidden;
}

.beamtile img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
}

.beamtile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(5, 5, 6, .92), rgba(5, 5, 6, 0));
}
.beamtile figcaption::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  margin-right: 9px;
  animation: livedot 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .beamtile figcaption::before { animation: none; } }

.beamtile.mine { outline: 1px solid rgba(239, 243, 249, .3); outline-offset: -1px; }

.tbtn.beam { border-color: rgba(239, 243, 249, .3); }

/* the way out when two networks will not talk to each other */
.tbtn.big {
  border-color: rgba(239, 243, 249, .18);
  color: var(--ash);
}
.tbtn.big:hover { color: var(--bone); border-color: rgba(239, 243, 249, .4); }

/* ================================================== the video check room ==
   ========================================================================= */

.revform { display: grid; gap: 0; max-width: 720px; }
.revform label { display: block; margin: 0 0 18px; font-size: 14px; color: var(--ash); }
.revform label .sm { font-size: 12px; opacity: .8; }
.revform input[type="text"], .revform textarea {
  display: block; width: 100%; margin-top: 8px;
  background: transparent; border: 1px solid var(--edge); color: var(--bone);
  font-family: var(--sans); font-size: 15px; padding: 13px 15px;
}
.revform textarea { resize: vertical; line-height: 1.55; }
.revform input[type="file"] { display: block; width: 100%; margin-top: 8px; color: var(--ash); font-size: 14px; padding: 9px 0; }
.revform input:focus, .revform textarea:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.revform button {
  justify-self: start;
  background: var(--bone); color: var(--ink); border: 1px solid var(--bone);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 15px 30px; cursor: pointer;
}
.revform button:hover { background: transparent; color: var(--bone); }

.revvideo {
  display: block;
  width: 100%;
  max-width: 520px;
  max-height: 70vh;
  background: #000;
  border: 1px solid var(--edge);
  margin-bottom: 34px;
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.check {
  background-image: linear-gradient(to bottom, var(--wet), rgba(5, 5, 6, 0) 46%);
  background-color: var(--ink);
  padding: clamp(22px, 2.8vw, 32px);
}
.check h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ash); margin: 0 0 14px; font-weight: 400;
}
.check .quoted {
  font-family: var(--serif); font-size: 19px; line-height: 1.35;
  color: var(--bone); margin: 0 0 18px;
  border-left: 1px solid var(--edge); padding-left: 14px;
  overflow-wrap: anywhere;
}
.check ul { list-style: none; margin: 0; padding: 0; }
.check li {
  position: relative; padding: 10px 0 10px 22px;
  border-top: 1px solid rgba(239, 236, 230, .06);
  font-size: 14.5px; color: #b9b5ae;
}
.check li:first-child { border-top: 0; }
.check li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 9px; height: 1px; }
.check li.good::before { background: #6faf7a; }
.check li.warn::before { background: #c9a227; }
.check li.bad::before  { background: var(--ember); }
.check li.bad strong { color: var(--ember); }

.revnote { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.revnote input[type="text"] {
  background: transparent; border: 1px solid var(--edge); color: var(--bone);
  font-family: var(--sans); font-size: 15px; padding: 13px 15px; min-width: 0;
}
#nwho  { flex: 0 1 170px; }
#ntext { flex: 1 1 280px; }
.revnote input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.revnote button[type="submit"] {
  background: var(--bone); color: var(--ink); border: 1px solid var(--bone);
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 13px 26px; cursor: pointer;
}
.revnote button[type="submit"]:hover { background: transparent; color: var(--bone); }

.notes { border-left: 1px solid var(--edge); padding-left: clamp(16px, 3vw, 28px); }
.notes .line { padding: 14px 0; border-bottom: 1px solid rgba(239, 236, 230, .06); }
.notes .line:last-child { border-bottom: 0; }

.stamp {
  background: transparent; border: 1px solid var(--edge); color: var(--bone);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  padding: 3px 8px; cursor: pointer;
}
.stamp:hover { border-color: var(--bone); background: rgba(239, 243, 249, .08); }

/* what the caption engine found, said properly */
.check.wide { grid-column: 1 / -1; }
.check li.care::before { background: #8fb3c4; }
.check li strong { display: block; color: var(--bone); font-size: 16px; margin-bottom: 3px; overflow-wrap: anywhere; }
.check li.bad strong  { color: var(--ember); }
.check li.warn strong { color: #c9a227; }
.check li.care strong { color: #8fb3c4; }
.rlabel {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 6px;
}
.rwhy { display: block; color: #b9b5ae; font-size: 14px; }
.honest {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
  color: var(--ash);
  font-size: 13px;
}

/* the nav has grown - let it wrap on a phone instead of falling off */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .navlinks { width: 100%; justify-content: flex-start; gap: 6px 14px; }
  main.inner { padding-top: 104px; }
  .hero { padding-top: 132px; }
}

/* ------------------------------------------- watching one screen properly -- */

.beamgrade {
  flex: none;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px 10px;
  cursor: pointer;
}
.beamgrade:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.beamgrade option { background: #0c0c10; color: var(--bone); }

.beambig {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  background: rgba(3, 3, 4, .97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.beambig-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  background: rgba(5, 5, 6, .9);
  flex: none;
}

.beambig-who {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beambig-who::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ember);
  margin-right: 10px;
  animation: livedot 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .beambig-who::before { animation: none; } }

.beambig-stage {
  flex: 1;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 14px;
  cursor: zoom-out;
}
.beambig-stage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  background: #000;
  cursor: default;
}

/* dragging a box round the part you want */
.beambig-stage { cursor: crosshair; overflow: hidden; }
.beambig-stage.zoomed { cursor: grab; }
.beambig-stage.zoomed:active { cursor: grabbing; }
.beambig-stage img { will-change: transform; }

.beambig-marquee {
  position: fixed;
  z-index: 220;
  border: 1px solid var(--bone);
  background: rgba(239, 243, 249, .12);
  box-shadow: 0 0 0 9999px rgba(3, 3, 4, .35);
  pointer-events: none;
}

.beambig-hint {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .7;
  margin-right: 6px;
}
@media (max-width: 720px) { .beambig-hint { display: none; } }

/* zoom you can actually hit, and see the number of */
.lb-btn.zbtn {
  font-size: 18px;
  line-height: 1;
  padding: 6px 16px;
  min-width: 46px;
}
.beambig-pct {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bone);
  min-width: 58px;
  text-align: center;
}

/* right click to circle - a ring that lands and fades */
.beamring {
  position: fixed;
  z-index: 240;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border: 3px solid var(--ember);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(196, 69, 47, .55), inset 0 0 18px rgba(196, 69, 47, .3);
  animation: ringpop 2.6s ease-out forwards;
}

@keyframes ringpop {
  0%   { transform: scale(.35); opacity: 0; }
  14%  { transform: scale(1.12); opacity: 1; }
  26%  { transform: scale(1); opacity: 1; }
  72%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .beamring { animation: none; opacity: .9; }
}

/* the lights are on in the room */
.pulse { margin: -14px 0 24px; }

.pulse a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #cfcbc4;
  font-size: 14.5px;
  border: 1px solid rgba(196, 69, 47, .5);
  padding: 11px 17px;
  background-image: linear-gradient(to bottom, rgba(196, 69, 47, .12), rgba(196, 69, 47, 0));
  transition: border-color .25s, color .25s;
}
.pulse a:hover { border-color: var(--ember); color: var(--bone); }

.pulse em { font-style: normal; }

.pdot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px rgba(196, 69, 47, .8);
  animation: livedot 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pdot { animation: none; } }

/* the emoji tray */
.emotray {
  position: absolute;
  right: 16px;
  bottom: 78px;
  z-index: 12;
  width: min(360px, calc(100% - 32px));
  max-height: 54vh;
  overflow-y: auto;
  padding: 14px 16px 16px;
  background: #0c0c10;
  border: 1px solid var(--edge);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);

  /* it comes up from the bar rather than appearing on top of everything */
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.emotray.up { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .emotray { transition: none; transform: none; }
}

.emo-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 12px 0 8px;
}
.emo-head:first-child { margin-top: 0; }

.emo-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }

.emo {
  background: transparent;
  border: 1px solid transparent;
  font-size: 21px;
  line-height: 1;
  padding: 7px 0;
  cursor: pointer;
  border-radius: 3px;
  transition: transform .1s ease-out, background .1s ease-out;
}
.emo:hover { background: rgba(239, 243, 249, .07); transform: scale(1.25); }
.emo:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .emo:hover, .emo:active { transform: none; } }
.emo:hover { background: rgba(239, 243, 249, .1); border-color: var(--edge); }

@media (max-width: 640px) {
  .emotray { right: 8px; left: 8px; width: auto; bottom: 92px; }
  .emo-row { grid-template-columns: repeat(6, 1fr); }
}

/* speak and the room hears you */
.tbtn.talk { border-color: rgba(196, 69, 47, .45); }
.tbtn.talk.on {
  color: #fff;
  background: var(--ember);
  border-color: var(--ember);
  animation: micpulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .tbtn.talk.on { animation: none; } }

.talkwho {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
  min-height: 12px;
}

/* When the host has stopped you. You keep the room and every word in it -
   only the writing closes. */
.room-stopped {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: #e8836f;
  background: rgba(196, 69, 47, .1);
  border-top: 1px solid rgba(196, 69, 47, .45);
}
form.stopped .iconbtn,
form.stopped button[type="submit"] { opacity: .35; pointer-events: none; }
form.stopped #line { opacity: .5; }

/* ===========================================================================
   Camera settings - a panel that opens when you ask for it, and not before.
   It used to be a fixed rail with an empty stage beside it; that was a
   settings screen pretending to be furniture.
   ========================================================================= */

/* the settings are a window over the room, not a strip inside it */
.live-rail {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 3, 5, .78);
}
.rail-box {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 22px 22px 24px;
  background: #0a0a0e;
  border: 1px solid var(--edge);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
}
.rail-title { margin: 0 0 16px; font-size: 22px; }
.rail-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--ash);
  cursor: pointer;
}
.rail-x:hover { color: var(--bone); }

.rail-cols {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.rail-col { min-width: 0; }
.rail-cols .selfcheck { max-width: 480px; }

.live-rail h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: normal;
}
.live-rail h3 + .devlist { margin-bottom: 16px; }

.devlist { display: flex; flex-direction: column; gap: 4px; }

.dev {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 9px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev:hover { color: var(--bone); border-color: rgba(239, 243, 249, .35); }
.dev.on { color: var(--bone); border-color: rgba(239, 243, 249, .55); background: rgba(239, 243, 249, .05); }

.devnone, .devnote { margin: 0; font-size: 11px; line-height: 1.45; color: var(--ash); opacity: .75; }

.tbtn.wide { display: block; width: 100%; margin-top: 12px; text-align: center; }
.live-rail > .tbtn.wide { max-width: 300px; margin-top: 16px; }

.selfcheck video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--edge);
  transform: scaleX(-1);               /* a mirror, the way a mirror behaves */
}

.meter:has(> i) { height: 4px; margin: 8px 0; background: rgba(239, 243, 249, .1); overflow: hidden; }   /* the live rail's strip - the studio's bar meter keeps its own rule */
.meter > i { display: block; height: 100%; width: 0%; background: var(--bone); transition: width .09s linear; }

.tbtn.set { border-color: rgba(239, 243, 249, .18); color: var(--ash); }
.tbtn.set:hover, .tbtn.set.on { color: var(--bone); border-color: rgba(239, 243, 249, .45); }

@media (max-width: 760px) {
  .rail-cols { grid-template-columns: 1fr; }
  .devlist { flex-direction: row; flex-wrap: wrap; }
  .dev { width: auto; max-width: 100%; }
}

/* ===========================================================================
   Who is in the room
   ========================================================================= */

/* cameras | the writing | who is here. The camera column exists only while
   somebody is on camera; the rest of the time the writing has that room. */
.room-split {
  display: grid;
  --herew: 240px;
  grid-template-columns: auto 0px minmax(0, 1fr) 0px var(--herew);
  gap: 1px;
  background: var(--edge);
}

.here {
  padding: 14px 14px 16px;
  background: #08080b;
  min-width: 0;
}

.here h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: normal;
}
.here h3 span { opacity: .7; }

.herelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.herelist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bone);
  min-width: 0;
}
.herelist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.herelist .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fbf7a;
  box-shadow: 0 0 6px rgba(111, 191, 122, .8);
}

.herelist .herenobody { color: var(--ash); opacity: .7; font-size: 12px; }

.herenote {
  margin: 14px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ash);
  opacity: .6;
}

@media (max-width: 780px) {
  .room-split { grid-template-columns: 1fr; }
  .camside { order: -2; max-height: none; padding: 10px 16px; }
  .camlist { flex-direction: row; overflow-x: auto; }
  .here { order: -1; padding: 12px 16px; }
  .herelist { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .herenote { display: none; }
}

/* Green in the room, amber stepped away, red gone. */
.line-head .dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ash);
  margin-right: 2px;
}
.line-head .dot.on  { background: #6fbf7a; box-shadow: 0 0 6px rgba(111, 191, 122, .75); }
.line-head .dot.brb { background: #d8a13a; box-shadow: 0 0 6px rgba(216, 161, 58, .6); }
.line-head .dot.off { background: #c4452f; box-shadow: none; opacity: .75; }

.herelist .dot.brb { background: #d8a13a; box-shadow: 0 0 6px rgba(216, 161, 58, .6); }
.herelist li.isaway span { opacity: .6; }
.herelist li em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d8a13a;
  opacity: .9;
}

/* ===========================================================================
   The wall of people - who is here, and what they make
   (the artwork gallery already owns .wall, so this is .folk)
   ========================================================================= */

.folk {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.folkcard { margin: 0; }

.folkgo {
  display: block;
  border: 1px solid var(--edge);
  background: var(--ink-2);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color .15s ease-out, transform .15s ease-out;
}
.folkgo:hover { border-color: rgba(239, 243, 249, .45); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .folkgo:hover { transform: none; } }

.folkgo .shot {
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--edge);
}
.folkgo .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.folkgo .noshot {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .5;
}

.folkbody { display: block; padding: 14px 15px 16px; }
.folkbody .who  { display: block; font-size: 15px; margin-bottom: 4px; }
.folkbody .line { display: block; font-size: 13px; line-height: 1.5; opacity: .85; margin-bottom: 8px; }
.folkbody .ttl  { display: block; font-size: 12px; line-height: 1.45; color: var(--ash); margin-bottom: 8px; }

.folkbody .host,
.folkbody .went {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folkbody .went { margin-top: 5px; opacity: .6; }

.signit { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--edge); }
.signit h2 { margin: 0 0 8px; }

.signform { margin-top: 22px; max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.signform label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 12px;
}
.signform label .hint { text-transform: none; letter-spacing: .04em; opacity: .6; }
.signform input {
  font: inherit;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--edge);
  color: var(--bone);
}
.signform input:focus { outline: none; border-color: rgba(239, 243, 249, .5); }
.signform .tbtn { margin-top: 18px; align-self: flex-start; }

.said {
  margin: 24px 0 0;
  padding: 12px 15px;
  font-size: 13px;
  border: 1px solid rgba(111, 191, 122, .5);
  background: rgba(111, 191, 122, .08);
}
.said.bad { border-color: rgba(196, 69, 47, .5); background: rgba(196, 69, 47, .1); color: #e8836f; }

/* people in the room who have not typed a name yet */
.herelist .herequiet span { color: var(--ash); opacity: .7; font-style: italic; }

/* the camera next to a name: outline = in the live room, filled = camera on,
   a screen = sharing one */
.cambadge {
  display: inline-flex;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: var(--ash);
  opacity: .8;
  vertical-align: middle;
}
.cambadge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cambadge.c2 { color: #6fbf7a; }
.cambadge.c2 svg rect { fill: currentColor; }
.cambadge.c3 { color: var(--bone); }
.cambadge.c4 { color: var(--ash); opacity: .55; }      /* has a camera, not on */
.line-head .cambadge { margin-left: 0; margin-right: 6px; }

/* CAM, beside your own name in the list: the way in, and the setting */
.herelist .cambtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 7px 3px 5px;
  font: inherit;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 3px;
  color: var(--ash);
  cursor: pointer;
  flex: 0 0 auto;
}
.herelist .cambtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.herelist .cambtn:hover { color: var(--bone); border-color: rgba(239, 243, 249, .45); }
.herelist .cambtn.c1 { color: var(--bone); border-color: rgba(239, 243, 249, .35); }
.herelist .cambtn.c2, .herelist .cambtn.c3 { color: #6fbf7a; border-color: rgba(111, 191, 122, .55); }
.herelist .cambtn.c2 svg rect { fill: currentColor; }

/* the rail lights for a moment when CAM sends you to it */
.live-rail { transition: box-shadow .3s ease-out; }
.live-rail.lit { box-shadow: inset 0 0 0 1px rgba(239, 243, 249, .55); }

/* the camera beside somebody else's name */
.herelist .cambtn.them { padding: 3px 5px; }
.herelist .cambtn.them.c0 { color: var(--ash); opacity: .7; cursor: default; }
.herelist .cambtn.them.c2, .herelist .cambtn.them.c3 { cursor: pointer; }

/* one tile up big, the rest small along the bottom */
.live-tiles.hasbig { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.live-tiles.hasbig .tile-live.big {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
}
.live-tiles.hasbig .tile-live.big video { object-fit: contain; }
.tile-live { cursor: zoom-in; }
.tile-live.big { cursor: zoom-out; }

/* the room page heading, kept to one line */
.roompage { padding-bottom: 14px; }
.roompage .kicker { margin-bottom: 4px; }
.roomhead { display: flex; align-items: baseline; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 14px; }
.roomhead h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }
.roomsub { margin: 0; font-size: 14px; color: var(--ash); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.roomsub .out { margin: 0; }
.howto { position: relative; }
.howto summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  list-style: none;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary:hover { color: var(--bone); }
.howto[open] summary { color: var(--bone); }
.howto p {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  width: min(460px, 80vw);
  margin: 8px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bone);
  background: #0a0a0e;
  border: 1px solid var(--edge);
  box-shadow: 0 20px 50px rgba(0,0,0,.7);
}

/* a camera pulled out into its own window */
.popcam {
  position: fixed;
  z-index: 60;
  width: 260px;
  background: #000;
  border: 1px solid rgba(239, 243, 249, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
  user-select: none;
}
.popbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px 5px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  background: #0c0c10;
  cursor: grab;
}
.popbar:active { cursor: grabbing; }
.popx { font: inherit; font-size: 16px; line-height: 1; background: transparent; border: 0; color: var(--ash); cursor: pointer; padding: 0 4px; }
.popx:hover { color: var(--bone); }
.popcam video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.popgrip {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(239, 243, 249, .45) 50%);
}

/* the name that follows the pointer while a camera is being dragged */
.camghost {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(12, 12, 16, .95);
  border: 1px solid rgba(239, 243, 249, .35);
}

/* the small live face in front of a name */
.line-head .facewrap { position: relative; flex: 0 0 auto; margin-right: 8px; display: inline-block; line-height: 0; }
.line-head .facegrip {
  position: absolute;
  right: 0; bottom: 0;
  width: 12px; height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(111, 191, 122, .9) 50%);
  border-radius: 0 0 3px 0;
  opacity: 0;
  transition: opacity .12s;
}
.line-head .facewrap:hover .facegrip { opacity: 1; }
.line-head .facecam {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(111, 191, 122, .7);
  border-radius: 3px;
  background: #000;
  cursor: pointer;
  vertical-align: middle;
  touch-action: none;
}
.line-head:has(.facewrap) { align-items: center; }

/* how big the faces are - each viewer's own setting */
.facesize {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: -4px 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
}
.facesize .fs-lbl { margin-right: 2px; }
.fs-btn, .fs-pre {
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 6px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.2;
}
.fs-btn { min-width: 22px; text-align: center; font-size: 12px; }
.fs-btn:hover, .fs-pre:hover { color: var(--bone); border-color: rgba(239, 243, 249, .45); }
.fs-pre.on { color: var(--bone); border-color: rgba(111, 191, 122, .7); }
.fs-now { min-width: 26px; text-align: center; color: var(--bone); }
.fs-pick { display: inline-flex; gap: 4px; margin-left: 4px; }
@media (max-width: 780px) { .facesize { margin: 0 0 6px; } }

/* the live face beside a name in the side list */
.herelist .facecam.side {
  flex: 0 0 auto;
  border: 1px solid rgba(111, 191, 122, .7);
  border-radius: 3px;
  background: #000;
  cursor: pointer;
  touch-action: none;
}
.herelist li.hasface { align-items: center; }

/* The tiles are not shown. The small face beside a name is the camera. The
   videos stay in the page, unseen, because that is where the sound comes in. */
.live-tiles { display: none !important; }
.live-tiles video { width: 1px; height: 1px; }

/* one camera, filling the screen */
.fullcam {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  display: grid;
  place-items: center;
  cursor: zoom-out;
}
.fullcam video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.fullcam video.mirror { transform: scaleX(-1); }
.fullcam p {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  pointer-events: none;
}

/* somebody is on camera but you are not in the live room yet */
.facewait {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-right: 8px;
  padding: 0;
  background: #000;
  border: 1px solid rgba(111, 191, 122, .7);
  border-radius: 3px;
  color: #6fbf7a;
  cursor: pointer;
  animation: waitpulse 1.6s ease-in-out infinite;
}
.facewait svg { width: 45%; height: 45%; }
.herelist .facewait { margin-right: 0; }
.line-head:has(.facewait) { align-items: center; }
@keyframes waitpulse { 0%, 100% { border-color: rgba(111, 191, 122, .35); } 50% { border-color: rgba(111, 191, 122, .9); } }
@media (prefers-reduced-motion: reduce) { .facewait { animation: none; } }

/* ===========================================================================
   The Cam list - every camera that is on, once, with the name on it
   ========================================================================= */
.camside {
  padding: 14px 12px 16px;
  background: #08080b;
  min-width: 0;
  max-height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.camside h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: normal;
}
.camside h3 span { opacity: .7; }
.camlist { display: flex; flex-direction: column; gap: 10px; }

.camtile { margin: 0; position: relative; display: inline-block; line-height: 0; }
.camtile canvas.facecam,
.camtile .facewait { display: block; margin: 0; border-radius: 3px; }
.camtile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 5px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(to top, rgba(5, 5, 6, .92), rgba(5, 5, 6, 0));
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.camtile.sharing canvas.facecam { border-color: var(--bone); }

.facewait { flex-direction: column; gap: 3px; }
.facewait span { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.facewait svg { width: 32%; height: 32%; }

/* push to talk - lit while held */
.tbtn.ptt { border-color: rgba(111, 191, 122, .45); }
.tbtn.ptt.on { background: rgba(111, 191, 122, .2); border-color: #6fbf7a; color: var(--bone); }

/* somebody is speaking - the glow eases in and fades out, never snaps */
.camtile canvas.facecam, .camtile .facewait { transition: box-shadow .35s ease, border-color .35s ease; }
.herelist li span { transition: color .35s ease; }
.herelist li .dot { transition: box-shadow .35s ease; }
.tbtn.ptt { transition: background .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .camtile canvas.facecam, .camtile .facewait, .herelist li span, .herelist li .dot { transition: none; }
}
.camtile.talking canvas.facecam,
.camtile.talking .facewait { border-color: #6fbf7a; box-shadow: 0 0 0 2px rgba(111, 191, 122, .55), 0 0 14px rgba(111, 191, 122, .5); }
.herelist li.talking span { color: #6fbf7a; }
.herelist li.talking .dot { box-shadow: 0 0 10px rgba(111, 191, 122, 1); }

/* the drag bar above the cameras - all of them grow and shrink with it */
.camslide { display: block; margin: -4px 0 12px; }
.camslide input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}
.camslide input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: rgba(239, 243, 249, .18); border-radius: 2px; }
.camslide input[type="range"]::-moz-range-track { height: 3px; background: rgba(239, 243, 249, .18); border-radius: 2px; }
.camslide input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid #08080b;
  box-shadow: 0 0 0 1px rgba(239, 243, 249, .5);
}
.camslide input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid #08080b;
  box-shadow: 0 0 0 1px rgba(239, 243, 249, .5);
}
.camslide input[type="range"]:hover::-webkit-slider-thumb { background: #6fbf7a; }
.camslide input[type="range"]:hover::-moz-range-thumb { background: #6fbf7a; }

/* beside the names on the right: headset = can hear, mic = can be heard */
.herelist .ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  color: var(--ash);
  opacity: .55;
  transition: color .35s ease, opacity .35s ease, filter .35s ease;
}
.herelist .ico svg { width: 100%; height: 100%; display: block; }
.herelist .ico.headset { opacity: .8; }
.herelist .ico.mic.open { opacity: .9; color: var(--bone); }
.herelist li.talking .ico.mic {
  color: #6fbf7a;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(111, 191, 122, .9));
}
@media (prefers-reduced-motion: reduce) { .herelist .ico { transition: none; } }

/* the way back down, when new lines arrived while you were reading back */
.room-split { position: relative; }
.jumpdown {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--bone);
  color: var(--ink);
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
.jumpdown:hover { background: #fff; }

@media (max-width: 780px) {
  .room-split > .camside, .room-split > .here { height: auto; }
  .room-split { --roomh: 56vh; }
}

/* a camera whose person has stepped away */
.camtile canvas.facecam, .camtile figcaption { transition: opacity .35s ease, filter .35s ease; }
.camtile.away canvas.facecam,
.camtile.away .facewait { opacity: .45; filter: grayscale(.6); }
.camtile.away figcaption { color: #d8a13a; }

/* the headset face beside a name */
.herelist .ico.face { width: 18px; height: 18px; opacity: 1; margin-left: 6px; }
.herelist .ico.face svg { overflow: visible; }
.hf-open { display: none; }
.hf-light { transition: fill .35s ease, filter .35s ease; }
.hf-mouth { transition: opacity .2s ease; }

/* mic open: the light on the cup comes on */
.herelist .ico.face.micopen .hf-light { fill: #6fbf7a; filter: drop-shadow(0 0 3px rgba(111, 191, 122, .9)); }

/* talking: the mouth opens and the light burns bright */
.herelist li.talking .ico.face .hf-flat { display: none; }
.herelist li.talking .ico.face .hf-open { display: block; }
.herelist li.talking .ico.face .hf-light { fill: #8ff59a; filter: drop-shadow(0 0 5px rgba(111, 191, 122, 1)); }
.herelist li.talking .ico.face { filter: drop-shadow(0 0 4px rgba(111, 191, 122, .6)); }

/* stepped away: the face goes quiet */
.herelist li.isaway .ico.face { opacity: .5; filter: grayscale(.5); }

/* ===========================================================================
   Faces - the headset people. Pick one; it sits beside your name.
   ========================================================================= */
.facepick { margin: 18px 0 4px; }
.facepick h3 { margin: 0 0 8px; }
.facepick .hint { text-transform: none; letter-spacing: .04em; opacity: .6; margin-left: 8px; }
.facerow { display: flex; flex-wrap: wrap; gap: 8px; }
.faceopt {
  width: 48px; height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .15s, transform .15s;
}
.faceopt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faceopt.none span { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.faceopt:hover { border-color: rgba(239, 243, 249, .4); transform: scale(1.06); }
.faceopt.on { border-color: #6fbf7a; }

.facepic { border-radius: 50%; object-fit: cover; display: block; background: #000; flex: 0 0 auto; }
.herelist .facepic { width: 44px; height: 44px; margin-right: 4px; }
.herelist li.hasface { align-items: center; }

/* a face standing in the waiting square, dimmed, with "press to see" over it */
.facewait { position: relative; overflow: hidden; }
.facewait .facepic.behind { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; opacity: .35; }
.facewait svg, .facewait span { position: relative; }

/* ===========================================================================
   Toward the mockup: faces on the lines, a numbered list with signal bars,
   LIVE on the feeds
   ========================================================================= */

/* a message is a row: the picked face on the left, the words beside it */
.line { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.line > .lineface { grid-row: 1 / span 3; width: 44px; height: 44px; margin-top: 0; }
.line > .lineface:not(.has) { width: 0; margin: 0; }
.line > .line-head, .line > .line-body, .line > .shotlink, .line > .voicenote { grid-column: 2; }
.line > .lineface .facepic { width: 44px; height: 44px; border: 1px solid var(--edge); }

/* the list: number, face, name, state, bars */
.herelist li { gap: 8px; }
.herelist .num { flex: 0 0 auto; min-width: 14px; font-family: var(--mono); font-size: 10px; font-weight: normal; color: var(--ash); opacity: .7; text-align: right; }
.herelist li span { flex: 1 1 auto; }
.herelist .bars { flex: 0 0 auto; width: 14px; height: 12px; margin-left: auto; }
.herelist .bars svg { width: 100%; height: 100%; display: block; }
.herelist .bars rect { fill: rgba(239, 243, 249, .14); transition: fill .35s ease; }
.herelist .bars.l1 rect:nth-child(1) { fill: #6fbf7a; }
.herelist .bars.l2 rect:nth-child(-n+2) { fill: #6fbf7a; }
.herelist .bars.l3 rect { fill: #6fbf7a; }
.herelist li.talking .bars rect { fill: #8ff59a; filter: drop-shadow(0 0 3px rgba(111, 191, 122, .9)); }

/* LIVE, on a feed that is showing a picture */
.camtile .livebadge {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 2;
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  background: rgba(5, 5, 6, .8);
  color: #6fbf7a;
  border: 1px solid rgba(111, 191, 122, .55);
  border-radius: 3px;
  display: none;
  pointer-events: none;
}
.camtile:has(canvas.facecam) .livebadge { display: block; }
.camtile.away .livebadge { color: #d8a13a; border-color: rgba(216, 161, 58, .5); }

/* a new version is ready - press to take it */
.update {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  font-size: 13px;
  color: var(--bone);
  background: #0c0c10;
  border: 1px solid #6fbf7a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
}
.update .tbtn { padding: 8px 14px; border-color: #6fbf7a; color: #6fbf7a; }
.update .tbtn:hover { background: rgba(111, 191, 122, .15); }
.roomver { margin: 8px 0 0; text-align: right; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); opacity: .45; }

/* a recording device that is not a microphone */
.dev.notmic { opacity: .5; text-decoration: line-through; }
.dev.notmic.on { opacity: .8; text-decoration: none; border-color: rgba(196, 69, 47, .7); color: #e8836f; }

/* the live bar's honest number */
.liverate { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ash); white-space: nowrap; }

/* The name is the point of the row. Everything else gives way to it:
   the number, the face, the icons and the bars are fixed and small, the
   name takes whatever is left and trims with an ellipsis only as a last
   resort. "Neo" was showing as "N." - that is what this fixes. */
.herelist li { gap: 6px; }
.herelist li > span { flex: 1 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.herelist .num { min-width: 10px; }
.herelist .ico.face { width: 16px; height: 16px; margin-left: 2px; }
.herelist .cambtn { padding: 3px 5px; gap: 0; margin-left: 2px; }
.herelist .cambtn span { display: none; }          /* the icon says it */
.herelist .bars { margin-left: 2px; }
.herelist li em { margin-left: 2px; }

/* "you" as a small tag beside your own name, not part of it */
.herelist li em.you { color: var(--ash); opacity: .8; }
.herelist .cambtn { min-width: 24px; justify-content: center; }
.herelist .cambtn svg { display: block; width: 14px; height: 14px; }

/* the picked face carries the state: in the room, mic open, talking */
.herelist .facepic { border: 2px solid transparent; transition: border-color .35s ease, box-shadow .35s ease; }
.herelist .facepic.live { border-color: rgba(239, 243, 249, .25); }
.herelist .facepic.micopen { border-color: rgba(111, 191, 122, .8); }
.herelist li.talking .facepic { border-color: #8ff59a; box-shadow: 0 0 0 2px rgba(111, 191, 122, .35), 0 0 10px rgba(111, 191, 122, .8); }

/* when they talk, the face grows - in place, nothing else moves */
.herelist .facepic { transition: border-color .35s ease, box-shadow .35s ease, transform .25s ease; transform-origin: center; }
.herelist li.talking .facepic { transform: scale(1.35); z-index: 2; position: relative; }
.herelist li { min-height: 44px; }        /* room to grow without shoving the rows */
@media (prefers-reduced-motion: reduce) { .herelist li.talking .facepic { transform: none; } }

/* ===========================================================================
   The rows, the way the mockup had them: face, name, what they are doing,
   bars at the edge. Each row is a small card.
   ========================================================================= */
.herelist { gap: 4px; }
.herelist li {
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background .25s ease, border-color .25s ease;
}
.herelist li:hover { background: rgba(239, 243, 249, .03); }
.herelist li.talking { background: rgba(111, 191, 122, .07); border-color: rgba(111, 191, 122, .25); }
.herelist .num { min-width: 12px; font-size: 10px; opacity: .45; }
.herelist .whoblock { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.herelist .whoblock span { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.herelist .whoblock .state { font-size: 11px; color: var(--ash); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herelist li.talking .whoblock .state { color: #6fbf7a; opacity: 1; }
.herelist li.isaway .whoblock span { opacity: .6; }
.herelist .facepic { border-width: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.herelist li.talking .facepic { transform: scale(1.22); }
.herelist li em { margin-left: 0; }
.herelist .bars { width: 16px; height: 14px; }
.herelist .herequiet, .herelist .herenobody { min-height: 0; padding: 6px 8px; }

/* paragraphs stay paragraphs, in the box and on the page */
.room-say textarea#line { resize: none; overflow-y: auto; line-height: 1.45; font: inherit; }
.line-body { white-space: pre-wrap; word-break: break-word; }

/* a passage sent as a file */
.doccard {
  display: block;
  margin: 6px 0 2px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  background: rgba(239, 243, 249, .03);
  color: inherit;
  text-decoration: none;
  max-width: 640px;
}
.doccard:hover { border-color: rgba(239, 243, 249, .4); }
.dochead { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.docpeek { margin: 0; font: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--bone); opacity: .9; max-height: 200px; overflow: hidden; }

/* the name is never squeezed below a readable width; the icons give way */
.herelist .whoblock { min-width: 96px; }
.herelist li { gap: 6px; }
.herelist .ico.face, .herelist .bars, .herelist .cambtn, .herelist em { flex-shrink: 0; }
.herelist .facepic { flex-shrink: 0; }

/* the name box says what it is */
.namebox { position: relative; display: block; }
.namebox .name-lbl {
  position: absolute;
  left: 30px; top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  pointer-events: none;
  display: flex; align-items: center; gap: 5px;
}
.namebox .pencil { font-style: normal; font-size: 11px; color: #6fbf7a; }
.namebox input { padding-top: 18px !important; cursor: text; }
.namebox input:focus { border-color: #6fbf7a; }

/* close a camera; reopen it */
.camtile .camx {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 3;
  width: 22px; height: 22px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: rgba(5, 5, 6, .8);
  color: var(--ash);
  border: 1px solid rgba(239, 243, 249, .25);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.camtile:hover .camx { opacity: 1; }
.camtile .camx:hover { color: var(--bone); border-color: rgba(196, 69, 47, .8); background: rgba(196, 69, 47, .3); }
.camtile.closed { display: block; }
.camtile.closed .livebadge, .camtile.closed .camx { display: none; }
.camtile.closed figcaption { position: static; background: none; padding: 4px 0 0; }
.camclosed {
  display: block;
  width: 100%;
  padding: 10px 8px;
  font: inherit;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  background: rgba(239, 243, 249, .03);
  border: 1px dashed rgba(239, 243, 249, .25);
  border-radius: 3px;
  cursor: pointer;
}
.camclosed:hover { color: var(--bone); border-color: rgba(239, 243, 249, .5); }

/* the bar and the auto button share a row */
.camsizer { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
.camsizer .camslide { flex: 1 1 auto; margin: 0; }
.camauto {
  flex: 0 0 auto;
  font: inherit;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 7px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  border-radius: 3px;
  cursor: pointer;
}
.camauto.on { color: #6fbf7a; border-color: rgba(111, 191, 122, .6); }
.camauto:hover { color: var(--bone); }
.camlist { transition: none; }
.camtile canvas.facecam, .camtile .facewait { transition: opacity .35s ease, filter .35s ease; }   /* sizes snap - no width/height animation */

/* ===========================================================================
   Drag bars: the two hairlines between the columns, the bottom edge, the
   right edge. Thin until you hover; the cursor says what they do.
   ========================================================================= */
.room-split.camw { grid-template-columns: var(--camw) 0px minmax(0, 1fr) 0px var(--herew); }
.room-split.camw > .camside { width: var(--camw); overflow-x: hidden; }
.gripv {
  position: relative;
  width: 0;
  cursor: col-resize;
  z-index: 5;
}
.gripv::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -4px;
  width: 9px;
  background: transparent;
  transition: background .15s;
}
.gripv:hover::after, .dragging .gripv::after { background: rgba(111, 191, 122, .35); }

.room { position: relative; }
.griph {
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  height: 10px;
  cursor: row-resize;
  z-index: 6;
}
.griph::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: transparent; transition: background .15s; }
.griph:hover::after, .dragging .griph::after { background: rgba(111, 191, 122, .55); }
.gripr {
  position: absolute;
  top: 0; bottom: 0;
  right: -5px;
  width: 10px;
  cursor: col-resize;
  z-index: 6;
}
.gripr::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.gripr:hover::after, .dragging .gripr::after { background: rgba(111, 191, 122, .55); }
body.dragging { user-select: none; cursor: grabbing; }
@media (max-width: 780px) {
  .room-split { grid-template-columns: 1fr !important; }
  .gripv, .gripr { display: none; }
}

/* new here? */
.firsttime { margin: 0 0 16px; padding: 12px 12px 14px; border: 1px solid rgba(111, 191, 122, .45); background: rgba(111, 191, 122, .06); }
.firsttime h3 { margin: 0 0 8px; color: #6fbf7a; }
.firsttime ol { margin: 0 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--bone); }
.firsttime b { color: #6fbf7a; font-weight: 600; }
.firsttime .tbtn { padding: 6px 12px; font-size: 10px; }

/* the sound meter under a name */
.herelist .lvl { display: block; height: 3px; margin-top: 4px; background: rgba(239, 243, 249, .1); border-radius: 2px; overflow: hidden; }
.herelist .lvl b { display: block; height: 100%; width: 0; background: #6fbf7a; transition: width .12s linear; }

/* my own line in trouble */
.herelist li.trouble .whoblock .state { color: #e8836f; opacity: 1; }
.herelist li.trouble .bars rect { fill: #e8836f; }

/* the wall */
.wallinvite { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6fbf7a; text-decoration: none; }
.wallinvite:hover { color: var(--bone); }

/* behind you */
.bgpick { margin-top: 16px; }
.bgrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bgopt {
  font: inherit;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  border-radius: 3px;
  cursor: pointer;
}
.bgopt.on { color: #6fbf7a; border-color: rgba(111, 191, 122, .6); }
.bgopt:hover { color: var(--bone); }
.bgopt.bgfile { border-style: dashed; }
#bgThumb { width: 64px; height: 36px; object-fit: cover; border: 1px solid var(--edge); border-radius: 2px; }

/* a file in the room */
.filecard {
  display: block;
  margin: 6px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 191, 122, .35);
  background: rgba(111, 191, 122, .05);
  max-width: 520px;
}
.filehead { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--bone); word-break: break-all; }
.fileinside { display: block; margin-top: 4px; font-size: 12px; color: var(--ash); line-height: 1.45; word-break: break-word; }
.filedl { display: inline-block; margin-top: 8px; text-decoration: none; }
.pendbar { display: block; height: 3px; margin: 6px 0; background: rgba(239, 243, 249, .1); border-radius: 2px; overflow: hidden; }
.pendbar b { display: block; height: 100%; width: 0; background: #6fbf7a; transition: width .2s linear; }

/* ===========================================================================
   Private: the panel, the badge, the ring
   ========================================================================= */
.herelist li.pmable .whoblock { cursor: pointer; }
.herelist li.pmable:hover .whoblock span { color: #6fbf7a; }
.herelist .pmdot {
  flex: 0 0 auto;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #6fbf7a;
  color: #050506;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.pmdock {
  position: fixed;
  right: 18px; bottom: 96px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - 24px);
  z-index: 60;
  pointer-events: none;
}
.pmdock > * { pointer-events: auto; }
.pmbox {
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #0b0c0f;
  border: 1px solid rgba(111, 191, 122, .5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  z-index: 60;
}
.pmhead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--edge); }
.pmtitle { flex: 1 1 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmtitle b { color: var(--bone); font-weight: 600; letter-spacing: .05em; text-transform: none; font-size: 13px; }
.pmhead .rail-x { position: static; }
.pmtalk { flex: 0 0 auto; }
.pmtalk:not(.on):not(:disabled) { color: #6fbf7a; border-color: #6fbf7a; font-weight: 600; }
.pmtalk.on { color: #050506; background: #d9534f; border-color: #d9534f; }
.pmnote { margin: 0; padding: 6px 14px; font-size: 11px; color: var(--ash); opacity: .8; }
.pmlog { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 8px 14px; }
.pmline { margin: 0 0 10px; }
.pmline.me { text-align: right; }
.pmline.me .filecard, .pmline.me .shotlink { margin-left: auto; text-align: left; }
.pmwho { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); margin-bottom: 2px; }
.pmline p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bone); white-space: pre-wrap; word-break: break-word; }
.pmline.me p { color: #a9d8b0; }
.pmline .shotlink img { max-width: 220px; max-height: 160px; }
.pmpend { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; color: var(--bone); border-top: 1px solid var(--edge); }
.pmpend span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmpend.bad span { white-space: normal; color: #f0a08f; }
.pmpendimg { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--edge); background: #000; }
.pmpendgo { flex: 0 0 auto; height: 30px; padding: 0 12px; font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; background: #6fbf7a; color: #05110a; border: 0; cursor: pointer; }
.pmpendgo:hover { filter: brightness(1.1); }   /* the reason a file did not go, said in the window itself */
.pmfoot { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--edge); }
.pmfoot .iconbtn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; }
.pmfoot .iconbtn svg { width: 18px; height: 18px; }
.pmfoot textarea { flex: 1 1 auto; min-height: 34px; max-height: 120px; resize: none; font: inherit; font-size: 14px; padding: 7px 10px; background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); color: var(--bone); }
.pmfoot button[type=submit] { flex: 0 0 auto; height: 34px; padding: 0 12px; font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; background: #6fbf7a; color: #050506; border: 0; cursor: pointer; }
.pmfoot button[type=submit]:disabled { opacity: .5; }
.privring {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: #0b0c0f;
  border: 1px solid #6fbf7a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  color: var(--bone);
  font-size: 13px;
  z-index: 70;
  max-width: calc(100vw - 24px);
}
@media (max-width: 780px) {
  .pmdock { right: 6px; left: 6px; bottom: 70px; max-width: none; }
  .pmbox { width: 100%; }
}

/* the two pictures on a private line */
.pmcams { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 14px 4px; background: #000; }
.pmcams video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; display: block; }
.pmcams .pmmine { transform: scaleX(-1); }
.pmcams video { outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .25s ease, box-shadow .25s ease; }
.pmcams video.talking { outline: 3px solid #6fbf7a; box-shadow: 0 0 16px rgba(111, 191, 122, .7); }
.pmcamnote { grid-column: 1 / -1; font-size: 11px; color: var(--ash); padding: 2px 0 4px; }
.pmcamnote:empty { display: none; }

/* mail */
.iconbtn.mail { position: relative; }
.iconbtn.mail .mailn {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #6fbf7a; color: #050506;
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.iconbtn.mail.has { color: #6fbf7a; animation: mailpulse 1.6s ease-in-out 3; }
@keyframes mailpulse { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
.maillist {
  position: fixed;
  z-index: 65;
  min-width: 240px; max-width: 320px;
  background: #0b0c0f;
  border: 1px solid rgba(111, 191, 122, .5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  padding: 4px;
}
.mailrow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  width: 100%; text-align: left;
  padding: 8px 10px;
  font: inherit; color: var(--bone);
  background: transparent; border: 0; cursor: pointer;
}
.mailrow:hover { background: rgba(239, 243, 249, .05); }
.mailrow b { font-weight: 600; }
.mailrow i { font-style: normal; font-family: var(--mono); font-size: 10px; color: #6fbf7a; }
.mailrow small { grid-column: 1 / -1; color: var(--ash); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow.unread b { color: #6fbf7a; }
.pmding { float: right; font: inherit; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #6fbf7a; background: transparent; border: 0; padding: 0; cursor: pointer; }
.pmding:hover { color: var(--bone); }
.privring { flex-wrap: wrap; justify-content: center; }
.privchoice { display: flex; flex-wrap: wrap; gap: 6px; }
.pmtyping { display: block; color: #6fbf7a; font-style: italic; }
.pmtyping:empty { display: none; }
.filedl.busy { color: #6fbf7a; border-color: rgba(111, 191, 122, .6); cursor: progress; }
.pmpend { flex-wrap: wrap; }
.pmpend .pendbar { flex: 1 1 100%; margin: 4px 0 0; }
.pmhead { cursor: pointer; }
.pmbox.min > :not(.pmhead) { display: none; }
.pmbox.min { max-height: none; }
.pmcount { font-style: normal; font-family: var(--mono); font-size: 10px; color: #6fbf7a; letter-spacing: .05em; text-transform: none; }
.pmhold { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(196, 69, 47, .12); border-bottom: 1px solid rgba(196, 69, 47, .5); font-size: 12px; color: var(--bone); }
.pmhold span { flex: 1 1 100%; }
.filelook { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; color: var(--ash); }
.filelook.bad { color: #e8836f; font-weight: 600; }
.pmline.sys p { font-size: 11px; color: var(--ash); font-style: italic; }
.pmline.sys .pmwho { display: none; }
.filecard .dlbar { margin: 8px 0 0; height: 4px; }
.pminv, .pmhelp { flex: 0 0 auto; }
.pminv { font-size: 14px; padding: 4px 9px; }
.pmhelp { color: #e8836f; border-color: rgba(232, 131, 111, .5); }
.pminvlist { border-bottom: 1px solid var(--edge); padding: 4px; max-height: 160px; overflow-y: auto; }
.pminvlist small { display: block; padding: 6px 10px; color: var(--ash); font-size: 11px; }
/* a question */
.herelist .hand {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #f2c14e; color: #050506;
  font-weight: 800; font-size: 13px; line-height: 20px; text-align: center;
  animation: handblink 1s steps(1) infinite;
}
@keyframes handblink { 50% { opacity: .25; } }
.iconbtn.ask.on { color: #f2c14e; }
.pmtally { color: #6fbf7a; }
#roomCount { color: var(--ash); }
/* reputation */
.herelist .repline { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: #f2c14e; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herelist .repline:empty { display: none; }
.herelist .trust { display: block; height: 3px; margin-top: 3px; background: rgba(239, 243, 249, .08); border-radius: 2px; overflow: hidden; }
.herelist .trust b { display: block; height: 100%; width: 0; background: #7a8794; transition: width .4s ease; }
.herelist .trust.mid b { background: #f2c14e; }
.herelist .trust.high b { background: #6fbf7a; }
.herelist .give { flex: 0 0 auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.herelist li:hover .give { opacity: 1; }
.herelist .give button { width: 22px; height: 22px; padding: 0; font: inherit; font-size: 12px; line-height: 1; background: transparent; border: 1px solid var(--edge); border-radius: 3px; color: #f2c14e; cursor: pointer; }
.herelist .give button:hover { border-color: #f2c14e; background: rgba(242, 193, 78, .12); }
/* the helper: a program, and it looks like one */
.herelist li.bot .whoblock span { color: #7fb7ff; }
.herelist li.bot .whoblock span::after { content: ' \2699'; font-size: 11px; opacity: .8; }
.line.bot .line-head strong { color: #7fb7ff; }
/* links and players */
.line-body a, .pmline p a { color: #7fb7ff; text-decoration: underline; text-decoration-color: rgba(127, 183, 255, .4); word-break: break-all; }
.line-body a:hover, .pmline p a:hover { color: var(--bone); }
.embed { position: relative; margin: 8px 0 4px; max-width: 560px; }
.embed iframe { display: block; width: 100%; border: 0; background: #000; }
.embed.wide iframe { aspect-ratio: 16 / 9; }
.embed.tall iframe { max-width: 325px; height: 575px; }
.embed.strip iframe { height: 200px; }
.embedplay {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #050506; background: #7fb7ff; border: 0; border-radius: 3px; cursor: pointer;
}
.embedplay:hover { background: var(--bone); }
.embedx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; font: inherit; font-size: 16px; line-height: 1; background: rgba(5, 5, 6, .8); color: var(--bone); border: 1px solid rgba(239, 243, 249, .3); border-radius: 3px; cursor: pointer; }
.pmline.me .embed { margin-left: auto; }
/* phones */
.tapbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 80;
  padding: 14px 22px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #050506; background: #6fbf7a; border: 0; border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  animation: tapglow 1.2s ease-in-out infinite alternate;
}
@keyframes tapglow { to { box-shadow: 0 10px 30px rgba(111, 191, 122, .6); } }
.phonebar {
  display: block; width: 100%;
  margin: 0 0 10px;
  padding: 12px 14px;
  font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: #050506; background: #6fbf7a; border: 0; border-radius: 4px;
}
/* your colour, your font */
.stylepick {
  position: absolute; z-index: 65;
  margin-top: 6px;
  width: 300px; max-width: calc(100vw - 24px);
  padding: 12px 14px 14px;
  background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}
.stylepick h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); font-weight: normal; }
.stylepick h4 + .fonts, .stylepick .swatches { margin-bottom: 12px; }
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sw { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font: inherit; color: var(--ash); padding: 0; }
.sw.on { border-color: var(--bone); box-shadow: 0 0 0 2px #050506 inset; }
.sw[data-col="0"] { border: 1px dashed var(--edge); }
.fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fo { padding: 7px 8px; font: inherit; font-size: 14px; color: var(--bone); background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); border-radius: 3px; cursor: pointer; text-align: left; }
.fo.on { border-color: #6fbf7a; color: #6fbf7a; }
.tools { position: relative; }
/* a frozen picture */
.camtile.frozen canvas.facecam { filter: grayscale(.7) brightness(.7); }
.camtile.frozen .livebadge { color: #e8836f; border-color: rgba(232, 131, 111, .6); }

/* the join card */
.joinpop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(5, 5, 6, .86);
}
.joinbox {
  width: 100%; max-width: 380px;
  padding: 22px 20px 18px;
  background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.joinbox h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: .02em; }
.joinbox p { margin: 0 0 14px; color: var(--ash); font-size: 14px; line-height: 1.5; }
.joinbox label { display: block; margin: 0 0 14px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.joinbox input { display: block; width: 100%; margin-top: 6px; padding: 12px; font: inherit; font-size: 18px; color: var(--bone); background: rgba(239, 243, 249, .05); border: 1px solid var(--edge); border-radius: 4px; }
.joingo { display: block; width: 100%; padding: 16px; font: inherit; font-size: 17px; font-weight: 700; color: #050506; background: #6fbf7a; border: 0; border-radius: 6px; cursor: pointer; }
.joinread { display: block; width: 100%; margin-top: 8px; padding: 10px; font: inherit; font-size: 13px; color: var(--ash); background: transparent; border: 1px solid var(--edge); border-radius: 6px; cursor: pointer; }
.joinnote { margin-top: 12px !important; font-size: 12px !important; }
.joinbox { position: relative; }
.joinx { position: absolute; top: 8px; right: 8px; }
.joinpop[hidden] { display: none !important; }
.pmbox.loose { position: fixed; z-index: 61; right: auto; bottom: auto; }
.pmhead { cursor: grab; user-select: none; }
.pmhead:active { cursor: grabbing; }

/* ===========================================================================
   The coach
   ========================================================================= */
.coach h2 { margin: 28px 0 12px; font-size: 20px; }
.coach .ticks { list-style: none; margin: 0; padding: 0; }
.coach .ticks li { margin: 0 0 10px; }
.coach .ticks label { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--edge); background: rgba(239, 243, 249, .02); cursor: pointer; line-height: 1.5; font-size: 14px; color: var(--bone); }
.coach .ticks label:has(input:checked) { border-color: rgba(111, 191, 122, .6); color: var(--ash); }
.coach .ticks label:has(input:checked) b { color: #6fbf7a; text-decoration: line-through; text-decoration-color: rgba(111, 191, 122, .5); }
.coach .ticks input { width: 18px; height: 18px; margin-top: 3px; accent-color: #6fbf7a; }
.coach .ticks label > span { display: block; }
.coach .ticks b { display: block; color: var(--bone); margin-bottom: 2px; }
.tickcount { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6fbf7a; margin: 14px 0 0; }
.placelist { list-style: none; margin: 0; padding: 0; }
.placelist li { padding: 12px 0; border-bottom: 1px solid var(--edge); }
.placelist a { color: #7fb7ff; font-size: 16px; text-decoration: none; }
.placelist a:hover { color: var(--bone); text-decoration: underline; }
.placelist span { display: block; color: var(--ash); font-size: 13px; margin-top: 3px; line-height: 1.5; }
.coach .dropzone { display: flex; align-items: center; gap: 14px; padding: 26px; border: 1px dashed rgba(239, 243, 249, .3); color: var(--ash); font-size: 13px; }
.coach .dropzone.on { border-color: #6fbf7a; background: rgba(111, 191, 122, .06); }
.vidcheck { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 18px; }
.vidcheck video { width: 100%; background: #000; aspect-ratio: 9 / 16; display: block; }
.findings { list-style: none; margin: 0 0 14px; padding: 0; }
.findings li { padding: 9px 12px; margin: 0 0 6px; border-left: 3px solid var(--edge); background: rgba(239, 243, 249, .03); font-size: 14px; line-height: 1.45; color: var(--bone); }
.findings li.good { border-color: #6fbf7a; }
.findings li.warn { border-color: #f2c14e; }
.findings li.bad { border-color: #e8836f; }
.findings li.info { border-color: #7fb7ff; color: var(--ash); }
.goal { display: block; margin: 0 0 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.goal input { display: block; width: 100%; margin-top: 6px; padding: 10px; font: inherit; font-size: 14px; color: var(--bone); background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); }
.coachnote { color: var(--ash); font-size: 12px; margin: 10px 0 0; }
.coachsay { margin: 10px 0 0; padding: 14px; font: inherit; font-size: 14px; line-height: 1.55; white-space: pre-wrap; color: var(--bone); background: rgba(111, 191, 122, .05); border: 1px solid rgba(111, 191, 122, .35); }
@media (max-width: 700px) { .vidcheck { grid-template-columns: 1fr; } .vidcheck video { max-width: 220px; } }

/* be kind */
.kindlist { list-style: none; margin: 30px 0; padding: 0; counter-reset: k; }
.kindlist li { position: relative; padding: 16px 0 16px 56px; border-top: 1px solid var(--edge); font-size: 16px; line-height: 1.6; color: var(--ash); counter-increment: k; }
.kindlist li::before { content: counter(k); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(111, 191, 122, .6); color: #6fbf7a; font-family: var(--mono); font-size: 12px; line-height: 34px; text-align: center; }
.kindlist b { display: block; color: var(--bone); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.kindhow h2 { font-size: 18px; margin: 30px 0 10px; }
.kindhow p { color: var(--ash); line-height: 1.65; font-size: 15px; max-width: 720px; }
.kindhow b { color: var(--bone); }
.kindback { margin-top: 30px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.kindback a { color: #6fbf7a; text-decoration: none; }
.kindlink { display: block; margin-top: 8px; font-size: 12px; color: #6fbf7a; text-decoration: none; }
.kindlink:hover { color: var(--bone); text-decoration: underline; }

/* the booth, on the studio page */
.booth-card { padding: 30px 0 26px; border-bottom: 1px solid var(--edge); margin-bottom: 30px; }
.booth-card h1 { margin: 6px 0 10px; }
.booth-card .lede { max-width: 720px; color: var(--ash); line-height: 1.6; }
.booth-go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0 22px; }
.booth-go .tbtn.big { font-size: 13px; padding: 14px 22px; background: #6fbf7a; color: #050506; border-color: #6fbf7a; }
.booth-steps { margin: 0; padding-left: 20px; color: var(--ash); line-height: 1.6; max-width: 720px; }
.booth-steps li { margin: 0 0 8px; }
.booth-steps b { color: var(--bone); }
.iconbtn#btnMusic { text-decoration: none; }
.flowfinder { margin: 6px 0 22px; padding: 18px 20px; border-left: 3px solid #6fbf7a; background: rgba(111, 191, 122, .05); max-width: 720px; }
.flowfinder h2 { margin: 4px 0 8px; font-size: 24px; }
.flowfinder p { margin: 0; color: var(--ash); line-height: 1.6; }
.flowfinder p em { color: var(--bone); font-style: italic; }
.quicktake .eyebrow { margin-top: 0; }

/* the columns are pinned to their cells. When the camera column is hidden
   (nobody live) it leaves the grid, and without this the grips and the
   writing slid one cell left into a 0px column - the room looked gone. */
.room-split > #camsBox  { grid-column: 1; grid-row: 1; }
.room-split > #gripCams { grid-column: 2; grid-row: 1; }
.room-split > #log      { grid-column: 3; grid-row: 1; }
.room-split > #gripHere { grid-column: 4; grid-row: 1; }
.room-split > #hereBox  { grid-column: 5; grid-row: 1; }
.room-split > #jumpDown, .room-split > #updateBar { grid-column: 3; grid-row: 1; align-self: start; justify-self: center; z-index: 5; }
@media (max-width: 780px) {
  .room-split > #camsBox, .room-split > #gripCams, .room-split > #log, .room-split > #gripHere, .room-split > #hereBox, .room-split > #jumpDown, .room-split > #updateBar { grid-column: 1; grid-row: auto; }
}

/* where from, and the profile */

.herelist .profbtn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; font: inherit; font-size: 13px; line-height: 1; background: transparent; border: 1px solid var(--edge); border-radius: 50%; cursor: pointer; opacity: .55; }
.herelist li:hover .profbtn { opacity: 1; }
.herelist .callbtn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; font: inherit; font-size: 12px; line-height: 1; background: transparent; border: 1px solid #6fbf7a; border-radius: 50%; cursor: pointer; opacity: .7; }
.herelist li:hover .callbtn, .herelist .callbtn:focus-visible { opacity: 1; background: rgba(111,191,122,.15); }
.callgo { color: #6fbf7a; border-color: #6fbf7a; font-weight: 600; margin-left: 6px; }
.profpop { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 6, .8); }
.profcard { position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 22px 20px 18px; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.profcard .rail-x { position: absolute; top: 8px; right: 8px; }
.profhead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.profhead .profface { flex: 0 0 auto; }
.profhead .profface img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.profname { display: block; font-size: 22px; font-weight: 600; color: var(--bone); }
.profwhere { display: block; font-size: 13px; color: var(--ash); margin-top: 2px; }
.profrep { margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: #f2c14e; }
.profabout { margin: 0 0 14px; color: var(--bone); line-height: 1.55; }
.proflinks { list-style: none; margin: 0 0 16px; padding: 0; }
.proflinks li { padding: 8px 0; border-top: 1px solid var(--edge); }
.proflinks a { color: #7fb7ff; text-decoration: none; font-weight: 600; }
.proflinks small { display: block; color: var(--ash); font-size: 11px; word-break: break-all; }
.profform textarea, .profform input { display: block; width: 100%; margin: 0 0 8px; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--bone); background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); border-radius: 4px; }
.profform .tbtn { margin-top: 6px; }

/* the rows hold their shape: the name block bends, the badges do not */
.here { overflow-x: hidden; }
.herelist li { flex-wrap: nowrap; }
.herelist li > .whoblock { flex: 1 1 auto; min-width: 0; }
.herelist li > .whoblock > span { display: block; }
.herelist li > *:not(.whoblock) { flex: 0 0 auto; }
.herelist .state { white-space: normal; }

/* the camera column is always there; empty, it says why */
.camside.empty { width: 150px; }
.camside .camempty { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ash); }
.camside .camempty:empty { display: none; }
.camside.empty .camsizer { display: none; }

/* your own slot: a blank camera with a + on it */
.camtile.camplus { display: block; margin-bottom: 10px; }
.camplus .plusbox { display: grid; place-items: center; width: 100px; height: 100px; padding: 0; background: #0b0b0e; border: 1px dashed rgba(239, 243, 249, .35); border-radius: 4px; cursor: pointer; color: var(--bone); transition: border-color .15s, background .15s; }
.camplus .plusbox:hover { border-color: #6fbf7a; background: rgba(111, 191, 122, .08); }
.camplus .plus { font-size: 44px; font-weight: 200; line-height: 1; color: #6fbf7a; }
.camplus .pluscap { position: static; background: none; padding: 4px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); line-height: 1.4; }
.camside.empty { width: auto; }
.camplus.bad .plusbox { border-color: rgba(232, 131, 111, .7); }
.camplus.bad .pluscap { color: #e8836f; }
.cambright { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; color: #f2c14e; font-size: 13px; }
.cambright input { flex: 1 1 auto; min-width: 0; accent-color: #f2c14e; }
.camside.empty .cambright { display: none; }
.profhours { margin: 0 0 6px; color: var(--ash); font-size: 14px; }
.profhours b { font-size: 26px; color: #6fbf7a; font-weight: 600; margin-right: 6px; }

/* smaller toolbar */
.tools .iconbtn { height: 36px; min-width: 36px; padding: 0 11px; gap: 7px; }
.tools .iconbtn svg { width: 17px; height: 17px; }
.tools .ib-lbl { font-size: 9px; letter-spacing: .14em; }
.tools { gap: 8px 12px; padding-bottom: 12px; margin-bottom: 12px; }

/* Here-now cards: the name always gets a line of its own; the badges sit
   after it, wrapping as they need to. Nothing can squeeze the name out. */
.herelist li { flex-wrap: wrap; row-gap: 4px; }
.herelist li > .num { order: 1; }
.herelist li > .dot { order: 2; }
.herelist li > .facepic, .herelist li > .ico.face, .herelist li > .headset { order: 3; }
.herelist li > .whoblock { order: 4; flex: 1 1 100px; min-width: 100px; }
.herelist li > em.you, .herelist li > .hand, .herelist li > .profbtn, .herelist li > .callbtn, .herelist li > .give, .herelist li > .cambadge, .herelist li > .ico, .herelist li > .bars, .herelist li > .pmdot { order: 10; }

/* + your post here */
.wordcard.plus { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; cursor: pointer; font: inherit; color: var(--ash); background: rgba(111, 191, 122, .04); border: 1px dashed rgba(111, 191, 122, .45); }
.wordcard.plus:hover { border-color: #6fbf7a; color: var(--bone); background: rgba(111, 191, 122, .08); }
.wordcard.plus .plusmark { font-size: 54px; line-height: 1; font-weight: 200; color: #6fbf7a; }
.wordcard.plus .plusword { font-family: var(--serif, Georgia, serif); font-size: 26px; color: var(--bone); }
.wordcard.plus .plusnote { font-size: 13px; color: var(--ash); max-width: 240px; line-height: 1.5; }
.offerpop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; background: rgba(5, 5, 6, .86); }
.offerbox { position: relative; width: 100%; max-width: 560px; padding: 24px 22px 20px; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .6); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.offerbox .rail-x { position: absolute; top: 8px; right: 8px; }
.offerbox h2 { margin: 4px 0 14px; font-size: 24px; }
.offerbox label { display: block; margin: 0 0 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.offerbox label .sm { text-transform: none; letter-spacing: 0; font-family: inherit; opacity: .8; }
.offerbox input, .offerbox select, .offerbox textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--bone); background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); border-radius: 4px; }
.offerbox textarea { min-height: 180px; line-height: 1.5; }
.offerbox .tbtn.big { font-size: 12px; padding: 14px 20px; background: #6fbf7a; color: #050506; border-color: #6fbf7a; }
.offersaid { padding: 10px 12px; margin: 0 0 14px; border-left: 3px solid #6fbf7a; background: rgba(111, 191, 122, .08); color: var(--bone); }
.offersaid.bad { border-color: #e8836f; background: rgba(232, 131, 111, .08); }
.profgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.profcell { padding: 10px 8px; border: 1px solid var(--edge); text-align: center; }
.profcell b { display: block; font-size: 20px; color: var(--bone); }
.profcell span { display: block; font-size: 10px; color: var(--ash); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; line-height: 1.3; }
.profpriv { margin: 0 0 12px; padding: 8px 10px; font-size: 12px; color: var(--ash); border-left: 3px solid #f2c14e; background: rgba(242, 193, 78, .06); }
.followbtn { margin-right: 8px; }

/* hearts and replies on lines */
.line-head .heart, .line-head .replybtn { margin-left: 8px; padding: 1px 7px; font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ash); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; opacity: .55; }
.line:hover .line-head .heart, .line:hover .line-head .replybtn, .line-head .heart.on, .line-head .heart[data-n]:not([data-n="0"]) { opacity: 1; }
.line-head .heart:hover, .line-head .replybtn:hover { border-color: var(--edge); color: var(--bone); }
.line-head .heart.on { color: #ff6fb5; }
.line-head .inreply { margin-left: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: #7fb7ff; }
.replybar { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 5px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7fb7ff; border: 1px solid rgba(127, 183, 255, .35); background: rgba(127, 183, 255, .06); }
.replybar button { margin-left: auto; padding: 0 6px; font: inherit; font-size: 14px; color: var(--ash); background: transparent; border: 0; cursor: pointer; }
/* a newcomer */
.herelist .newtag { order: 10; flex: 0 0 auto; padding: 2px 7px; border-radius: 3px; background: #f2c14e; color: #050506; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; font-weight: 700; animation: newglow 1.6s ease-in-out infinite alternate; }
@keyframes newglow { to { box-shadow: 0 0 12px rgba(242, 193, 78, .8); } }
.herelist li.newbie .whoblock > span { color: #f2c14e; }

/* smaller bottom bar - the buttons under the room were too big */
.room-say { gap: 8px; padding: 12px 16px; }
.room-say .iconbtn { height: 36px; min-width: 36px; padding: 0 10px; gap: 6px; }
.room-say .iconbtn svg { width: 16px; height: 16px; }
.room-say .ib-lbl { font-size: 9px; letter-spacing: .12em; }
.room-say button[type="submit"] { padding: 9px 18px; font-size: 10px; letter-spacing: .18em; }
.room-say input, .room-say textarea#line { padding: 9px 12px; font-size: 14px; }
.namebox input { padding-top: 15px !important; }
#line { padding-right: 40px; }

/* Words page: the finder sits above the kind chips; the chips used to pull
   up over it with their negative top margin */
.finder { margin: -30px 0 14px; }
.finder + .kinds { margin-top: 0; }

/* Artwork: the "+ Your picture here" card and the artist's business-card link */
.piece.plus { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 20px; aspect-ratio: 4 / 5; text-decoration: none; color: var(--ash); background: rgba(111, 191, 122, .04); border: 1px dashed rgba(111, 191, 122, .45); }
.piece.plus::after { content: none; }
.piece.plus:hover { border-color: #6fbf7a; color: var(--bone); background: rgba(111, 191, 122, .08); }
.piece.plus .plusmark { font-size: 54px; line-height: 1; font-weight: 200; color: #6fbf7a; }
.piece.plus .plusword { font-family: var(--serif, Georgia, serif); font-size: 26px; color: var(--bone); }
.piece.plus .plusnote { font-size: 13px; color: var(--ash); max-width: 240px; line-height: 1.5; }
.piece figcaption .card { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #f2c14e; text-decoration: none; border-bottom: 1px solid rgba(242, 193, 78, .4); }
.piece figcaption .card:hover { color: var(--bone); border-color: var(--bone); }

/* room sound and mic knobs under the cameras */
.camhear { display: flex; align-items: center; gap: 8px; margin: -6px 0 10px; color: #9fb7c9; font-size: 12px; }
.cambright > span, .camhear > span { flex: 0 0 74px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.camhear input { flex: 1 1 auto; min-width: 0; accent-color: #9fb7c9; }
.camhear .camauto { flex: 0 0 auto; }
.camhear .camauto.on { background: #e8836f; border-color: #e8836f; color: #000; }

/* the sound panel under the live bar; "edit" beside Open mic opens it */
.soundpop { margin: 8px 0 0; padding: 10px 12px 2px; border: 1px solid var(--edge); background: var(--ink-2); max-width: 460px; }
.soundpop .camhear { margin: 0 0 10px; }
.tbtn.edit { opacity: .75; }
.roomsub .clearbtn { font: inherit; background: none; border: 0; padding: 0; margin-left: 14px; color: #e8836f; cursor: pointer; }
.roomsub .clearbtn:hover { color: var(--bone); }

/* Mail list: slide a row left (or hover) for Archive / Delete */
.mailwrap { position: relative; overflow: hidden; touch-action: pan-y; }
.mailwrap .mailrow { position: relative; z-index: 1; background: #0b0c0f; transition: transform .18s ease; }
.mailwrap.slid .mailrow { transform: translateX(-150px); }
.mailacts { position: absolute; top: 0; right: 0; bottom: 0; width: 150px; display: flex; align-items: stretch; opacity: 0; transition: opacity .15s; }
.mailwrap.slid .mailacts { opacity: 1; }
@media (hover: hover) { .mailwrap:hover .mailacts { opacity: 1; } .mailwrap:hover .mailrow { transform: translateX(-150px); } }
.mailacts button { flex: 1 1 50%; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; color: #000; }
.mailacts .arc { background: #f2c14e; }
.mailacts .del { background: #e8836f; }
.mailacts button:hover { filter: brightness(1.15); }
.mailarc { display: block; width: 100%; text-align: left; padding: 8px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); background: transparent; border: 0; border-top: 1px solid var(--edge); cursor: pointer; }
.mailarc:hover { color: var(--bone); }
.mailnone, .mailhint { margin: 0; padding: 6px 10px; color: var(--ash); font-size: 11px; }
.mailhint { opacity: .6; border-top: 1px solid var(--edge); }
@media (hover: hover) { .mailhint { display: none; } }

/* the drag line under the room: always faintly there, a pill in the middle so it reads as a handle */
.griph { height: 14px; bottom: -7px; }
.griph::after { top: 6px; background: rgba(239, 243, 249, .12); }
.griph i { position: absolute; left: 50%; top: 3px; width: 46px; height: 8px; margin-left: -23px; border-radius: 4px; background: rgba(239, 243, 249, .22); transition: background .15s; }
.griph:hover i, .dragging .griph i { background: #6fbf7a; }

/* the rooms line: the lobby and every open room, each with who is in it */
.rooms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 14px; }
.rooms:empty { display: none; }
.roomtab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); border: 1px solid var(--edge); text-decoration: none; }
.roomtab span { opacity: .6; }
.roomtab:hover { color: var(--bone); border-color: rgba(239, 236, 230, .4); }
.roomtab.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.roomtab.on span { opacity: .55; }
.roomx { margin-left: -4px; padding: 4px 6px; font: inherit; font-size: 12px; line-height: 1; color: #e8836f; background: transparent; border: 0; cursor: pointer; }
.roomx:hover { color: var(--bone); }
.roomnew { padding: 6px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6fbf7a; background: rgba(111, 191, 122, .05); border: 1px dashed rgba(111, 191, 122, .5); cursor: pointer; }
.roomnew:hover { color: var(--bone); border-color: #6fbf7a; }

/* the room card: who is in it, a way there, and the + for inviting */
.roomplus { font-style: normal; font-weight: 600; font-size: 13px; line-height: 1; margin-left: 2px; padding: 0 3px; color: #6fbf7a; }
.roomtab.on .roomplus { color: #2f7a3a; }
.roompop { position: fixed; z-index: 66; min-width: 220px; max-width: 320px; padding: 10px 12px 12px; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .5); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.roompop h4 { margin: 0 0 2px; font-size: 16px; color: var(--bone); font-weight: 600; }
.roompop .roomsub2 { margin: 0 0 8px; color: var(--ash); font-size: 11px; }
.roomwho { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.roomname { font: inherit; font-size: 12px; padding: 5px 9px; color: var(--bone); background: rgba(239, 243, 249, .05); border: 1px solid var(--edge); cursor: pointer; }
.roomname:hover { border-color: rgba(239, 236, 230, .45); }
.roomname.fw { border-color: rgba(242, 193, 78, .5); }
.roomname.inv { color: #6fbf7a; }
.roomname.inv.done { color: var(--ash); border-style: dashed; }
.roomname:disabled { opacity: .6; cursor: default; }
.roomgo { display: block; width: 100%; padding: 8px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--bone); border: 1px solid var(--bone); cursor: pointer; }
.roomgo:hover { background: transparent; color: var(--bone); }

/* finding 04: the camera column has a width the tiles do not decide. Tiles
   size to fit inside it; only the drag bar changes it. So a camera arriving
   or refitting no longer re-wraps the writing or scrolls the room. */
@media (min-width: 781px) {
  .room-split { --camw: 200px; grid-template-columns: var(--camw) 0px minmax(0, 1fr) 0px var(--herew); }
  .room-split > .camside, .room-split > .camside.empty { width: var(--camw); overflow-x: hidden; }
}
/* lines off the screen are not laid out until they scroll into view */
.room-log .line { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.camhear2 { color: #9fb7c9; }
.camhear2 input { accent-color: #9fb7c9; }

/* a name you can keep */
.profown { margin: 10px 0 14px; padding: 10px 12px; border: 1px dashed rgba(242, 193, 78, .45); }
.profown .profabout { margin: 0 0 8px; }
.profown .tbtn { margin-right: 6px; }

/* the house's view: page version on the card, reload for one that is behind */
.herelist .verchip { order: 10; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--ash); opacity: .7; }
.herelist .verchip.old { color: #e8836f; opacity: 1; }
.herelist .reloadbtn { order: 10; font: inherit; font-size: 13px; line-height: 1; padding: 1px 6px; color: #e8836f; background: transparent; border: 1px solid rgba(232, 131, 111, .55); cursor: pointer; }
.herelist .reloadbtn:hover { color: var(--bone); border-color: var(--bone); }

/* the rank on the profile */
.profrank { margin: 4px 0 10px; }
.profrank > b { display: block; font-size: 18px; color: #f2c14e; font-weight: 600; margin-bottom: 4px; }
.profrank .trust { display: block; height: 6px; background: rgba(239, 243, 249, .08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.profrank .trust b { display: block; height: 100%; background: #8f8b84; }
.profrank .trust.mid b { background: #f2c14e; }
.profrank .trust.high b { background: #6fbf7a; }
.profrank small { color: var(--ash); font-size: 12px; line-height: 1.5; }

/* a line said from an old page */
.line-head .oldtag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #e8836f; border: 1px solid rgba(232, 131, 111, .5); padding: 1px 5px; margin-left: 6px; }

/* a link in the room: the small preview card */
.linkcard { display: flex; gap: 10px; align-items: flex-start; max-width: 420px; margin: 6px 0 0; padding: 8px; text-decoration: none; color: var(--bone); background: rgba(239, 243, 249, .04); border: 1px solid var(--edge); }
.linkcard:hover { border-color: rgba(239, 236, 230, .4); background: rgba(239, 243, 249, .07); }
.linkcard img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; }
.linkcard .lc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linkcard b { font-weight: 600; font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.linkcard small { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #6fbf7a; }
.linkcard span { font-size: 12px; color: var(--ash); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* the shared profile page */
.profpage { max-width: 560px; }
.profpage .profface img { width: 96px; height: 96px; border-radius: 50%; }
.profpage h2 { margin: 10px 0 4px; }
.profpage .profabout { color: var(--ash); font-size: 15px; }
.profpage .proflinks { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profpage .proflinks a { display: inline-block; padding: 8px 12px; border: 1px solid var(--edge); color: var(--bone); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.profpage .proflinks a:hover { border-color: rgba(239, 236, 230, .45); }
.profpage .profgrid { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.profpage .profcell b { display: block; font-size: 20px; color: var(--bone); }
.profpage .profcell span { font-size: 11px; color: var(--ash); }

/* the small mic on a camera picture */
.camtile .cammic { position: absolute; left: 6px; bottom: 26px; z-index: 3; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid rgba(232, 131, 111, .7); background: rgba(5, 5, 7, .7); color: #e8836f; cursor: pointer; display: none; }
.camtile:has(canvas.facecam) .cammic, .camtile:has(.facewait) .cammic { display: block; }
.camtile.closed .cammic { display: none; }
.camtile .cammic svg { width: 13px; height: 13px; display: block; margin: 4px auto; }
.camtile .cammic::after { content: ""; position: absolute; left: 4px; top: 10px; width: 15px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.camtile.micon .cammic { color: #6fbf7a; border-color: rgba(111, 191, 122, .7); }
.camtile.micon:not(.mutedbyme) .cammic::after { display: none; }
.camtile.mutedbyme .cammic { color: #e8836f; border-color: #e8836f; background: rgba(232, 131, 111, .28); }
.camtile .cammic:hover { border-color: var(--bone); color: var(--bone); }

.footshare { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.footshare:hover { color: var(--bone); }

#who.taken { border-color: #e8836f !important; box-shadow: 0 0 0 2px rgba(232, 131, 111, .35); }
#who.taken::placeholder { color: #e8836f; }

/* a video link shows its cover in the room; press to play */
.embedplay.hascover { position: relative; display: block; width: 100%; max-width: 560px; padding: 0; background: #000; border: 1px solid var(--edge); overflow: hidden; text-align: left; }
.embedplay.hascover .ecover { display: block; width: 100%; max-height: 315px; object-fit: cover; opacity: .88; transition: opacity .2s; }
.embed.tall .embedplay.hascover { max-width: 325px; }
.embed.tall .embedplay.hascover .ecover { max-height: 440px; }
.embed.strip .embedplay.hascover .ecover { max-height: 160px; }
.embedplay.hascover .eplay { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embedplay.hascover:hover { background: #000; }
.embedplay.hascover:hover .ecover { opacity: 1; }

/* a picture link shows the picture; a video file plays in place */
.linkpic { display: inline-block; max-width: 420px; margin: 6px 0 0; text-decoration: none; color: var(--ash); }
.linkpic img { display: block; max-width: 100%; max-height: 380px; border: 1px solid var(--edge); background: #000; }
.linkpic small { display: block; margin-top: 4px; font-size: 11px; }
.embed video { display: block; width: 100%; max-width: 560px; max-height: 360px; background: #000; border: 1px solid var(--edge); }

/* the knock: people want to hear you */
.knockbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; padding: 8px 12px; border: 1px solid rgba(242, 193, 78, .6); background: rgba(242, 193, 78, .08); color: #f2c14e; font-size: 13px; }
.knockbar .tbtn { border-color: #f2c14e; color: #f2c14e; }
.knockbar .tbtn:hover { background: #f2c14e; color: #000; }

/* THE ROOM SPEAKS FROM THE TOP - the notice bar (task 14.6) */
.roomsay { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; background: #101216; border: 1px solid rgba(239, 236, 230, .35); color: var(--bone); font-size: 14px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.roomsay.err { border-color: rgba(232, 131, 111, .85); color: #f0a08f; }
.roomsay span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.roomsay-x { flex: 0 0 auto; width: 36px; height: 36px; margin: -6px -8px -6px 0; padding: 0; font: inherit; font-size: 20px; line-height: 1; color: var(--ash); background: transparent; border: 0; cursor: pointer; }
.roomsay-x:hover, .roomsay-x:focus-visible { color: var(--bone); outline: none; }
.roomsay.float { position: fixed; top: 0; left: 0; right: 0; z-index: 95; margin: 0; border-left: 0; border-right: 0; border-top: 0; }
@media (prefers-reduced-motion: no-preference) { .roomsay:not([hidden]) { animation: roomsayin .18s ease-out; } }
@keyframes roomsayin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* the cartoon face row */
.bgbreak { flex-basis: 100%; height: 0; }
.bgopt.toon.on { color: #f2c14e; border-color: rgba(242, 193, 78, .7); }
#toonThumb { height: 36px; max-width: 64px; object-fit: contain; border: 1px solid var(--edge); border-radius: 2px; background: #0b0b0e; }
.bgnote { flex-basis: 100%; font-size: 11px; line-height: 1.5; color: var(--ash); }

.toonshelf { display: flex; flex-wrap: wrap; gap: 6px; }
.toonpick { width: 52px; height: 52px; padding: 2px; background: #0b0b0e; border: 1px solid var(--edge); border-radius: 4px; cursor: pointer; }
.toonpick img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.toonpick:hover { border-color: #f2c14e; }

/* the flip on my own picture */
.camtile .camflip { position: absolute; right: 6px; bottom: 26px; z-index: 3; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: rgba(5, 5, 7, .7); color: #fff; cursor: pointer; display: none; }
.camtile:has(canvas.facecam) .camflip { display: block; }
.camtile .camflip svg { width: 16px; height: 16px; display: block; margin: 4px auto; }
.camtile .camflip:hover { background: #fff; color: #000; }

/* the three-tap rig for the cartoon */
.toonrig { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.toonrig canvas { border: 1px solid var(--edge); background: #0b0b0e; cursor: crosshair; max-width: 100%; }
.bgopt.toonbody { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }

/* cover my face: the toggle on my own picture */
.camtile .camcover { position: absolute; right: 6px; top: 32px; z-index: 3; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(5, 5, 7, .7); color: #fff; cursor: pointer; display: none; }
.camtile:has(canvas.facecam) .camcover { display: block; }
.camtile .camcover svg { width: 16px; height: 16px; display: block; margin: 4px auto; }
.camtile.covered .camcover { color: #f2c14e; border-color: #f2c14e; background: rgba(242, 193, 78, .25); }
.camtile .camcover:hover { background: #fff; color: #000; }
.faceopt.own { border-color: rgba(242, 193, 78, .6); }

/* the notice bar sits UNDER the fixed nav when the room is scrolled, not behind it
   (the nav is fixed at z50 in the root context; the room's .band is its own context) */
.roomsay { top: 78px; }
.roomsay.float { top: 0; }
.roomsay-x:focus-visible { outline: 2px solid #6fbf7a; outline-offset: 2px; color: var(--bone); }

.bgrow.lit { outline: 2px solid #f2c14e; outline-offset: 6px; border-radius: 4px; transition: outline-color .4s; }

/* VISUAL PASS 2026-09-11 */
/* 1. The wall and Be kind: main.wrap had no top padding, so the title sat behind the fixed nav */
main.wrap { padding-top: 78px; }
@media (max-width: 640px) { main.wrap { padding-top: 64px; } }
/* 2. Phones: ten nav links wrapped to three rows and covered every heading. One row that scrolls sideways. */
@media (max-width: 640px) {
  .navlinks { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { white-space: nowrap; flex: 0 0 auto; }
}
/* 3. Here now: the place line wraps instead of clipping to "US · New Yo..." */
.herelist .whoblock .state { white-space: normal; overflow: visible; text-overflow: clip; }
/* 4. Nothing below 10 px */
.herelist li em, .herelist .repline, .camauto, .pluscap, .newtag, .roomver, .pmwho, .pmding, .bgopt, .ib-lbl, .iconbtn .ib-lbl, #roomCount { font-size: 10px; }

/* MOBILE PASS 2026-09-11 */
/* Task 5.1: the room fits a phone. Chat first, the writing box pinned to the
   bottom with the text box above its icon row, people and cameras as strips,
   the laptop-only controls out of the way. Stylesheet only. */
@media (max-width: 780px) {
  .roomhead h2 { font-size: 28px; }
  .howto, .facesize, .camsizer, .cambright, .wallinvite, .herenote, .gripv, .gripr, .griph,
  #beamGo, .live-bar select { display: none !important; }
  .room-split { display: flex !important; flex-direction: column; }
  .room-split > .room-log { order: 1; height: calc(100dvh - 340px); min-height: 280px; max-height: none; }
  .room-split > .camside { order: 0; height: auto; max-height: 170px; padding: 8px 12px; overflow-y: hidden; }
  .room-split > .camside .camlist { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
  .room-split > .here { order: 2; height: auto; max-height: 118px; padding: 8px 12px; overflow-y: hidden; overflow-x: auto; }
  .room-split > .here .herelist { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .room-split > .here .herelist li { flex: 0 0 auto; width: 156px; min-height: 0; }
  .room-say { position: sticky; bottom: 0; z-index: 25; background: #050506; padding: 8px 10px; gap: 6px; }
  .room-say .namebox { flex: 1 1 100%; order: -3; }
  .room-say .namebox input { padding-top: 14px !important; }
  .room-say > .linewrap { order: -2; flex: 1 1 auto; min-width: 0; }
  .room-say > button:not(.iconbtn) { order: -1; }
  .room-say .iconbtn { width: 34px; height: 34px; min-height: 34px; }
}

/* check this phone: the answers, one per line */
.phonecheck { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; line-height: 1.5; }
.phonecheck li { position: relative; padding: 4px 0 4px 20px; color: var(--ash); }
.phonecheck li:empty { display: none; }
.phonecheck li::before { content: '\2022'; position: absolute; left: 4px; top: 4px; }
.phonecheck li.ok { color: var(--bone); }
.phonecheck li.ok::before { content: '\2713'; color: #6fbf7a; }
.phonecheck li.warn { color: #f2c14e; }
.phonecheck li.warn::before { content: '!'; font-weight: 700; }
.phonecheck li.bad { color: #f28b82; }
.phonecheck li.bad::before { content: '\2717'; }
.phonecheck li.wait::before { content: '\2026'; }
.phonecheck button { margin-top: 8px; }

/* the room page: no stacking context of its own, so its dialogs (fixed, high z) sit over the nav, not under it */
.band.roompage { z-index: auto; }
/* the room card fits the screen and scrolls */
.roompop { max-height: calc(100vh - 24px); overflow: auto; }

/* sound & picture: the quality switch */
.soundpop .qualrow { display: inline-flex; gap: 4px; }
.soundpop .camauto.qual.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.soundpop .phonecheck { margin: 6px 0 2px; }

/* sound & picture on a phone: the two picture buttons stay on one row */
.soundpop .camhear { flex-wrap: wrap; }
.soundpop .qualrow { flex: 0 0 auto; white-space: nowrap; }
.soundpop .camhear.pict > span:first-child { flex-basis: 74px; }

/* the new pill: on anything data-new, until this person has pressed it once */
.isnew { position: relative; }
.isnew::after { content: 'new'; position: absolute; top: -7px; right: -6px; z-index: 2; padding: 1px 5px; border-radius: 8px; background: #f2c14e; color: #111; font: 700 9px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* the browser chip on a person's row (house and room admins) */
.herelist .bwchip { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; border: 1px solid rgba(159, 183, 201, .35); color: #9fb7c9; font: 500 9px/1.7 var(--mono); letter-spacing: .04em; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.herelist .bwchip.inapp { color: #f28b82; border-color: rgba(242, 139, 130, .6); }
/* "you are in ..." in the sound panel, with the door to a browser that works */
.soundpop .bwline { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: #9fb7c9; }
.soundpop .bwline .trybrowser { display: inline-block; margin-top: 4px; padding: 3px 9px; border: 1px solid #f2c14e; border-radius: 4px; color: #f2c14e; text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.soundpop .bwline .trybrowser:hover { background: #f2c14e; color: #111; }

/* the device line on a person's card (house and room admins) */
.profdev { margin: 2px 0 6px; font: 500 10px/1.5 var(--mono); color: #9fb7c9; white-space: pre-line; letter-spacing: .03em; }
.phonecheck li .tbtn { margin: 0 0 0 6px; padding: 2px 8px; font-size: 10px; }

/* the cams size row, made to match Brightness and Room sound: label, plain slider, auto */
.camsizer { margin: -6px 0 12px; color: #9fb7c9; font-size: 13px; }
.camsizer .camslide { display: flex; align-items: center; gap: 8px; margin: 0; }
.camsizer .camlbl { flex: 0 0 74px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.camsizer .camslide input[type="range"] { -webkit-appearance: auto; appearance: auto; height: auto; flex: 1 1 auto; min-width: 0; accent-color: #9fb7c9; cursor: pointer; }
.camsizer .camslide input[type="range"]::-webkit-slider-runnable-track { height: auto; background: none; border-radius: 0; }
.camsizer .camslide input[type="range"]::-moz-range-track { height: auto; background: none; border-radius: 0; }
.camsizer .camslide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; margin: 0; border: 0; background: none; box-shadow: none; }
.camsizer .camslide input[type="range"]::-moz-range-thumb { width: auto; height: auto; border: 0; background: none; box-shadow: none; }

/* tablets between 781 and 900 px: narrower camera and people columns, the chat gets the width */
@media (min-width: 781px) and (max-width: 900px) {
  .room-split { --camw: 140px; --herew: 170px; }
}
/* the Cams line carries Auto at its right: one press, the best of the best */
.camside h3.camshead { display: flex; align-items: center; gap: 8px; }
.camside h3.camshead .camauto { margin-left: auto; }

/* the faces in the people list follow the Faces number (the cameras follow the drag bar) */
.herelist .facepic { width: var(--hereface, 44px); height: var(--hereface, 44px); }

/* the big-file door: why it did not go, and where to send it instead */
.bigpop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80; width: min(92vw, 420px); padding: 18px 20px 16px; background: #0b0c0f; border: 1px solid rgba(242, 193, 78, .6); box-shadow: 0 18px 50px rgba(0, 0, 0, .7); color: var(--bone); }
.bigpop h4 { margin: 0 24px 8px 0; font-size: 17px; font-weight: 600; }
.bigpop .bigwhy { margin: 0 0 8px; color: #f28b82; font-size: 13px; line-height: 1.5; }
.bigpop .bighow { margin: 0 0 12px; color: var(--ash); font-size: 12px; line-height: 1.5; }
.bigpop .bigdoors { display: flex; flex-wrap: wrap; gap: 8px; }
.bigpop .bigdoors .tbtn { text-decoration: none; }
.bigpop .bigsite { color: #f2c14e; border-color: rgba(242, 193, 78, .6); }
.bigpop .bigx { position: absolute; right: 8px; top: 8px; }

/* drag a person into the send bar */
.herelist li[draggable="true"], .camtile[draggable="true"] { cursor: grab; }
.herelist li.lifted, .camtile.lifted { opacity: .55; }
.room-say.dropon { outline: 2px dashed #6fbf7a; outline-offset: 3px; }
.room-say.dropon #line { background: rgba(111, 191, 122, .08); }

/* the ghost carried while dragging a person: the name, as a pill */
.dragpill { position: fixed; left: -1000px; top: -1000px; z-index: 90; padding: 4px 10px; border-radius: 12px; background: #f2c14e; color: #111; font: 600 13px/1.4 var(--mono); white-space: nowrap; pointer-events: none; }
.line-head strong[draggable="true"] { cursor: grab; }

/* the green arrows beside the version: green = behind, press to reload them; dim = same version */
.herelist .reloadbtn { color: rgba(159, 183, 201, .45); border-color: rgba(159, 183, 201, .25); font-size: 14px; padding: 0 5px; cursor: default; }
.herelist .reloadbtn.ready { color: #6fbf7a; border-color: rgba(111, 191, 122, .7); cursor: pointer; animation: rlpulse 1.6s ease-in-out infinite; }
.herelist .reloadbtn.ready:hover { color: #111; background: #6fbf7a; border-color: #6fbf7a; }
@keyframes rlpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 191, 122, 0); } 50% { box-shadow: 0 0 0 3px rgba(111, 191, 122, .25); } }

/* the reload beside the version: green and worded when they are behind, a grey arrow when they are current */
.herelist .reloadbtn { color: #9fb7c9; opacity: .8; border: 1px solid rgba(159, 183, 201, .4); border-radius: 4px; font: 600 11px/1.5 var(--mono); padding: 0 6px; letter-spacing: .04em; text-transform: uppercase; animation: none; }
.herelist .reloadbtn.ready { color: #111; background: #6fbf7a; border-color: #6fbf7a; opacity: 1; cursor: pointer; animation: rlpulse 1.6s ease-in-out infinite; }
.herelist .reloadbtn.ready:hover { background: #8fdc99; border-color: #8fdc99; }

/* see myself: the mirror under the camera row of the check */
.phonecheck video.seeme { display: block; width: 100%; max-width: 240px; margin: 6px 0 2px; background: #000; transform: scaleX(-1); border: 1px solid rgba(111, 191, 122, .5); }

/* the share menu: what can be shared, on the fly */
.sharepop { position: fixed; z-index: 70; width: min(92vw, 290px); padding: 6px; background: #0b0c0f; border: 1px solid rgba(239, 243, 249, .25); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); display: grid; gap: 2px; }
.sharepop .shareitem { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; color: var(--bone); cursor: pointer; font: inherit; }
.sharepop .shareitem b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.sharepop .shareitem span { display: block; font-size: 12px; color: var(--ash); line-height: 1.4; }
.sharepop .shareitem:hover { background: rgba(239, 243, 249, .08); }

/* CAMERAS FIRST ON A PHONE: the strip is as tall as it is set (46% of the width to start),
   the tiles fill it and swipe sideways, a handle under it drags it taller or shorter */
.camstripgrip { display: none; }
@media (max-width: 780px) {
  .room-split > .camside { max-height: none; height: var(--camstrip, 46vw); min-height: 120px; padding: 6px 10px 16px; overflow: hidden; position: relative; }
  .room-split > .camside .camlist { height: calc(100% - 30px); align-items: flex-start; overflow-y: hidden; }
  .room-split > .camside .camtile { flex: 0 0 auto; }
  .room-split > .camside .camshead { margin-bottom: 4px; }
  .camstripgrip { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; cursor: ns-resize; touch-action: none; }
  .camstripgrip i { display: block; width: 48px; height: 4px; margin: 6px auto; border-radius: 2px; background: rgba(239, 243, 249, .4); }
  .room-split > .room-log { height: calc(100dvh - 180px - var(--camstrip, 46vw)); min-height: 200px; }
}

/* ================================================================ *
   A ROOM PER DEVICE. The phone layout applies by class as well as by
   width (so chat.php/phone shows it on a PC); the iPad has its own.
 * ================================================================ */
body.lay-phone .howto, body.lay-phone .facesize, body.lay-phone .camsizer, body.lay-phone .cambright, body.lay-phone .wallinvite, body.lay-phone .herenote, body.lay-phone .gripv, body.lay-phone .gripr, body.lay-phone .griph, body.lay-phone #beamGo, body.lay-phone .live-bar select,
body.lay-iphone .howto, body.lay-iphone .facesize, body.lay-iphone .camsizer, body.lay-iphone .cambright, body.lay-iphone .wallinvite, body.lay-iphone .herenote, body.lay-iphone .gripv, body.lay-iphone .gripr, body.lay-iphone .griph, body.lay-iphone #beamGo, body.lay-iphone .live-bar select { display: none !important; }
body.lay-phone .room-split, body.lay-iphone .room-split { display: flex !important; flex-direction: column; }
body.lay-phone .room-split > .room-log, body.lay-iphone .room-split > .room-log { order: 1; height: calc(100dvh - 180px - var(--camstrip, 46vw)); min-height: 200px; max-height: none; }
body.lay-phone .room-split > .camside, body.lay-iphone .room-split > .camside { order: 0; max-height: none; height: var(--camstrip, 46vw); min-height: 120px; padding: 6px 10px 16px; overflow: hidden; position: relative; }
body.lay-phone .room-split > .camside .camlist, body.lay-iphone .room-split > .camside .camlist { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 8px; height: calc(100% - 30px); align-items: flex-start; }
body.lay-phone .room-split > .camside .camtile, body.lay-iphone .room-split > .camside .camtile { flex: 0 0 auto; }
body.lay-phone .camstripgrip, body.lay-iphone .camstripgrip { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; cursor: ns-resize; touch-action: none; }
body.lay-phone .room-split > .here, body.lay-iphone .room-split > .here { order: 2; height: auto; max-height: 118px; padding: 8px 12px; overflow-y: hidden; overflow-x: auto; }
body.lay-phone .room-split > .here .herelist, body.lay-iphone .room-split > .here .herelist { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
body.lay-phone .room-split > .here .herelist li, body.lay-iphone .room-split > .here .herelist li { flex: 0 0 auto; width: 156px; min-height: 0; }
body.lay-phone .room-say, body.lay-iphone .room-say { position: sticky; bottom: 0; z-index: 25; background: #050506; padding: 8px 10px; gap: 6px; }
body.lay-phone .room-say .namebox, body.lay-iphone .room-say .namebox { flex: 1 1 100%; order: -3; }
body.lay-phone .room-say > .linewrap, body.lay-iphone .room-say > .linewrap { order: -2; flex: 1 1 auto; min-width: 0; }
body.lay-phone .room-say > button:not(.iconbtn), body.lay-iphone .room-say > button:not(.iconbtn) { order: -1; }
body.lay-phone .room-say .iconbtn, body.lay-iphone .room-say .iconbtn { width: 34px; height: 34px; min-height: 34px; }

/* the iPad: the camera strip across the top, chat and people side by side under it */

/* the tech decides the buttons: a phone or iPad browser cannot show its desktop or share a screen */
body.lay-phone #btnScreen, body.lay-iphone #btnScreen, body.lay-ipad #btnScreen,
body.lay-phone #liveShare, body.lay-iphone #liveShare, body.lay-ipad #liveShare { display: none !important; }
/* a forced layout says so, small, so nobody thinks their phone grew */
body.lay-forced::before { content: 'layout: ' attr(class); position: fixed; right: 8px; bottom: 8px; z-index: 99; padding: 2px 8px; background: #f2c14e; color: #111; font: 700 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }

/* MOBILE CAMS ON TOP 2026-09-12 */
/* Papa: on a phone, cameras on top, chat under, the writing at the bottom.
   The camera strip becomes a two-across grid up to half the screen. */
@media (max-width: 780px) {
  .room-split > .camside { max-height: 48vh; overflow-y: auto; overflow-x: hidden; }
  .room-split > .camside .camlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-x: hidden; }
  .room-split > .camside .camtile { width: 100%; }
  .room-split > .camside .camtile canvas.facecam,
  .room-split > .camside .camtile .facewait,
  .room-split > .camside .camplus .plusbox { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
  .room-split > .camside .camtile figcaption { white-space: normal; }
}

/* MOBILE CAMS ALL VISIBLE 2026-09-12 */
/* Papa: on a phone only one camera showed - the box was capped at half the
   screen and iOS hides scrollbars. Now three across and the box grows with
   the count, so every camera is on the screen. */
@media (max-width: 780px) {
  .room-split > .camside { max-height: none; overflow: visible; }
  .room-split > .camside .camlist { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .room-split > .camside .camtile figcaption { font-size: 9px; }
}

/* PHONE CAMERA SLIDE 2026-09-12 */
/* Papa: on a phone, one row of big camera tiles you swipe through, with a
   slider above it (phone.js adds the slider and the .slide class). */
@media (max-width: 780px) {
  .room-split > .camside .camlist.slide { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .room-split > .camside .camlist.slide::-webkit-scrollbar { display: none; }
  .room-split > .camside .camlist.slide .camtile { flex: 0 0 72vw; max-width: 340px; scroll-snap-align: center; }
  .room-split > .camside .camlist.slide .camtile.camplus { flex-basis: 40vw; }
  .camswipe { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
  .camswipe input[type="range"] { flex: 1 1 auto; height: 28px; accent-color: #6fbf7a; }
  .camswipe-n { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ash); min-width: 3.5em; text-align: right; }
}

/* a program's seat in the camera column: small, all alike, and said so */
.camtile.bot canvas.facecam, .camtile.bot .facewait { width: 96px !important; height: 96px !important; }
.camtile.bot figcaption::after { content: ' \00b7  program'; opacity: .6; }
.camtile.bot .camcover, .camtile.bot .camflip, .camtile.bot .livebadge { display: none !important; }

/* a waiting camera tile: the words keep clear of the name band at the bottom,
   and on a small tile the play mark stands alone */
.camtile .facewait { padding-bottom: 18px; box-sizing: border-box; }
.camtile .facewait span { max-width: 92%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camtile .facewait[style*="width: 8"] span,
.camtile .facewait[style*="width: 9"] span,
.camtile .facewait[style*="width: 10"] span { display: none; }

/* ROOM HEADROOM 2026-09-12 */
/* Papa: "the Unshadow button is so big it moved down and it has a lot of head
   room of black - it is not needed". The room is a tool, not a landing page:
   it starts near the top. The band's 84-145px of top padding plus main's 78
   was up to 223px of black above THE ROOM. */
.band.top.roompage { padding-top: 22px; }
main.inner:has(.roompage) { padding-top: 82px; }
@media (max-width: 780px) { .band.top.roompage { padding-top: 14px; } }
/* and the name never breaks in two, so the nav never drops a row */
.brand { white-space: nowrap; flex: 0 0 auto; }
.topbar .tool-link { flex: 0 0 auto; }
.navlinks { min-width: 0; }

/* THE IPAD, PUT BACK. The two-column layout re-made the room while five
   pieces were still in it - the two drag bars and the update bar were left
   for the browser to place, and the chat landed on the cameras. An iPad gets
   the ordinary room again. Only what its browser cannot do stays hidden. */
body.lay-ipad #btnScreen, body.lay-ipad #liveShare { display: none !important; }

/* ================================================================== *
   THE IPAD. Not a layout of its own - the phone's, which works: one
   column, cameras on top, talk, people, writing pinned at the bottom.
   Only bigger, because an iPad has the room. A grid of its own put the
   chat on top of the cameras, so it is not coming back.
 * ================================================================== */
body.lay-ipad .howto, body.lay-ipad .facesize, body.lay-ipad .camsizer,
body.lay-ipad .cambright, body.lay-ipad .wallinvite, body.lay-ipad .herenote,
body.lay-ipad .gripv, body.lay-ipad .gripr, body.lay-ipad .griph,
body.lay-ipad #beamGo, body.lay-ipad .live-bar select { display: none !important; }
body.lay-ipad .room-split { display: flex !important; flex-direction: column; }
body.lay-ipad .room-split > .camside { order: 0; width: auto !important; height: var(--camstrip, 34vw); min-height: 190px; max-height: none; padding: 8px 12px; overflow: hidden; position: relative; }
body.lay-ipad .room-split > .camside .camlist { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 10px; height: 100%; align-items: flex-start; }
body.lay-ipad .room-split > .camside .camtile { flex: 0 0 auto; }
body.lay-ipad .room-split > .room-log { order: 1; height: calc(100dvh - 420px); min-height: 240px; max-height: none; }
body.lay-ipad .room-split > .here { order: 2; height: auto; max-height: 150px; padding: 8px 12px; overflow-y: hidden; overflow-x: auto; }
body.lay-ipad .room-split > .here .herelist { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
body.lay-ipad .room-split > .here .herelist li { flex: 0 0 auto; width: 190px; min-height: 0; }
body.lay-ipad .room-say { position: sticky; bottom: 0; z-index: 25; background: #050506; padding: 10px 12px; gap: 8px; }
body.lay-ipad .room-say .namebox { flex: 1 1 100%; order: -3; }
body.lay-ipad .room-say > .linewrap { order: -2; flex: 1 1 auto; min-width: 0; }
body.lay-ipad .room-say > button:not(.iconbtn) { order: -1; }

/* LESS IS MORE on a small screen: camera, microphone, words. What those
   browsers cannot do at all is out of the way, not merely small. */
body.lay-phone #btnScreen, body.lay-iphone #btnScreen, body.lay-ipad #btnScreen,
body.lay-phone #liveShare, body.lay-iphone #liveShare, body.lay-ipad #liveShare,
body.lay-phone #beamGo, body.lay-iphone #beamGo, body.lay-ipad #beamGo { display: none !important; }

/* IPAD PORTRAIT 2026-09-12 */
/* Papa on an iPad, 820x1180: "there is too much chat room space - I would
   drop it down just slightly if it was turned straight up and down". Sideways
   is right as it is. So: in portrait only, a taller camera strip and a
   slightly shorter chat, which also lifts the chatters into view. */
@media (orientation: portrait) {
  body.lay-ipad .room-split > .camside { height: var(--camstrip, 42vw); min-height: 240px; }
  body.lay-ipad .room-split > .room-log { height: calc(100dvh - 520px); min-height: 260px; }
  body.lay-ipad .room-split > .here { max-height: 170px; }
}

/* green is a friend: somebody you follow, in a room card and in the invite list */
.roomname.fw { color: #6fbf7a; border-color: rgba(111, 191, 122, .65); background: rgba(111, 191, 122, .08); }
.roomname.fw:hover { border-color: #6fbf7a; }
.roomname.inv.fw { color: #6fbf7a; }

/* the live count beside CHAT ROOM in the nav: the one thing on the page with people in it */
.navlive { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 7px; background: #6fbf7a; color: #08150b; font: 700 9px/1.7 var(--mono); letter-spacing: .06em; vertical-align: middle; }
@media (max-width: 640px) { .navlive { display: none; } }

/* the controls fit the column: shrink it and they get out of their own way
   rather than being cut off at the edge */
.camside.narrow .cambright > span, .camside.narrow .camhear > span, .camside.narrow .camsizer .camlbl { display: none; }
.camside.narrow .camsizer, .camside.narrow .cambright, .camside.narrow .camhear { margin-bottom: 8px; }
.camside.narrow h3.camshead { font-size: 10px; gap: 4px; }
/* never hidden: brightness and room sound are used, they only get slim */
.camside.tiny .cambright, .camside.tiny .camhear2, .camside.tiny .camhear { display: flex; margin-bottom: 6px; }
.camside.tiny .camsizer input[type="range"],
.camside.tiny .cambright input[type="range"],
.camside.tiny .camhear input[type="range"] { height: 18px; }
.camside.tiny .camhear .camauto { padding: 0 4px; font-size: 9px; }
.camside.tiny h3.camshead .camauto { padding: 0 4px; font-size: 9px; }

/* THE LADYBUG: anybody, any page, says what is wrong */
.bugbtn { flex: 0 0 auto; width: 30px; height: 30px; margin-left: 8px; padding: 0; border: 1px solid var(--edge); border-radius: 50%; background: transparent; cursor: pointer; }
.bugbtn svg { width: 20px; height: 20px; display: block; margin: 3px auto; }
.bugbtn:hover { border-color: #d6453a; background: rgba(214, 69, 58, .12); }
.bugpop { position: fixed; right: 14px; top: 64px; z-index: 85; width: min(94vw, 340px); padding: 14px 16px 12px; background: #0b0c0f; border: 1px solid rgba(214, 69, 58, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .7); color: var(--bone); text-align: left; }
.bugpop h4 { margin: 0 22px 6px 0; font-size: 16px; font-weight: 600; }
.bugpop .bugwhere { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--ash); }
.bugpop textarea { width: 100%; box-sizing: border-box; padding: 8px; background: #07080a; color: var(--bone); border: 1px solid var(--edge); font: inherit; font-size: 13px; resize: vertical; }
.bugpop .bugdoors { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bugpop .bugsaid { font-size: 11px; color: var(--ash); flex: 1 1 100%; }
.bugpop .bugx { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--ash); font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 640px) { .bugpop { right: 3vw; left: 3vw; width: auto; } }

/* the ladybug's kind, so a report files itself */
.bugpop select { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 7px 8px; background: #07080a; color: var(--bone); border: 1px solid var(--edge); font: inherit; font-size: 12px; }

/* ================================================ PASTE YOUR PICTURE HERE ==
   Papa: "I just copied a picture. I don't have a link. You just copy and
   paste and it knows what you're doing." The box takes the clipboard, shows
   what it caught and how big it is, and hands it to the form's own file box.
   ========================================================================= */
.pastebox { border: 1px dashed rgba(239, 236, 230, .28); background: rgba(214, 226, 240, .03); padding: 18px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pastebox:focus { outline: none; border-color: rgba(239, 236, 230, .6); background: rgba(214, 226, 240, .06); }
.pastebox.over { border-color: #6fbf7a; background: rgba(111, 191, 122, .08); }
.pastebox.ready { border-style: solid; border-color: #6fbf7a; }
.pastebox .pasteword { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.pastebox.ready .pasteword { color: #6fbf7a; }
.pastebox .pastesm { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ash); }
.pastebox .pastethumb { display: block; max-width: 100%; max-height: 170px; margin: 12px auto 0; border: 1px solid var(--edge); }

/* ====================================================== THE GLASS BUTTONS ==
   Papa drew the bottom of the room: black glass tiles with a wet highlight,
   in three bands - the name and the tools, the line you type in, then the
   rest. His own shadow recipe. The bands are flex order and two zero-height
   breaks, so not one button had to move in the page.
   ========================================================================= */
.room-say { align-items: center; row-gap: 12px; }
.room-say::before, .room-say::after { content: ''; flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.room-say::before { order: 15; }
.room-say::after { order: 25; }

.room-say .namebox { order: 1; flex: 0 1 190px; }
.room-say #btnCam { order: 2; }
.room-say #btnPhoto { order: 3; }
.room-say #btnDrive { order: 4; }
.room-say #btnFile { order: 5; }
.room-say #btnMusic { order: 6; }
.room-say #btnStyle { order: 7; }
.room-say #btnShareSite { order: 8; }
.room-say #btnInvite { order: 9; }
.room-say #btnAsk { order: 10; }
.room-say .linewrap { order: 20; flex: 1 1 320px; }
.room-say button[type="submit"] { order: 21; }
.room-say #btnMail { order: 30; }
.room-say #btnFlip { order: 31; }
.room-say #btnScreen { order: 32; }
.room-say #btnMic { order: 33; }
.room-say #btnEmo { order: 34; }

.room-say .iconbtn {
  position: relative;
  order: 12;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #202226 0%, #121316 55%, #08090a 100%);
  color: #c9ced7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -8px 12px rgba(0, 0, 0, .45), 0 8px 16px rgba(0, 0, 0, .35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, color .12s ease;
}
.room-say .iconbtn::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 5%;
  height: 42%;
  border-radius: 9px 9px 50% 50% / 9px 9px 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.room-say .iconbtn:hover {
  color: #fff;
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 20px rgba(0, 0, 0, .45);
}
.room-say .iconbtn:active {
  transform: translateY(1px) scale(.97);
  filter: brightness(.92);
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, .55);
}
.room-say .iconbtn[aria-pressed="true"], .room-say .iconbtn.on, .room-say .iconbtn.rec {
  box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .28);
}
.room-say .iconbtn svg { width: 22px; height: 22px; position: relative; z-index: 1; }

/* the word is a small card above the tile, so the bar is icons and nothing
   else, the way he drew it. Phones never hover, and already had no words. */
.room-say .ib-lbl {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #07080a;
  color: var(--bone);
  font-size: 9px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
  pointer-events: none;
  z-index: 40;
}
.room-say .iconbtn:hover .ib-lbl, .room-say .iconbtn:focus-visible .ib-lbl { opacity: 1; visibility: visible; }

.room-say .namebox input, .room-say textarea#line {
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #191b1e 0%, #0c0d0f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -6px 12px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .3);
}
.room-say .namebox input:focus, .room-say textarea#line:focus { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(239, 236, 230, .35); }
.room-say textarea#line { padding: 15px 50px 15px 18px; }
.room-say button[type="submit"] {
  border-radius: 12px;
  padding: 15px 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px rgba(0, 0, 0, .35);
  transition: transform .12s ease, filter .12s ease;
}
.room-say button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.06); }
.room-say button[type="submit"]:active { transform: translateY(1px); }
.room-say .dictate { border-radius: 9px; }

@media (max-width: 700px) {
  .room-say { gap: 8px; padding: 12px; }
  .room-say .iconbtn { width: 42px; min-width: 42px; height: 42px; border-radius: 11px; }
  .room-say .namebox { flex: 1 1 140px; }
  .room-say button[type="submit"] { padding: 14px 18px; }
}

/* ======================================================= PAPA'S OWN TILES ==
   He drew sixteen glass buttons and dropped the sheet in the site. Each one
   is cut out and laid on its button. The tiles carry their own frame, their
   own highlight and their own water, so the painted-on sheen comes off and
   the drawn icon underneath steps aside - it is still in the page, so a
   button is never blank if a picture does not arrive.
   ========================================================================= */
.room-say #btnPhoto, .room-say #btnFile, .room-say #btnMusic, .room-say #btnStyle, .room-say #btnShareSite, .room-say #btnInvite, .room-say #btnAsk, .room-say #btnMail, .room-say #btnCam, .room-say #btnFlip, .room-say #btnScreen, .room-say #btnMic, .room-say #btnEmo {
  background-color: #0a0b0c;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 104%;
}
.room-say #btnPhoto::after, .room-say #btnFile::after, .room-say #btnMusic::after, .room-say #btnStyle::after, .room-say #btnShareSite::after, .room-say #btnInvite::after, .room-say #btnAsk::after, .room-say #btnMail::after, .room-say #btnCam::after, .room-say #btnFlip::after, .room-say #btnScreen::after, .room-say #btnMic::after, .room-say #btnEmo::after { display: none; }
.room-say #btnPhoto svg, .room-say #btnFile svg, .room-say #btnMusic svg, .room-say #btnStyle svg, .room-say #btnShareSite svg, .room-say #btnInvite svg, .room-say #btnAsk svg, .room-say #btnMail svg, .room-say #btnCam svg, .room-say #btnFlip svg, .room-say #btnScreen svg, .room-say #btnMic svg, .room-say #btnEmo svg { display: none; }

.room-say #btnPhoto { background-image: url(icons/photo.png); }
.room-say #btnFile { background-image: url(icons/file.png); }
.room-say #btnMusic { background-image: url(icons/music.png); }
.room-say #btnStyle { background-image: url(icons/style.png); }
.room-say #btnShareSite { background-image: url(icons/share.png); }
.room-say #btnInvite { background-image: url(icons/invite.png); }
.room-say #btnAsk { background-image: url(icons/ask.png); }
.room-say #btnMail { background-image: url(icons/mail.png); }
.room-say #btnCam { background-image: url(icons/camera.png); }
.room-say #btnFlip { background-image: url(icons/flip.png); }
.room-say #btnScreen { background-image: url(icons/screen.png); }
.room-say #btnMic { background-image: url(icons/voice.png); }
.room-say #btnEmo { background-image: url(icons/emoji.png); }

/* his silver microphone, inside the line you type in */
.room-say .dictate {
  width: 34px;
  height: 34px;
  background: url(icons/mic.png) center / cover no-repeat;
  border-radius: 9px;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.room-say .dictate svg { display: none; }
.room-say .dictate:hover { background: url(icons/mic.png) center / cover no-repeat; filter: brightness(1.15); border-color: transparent; }
.room-say .dictate.on, .room-say .dictate.on:hover {
  background: url(icons/mic.png) center / cover no-repeat;
  border-color: rgba(196, 69, 47, 1);
  box-shadow: 0 0 0 2px rgba(196, 69, 47, .9);
}

/* his arrow, in place of the word. The word is still there for a reader that
   speaks the page aloud, and the card above the tile says it on hover. */
.room-say button[type="submit"] {
  position: relative;
  width: 52px;
  min-width: 52px;
  height: 46px;
  padding: 0;
  border: 0;
  overflow: hidden;
  text-indent: -200px;
  background: #0a0b0c url(icons/send.png) center / 104% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px rgba(0, 0, 0, .38);
}
.room-say button[type="submit"]:hover { background: #0a0b0c url(icons/send.png) center / 104% no-repeat; filter: brightness(1.14); }

/* his ladybug, at the top of every page */
.bugbtn {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: #0a0b0c url(icons/ladybug.png) center / cover no-repeat;
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.bugbtn svg { display: none; }
.bugbtn:hover { background: #0a0b0c url(icons/ladybug.png) center / cover no-repeat; border-color: rgba(214, 69, 58, .7); filter: brightness(1.15); }

/* ============================================================ THE LIVE ROW ==
   Papa's second sheet. Every button in the live row keeps its word - that row
   is read in a hurry - and his tile sits to the left of it. Two change picture
   when they change job: Go live becomes Leave, Camera on becomes Camera off.
   A button that is on used to become a cream slab, which would have put a
   black glass tile on cream; on is now the green ring from his own recipe.
   ========================================================================== */
.live-bar .tbtn[id] {
  background-repeat: no-repeat;
  background-position: 7px center;
  background-size: 19px 19px;
  padding: 8px 12px 8px 31px;
  border-radius: 9px;
}
.live-bar #liveGo { background-image: url(icons/golive.png); }
.live-bar #livePtt { background-image: url(icons/ptt.png); }
.live-bar #liveMic { background-image: url(icons/micopen.png); }
.live-bar #liveEdit { background-image: url(icons/edit.png); }
.live-bar #liveCam { background-image: url(icons/camera.png); }
.live-bar #liveShare { background-image: url(icons/sharescreen.png); }
.live-bar #liveBig { background-image: url(icons/bigroom.png); }
.live-bar #camSet { background-image: url(icons/camsettings.png); }
.live-bar #beamGo { background-image: url(icons/project.png); }
.live-bar #talkGo { background-image: url(icons/talk.png); }
.live-bar #liveGo.on { background-image: url(icons/leave.png); }
.live-bar #liveCam.on { background-image: url(icons/camoff.png); }
.live-bar .tbtn[id].on {
  color: var(--bone);
  background-color: rgba(40, 200, 90, .13);
  border-color: rgba(80, 255, 140, .5);
  box-shadow: 0 0 12px rgba(40, 200, 90, .22);
}
.live-bar .tbtn[id]:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .live-bar .tbtn[id] { background-position: 6px center; background-size: 17px 17px; padding-left: 27px; }
}

/* ====================================================== THE LIVE ROW, IN GLASS ==
   Papa looked at the live row and said it could be better. It was hairline
   outlines with a small stamp squeezed in beside the word. Each one is a glass
   slab now, in the same language as the buttons at the bottom: a bigger tile,
   room around the word, a rounded edge, a lift under the hand. The picture-size
   picker gets his aperture.
   ============================================================================== */
.live-bar { gap: 8px; }
.live-bar .tbtn[id] {
  background-position: 8px center;
  background-size: 24px 24px;
  padding: 9px 14px 9px 40px;
  border: 0;
  border-radius: 11px;
  background-color: #101215;
  color: #cfd4dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 10px rgba(0, 0, 0, .4), 0 5px 12px rgba(0, 0, 0, .38);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, color .12s ease;
}
.live-bar .tbtn[id]:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 16px rgba(0, 0, 0, .45); }
.live-bar .tbtn[id]:active { transform: translateY(1px); filter: brightness(.92); box-shadow: inset 0 5px 9px rgba(0, 0, 0, .55); }
.live-bar .tbtn[id].on {
  color: #fff;
  background-color: rgba(31, 92, 51, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .3);
}
.live-bar #liveEdit { padding-left: 36px; background-size: 21px 21px; }

/* the picture-size picker wears his aperture */
.live-bar .beamgrade {
  padding: 9px 10px 9px 36px;
  border: 0;
  border-radius: 11px;
  background-color: #101215;
  background-image: url(icons/sharp.png);
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 22px 22px;
  color: #cfd4dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 5px 12px rgba(0, 0, 0, .38);
}
.live-bar .beamgrade:hover { color: #fff; filter: brightness(1.14); }

/* his Font and Colours tiles, on the two headings that name them */
.stylepick h4:nth-of-type(1), .stylepick h4:nth-of-type(2) {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 22px 22px;
  padding-left: 30px;
  min-height: 24px;
  line-height: 24px;
}
.stylepick h4:nth-of-type(1) { background-image: url(icons/colors.png); }
.stylepick h4:nth-of-type(2) { background-image: url(icons/font.png); }

@media (max-width: 640px) {
  .live-bar .tbtn[id] { background-size: 20px 20px; padding: 8px 10px 8px 32px; }
  .live-bar .beamgrade { padding-left: 30px; background-size: 18px 18px; }
}

/* =========================================== THE GREEN ONES ARE THE ROLLOVERS ==
   Papa: "check the green icons, those are rollovers." Three tiles carry a green
   lamp, and a lamp that is always lit says nothing. Each one rests with the lamp
   out and lights up under the hand, and stays lit while the thing is really on:
   mail waiting, the microphone writing what you say, the room able to hear you.
   ============================================================================= */
.room-say #btnMail { background-image: url(icons/mail-off.png); }
.room-say #btnMail:hover, .room-say #btnMail.has { background-image: url(icons/mail.png); }

.room-say .dictate { background-image: url(icons/mic-off.png); }
.room-say .dictate:hover, .room-say .dictate.on, .room-say .dictate.on:hover { background-image: url(icons/mic.png); }

.live-bar #liveMic { background-image: url(icons/micopen-off.png); }
.live-bar #liveMic:hover, .live-bar #liveMic.on { background-image: url(icons/micopen.png); }

/* the white floor under the typing: a textarea is not an input, so
   ".room-say input" never reached it and it had the browser's own black -
   which disappeared the day the box went dark. Your own colour is painted
   on top of this from the page; this is what is there when you pick none,
   never the browser black. */
.room-say textarea#line { color: var(--bone); caret-color: var(--bone); }
.room-say textarea#line::placeholder { color: var(--ash); opacity: 1; }

/* ===================================================== GREEN MEANS GO ==
   Papa's rule for the whole room: when a thing turns green it is telling
   you to do it. The arrow lights the moment there is something to send
   and goes dark the moment the box is empty again.

   No script decides this. A box that is showing its placeholder is empty,
   so the stylesheet reads the real state of the box - it cannot be left
   lit by mistake after a line is sent, or after the room clears the box
   for any other reason.
   ====================================================================== */
.room-say:has(#line:not(:placeholder-shown)) button[type="submit"] {
  background-image: url(icons/send-on.png);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 16px rgba(40, 200, 90, .38);
  animation: sendready 1.8s ease-in-out infinite;
}
.room-say:has(#line:not(:placeholder-shown)) button[type="submit"]:hover {
  background-image: url(icons/send-on.png);
  animation: none;
}
@keyframes sendready {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 10px rgba(40, 200, 90, .26); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(80, 255, 140, .75), 0 0 20px rgba(40, 200, 90, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .room-say:has(#line:not(:placeholder-shown)) button[type="submit"] { animation: none; }
}

/* the name, 7 px off the edge of its pill, with its label */
.room-say .namebox input { padding-left: 22px; }

/* ======================================= BLACK GROOVE, BLACK KNOB, GREEN UNDER THE HAND ==
   The three bars in the left rail were wearing the browser's own paint: blue on Cam size
   and Room sound, gold on Brightness. That is what accent-color does - it hands the whole
   control to the browser and you get its colours, not the room's.

   Dressed properly now. A groove cut into the panel, a black ball for a knob, a small lift
   when a hand is over it, and a green rim only while it is actually being dragged.

   Green only while dragging, never on the stored value. Green in this room means a hand is
   on a thing. A bar left green after you let go would read as armed, the way Mic open is
   armed, and it is not armed. It is a number that already changed.

   The browser does the sliding. This only dresses it.
   ======================================================================================== */
#camSlide {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#camSlide::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camSlide::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camSlide::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camSlide::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camSlide:hover::-webkit-slider-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camSlide:hover::-moz-range-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camSlide:active::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camSlide:active::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camSlide:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}

#camBright {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#camBright::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camBright::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camBright::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camBright::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camBright:hover::-webkit-slider-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camBright:hover::-moz-range-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camBright:active::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camBright:active::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camBright:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}

#camHear2 {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#camHear2::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camHear2::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camHear2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camHear2::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camHear2:hover::-webkit-slider-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camHear2:hover::-moz-range-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camHear2:active::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camHear2:active::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camHear2:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}

#camHear {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#camHear::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camHear::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#camHear::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camHear::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#camHear:hover::-webkit-slider-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camHear:hover::-moz-range-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#camHear:active::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camHear:active::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#camHear:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}

#micGain {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
#micGain::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#micGain::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: #1a1a1c;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
#micGain::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#micGain::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: box-shadow .12s ease;
}
#micGain:hover::-webkit-slider-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#micGain:hover::-moz-range-thumb { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
#micGain:active::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#micGain:active::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
#micGain:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}

/* the words beside them stay as they are - they already match the top deck */
.camsizer .camslide { gap: 10px; }
.cambright, .camhear, .camhear2 { align-items: center; }

/* ============================================== THE FURNITURE THE KEYS SIT IN ==
   Papa's three skins. The cameras are raised off the panel, the writing is sunk
   into it, and the list of names is lifted a little. The buttons are the keys;
   these three are the furniture they sit in.
   ============================================================================= */
.camtile {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #0a0a0a, 0 0 0 1px #2e2e30, 0 0 0 2px #1a1a1c, 0 8px 16px rgba(0, 0, 0, .4);
}
.camtile canvas.facecam, .camtile .facewait { border-radius: 7px; }

.room-log {
  border-radius: 12px;
  background: #101012;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 14px 28px rgba(0, 0, 0, .5), inset 0 -10px 18px rgba(0, 0, 0, .3);
}

.here {
  border-radius: 10px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05), 0 10px 20px rgba(0, 0, 0, .28);
}

/* ================================================== THE WORDS COME BACK ==
   "Keep the words CAM SIZE / BRIGHTNESS / ROOM SOUND." They were hidden by
   default: the column gets out of its own way under 210 px and it sits at
   200 px unless somebody drags it, so hardly anybody ever saw them. Three
   bare grooves in a black rail tell a person nothing.

   So the row folds instead of vanishing. Wide: label, then groove, side by
   side. Narrow: the label takes its own line above the groove, full width,
   which always fits. All three are lettered like the deck above them.
   ======================================================================= */
.camside .camsizer .camslide,
.camside .cambright,
.camside .camhear2,
.camside .camhear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 12px;
}
.camside .camsizer .camlbl,
.camside .cambright > span,
.camside .camhear2 > span,
.camside .camhear > span {
  display: block;
  flex: 0 0 74px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9fb7c9;
  white-space: nowrap;
}
.camside .camsizer input[type="range"],
.camside .cambright input[type="range"],
.camside .camhear2 input[type="range"],
.camside .camhear input[type="range"] { flex: 1 1 90px; min-width: 0; }

/* narrow rail: the word takes its own line and the groove gets the width */
.camside.narrow .camsizer .camlbl,
.camside.narrow .cambright > span,
.camside.narrow .camhear2 > span,
.camside.narrow .camhear > span { flex: 1 1 100%; font-size: 9px; letter-spacing: .08em; }
.camside.narrow .camsizer input[type="range"],
.camside.narrow .cambright input[type="range"],
.camside.narrow .camhear2 input[type="range"],
.camside.narrow .camhear input[type="range"] { flex: 1 1 100%; }
.camside.tiny .camsizer .camlbl,
.camside.tiny .cambright > span,
.camside.tiny .camhear2 > span,
.camside.tiny .camhear > span { display: block; flex: 1 1 100%; font-size: 8px; }

/* ============================================ THE SCROLL BARS MATCH THE CAM BARS ==
   The bars beside the writing and beside the names were the browser's own: pale
   grey rails with pale grey thumbs, the one bright thing left in a black room.
   Same groove and same black ball as Cam size, Brightness and Room sound now,
   green rim under the hand, so everything that slides in this room looks alike.
   ================================================================================ */
html { scrollbar-width: thin; scrollbar-color: #33333a #0e0e10; }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track {
  background: #131315;
  border-radius: 99px;
  border: 1px solid #0d0d0e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
*::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: radial-gradient(circle at 32% 28%, #5c5c60, #1c1c1e 62%);
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(0, 0, 0, .55);
}
*::-webkit-scrollbar-thumb:hover { background: radial-gradient(circle at 32% 28%, #6e6e74, #232326 62%); }
*::-webkit-scrollbar-thumb:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px #3dcc6a, 0 2px 6px rgba(0, 0, 0, .5);
}
*::-webkit-scrollbar-corner { background: #0e0e10; }

/* ========================================== THE NAME MOVES FARTHER RIGHT ==
   He circled it: his name sat too near the left edge of its pill. It moves
   in to 36 px, and the small NAME above it moves with it so the two stay
   stacked one over the other.
   ========================================================================= */
.room-say .namebox input { padding-left: 36px; }

/* ============================================== THE TILE THAT IS TALKING ==
   Grok drew it: a camera whose voice is coming through takes a green rim and
   a soft bloom around the whole tile, not just a line around the picture
   inside it. It is the same green as everything else in this room that means
   something is happening right now.
   ========================================================================= */
.camtile.talking {
  box-shadow: inset 0 0 0 1px #3dcc6a, 0 0 0 1px #2e6e42, 0 0 0 2px #14361f, 0 0 18px rgba(61, 204, 106, .45), 0 8px 16px rgba(0, 0, 0, .4);
}
.camtile.talking figcaption { color: #6fbf7a; }

/* ============================================================ THE GREEN TWINS ==
   Grok drew a green twin of every button. Green is what a button does when a
   hand is over it, and what it wears while it is on. Papa's rule for the whole
   room: green means go, green means this is the one, green means something is
   happening here.

   They are a second drawing rather than the same tile relit, so a button changes
   picture as well as colour. At 46 px that reads as lighting up. If it ever reads
   as a swap instead, the hover half comes out and the on half stays.
   ============================================================================== */
/* the buttons at the bottom: green under the hand, green while on */
.room-say #btnPhoto:hover, .room-say #btnPhoto.on, .room-say #btnPhoto.has, .room-say #btnPhoto[aria-pressed="true"] { background-image: url(icons/photo-on.png); }
.room-say #btnFile:hover, .room-say #btnFile.on, .room-say #btnFile.has, .room-say #btnFile[aria-pressed="true"] { background-image: url(icons/file-on.png); }
.room-say #btnMusic:hover, .room-say #btnMusic.on, .room-say #btnMusic.has, .room-say #btnMusic[aria-pressed="true"] { background-image: url(icons/music-on.png); }
.room-say #btnStyle:hover, .room-say #btnStyle.on, .room-say #btnStyle.has, .room-say #btnStyle[aria-pressed="true"] { background-image: url(icons/style-on.png); }
.room-say #btnShareSite:hover, .room-say #btnShareSite.on, .room-say #btnShareSite.has, .room-say #btnShareSite[aria-pressed="true"] { background-image: url(icons/share-on.png); }
.room-say #btnInvite:hover, .room-say #btnInvite.on, .room-say #btnInvite.has, .room-say #btnInvite[aria-pressed="true"] { background-image: url(icons/invite-on.png); }
.room-say #btnAsk:hover, .room-say #btnAsk.on, .room-say #btnAsk.has, .room-say #btnAsk[aria-pressed="true"] { background-image: url(icons/ask-on.png); }
.room-say #btnMail:hover, .room-say #btnMail.on, .room-say #btnMail.has, .room-say #btnMail[aria-pressed="true"] { background-image: url(icons/mail-on.png); }
.room-say #btnCam:hover, .room-say #btnCam.on, .room-say #btnCam.has, .room-say #btnCam[aria-pressed="true"] { background-image: url(icons/camera-on.png); }
.room-say #btnFlip:hover, .room-say #btnFlip.on, .room-say #btnFlip.has, .room-say #btnFlip[aria-pressed="true"] { background-image: url(icons/flip-on.png); }
.room-say #btnScreen:hover, .room-say #btnScreen.on, .room-say #btnScreen.has, .room-say #btnScreen[aria-pressed="true"] { background-image: url(icons/screen-on.png); }
.room-say #btnMic:hover, .room-say #btnMic.on, .room-say #btnMic.has, .room-say #btnMic[aria-pressed="true"] { background-image: url(icons/voice-on.png); }
.room-say #btnEmo:hover, .room-say #btnEmo.on, .room-say #btnEmo.has, .room-say #btnEmo[aria-pressed="true"] { background-image: url(icons/emoji-on.png); }

/* the live row: same rule, and two of them change job as well as colour */
.live-bar #liveGo:hover, .live-bar #liveGo.on { background-image: url(icons/golive-on.png); }
.live-bar #livePtt:hover, .live-bar #livePtt.on { background-image: url(icons/ptt-on.png); }
.live-bar #liveMic:hover, .live-bar #liveMic.on { background-image: url(icons/micopen-on.png); }
.live-bar #liveEdit:hover, .live-bar #liveEdit.on { background-image: url(icons/edit-on.png); }
.live-bar #liveCam:hover, .live-bar #liveCam.on { background-image: url(icons/camera-on.png); }
.live-bar #liveShare:hover, .live-bar #liveShare.on { background-image: url(icons/sharescreen-on.png); }
.live-bar #liveBig:hover, .live-bar #liveBig.on { background-image: url(icons/bigroom-on.png); }
.live-bar #camSet:hover, .live-bar #camSet.on { background-image: url(icons/camsettings-on.png); }
.live-bar #beamGo:hover, .live-bar #beamGo.on { background-image: url(icons/project-on.png); }
.live-bar #talkGo:hover, .live-bar #talkGo.on { background-image: url(icons/talk-on.png); }
.live-bar #liveGo.on { background-image: url(icons/leave-on.png); }
.live-bar #liveCam.on { background-image: url(icons/camoff-on.png); }
.live-bar .beamgrade:hover { background-image: url(icons/sharp-on.png); }

/* the microphone in the text box, and the ladybug at the top of every page */
.room-say .dictate:hover, .room-say .dictate.on, .room-say .dictate.on:hover { background-image: url(icons/mic-on.png); }
.bugbtn:hover { background-image: url(icons/ladybug-on.png); }

/* the three words in the rail wear their tile, the way Grok asked */
.camside .camsizer .camlbl, .camside .cambright > span, .camside .camhear2 > span, .camside .camhear > span {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  padding-left: 26px;
  min-height: 22px;
  line-height: 22px;
}
.camside .camsizer .camlbl { background-image: url(icons/cam-size.png); }
.camside .cambright > span { background-image: url(icons/brightness.png); }
.camside .camhear2 > span, .camside .camhear > span { background-image: url(icons/room-sound.png); }
.camside .camhear2.muted > span, .camside .camhear.muted > span { background-image: url(icons/room-sound-mute.png); }
.camside.tiny .camsizer .camlbl, .camside.tiny .cambright > span, .camside.tiny .camhear2 > span, .camside.tiny .camhear > span { background-image: none; padding-left: 0; }

/* ================================================== NEO MOVES BESIDE THE WORD ==
   The small NAME and its pencil sat above the typed name and the pencil's tail
   came down into the first letter. They sit side by side now: NAME and the
   pencil on the left, the name itself starting clear to the right of them, both
   on one line, both centred in the pill.

   The padding carries !important because the older rule that pushed the name
   down below the label carries it too, and that is the rule being undone.
   ============================================================================== */
.room-say .namebox .name-lbl {
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.room-say .namebox input {
  padding: 14px 15px 14px 78px !important;
}
@media (max-width: 700px) {
  .room-say .namebox input { padding-left: 74px !important; }
}

/* ================================================================ THE ROOMS DRAWER ==
   The strip stays hot and short. This key opens the memory: every room there is,
   with its picture, what it is about, and how many are in it. An empty room keeps
   a dot and keeps its place, so a room does not die when the last person leaves.
   =================================================================================== */
.roomskey {
  flex: 0 0 auto;
  margin-right: 8px;
  padding: 7px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #202226 0%, #121316 55%, #08090a 100%);
  color: #cfd4dc;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 12px rgba(0, 0, 0, .38);
  transition: transform .12s ease, filter .12s ease, color .12s ease;
}
.roomskey:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.16); }
.roomskey.on {
  color: #fff;
  background: linear-gradient(180deg, #24402c 0%, #14251a 55%, #0a1410 100%);
  box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .26);
}

.roomdrawer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
  padding: 12px;
  border-radius: 12px;
  background: #0c0d0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 12px 24px rgba(0, 0, 0, .5);
}
.roomcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: #131418;
  color: var(--bone);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 10px rgba(0, 0, 0, .35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.roomcard:hover { transform: translateY(-1px); filter: brightness(1.14); }
.roomcard.on { box-shadow: inset 0 0 0 1px rgba(159, 183, 201, .5), 0 4px 10px rgba(0, 0, 0, .35); }
.roomcard.live { box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .4), 0 0 12px rgba(40, 200, 90, .18); }
.roomcover {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: #08080b;
  box-shadow: inset 0 0 0 1px #0a0a0a, 0 0 0 1px #2e2e30;
}
.roomwords { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.roomwords b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomwords i { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomn {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
}
.roomn.has { color: #6fbf7a; font-weight: 700; }

/* ============================================================ OPEN A ROOM ==
   Three things and no more: what it is called, what it is about, and a picture
   if they have one. Skip the picture and it wears the rabbit.
   ========================================================================== */
.newroompop {
  max-width: 420px;
  margin: 10px 0 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #0b0c0f;
  border: 1px solid rgba(111, 191, 122, .4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
}
.newroompop h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.newroompop label { display: block; margin: 0 0 10px; font-size: 12px; color: var(--ash); }
.newroompop .sm { font-size: 10px; opacity: .75; }
.newroompop input[type="text"], .newroompop input[type="file"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #191b1e 0%, #0c0d0f 100%);
  color: var(--bone);
  font: inherit;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -5px 10px rgba(0, 0, 0, .4);
}
.newroompop input[type="text"]:focus { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(111, 191, 122, .6); }
.newroompop .nrpriv { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.newroompop .nrpriv input { margin: 2px 0 0; accent-color: #6fbf7a; }
.newroompop .nrdoors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.newroompop .nrsaid { font-size: 11px; color: var(--ash); flex: 1 1 100%; }

@media (max-width: 640px) {
  .roomdrawer { grid-template-columns: 1fr; padding: 10px; }
  .roomskey { padding: 6px 10px; letter-spacing: .12em; }
}

/* the key that says this device keeps the microphone */
#micHere.on { color: #111; background: #6fbf7a; border-color: #6fbf7a; }

/* ====================================================== THE CAMERA BAR ON THE LEFT ==
   Papa: "move the camera scroll bar to the left of the cameras, it will be more
   clear." Measured, the columns do not overlap - the bar ends at 716 and the chat
   begins at 718 - but the bar is dark and it sits hard against the chat's dark
   panel, so it reads as part of it. Moving it beats arguing about whose pixels
   those are. On the left it has the edge of the page beside it and nothing can
   crowd it.

   A scrollbar goes where the writing goes, so the column is told it reads right to
   left and each of its children is told it does not. Nothing moves but the bar.
   =================================================================================== */
.room-split > .camside { direction: rtl; }
.room-split > .camside > * { direction: ltr; }

/* the same on the list of names, so both bars sit on the outside of the room
   rather than either side of the writing */
.room-split > .here { direction: rtl; }
.room-split > .here > * { direction: ltr; }

/* an iPad lays the cameras out as a row: let it scroll sideways and show the bar */
body.lay-ipad .room-split > .camside { direction: ltr; }
body.lay-ipad .room-split > .camside .camlist { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }

/* ========================================== GREEN MEANS IT IS ON, NOT NEARBY ==
   Papa hovered the microphone in the text box, watched it go green, and asked
   if that meant it was sending his voice. It was not - it was dictation, and it
   was not even running. The button was claiming to be on because my hand was
   near it.

   Four of these buttons are lamps rather than actions. The dictation microphone
   is green while it is listening. Open mic is green while the room can hear you.
   Mail is green while a message is waiting. Ask is green while your hand is up.
   On those four the picture no longer changes on hover, so green keeps meaning
   the one thing it is supposed to mean. They still lift and brighten under the
   hand like everything else; they just stop lying about being on.
   ============================================================================= */
.room-say .dictate:hover { background-image: url(icons/mic-off.png); }
.room-say .dictate.on:hover { background-image: url(icons/mic-on.png); }

.room-say #btnMail:hover { background-image: url(icons/mail-off.png); }
.room-say #btnMail.has:hover { background-image: url(icons/mail-on.png); }

.live-bar #liveMic:hover { background-image: url(icons/micopen-off.png); }
.live-bar #liveMic.on:hover { background-image: url(icons/micopen-on.png); }

.room-say #btnAsk:hover { background-image: url(icons/ask.png); }
.room-say #btnAsk.on:hover, .room-say #btnAsk[aria-pressed="true"]:hover { background-image: url(icons/ask-on.png); }

/* the kind of room, on its card in the drawer */
.roomwords .roomkind {
  text-decoration: none;
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(159, 183, 201, .14);
  color: #9fb7c9;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.newroompop select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #191b1e 0%, #0c0d0f 100%);
  color: var(--bone);
  font: inherit;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -5px 10px rgba(0, 0, 0, .4);
}

/* ================================================================ THE MOTION ==
   One line across the top of a room that is arguing, with a clock counting
   since it went up. Papa drew it for Fight Club and it belongs to Debate too.
   ============================================================================= */
.motionbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid #c4452f;
  background: linear-gradient(180deg, #17181b 0%, #0b0c0e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 14px rgba(0, 0, 0, .4);
}
.motionbar b {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
}
.motionbar .motiontext { flex: 1 1 auto; min-width: 0; font-size: 14px; font-style: italic; color: var(--bone); }
.motionbar .motionclock { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; font-style: normal; color: #9fb7c9; }
@media (max-width: 640px) {
  .motionbar { flex-wrap: wrap; gap: 8px; padding: 9px 11px; }
  .motionbar .motiontext { flex: 1 1 100%; font-size: 13px; }
}

/* a teaching room puts the screen first and the face second: the shown screen
   takes the room and the teacher's camera sits small beside it */
body.screen-first .beams { order: -1; }
body.screen-first .camside .camtile { max-width: 220px; }

/* =========================================== PICK A PICTURE, GET A ROOM ==
   The pictures are the menu. Pointing at the two facing mics opens a fight
   room; pointing at the skillet opens a kitchen. Nobody has to know the word
   "kind" to build the thing they had in mind.
   ======================================================================== */
.nrpics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  max-height: 230px;
  overflow-y: auto;
  padding: 2px;
}
.nrpic {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #131418;
  color: var(--ash);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, color .12s ease;
}
.nrpic img { display: block; width: 100%; height: 58px; object-fit: cover; }
.nrpic span {
  display: block;
  padding: 4px 5px 6px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.nrpic:hover { color: var(--bone); transform: translateY(-1px); filter: brightness(1.15); }
.nrpic.on {
  color: #fff;
  box-shadow: inset 0 0 0 2px #3dcc6a, 0 0 12px rgba(40, 200, 90, .3);
}

/* nine quiet minutes: said, with a way out of it */
.idlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 3px solid #f2c14e;
  background: linear-gradient(180deg, #17181b 0%, #0b0c0e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 6px 14px rgba(0, 0, 0, .4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone);
}
.idlebar span { flex: 1 1 240px; min-width: 0; }

/* ============================================================== THE CHECK ==
   ladybug.js builds its own panel and brings no styling with it, so this is
   what it looks like. Two columns: what the site does, and what this machine
   does. A red mark is a thing that failed, and every one of them travels with
   the report.
   ========================================================================= */
.lb-panel {
  position: fixed;
  right: 14px;
  top: 64px;
  z-index: 90;
  width: min(94vw, 460px);
  max-height: 78vh;
  overflow-y: auto;
  background: #0b0c0f;
  border: 1px solid rgba(214, 69, 58, .55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
  color: var(--bone);
  text-align: left;
}
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px solid var(--edge); }
.lb-head strong { font-size: 15px; font-weight: 600; }
.lb-x { background: none; border: 0; color: var(--ash); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lb-body { padding: 12px 14px 14px; }
.lb-block { margin: 0 0 14px; }
.lb-block h4 { margin: 0 0 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); font-weight: 600; }
.lb-table { display: block; }
.lb-table > div, .lb-side > div { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid rgba(35, 38, 45, .6); font-size: 12px; line-height: 1.5; }
.lb-v { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; }
.lb-good { color: #6fbf7a; }
.lb-hot { color: #d6453a; }
.lb-dim { color: var(--ash); }
.lb-note { color: var(--ash); font-size: 11px; }
.lb-change { border-left: 3px solid #f2c14e; padding-left: 10px; }
.lb-lost { color: #d6453a; }
.lb-gain { color: #6fbf7a; }
.lb-copy, .lb-paste {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #131418;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.lb-copy:hover, .lb-paste:hover { border-color: rgba(239, 236, 230, .45); }
.lb-paste { white-space: pre-wrap; font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11px; cursor: text; display: block; }
@media (max-width: 640px) { .lb-panel { right: 3vw; left: 3vw; width: auto; } }

/* come along: its own switch, beside Follow, never part of it */
.tbtn.comealong.on { color: #111; background: #6fbf7a; border-color: #6fbf7a; }
.alongbar { border-left-color: #6fbf7a; }

/* somebody is asking you into their room */
.invbar { border-left-color: #f2c14e; }

/* the switches: every one of them on, off, or in between */
.camhear.setrow { align-items: center; }
.setpick { display: flex; gap: 4px; flex-wrap: wrap; }
.setpick .camauto { padding: 2px 9px; font-size: 10px; }
.setpick .camauto.on { color: #111; background: #6fbf7a; border-color: #6fbf7a; }

/* ============================================================ WHO IS AROUND ==
   Everybody on the site, the talkers and the ones who wandered off, each with
   the room they are standing in and one button that calls them here.
   =========================================================================== */
.live-what.whohook { cursor: pointer; }
.live-what.whohook:hover { color: var(--bone); }
.whopop { max-width: min(94vw, 360px); }
.whopop h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.wholist { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.whorow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(35, 38, 45, .7); }
.whoname { flex: 0 1 auto; font-size: 13px; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whoname.fw { color: #6fbf7a; }
.whoroom { flex: 1 1 auto; min-width: 0; font-style: normal; font-size: 11px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whohere { flex: 0 0 auto; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #6fbf7a; }
.whoinv { flex: 0 0 auto; }
.whoinv.done { color: #6fbf7a; border-color: rgba(111, 191, 122, .5); }

/* the claim button, at the moment somebody has just proved they care about the name */
.tbtn.claimnow {
  color: #111;
  background: #f2c14e;
  border-color: #f2c14e;
  animation: claimpulse 1.6s ease-in-out 4;
}
@keyframes claimpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, .5); }
  50%      { box-shadow: 0 0 0 8px rgba(242, 193, 78, 0); }
}
@media (prefers-reduced-motion: reduce) { .tbtn.claimnow { animation: none; } }

/* a door beside every link a person types, so they can check it is right */
.linkrow { position: relative; display: block; }
.linkrow input { width: 100%; box-sizing: border-box; padding-right: 38px; }
.linkopen {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: #131418;
  color: var(--ash);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.linkopen:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }

/* my songs: one press instead of leaving the room to fetch a link */
.songpop { max-width: min(92vw, 320px); max-height: 60vh; overflow-y: auto; }
.songpop h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ash); }
.songrow { display: block; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--bone); cursor: pointer; }
.songrow:hover { background: #17181c; }
.songrow b { display: block; font-size: 13px; font-weight: 600; }
.songrow i { display: block; font-style: normal; font-size: 10px; color: var(--ash); font-family: var(--mono); }

/* the shelf: ten links kept to hand */
.songrow { position: relative; }
.shelfx { position: absolute; right: 8px; top: 8px; color: var(--ash); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; }
.shelfx:hover { color: #d6453a; }
.shelfadd { color: #6fbf7a; font-size: 12px; border-top: 1px solid var(--edge); margin-top: 4px; }

/* the deck: the pinned track, playing for everyone in this room */
.motionbar { flex-wrap: wrap; }
.deck { flex: 1 1 100%; margin: 8px 0 0; }
.deckframe { width: 100%; border: 0; border-radius: 10px; background: #07080a; display: block; }
.deckframe.strip { height: 160px; }
.deckframe.wide { height: 220px; }
.deckframe.tall { height: 420px; }
.deckby { margin: 5px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 640px) { .deckframe.wide { height: 180px; } .deckframe.tall { height: 340px; } }

/* ============================================== the fonts stop shouting ==
   Fourteen cream slabs in a black room, brighter than the writing itself,
   under a row of quiet dark-rimmed colours. Same dark glass as everything
   else now, with the chosen one lit, so the panel reads as one thing.
   ======================================================================= */
.stylepick .fo {
  background: linear-gradient(180deg, #1b1d21 0%, #111214 60%, #0a0b0c 100%);
  color: #cfd4dc;
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .35);
  transition: filter .12s ease, color .12s ease, box-shadow .12s ease;
}
.stylepick .fo:hover { color: #fff; filter: brightness(1.2); }
.stylepick .fo.on {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 12px rgba(40, 200, 90, .26);
}
.stylepick .sw { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 8px rgba(0, 0, 0, .4); }

/* making a name yours: one form, both boxes on it, no popups */
.claimpop { max-width: 100%; margin: 10px 0 0; border-color: rgba(242, 193, 78, .5); }
.claimpop .claimlead { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--ash); }
.claimpop input[type="email"], .claimpop input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #191b1e 0%, #0c0d0f 100%);
  color: var(--bone);
  font: inherit;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -5px 10px rgba(0, 0, 0, .4);
}
.claimpop input:focus { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(242, 193, 78, .6); }

/* ===================================================== THE FLAME ==
   A room says when it is worth walking into. Ember, not green: green
   already means a mouth is open. One rule, no flicker - four or more
   people and it lights. It sits on the corner of the picture rather
   than being painted into the cover.
   ================================================================= */
.roomshot { position: relative; flex: 0 0 auto; display: block; line-height: 0; }
.roomflame {
  display: none;
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: url(icons/hot.png) center / cover no-repeat;
  box-shadow: 0 0 10px rgba(214, 132, 41, .45), 0 2px 6px rgba(0, 0, 0, .6);
}
.roomcard.hot .roomflame { display: block; }

/* ==================================================== THE HOUSE'S OWN ==
   Thirty-two of Papa's tiles at the top of the tray, and the same picture
   inside a line wherever somebody sent one. A line of nothing but pictures
   shows them larger, the way a single emoji does everywhere else.
   ====================================================================== */
.emo-row.emo-house { display: flex; flex-wrap: wrap; gap: 4px; }
.emo.emopic { width: 38px; height: 38px; padding: 3px; display: grid; place-items: center; }
.emo.emopic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.emoin {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  object-fit: contain;
  margin: 0 1px;
}
.said .emoin, p:has(> .emoin:only-child) .emoin { width: 44px; height: 44px; vertical-align: -12px; }

/* the house's own tiles, offered as a face */
.faceopt.emo img { object-fit: contain; padding: 2px; }

/* your own photo, at the front of the faces */
.faceopt.mine {
  display: grid;
  place-items: center;
  border-color: rgba(111, 191, 122, .5);
  color: #6fbf7a;
}
.faceopt.mine span { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; text-align: center; padding: 0 3px; }
.faceopt.mine:hover { border-color: #6fbf7a; }

/* ================================================ GOLD AND SILVER ==
   Gold is the house - whoever is signed in, the same everywhere in the
   building. Silver runs this one room. Small and beside the name: it
   is there to be read at a glance in an argument, not to be admired.
   =================================================================== */
.rank {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
  vertical-align: 1px;
  border: 1px solid transparent;
}
.rank.gold {
  color: #c9a227;
  border-color: rgba(201, 162, 39, .5);
  background: rgba(201, 162, 39, .1);
  text-shadow: 0 0 8px rgba(201, 162, 39, .35);
}
.rank.silver {
  color: #b9c0c6;
  border-color: rgba(185, 192, 198, .38);
  background: rgba(185, 192, 198, .07);
}

/* the AI sitting by, in the list of people who can help */
.rank.helper {
  color: #6fbf7a;
  border-color: rgba(111, 191, 122, .4);
  background: rgba(111, 191, 122, .08);
}
/* "message" sits where "call them" sits, and reads quieter than it */
.whoask { margin-left: auto; }
.whorow .rank { margin-left: 6px; }

/* ============================================== THE EAR, DRAWN ==
   A speaker in the house's own line, not the system's white emoji.
   The bar across it is always in the drawing and only shown when
   the voice is off, so the shape never jumps when it changes.
   ================================================================ */
.earbtn svg { width: 15px; height: 15px; display: block; overflow: visible; }
.earbtn .cone { fill: currentColor; stroke: none; }
.earbtn .wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.earbtn .w2 { opacity: .55; }
.earbtn .bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}
.earbtn.off .wave { opacity: 0; }
.earbtn.off .bar { opacity: 1; }

/* the hammer inside the rank chip - gold for the house, silver for a room */
.rank { display: inline-flex; align-items: center; gap: 3px; padding-left: 3px; }
.rank svg { width: 11px; height: 11px; display: block; flex: 0 0 auto; }
.rank .head, .rank .shaft, .rank .block { fill: currentColor; }
.rank.gold svg { filter: drop-shadow(0 0 4px rgba(201, 162, 39, .5)); }

/* ================================================== THE EAR, DRESSED ==
   One press and a voice is out of your ears - in this room and in every
   other one, until you press it again.

   This block went missing for four versions: the patch that adds it looks
   for "earbtn" in this file before writing, and ".roomsub .clearbtn" was
   already here - a word hidden inside a longer word. The guard read that
   as "already done". The button spent four versions as a bare browser
   button with a black icon in it, which is what Papa was looking at when
   he said the white icons do not match.

   Papa's three speakers, in the house's own glass: dark, a rim that lifts
   under a hand, bone-grey while you hear them and red behind a bar when
   you do not.
   ====================================================================== */
.earbtn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .5);
  color: #9aa09a;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s, border-color .15s, color .15s, box-shadow .15s;
}
li:hover .earbtn, .earbtn:focus-visible, .earbtn.off { opacity: 1; }
.earbtn:hover {
  border-color: rgba(255, 255, 255, .34);
  color: var(--bone, #e6e6e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .6);
}
.earbtn.off {
  border-color: rgba(198, 74, 74, .6);
  color: #d05656;
  background: linear-gradient(180deg, rgba(198, 74, 74, .16), rgba(0, 0, 0, .4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 8px rgba(198, 74, 74, .22);
}
.earbtn.off:hover { color: #e46a6a; border-color: rgba(198, 74, 74, .85); }

/* SpiraOS family badge at the foot of every page (Papa picked the black and gold logo, 2026-09-24).
   The logo is black on white, so it sits on its own light plate like a nameplate. */
footer .spirabadge { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 18px auto 0; padding: 6px 10px 5px; border: 1px solid var(--line); border-radius: 10px; background: none; text-decoration: none; }
footer .spirabadge img { display: block; width: min(130px, 40vw); height: auto; mix-blend-mode: lighten; }
footer .spirabadge span { color: var(--ash); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
footer .spirabadge:hover { border-color: rgba(201, 162, 74, .6); }

/* GAMES in the top bar (Papa, 2026-09-24): a gold button that opens a list of games to play right away.
   The list floats (position:fixed) so the phone's sideways-scrolling bar cannot clip it. */
.navgames { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #1a1408; background: #e0b84c; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.navgames:hover, .navgames.open { background: #f5cf62; }
.gamesmenu { position: fixed; z-index: 1000; background: #0e0f12; border: 1px solid #8a6d2c; border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .75); max-height: calc(100vh - 90px); overflow: auto; }
.gamesmenu[hidden] { display: none; }
.gamesmenu .gm-h { margin: 8px 10px 4px; font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c9a24a; }
.gamesmenu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--bone); text-decoration: none; font-size: 15px; }
.gamesmenu a:hover, .gamesmenu a:focus { background: #1d1a12; outline: none; }
.gamesmenu a span { width: 24px; text-align: center; font-size: 18px; }
.gamesmenu a em { font-style: normal; font-size: 11px; color: #c9a24a; margin-left: auto; }
.gamesmenu .gm-all { justify-content: center; color: #e0b84c; font-size: 13px; border-top: 1px solid rgba(239, 236, 230, .1); margin-top: 6px; border-radius: 0 0 10px 10px; }
.navlinks a.navlivebtn { flex: 0 0 auto; color: #fff; background: #e11d48; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.navlinks a.navlivebtn:hover { background: #f43f5e; color: #fff; }

/* A SMALLER ROOM (Papa, 2026-09-25: "just shrink it and have the chat room scroll - make it a little smaller"). On a
   computer the room is one fixed height, smaller than before (was min(66vh, 680px)); the talk, the cameras and the
   names each scroll inside it. Phones and iPads keep their own heights (the lay-* rules). */
@media (min-width: 901px) {
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-split { --roomh: min(52vh, 520px); }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .live:has(.beams.has) + .room .room-split { --roomh: min(42vh, 440px); }   /* a screen up: smaller still, as before */
}

/* A TIGHTER LIVE BAR (Papa, 2026-09-25: "we have all the space at the top - LIVE, Just watch - we could fix that and get
   more room", "we have live at the top"). The word LIVE no longer takes the whole first row: it keeps only its own width
   and goes away while there is nothing to say (the red Live button is in the top bar); the buttons are a little
   tighter so they sit on one line on a computer; the empty note line underneath takes no room. */
.live-bar .live-what { flex: 0 1 auto; }
.live-bar .live-what:not(:has(span:not(:empty))) { display: none; }
#liveNote:empty { display: none; }
@media (min-width: 901px) {
  .live-bar { gap: 6px; padding: 6px 10px; }
  .live-bar .tbtn[id] { padding: 7px 10px 7px 32px; background-size: 20px 20px; background-position: 7px center; }
  .live-bar .beamgrade { padding: 7px 8px 7px 30px; background-size: 18px 18px; max-width: 170px; }
}

/* THE ROOM'S NAME, CLOSER (Papa, 2026-09-25: "the room... the Music room - delete the line and move it together, you
   get more for less"): the little "THE ROOM" line over the name goes, and the name, the rooms line and the room sit
   closer together. */
.band.top.roompage > .kicker, .roompage > .kicker:first-child { display: none; }
@media (min-width: 781px) { .band.top.roompage { padding-top: 10px; } }
.roompage .roomsline, .roompage #rooms { margin-bottom: 8px; }

/* THE TOOLS ON ONE LINE (Papa, 2026-09-25: "see these - move them up to that line"): on a computer, mail, flip, show
   desktop, voice note and emoji join the name-and-tools row beside Ask, so the room ends at the writing line. Phones
   keep the third row - their first row is full already. */
@media (min-width: 901px) {
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say #btnMail { order: 11; }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say #btnFlip { order: 12; }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say #btnScreen { order: 13; }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say #btnMic { order: 14; }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say #btnEmo { order: 14; }
  body:not(.lay-phone):not(.lay-iphone):not(.lay-ipad) .room-say::after { display: none; }
}

/* the rabbit ends the kindness line like a full stop (Papa, 2026-09-25: "move this rabbit like a . at the end, sucking out the space") */
.ico.foot.dot { width: 14px; height: 20px; margin: 0 0 0 6px; vertical-align: -3px; }

/* less empty footer (Papa, 2026-09-25: "take out the wasted space"): was 52px above and 64px below */
footer { padding-top: 18px; padding-bottom: 14px; }
footer .spirabadge { margin-top: 10px; }

/* drag a name onto Here now to invite them (Papa, 2026-09-25) */
body.br-dragname #hereBox { outline: 2px dashed rgba(224,184,76,.6); outline-offset: -4px; }
#hereBox.dropok { outline: 2px solid #e0b84c; background: rgba(224,184,76,.08); }
.roomname[draggable="true"] { cursor: grab; }

/* no air under the writing line (Papa, 2026-09-25: "we can take out the air in this space"): the note line under the box
   (where "+100 chips" shows) only takes room while it says something; less padding under the room */
.room-note:empty { display: none; }
@media (min-width: 901px) { .room-say { padding-bottom: 6px; } .band.top.roompage, .roompage { padding-bottom: 4px; } }

/* The wall: off the left edge, and no empty band before "Sign the wall" (Papa, 2026-09-25: "there is air here too, suck it out") */
main.wrap { max-width: 1100px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); padding-bottom: 28px; }
.signit { margin-top: 22px; padding-top: 18px; }
main.wrap .quiet { margin-bottom: 0; }

/* The wall, tighter still (Papa, 2026-09-25: "lets suck out the air") */
main.wrap .eyebrow { margin: 0 0 2px; }
main.wrap h1.big { margin: 0 0 10px; }
main.wrap .lead { margin: 0 0 12px; }
main.wrap { padding-top: 74px; }
.signit h2 + p { margin-top: 4px; }

/* a name that is playing: the line says which game and is a way in to watch (Papa, 2026-09-25) */
.here small.state.playing { color: #e0b84c; cursor: pointer; }
.here small.state.playing:hover { text-decoration: underline; }

/* an incoming call pops up in the middle, over everything: who is calling, red to say no, green to pick up */
.callcard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95; width: min(420px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 22px; border: 1px solid #6fbf7a; border-radius: 20px; background: #0b0c0f; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6), 0 20px 60px rgba(0, 0, 0, .7); animation: callpulse 1.5s ease-in-out infinite; text-align: center; }
.callcardsay { color: var(--bone); font-size: 20px; line-height: 1.35; }
.callbtns { display: flex; gap: 40px; justify-content: center; }
.callcard button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 88px; height: 88px; border-radius: 50%; border: 0; font: inherit; font-size: 32px; cursor: pointer; color: #050506; }
.callcard button span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.callcard .callyes { background: #6fbf7a; animation: callshake 1.5s ease-in-out infinite; }
.callcard .callno { background: #d9534f; }
@keyframes callpulse { 0%, 100% { border-color: #6fbf7a; } 50% { border-color: rgba(111, 191, 122, .3); } }
@keyframes callshake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .callcard, .callcard .callyes { animation: none; } }

/* ON A CALL: the private window becomes the big screen in the middle - their camera large, mine small in the corner, the room dimmed behind */
.pmbox.oncall { position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); width: min(960px, 96vw); max-width: 96vw; max-height: 94vh; z-index: 90; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .72), 0 18px 50px rgba(0, 0, 0, .6); }
.pmbox.oncall .pmcams { display: block; padding: 0; }
.pmbox.oncall .pmtheir { width: 100%; max-height: 70vh; aspect-ratio: 16 / 9; object-fit: contain; }
.pmbox.oncall .pmmine { position: absolute; right: 12px; bottom: 12px; width: 26%; min-width: 110px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); }
.pmbox.oncall .pmcamnote { position: absolute; left: 12px; bottom: 12px; }
.pmbox.oncall .pmlog { min-height: 60px; max-height: 18vh; }
@media (max-width: 700px) { .pmbox.oncall { width: 100vw; max-width: 100vw; max-height: 100vh; } .pmbox.oncall .pmtheir { max-height: 60vh; } }
.callcard .callface { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 4px solid #6fbf7a; background: #16181d; color: #6fbf7a; font-size: 56px; font-weight: 700; animation: callring 1.5s ease-out infinite; }
.callcard .callface img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@keyframes callring { 0% { box-shadow: 0 0 0 0 rgba(111, 191, 122, .7); } 100% { box-shadow: 0 0 0 22px rgba(111, 191, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .callcard .callface { animation: none; } }
/* the call's sound check line and the Can't hear button */
.pmsound { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 14px; font-size: 13px; color: var(--bone); background: #0f1114; border-top: 1px solid var(--edge); }
.pmsound span { flex: 1 1 260px; }
.pmsound .pmhear { flex: 0 0 auto; }
/* on a call the words stay in view: the picture gives way so the messages and the Send box always fit */
.pmbox.oncall { height: 94vh; overflow: hidden; }
.pmbox.oncall > * { flex-shrink: 0; }
.pmbox.oncall .pmcams { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pmbox.oncall .pmtheir { max-height: 100%; height: 100%; width: 100%; aspect-ratio: auto; }
.pmbox.oncall .pmlog { flex: 0 0 auto; min-height: 90px; max-height: 22vh; }
.pmbox.oncall .pmnote { display: none; }
@media (max-width: 700px) { .pmbox.oncall { height: 100vh; } .pmbox.oncall .pmlog { max-height: 26vh; } }
.pmaddlist { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; max-height: 20vh; overflow-y: auto; padding: 4px 0; }
.pmaddlist .mailrow { width: auto; padding: 6px 12px; border: 1px solid #6fbf7a; border-radius: 999px; background: transparent; color: var(--bone); cursor: pointer; font: inherit; }
.pmaddlist p { margin: 0; color: var(--ash); }
.pmsettings { flex: 1 1 100%; display: grid; gap: 8px; padding: 6px 0; }
.pmsetrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmsetrow span { flex: 0 0 130px; color: var(--bone); }
.pmsetrow select { flex: 1 1 240px; min-width: 0; padding: 8px; background: #16181d; color: var(--bone); border: 1px solid #6fbf7a; border-radius: 8px; font: inherit; }
.pmsettip { margin: 0; color: var(--ash); font-size: 12px; }
/* the room card: a name, then its little phone and door */
.roomnamewrap { display: inline-flex; align-items: stretch; }
.roomnamewrap .roomname { border-right: 0; }
.roomact { font: inherit; font-size: 12px; padding: 4px 7px; background: rgba(239, 243, 249, .05); border: 1px solid var(--edge); cursor: pointer; color: var(--bone); line-height: 1; }
.roomact + .roomact { border-left: 0; }
.roomact.call { border-color: rgba(111, 191, 122, .6); }
.roomact:hover, .roomact:focus-visible { background: rgba(111, 191, 122, .18); }
.roomact:disabled { opacity: .6; cursor: default; }
/* a little phone on each private-message row */
.mailwrap .mailcall { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #6fbf7a; background: #0b0c0f; color: var(--bone); font-size: 15px; line-height: 1; cursor: pointer; }
.mailwrap .mailcall:hover, .mailwrap .mailcall:focus-visible { background: rgba(111, 191, 122, .2); }
.mailwrap:has(.mailcall) .mailrow { padding-right: 54px; }
.mailwrap.slid .mailcall { display: none; }
/* the Friends list: everyone I follow, where they are, a phone for each */
.friendsbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 92; width: min(440px, 94vw); max-height: 82vh; display: flex; flex-direction: column; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .6); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), 0 20px 60px rgba(0, 0, 0, .7); }
.friendshead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--edge); color: var(--bone); font-size: 17px; }
.friendsx { background: transparent; border: 0; color: var(--bone); font-size: 26px; line-height: 1; cursor: pointer; }
.friendslist { overflow-y: auto; padding: 6px 8px 10px; color: var(--ash); }
.friendsnone { margin: 10px 8px; color: var(--bone); line-height: 1.5; }
.friendrow { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.friendface { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #16181d; color: #6fbf7a; font-weight: 700; border: 2px solid transparent; }
.friendrow.on .friendface { border-color: #6fbf7a; }
.friendface img { width: 100%; height: 100%; object-fit: cover; }
.friendwho { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.friendwho b { color: var(--bone); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friendwho small { font-size: 12px; color: var(--ash); }
.friendrow.on .friendwho small { color: #6fbf7a; }
.friendbtn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge); background: transparent; color: var(--bone); font-size: 17px; cursor: pointer; }
.friendbtn.call { border-color: #6fbf7a; background: rgba(111, 191, 122, .12); }
.friendbtn:hover, .friendbtn:focus-visible { background: rgba(111, 191, 122, .25); }
/* shrink a call: the big screen becomes a small window in the corner, the chat free again */
.pmshrink { display: none; }
.pmbox.oncall .pmshrink { display: inline-flex; }
.pmbox.oncall.callmin { width: 340px; height: auto; max-height: none; left: auto !important; top: auto !important; right: 16px !important; bottom: 16px !important; transform: none; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.pmbox.oncall.callmin > :not(.pmhead):not(.pmcams) { display: none !important; }
.pmbox.oncall.callmin .pmcams { flex: 0 0 auto; }
.pmbox.oncall.callmin .pmtheir { height: auto; max-height: 200px; aspect-ratio: 16 / 9; }
.pmbox.oncall.callmin .pmmine { width: 32%; min-width: 70px; right: 6px; bottom: 6px; }
.pmbox.oncall.callmin .pmhead .pmhelp, .pmbox.oncall.callmin .pmhead .pminv { display: none; }
@media (max-width: 700px) { .pmbox.oncall.callmin { width: 60vw; right: 8px !important; bottom: 8px !important; } }
/* the Add someone list: a face, then the name */
.pmaddlist .addrow { display: inline-flex; align-items: center; gap: 8px; }
.pmaddlist .addface { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.pmaddlist .addface.letter { display: inline-flex; align-items: center; justify-content: center; background: #16181d; color: #6fbf7a; font-weight: 700; }
/* side by side: my picture the same size as theirs */
.pmbox.oncall .pmmine { cursor: pointer; }
.pmbox.oncall.sidebyside:not(.callmin) .pmcams { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.pmbox.oncall.sidebyside:not(.callmin) .pmtheir, .pmbox.oncall.sidebyside:not(.callmin) .pmmine { position: static; width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; min-width: 0; border-radius: 0; object-fit: contain; }
@media (max-width: 700px) { .pmbox.oncall.sidebyside:not(.callmin) .pmcams { grid-template-columns: 1fr; } }
.pmsetrow input[type=range] { flex: 1 1 240px; accent-color: #6fbf7a; }
/* THE CALL'S BUTTONS WEAR THE ROOM'S LOOK (Papa, 2026-09-26: "they do not match the theme - look at the settings
   button and the mic button - you put your mouse on them, they glow green"): the live bar's raised dark pill,
   and a green glow under the hand */
.pmsound .pmhear, .pmbox.oncall .pmhead .tbtn:not(.pmtalk), .pmaddlist .mailrow {
  border: 0; border-radius: 11px; background-color: #101215; color: #cfd4dc;
  padding: 9px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 10px rgba(0, 0, 0, .4), 0 5px 12px rgba(0, 0, 0, .38);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, color .12s ease, background-color .12s ease;
}
.pmsound .pmhear:hover, .pmsound .pmhear:focus-visible, .pmbox.oncall .pmhead .tbtn:not(.pmtalk):hover, .pmbox.oncall .pmhead .tbtn:not(.pmtalk):focus-visible, .pmaddlist .mailrow:hover, .pmaddlist .mailrow:focus-visible {
  color: #fff; transform: translateY(-1px); background-color: rgba(31, 92, 51, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .35);
}
.pmsound .pmhear:active, .pmbox.oncall .pmhead .tbtn:not(.pmtalk):active, .pmaddlist .mailrow:active { transform: translateY(1px); filter: brightness(.92); box-shadow: inset 0 5px 9px rgba(0, 0, 0, .55); }
.pmbox.oncall .pmhead .pmtalk.on { border: 0; border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 5px 12px rgba(0, 0, 0, .38); }
.pmbox.oncall .pmhead .pmtalk.on:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 14px rgba(217, 83, 79, .5); }
/* ALL THE SAME (Papa, 2026-09-26: "see the camera settings button - all buttons stay the same"): the call's buttons
   carry the live bar's picture icon on the left, the same size and place as Camera settings */
.pmsound .pmhear[class*="ic-"], .pmbox .pmhead .pmshrink, .pmbox .pmhead .pmtalk {
  background-repeat: no-repeat; background-position: 8px center; background-size: 24px 24px; padding-left: 40px;
  border: 0; border-radius: 11px; background-color: #101215; color: #cfd4dc;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -6px 10px rgba(0, 0, 0, .4), 0 5px 12px rgba(0, 0, 0, .38);
}
.pmsound .ic-hear { background-image: url(icons/room-sound.png); }
.pmsound .ic-check { background-image: url(icons/ladybug.png); }
.pmsound .ic-add { background-image: url(icons/invite.png); }
.pmsound .ic-set { background-image: url(icons/camsettings.png); }
.pmbox .pmhead .pmshrink { background-image: url(icons/bigroom.png); }
.pmbox .pmhead .pmtalk { background-image: url(icons/talk.png); }
.pmbox .pmhead .pmtalk.on { background-image: url(icons/leave.png); background-color: #7a2320; color: #fff; }
.pmsound .ic-hear:hover { background-image: url(icons/room-sound.png); }
.pmsound .ic-check:hover { background-image: url(icons/ladybug-on.png); }
.pmsound .ic-add:hover { background-image: url(icons/invite-on.png); }
.pmsound .ic-set:hover { background-image: url(icons/camsettings-on.png); }
.pmbox .pmhead .pmshrink:hover { background-image: url(icons/bigroom-on.png); }
.pmbox .pmhead .pmtalk:not(.on):hover { background-image: url(icons/talk-on.png); }
.pmbox .pmhead .pmtalk:not(.on):hover, .pmbox .pmhead .pmshrink:hover {
  color: #fff; background-color: rgba(31, 92, 51, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .35);
}
.pmbox.oncall.callmin .pmhead .pmshrink { flex-direction: row; }
/* the private window's Send is the room's arrow, and its file button the room's file tile (Papa: "the same icon as
   the chat window of the main room - the black arrow") */
.pmfoot button[type="submit"] {
  position: relative; width: 52px; min-width: 52px; height: 46px; padding: 0; border: 0; overflow: hidden; text-indent: -200px;
  background: #0a0b0c url(icons/send.png) center / 104% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px rgba(0, 0, 0, .38);
}
.pmfoot button[type="submit"]:hover { background: #0a0b0c url(icons/send.png) center / 104% no-repeat; filter: brightness(1.14); }
.pmfoot:has(.pmin:not(:placeholder-shown)) button[type="submit"] {
  background-image: url(icons/send-on.png);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 16px rgba(40, 200, 90, .38);
}
.pmfoot .pmfile { background: #0a0b0c url(icons/file.png) center / 104% no-repeat; width: 46px; height: 46px; border: 0; }
.pmfoot .pmfile svg { display: none; }
.pmfoot .pmfile:hover { background-image: url(icons/file-on.png); }
/* side by side must never swallow the words: the pictures take what is left, the messages and Send always show */
.pmbox.oncall.sidebyside:not(.callmin) .pmcams { flex: 1 1 0; min-height: 0; overflow: hidden; }
.pmbox.oncall.sidebyside:not(.callmin) .pmtheir, .pmbox.oncall.sidebyside:not(.callmin) .pmmine { max-height: 100%; height: auto; }
.pmbox.oncall .pmfoot, .pmbox.oncall .pmsound, .pmbox.oncall .pmlog { flex-shrink: 0; }
/* the purple guy is the Add button's own picture - no second icon behind him */
.pmsound .ic-add, .pmsound .ic-add:hover { background-image: none; padding-left: 14px; }
/* GLASS (Papa: "more glassy - black and shiny and slick"): a black glass face with a light sheen across the top,
   on every call button and the + */
.pmsound .pmhear, .pmbox .pmhead .pmshrink, .pmbox .pmhead .pminv, .pmbox .pmhead .pmhelp, .pmbox .pmhead .pmtalk:not(.on) {
  position: relative; overflow: hidden;
  background-color: #07080a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -8px 14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 14px rgba(0, 0, 0, .5);
  border: 0; border-radius: 11px;
}
.pmsound .pmhear::after, .pmbox .pmhead .pmshrink::after, .pmbox .pmhead .pminv::after, .pmbox .pmhead .pmhelp::after, .pmbox .pmhead .pmtalk::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 4%; height: 46%;
  border-radius: 9px 9px 50% 50% / 9px 9px 22% 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.pmbox .pmhead .pminv { font-size: 14px; letter-spacing: 0; padding: 6px 12px; color: #cfd4dc; }
.pmbox .pmhead .pminv:hover, .pmbox .pmhead .pmhelp:hover {
  color: #fff; background-color: rgba(31, 92, 51, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .35);
}
@media (max-width: 700px) { .pmbox .pmhead .pmshrink, .pmbox .pmhead .pmtalk { font-size: 0; letter-spacing: 0; padding-left: 34px; min-width: 40px; background-position: center; } }
/* the call's camera switch wears the live bar's camera pictures */
.pmsound .ic-cam { background-image: url(icons/camera.png); }
.pmsound .ic-cam:hover { background-image: url(icons/camera-on.png); }
.pmsound .ic-cam.camon { background-image: url(icons/camoff.png); }
.pmsound .ic-cam.camon:hover { background-image: url(icons/camoff-on.png); }
/* Small / Big wears the cam-size picture (Papa, 2026-09-27) */
.pmbox .pmhead .pmshrink, .pmbox .pmhead .pmshrink:hover { background-image: url(icons/cam-size.png); }
/* mute on a call: the room-sound pictures; muted shows the crossed one, in red */
.pmsound .ic-mute { background-image: url(icons/room-sound.png); }
.pmsound .ic-mute.muted, .pmsound .ic-mute.muted:hover { background-image: url(icons/room-sound-mute.png); color: #fff; background-color: #7a2320; }
/* Can't hear? moves to the voice picture, so the room-sound pictures mean mute */
.pmsound .ic-hear, .pmsound .ic-hear:hover { background-image: url(icons/voice.png); }
.pmsound .ic-hear:hover { background-image: url(icons/voice-on.png); }
/* Add someone opens a new room for the group call: the new-room pictures */
.pmsound .ic-add { background-image: url(icons/newroom.png); padding-left: 40px; }
.pmsound .ic-add:hover { background-image: url(icons/newroom-on.png); }
/* Send rolls over to the green arrow (Papa, 2026-09-27) - in the room and in a private window */
.room-say button[type="submit"]:hover, .room-say button[type="submit"]:focus-visible,
.pmfoot button[type="submit"]:hover, .pmfoot button[type="submit"]:focus-visible { background-image: url(icons/send-on.png); }
/* the call bar in a call's private room: who can come in, Add someone, Hang up */
.callbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .55); border-radius: 12px; color: var(--bone); }
.callbartxt { flex: 1 1 260px; font-size: 14px; }
.callbar .ic-hang { background-image: url(icons/leave.png); color: #fff; background-color: #7a2320; }
.callbar .ic-hang:hover { background-image: url(icons/leave-on.png); background-color: #a8322d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 14px rgba(217, 83, 79, .55); }
.callbar .callbarlist { flex: 1 1 100%; }
.callbar .pmhear {
  position: relative; overflow: hidden; flex: 0 0 auto;
  background-repeat: no-repeat; background-position: 8px center; background-size: 24px 24px; padding: 9px 14px 9px 40px;
  border: 0; border-radius: 11px; background-color: #07080a; color: #cfd4dc;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -8px 14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 14px rgba(0, 0, 0, .5);
}
.callbar .pmhear::after { content: ''; position: absolute; left: 6%; right: 6%; top: 4%; height: 46%; border-radius: 9px 9px 50% 50% / 9px 9px 22% 22%; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; }
.callbar .ic-add { background-image: url(icons/newroom.png); }
.callbar .ic-add:hover { background-image: url(icons/newroom-on.png); color: #fff; background-color: rgba(31, 92, 51, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .35); }
/* Send glows under the mouse like every other button: the green arrow and a green light round it */
.room-say button[type="submit"]:hover, .room-say button[type="submit"]:focus-visible,
.pmfoot button[type="submit"]:hover, .pmfoot button[type="submit"]:focus-visible {
  background: #0a0b0c url(icons/send-on.png) center / 104% no-repeat;
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 16px rgba(40, 200, 90, .45);
}
.pmfoot .pmfile:hover, .pmfoot .pmfile:focus-visible { box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .5), 0 0 14px rgba(40, 200, 90, .4); filter: brightness(1.1); }
/* in a call's room the call bar sits right above the cameras */
body.incall .callbar { position: sticky; top: 0; z-index: 30; }
/* the shine stays inside each button - on Hang up it had spilled across the whole top of the call */
.pmbox .pmhead .pmtalk, .pmbox .pmhead .pmshrink, .pmbox .pmhead .pminv, .pmbox .pmhead .pmhelp { position: relative; overflow: hidden; }
/* her picture's box hugs the picture (no black sides), so the green glow sits round her, not round the whole window */
.pmbox.oncall:not(.sidebyside):not(.callmin) .pmtheir { width: auto; height: 100%; max-width: 100%; margin: 0 auto; aspect-ratio: auto; object-fit: contain; }
/* the call's line: every button on one row, the voice words under them (Papa: "switch them") */
.pmsound { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pmsound > span:first-child { order: 2; flex: 1 1 100%; font-size: 13px; }
.pmsound > .pmhear { order: 1; }
.pmsound > .pmaddlist, .pmsound > .pmsettings { order: 3; }
/* a tile whose person is on a private call: dimmed, with the words over it */
.camtile.incall { position: relative; }
.camtile.incall video, .camtile.incall canvas { filter: brightness(.25) grayscale(.6); }
.camtile.incall::before { content: '\1F4DE  In a private call'; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; text-align: center; font: 700 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6fbf7a; text-shadow: 0 1px 3px #000; pointer-events: none; }
/* someone not online in the Add someone list: grey, and it does not ring */
.pmaddlist .mailrow.offline, .pmaddlist .mailrow.offline:hover { opacity: .45; filter: grayscale(1); cursor: not-allowed; transform: none; background-color: #07080a; box-shadow: none; }
/* a group call in the private window: the pictures share the screen */
.pmbox.oncall .pmcams.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; align-items: center; }
.pmbox.oncall .pmcams.multi .pmtheir, .pmbox.oncall .pmcams.multi .pmmine { position: static; width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; min-width: 0; border-radius: 0; object-fit: cover; }
.pmextra { position: relative; margin: 0; }
.pmextra video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; display: block; }
.pmextra figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: var(--bone); font: 600 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pmcams:not(.multi) .pmextra { display: none; }
/* the face sizes live on my own face now (Papa, 2026-09-27) */
#faceSize { display: none !important; }
.herelist .facesizer { cursor: pointer; }
.herelist .facesizer:hover { outline: 2px solid #6fbf7a; outline-offset: 2px; }
.facemenu { position: fixed; z-index: 96; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #0b0c0f; border: 1px solid rgba(111, 191, 122, .6); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.facemenu-t { font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); margin-right: 4px; }
.facemenu button { font: inherit; font-size: 13px; padding: 7px 12px; border: 0; border-radius: 9px; background: #101215; color: #cfd4dc; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .4); }
.facemenu button:hover, .facemenu button.on { color: #fff; background: rgba(31, 92, 51, .55); box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 12px rgba(40, 200, 90, .35); }
/* the Friends button took the face's place on the first row: the name box gives up a little width so the face sits
   after the sound wave again (Papa, 2026-09-27) */
@media (min-width: 1100px) { .room-say .namebox { flex: 0 1 210px !important; max-width: 210px; } }
/* the round buttons under the chat, one pixel smaller (Papa, 2026-09-27) - so the smiley goes back up after the sound wave */
.room-say .iconbtn { width: 45px; min-width: 45px; height: 45px; }
/* the buttons sit to the right, ending in line with Send; the name stays on the left (Papa, 2026-09-27) */
@media (min-width: 900px) { .room-say #btnCam { margin-left: auto; } }
/* the lamps (Ask, Mail, the Send bar's mic) and Friends glow green under the mouse like every other button - a green
   ring, so the picture itself still only goes green when the thing is really on (Papa, 2026-09-27) */
.room-say #btnAsk:hover, .room-say #btnMail:hover, .room-say #btnFriends:hover, .room-say .dictate:hover,
.room-say #btnAsk:focus-visible, .room-say #btnMail:focus-visible, .room-say #btnFriends:focus-visible, .room-say .dictate:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(80, 255, 140, .55), 0 0 16px rgba(40, 200, 90, .5), 0 10px 20px rgba(0, 0, 0, .45);
  filter: brightness(1.14);
}
.room-say #btnFriends:hover { color: #8ff59a; }
/* ONE ROLL-OVER FOR EVERY BUTTON (Papa, 2026-09-27: "we have to stay the same for every button roll over - neo
   green"): the room tabs, the Rooms key, + New room and every button of the live bar light the same green under
   the mouse */
.rooms a:hover, .rooms button:hover, .rooms a:focus-visible, .rooms button:focus-visible,
.live-bar .tbtn:hover, .live-bar .tbtn:focus-visible, .live-bar select:hover {
  color: #fff !important;
  border-color: rgba(80, 255, 140, .6) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .45) !important;
  filter: brightness(1.12);
}
.rooms .roomtab.on:hover { color: var(--ink) !important; }          /* the room I am in keeps its light face */
/* the top menu glows neon green under the mouse, like every button (Papa, 2026-09-27) */
.topbar .navlinks > a:hover, .topbar .navlinks > button:hover, .topbar .navlinks > a:focus-visible, .topbar .navlinks > button:focus-visible {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(80, 255, 140, .8);
  box-shadow: inset 0 0 0 1px rgba(80, 255, 140, .45), 0 0 14px rgba(40, 200, 90, .45) !important;
  border-radius: 6px;
}
.topbar .navlinks > .navlivebtn:hover, .topbar .navlinks > .navgames:hover { filter: brightness(1.1); }
/* the version beside the ladybug */
.navver { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: #6fbf7a; padding: 4px 7px; border: 1px solid rgba(111, 191, 122, .45); border-radius: 6px; align-self: center; white-space: nowrap; }
/* Show on TV wears the screen picture, like the other live-bar buttons (Papa, 2026-09-27) */
.live-bar #liveTv { background-image: url(icons/screen.png); }
.live-bar #liveTv:hover, .live-bar #liveTv.on { background-image: url(icons/screen-on.png); }
/* the version is a small badge under the ladybug, taking no room in the menu */
.bugbtn { position: relative; overflow: visible; }
.bugbtn::after { content: attr(data-ver); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; font: 700 9px/1 var(--mono); letter-spacing: .1em; color: #6fbf7a; white-space: nowrap; pointer-events: none; }
.bugpop .bugver { margin: 0 0 8px; font-size: 12px; color: var(--ash); }
.bugpop .bugver b { color: #6fbf7a; }
/* the version sits just to the right of the ladybug (Papa's drawing, 2026-09-27) */
.bugbtn::after { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 8px; font-size: 11px; padding: 4px 7px; border: 1px solid rgba(111, 191, 122, .45); border-radius: 6px; background: #0b0c0f; }

/* draw: the tools row, any-colour picker, see-through slider (2026-09-27) */
.drawkit .tool-row { flex-wrap: wrap; }
.dtool.on { border-color: #39ff6a; color: #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.35); }
.dtool:hover { border-color: #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.35); }
.swatch.pickc { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); cursor: pointer; }
.swatch.pickc input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
#dAlpha { width: 140px; accent-color: #39ff6a; }
#wall { cursor: crosshair; }

.drawkit .trow-lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #8a8f98); min-width: 58px; }
#btnSolid.on { border-color: #39ff6a; color: #39ff6a; }
#dHint { min-height: 1.2em; margin: 4px 0 0; color: #39ff6a; }

/* the call's Cover / Show my face button wears the room's face mark */
.pmsound .ic-face, .pmsound .ic-face:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8c0-2 2-4 8-4s8 2 8 4v3c0 5-3 8-8 9-5-1-8-4-8-9z' fill='none' stroke='%23e8e8e8' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='11' r='1.3' fill='%23e8e8e8'/%3E%3Ccircle cx='15' cy='11' r='1.3' fill='%23e8e8e8'/%3E%3Cpath d='M9.5 15.5c1.5 1 3.5 1 5 0' fill='none' stroke='%23e8e8e8' stroke-width='1.6'/%3E%3C/svg%3E"); }
.pmsound .ic-face.on { color: #39ff6a; }

/* draw: Zoom - the wall at twice the size, scroll around it */
.drawkit { overflow-x: auto; }
#btnZoom.on { border-color: #39ff6a; color: #39ff6a; }

/* DRAW TOGETHER: the room's shared wall in a big panel, and the Draw page without the site around it */
.drawpanel { position: fixed; z-index: 900; right: 12px; top: 70px; bottom: 12px; width: min(62vw, 980px); animation: drawslide .35s ease-out; display: flex; flex-direction: column;
  background: #0b0c0f; border: 1px solid rgba(57,255,106,.45); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.7); overflow: hidden; }
.drawpanel[hidden] { display: none; }
.drawpanel-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; color: #cfd4dc;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawpanel iframe { flex: 1; width: 100%; border: 0; background: #0b0c0f; }

body.drawembed nav.topbar, body.drawembed .topbar, body.drawembed footer, body.drawembed .bugbtn,
body.drawembed .band.top > .kicker, body.drawembed .band.top > h2, body.drawembed .band.top > .sub { display: none !important; }
body.drawembed main.inner { padding-top: 8px; }
.together-note { margin: 6px 0; color: #39ff6a; font-size: 13px; }

#btnSym.on { border-color: #39ff6a; color: #39ff6a; }
.dversions { background: #111; color: #cfd4dc; border: 1px solid rgba(255,255,255,.18); padding: 6px 8px; font: inherit; font-size: 12px; }
.dversions:hover { border-color: #39ff6a; }

@keyframes drawslide { from { transform: translateX(105%); } to { transform: none; } }
@media (max-width: 800px) { .drawpanel { left: 6px; right: 6px; width: auto; top: 56px; } }
body.drawembed .drawkit { padding: 8px; }
/* in the room's panel the wall comes first - you see the drawing without scrolling past the tools */
body.drawembed .drawkit { display: flex; flex-direction: column; }
body.drawembed .drawkit .wallbox { order: -1; }
body.drawembed .drawkit .together-note { order: -2; }
body.drawembed .band.top, body.drawembed main.inner { padding-top: 0 !important; margin-top: 0 !important; }
body.drawembed .drawkit .together-note { margin: 0 0 6px; }
/* STYLE pop-up: the colours and fonts stay inside the black box (Papa, 2026-09-27: "the colors need to move down in the black, not hang out") */
.stylepick { box-sizing: border-box; overflow: hidden; }
.stylepick .swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.stylepick .sw { min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 1; padding: 0 !important; box-sizing: border-box; }
.stylepick .fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stylepick .fo { min-width: 0 !important; box-sizing: border-box; overflow-wrap: anywhere; }
@media (min-width: 900px) { .stylepick { width: 400px; } }
/* a long font list scrolls inside the box instead of running off the screen */
.stylepick { overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 140px); }

/* ===== DRAWING TOOLS, dressed like Papa's sheet (2026-09-27): black glass pills, a picture square on the left,
   neon green on the one that is picked and under the mouse ===== */
.drawkit .tools { gap: 10px 14px; }
.drawkit .tool-row { gap: 8px; }
.drawkit .tbtn.hasico, .draw-acts #btnDown.hasico, .draw-acts #btnHang.hasico {
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px 0 5px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, #1b1d21 0%, #111215 55%, #0a0b0d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(0,0,0,.45);
  color: #e6e8ec; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: border-color .12s, box-shadow .12s, color .12s;
}
.drawkit .tbtn.hasico .dico, .draw-acts .hasico .dico { width: 34px; height: 34px; flex: none; display: block; border-radius: 9px; overflow: hidden; }
.drawkit .tbtn.hasico .dico img, .draw-acts .hasico .dico img { width: 100%; height: 100%; display: block; }
.drawkit .tbtn.hasico:hover, .drawkit .tbtn.hasico.on, .draw-acts .hasico:hover {
  border-color: #39ff6a; color: #fff;
  box-shadow: 0 0 0 1px rgba(57,255,106,.35), 0 0 16px rgba(57,255,106,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.hasico .dico .i-on { display: none !important; }
.drawkit .tbtn.hasico.on .dico .i-on, .drawkit .tbtn.hasico:hover .dico .i-on, .draw-acts .hasico:hover .dico .i-on { display: block !important; }
.drawkit .tbtn.hasico.on .dico .i-off, .drawkit .tbtn.hasico:hover .dico .i-off, .draw-acts .hasico:hover .dico .i-off { display: none !important; }
.drawkit .tbtn.hasico:hover, .drawkit .tbtn.hasico.on, .draw-acts .hasico:hover { background: linear-gradient(180deg, #0f2414 0%, #08160c 60%, #050d07 100%); }
/* the wall's frame: it scrolls when zoomed; the navigator and the lens sit over it */
.wallbox { position: relative; }
.wallwrap { overflow: auto; max-height: 80vh; border: 1px solid var(--edge); }
.wallwrap #wall { border: 0; max-width: none; }
.wallnav { position: absolute; right: 10px; top: 10px; width: 192px; height: 128px; border: 1px solid #39ff6a; border-radius: 6px; background: #0a0a0d; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.walllens { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px solid #39ff6a; pointer-events: none; box-shadow: 0 0 18px rgba(57,255,106,.4), 0 8px 24px rgba(0,0,0,.7); background: #0a0a0d; }
.wallnav[hidden], .walllens[hidden] { display: none; }
/* tighter tool buttons (Papa, 2026-09-27: "a lot of space in those buttons") */
.drawkit .tbtn.hasico, .draw-acts #btnDown.hasico, .draw-acts #btnHang.hasico { height: 36px; gap: 8px; padding: 0 12px 0 3px; border-radius: 11px; letter-spacing: .1em; font-size: 10.5px; }
.drawkit .tbtn.hasico .dico, .draw-acts .hasico .dico { width: 29px; height: 29px; border-radius: 8px; }
.drawkit .tool-row { gap: 6px; }
.drawkit .tools { gap: 6px 10px; }
/* THE TOOLS ON THE LEFT OF THE ARTWORK (Papa, 2026-09-27): a tool column beside the wall on a wide screen;
   on a phone they stay on top */
@media (min-width: 900px) {
  .drawkit, body.drawembed .drawkit {
    display: grid !important; grid-template-columns: 300px minmax(0, 1fr); column-gap: 14px; align-items: start;
  }
  .drawkit > .tools { grid-column: 1; grid-row: 1 / span 5; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    max-height: calc(100vh - 120px); overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--edge); position: sticky; top: 8px; }
  .drawkit > .tools .tool-row { flex-wrap: wrap; }
  .drawkit > .tools .trow-lbl { width: 100%; min-width: 0; margin-top: 4px; }
  .drawkit > :not(.tools) { grid-column: 2; }
  body.drawembed .drawkit .wallbox, body.drawembed .drawkit .together-note { order: 0; }
  .drawkit .wallwrap { max-height: calc(100vh - 170px); }
}

/* THE COLOUR DRAWER */
.drawkit .tbtn.cdbtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 4px; border-radius: 12px; width: 100%; max-width: 280px;
  border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, #1b1d21 0%, #111215 55%, #0a0b0d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(0,0,0,.45); color: #e6e8ec; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.drawkit .tbtn.cdbtn .dico { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex: none; }
.drawkit .tbtn.cdbtn .dico img { width: 100%; height: 100%; display: block; }
.drawkit .tbtn.cdbtn .i-on { display: none; }
.drawkit .tbtn.cdbtn:hover .i-on, .drawkit .tbtn.cdbtn.on .i-on { display: block; }
.drawkit .tbtn.cdbtn:hover .i-off, .drawkit .tbtn.cdbtn.on .i-off { display: none; }
.drawkit .tbtn.cdbtn:hover, .drawkit .tbtn.cdbtn.on { border-color: #39ff6a; box-shadow: 0 0 0 1px rgba(57,255,106,.35), 0 0 16px rgba(57,255,106,.45); }
.cdlbl { flex: 1; text-align: left; }
.cddot { width: 26px; height: 26px; border-radius: 50%; background: #efece6; box-shadow: inset 0 1px 2px rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.15); flex: none; }
.cdchev { font-size: 22px; line-height: 1; color: #cfd4dc; width: 12px; }
.cdpop { position: fixed; z-index: 80; display: grid; grid-template-columns: auto auto; gap: 12px 14px; padding: 16px;
  background: #0d0e11; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.7); }
.cdpop[hidden] { display: none; }
.cdpop .cdsw { display: grid; grid-template-columns: repeat(8, 34px); gap: 10px; }
.cdpop .swatch { width: 34px !important; height: 34px !important; }
.cdpop .cdx { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #15171b; color: #e6e8ec; font-size: 22px; cursor: pointer; align-self: start; }
.cdpop .cdx:hover { border-color: #39ff6a; color: #39ff6a; }
.cdcustom { grid-column: 1 / span 2; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #aeb3bb; }
.cdcustom span { flex: 1; }
#cdHex { width: 130px; background: #0a0b0d; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 10px; font: 14px/1 monospace; letter-spacing: .1em; }
#cdHex:focus { outline: none; border-color: #39ff6a; }
.cdpick { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #15171b; padding: 3px; cursor: pointer; }
.cdpick img { width: 100%; height: 100%; display: block; border-radius: 7px; }
.cdpick:hover { border-color: #39ff6a; }

/* ================= THE DRAWING STUDIO (Papa's picture, 2026-09-27) ================= */
.drawkit.studio-on { display: block !important; padding: 0 !important; background: #07080a; border-color: rgba(255,255,255,.08); }
.studio { display: flex; flex-direction: column; color: #e6e8ec; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.st-brand { display: flex; align-items: center; gap: 12px; letter-spacing: .28em; text-transform: uppercase; font-size: 13px; }
.st-brand img { width: 30px; height: 30px; }
.st-brand span { color: #8a8f98; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.15); font-size: 11px; }
.st-files { display: flex; gap: 8px; }
.st-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.st-bar .cdrawer .tbtn.cdbtn { width: auto; min-width: 190px; height: 40px; }
.st-slide { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #aeb3bb; }
.st-slide input[type=range] { width: 130px; accent-color: #39ff6a; }
.st-v, #dAlphaV { min-width: 52px; text-align: center; padding: 6px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: #0b0c0f; color: #e6e8ec; font-size: 12px; letter-spacing: .05em; }
.st-tip { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0b0c0f; display: inline-flex; align-items: center; justify-content: center; }
.st-tip i { display: block; border-radius: 50%; box-shadow: 0 0 10px rgba(255,255,255,.25); }
.st-group { display: inline-flex; align-items: center; gap: 6px; }
.st-sq { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #1b1d21, #0c0d0f); color: #e6e8ec; font-size: 20px; cursor: pointer; }
.st-sq:hover { border-color: #39ff6a; color: #39ff6a; box-shadow: 0 0 12px rgba(57,255,106,.35); }
.st-zv { min-width: 56px; text-align: center; font-size: 12px; }
.st-redo .dico img { transform: scaleX(-1); }
.st-main { display: grid; grid-template-columns: 160px 280px minmax(0, 1fr) 220px; min-height: 60vh; }
.st-main.panel-off { grid-template-columns: 160px 0 minmax(0, 1fr) 220px; }
.st-main.panel-off .st-panel { overflow: hidden; padding: 0; border: 0; }
.st-rail { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-right: 1px solid rgba(255,255,255,.08); }
.st-rail .st-railbtn { width: 100%; justify-content: flex-start; }
.st-rl { flex: 1; text-align: left; }
.st-chev { color: #8a8f98; font-size: 18px; }
.st-panel { display: flex; flex-direction: column; padding: 10px 12px; border-right: 1px solid rgba(255,255,255,.08); background: #0b0c0f; max-height: calc(100vh - 150px); overflow-y: auto; }
.st-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.st-ph .st-sq { width: 30px; height: 30px; font-size: 18px; }
.st-fam .tool-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.st-fam .tool-row .tbtn.hasico { width: 100%; padding-right: 6px; font-size: 10px; letter-spacing: .08em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-fam .tool-row select { grid-column: 1 / span 2; }
.st-opts { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.st-opts h5, .st-right h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #aeb3bb; font-weight: normal; }
.st-prev { width: 100%; height: 70px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; display: block; }
.st-mid { padding: 10px; min-width: 0; }
.st-mid .wallwrap { max-height: calc(100vh - 210px); }
.st-right { padding: 10px; border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; }
.st-right .wallnav { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.st-right .dversions { width: 100%; }
.st-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #cfd4dc; }
.st-s3.ok { color: #39ff6a; }
.st-status .draw-acts { margin: 0 0 0 auto; }
.studio-on #btnNav { display: none; }
@media (max-width: 1250px) { .st-main { grid-template-columns: 140px 250px minmax(0, 1fr); } .st-right { display: none; } }
/* the studio takes the whole width, and the old column grid does not apply to it */
body .drawkit.studio-on, body.drawembed .drawkit.studio-on { display: block !important; }
body .drawkit.studio-on > * { grid-column: auto; }
body.studio-page main.inner, body.studio-page .band.top { max-width: none !important; width: auto; padding-left: 12px; padding-right: 12px; }
body.studio-page .band.top > .kicker, body.studio-page .band.top > h2, body.studio-page .band.top > .sub { display: none; }

/* EFFECTS tiles + NEON OPTIONS + RULERS (Papa's Effects picture) */
.st-fam .tool-row.st-fx { grid-template-columns: 1fr 1fr; gap: 10px; }
.st-fam .tool-row.st-fx .tbtn.fxtile { height: 64px; padding: 0 10px 0 6px; gap: 10px; justify-content: flex-start; border-radius: 12px; }
.st-fam .tool-row.st-fx .tbtn.fxtile .dico.fxpic { width: 76px; height: 46px; border-radius: 8px; background: #050506; }
.st-fam .tool-row.st-fx .tbtn.fxtile .dico.fxpic img { object-fit: contain; }
.st-neon { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 4px; }
.st-neon[hidden] { display: none; }
.st-nrow { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #cfd4dc; }
.st-nrow input[type=range] { width: 100%; accent-color: #39ff6a; }
.st-nv { text-align: center; padding: 4px 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #0b0c0f; font-size: 11px; letter-spacing: 0; }
.st-ncols { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #cfd4dc; }
.st-nsw { width: 34px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: #0b0c0f; cursor: pointer; }
.st-ncols .stbtn { height: 34px; font-size: 9.5px; }
.st-cgrid { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 22px auto; }
.st-corner { background: #0b0c0f; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.st-rtop { grid-column: 2; display: block; border-bottom: 1px solid rgba(255,255,255,.08); }
.st-rleft { grid-column: 1; grid-row: 2; display: block; border-right: 1px solid rgba(255,255,255,.08); }
.st-cgrid .wallbox { grid-column: 2; grid-row: 2; min-width: 0; }

/* THE TEXT PANEL (Papa's picture) */
.st-text { display: flex; flex-direction: column; gap: 8px; }
.st-tk { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #aeb3bb; margin-bottom: 4px; }
.st-tcontent { width: 100%; box-sizing: border-box; background: #0a0b0d; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 8px 10px; font: 18px Georgia, serif; resize: vertical; }
.st-text select, .st-text input[type=number] { width: 100%; box-sizing: border-box; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.st-trow3 { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 6px; }
.st-trow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-tf { display: block; }
.st-tbtns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-tb { width: 34px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #1b1d21, #0c0d0f); color: #e6e8ec; font: 15px Georgia, serif; cursor: pointer; padding: 0; }
.st-tb svg { width: 18px; height: 18px; vertical-align: middle; }
.st-tb.on, .st-tb:hover { border-color: #39ff6a; color: #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.35); }
.st-tsep { width: 8px; }
.st-tline { display: flex; align-items: center; gap: 10px; }
.st-tline .st-tk { margin: 0; flex: 1; }
.st-tline select { width: 120px; }
.st-switch { width: 42px; height: 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: #2a2d33; position: relative; cursor: pointer; }
.st-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #cfd4dc; transition: left .15s; }
.st-switch.on { background: #1f9e45; border-color: #39ff6a; }
.st-switch.on::after { left: 21px; background: #fff; }
.st-tnote { margin: 0; font-size: 11px; color: #8a8f98; }
.st-more { border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #0d0e11; }
.st-more summary { padding: 8px 10px; cursor: pointer; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #cfd4dc; }
.st-more summary:hover { color: #39ff6a; }
.st-morein { padding: 4px 10px 8px; }
.st-addtext, .st-place { height: 40px; border-radius: 10px; border: 1px solid #39ff6a; background: linear-gradient(180deg, #0f2414, #06120a); color: #e6ffe9; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 12px rgba(57,255,106,.35); }
.st-place { border-color: rgba(255,255,255,.2); background: linear-gradient(180deg, #1b1d21, #0c0d0f); box-shadow: none; }
.st-place:hover { border-color: #39ff6a; }

/* THE COLOURING BOOK picker */
.cbook { position: fixed; z-index: 95; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); max-height: 86vh; overflow: auto;
  background: #0d0e11; border: 1px solid rgba(57,255,106,.45); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.8); padding: 14px; }
.cbook-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #e6e8ec; }
.cbook-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cbook-p { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #15171b; color: #cfd4dc; cursor: pointer; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cbook-p img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #fff; border-radius: 8px; }
.cbook-p:hover { border-color: #39ff6a; box-shadow: 0 0 14px rgba(57,255,106,.4); color: #fff; }
/* the pixel grid at high zoom */
.wallwrap { position: relative; }
.pixgrid { position: absolute; left: 0; top: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px); }
.pixgrid[hidden] { display: none; }

/* THE SHAPES PANEL (Papa's picture) */
.st-shapes { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.st-shapes h5 { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e6e8ec; font-weight: normal; }
.st-mode { display: flex; align-items: center; gap: 6px; }
.st-mode .st-tk { margin: 0 6px 0 0; }
.st-mb { flex: 1; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #1b1d21, #0c0d0f); color: #e6e8ec; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.st-mb.on, .st-mb:hover { border-color: #39ff6a; color: #fff; box-shadow: 0 0 10px rgba(57,255,106,.4); }
.st-wh { display: grid; grid-template-columns: auto 1fr auto auto 1fr; align-items: center; gap: 6px; }
.st-wh .st-tk { margin: 0; }
.st-wh input { width: 100%; box-sizing: border-box; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.st-lock { width: 34px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #15171b; cursor: pointer; }
.st-lock.on { border-color: #39ff6a; }
.st-tgl { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.st-tgl .st-tk { margin: 0; }
.st-sprev { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 6px 8px; }
.st-sprev canvas { width: 100%; height: 90px; display: block; }
/* the drawing wall, big: nearly the whole screen */
.drawpanel.big { left: 10px; right: 10px; top: 58px; bottom: 8px; width: auto; }
.drawpanel-hd .tbtn { margin-left: 6px; }
.drawpanel-hd span { flex: 1; }
/* the Draw page itself uses the whole window */
body.studio-page main.inner, body.studio-page .band.top { padding-left: 6px; padding-right: 6px; }
body.studio-page .st-mid .wallwrap { max-height: calc(100vh - 180px); }

/* FILL OPTIONS (Papa's picture) */
.st-fillo { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.st-fillo[hidden] { display: none; }
.st-fillo h5 { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e6e8ec; font-weight: normal; }
.st-fmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-fmodes .st-fmb { width: 100%; height: 44px; justify-content: flex-start; }
.st-fmodes .st-fmb .dico { width: 34px; height: 34px; }
.st-fcol { display: grid; grid-template-columns: 1fr 38px 90px 40px; align-items: center; gap: 6px; }
.st-fhex { width: 100%; box-sizing: border-box; background: #0a0b0d; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: 13px monospace; letter-spacing: .08em; }
.st-shades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #0b0c0f; }
.st-shade { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #cfd4dc; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.st-shade i { display: block; width: 100%; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); }
.st-shade:hover i { border-color: #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.4); }
.st-fsw { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-fprev { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 8px; }
.st-fprev canvas { width: 160px; height: 80px; border-radius: 8px; }
.st-fbtn { display: block; width: 100%; max-width: 280px; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px rgba(57,255,106,.5), 0 0 16px rgba(57,255,106,.35); }

.st-eto { display: flex; flex-direction: column; gap: 6px; }
.st-etog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-etog .st-mb { font-size: 9px; letter-spacing: .08em; padding: 0 2px; }
/* a see-through spot shows as a checker board on the wall */
#wall { background: #0a0a0d repeating-conic-gradient(#1c1e22 0% 25%, #111316 0% 50%) 0 0 / 16px 16px; }

/* LAYERS & MASKS (Papa's picture) */
.wallwrap { isolation: isolate; }
.wallwrap canvas.lyr { position: absolute; left: 0; top: 0; pointer-events: none; }
.st-layers { display: flex; flex-direction: column; gap: 8px; }
.st-lytop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.st-lytop select { width: 100%; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.st-lytop input[type=range] { width: 100%; accent-color: #39ff6a; }
.st-lylist { display: flex; flex-direction: column; gap: 6px; }
.st-lyrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, #17191d, #0c0d0f); cursor: pointer; }
.st-lyrow:hover { border-color: rgba(57,255,106,.5); }
.st-lyrow.on { border-color: #39ff6a; box-shadow: 0 0 12px rgba(57,255,106,.4); }
.st-lyeye, .st-lylock { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: #111316; color: #e6e8ec; cursor: pointer; font-size: 14px; }
.st-lyeye.off { color: #6b7078; }
.st-lylock.on { border-color: #39ff6a; }
.st-lyth { width: 54px; height: 36px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); flex: none; }
.st-lymask { width: 36px; height: 36px; cursor: pointer; }
.st-lymask.on { border: 2px solid #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.5); }
.st-lymask.off { opacity: .35; }
.st-lyname { flex: 1; font-size: 13px; color: #e6e8ec; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-lyren { flex: 1; min-width: 0; background: #0a0b0d; color: #fff; border: 1px solid #39ff6a; border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 13px; }
.st-lylink { font-size: 13px; opacity: .8; }
.st-lymsel { text-align: right; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #39ff6a; margin: -2px 6px 2px 0; }
.st-lyacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-lyact { height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #1b1d21, #0c0d0f); color: #e6e8ec; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.st-lyact:hover { border-color: #39ff6a; color: #fff; box-shadow: 0 0 10px rgba(57,255,106,.4); }
.st-mask { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.st-mask[hidden] { display: none; }
.st-mask h5 { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e6e8ec; font-weight: normal; }
.st-mcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-mcb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0f1013; color: #cfd4dc; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.st-mcb i { display: block; width: 100%; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); }
.st-mcb.on, .st-mcb:hover { border-color: #39ff6a; box-shadow: 0 0 10px rgba(57,255,106,.4); }

/* ZOOM & VIEW (Papa's picture) */
.st-view { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.st-view h5 { margin: 6px 0 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e6e8ec; font-weight: normal; }
.st-view .st-zsel { width: 100%; height: 48px; justify-content: flex-start; font-size: 12px; }
.st-view .st-trow2 .tbtn.hasico { width: 100%; }
.st-zpct { width: 64px; box-sizing: border-box; background: #0a0b0d; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 5px 6px; font: 12px monospace; text-align: center; }
.st-view .st-nrow { grid-template-columns: 50px 1fr 64px; }
.st-zpre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-view .wallnav.st-navbig { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; cursor: grab; }
.zsbox { position: fixed; z-index: 90; border: 2px dashed #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }
.zsbox[hidden] { display: none; }
.zsbox::after { content: attr(data-say); position: absolute; right: -8px; bottom: -34px; transform: translateX(100%); white-space: nowrap; background: #0b0c0f; color: #e6e8ec; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 3px 8px; font-size: 12px; }

/* CANVAS & MAT (Papa's picture) */
.st-canvas { display: flex; flex-direction: column; gap: 8px; }
.st-canvas h5 { margin: 6px 0 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e6e8ec; font-weight: normal; }
.st-canvas select { width: 100%; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.st-anchor { display: flex; align-items: center; gap: 16px; }
.st-anc { display: grid; grid-template-columns: repeat(3, 22px); gap: 6px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #0b0c0f; }
.st-ancb { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(255,255,255,.2); background: #17191d; cursor: pointer; padding: 0; }
.st-ancb.on { background: #39ff6a; border-color: #39ff6a; box-shadow: 0 0 8px rgba(57,255,106,.6); }
.st-mat { display: grid; grid-template-columns: repeat(4, 1fr) 36px; gap: 6px; align-items: end; }
.st-mat input { width: 100%; box-sizing: border-box; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px; font: inherit; font-size: 13px; }
.st-cinfo { margin: 0; font-size: 12px; color: #cfd4dc; }
.st-cinfo b { color: #39ff6a; font-weight: normal; }
.st-cframe { position: fixed; z-index: 70; border: 2px dashed #39ff6a; pointer-events: none; box-shadow: 0 0 14px rgba(57,255,106,.35); }
.st-cframe[hidden] { display: none; }
.st-cgrip { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; background: #fff; border: 2px solid #39ff6a; border-radius: 3px; pointer-events: auto; cursor: nwse-resize; }
.st-clabel { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #e6e8ec; background: rgba(11,12,15,.9); padding: 3px 8px; border-radius: 6px; }

/* SELECT & MOVE (Papa's picture) */
.st-select { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.st-select h5 { margin: 6px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #aeb3bb; font-weight: normal; }
.st-sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-sgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-select .st-sbtn { width: 100%; justify-content: flex-start; font-size: 9.5px; letter-spacing: .08em; padding-right: 6px; overflow: hidden; white-space: nowrap; }
.st-angle { width: 90px; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.wallwrap canvas.selov { pointer-events: none; }
.st-selapply { position: absolute; right: 18px; top: 12px; z-index: 6; display: flex; gap: 8px; padding: 8px; background: rgba(11,12,15,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.st-selapply[hidden] { display: none; }
.st-selapply button { height: 38px; padding: 0 14px; }

/* RECORD + SHOW MODE */
.recbtn { gap: 10px !important; padding-left: 14px !important; }
.recdot { width: 14px; height: 14px; border-radius: 50%; background: #c4452f; box-shadow: 0 0 6px rgba(255,60,60,.6); flex: none; }
.recbtn.recon { border-color: #ff3b3b !important; color: #fff !important; box-shadow: 0 0 14px rgba(255,60,60,.6) !important; }
.recbtn.recon .recdot { background: #ff3b3b; animation: recblink 1s steps(2) infinite; }
@keyframes recblink { 50% { opacity: .2; } }
.recbox { max-width: 560px; }
.rec-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rec-row .st-tk { width: 60px; margin: 0; }
.rec-row .st-mb { flex: none; padding: 0 10px; }
.rec-bar { height: 8px; border-radius: 4px; background: #15171b; overflow: hidden; margin: 8px 0; }
.rec-bar i { display: block; height: 100%; width: 0; background: #39ff6a; transition: width .2s; }
.recbox .st-addtext { width: 100%; margin-top: 6px; display: block; text-align: center; line-height: 40px; text-decoration: none; }
body.showmode .st-top, body.showmode .st-bar, body.showmode .st-rail, body.showmode .st-panel, body.showmode .st-right, body.showmode .st-status,
body.showmode .st-rtop, body.showmode .st-rleft, body.showmode .st-corner, body.showmode .together-note, body.showmode nav.topbar, body.showmode footer { display: none !important; }
body.showmode .st-main { grid-template-columns: 1fr !important; }
body.showmode .st-cgrid { grid-template-columns: 1fr; grid-template-rows: auto; }
body.showmode .st-cgrid .wallbox { grid-column: 1; grid-row: 1; }
body.showmode .st-mid .wallwrap { max-height: calc(100vh - 20px) !important; }
.showexit { position: fixed; right: 14px; top: 14px; z-index: 99; height: 38px; padding: 0 14px; opacity: .35; }
.showexit:hover { opacity: 1; }

/* TOUCH UP (Papa's picture) */
.st-touch { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.st-touch h5 { margin: 6px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #aeb3bb; font-weight: normal; }
.st-reset { height: 40px; width: 100%; }
.st-touchba { position: absolute; right: 16px; bottom: 16px; z-index: 6; display: flex; gap: 8px; padding: 8px; background: rgba(11,12,15,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; pointer-events: none; }
.st-touchba[hidden] { display: none; }
.st-baf { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e6e8ec; }
.st-baf canvas { width: 150px; height: 110px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; }
.st-brushcur { position: fixed; z-index: 60; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }
.st-brushcur[hidden] { display: none; }

/* RECORDING (Papa's picture) */
.st-record { display: flex; flex-direction: column; gap: 8px; }
.st-record h5 { margin: 6px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #aeb3bb; font-weight: normal; }
.st-record select { width: 100%; background: #0a0b0d; color: #e6e8ec; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.rp-level, .lb-level { display: flex; gap: 3px; flex: 1; }
.rp-level i, .lb-level i { display: block; flex: 1; height: 12px; border-radius: 2px; background: #22262b; }
.rp-level i.on, .lb-level i.on { background: #39ff6a; box-shadow: 0 0 6px rgba(57,255,106,.6); }
.st-recgo { height: 44px; width: 100%; }
.st-recgo.on { border-color: #ff3b3b; background: linear-gradient(180deg, #3a0d0d, #1a0606); box-shadow: 0 0 14px rgba(255,60,60,.5); }
.st-lastrec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.st-lastrec img { width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); }
.st-lrside { display: flex; flex-direction: column; gap: 6px; }
.st-lrside b { font-size: 16px; color: #e6e8ec; font-weight: normal; }
.st-lrside .st-place { height: 32px; font-size: 10px; text-align: center; line-height: 30px; text-decoration: none; padding: 0 6px; }
.livebar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(11,12,15,.94); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.livebar[hidden] { display: none; }
.lb-rec { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #e6e8ec; }
.lb-rec i { width: 12px; height: 12px; border-radius: 50%; background: #ff3b3b; animation: recblink 1s steps(2) infinite; }
.lb-rec b { grid-column: 1 / span 2; font-size: 26px; letter-spacing: .04em; font-weight: normal; }
.livebar .st-place { height: 40px; padding: 0 14px; }
.lb-sq { display: inline-block; width: 14px; height: 14px; background: #e03131; border-radius: 2px; vertical-align: -2px; }
.lb-level { width: 110px; flex: none; }
.lb-area { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #cfd4dc; }

/* HELP (Papa: "the tutors") */
.helpbtn { gap: 10px !important; padding-left: 8px !important; }
.helpq { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #39ff6a; color: #041008; font: bold 18px sans-serif; flex: none; box-shadow: 0 0 10px rgba(57,255,106,.5); }
.helpbox { max-width: 720px; }
.help-speak { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #cfd4dc; margin-bottom: 8px; }
.help-row { display: grid; grid-template-columns: 180px 1fr 130px; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #111316; margin-bottom: 8px; }
.help-t { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.help-d { font-size: 13px; color: #aeb3bb; }
.help-row .st-addtext { height: 38px; }
.helpring { position: fixed; z-index: 120; border: 3px solid #39ff6a; border-radius: 14px; box-shadow: 0 0 0 4000px rgba(0,0,0,.35), 0 0 22px rgba(57,255,106,.8); pointer-events: none; animation: helppulse 1.2s ease-in-out infinite; }
.helpring[hidden], .helpbub[hidden] { display: none; }
@keyframes helppulse { 50% { box-shadow: 0 0 0 4000px rgba(0,0,0,.35), 0 0 36px rgba(57,255,106,1); } }
.helpbub { position: fixed; z-index: 121; width: 320px; padding: 14px 16px 12px; background: #0d0e11; border: 1px solid #39ff6a; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.8); color: #e6e8ec; }
.helpbub b { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #39ff6a; font-weight: normal; margin-bottom: 6px; }
.helpbub p { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.hb-row { display: flex; align-items: center; gap: 8px; }
.hb-row .st-place, .hb-row .st-addtext { height: 36px; padding: 0 14px; }
.hb-n { flex: 1; text-align: center; font-size: 12px; color: #8a8f98; }
.hb-x { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: #8a8f98; font-size: 20px; cursor: pointer; }
.hb-x:hover { color: #fff; }

.helpbox { max-height: 88vh; overflow-y: auto; }
/* the Full screen button above the picture (Papa's red box) */
.st-midtop { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.st-midtop .together-note { margin: 0; }
.st-fsbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, #1b1d21, #0c0d0f); color: #e6e8ec; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; flex: none; }
.st-fsbtn svg { width: 20px; height: 20px; }
.st-fsbtn:hover, .st-fsbtn.on { border-color: #39ff6a; color: #39ff6a; box-shadow: 0 0 12px rgba(57,255,106,.45); }
body.studio-page:fullscreen, body:fullscreen { background: #07080a; }
body.showmode .st-midtop { position: fixed; left: 12px; top: 10px; z-index: 30; margin: 0; }
body.showmode .st-mid { padding-top: 52px; }

/* GRADIENT OPTIONS + AUTOSAVE */
.st-gbar { width: 100%; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); }
.st-gstops { display: flex; flex-direction: column; gap: 6px; }
.st-gstop { display: grid; grid-template-columns: 34px auto 1fr auto 1fr 30px; align-items: center; gap: 6px; }
.st-gstop .st-tk { margin: 0; font-size: 9px; }
.st-gstop input[type=range] { width: 100%; accent-color: #39ff6a; }
.st-gstop .st-sq { width: 30px; height: 30px; font-size: 16px; }
.st-place.on { border-color: #39ff6a; color: #39ff6a; }
.autobar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(11,12,15,.95); border: 1px solid #39ff6a; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.7); color: #e6e8ec; font-size: 14px; }
.autobar button { height: 38px; padding: 0 14px; }

/* EXPORT */
.expbox { max-width: 560px; }
.exp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.exp-row .st-tk { width: 92px; margin: 0; }
.exp-row .st-mb { flex: none; padding: 0 12px; }
.exp-row input[type=range] { flex: 1; accent-color: #39ff6a; }
.exp-dim { font-size: 12px; color: #39ff6a; margin-left: 6px; }
.exp-name { flex: 1; background: #0a0b0d; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 10px; font: inherit; }
.exp-go { width: 100%; height: 44px; margin-top: 8px; display: block; }

/* DRAW TOGETHER name tags */
.dt-tag { position: fixed; z-index: 60; transform: translate(-50%, -130%); pointer-events: none; opacity: 0; transition: opacity .3s, left .25s, top .25s;
  background: hsl(var(--h, 140), 80%, 45%); color: #fff; font: 700 12px/1 system-ui, sans-serif; padding: 5px 9px; border-radius: 10px 10px 10px 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); white-space: nowrap; }
.dt-tag.on { opacity: 1; }
.st-s3[data-who]::after { content: ' • ' attr(data-who); color: #39ff6a; }

/* DRAW TOGETHER: Only me */
.dt-onlyme { position: fixed; right: 14px; bottom: 14px; z-index: 70; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(57,255,106,.5);
  background: #0d1510; color: #39ff6a; font: 700 14px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.dt-onlyme:hover { background: #143020; }
.dt-onlyme[data-mode=mine] { background: #39ff6a; color: #06140a; }
.dt-onlyme[data-mode=other] { border-color: rgba(255,120,120,.6); color: #ff9a9a; background: #1a0d0d; }
.dt-onlyme.shake { animation: dtShake .4s; }
@keyframes dtShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
body.dt-held #wall { cursor: not-allowed; }

/* TURN THE CANVAS: every sheet of the picture turns together, around its middle */
#wallWrap.turned > canvas, #wallWrap.turned > .pixgrid { transform: rotate(var(--turn, 0deg)); transform-origin: 50% 50%; }

/* ADJUSTMENTS */
.st-adjust .st-looks { flex-wrap: wrap; }
.st-adjust .st-looks .st-mb { flex: 1 1 30%; }
.st-adjbar { display: flex; gap: 8px; margin: 12px 0 4px; opacity: .45; transition: opacity .2s; }
.st-adjbar.live { opacity: 1; }
.st-adjbar button { flex: 1; height: 40px; }
.roompop .roomgo { margin: 0 0 10px; }

/* THE HOUSE COUNTER: the version is its own button now (it used to ride on the ladybug and open a bug report) */
.bugbtn::after { display: none !important; }
.verbadge { flex: 0 0 auto; margin-left: 10px; padding: 5px 9px; font: 700 12px/1 var(--mono); letter-spacing: .08em; color: #6fbf7a; background: #0b0c0f;
  border: 1px solid rgba(111, 191, 122, .45); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.verbadge:hover { color: #0b0c0f; background: #6fbf7a; }
.vercard { position: fixed; z-index: 120; width: 290px; max-width: calc(100vw - 16px); padding: 16px 16px 12px; background: #0b0c0f; color: #e6e8ec;
  border: 1px solid rgba(111, 191, 122, .55); border-radius: 12px; box-shadow: 0 16px 44px rgba(0, 0, 0, .65); font-family: system-ui, sans-serif; }
.vercard .vc-h { font: 700 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #6fbf7a; margin-bottom: 12px; }
.vercard .vc-s { color: #9aa0a6; font-size: 13px; }
.vercard .vc-big { display: flex; flex-direction: column; margin-bottom: 12px; }
.vercard .vc-big b { font-size: 34px; line-height: 1.05; color: #fff; letter-spacing: -.01em; }
.vercard .vc-big span { font-size: 12px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .14em; margin-top: 2px; }
.vercard .vc-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.vercard .vc-row span { color: #9aa0a6; }
.vercard .vc-kinds { margin-top: 8px; font-size: 11px; color: #7c828a; line-height: 1.5; }
.vercard .vc-f { margin-top: 10px; font-size: 12px; color: #6fbf7a; }

/* the badge sits beside the ladybug and takes no room in the menu row (Papa: "keep it by the ladybug") */
.bugwrap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.bugwrap .verbadge { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 8px; z-index: 5; }

/* gradient: numbered colours and one-press looks */
.st-gnum { width: 16px; font: 700 11px/1 var(--mono, monospace); color: #6fbf7a; text-align: center; flex: none; }
.st-glooks { flex-wrap: wrap; margin: 8px 0; }
.st-glooks .st-mb { flex: 1 1 22%; }

/* the time-lapse's recording sign sits at the top of the picture, out of the way of the drawing hand */
.livebar.lapsebar { bottom: auto; top: 14px; padding: 7px 10px; gap: 10px; }
.livebar.lapsebar .st-place { height: 34px; }
.livebar.lapsebar .lb-area { font-size: 12px; color: #c9ccd1; }

/* the recording sign in the right-hand column, under Save version */
.livebar.in-side, .livebar.lapsebar.in-side { position: static; transform: none; left: auto; top: auto; bottom: auto; width: 100%; box-sizing: border-box;
  flex-wrap: wrap; gap: 8px; padding: 12px; margin-top: 6px; border-color: rgba(255, 59, 59, .45); box-shadow: none; }
.livebar.in-side .lb-rec { width: 100%; }
.livebar.in-side .st-place { flex: 1 1 40%; }
.livebar.in-side .lb-level { width: 100%; }
.livebar.in-side .lb-area { width: 100%; font-size: 11px; line-height: 1.4; }

/* Before / After and Only me in the right-hand column */
.st-touchba.in-side { position: static; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; }
.st-touchba.in-side .st-baf canvas { width: 100%; height: auto; }
.dt-onlyme.in-side { position: static; width: 100%; margin-top: 6px; }

/* the video is ready */
.recbox.livedone { max-width: 560px; }
.recbox.livedone .ld-video { width: 100%; max-height: 52vh; background: #000; border-radius: 10px; display: block; margin: 6px 0 10px; }
.recbox.livedone .ld-save, .recbox.livedone .ld-speed { display: block; width: 100%; height: 44px; line-height: 44px; margin-top: 8px; text-align: center; box-sizing: border-box; }

/* PRINT & BUSINESS */
.wallwrap canvas.printov { pointer-events: none; }
.st-printgrid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0; }
.st-printbtn { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #0f1114; color: #e6e8ec; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; cursor: pointer; text-align: left; }
.st-printbtn:hover { border-color: rgba(57,255,106,.5); }
.st-printbtn.on { border-color: #39ff6a; box-shadow: 0 0 0 1px #39ff6a inset; }
.st-printbtn .st-pv { flex: none; display: inline-block; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); margin: 0 auto; }
.st-printbtn > .st-pv { margin: 0; min-width: 12px; }
.st-printbtn .st-pt { display: flex; flex-direction: column; line-height: 1.25; }
.st-printbtn .st-pt b { font-size: 13px; font-weight: 600; }
.st-printbtn .st-pt small { font-size: 11px; color: #9aa0a6; }
.st-printnow .st-addtext, .st-printnow .st-place { display: block; width: 100%; margin-top: 8px; min-height: 40px; }
.st-printkey { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 11px; color: #c9ccd1; }
.st-printkey i { display: inline-block; width: 18px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.st-printkey .k-bleed { background: rgba(255,60,60,.45); }
.st-printkey .k-trim { border-top: 2px dashed #fff; height: 0; }
.st-printkey .k-safe { border-top: 2px dotted #39ff6a; height: 0; }

/* BUSINESS PRINT STUDIO */
.biz-tabs { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.08); }
.biz-tab { flex: 1 0 auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: #0f1114; color: #e6e8ec; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; cursor: pointer; font: 600 12px/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.biz-tab .bt-i { font-size: 22px; letter-spacing: 0; }
.biz-tab:hover { border-color: rgba(57,255,106,.5); }
.biz-tab.on { border-color: #39ff6a; box-shadow: 0 0 0 1px #39ff6a inset, 0 0 18px rgba(57,255,106,.25); }
.st-brandkit .bk-logo { width: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #0f1114; color: #c9ccd1; border: 1px dashed rgba(255,255,255,.25); border-radius: 10px; cursor: pointer; margin-bottom: 8px; }
.st-brandkit .bk-logo img { max-width: 80%; max-height: 90px; }
.st-brandkit .exp-name { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.bk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.bk-col { display: flex; flex-direction: column; gap: 4px; }
.bk-col input[type=color] { width: 100%; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: none; padding: 0; cursor: pointer; }
.bk-use { font: 600 10px/1 var(--mono, monospace); color: #c9ccd1; background: #0f1114; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 5px 2px; cursor: pointer; }
.st-brandkit .st-addtext, .st-brandkit .st-place, .st-upload .st-addtext, .st-upload .st-place, .st-qr .st-addtext { display: block; width: 100%; min-height: 40px; margin-top: 8px; }
.bg-sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.bg-c { height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.bg-c:hover { outline: 2px solid #39ff6a; }
.st-qr .exp-name { width: 100%; box-sizing: border-box; margin: 6px 0; }
.st-qr .qr-prev { display: block; margin: 8px auto; background: repeating-conic-gradient(#2a2d33 0 25%, #15171b 0 50%) 0 0 / 14px 14px; border-radius: 6px; image-rendering: pixelated; }

/* CARD MAKER */
.st-cardmaker .cm-in { width: 100%; box-sizing: border-box; margin-bottom: 5px; padding: 7px 9px; font-size: 13px; }
.st-cardmaker .st-place, .st-cardmaker .st-addtext { display: block; width: 100%; min-height: 40px; margin-top: 8px; }
.cm-sides .st-mb { flex: 1; }
.cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-style { display: flex; flex-direction: column; gap: 5px; padding: 5px; background: #0f1114; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; color: #c9ccd1; font: 600 10px/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.cm-style canvas { width: 100%; height: auto; border-radius: 3px; background: #222; }
.cm-style:hover { border-color: rgba(57,255,106,.5); }
.cm-style.on { border-color: #39ff6a; box-shadow: 0 0 0 1px #39ff6a inset; color: #39ff6a; }

/* SAVE MY NAME (2026-09-28): a tag inside the name box - "Claimed" (green) or "Unclaimed - save my name" (gold) */
.namebox .nameclaim { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; padding: 4px 10px; border-radius: 8px; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.namebox .nameclaim.is-open { border: 1px solid #c9a227; background: rgba(201,162,39,.16); color: #ffd965; animation: claimGlow 2.4s ease-in-out infinite; }
.namebox .nameclaim.is-claimed { border: 1px solid rgba(111,191,122,.6); background: rgba(111,191,122,.14); color: #6fbf7a; }
.namebox .nameclaim:hover { filter: brightness(1.25); }
.namebox .nameclaim[hidden] { display: none; }
.namebox.has-tag input { padding-right: 130px !important; }
@keyframes claimGlow { 50% { box-shadow: 0 0 10px rgba(201,162,39,.55); } }
@media (max-width: 700px) { .namebox .nameclaim { font-size: 10px; padding: 3px 7px; } .namebox.has-tag input { padding-right: 110px !important; } }

/* DRAW NOW on the art wall (Papa, 2026-09-28: "a link on that page - draw now - they click and it opens the drawing program") */
.drawnow { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: linear-gradient(135deg, #37c8a0, #1fb5b5); color: #06221a !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; text-decoration: none; box-shadow: 0 6px 18px rgba(55,200,160,.3); vertical-align: middle; }
.drawnow:hover { filter: brightness(1.1); transform: translateY(-1px); }
.piece.plus.drawplus .plusmark { font-size: 40px; }

/* FULL SCREEN TOOL STRIP (draw.php, 2026-09-28): the main tools in the empty band above the picture */
.fs-tools { display: none; }
body.showmode .fs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: fixed; top: 10px; left: 250px; right: 16px; z-index: 31; padding: 6px 10px; background: rgba(12,13,16,.92); border: 1px solid rgba(239,236,230,.12); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
body.showmode .st-mid { padding-top: 70px; }
.fs-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-right: 8px; border-right: 1px solid rgba(239,236,230,.12); }
.fs-grp:last-child { border-right: 0; }
.fs-b { background: #16181d; color: #d9d5cc; border: 1px solid rgba(239,236,230,.14); border-radius: 8px; padding: 5px 9px; font: 600 12px/1.2 inherit; cursor: pointer; }
.fs-b:hover { border-color: #6fbf7a; color: #fff; }
.fs-b.on { background: #1f3a26; border-color: #6fbf7a; color: #bff0cf; }
.fs-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(239,236,230,.25); cursor: pointer; padding: 0; }
.fs-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #6fbf7a; }
.fs-any { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) !important; color: #000; font-weight: 800; font-size: 13px; line-height: 16px; }
.fs-size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b9b3a6; } .fs-size input { width: 110px; } .fs-size b { min-width: 24px; color: #e8e2d4; }
@media (max-width: 1100px) { body.showmode .fs-tools { left: 12px; top: 58px; } body.showmode .st-mid { padding-top: 130px; } }
/* full screen: the page's own top room (for the site menu and the title) goes too, so the picture starts under the strip */
body.showmode main.inner, body.showmode .inner { padding-top: 0 !important; }
body.showmode .band.top { padding-top: 0 !important; margin-top: 0 !important; }
body.showmode .band.top > .kicker, body.showmode .band.top > h2, body.showmode .band.top > p.sub { display: none !important; }
.fs-b.fs-rec { color: #ff8a80; border-color: rgba(255,90,80,.45); }
.fs-b.fs-rec.recon { background: #b3261e; color: #fff; border-color: #ff5a50; animation: recBlink 1.2s infinite; }
@keyframes recBlink { 50% { opacity: .7; } }

/* ROOM HOST hammer (2026-09-28): whoever opened the room, or teaches in it */
.rank.bronze { color: #d0925f; border-color: rgba(208, 146, 95, .5); background: rgba(208, 146, 95, .1); }

/* THE STOCK DESK (2026-09-28): a Stocks room's ticker lookup, the board's mini charts and one big chart */
.stockdesk { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(239,236,230,.14); border-radius: 12px; background: #0b0c0f; }
.stockdesk .sdtop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.stockdesk .sdtop b { font-size: 14px; letter-spacing: .04em; }
.stockdesk .sdtop input { flex: 1; min-width: 180px; max-width: 320px; background: #050506; color: #efece6; border: 1px solid rgba(239,236,230,.2); border-radius: 8px; padding: 8px 10px; font: 600 15px/1.2 var(--mono, monospace); text-transform: uppercase; }
.stockdesk .sdminis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 10px; }
.stockdesk .sdmini { position: relative; height: 230px; border: 1px solid rgba(239,236,230,.1); border-radius: 10px; overflow: hidden; }
.stockdesk .sdopen { position: absolute; right: 8px; bottom: 6px; z-index: 2; background: rgba(5,5,6,.8); color: #9fe0b0; border: 1px solid rgba(111,191,122,.5); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.stockdesk .sdbig { height: 460px; border-radius: 10px; overflow: hidden; }
.stockdesk .sdnote { margin: 6px 0 0; font-size: 12px; color: #8f8b84; }
.stockdesk.off .sdminis, .stockdesk.off .sdbig { display: none; }
@media (max-width: 700px) { .stockdesk .sdbig { height: 360px; } }
.stockdesk .sdlaw { border-left: 3px solid #c9a227; padding: 6px 10px; background: rgba(201,162,39,.06); color: #cfc8b8; line-height: 1.45; }

/* the tape, the movers panel, a shared chart card and its zoom (2026-09-28) */
.stockdesk .sdtape { height: 46px; margin: -2px 0 10px; border-bottom: 1px solid rgba(239,236,230,.1); overflow: hidden; }
.stockdesk .sdpanel { height: 520px; margin-bottom: 10px; border: 1px solid rgba(239,236,230,.1); border-radius: 10px; overflow: hidden; }
.stockdesk .sdpanel[hidden] { display: none; }
.chartcard { position: relative; width: 360px; max-width: 100%; height: 250px; margin: 8px 0 4px; border: 1px solid rgba(111,191,122,.35); border-radius: 12px; overflow: hidden; background: #0b0c0f; }
.chartcard .chartzoom { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 3; background: transparent; border: 0; color: transparent; cursor: zoom-in; }
.chartcard .chartzoom:hover, .chartcard .chartzoom:focus { background: linear-gradient(transparent 70%, rgba(5,5,6,.85)); color: #9fe0b0; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.chartover { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 18px; }
.chartoverbox { width: min(1200px, 100%); height: min(760px, 100%); background: #0b0c0f; border: 1px solid rgba(239,236,230,.2); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.chartoverhd { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(239,236,230,.1); } .chartoverhd span { margin-right: auto; font-size: 12px; color: #c9a227; }
.chartoverarea { flex: 1; min-height: 0; } .chartoverarea .tradingview-widget-container { height: 100% !important; }

/* my stock picks in the Stocks room (2026-09-28) */
.stockdesk .sdpanel.sdpicks { height: auto; min-height: 0; padding: 10px 12px; }
.stockdesk .pkhd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .stockdesk .pkhd b { margin-right: auto; color: #e6c34a; }
.stockdesk .pkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.stockdesk .pkrow { display: flex; gap: 6px; align-items: center; border: 1px solid rgba(239,236,230,.1); border-radius: 10px; padding: 6px 8px; }
.stockdesk .pksym { margin-right: auto; background: none; border: 0; color: #e6c34a; font: 700 16px/1.2 var(--mono, monospace); cursor: pointer; padding: 2px 4px; }
.stockdesk a.tbtn { text-decoration: none; display: inline-flex; align-items: center; }

/* Show the room: the host's chart on every screen (2026-09-28) */
.stockdesk .sdshow.on { border-color: #d0604f; color: #ffb3a8; box-shadow: 0 0 0 1px rgba(208,96,79,.4) inset; }
.stockdesk .sdroomnote { color: #ffb3a8; font-weight: 600; margin: 0 0 6px; }

/* movers, and why, in the Stocks room (2026-09-28) */
.stockdesk .mvlist { max-height: 520px; overflow-y: auto; }
.stockdesk .mvrow { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid rgba(239,236,230,.07); }
.stockdesk .mvrow .pksym { margin: 0; min-width: 76px; text-align: left; }
.stockdesk .mvname { flex: 1; min-width: 0; color: #a9a49b; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stockdesk .mvp { font: 600 14px/1 var(--mono, monospace); } .stockdesk .mvc { font: 700 14px/1 var(--mono, monospace); min-width: 64px; text-align: right; } .stockdesk .mvc.up { color: #7fd48f; } .stockdesk .mvc.dn { color: #f08a7e; }
.stockdesk .mvwhy { padding: 6px 10px 10px 86px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .stockdesk .mvwhy a { color: #8ec5ff; text-decoration: none; } .stockdesk .mvwhy a.mvboard { color: #e6c34a; }
.stockdesk .pkhd .tbtn.on { border-color: #6fbf7a; color: #9fe0b0; }
@media (max-width: 700px) { .stockdesk .mvname { display: none; } .stockdesk .mvwhy { padding-left: 10px; } }

/* the order book (level 2 for coins) in the Stocks room (2026-09-28) */
.stockdesk .bookgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stockdesk .bookh { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8f8b84; margin-bottom: 4px; }
.stockdesk .bookrow { position: relative; display: flex; justify-content: space-between; padding: 3px 8px; font: 600 13px/1.3 var(--mono, monospace); }
.stockdesk .bookrow::before { content: ''; position: absolute; top: 1px; bottom: 1px; width: var(--w); border-radius: 3px; z-index: 0; }
.stockdesk .bookrow span { position: relative; z-index: 1; }
.stockdesk .bookcol.bid .bookrow { color: #9fe0b0; } .stockdesk .bookcol.bid .bookrow::before { right: 0; background: rgba(88,184,106,.18); }
.stockdesk .bookcol.ask .bookrow { color: #ffb3a8; } .stockdesk .bookcol.ask .bookrow::before { left: 0; background: rgba(208,96,79,.18); }
.stockdesk .bookspread { grid-column: 1 / -1; text-align: center; }

/* the board strip in a Stocks room: little line, price, today / week / year high and low (2026-09-28) */
.motionbar .bstrip { display: flex; flex-wrap: wrap; gap: 8px 18px; flex: 1 1 100%; margin-top: 6px; }
.motionbar .bcell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 10px; border: 1px solid rgba(239,236,230,.12); border-radius: 10px; background: rgba(5,5,6,.5); font-size: 13px; }
.motionbar .bcell b { color: #e6c34a; font: 700 14px/1 var(--mono, monospace); }
.motionbar .bspark { width: 90px; height: 26px; }
.motionbar .bpr { font: 700 14px/1 var(--mono, monospace); color: #efece6; } .motionbar .bpr i { font-style: normal; } .motionbar .bpr i.up { color: #7fd48f; } .motionbar .bpr i.dn { color: #f08a7e; }
.motionbar .brng { color: #cfc8b8; font: 500 12px/1 var(--mono, monospace); white-space: nowrap; } .motionbar .brng em { font-style: normal; color: #8f8b84; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }

/* the board strip sits in the bar's empty space, with News and Forum (2026-09-28) */
.motionbar .bstrip { flex: 1 1 420px; margin-top: 0; min-width: 0; }
.motionbar .bbtn { background: rgba(5,5,6,.6); border: 1px solid rgba(230,195,74,.45); color: #e6c34a; border-radius: 8px; padding: 3px 9px; font-size: 12px; cursor: pointer; text-decoration: none; }
.motionbar .bbtn:hover { background: rgba(230,195,74,.12); }
.motionbar .bnews { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 10px 12px; border-top: 1px solid rgba(239,236,230,.1); font-size: 14px; line-height: 1.45; }
.motionbar .bnews p { margin: 0; color: #cfc8b8; } .motionbar .bnews a { color: #8ec5ff; text-decoration: none; } .motionbar .bnews a.bforum { color: #e6c34a; font-weight: 700; }

/* Share the board: a link, a website embed and forum code that bring people into the room (2026-09-28) */
.motionbar .bshare { background: #e6c34a; color: #111; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 12px; letter-spacing: .06em; cursor: pointer; text-transform: uppercase; }
.motionbar .bsharepop { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border-top: 1px solid rgba(239,236,230,.1); }
.motionbar .bsharepic { width: 100%; max-width: 420px; border-radius: 10px; border: 1px solid rgba(239,236,230,.15); }
.motionbar .bsharerow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .motionbar .bsharerow span { min-width: 260px; font-size: 13px; color: #cfc8b8; }
.motionbar .bsharerow input { flex: 1; min-width: 200px; background: #050506; color: #efece6; border: 1px solid rgba(239,236,230,.25); border-radius: 8px; padding: 6px 8px; font: 12px/1.3 var(--mono, monospace); }
.motionbar .bsharepop p { margin: 0; font-size: 12px; color: #8f8b84; }
/* the mailbox: whose words they are, in a colour you can read (Papa, 2026-09-28: "I can't see who is who, they are black") */
.mailwrap .mailrow b, .mailrow b { color: #efece6 !important; font-size: 14px; letter-spacing: .03em; opacity: 1 !important; }
.mailwrap .mailrow.unread b, .mailrow.unread b { color: #7fd48f !important; }
/* on a call, moving rooms asks first (2026-09-28) */
.keepcall { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.keepcallbox { max-width: 440px; width: 100%; background: #0b0c0f; border: 1px solid rgba(239,236,230,.2); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.keepcallbox b { font-size: 18px; color: #efece6; } .keepcallbox p { margin: 0 0 4px; color: #cfc8b8; line-height: 1.45; }
.keepcallbox button { border-radius: 10px; padding: 12px 14px; font: 700 15px/1.2 inherit; cursor: pointer; text-align: left; }
.keepcallbox .keepyes { background: #6fbf7a; color: #0b0c0f; border: 0; }
.keepcallbox .keepend { background: transparent; color: #f08a7e; border: 1px solid rgba(240,138,126,.5); }
.keepcallbox .keepstay { background: transparent; color: #efece6; border: 1px solid rgba(239,236,230,.25); }
/* labels over the board's charts and your own chart (2026-09-29) */
.stockdesk .sdlabel { margin: 10px 0 6px; font: 700 12px/1.2 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #e6c34a; }
.stockdesk.off .sdlabel { display: none; }
/* the AI Newsroom desk and the AI TV in an AI Tech room (2026-09-29) */
.aidesk .ailist { max-height: 460px; overflow-y: auto; }
.aidesk .airow { position: relative; padding: 9px 70px 9px 2px; border-top: 1px solid rgba(239,236,230,.07); }
.aidesk .ait { color: #efece6; font-weight: 700; text-decoration: none; font-size: 15px; line-height: 1.35; } .aidesk .ait:hover { color: #9fe0b0; }
.aidesk .aimeta { color: #8f8b84; font-size: 12px; margin-top: 2px; } .aidesk .aix { color: #b9b3a8; font-size: 13px; margin-top: 3px; line-height: 1.4; }
.aidesk .aishare { position: absolute; right: 2px; top: 10px; background: none; border: 1px solid rgba(111,191,122,.5); color: #9fe0b0; border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.aidesk .aiwarn { border-left: 3px solid #d0604f; padding-left: 10px; }
.aidesk .airace { display: grid; grid-template-columns: 96px 1fr 84px; gap: 10px; align-items: center; padding: 8px 2px 0; } .aidesk .airace b { color: #e6c34a; }
.aidesk .aibarw { height: 12px; background: rgba(239,236,230,.07); border-radius: 6px; overflow: hidden; } .aidesk .aibarw i { display: block; height: 100%; background: linear-gradient(90deg, #58b86a, #e6c34a); }
.aidesk .airace span:last-child { color: #cfc8b8; font-size: 12px; text-align: right; }
.aidesk .tbtn.on { border-color: #6fbf7a; color: #9fe0b0; }
.aidesk.off .ailist, .aidesk.off .sdnote { display: none; }
.aitv { margin: 0 0 10px; border: 1px solid rgba(230,195,74,.45); border-radius: 10px; overflow: hidden; background: #050506; }
.aitvhd { display: flex; align-items: center; gap: 4px; padding: 5px 6px; } .aitvhd b { font-size: 11px; letter-spacing: .08em; color: #e6c34a; margin-right: auto; font-family: var(--mono, monospace); }
.aitvhd button { background: none; border: 1px solid rgba(239,236,230,.2); color: #cfc8b8; border-radius: 6px; padding: 1px 7px; font-size: 11px; cursor: pointer; } .aitvhd button.on { border-color: #6fbf7a; color: #9fe0b0; }
.aitvscr { aspect-ratio: 16 / 9; background: #000; } .aitvscr iframe { width: 100%; height: 100%; border: 0; display: block; }
.aitvnow { margin: 0; padding: 5px 7px 7px; font-size: 11px; line-height: 1.35; color: #b9b3a8; }
.aitv.off .aitvscr { display: none; }
.aidesk .aisech { margin: 14px 0 4px; font: 700 13px/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #e6c34a; }
.aidesk .aisech { margin: 14px 0 4px; font: 700 13px/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: #e6c34a; }
.aidesk .aistock { display: grid; grid-template-columns: 70px 1fr 80px 110px 110px 110px; gap: 8px; align-items: center; padding: 7px 2px; border-top: 1px solid rgba(239,236,230,.07); font: 600 13px/1.2 var(--mono, monospace); }
.aidesk .aistock a { color: #e6c34a; text-decoration: none; font-weight: 800; } .aidesk .aistock .ain { color: #b9b3a8; font-weight: 500; } .aidesk .aistock .up { color: #7fd48f; } .aidesk .aistock .dn { color: #f08a7e; }
@media (max-width: 800px) { .aidesk .aistock { grid-template-columns: 64px 1fr 80px 1fr; } .aidesk .aistock span:nth-child(5), .aidesk .aistock span:nth-child(6) { display: none; } }
/* TV left, news right (Papa's drawing, 2026-09-29) */
.aidesk .aigrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.aidesk .aitvcol .aitv { margin: 0; } .aidesk .aitvcol .aitvhd b { font-size: 13px; } .aidesk .aitvcol .aitvnow { font-size: 12px; }
.aidesk .ainewscol .ailist { max-height: 420px; }
.aidesk.off .aigrid { display: none; }
@media (max-width: 900px) { .aidesk .aigrid { grid-template-columns: 1fr; } }
/* headlines are buttons that drop the story into the room (2026-09-29) */
.aidesk button.ait { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: #efece6; font: 700 15px/1.35 inherit; }
.aidesk button.ait:hover { color: #9fe0b0; text-decoration: underline; }
.aidesk .airead { color: #8ec5ff; text-decoration: none; } .aidesk .aidropped { background: rgba(111,191,122,.06); }
/* stock news under the AI TV (2026-09-29) */
.aidesk .aistockmini { margin-top: 10px; }
.aidesk .aistockmini .aisech { margin-top: 4px; }
.aidesk .aismgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.aidesk .aismcell { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid rgba(239,236,230,.1); border-radius: 8px; text-decoration: none; font: 600 12px/1.2 var(--mono, monospace); color: #cfc8b8; }
.aidesk .aismcell:hover { border-color: rgba(230,195,74,.5); } .aidesk .aismcell b { color: #e6c34a; font-size: 13px; }
.aidesk .aismcell i { font-style: normal; } .aidesk .aismcell i.up { color: #7fd48f; } .aidesk .aismcell i.dn { color: #f08a7e; }
.aidesk .aistockmini .airow { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 600px) { .aidesk .aismgrid { grid-template-columns: repeat(3, 1fr); } }
/* the news scan: NEW and already-seen (2026-09-29) */
.aidesk .ainewtag { display: inline-block; margin: 0 6px 2px 0; padding: 1px 6px; border-radius: 5px; background: #6fbf7a; color: #0b0c0f; font: 800 10px/1.4 var(--mono, monospace); letter-spacing: .06em; vertical-align: middle; }
.aidesk .airow.ainew { background: rgba(111,191,122,.07); }
.aidesk .airow.aiseen .ait { color: #9a958c; font-weight: 600; } .aidesk .airow.aiseen .aix { opacity: .6; }
.aidesk .aiscan { font: 600 11px/1 var(--mono, monospace); color: #8f8b84; margin-left: auto; }
/* the news search (2026-09-29) */
.aidesk .aisearch { display: flex; gap: 8px; margin: 0 0 10px; }
.aidesk .aisearch input { flex: 1; min-width: 0; background: #050506; color: #efece6; border: 1px solid rgba(239,236,230,.25); border-radius: 10px; padding: 9px 12px; font-size: 15px; }
.aidesk .aisearchhd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 2px 8px; } .aidesk .aisearchhd b { color: #e6c34a; }
/* the date, and the world map of AI news (2026-09-29) */
.aidesk .aidate { font: 600 12px/1 var(--mono, monospace); color: #cfc8b8; letter-spacing: .04em; }
.aidesk .aimap { margin: 4px 0 6px; } .aidesk .aimapsvg { width: 100%; height: auto; display: block; }
.aidesk .aisea { fill: #070a10; stroke: rgba(239,236,230,.12); } .aidesk .ailand { fill: #1b2230; stroke: #0b0c0f; stroke-width: .5; }
.aidesk .aibub { fill: rgba(230,195,74,.35); stroke: #e6c34a; stroke-width: 1.5; cursor: pointer; transition: fill .15s; } .aidesk .aibub:hover, .aidesk .aibub.on { fill: rgba(111,191,122,.55); stroke: #9fe0b0; }
.aidesk .aibubtx { fill: #efece6; font: 700 10px/1 var(--mono, monospace); text-anchor: middle; cursor: pointer; pointer-events: auto; }
.aitvscr > div, .aitvscr iframe { width: 100%; height: 100%; border: 0; display: block; }
/* SpiraOS news and how we are going (2026-09-29) */
.aidesk .aispira { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.aidesk .aispiracell { border: 1px solid rgba(111,191,122,.3); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.aidesk .aispiracell b { font: 800 20px/1.1 var(--mono, monospace); color: #9fe0b0; } .aidesk .aispiracell span { font-size: 12px; color: #b9b3a8; }
.aidesk .aispiraday { margin: 10px 0 0; font: 700 12px/1.2 var(--mono, monospace); color: #8f8b84; text-transform: uppercase; letter-spacing: .05em; }
/* the AI stocks roll across in one line (2026-09-29) */
.aidesk .aismgrid { display: block; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.aidesk .aismtrack { display: inline-flex; gap: 6px; animation: airoll 40s linear infinite; }
.aidesk .aismgrid:hover .aismtrack { animation-play-state: paused; }
.aidesk .aismtrack .aismcell { flex: 0 0 auto; min-width: 104px; }
@keyframes airoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .aidesk .aismtrack { animation: none; } .aidesk .aismgrid { overflow-x: auto; } }
.aidesk .aiorig { font-size: 12px; color: #8f8b84; margin: 0 0 2px; }
/* the news fills its whole column, down to where the TV side ends (Papa: "see the space", 2026-09-29) */
.aidesk .aigrid { align-items: stretch; }
.aidesk .ainewscol { display: flex; flex-direction: column; min-height: 0; }
.aidesk .ainewscol .ailist { max-height: none; flex: 1 1 0; min-height: 320px; overflow-y: auto; }
@media (max-width: 900px) { .aidesk .ainewscol .ailist { flex: none; max-height: 460px; } }
/* GitHub tools under the news, auto language marks (2026-09-29) */
.aidesk .aighbox { flex: 0 0 auto; margin-top: 8px; border-top: 1px solid rgba(230,195,74,.3); padding-top: 4px; }
.aidesk .aighlist { max-height: 260px; overflow-y: auto; }
.aidesk .aighlist .aix { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the drag bar between the AI TV and the news (2026-09-29) */
.aidesk .aigrid { grid-template-columns: minmax(0, var(--tvw, 53%)) 10px minmax(0, 1fr); gap: 4px; }
.aidesk .aisplit { cursor: col-resize; border-radius: 6px; background: linear-gradient(90deg, transparent 3px, rgba(230,195,74,.35) 3px, rgba(230,195,74,.35) 7px, transparent 7px); touch-action: none; min-height: 60px; }
.aidesk .aisplit:hover, .aidesk .aigrid.dragging .aisplit { background: linear-gradient(90deg, transparent 2px, #e6c34a 2px, #e6c34a 8px, transparent 8px); }
.aidesk .aigrid.dragging { user-select: none; } .aidesk .aigrid.dragging iframe { pointer-events: none; }
@media (max-width: 900px) { .aidesk .aigrid { grid-template-columns: 1fr; } .aidesk .aisplit { display: none; } }
/* Top 5 today and the BREAKING bar (2026-09-29) */
.aidesk .aibreak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(208,52,44,.14); border: 1px solid rgba(240,80,70,.6); animation: aipulse 2s ease-in-out infinite; }
.aidesk .aibreak[hidden] { display: none; }
.aidesk .aibreak b { color: #ff6b5e; font: 800 12px/1 var(--mono, monospace); letter-spacing: .1em; }
.aidesk .aibreakt { background: none; border: 0; color: #fff; font: 700 15px/1.3 inherit; cursor: pointer; text-align: left; padding: 0; flex: 1 1 300px; } .aidesk .aibreakt:hover { text-decoration: underline; }
.aidesk .aibreak span { color: #f3b3ad; font-size: 12px; } .aidesk .aibreak a { color: #8ec5ff; font-size: 12px; text-decoration: none; }
@keyframes aipulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,80,70,0); } 50% { box-shadow: 0 0 0 4px rgba(240,80,70,.18); } }
@media (prefers-reduced-motion: reduce) { .aidesk .aibreak { animation: none; } }
.aidesk .airow.aitop .ait { font-size: 16px; } .aidesk .airow.aitop .aimeta { color: #e6c34a; }
.shotgone { display: inline-block; margin: 4px 0; padding: 6px 10px; border: 1px dashed rgba(239,236,230,.2); border-radius: 8px; color: #8f8b84; font-size: 13px; }
/* the garment's colour and size in the print panel (draw.php, 2026-09-30) */
.st-garm { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.st-garm small { color: #c9ccd1; font-size: 11px; }
.st-garmcols { display: flex; flex-wrap: wrap; gap: 6px; }
.st-gcol { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.st-gcol.on { border-color: #39ff6a; box-shadow: 0 0 0 2px rgba(57,255,106,.35); }
.st-gsize { min-width: 38px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: none; color: #e6e8ec; cursor: pointer; font: 600 12px var(--mono, monospace); }
.st-gsize.on { border-color: #39ff6a; color: #39ff6a; }