/* node_modules/@cube-drone/marquee-css/marquee.css */
.mq-doc {
  line-height: 1.5;
  overflow-wrap: break-word;
}
.mq-doc :is(img, video, audio) {
  max-width: 100%;
}
.mq-doc img.mq-emoji {
  height: 1.2em;
  width: auto;
  vertical-align: -0.25em;
}
.mq-doc blockquote {
  margin-block: 1em;
  margin-inline: 0;
  padding: 0.35rem 1rem;
  border-left: 3px solid rgba(127, 127, 127, 0.5);
  background: rgba(127, 127, 127, 0.08);
  border-radius: 0 0.25rem 0.25rem 0;
}
.mq-doc blockquote > :first-child {
  margin-top: 0;
}
.mq-doc blockquote > :last-child {
  margin-bottom: 0;
}
.mq-doc pre.mq-code {
  overflow-x: auto;
  padding: 0.75rem;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 0.25rem;
}
.mq-doc .mq-h7,
.mq-doc .mq-h8 {
  font-weight: bold;
  margin-block: 1em;
}
.mq-doc .mq-h7 {
  font-size: 0.85em;
}
.mq-doc .mq-h8 {
  font-size: 0.75em;
}
.mq-center {
  text-align: center;
}
.mq-right {
  text-align: right;
}
.mq-left {
  text-align: left;
}
.mq-center .mq-table {
  margin-inline: auto;
}
.mq-right .mq-table {
  margin-left: auto;
}
.mq-left .mq-table {
  margin-right: auto;
}
.mq-table {
  border-collapse: collapse;
  margin-block: 1em;
}
.mq-table :is(td, th) {
  border: 1px solid rgba(127, 127, 127, 0.45);
  padding: 0.35rem 0.75rem;
  text-align: left;
}
.mq-table th {
  background: rgba(127, 127, 127, 0.12);
}
.mq-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  width: var(--mq-stack-w, 100%);
  max-width: 100%;
  aspect-ratio: var(--mq-stack-aspect, auto);
  margin: 1em 0;
  isolation: isolate;
}
.mq-stack > .mq-layer {
  grid-area: 1 / 1;
  min-width: 0;
}
:where(.mq-stack > .mq-layer) {
  --mq-bg: initial;
  --mq-bg-tile: initial;
  --mq-color: initial;
}
.mq-layer {
  background-color: var(--mq-bg, transparent);
  background-image: var(--mq-bg-tile, none);
  color: var(--mq-color, inherit);
}
.mq-stack > .mq-layer > :first-child {
  margin-top: 0;
}
.mq-stack > .mq-layer > :last-child {
  margin-bottom: 0;
}
.mq-place-fill {
  align-self: stretch;
  justify-self: stretch;
}
.mq-stack > .mq-place-fill:not(.mq-layer-cover) {
  padding: 1rem;
}
.mq-stack > .mq-layer:not(.mq-place-fill) {
  margin: 0.75rem;
  max-width: calc(100% - 1.5rem);
}
.mq-place-top-left {
  align-self: start;
  justify-self: start;
  text-align: left;
}
.mq-place-top {
  align-self: start;
  justify-self: center;
  text-align: center;
}
.mq-place-top-right {
  align-self: start;
  justify-self: end;
  text-align: right;
}
.mq-place-left {
  align-self: center;
  justify-self: start;
  text-align: left;
}
.mq-place-center {
  align-self: center;
  justify-self: center;
  text-align: center;
}
.mq-place-right {
  align-self: center;
  justify-self: end;
  text-align: right;
}
.mq-place-bottom-left {
  align-self: end;
  justify-self: start;
  text-align: left;
}
.mq-place-bottom {
  align-self: end;
  justify-self: center;
  text-align: center;
}
.mq-place-bottom-right {
  align-self: end;
  justify-self: end;
  text-align: right;
}
.mq-layer-cover > p {
  height: 100%;
  margin: 0;
}
.mq-layer-cover :is(img, video).mq-embed {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mq-stack-aspect > .mq-layer-cover {
  contain: size;
}
.mq-backing-box {
  background-color: var(--mq-bg, rgb(16 16 20 / 0.72));
  color: var(--mq-color, #fff);
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
}
.mq-backing-outline {
  color: var(--mq-color, #fff);
  font-weight: 800;
  text-shadow:
    -0.06em -0.06em 0 #000,
    0.06em -0.06em 0 #000,
    -0.06em 0.06em 0 #000,
    0.06em 0.06em 0 #000,
    0 0 0.2em #000;
}
.mq-spoiler {
  filter: blur(0.35em);
  background: rgba(127, 127, 127, 0.22);
  border-radius: 0.2em;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.mq-spoiler:hover,
.mq-spoiler:focus {
  filter: none;
}
.mq-root .mq-spoiler:hover,
.mq-root .mq-spoiler:focus {
  filter: blur(0.35em);
}
.mq-root .mq-spoiler[data-mq-revealed] {
  filter: none;
  background: none;
  cursor: text;
}
.mq-spoiler-block {
  display: block;
  padding: 0.5rem;
}
.mq-conflict {
  border: 1px solid rgba(200, 70, 70, 0.5);
  border-radius: 0.375rem;
  margin: 1rem 0;
  background: rgba(200, 70, 70, 0.07);
}
.mq-variant {
  padding: 0.5rem 0.75rem;
}
.mq-variant + .mq-variant {
  border-top: 1px solid rgba(200, 70, 70, 0.25);
}
.mq-variant-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
  font-size: 0.85em;
  opacity: 0.75;
}
.mq-variant-label {
  font-weight: 600;
}
.mq-variant-when {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.mq-variant-base {
  opacity: 0.6;
}
.mq-color {
  color: var(--mq-color);
}
.mq-page,
.mq-section {
  background-color: var(--mq-bg, transparent);
  background-image: var(--mq-bg-tile, none);
  color: var(--mq-color, inherit);
}
.mq-media .mq-embed {
  width: var(--mq-media-w, auto);
  height: var(--mq-media-h, auto);
}
.mq-media img.mq-embed,
.mq-media video.mq-embed {
  object-fit: cover;
}
.mq-font-sans {
  font-family: system-ui, sans-serif;
}
.mq-font-serif {
  font-family: Georgia, serif;
}
.mq-font-mono {
  font-family: ui-monospace, monospace;
}
.mq-font-comic {
  font-family:
    "Comic Sans MS",
    "Comic Neue",
    cursive;
}
.mq-font-radio-canada {
  font-family:
    "Radio Canada",
    system-ui,
    sans-serif;
}
.mq-font-atkinson-hyperlegible {
  font-family:
    "Atkinson Hyperlegible",
    system-ui,
    sans-serif;
}
.mq-font-lexend {
  font-family:
    Lexend,
    system-ui,
    sans-serif;
}
.mq-font-zilla-slab {
  font-family:
    "Zilla Slab",
    Georgia,
    serif;
}
.mq-font-playfair-display {
  font-family:
    "Playfair Display",
    Georgia,
    serif;
}
.mq-font-cormorant {
  font-family:
    Cormorant,
    Georgia,
    serif;
}
.mq-font-im-fell-english {
  font-family:
    "IM Fell English",
    Georgia,
    serif;
}
.mq-font-uncial-antiqua {
  font-family:
    "Uncial Antiqua",
    Georgia,
    serif;
}
.mq-font-unifraktur {
  font-family:
    UnifrakturMaguntia,
    Georgia,
    serif;
}
.mq-font-jetbrains-mono {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
}
.mq-font-vt323 {
  font-family:
    VT323,
    ui-monospace,
    monospace;
}
.mq-font-press-start {
  font-family:
    "Press Start 2P",
    ui-monospace,
    monospace;
}
.mq-font-silkscreen {
  font-family:
    Silkscreen,
    ui-monospace,
    monospace;
}
.mq-font-major-mono {
  font-family:
    "Major Mono Display",
    ui-monospace,
    monospace;
}
.mq-font-orbitron {
  font-family:
    Orbitron,
    system-ui,
    sans-serif;
}
.mq-font-bungee {
  font-family:
    Bungee,
    system-ui,
    sans-serif;
}
.mq-font-monoton {
  font-family:
    Monoton,
    system-ui,
    sans-serif;
}
.mq-font-creepster {
  font-family:
    Creepster,
    system-ui,
    sans-serif;
}
.mq-font-special-elite {
  font-family:
    "Special Elite",
    ui-monospace,
    monospace;
}
.mq-font-fredericka {
  font-family: "Fredericka the Great", cursive;
}
.mq-font-lobster {
  font-family: Lobster, cursive;
}
.mq-font-pacifico {
  font-family: Pacifico, cursive;
}
.mq-font-caveat {
  font-family: Caveat, cursive;
}
.mq-font-comic-neue {
  font-family:
    "Comic Neue",
    "Comic Sans MS",
    cursive;
}
.mq-font-audiowide {
  font-family:
    Audiowide,
    system-ui,
    sans-serif;
}
.mq-font-kablammo {
  font-family: Kablammo, cursive;
}
.mq-font-henny-penny {
  font-family: "Henny Penny", cursive;
}
.mq-font-oi {
  font-family:
    Oi,
    Georgia,
    serif;
}
.mq-font-rye {
  font-family:
    Rye,
    Georgia,
    serif;
}
.mq-font-bitcount {
  font-family:
    Bitcount,
    ui-monospace,
    monospace;
}
.mq-font-quicksand {
  font-family:
    Quicksand,
    system-ui,
    sans-serif;
}
.mq-size-1 {
  font-size: x-small;
}
.mq-size-2 {
  font-size: small;
}
.mq-size-3 {
  font-size: medium;
}
.mq-size-4 {
  font-size: large;
}
.mq-size-5 {
  font-size: x-large;
}
.mq-size-6 {
  font-size: xx-large;
}
.mq-size-7 {
  font-size: xxx-large;
}
big {
  font-size: larger;
}
.mq-placeholder,
.mq-unknown,
.mq-invalid {
  border: 1px dashed rgba(136, 136, 136, 0.66);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin: 0.5rem 0;
}
.mq-placeholder::before,
.mq-invalid::before {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  opacity: 0.66;
}
.mq-placeholder::before {
  content: "\2b1a  " attr(data-directive);
}
.mq-unknown::before {
  content: "\2b1a  " attr(data-directive) " (unsupported here)";
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 0.8em;
  opacity: 0.6;
}
.mq-invalid::before {
  content: "\2702  invalid markup: " attr(data-reason);
}
.mq-blocked {
  text-decoration: underline dotted;
}
.mq-turbolink a {
  text-decoration: none;
}
.mq-turbolink-rich {
  margin: 0.75rem 0;
  border: 1px solid rgba(136, 136, 136, 0.33);
  border-left-width: 4px;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}
.mq-turbolink-source {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8em;
  opacity: 0.6;
  overflow-wrap: anywhere;
}
.mq-noteref {
  font-size: 0.75em;
  opacity: 0.8;
}
.mq-notes {
  margin: 0.25rem 0 1rem;
}
.mq-note {
  margin: 0.15rem 0;
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.85;
}
.mq-note-num {
  font-style: normal;
  font-size: 0.75em;
  vertical-align: super;
  margin-right: 0.3em;
  opacity: 0.8;
}
.mq-marquee {
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
}
.mq-marquee-inner {
  display: inline-block;
}
.mq-bounce,
.mq-jitter,
.mq-wave,
.mq-rubber {
  display: inline-block;
}
.mq-rainbow {
  color: #ff004c;
}
.mq-split .mq-l {
  display: inline-block;
}
.mq-split .mq-w {
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .mq-rainbow.mq-split,
  .mq-bounce.mq-split,
  .mq-jitter.mq-split,
  .mq-wave.mq-split,
  .mq-rubber.mq-split,
  .mq-blink.mq-split,
  .mq-fadein.mq-split {
    animation: none;
  }
  .mq-rainbow.mq-split .mq-l {
    animation: mq-rainbow 3s linear infinite;
    animation-delay: calc(var(--mq-o, 0) * -3s);
  }
  .mq-bounce.mq-split .mq-l {
    animation: mq-bounce 0.6s ease-in-out infinite alternate;
    animation-delay: calc(var(--mq-o, 0) * -1.2s);
  }
  .mq-jitter.mq-split .mq-l {
    animation: mq-jitter 0.18s steps(2) infinite;
    animation-delay: calc(var(--mq-o, 0) * -0.18s);
  }
  .mq-wave.mq-split .mq-l {
    animation: mq-wave 1.4s ease-in-out infinite;
    animation-delay: calc(var(--mq-o, 0) * -1.4s);
  }
  .mq-rubber.mq-split .mq-l {
    animation: mq-rubber 0.7s ease-in-out infinite alternate;
    animation-delay: calc(var(--mq-o, 0) * -1.4s);
  }
  .mq-typewriter.mq-split .mq-l {
    animation: mq-tw-in 0.4s steps(1, start) both;
    animation-delay: calc(var(--mq-o, 0) * var(--mq-tw-step, 0.07s));
  }
  .mq-fadein {
    animation: mq-fade-in 1.2s ease-out both;
  }
  .mq-fadein.mq-split .mq-l {
    animation: mq-fade-in 0.9s ease-out both;
    animation-delay: calc(var(--mq-o, 0) * var(--mq-fi-step, 0.06s));
  }
  .mq-blink.mq-split .mq-l {
    animation: mq-blink calc(1.2s / max(var(--mq-rate, 1), 1)) step-end infinite;
    animation-delay: calc(var(--mq-o, 0) * (-1.2s / max(var(--mq-rate, 1), 1)));
  }
  .mq-marquee {
    overflow: hidden;
    white-space: nowrap;
  }
  .mq-marquee-inner {
    padding-left: 100%;
    animation: mq-marquee calc(16s / max(var(--mq-speed, 1), 1)) linear infinite;
  }
  .mq-marquee[data-direction=right] .mq-marquee-inner {
    animation-direction: reverse;
  }
  .mq-blink {
    animation: mq-blink calc(1.2s / max(var(--mq-rate, 1), 1)) step-end infinite;
  }
  .mq-rainbow {
    animation: mq-rainbow 3s linear infinite;
  }
  .mq-bounce {
    animation: mq-bounce 0.6s ease-in-out infinite alternate;
  }
  .mq-jitter {
    animation: mq-jitter 0.18s steps(2) infinite;
  }
  .mq-wave {
    animation: mq-wave 1.4s ease-in-out infinite;
  }
  .mq-rubber {
    animation: mq-rubber 0.7s ease-in-out infinite alternate;
  }
}
@keyframes mq-marquee {
  to {
    transform: translateX(-100%);
  }
}
@keyframes mq-blink {
  50% {
    opacity: 0;
  }
}
@keyframes mq-rainbow {
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes mq-bounce {
  to {
    transform: translateY(-0.25em);
  }
}
@keyframes mq-jitter {
  25% {
    transform: translate(0.05em, -0.05em);
  }
  75% {
    transform: translate(-0.05em, 0.05em);
  }
}
@keyframes mq-wave {
  25% {
    transform: rotate(1.5deg) translateY(-0.08em);
  }
  75% {
    transform: rotate(-1.5deg) translateY(0.08em);
  }
}
@keyframes mq-rubber {
  from {
    transform: scale(0.82);
  }
  to {
    transform: scale(1.18);
  }
}
@keyframes mq-tw-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mq-fade-in {
  from {
    opacity: 0;
    filter: blur(0.12em);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.mq-js .mq-anim,
.mq-js .mq-anim .mq-l,
.mq-js .mq-anim .mq-marquee-inner {
  animation-play-state: paused;
}
.mq-js .mq-anim[data-mq-play],
.mq-js .mq-anim[data-mq-play] .mq-l,
.mq-js .mq-anim[data-mq-play] .mq-marquee-inner {
  animation-play-state: running;
}
[data-mq-skip] .mq-anim,
[data-mq-skip] .mq-anim .mq-l,
[data-mq-skip] .mq-anim .mq-marquee-inner {
  animation: none;
}
[data-mq-skip] .mq-marquee {
  overflow: visible;
  white-space: normal;
}
[data-mq-skip] .mq-marquee-inner {
  padding-left: 0;
}
.mq-page {
  padding: 1rem clamp(1rem, 4vw, 2rem);
}
.mq-layout-nav-footer,
.mq-layout-two-column-nav-footer,
.mq-layout-three-column-nav-footer {
  display: grid;
  gap: 1rem;
}
.mq-layout-nav-footer {
  grid-template-areas: "nav" "main" "footer";
}
.mq-layout-two-column-nav-footer {
  grid-template-areas: "nav nav" "main right" "footer footer";
  grid-template-columns: 1fr minmax(10rem, 16rem);
}
.mq-layout-three-column-nav-footer {
  grid-template-areas: "nav nav nav" "left main right" "footer footer footer";
  grid-template-columns: minmax(8rem, 12rem) 1fr minmax(8rem, 12rem);
}
.mq-section[data-slot=nav] {
  grid-area: nav;
}
.mq-section[data-slot=main] {
  grid-area: main;
}
.mq-section[data-slot=left] {
  grid-area: left;
}
.mq-section[data-slot=right] {
  grid-area: right;
}
.mq-section[data-slot=footer] {
  grid-area: footer;
}
@media (max-width: 48rem) {
  .mq-layout-two-column-nav-footer,
  .mq-layout-three-column-nav-footer {
    grid-template-areas: "nav" "main" "left" "right" "footer";
    grid-template-columns: 1fr;
  }
}
:is(section, .mq-layer)[class*=mq-scheme-] {
  padding: 0.75rem 1rem;
}
.mq-scheme-noir {
  --mq-bg: #101014;
  --mq-color: #e8e8ee;
  background: var(--mq-bg);
  color: var(--mq-color);
}
.mq-scheme-noir a {
  color: #9ecbff;
}
.mq-scheme-terminal {
  --mq-bg: #0a0f0a;
  --mq-color: #33ff66;
  background: var(--mq-bg);
  color: var(--mq-color);
}
:where(.mq-scheme-terminal) {
  font-family:
    ui-monospace,
    "Cascadia Mono",
    "JetBrains Mono",
    monospace;
}
.mq-scheme-terminal a {
  color: #66ffcc;
}
.mq-scheme-parchment {
  --mq-bg: #f4e8d0;
  --mq-color: #3a2f1b;
  background: var(--mq-bg);
  color: var(--mq-color);
}
:where(.mq-scheme-parchment) {
  font-family:
    Georgia,
    "Iowan Old Style",
    serif;
}
.mq-scheme-parchment a {
  color: #7a4a12;
}
.mq-scheme-hotdog-stand {
  --mq-bg: #c41e1e;
  --mq-color: #ffe900;
  background: var(--mq-bg);
  color: var(--mq-color);
}
.mq-scheme-hotdog-stand a {
  color: #ffffff;
}
.mq-scheme-earthbound,
[class*=mq-scheme-earthbound-] {
  --mq-eb-px: 2px;
  --mq-bg: #290829;
  --mq-color: #ffefad;
  --mq-eb-edge: #393052;
  --mq-eb-light: #ffefad;
  position: relative;
  background: var(--mq-bg);
  color: var(--mq-color);
  box-shadow:
    inset 0 0 0 calc(1 * var(--mq-eb-px)) var(--mq-eb-edge),
    inset 0 0 0 calc(2 * var(--mq-eb-px)) var(--mq-eb-light),
    inset 0 0 0 calc(5 * var(--mq-eb-px)) var(--mq-accent),
    inset 0 0 0 calc(8 * var(--mq-eb-px)) var(--mq-eb-edge);
  clip-path: polygon(0 calc(4 * var(--mq-eb-px)), calc(1 * var(--mq-eb-px)) calc(4 * var(--mq-eb-px)), calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)), calc(2 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)), calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)), calc(4 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)), calc(4 * var(--mq-eb-px)) 0, calc(100% - 4 * var(--mq-eb-px)) 0, calc(100% - 4 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)), calc(100% - 2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)), calc(100% - 2 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)), calc(100% - 1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)), calc(100% - 1 * var(--mq-eb-px)) calc(4 * var(--mq-eb-px)), 100% calc(4 * var(--mq-eb-px)), 100% calc(100% - 4 * var(--mq-eb-px)), calc(100% - 1 * var(--mq-eb-px)) calc(100% - 4 * var(--mq-eb-px)), calc(100% - 1 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)), calc(100% - 2 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)), calc(100% - 2 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)), calc(100% - 4 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)), calc(100% - 4 * var(--mq-eb-px)) 100%, calc(4 * var(--mq-eb-px)) 100%, calc(4 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)), calc(2 * var(--mq-eb-px)) calc(100% - 1 * var(--mq-eb-px)), calc(2 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)), calc(1 * var(--mq-eb-px)) calc(100% - 2 * var(--mq-eb-px)), calc(1 * var(--mq-eb-px)) calc(100% - 4 * var(--mq-eb-px)), 0 calc(100% - 4 * var(--mq-eb-px)));
}
.mq-scheme-earthbound {
  --mq-bg: #101010;
  --mq-color: #ffffff;
  --mq-accent: #f7f7f7;
  --mq-eb-edge: #101010;
  --mq-eb-light: #8c9494;
  box-shadow:
    inset 0 0 0 calc(1 * var(--mq-eb-px)) var(--mq-eb-edge),
    inset 0 0 0 calc(2 * var(--mq-eb-px)) var(--mq-eb-light),
    inset 0 0 0 calc(3 * var(--mq-eb-px)) var(--mq-accent),
    inset 0 0 0 calc(4 * var(--mq-eb-px)) var(--mq-eb-light);
}
.mq-scheme-earthbound-mint {
  --mq-accent: #6bd3bd;
  --mq-eb-edge: #393052;
  --mq-eb-light: #ffefad;
}
.mq-scheme-earthbound-strawberry {
  --mq-accent: #ff94ad;
  --mq-eb-edge: #42214a;
  --mq-eb-light: #ffefce;
}
.mq-scheme-earthbound-banana {
  --mq-accent: #efff5a;
  --mq-eb-edge: #4a3152;
  --mq-eb-light: #ffffd6;
}
.mq-scheme-earthbound-peanut {
  --mq-accent: #e7a552;
  --mq-eb-edge: #421829;
  --mq-eb-light: #ffefad;
}
:is(.mq-scheme-earthbound, [class*=mq-scheme-earthbound-])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(5 * var(--mq-eb-px)) top calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(5 * var(--mq-eb-px)) top calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(5 * var(--mq-eb-px)) bottom calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(5 * var(--mq-eb-px)) bottom calc(5 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat;
}
.mq-scheme-earthbound::before {
  background:
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) top calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(2 * var(--mq-eb-px)) bottom calc(1 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) left calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-edge), var(--mq-eb-edge)) right calc(1 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(2 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(2 * var(--mq-eb-px)) / calc(2 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(2 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(3 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(3 * var(--mq-eb-px)) top calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) left calc(3 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-accent), var(--mq-accent)) right calc(3 * var(--mq-eb-px)) bottom calc(3 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(4 * var(--mq-eb-px)) top calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(4 * var(--mq-eb-px)) top calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) left calc(4 * var(--mq-eb-px)) bottom calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat,
    linear-gradient(var(--mq-eb-light), var(--mq-eb-light)) right calc(4 * var(--mq-eb-px)) bottom calc(4 * var(--mq-eb-px)) / calc(1 * var(--mq-eb-px)) calc(1 * var(--mq-eb-px)) no-repeat;
}
:where(.mq-scheme-earthbound, [class*=mq-scheme-earthbound-]) {
  font-family:
    "Press Start 2P",
    ui-monospace,
    monospace;
  line-height: 1.9;
}
:where(.mq-scheme-earthbound, [class*=mq-scheme-earthbound-]):not([class*=mq-font-]) {
  font-size: 0.8em;
}
:is(section, .mq-layer):is(.mq-scheme-earthbound, [class*=mq-scheme-earthbound-]) {
  padding: 1.5rem 1.75rem;
}
:is(.mq-scheme-earthbound, [class*=mq-scheme-earthbound-]) a {
  color: var(--mq-accent);
}
.mq-scheme-crosscode {
  --mq-bg: rgb(5 5 5 / 0.85);
  --mq-color: #f2f2f2;
  --mq-accent: #9a9a9a;
  --mq-cc-cut: 14px;
  --mq-cc-diag: calc(var(--mq-cc-cut) * 0.7071);
  --mq-cc-lines:
    transparent var(--mq-cc-diag),
    #000 var(--mq-cc-diag),
    #000 calc(var(--mq-cc-diag) + 2px),
    var(--mq-accent) calc(var(--mq-cc-diag) + 2px),
    var(--mq-accent) calc(var(--mq-cc-diag) + 4px),
    transparent calc(var(--mq-cc-diag) + 4px);
  color: var(--mq-color);
  background-color: var(--mq-bg);
  background-image:
    linear-gradient(to bottom left, var(--mq-cc-lines)),
    linear-gradient(to top right, var(--mq-cc-lines)),
    var(--mq-bg-tile, none);
  background-position:
    top right,
    bottom left,
    0 0;
  background-size:
    calc(var(--mq-cc-cut) + 8px) calc(var(--mq-cc-cut) + 8px),
    calc(var(--mq-cc-cut) + 8px) calc(var(--mq-cc-cut) + 8px),
    auto;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--mq-accent);
  clip-path: polygon(0 0, calc(100% - var(--mq-cc-cut)) 0, 100% var(--mq-cc-cut), 100% 100%, var(--mq-cc-cut) 100%, 0 calc(100% - var(--mq-cc-cut)));
}
:is(section, .mq-layer).mq-scheme-crosscode {
  padding: 1rem 1.25rem;
}
.mq-scheme-crosscode a {
  color: #8fd3ff;
}
.mq-scheme-ff6 {
  --mq-accent: #4f63d2;
  --mq-color: #ffffff;
  color: var(--mq-color);
  background-color: var(--mq-accent);
  background-image:
    linear-gradient(
      to bottom,
      var(--mq-accent) 0.0% 8.33%,
      color-mix(in srgb, var(--mq-accent) 94%, #000) 8.33% 16.67%,
      color-mix(in srgb, var(--mq-accent) 88%, #000) 16.67% 25.0%,
      color-mix(in srgb, var(--mq-accent) 82%, #000) 25.0% 33.33%,
      color-mix(in srgb, var(--mq-accent) 76%, #000) 33.33% 41.67%,
      color-mix(in srgb, var(--mq-accent) 70%, #000) 41.67% 50.0%,
      color-mix(in srgb, var(--mq-accent) 64%, #000) 50.0% 58.33%,
      color-mix(in srgb, var(--mq-accent) 58%, #000) 58.33% 66.67%,
      color-mix(in srgb, var(--mq-accent) 52%, #000) 66.67% 75.0%,
      color-mix(in srgb, var(--mq-accent) 46%, #000) 75.0% 83.33%,
      color-mix(in srgb, var(--mq-accent) 40%, #000) 83.33% 91.67%,
      color-mix(in srgb, var(--mq-accent) 34%, #000) 91.67% 100.0%),
    var(--mq-bg-tile, none);
  border: 3px solid #e7e7ef;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #3a3a48, inset 0 0 0 1px #6c7088;
  text-shadow: 1px 1px 0 #10102a;
}
:is(section, .mq-layer).mq-scheme-ff6 {
  padding: 0.85rem 1.1rem;
}
.mq-scheme-ff6 a {
  color: #ffe98a;
}
.mq-scheme-chronotrigger {
  --mq-accent: #2a3a9c;
  --mq-color: #ffffff;
  color: var(--mq-color);
  background-color: var(--mq-accent);
  background-image:
    repeating-linear-gradient(
      45deg,
      rgb(255 255 255 / 0.05) 0 2px,
      transparent 2px 4px),
    linear-gradient(
      160deg,
      var(--mq-accent) 0.0% 12.5%,
      color-mix(in srgb, var(--mq-accent) 93%, #000) 12.5% 25.0%,
      color-mix(in srgb, var(--mq-accent) 86%, #000) 25.0% 37.5%,
      color-mix(in srgb, var(--mq-accent) 79%, #000) 37.5% 50.0%,
      color-mix(in srgb, var(--mq-accent) 71%, #000) 50.0% 62.5%,
      color-mix(in srgb, var(--mq-accent) 64%, #000) 62.5% 75.0%,
      color-mix(in srgb, var(--mq-accent) 57%, #000) 75.0% 87.5%,
      color-mix(in srgb, var(--mq-accent) 50%, #000) 87.5% 100.0%),
    var(--mq-bg-tile, none);
  border: 3px solid;
  border-color: #dfe3ee #6d7385 #555b6c #c9cfdc;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #000;
  text-shadow: 1px 1px 0 #000;
}
:is(section, .mq-layer).mq-scheme-chronotrigger {
  padding: 0.85rem 1.1rem;
}
.mq-scheme-chronotrigger a {
  color: #9ff0ff;
}
:where(.mq-scheme-crosscode, .mq-scheme-ff6, .mq-scheme-chronotrigger) {
  font-family:
    VT323,
    ui-monospace,
    monospace;
}
:where(.mq-scheme-crosscode, .mq-scheme-ff6, .mq-scheme-chronotrigger):not([class*=mq-font-]) {
  font-size: 1.3em;
  line-height: 1.25;
}

/* fonts.css */
@font-face {
  font-family: "Radio Canada";
  src: url(/fonts/radio-canada.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(/fonts/atkinson-hyperlegible.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url(/fonts/lexend.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url(/fonts/zilla-slab.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url(/fonts/playfair-display.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url(/fonts/cormorant.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url(/fonts/im-fell-english.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Uncial Antiqua";
  src: url(/fonts/uncial-antiqua.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "UnifrakturMaguntia";
  src: url(/fonts/unifraktur.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/fonts/jetbrains-mono.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url(/fonts/vt323.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url(/fonts/press-start.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url(/fonts/silkscreen.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Major Mono Display";
  src: url(/fonts/major-mono.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url(/fonts/orbitron.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Bungee";
  src: url(/fonts/bungee.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Monoton";
  src: url(/fonts/monoton.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Creepster";
  src: url(/fonts/creepster.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url(/fonts/special-elite.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fredericka the Great";
  src: url(/fonts/fredericka.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Lobster";
  src: url(/fonts/lobster.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Pacifico";
  src: url(/fonts/pacifico.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url(/fonts/caveat.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Comic Neue";
  src: url(/fonts/comic-neue.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Audiowide";
  src: url(/fonts/audiowide.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Kablammo";
  src: url(/fonts/kablammo.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Henny Penny";
  src: url(/fonts/henny-penny.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oi";
  src: url(/fonts/oi.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Rye";
  src: url(/fonts/rye.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Bitcount";
  src: url(/fonts/bitcount.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url(/fonts/quicksand.woff2) format("woff2");
  font-display: swap;
}
.mq-font-atkinson-hyperlegible,
.mq-font-zilla-slab,
.mq-font-im-fell-english,
.mq-font-uncial-antiqua,
.mq-font-major-mono,
.mq-font-bitcount,
.mq-font-orbitron,
.mq-font-audiowide,
.mq-font-creepster,
.mq-font-monoton,
.mq-font-oi,
.mq-font-kablammo,
.mq-font-henny-penny,
.mq-font-lobster,
.mq-font-pacifico,
.mq-font-fredericka,
.mq-font-unifraktur,
.mq-font-comic-neue {
  font-size: 1.15em;
}
.mq-font-vt323,
.mq-font-cormorant {
  font-size: 1.3em;
}
.mq-font-caveat {
  font-size: 1.5em;
}

/* tokens.css */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --layer-toast: 200;
  --qr-dark: #000000;
  --qr-light: #ffffff;
  --cassette-edge: #000000;
  --cassette-screw: #a3a3a3;
  --cassette-screw-edge: #5c5c5c;
  --post-measure: 800px;
  --panel-clip: polygon( 0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px) );
  --face-clip: polygon(50% 0, 90.1% 19.8%, 100% 64.3%, 72.3% 100%, 27.7% 100%, 0 64.3%, 9.9% 19.8%);
  --j: 3px;
  --jag: polygon( 0 calc(2 * var(--j)), var(--j) calc(2 * var(--j)), var(--j) var(--j), calc(2 * var(--j)) var(--j), calc(2 * var(--j)) 0, calc(100% - 2 * var(--j)) 0, calc(100% - 2 * var(--j)) var(--j), calc(100% - var(--j)) var(--j), calc(100% - var(--j)) calc(2 * var(--j)), 100% calc(2 * var(--j)), 100% calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) 100%, calc(2 * var(--j)) 100%, calc(2 * var(--j)) calc(100% - var(--j)), var(--j) calc(100% - var(--j)), var(--j) calc(100% - 2 * var(--j)), 0 calc(100% - 2 * var(--j)) );
  --jag-1: polygon( 0 var(--j), var(--j) 0, calc(100% - var(--j)) 0, 100% var(--j), 100% calc(100% - var(--j)), calc(100% - var(--j)) 100%, var(--j) 100%, 0 calc(100% - var(--j)) );
  --jag-top: polygon( 0 calc(2 * var(--j)), var(--j) calc(2 * var(--j)), var(--j) var(--j), calc(2 * var(--j)) var(--j), calc(2 * var(--j)) 0, calc(100% - 2 * var(--j)) 0, calc(100% - 2 * var(--j)) var(--j), calc(100% - var(--j)) var(--j), calc(100% - var(--j)) calc(2 * var(--j)), 100% calc(2 * var(--j)), 100% 100%, 0 100% );
  --jag-bottom: polygon( 0 0, 100% 0, 100% calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) 100%, calc(2 * var(--j)) 100%, calc(2 * var(--j)) calc(100% - var(--j)), var(--j) calc(100% - var(--j)), var(--j) calc(100% - 2 * var(--j)), 0 calc(100% - 2 * var(--j)) );
  --lw: 1px;
  --ring-1: polygon(evenodd, 0px var(--j), var(--j) 0px, calc(100% - var(--j)) 0px, 100% var(--j), 100% calc(100% - var(--j)), calc(100% - var(--j)) 100%, var(--j) 100%, 0px calc(100% - var(--j)), 0px var(--j), var(--lw) calc(var(--lw) + var(--j)), calc(var(--lw) + var(--j)) var(--lw), calc(100% - var(--lw) - var(--j)) var(--lw), calc(100% - var(--lw)) calc(var(--lw) + var(--j)), calc(100% - var(--lw)) calc(100% - var(--lw) - var(--j)), calc(100% - var(--lw) - var(--j)) calc(100% - var(--lw)), calc(var(--lw) + var(--j)) calc(100% - var(--lw)), var(--lw) calc(100% - var(--lw) - var(--j)), var(--lw) calc(var(--lw) + var(--j)));
  --ring: polygon(evenodd, 0px calc(2 * var(--j)), var(--j) calc(2 * var(--j)), var(--j) var(--j), calc(2 * var(--j)) var(--j), calc(2 * var(--j)) 0px, calc(100% - 2 * var(--j)) 0px, calc(100% - 2 * var(--j)) var(--j), calc(100% - var(--j)) var(--j), calc(100% - var(--j)) calc(2 * var(--j)), 100% calc(2 * var(--j)), 100% calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - 2 * var(--j)), calc(100% - var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) calc(100% - var(--j)), calc(100% - 2 * var(--j)) 100%, calc(2 * var(--j)) 100%, calc(2 * var(--j)) calc(100% - var(--j)), var(--j) calc(100% - var(--j)), var(--j) calc(100% - 2 * var(--j)), 0px calc(100% - 2 * var(--j)), 0px calc(2 * var(--j)), var(--lw) calc(var(--lw) + 2 * var(--j)), calc(var(--lw) + var(--j)) calc(var(--lw) + 2 * var(--j)), calc(var(--lw) + var(--j)) calc(var(--lw) + var(--j)), calc(var(--lw) + 2 * var(--j)) calc(var(--lw) + var(--j)), calc(var(--lw) + 2 * var(--j)) var(--lw), calc(100% - var(--lw) - 2 * var(--j)) var(--lw), calc(100% - var(--lw) - 2 * var(--j)) calc(var(--lw) + var(--j)), calc(100% - var(--lw) - var(--j)) calc(var(--lw) + var(--j)), calc(100% - var(--lw) - var(--j)) calc(var(--lw) + 2 * var(--j)), calc(100% - var(--lw)) calc(var(--lw) + 2 * var(--j)), calc(100% - var(--lw)) calc(100% - var(--lw) - 2 * var(--j)), calc(100% - var(--lw) - var(--j)) calc(100% - var(--lw) - 2 * var(--j)), calc(100% - var(--lw) - var(--j)) calc(100% - var(--lw) - var(--j)), calc(100% - var(--lw) - 2 * var(--j)) calc(100% - var(--lw) - var(--j)), calc(100% - var(--lw) - 2 * var(--j)) calc(100% - var(--lw)), calc(var(--lw) + 2 * var(--j)) calc(100% - var(--lw)), calc(var(--lw) + 2 * var(--j)) calc(100% - var(--lw) - var(--j)), calc(var(--lw) + var(--j)) calc(100% - var(--lw) - var(--j)), calc(var(--lw) + var(--j)) calc(100% - var(--lw) - 2 * var(--j)), var(--lw) calc(100% - var(--lw) - 2 * var(--j)), var(--lw) calc(var(--lw) + 2 * var(--j)));
  --ring-top: polygon(evenodd, 0px 100%, 0px calc(2 * var(--j)), var(--j) calc(2 * var(--j)), var(--j) var(--j), calc(2 * var(--j)) var(--j), calc(2 * var(--j)) 0px, calc(100% - 2 * var(--j)) 0px, calc(100% - 2 * var(--j)) var(--j), calc(100% - var(--j)) var(--j), calc(100% - var(--j)) calc(2 * var(--j)), 100% calc(2 * var(--j)), 100% 100%, calc(100% - var(--lw)) 100%, calc(100% - var(--lw)) calc(var(--lw) + 2 * var(--j)), calc(100% - var(--lw) - var(--j)) calc(var(--lw) + 2 * var(--j)), calc(100% - var(--lw) - var(--j)) calc(var(--lw) + var(--j)), calc(100% - var(--lw) - 2 * var(--j)) calc(var(--lw) + var(--j)), calc(100% - var(--lw) - 2 * var(--j)) var(--lw), calc(var(--lw) + 2 * var(--j)) var(--lw), calc(var(--lw) + 2 * var(--j)) calc(var(--lw) + var(--j)), calc(var(--lw) + var(--j)) calc(var(--lw) + var(--j)), calc(var(--lw) + var(--j)) calc(var(--lw) + 2 * var(--j)), var(--lw) calc(var(--lw) + 2 * var(--j)), var(--lw) 100%);
  --dot-clip: polygon( 30% 0, 70% 0, 85% 15%, 100% 30%, 100% 70%, 85% 85%, 70% 100%, 30% 100%, 15% 85%, 0 70%, 0 30%, 15% 15% );
  --bg: #e7dbc3;
  --surface: #f6efe0;
  --surface-2: #efe3cd;
  --paper: #fffefb;
  --field: #fcf8f0;
  --ink: #40382c;
  --frame: #40382c;
  --ink-soft: #574d3d;
  --muted: #8a7a5f;
  --faint: #a89777;
  --border: #d7c6a2;
  --border-strong: #c1aa80;
  --teal: #1f9e90;
  --teal-deep: #227d71;
  --accent-ink: var(--teal-deep);
  --sea: #4bab7f;
  --pink: #d97a97;
  --peach: #e8a06b;
  --coral: #db6a63;
  --react-good: #cde9d6;
  --react-bad: #f3d0cb;
  --glow: rgba(31, 158, 144, 0.5);
  --dock-text: #fbf6ec;
  --frame-text: var(--dock-text);
  --on-accent: #fbf6ec;
  --on-danger: #fbf6ec;
  --on-peach: #3a2a14;
  --chip-on: var(--surface-2);
  --chip-on-ink: var(--ink);
  --chip-on-count: var(--muted);
  --sunk-shadow: rgba(0, 0, 0, 0.45);
  --sunk-light: rgba(255, 255, 255, 0.12);
  --row-veil: rgba(246, 239, 224, 0.55);
  --banner-veil: rgba(231, 219, 195, 0.5);
  --plate: rgba(255, 255, 255, 0.78);
  --hex-border-dark: #bf9152;
  --hex-border-light: #fdf7ec;
  --marker: #f3e08c;
  --scrim: rgba(43, 38, 34, 0.45);
  --shadow-drop: rgba(43, 38, 34, 0.35);
  --shadow-punch: rgba(51, 40, 20, 0.28);
  --floor-light: #c9c9c9;
  --floor-dark: #a3a3a3;
  --crop-shade: rgba(0, 0, 0, 0.4);
  --viewport: #e0302a;
  --fade-away:
    linear-gradient(
      to bottom,
      #000 calc(100% - 4.5em),
      transparent);
}
:root {
  --crt-scanline: rgba(0, 0, 0, 0.06);
  --crt-vignette: rgba(0, 0, 0, 0.18);
  --crt-edge: rgba(0, 0, 0, 0.3);
  --crt-glare: rgba(255, 255, 255, 0.07);
  --crt-bezel: #141414;
  --crt-text-glow: none;
  --swatch-horse-relax-1: #e7dbc3;
  --swatch-horse-relax-2: #f6efe0;
  --swatch-horse-relax-3: #1f9e90;
  --swatch-witchlight-1: #0d0b10;
  --swatch-witchlight-2: #3b2654;
  --swatch-witchlight-3: #f2c14e;
  --swatch-doors-xp-1: #ece9d8;
  --swatch-doors-xp-2: #245edb;
  --swatch-doors-xp-3: #3c9a3c;
  --swatch-bosc-1: #f5f5f7;
  --swatch-bosc-2: #3a3a3c;
  --swatch-bosc-3: #0a7aff;
  --swatch-micross-1: #ffffff;
  --swatch-micross-2: #1d3fbb;
  --swatch-micross-3: #d2042d;
  --swatch-terminal-1: #000000;
  --swatch-terminal-2: #0d1a0d;
  --swatch-terminal-3: #39ff14;
  --swatch-terminal-white-1: #000000;
  --swatch-terminal-white-2: #1a1a1a;
  --swatch-terminal-white-3: #ffffff;
  --swatch-terminal-cyan-1: #000000;
  --swatch-terminal-cyan-2: #0a2229;
  --swatch-terminal-cyan-3: #14e1ff;
  --swatch-terminal-orange-1: #000000;
  --swatch-terminal-orange-2: #2a1606;
  --swatch-terminal-orange-3: #ff8c1a;
  --swatch-terminal-gold-1: #000000;
  --swatch-terminal-gold-2: #241c06;
  --swatch-terminal-gold-3: #ffd700;
  --swatch-pride-1:
    linear-gradient(
      to right,
      #ff4d4d 50%,
      #ff9a1f 50%);
  --swatch-pride-2:
    linear-gradient(
      to right,
      #ffe14d 50%,
      #2ee66b 50%);
  --swatch-pride-3:
    linear-gradient(
      to right,
      #3da5ff 50%,
      #b06bff 50%);
  --swatch-trans-1: #5bcefa;
  --swatch-trans-2:
    linear-gradient(
      to right,
      #f5a9b8 50%,
      #ffffff 50%);
  --swatch-trans-3: #f5a9b8;
  --swatch-bi-1: #d60270;
  --swatch-bi-2: #9b4f96;
  --swatch-bi-3: #0038a8;
  --swatch-ace-1:
    linear-gradient(
      to right,
      #000000 50%,
      #a3a3a3 50%);
  --swatch-ace-2: #ffffff;
  --swatch-ace-3: #800080;
}
:root[data-colorway=witchlight] {
  color-scheme: dark;
  --bg: #0d0b10;
  --surface: #1a1620;
  --surface-2: #241d2e;
  --chip-on: #4b3470;
  --paper: #211a2b;
  --field: #161219;
  --ink: #eee7f7;
  --ink-soft: #d2c6e4;
  --muted: #a393be;
  --faint: #7b6d94;
  --border: #3a2f4a;
  --border-strong: #574670;
  --frame: #2a1b3f;
  --teal: #f2c14e;
  --teal-deep: #3b2654;
  --accent-ink: var(--teal);
  --sea: #b48cf2;
  --pink: #e489d8;
  --peach: #f0a45c;
  --coral: #ef6f6c;
  --react-good: #2b3a33;
  --react-bad: #3d2628;
  --glow: rgba(242, 193, 78, 0.5);
  --crt-text-glow: 0 0 3px rgba(238, 231, 247, 0.35);
  --dock-text: #f4eefb;
  --on-accent: #120d18;
  --on-danger: #120d18;
  --sunk-shadow: rgba(0, 0, 0, 0.6);
  --sunk-light: rgba(255, 255, 255, 0.08);
  --row-veil: rgba(26, 22, 32, 0.6);
  --banner-veil: rgba(13, 11, 16, 0.55);
  --plate: rgba(20, 16, 26, 0.8);
  --hex-border-dark: #6b4aa3;
  --hex-border-light: #2a1f38;
  --marker: #6b5616;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-drop: rgba(0, 0, 0, 0.6);
  --shadow-punch: rgba(0, 0, 0, 0.45);
}
:root[data-colorway=doors-xp] {
  --bg: #d6e4f7;
  --surface: #ece9d8;
  --surface-2: #ddd8c4;
  --paper: #ffffff;
  --field: #ffffff;
  --ink: #1b1b1b;
  --ink-soft: #333333;
  --muted: #5d5b52;
  --faint: #8c897c;
  --border: #aca899;
  --border-strong: #7f9db9;
  --frame: #0a53c8;
  --teal: #316ac5;
  --teal-deep: #245edb;
  --sea: #3c9a3c;
  --pink: #c4508e;
  --peach: #e8902a;
  --coral: #d8452a;
  --react-good: #d7ecd2;
  --react-bad: #f6d6cf;
  --glow: rgba(49, 106, 197, 0.5);
  --dock-text: #ffffff;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --sunk-shadow: rgba(0, 20, 60, 0.45);
  --sunk-light: rgba(255, 255, 255, 0.2);
  --row-veil: rgba(236, 233, 216, 0.55);
  --banner-veil: rgba(214, 228, 247, 0.5);
  --plate: rgba(255, 255, 255, 0.8);
  --hex-border-dark: #0a3e9e;
  --hex-border-light: #e6eefc;
  --marker: #fff799;
  --scrim: rgba(10, 30, 80, 0.45);
  --shadow-drop: rgba(10, 30, 80, 0.35);
  --shadow-punch: rgba(10, 30, 80, 0.28);
}
:root[data-colorway=bosc] {
  --bg: #e5e5ea;
  --surface: #f5f5f7;
  --surface-2: #ececf0;
  --paper: #ffffff;
  --field: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #3a3a3c;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --border: #d2d2d7;
  --border-strong: #b0b0b6;
  --frame: #2c2c2e;
  --teal: #0a7aff;
  --teal-deep: #3a3a3c;
  --sea: #28a745;
  --pink: #ff2d55;
  --peach: #ff9f0a;
  --coral: #ff3b30;
  --react-good: #d8f3df;
  --react-bad: #ffdad7;
  --glow: rgba(10, 122, 255, 0.45);
  --dock-text: #f5f5f7;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --sunk-shadow: rgba(0, 0, 0, 0.45);
  --sunk-light: rgba(255, 255, 255, 0.1);
  --row-veil: rgba(245, 245, 247, 0.55);
  --banner-veil: rgba(229, 229, 234, 0.5);
  --plate: rgba(255, 255, 255, 0.8);
  --hex-border-dark: #8e8e93;
  --hex-border-light: #f2f2f7;
  --chip-on: var(--teal);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --marker: #fff3a3;
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-drop: rgba(0, 0, 0, 0.25);
  --shadow-punch: rgba(0, 0, 0, 0.2);
}
:root[data-colorway=micross] {
  --bg: #ffffff;
  --surface: #f6f7fc;
  --surface-2: #e8ecf8;
  --paper: #ffffff;
  --field: #fbfcff;
  --ink: #10162f;
  --ink-soft: #2a3152;
  --muted: #5a6385;
  --faint: #8f97b5;
  --border: #c8d0ea;
  --border-strong: #9aa6d4;
  --frame: #1d3fbb;
  --teal: #d2042d;
  --teal-deep: #2342c9;
  --sea: #1d3fbb;
  --pink: #e0457b;
  --peach: #f28c28;
  --coral: #9e0020;
  --react-good: #dfe6fb;
  --react-bad: #fbd9df;
  --glow: rgba(210, 4, 45, 0.4);
  --dock-text: #ffffff;
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --sunk-shadow: rgba(10, 20, 70, 0.45);
  --sunk-light: rgba(255, 255, 255, 0.15);
  --row-veil: rgba(246, 247, 252, 0.6);
  --banner-veil: rgba(255, 255, 255, 0.5);
  --plate: rgba(255, 255, 255, 0.82);
  --hex-border-dark: #1d3fbb;
  --hex-border-light: #ffffff;
  --marker: #ffe14d;
  --scrim: rgba(16, 22, 47, 0.45);
  --shadow-drop: rgba(16, 22, 47, 0.3);
  --shadow-punch: rgba(16, 22, 47, 0.25);
}
:root[data-colorway=terminal] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0f2410;
  --surface-2: #173a18;
  --paper: #081608;
  --field: #050f05;
  --ink: #9dff8a;
  --ink-soft: #7fe86b;
  --muted: #6fd35b;
  --faint: #52a843;
  --border: #2f8a27;
  --border-strong: #4cc23d;
  --frame: #0b2e0b;
  --teal: #39ff14;
  --teal-deep: #0d3a0d;
  --accent-ink: var(--teal);
  --sea: #39ff14;
  --chip-on: var(--sea);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --pink: #b8ff5c;
  --peach: #ffc53d;
  --coral: #ff4d4d;
  --react-good: #1a4a1a;
  --react-bad: #4a1a1a;
  --glow: rgba(57, 255, 20, 0.45);
  --crt-text-glow: 0 0 4px rgba(57, 255, 20, 0.45);
  --dock-text: #39ff14;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(57, 255, 20, 0.1);
  --row-veil: rgba(15, 36, 16, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #39ff14;
  --hex-border-light: #173a18;
  --marker: #2f7a26;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=terminal-white] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1a1a1a;
  --surface-2: #2b2b2b;
  --paper: #0d0d0d;
  --field: #070707;
  --ink: #f2f2f2;
  --ink-soft: #d9d9d9;
  --muted: #bdbdbd;
  --faint: #8c8c8c;
  --border: #6b6b6b;
  --border-strong: #a8a8a8;
  --frame: #151515;
  --teal: #ffffff;
  --teal-deep: #333333;
  --accent-ink: var(--teal);
  --sea: #ffffff;
  --chip-on: var(--sea);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --pink: #e0e0e0;
  --peach: #ffc53d;
  --coral: #ff4d4d;
  --react-good: #1f3a1f;
  --react-bad: #4a1a1a;
  --glow: rgba(255, 255, 255, 0.35);
  --crt-text-glow: 0 0 4px rgba(255, 255, 255, 0.35);
  --dock-text: #ffffff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 255, 255, 0.1);
  --row-veil: rgba(26, 26, 26, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #ffffff;
  --hex-border-light: #2b2b2b;
  --marker: #5a5a5a;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=terminal-cyan] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0a2229;
  --surface-2: #12363f;
  --paper: #061518;
  --field: #030d0f;
  --ink: #8af4ff;
  --ink-soft: #6be4f2;
  --muted: #5bcfdc;
  --faint: #3f9fab;
  --border: #237f8a;
  --border-strong: #3dbccb;
  --frame: #082a30;
  --teal: #14e1ff;
  --teal-deep: #0a333a;
  --accent-ink: var(--teal);
  --sea: #14e1ff;
  --chip-on: var(--sea);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --pink: #5cffe4;
  --peach: #ffc53d;
  --coral: #ff4d4d;
  --react-good: #0f3a40;
  --react-bad: #4a1a1a;
  --glow: rgba(20, 225, 255, 0.45);
  --crt-text-glow: 0 0 4px rgba(20, 225, 255, 0.45);
  --dock-text: #14e1ff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(20, 225, 255, 0.1);
  --row-veil: rgba(10, 34, 41, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #14e1ff;
  --hex-border-light: #12363f;
  --marker: #1f6f7a;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=terminal-orange] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #2a1606;
  --surface-2: #3f220b;
  --paper: #170c03;
  --field: #0f0802;
  --ink: #ffb870;
  --ink-soft: #f5a04f;
  --muted: #e08f3f;
  --faint: #a8682b;
  --border: #8a4f1a;
  --border-strong: #cc7a2a;
  --frame: #2e1705;
  --teal: #ff8c1a;
  --teal-deep: #3a2008;
  --accent-ink: var(--teal);
  --sea: #ff8c1a;
  --chip-on: var(--sea);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --pink: #ffd27a;
  --peach: #ffe14d;
  --coral: #ff4d4d;
  --react-good: #3a2a0a;
  --react-bad: #4a1a1a;
  --glow: rgba(255, 140, 26, 0.45);
  --crt-text-glow: 0 0 4px rgba(255, 140, 26, 0.45);
  --dock-text: #ff8c1a;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 140, 26, 0.1);
  --row-veil: rgba(42, 22, 6, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #ff8c1a;
  --hex-border-light: #3f220b;
  --marker: #7a4a1a;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=terminal-gold] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #241c06;
  --surface-2: #3a2e0b;
  --paper: #140f03;
  --field: #0c0902;
  --ink: #ffe58a;
  --ink-soft: #f5d66b;
  --muted: #e0c055;
  --faint: #a88d36;
  --border: #8a7020;
  --border-strong: #ccaa33;
  --frame: #2a2005;
  --teal: #ffd700;
  --teal-deep: #3a3008;
  --accent-ink: var(--teal);
  --sea: #ffd700;
  --chip-on: var(--sea);
  --chip-on-ink: var(--on-accent);
  --chip-on-count: var(--on-accent);
  --pink: #fff1a8;
  --peach: #ffb347;
  --coral: #ff4d4d;
  --react-good: #3a3410;
  --react-bad: #4a1a1a;
  --glow: rgba(255, 215, 0, 0.5);
  --crt-text-glow: 0 0 4px rgba(255, 215, 0, 0.45);
  --dock-text: #ffd700;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 215, 0, 0.1);
  --row-veil: rgba(36, 28, 6, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #ffd700;
  --hex-border-light: #3a2e0b;
  --marker: #7a6420;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=pride] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #16121f;
  --surface-2: #221b30;
  --chip-on: #4a2a78;
  --paper: #100c18;
  --field: #0a0810;
  --ink: #f7f5ff;
  --ink-soft: #ddd8ea;
  --muted: #b8b8c8;
  --faint: #8a8aa0;
  --border: #7c45c2;
  --border-strong: #b06bff;
  --frame:
    linear-gradient(
      
      to right,
      #c0102a,
      #c45200,
      #8a6d00,
      #1a7f36,
      #1d5ccf,
      #7a2bc2 );
  --teal: #3da5ff;
  --teal-deep: #1a0f33;
  --accent-ink: var(--teal);
  --sea: #2ee66b;
  --pink: #ff6ec7;
  --peach: #ff9a1f;
  --coral: #ff4d4d;
  --react-good: #123d22;
  --react-bad: #4a1418;
  --glow: rgba(61, 165, 255, 0.5);
  --crt-text-glow: 0 0 3px rgba(247, 245, 255, 0.35);
  --dock-text: #ffffff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 255, 255, 0.08);
  --row-veil: rgba(22, 18, 31, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #b06bff;
  --hex-border-light: #221b30;
  --marker: #6b5600;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=trans] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0f1a20;
  --surface-2: #1a2a33;
  --chip-on: #2d5a73;
  --paper: #0a1318;
  --field: #060c10;
  --ink: #f7f9ff;
  --ink-soft: #dbe3ea;
  --muted: #b9c4cc;
  --faint: #8796a0;
  --border: #4f87a8;
  --border-strong: #f5a9b8;
  --frame:
    linear-gradient(
      
      to right,
      #5bcefa,
      #f5a9b8,
      #ffffff,
      #f5a9b8,
      #5bcefa );
  --frame-text: #141414;
  --teal: #5bcefa;
  --teal-deep: #0b2230;
  --accent-ink: var(--teal);
  --sea: #4fe0b0;
  --pink: #f5a9b8;
  --peach: #ffb057;
  --coral: #ff5c6c;
  --react-good: #123d30;
  --react-bad: #4a1420;
  --glow: rgba(91, 206, 250, 0.5);
  --crt-text-glow: 0 0 3px rgba(247, 245, 255, 0.35);
  --dock-text: #ffffff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 255, 255, 0.08);
  --row-veil: rgba(15, 26, 32, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #f5a9b8;
  --hex-border-light: #1a2a33;
  --marker: #1f5a78;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=bi] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #170f1c;
  --surface-2: #24182c;
  --chip-on: #5a2d6b;
  --paper: #110b16;
  --field: #0a060d;
  --ink: #faf5ff;
  --ink-soft: #e0d6ea;
  --muted: #c0b6c8;
  --faint: #958aa0;
  --border: #8a4f9e;
  --border-strong: #c47fd6;
  --frame:
    linear-gradient(
      
      to right,
      #d60270 20%,
      #9b4f96 50%,
      #0038a8 80% );
  --teal: #4d8bff;
  --teal-deep: #120a2a;
  --accent-ink: var(--teal);
  --sea: #3fdc7a;
  --pink: #ff5fae;
  --peach: #ff9a1f;
  --coral: #ff4d4d;
  --react-good: #123d22;
  --react-bad: #4a1418;
  --glow: rgba(77, 139, 255, 0.5);
  --crt-text-glow: 0 0 3px rgba(247, 245, 255, 0.35);
  --dock-text: #ffffff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 255, 255, 0.08);
  --row-veil: rgba(23, 15, 28, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #c47fd6;
  --hex-border-light: #24182c;
  --marker: #5a2a6b;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
:root[data-colorway=ace] {
  color-scheme: dark;
  --bg: #242424;
  --surface: #2e2e2e;
  --surface-2: #3a3a3a;
  --chip-on: #5a2a6b;
  --paper: #1c1c1c;
  --field: #161616;
  --ink: #f7f7f7;
  --ink-soft: #dcdcdc;
  --muted: #b8b8b8;
  --faint: #8f8f8f;
  --border: #6b6b6b;
  --border-strong: #a3a3a3;
  --frame:
    linear-gradient(
      
      to right,
      #000000,
      #a3a3a3,
      #ffffff,
      #800080 );
  --teal: #c060e0;
  --teal-deep: #1a0a1f;
  --accent-ink: var(--teal);
  --sea: #3fdc7a;
  --pink: #d9a3ec;
  --peach: #ff9a1f;
  --coral: #ff5c5c;
  --react-good: #123d22;
  --react-bad: #4a1418;
  --glow: rgba(192, 96, 224, 0.5);
  --crt-text-glow: 0 0 3px rgba(247, 245, 255, 0.35);
  --dock-text: #ffffff;
  --on-accent: #000000;
  --on-danger: #000000;
  --sunk-shadow: rgba(0, 0, 0, 0.7);
  --sunk-light: rgba(255, 255, 255, 0.08);
  --row-veil: rgba(46, 46, 46, 0.6);
  --banner-veil: rgba(0, 0, 0, 0.55);
  --plate: rgba(0, 0, 0, 0.8);
  --hex-border-dark: #a3a3a3;
  --hex-border-light: #3a3a3a;
  --marker: #5a2a6b;
  --scrim: rgba(0, 0, 0, 0.7);
  --shadow-drop: rgba(0, 0, 0, 0.7);
  --shadow-punch: rgba(0, 0, 0, 0.5);
}
.jag-line,
.jag-line-2,
.jag-line-top {
  position: relative;
  border: var(--lw) solid transparent;
}
.jag-line {
  clip-path: var(--jag-1);
}
.jag-line-2 {
  clip-path: var(--jag);
}
.jag-line-top {
  clip-path: var(--jag-top);
}
.jag-line::after,
.jag-line-2::after,
.jag-line-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
}
.jag-line::after {
  clip-path: var(--ring-1);
}
.jag-line-2::after {
  clip-path: var(--ring);
}
.jag-line-top::after {
  clip-path: var(--ring-top);
}
.jag-field {
  border: var(--lw) solid transparent;
  clip-path: var(--jag-1);
  background-origin: border-box;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)),
    linear-gradient(
      to bottom right,
      var(--line) calc(50% + var(--lw)),
      transparent 0),
    linear-gradient(
      to bottom left,
      var(--line) calc(50% + var(--lw)),
      transparent 0),
    linear-gradient(
      to top right,
      var(--line) calc(50% + var(--lw)),
      transparent 0),
    linear-gradient(
      to top left,
      var(--line) calc(50% + var(--lw)),
      transparent 0);
  background-position:
    var(--j) 0,
    var(--j) 100%,
    0 var(--j),
    100% var(--j),
    0 0,
    100% 0,
    0 100%,
    100% 100%;
  background-size:
    calc(100% - 2 * var(--j)) var(--lw),
    calc(100% - 2 * var(--j)) var(--lw),
    var(--lw) calc(100% - 2 * var(--j)),
    var(--lw) calc(100% - 2 * var(--j)),
    var(--j) var(--j),
    var(--j) var(--j),
    var(--j) var(--j),
    var(--j) var(--j);
}
.chip::after,
.copy-bucket::after,
.minipost::after,
.person-chip-label::after,
.ceremony-download::after,
.persona-address-copy::after,
.computer-row::after,
.sync-act::after,
.progress-track::after,
.removal-option::after,
.profile-save::after,
.ledger-glance::after,
.ledger-block::after,
.people-sort::after,
.people-more::after,
.feed-post::after,
.public-posts-more::after,
.feed-entry-via-roster::after,
.feed-unpublish-no::after,
.feed-more::after,
.feed-fresh-btn::after,
.feed-entry-unveil::after,
.warn-chip::after,
.bucket-name::after,
.bucket-menu::after,
.search-opts-menu::after,
.search-opts-kind::after,
.drawing-sticker::after,
.rt-room::after,
.rt-card::after,
.welcome-tabs .tab::after,
.welcome-local::after,
.welcome-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  clip-path: var(--ring-1);
}
.person-card-bio::after,
.person-row::after,
.persona-menu-item::after,
.profile-avatar::after,
.feed-composer::after,
.feed-item::after,
.label-emoji-strip::after,
.feed-entry::after,
.bake-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  clip-path: var(--ring);
}
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), textarea, select) {
  background-color: var(--field);
}
@media (max-width: 900px) {
  :where(button:not(.label-x, .annot-tag-x, .warn-chip-x, .device-follow-x, .computer-remove, .quickbar-bank, .pane-min, .label-emoji, .skip-link), select, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden])) {
    min-height: 2.25rem;
    min-width: 2.25rem;
  }
  :where(input[type=checkbox], input[type=radio]) {
    width: 1.3rem;
    height: 1.3rem;
  }
  :where(input[type=range]) {
    min-height: 2rem;
  }
  :where(label:has(> input[type=checkbox], > input[type=radio])) {
    padding-block: 0.35rem;
  }
}

/* shell.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.ph {
  vertical-align: -0.15em;
}
.ph path[opacity="0.2"] {
  fill: var(--teal);
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--ink);
}
.app-main {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
.app-frame {
  flex: 1;
  min-height: 0;
  margin: 12px;
  padding: 0 10px 10px;
  background: var(--frame);
  clip-path: var(--panel-clip);
  display: flex;
  flex-direction: column;
}
.app-frame-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--surface);
  clip-path: var(--panel-clip);
  position: relative;
}
.kept-page-fill {
  height: 100%;
}
.kept-page-under {
  position: absolute;
  inset: 16px 20px;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 900px) {
  .app-frame {
    margin: 4px;
    padding: 0 5px 5px;
  }
  .app-frame-inner {
    padding: 10px;
  }
  .kept-page-under {
    inset: 10px;
  }
}
.app-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.app-header {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0 0.45rem 0.5rem;
  background: var(--frame);
  color: var(--frame-text);
}
.app-header-lead {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.outside-page-title {
  display: none;
}
@media (max-width: 900px) {
  .outside-band-title {
    display: none;
  }
  .outside-page-title {
    display: block;
    margin: 0.4rem 0 1rem;
    text-align: center;
    font-family: "Press Start 2P", monospace;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
  }
}
.app-header-title {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Press Start 2P", monospace;
  font-size: 1.05rem;
  color: var(--frame-text);
}
.bucket-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  margin-bottom: 0.4rem;
}
.bucket-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.15rem 0.55rem;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.85rem;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.bucket-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bucket-name:hover {
  --line: var(--teal);
}
.bucket-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid transparent;
  --line: var(--ink);
  --lw: 2px;
  --j: 4px;
  clip-path: var(--jag-1);
  box-shadow: 0 8px 20px var(--shadow-drop);
}
.bucket-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: none;
  border: 0;
  --j: 2.5px;
  clip-path: var(--jag);
  padding: 0.4rem 0.55rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.bucket-menu-item:hover {
  background: var(--surface-2);
}
.bucket-menu-item.current {
  font-weight: 700;
}
.bucket-menu-count {
  color: var(--muted);
  font-size: 0.85em;
}
.bucket-menu-new {
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  color: var(--accent-ink);
}
@media (max-width: 900px) {
  .bucket-name {
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
  }
  .bucket-menu-item {
    padding: 0.75rem 0.7rem;
  }
}
.bucket-menu-delete {
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
  --j: 3px;
  clip-path: var(--jag-bottom);
  color: var(--coral);
}
.app-header-search-box {
  --search-h: 1.8rem;
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  position: relative;
}
.app-header-search-box::before {
  content: "";
  position: absolute;
  right: 100%;
  top: -0.35rem;
  bottom: -0.45rem;
  width: 2.5rem;
  background:
    linear-gradient(
      to right,
      transparent,
      var(--frame) 85%);
  pointer-events: none;
}
.app-header-search {
  width: 240px;
  max-width: 100%;
  min-width: 0;
  height: var(--search-h);
  box-sizing: border-box;
  background: var(--field);
  border: 0;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0 0.65rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.search-opts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--search-h);
  height: var(--search-h);
  flex-shrink: 0;
  background: var(--surface);
  border: 0;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0;
  font-size: 1.05rem;
  color: var(--faint);
  cursor: pointer;
}
.search-opts-btn:hover {
  color: var(--ink);
}
.search-opts-btn.active {
  color: var(--sea);
}
.search-opts-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper);
  border: 1px solid transparent;
  --line: var(--border-strong);
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.45rem 0.6rem;
  box-shadow: 0 4px 14px var(--shadow-drop);
  white-space: nowrap;
}
.search-opts-label {
  color: var(--faint);
  font-size: 0.85rem;
}
.search-opts-kind {
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.search-opts-kind:hover {
  --line: var(--border-strong);
}
.app-header-search::placeholder {
  color: var(--muted);
}
.app-header-search:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.app-header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
@media (max-width: 900px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app-header:has(.app-header-search-box) .app-header-lead {
    display: none;
  }
  .app-header-search-box {
    --search-h: 2.3rem;
    grid-column: 1;
    justify-self: start;
  }
  .app-header-search-box::before {
    display: none;
  }
  .app-header-actions {
    grid-column: 2;
  }
}
.app-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  background: var(--surface);
  border: 0;
  clip-path: var(--dot-clip);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 1.45rem;
  box-shadow: inset 0 1px 2px var(--shadow-punch);
  transition: color 0.12s ease, transform 0.12s ease;
}
.app-header-btn:hover {
  color: var(--teal);
  transform: scale(1.06);
}
.app-header-btn-square {
  clip-path: none;
}
.loading-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  color: var(--muted);
}
.mq-doc li > p {
  margin-block: 0.1em;
}
.update-notice {
  max-width: 40rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--coral);
  color: var(--on-danger);
  --j: 4px;
  clip-path: var(--jag-1);
}
.update-notice p {
  margin: 0;
}
.update-notice-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1rem;
}
.update-notice-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.update-notice a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.update-notice .update-notice-note {
  margin-top: 0.35rem;
  padding-left: 2rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* auth.css */
.welcome {
  max-width: var(--post-measure);
  margin: 8vh auto 0;
  text-align: center;
}
.welcome-notice {
  background: var(--surface-2);
  border: 1px solid var(--peach);
  color: var(--ink);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  text-align: left;
}
.welcome-notice a {
  color: var(--accent-ink);
}
.welcome-local {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: -0.8rem 0 1.2rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--paper);
  border: 1px solid transparent;
  --line: var(--teal);
  --j: 4px;
  clip-path: var(--jag-1);
}
.welcome-local-icon {
  font-size: 1.8rem;
  color: var(--teal);
  line-height: 1;
}
.welcome-local-mode {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.welcome-local-address {
  font-family: "Press Start 2P", monospace;
  font-size: 0.85rem;
  color: var(--accent-ink);
}
.welcome-box {
  position: relative;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  --j: 4px;
  clip-path: var(--jag-1);
}
.welcome-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.welcome-sub {
  color: var(--muted);
  margin: 0 0 2rem;
}
.marquee {
  margin: 0 0 2rem;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 8%,
      black 92%,
      transparent);
}
.marquee-track {
  display: inline-block;
  animation: marquee-slide var(--marquee-seconds, 60s) linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-line::after {
  content: "\1f40e";
  margin: 0 1.5em;
}
@keyframes marquee-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    white-space: normal;
    mask-image: none;
  }
  .marquee-track {
    animation: none;
  }
  .marquee-line[aria-hidden=true] {
    display: none;
  }
}
.welcome-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.tab {
  display: flex;
  align-items: center;
  background: none;
  border: var(--lw) solid transparent;
  --line: var(--border-strong);
  --j: 3px;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.tab.active {
  color: var(--teal);
  --line: var(--teal);
}
.welcome-tabs .tab {
  position: relative;
  gap: 0.4rem;
  text-decoration: none;
  font-size: 0.95rem;
  border-color: transparent;
  --line: var(--border-strong);
  clip-path: var(--jag-1);
}
.welcome-tabs .tab.active {
  --line: var(--teal);
}
.welcome-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}
.welcome-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.welcome-form .jag-field {
  background-color: var(--field);
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font: inherit;
}
.welcome-form .jag-field:focus {
  outline: none;
  --line: var(--teal);
}
.field-note {
  margin: -0.4rem 0 0;
  font-size: 0.8rem;
}
.field-note.ok {
  color: var(--sea);
}
.field-note.bad {
  color: var(--coral);
}
.form-error {
  margin: 0;
  color: var(--coral);
  font-size: 0.85rem;
}
.welcome-go {
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--on-accent);
  padding: 0.6rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.welcome-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.hit-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}
.hit-counter-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
}
.hit-counter-wheels {
  display: inline-flex;
  gap: 2px;
}
.hit-counter-wheel {
  display: inline-block;
  min-width: 1.1em;
  padding: 0.15rem 0.2rem;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-weight: 700;
  text-align: center;
  color: var(--bg);
  background: var(--ink);
  --j: 2px;
  clip-path: var(--jag-1);
}
.hit-counter-graph {
  width: 100%;
  max-width: 32rem;
}
.hit-counter-frame {
  display: flex;
  gap: 0.3rem;
}
.hit-counter-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--faint);
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 0.7rem;
}
.hit-counter-plot {
  display: block;
  flex: 1;
  min-width: 0;
  height: auto;
  background: var(--surface);
}
.hit-counter-line-path {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.hit-counter-hit {
  fill: transparent;
  cursor: pointer;
}
.hit-counter-dot {
  fill: var(--accent-ink);
}
.hit-counter-day.pointed .hit-counter-dot {
  fill: var(--ink);
}
.hit-counter-dates {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0 1.6rem;
  color: var(--faint);
  font-size: 0.7rem;
}
.hit-counter-readout {
  margin: 0.3rem 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.welcome-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.download-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.download-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: var(--teal);
  color: var(--on-accent);
  --j: 3px;
  clip-path: var(--jag-1);
  font-weight: 600;
  text-decoration: none;
}
.download-button svg {
  font-size: 1.4rem;
}
.download-button:hover,
.download-button:focus-visible {
  background: var(--teal-deep);
  color: var(--dock-text);
}
.download-server {
  margin: 0;
  color: var(--faint);
  font-size: 0.8rem;
}
.download-version {
  color: inherit;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
}
a.download-version:hover,
a.download-version:focus-visible {
  color: var(--muted);
}
.front-door {
  max-width: var(--post-measure);
  margin: 0 auto 3rem;
}
.front-shelf {
  margin-top: 2rem;
}
.front-shelf-title {
  font-size: 1.3rem;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  margin: 0 0 1rem;
}
.front-pins-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.front-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.9rem 0.6rem;
}
.front-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.front-person-name {
  max-width: 100%;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.front-more {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  align-self: center;
  color: var(--accent-ink);
  font-size: 1.1rem;
}
.front-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0 0;
}

/* quickbar.css */
.quickbar {
  flex-shrink: 0;
  height: calc(3rem + var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px calc(6px + var(--safe-bottom));
  background: var(--teal-deep);
  overflow: visible;
  position: relative;
  z-index: 2;
}
.quickbar-clock-sep {
  align-self: stretch;
  width: 1px;
  margin: 0.15em 0.15em;
  background: currentColor;
  opacity: 0.35;
}
.quickbar-bank {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}
.quickbar-bank:hover,
.quickbar-bank:focus-visible {
  text-decoration: underline;
}
.quickbar-clock {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.55em;
  color: var(--dock-text);
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  opacity: 0.9;
  cursor: default;
  user-select: none;
  background: color-mix(in srgb, var(--teal-deep) 82%, black);
  box-shadow: inset 0 1px 3px var(--sunk-shadow), inset 0 -1px 0 var(--sunk-light);
  margin-top: 6px;
}
.quickbar-sync {
  align-self: center;
  margin: 6px 0 0 0.5rem;
  padding: 0.15em 0.25em;
  display: inline-flex;
  align-items: center;
  font-size: 1.35rem;
  color: var(--dock-text);
  background: none;
  border: none;
  opacity: 0.85;
  cursor: pointer;
}
.quickbar-sync:hover,
.quickbar-sync:focus-visible {
  opacity: 1;
}
.quickbar-sync-narrow {
  position: absolute;
  right: 20px;
  top: calc((100% - var(--safe-bottom)) / 2);
  margin: 0;
  transform: translateY(-50%);
}
.quickbar-sync-down svg,
.quickbar-sync-up svg {
  animation: quickbar-sync-wobble 1.6s ease-in-out infinite;
}
@keyframes quickbar-sync-wobble {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-0.5px, 0.5px) rotate(-3deg);
  }
  75% {
    transform: translate(0.5px, -0.5px) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .quickbar-sync-down svg,
  .quickbar-sync-up svg {
    animation: none;
  }
}
.quickbar-version {
  align-self: center;
  margin: 6px 0.6rem 0 auto;
  color: var(--dock-text);
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.65;
  text-decoration: none;
  white-space: nowrap;
}
a.quickbar-version:hover,
a.quickbar-version:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.quickbar-apps {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.quickbar-hex {
  --qh-w: 46px;
  width: var(--qh-w);
  height: calc(var(--qh-w) * 0.9749);
  padding: 4px;
  border: 0;
  background: var(--teal-deep);
  clip-path: var(--face-clip);
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.quickbar-switcher {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.4rem;
}
.quickbar-slot-persona:hover .quickbar-switcher,
.quickbar-slot-persona:has(:focus-visible) .quickbar-switcher {
  display: flex;
}
.quickbar-hex-lead {
  --qh-w: 54px;
}
.quickbar-slot {
  position: relative;
  display: inline-flex;
}
.quickbar-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  --j: 4.5px;
  clip-path: var(--jag);
  background: var(--coral);
  color: var(--on-danger);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.quickbar-hex-face {
  width: 100%;
  height: 100%;
  background: var(--surface);
  clip-path: var(--face-clip);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.quickbar-hex-me {
  background: var(--me-ring);
}
.quickbar-hex-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.quickbar-hex-lead .quickbar-hex-face {
  font-size: 1.6rem;
}
.quickbar-hex:not(.active) {
  opacity: 0.72;
}
.quickbar-hex:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.quickbar-clock-pie {
  width: 0.95em;
  height: 0.95em;
  flex: none;
}
.quickbar-narrow {
  justify-content: center;
}
.quickbar-hex-home {
  --qh-w: 62px;
}
.quickbar-hex-home .quickbar-hex-face {
  font-size: 1.8rem;
}

/* persona.css */
.null-state,
.ceremony {
  max-width: 420px;
  margin: 12vh auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.export-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-decoration: none;
}
.export-again {
  align-self: flex-start;
}
.import-export-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--teal);
  --j: 3px;
  clip-path: var(--jag-1);
  line-height: 1.5;
}
.import-export-notice,
.import-export-notice a {
  color: var(--on-accent);
}
.progress {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.progress-track {
  height: 0.7rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--teal);
  transition: width 0.4s ease;
}
.progress-words {
  color: var(--muted);
  font-size: 0.85rem;
}
.import-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.import-log {
  margin: 0;
  padding: 0.5rem 0.75rem;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}
.import-file {
  color: var(--ink-soft);
  font: inherit;
}
.first-sync {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
}
.first-sync-title {
  margin: 0;
  font-size: 1rem;
}
.first-sync .null-sub {
  margin: 0;
}
.computers-alone {
  margin-top: 2rem;
}
.computers-alone .welcome-go {
  align-self: center;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
}
.null-glyph {
  font-size: 4rem;
  line-height: 1;
  color: var(--teal);
}
.null-title {
  font-family: "Press Start 2P", monospace;
  font-size: 1rem;
  color: var(--teal);
  margin: 0;
  line-height: 1.6;
}
.null-sub {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.spare-key {
  display: block;
  background: var(--surface);
  border: 1px dashed var(--teal);
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.8rem;
  padding: 0.8rem;
  word-break: break-all;
  user-select: all;
}
.ceremony-download {
  background: none;
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--muted);
  padding: 0.4rem 1rem;
  cursor: pointer;
  font: inherit;
  align-self: center;
}
.ceremony-download:hover {
  --line: var(--teal);
  color: var(--teal);
}
.ceremony-confirm {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.persona-chip {
  width: 14px;
  height: 14px;
  --j: 4px;
  clip-path: var(--jag-1);
  display: inline-block;
}
.name-input {
  background-color: var(--field);
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font: inherit;
  text-align: center;
  font-size: 1.1rem;
}
.name-input:focus {
  outline: none;
  --line: var(--teal);
}
.skip-link {
  background: none;
  border: none;
  color: var(--faint);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.spare-paste {
  background-color: var(--surface);
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  color: var(--sea);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.75rem;
  padding: 0.55rem 0.7rem;
  resize: vertical;
}
.spare-paste:focus {
  outline: none;
  --line: var(--teal);
}
.persona-page {
  max-width: 520px;
  margin: 4vh auto 0;
}
.persona-page-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.persona-page-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.persona-page-head .persona-page-title {
  margin: 0;
}
.persona-address {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.7rem 1rem;
  margin: 0 0 1.2rem;
}
.persona-address-label {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
}
.persona-address-value {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.persona-address-value:hover code {
  color: var(--teal);
  text-decoration: underline;
}
.persona-slug-name {
  font-weight: 700;
}
.persona-address-copy {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.persona-address-copy:hover {
  --line: var(--teal);
}
.persona-menu {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.persona-menu-note {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.persona-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.persona-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  background: var(--surface);
}
.persona-row-current {
  --line: var(--border-strong);
}
.persona-row-words {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.persona-row-words small {
  color: var(--ink-soft);
}
.persona-row-mark {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.persona-row-switch {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.persona-list-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.persona-menu-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.9rem 1rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.persona-menu-item:hover {
  --line: var(--teal);
  transform: translateY(-1px);
}
.persona-menu-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.persona-menu-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.persona-menu-label small {
  color: var(--muted);
  font-size: 0.8rem;
}
.persona-menu-danger:hover {
  --line: var(--coral);
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.profile-field .name-input {
  text-align: left;
  font-size: 1rem;
  width: 100%;
}
.profile-field-label {
  color: var(--muted);
  font-size: 0.85rem;
}
.profile-slug-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.profile-slug-at {
  color: var(--ink-soft);
}
.profile-slug-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.35rem 0.5rem;
  --j: 0.25em;
  --line: var(--border-strong);
  position: relative;
  background-color: var(--field);
  color: var(--ink);
}
.profile-slug-last {
  color: var(--ink-soft);
}
.profile-domain-note {
  color: var(--ink-soft);
}
.profile-domain-record {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.7rem 1rem;
}
.profile-domain-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
}
.profile-domain-line code {
  min-width: 0;
  word-break: break-all;
  font-size: 0.78rem;
}
.profile-bio {
  background-color: var(--field);
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font: inherit;
  resize: vertical;
  width: 100%;
}
.profile-bio:focus {
  outline: none;
  --line: var(--teal);
}
.computers {
  max-width: 480px;
  margin: 4vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.computers-title {
  font-family: "Press Start 2P", monospace;
  font-size: 1rem;
  color: var(--teal);
  margin: 0;
}
.computers-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0 1rem;
}
.computers-subtitle {
  color: var(--ink);
  font-size: 1rem;
  margin: 1.5rem 0 0;
}
.computers-subtitle + .welcome-download {
  margin-top: 1rem;
}
.computer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.computer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.5rem 0.8rem;
}
.computer-name {
  color: var(--sea);
}
.computer-detail {
  color: var(--faint);
  font-size: 0.85rem;
}
.computer-facts {
  color: var(--faint);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.75rem;
}
.held-code-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.held-code {
  margin: 0.1rem 0 0.5rem;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 2rem;
  letter-spacing: 0.15em;
}
.held-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.held-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}
.held-count {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
}
.computer-sync {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
}
.sync-computer-state {
  color: var(--ink-soft);
}
.sync-computer-state.sync-failing {
  color: var(--coral);
}
.sync-quiet-act {
  background: none;
  border: 0;
  padding: 0;
  color: var(--teal);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.sync-quiet-act:disabled {
  color: var(--muted);
  cursor: default;
}
.sync-computer-gap {
  color: var(--muted);
  font-size: 0.85rem;
}
.sync-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}
.sync-now {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sync-act {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--teal);
  padding: 0.6rem 0.9rem;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sync-act:hover {
  --line: var(--teal);
}
.sync-report {
  margin: 0;
  padding: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
.computer-status {
  color: var(--coral);
}
.computer-remove {
  background: none;
  border: none;
  padding: 0 0 0 0.5rem;
  color: var(--faint);
  cursor: pointer;
  line-height: 1;
}
.computer-remove:hover {
  color: var(--coral);
}
.computer-remove svg {
  width: 0.9rem;
  height: 0.9rem;
}
.removal-option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.6rem 0.8rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.removal-option:hover,
.removal-option-picked {
  --line: var(--sea);
}
.removal-option-forceful:hover,
.removal-option-forceful.removal-option-picked {
  --line: var(--coral);
}
.removal-option-title {
  color: var(--sea);
  font-weight: 600;
}
.removal-option-forceful .removal-option-title {
  color: var(--coral);
}
.removal-option-sub {
  color: var(--faint);
  font-size: 0.85rem;
}
.removal-fact {
  color: var(--faint);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.75rem;
  margin: 0.7rem 0 0.3rem;
}
.removal-blast {
  color: var(--coral);
  font-size: 0.85rem;
  margin: 0.7rem 0 0;
}
.removal-go {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: var(--coral);
  color: var(--on-danger);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  font-weight: 600;
  cursor: pointer;
}
.removal-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.persona-page.id-page {
  max-width: var(--post-measure);
}
.id-page .id-words {
  color: var(--muted);
  font-size: 0.85rem;
  margin: -0.8rem 0 1rem;
}
.id-page .id-bio {
  white-space: pre-wrap;
  color: var(--ink-soft);
}
.id-page .id-address code {
  display: inline-block;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  --j: 4px;
  clip-path: var(--jag-1);
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  word-break: break-all;
}
.id-page .id-quiet {
  color: var(--muted);
  font-size: 0.85rem;
}
.profile-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.profile-count {
  color: var(--faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.profile-count-over {
  color: var(--coral);
  font-weight: 600;
}
.profile-setting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-save-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.4rem 0 0.8rem;
}
.profile-save {
  background: var(--teal);
  border: 1px solid transparent;
  --line: var(--teal);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--on-accent);
  font: inherit;
  padding: 0.4rem 1.4rem;
  cursor: pointer;
}
.profile-save:disabled {
  background: var(--surface);
  --line: var(--border);
  color: var(--faint);
  cursor: default;
}
.profile-flash {
  color: var(--teal);
  font-size: 0.85rem;
}
.profile-flash-err {
  color: var(--coral);
}
.contact-ledger {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  --j: 5px;
  clip-path: var(--jag);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ledger-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
}
.ledger-head::-webkit-details-marker {
  display: none;
}
.ledger-head::after {
  content: "\25b8";
  margin-left: auto;
  color: var(--faint);
  transition: transform 0.12s ease;
}
.contact-ledger[open] > .ledger-head::after {
  transform: rotate(90deg);
}
.ledger-glance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  padding: 0.2rem 0.7rem;
}
.ledger-glance-empty {
  color: var(--faint);
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}
.ledger-glance-blocked {
  color: var(--coral);
  border-color: var(--coral);
  font-size: 1.05rem;
}
.glance-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--faint);
  font-size: 0.95rem;
}
.glance-pair + .glance-pair {
  border-left: 1px solid var(--border);
  padding-left: 0.4rem;
}
.glance-bars {
  display: inline-flex;
  font-size: 1rem;
}
.ledger-title {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
}
.ledger-block {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--coral);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.4rem 0.9rem;
  margin-top: 0.4rem;
  cursor: pointer;
}
.ledger-block:hover {
  --line: var(--coral);
}
.ledger-blocked {
  background: var(--coral);
  color: var(--on-danger);
  border-color: var(--coral);
}
.ledger-note {
  margin: 0;
  color: var(--coral);
  font-size: 0.8rem;
}
.ledger-dial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ledger-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
  color: var(--ink);
}
.ledger-label small {
  color: var(--muted);
  font-size: 0.72rem;
  max-width: 18rem;
}
.ledger-select {
  background-color: var(--field);
  --line: var(--border);
  position: relative;
  --j: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  max-width: 16rem;
}
.people-inner {
  max-width: var(--post-measure);
  margin: 3vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.people-shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.6rem;
}
.people-shelf-title {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
}
.people-sorts {
  display: flex;
  gap: 0.3rem;
}
.people-sort {
  background: none;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.15rem 0.7rem;
  cursor: pointer;
}
.people-sort-on {
  border-color: var(--teal);
  color: var(--teal);
}
.people-empty {
  color: var(--muted);
  font-size: 0.9rem;
}
.people-more {
  align-self: center;
  margin-top: 0.5rem;
  background: none;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 1rem;
  cursor: pointer;
}
.people-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ledger-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
}
.ledger-nick {
  background-color: var(--surface);
  --line: var(--border);
  position: relative;
  --j: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  max-width: 16rem;
}
.ledger-nick:focus {
  outline: none;
  --line: var(--teal);
}
.person-cell {
  display: inline-flex;
  justify-content: center;
  font-size: 1.05rem;
}
.sig-0 {
  color: var(--faint);
}
.sig-1 {
  color: var(--muted);
}
.sig-2 {
  color: var(--ink-soft);
}
.sig-3 {
  color: var(--teal);
}
.sig-4 {
  color: var(--sea);
}
.profile-banner-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.profile-banner {
  width: 100%;
  height: 5rem;
  background-size: cover;
  background-position: center;
  --j: 6px;
  clip-path: var(--jag);
}
.profile-banner-acts {
  display: flex;
  gap: 0.5rem;
}
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.profile-avatar {
  width: 4.5rem;
  height: 4.5rem;
  --j: 6px;
  clip-path: var(--jag);
  object-fit: cover;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  display: block;
}
.profile-avatar-empty {
  opacity: 0.6;
}
.profile-avatar-pick {
  font: inherit;
  color: var(--teal);
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.profile-avatar-pick:disabled {
  color: var(--muted);
  cursor: default;
}
.feed-app {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.node-feed {
  max-width: var(--post-measure);
  width: 100%;
  margin: 3vh auto 0;
}
.feed-columns {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.feed-columns .feed-compose {
  width: var(--w-compose, 380px);
  min-width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
}
.feed-columns .feed-saved {
  width: var(--w-feeds, 180px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
  min-height: 0;
}
.feed-saved-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  --j: 3px;
  clip-path: var(--jag-1);
}
.feed-saved-row:hover {
  background: var(--surface);
}
.feed-saved-row.active {
  background: var(--pink);
}
.feed-saved-name,
.feed-saved-forget {
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.feed-saved-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.85rem;
  padding: 0.28rem 0.4rem 0.28rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-saved-forget {
  display: inline-flex;
  padding: 0.28rem 0.3rem;
  color: var(--muted);
  opacity: 0.6;
}
.feed-saved-forget:hover {
  opacity: 1;
}
.feed-saved-spacer {
  visibility: hidden;
}
.feed-saved-row.active .feed-saved-name,
.feed-saved-row.active .feed-saved-forget {
  color: var(--surface);
}
.feed-composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 6px;
  clip-path: var(--jag);
  padding: 0.9rem 1rem;
}
.feed-composer-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.feed-composer-foot .feed-post {
  margin-left: auto;
}
.feed-post:disabled {
  color: var(--faint);
  cursor: default;
}
.feed-note {
  color: var(--muted);
  font-size: 0.8rem;
}
.feed-item {
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.7rem 1rem;
}
.feed-item-posted {
  border-style: dashed;
}
.feed-item-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.feed-item-when {
  color: var(--faint);
  font-size: 0.75rem;
}
.feed-item-state {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
}
.feed-post {
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
}
.feed-post:hover {
  --line: var(--teal);
}
.feed-item-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.3rem 0 0;
}
.feed-entry-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.5rem;
}
.label-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.label-chip-theirs {
  background: var(--surface);
  border: 1px dashed var(--border);
}
.label-chip-flag {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.label-chip-flag svg {
  font-size: 1.15em;
}
.label-chip-icon {
  align-items: center;
}
.label-chip-icon svg {
  font-size: 1.15em;
}
.label-chip-agree {
  cursor: pointer;
}
.label-chip-mine {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--ink) 16%);
}
.label-chip-theirs.label-chip-mine {
  background: color-mix(in srgb, var(--surface) 84%, var(--ink) 16%);
  border-style: solid;
}
.label-chip.label-chip-good {
  background: var(--react-good);
}
.label-chip.label-chip-bad {
  background: var(--react-bad);
}
.label-chip.label-chip-good.label-chip-mine {
  background: color-mix(in srgb, var(--react-good) 84%, var(--ink) 16%);
}
.label-chip.label-chip-bad.label-chip-mine {
  background: color-mix(in srgb, var(--react-bad) 84%, var(--ink) 16%);
}
article:has(.label-emoji-strip) {
  position: relative;
  z-index: 40;
}
.feed-settle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.feed-audience {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.05rem 0.3rem;
  --j: 0.25em;
  --line: var(--border);
  position: relative;
  background-color: var(--surface);
  color: var(--ink);
}
.thread-settled {
  color: var(--faint);
  font-size: 0.85rem;
  font-style: italic;
  margin: 1rem 0;
}
.post-dossier {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.post-dossier summary {
  cursor: pointer;
  color: var(--faint);
}
.post-dossier-log {
  overflow-x: auto;
  background: var(--surface);
  border: 1px dashed var(--border);
  --j: 0.2rem;
  clip-path: var(--jag-1);
  padding: 0.5rem 0.7rem;
  line-height: 1.5;
}
.label-add-anchor {
  position: relative;
  display: inline-flex;
}
.label-emoji-strip {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  width: 18.5rem;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  --j: 0.3rem;
  clip-path: var(--jag);
  box-shadow: 0 6px 18px var(--shadow-drop);
}
.label-emoji {
  border: none;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: 0.05rem 0.15rem;
  --j: 0.15rem;
  clip-path: var(--jag);
  cursor: pointer;
}
.label-emoji:hover {
  background: var(--surface-2);
}
.label-emoji-row {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  justify-items: center;
  gap: 0.1rem;
  padding: 0.1rem 0.15rem;
  margin-bottom: 0.15rem;
  --j: 0.2rem;
  clip-path: var(--jag);
}
.label-emoji-row-good {
  background: var(--react-good);
}
.label-emoji-row-bad {
  background: var(--react-bad);
}
.label-emoji-row .label-emoji:hover {
  background: var(--surface);
}
.label-emoji-pole-break {
  flex-basis: 100%;
  height: 0;
  border-top: 1px solid var(--border);
  margin: 0.2rem 0;
}
.label-emoji-value {
  font-size: 2em;
  line-height: 1;
}
.label-chip:has(.label-emoji-value) {
  align-items: center;
}
.label-count {
  background: var(--ink);
  color: var(--surface);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.16rem 0.4rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
  align-self: center;
}
.label-kind {
  color: var(--faint);
  font-size: 0.72rem;
}
.label-by {
  color: var(--muted);
  font-size: 0.72rem;
}
.label-x {
  background: none;
  border: 0;
  color: var(--faint);
  font: inherit;
  font-size: 0.72rem;
  padding: 0 0.1rem;
  cursor: pointer;
}
.label-x:hover {
  color: var(--coral);
}
.label-add {
  background: none;
  border: 1px dashed var(--border);
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--faint);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.1rem 0.55rem;
  cursor: pointer;
}
.label-add:hover {
  color: var(--sea);
  border-color: var(--teal);
}
.label-add-input {
  font: inherit;
  font-size: 0.78rem;
  width: 7rem;
  padding: 0.1rem 0.55rem;
  --line: var(--teal);
  position: relative;
  --j: 0.25em;
  background-color: var(--field);
  color: var(--ink);
}
.feed-item-body {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.feed-item-link {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.public-posts {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: var(--post-measure);
}
.public-posts-head {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.public-posts-more {
  align-self: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 1.2rem;
  cursor: pointer;
}
.public-posts-more:hover {
  --line: var(--teal);
}
.public-posts-more:disabled {
  color: var(--faint);
  cursor: default;
}
.id-sync {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.3rem 0 0;
  color: var(--faint);
  font-size: 0.78rem;
}
.id-sync-now {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.people-known {
  margin-top: 1.6rem;
}
.people-known-note {
  color: var(--faint);
  font-size: 0.75rem;
}
.feed-stream {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 2rem;
}
.feed-stream > * {
  width: 100%;
  max-width: var(--post-measure);
}
.feed-stream-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.chip.feed-options-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.feed-options-chip svg {
  font-size: 1.3rem;
}
.chip.feed-options-narrowed::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: var(--coral);
  clip-path: var(--dot-clip);
}
.feed-entry {
  font-size: calc(1rem * var(--post-scale, 1));
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.7em 1em;
}
.feed-entry {
  content-visibility: auto;
  contain-intrinsic-size: auto 14rem;
  flex-shrink: 0;
}
.feed-entry:has(.label-emoji-strip),
.feed-entry:has(.feed-entry-via-others:hover),
.feed-entry:has(.feed-entry-via-others:focus-within) {
  content-visibility: visible;
}
.feed-entry-low {
  opacity: 0.75;
}
.feed-entry-high {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.feed-entry-high .feed-entry-title {
  font-size: 1.84em;
}
.feed-entry-via {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0 0.35em;
  color: var(--faint);
  font-size: 0.72em;
}
.feed-entry-via .person-chip {
  font-size: 1em;
}
.feed-entry-via > svg {
  width: 1em;
  height: 1em;
  flex: none;
}
.feed-entry-via-others {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.feed-entry-via-count {
  border-bottom: 1px dotted currentColor;
  cursor: default;
}
.feed-entry-via-roster {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 2;
  display: flex;
  visibility: hidden;
  max-width: min(22em, 60vw);
  flex-wrap: wrap;
  gap: 0.25em 0.6em;
  padding: 0.5em 0.6em;
  border: 1px solid transparent;
  --line: var(--border);
  --j: 0.2em;
  clip-path: var(--jag-1);
  margin-bottom: 0.25em;
  background: var(--surface);
  box-shadow: 0 2px 8px var(--shadow-drop);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.feed-entry .feed-entry-via-roster {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 0.25em;
}
.feed-entry-via-others:hover .feed-entry-via-roster,
.feed-entry-via-others:focus-within .feed-entry-via-roster {
  visibility: visible;
  opacity: 1;
}
.feed-entry-via-rest {
  align-self: center;
  color: var(--faint);
}
.feed-unpublish-warn {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 30em;
  margin: 0 0 0.8em;
}
.feed-unpublish-acts {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.feed-unpublish-go,
.feed-unpublish-no {
  background: none;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.feed-unpublish-go {
  --line: var(--warn, var(--border-strong));
  color: var(--ink);
}
.feed-unpublish-no {
  color: var(--muted);
}
.feed-entry-when {
  color: var(--faint);
  font-size: 0.75em;
}
.feed-entry-edited {
  color: var(--faint);
  font-size: 0.75em;
  font-style: italic;
}
.feed-entry-edited:hover {
  color: var(--ink-soft);
}
.book-card-cover {
  margin-bottom: 0.8rem;
}
.book-card-head {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
}
.book-card-list {
  list-style: none;
  margin: 0;
  padding-left: 0.9rem;
}
.book-card > .book-card-list {
  padding-left: 0;
}
.book-card-section-title {
  display: block;
  font-weight: 600;
  margin: 0.3rem 0 0.1rem;
}
.book-card-page {
  margin: 0.1rem 0;
}
.feed-entry-beats {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.feed-entry-dated {
  font-style: italic;
  color: var(--ink-soft);
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}
.feed-entry-scheduled {
  background: var(--peach);
  color: var(--on-peach);
  --j: 0.25em;
  clip-path: var(--jag-1);
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.feed-entry-scheduled svg {
  font-size: 1.25em;
}
.feed-entry .person-banner {
  margin: 0;
  gap: 0.7em;
}
.feed-entry .person-hex-small {
  width: 2em;
  height: 1.95em;
}
.feed-entry .person-banner .person-name-primary {
  font-size: 1.3em;
}
.feed-entry .person-name-others {
  font-size: 0.78em;
}
.feed-entry-title {
  font-size: 1.68em;
  font-weight: 800;
  line-height: 1.15;
  margin: 0.3em 0 0;
}
.found {
  margin: 0.3em 0 0.6em;
  padding-left: 0.7em;
  border-left: 2px solid var(--marker);
  color: var(--ink-soft);
  font-size: 0.9em;
  line-height: 1.45;
}
.found-line,
.found-more {
  margin: 0.15em 0;
}
.found-more {
  color: var(--muted);
  font-style: italic;
}
.found-page + .found-page {
  margin-top: 0.4em;
}
.found-page-title {
  font-weight: 600;
  color: var(--ink);
}
.found-hit {
  background: var(--marker);
  color: var(--ink);
  --j: 2px;
  clip-path: var(--jag-1);
  padding: 0 1px;
}
.label-chip.label-chip-found {
  background: var(--marker);
  color: var(--ink);
}
.feed-entry-subtitle {
  font-size: 0.9em;
  font-style: italic;
  color: var(--muted);
  margin: 0.15em 0 0;
}
.feed-entry-frame {
  container-type: inline-size;
}
.feed-entry-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--post-backdrop);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.22;
  mask-image:
    linear-gradient(
      to bottom,
      var(--ink) 0,
      transparent 12rem);
  pointer-events: none;
}
.feed-entry-backdrop > .feed-entry-frame {
  position: relative;
}
.feed-entry-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.7rem;
  margin-bottom: 0.4em;
}
.feed-entry-head > .person-banner {
  display: contents;
}
.feed-entry-head .feed-entry-title {
  grid-column: 1 / -1;
  margin-top: 0.6em;
}
.feed-entry-head .feed-entry-subtitle {
  grid-column: 1 / -1;
}
.feed-entry-head .chip-menu {
  grid-column: 1 / -1;
  order: 3;
}
@container (max-width: 760px) {
  .feed-entry-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .feed-entry-head .feed-entry-title,
  .feed-entry-head .feed-entry-subtitle {
    order: 1;
  }
  .feed-entry-head .person-banner-actions {
    order: 2;
    grid-column: 1 / -1;
    justify-self: end;
    justify-content: flex-end;
    margin: 0.5em 0 0;
    flex-wrap: wrap;
  }
  .feed-entry-head .feed-entry-beats {
    display: none;
  }
}
.feed-entry-title a {
  color: var(--ink);
  text-decoration: none;
}
.feed-entry-title a:hover {
  color: var(--teal);
}
.feed-entry-body :is(img, video):not(.mq-emoji) {
  max-width: min(100%, var(--post-image-cap, 100%));
  max-height: var(--post-image-cap, none);
  height: auto;
}
.feed-entry-body {
  margin-top: 0.4em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.feed-entry-acts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  margin: 0.6em 0 0;
}
.feed-entry-acts:empty {
  display: none;
}
.feed-entry-act {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  border: none;
  color: var(--sea);
  font: inherit;
  font-size: 1em;
  font-weight: 700;
  padding: 0.25em 1em;
  text-decoration: none;
  cursor: pointer;
}
.feed-entry-act:hover {
  color: var(--teal);
  text-decoration: underline;
}
.feed-entry-held {
  color: var(--muted);
  font-size: 0.8em;
  font-style: italic;
  margin-top: -0.2em;
}
.feed-entry-body-fading .reader-marquee .mq-doc,
.feed-entry-fade-words {
  display: block;
  -webkit-mask-image: var(--fade-away);
  mask-image: var(--fade-away);
}
.feed-more {
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 1.2rem;
  cursor: pointer;
}
.feed-drafts {
  margin-top: 1rem;
}
.feed-drafts-head {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0 0 0.4rem;
}
.feed-options {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  --line: var(--border);
  --j: 4px;
  padding: 0.6rem 0.8rem;
}
.feed-options .facets {
  margin: 0;
}
.feed-top {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.4rem;
  container-type: inline-size;
}
@container (max-width: 640px) {
  .feed-top .feed-sort {
    flex-basis: 100%;
    margin-left: 0;
  }
}
.feed-fresh-bar {
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-fresh-btn {
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--sea);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 1rem;
  cursor: pointer;
}
.feed-fresh-btn:hover {
  --line: var(--teal);
}
.bake-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.bake-modal {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 6px;
  clip-path: var(--jag);
  padding: 1.1rem 1.3rem;
  min-width: 22rem;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bake-modal-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.bake-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
}
.bake-item-kind {
  color: var(--faint);
  font-size: 0.72rem;
  width: 4rem;
  flex-shrink: 0;
}
.bake-item-source {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.bake-item-status {
  flex-shrink: 0;
}
.bake-item-ready {
  color: var(--sea);
}
.bake-item-busy {
  color: var(--muted);
}
.bake-item-failed {
  color: var(--coral);
}
.feed-selectivity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feed-selectivity-name {
  color: var(--muted);
  font-size: 0.85rem;
}
.feed-selectivity input[type=range] {
  width: 7rem;
  accent-color: var(--teal);
}
.feed-selectivity-label {
  color: var(--faint);
  font-size: 0.78rem;
  min-width: 8.5rem;
}
.feed-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.feed-top .feed-clear {
  margin-left: auto;
  margin-right: 0.8rem;
}
.feed-top .feed-clear:disabled {
  opacity: 0.45;
  cursor: default;
}
.feed-top .feed-clear + .feed-sort,
.feed-top .feed-save + .feed-sort {
  margin-left: 0;
}
.feed-top .feed-save {
  margin-right: 0.8rem;
}
.feed-sort select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.1rem 0.3rem;
}
.settings-door {
  color: var(--ink);
  text-decoration: none;
}
.you-menu {
  margin-top: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  --j: 5px;
  clip-path: var(--jag);
  text-align: left;
}
.public-posts-pinned {
  margin-bottom: 1.2rem;
}
.feed-entry-veil {
  position: relative;
  overflow: hidden;
  --j: 3px;
  clip-path: var(--jag-1);
}
.feed-entry-body-veiled {
  filter: blur(14px) saturate(0.5);
  pointer-events: none;
  user-select: none;
  max-height: 18rem;
  overflow: hidden;
}
.feed-entry-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(10px) saturate(0.7);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
  pointer-events: none;
}
.feed-entry-unveil {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.warn-lists {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0.6rem 0 1rem;
}
.warn-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.warn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  padding: 0.1rem 0.3rem 0.1rem 0.6rem;
  font-size: 0.8rem;
}
.warn-chip-x {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0 0.2rem;
}
.warn-add {
  background: var(--surface);
  border: 1px dashed var(--border);
  --j: 0.25em;
  clip-path: var(--jag-1);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  width: 9rem;
}
.id-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.2rem 0 0.8rem;
}
.settings-version-line {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.settings-version {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  color: var(--ink-soft);
}
.settings-version-line a {
  color: var(--accent-ink);
}
.colorway-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.colorway-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  --line: var(--border);
  --j: 3px;
  cursor: pointer;
}
.crt-toggle {
  align-self: flex-start;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  --line: var(--border);
  --j: 3px;
  cursor: pointer;
}
.crt-toggle:hover {
  --line: var(--border-strong);
}
.colorway-option:hover {
  --line: var(--border-strong);
}
.colorway-option.picked {
  --line: var(--teal);
  font-weight: 600;
}
.colorway-swatch {
  display: inline-flex;
}
.colorway-swatch span {
  width: 0.8rem;
  height: 1rem;
}
.colorway-swatch span:nth-child(1) {
  background: var(--s1);
}
.colorway-swatch span:nth-child(2) {
  background: var(--s2);
}
.colorway-swatch span:nth-child(3) {
  background: var(--s3);
}
@media (max-width: 900px) {
  .colorway-options {
    gap: 0.65rem;
  }
  .colorway-option,
  .crt-toggle {
    gap: 0.65rem;
    padding: 0.45rem 0.9rem;
    font-size: 1.17rem;
  }
  .colorway-swatch span {
    width: 1.04rem;
    height: 1.3rem;
  }
}
.colorway-horse-relax {
  --s1: var(--swatch-horse-relax-1);
  --s2: var(--swatch-horse-relax-2);
  --s3: var(--swatch-horse-relax-3);
}
.colorway-witchlight {
  --s1: var(--swatch-witchlight-1);
  --s2: var(--swatch-witchlight-2);
  --s3: var(--swatch-witchlight-3);
}
.colorway-doors-xp {
  --s1: var(--swatch-doors-xp-1);
  --s2: var(--swatch-doors-xp-2);
  --s3: var(--swatch-doors-xp-3);
}
.colorway-bosc {
  --s1: var(--swatch-bosc-1);
  --s2: var(--swatch-bosc-2);
  --s3: var(--swatch-bosc-3);
}
.colorway-micross {
  --s1: var(--swatch-micross-1);
  --s2: var(--swatch-micross-2);
  --s3: var(--swatch-micross-3);
}
.colorway-terminal {
  --s1: var(--swatch-terminal-1);
  --s2: var(--swatch-terminal-2);
  --s3: var(--swatch-terminal-3);
}
.colorway-terminal-white {
  --s1: var(--swatch-terminal-white-1);
  --s2: var(--swatch-terminal-white-2);
  --s3: var(--swatch-terminal-white-3);
}
.colorway-terminal-cyan {
  --s1: var(--swatch-terminal-cyan-1);
  --s2: var(--swatch-terminal-cyan-2);
  --s3: var(--swatch-terminal-cyan-3);
}
.colorway-terminal-orange {
  --s1: var(--swatch-terminal-orange-1);
  --s2: var(--swatch-terminal-orange-2);
  --s3: var(--swatch-terminal-orange-3);
}
.colorway-terminal-gold {
  --s1: var(--swatch-terminal-gold-1);
  --s2: var(--swatch-terminal-gold-2);
  --s3: var(--swatch-terminal-gold-3);
}
.colorway-pride {
  --s1: var(--swatch-pride-1);
  --s2: var(--swatch-pride-2);
  --s3: var(--swatch-pride-3);
}
.colorway-trans {
  --s1: var(--swatch-trans-1);
  --s2: var(--swatch-trans-2);
  --s3: var(--swatch-trans-3);
}
.colorway-bi {
  --s1: var(--swatch-bi-1);
  --s2: var(--swatch-bi-2);
  --s3: var(--swatch-bi-3);
}
.colorway-ace {
  --s1: var(--swatch-ace-1);
  --s2: var(--swatch-ace-2);
  --s3: var(--swatch-ace-3);
}
.settings-keys {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.settings-section-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink);
}
.settings-assistants-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0;
}
.settings-assistants-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-section-title svg {
  vertical-align: -0.12em;
}
.settings-keys-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-key-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.settings-key-name {
  font-weight: 600;
  color: var(--ink);
}
.settings-key-when {
  color: var(--muted);
  font-size: 0.8rem;
}
.settings-key-new {
  display: flex;
  gap: 0.5rem;
}
.settings-key-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background-color: var(--field);
  --line: var(--border-strong);
  --j: 3px;
  padding: 0.45rem 0.6rem;
}
.settings-key-made {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--surface);
  --line: var(--teal);
  --j: 4px;
}
.settings-key-made p {
  margin: 0;
  color: var(--ink);
}
.settings-key-value {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-variant-ligatures: none;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--ink);
}
.settings-key-acts {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 900px) {
  .feed-entry-labels,
  .ledger-tags {
    gap: 0.45rem;
  }
  .label-chip,
  .label-add {
    align-items: center;
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
  }
  .label-add-input {
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
    width: 9rem;
  }
  .label-kind,
  .label-count {
    font-size: 0.85rem;
  }
  .label-x {
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    margin-right: -0.5rem;
  }
  .label-add-anchor:has(.label-emoji-strip-inline) {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .label-emoji-strip.label-emoji-strip-inline {
    position: static;
    flex-basis: 100%;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
    gap: 0.3rem;
  }
  .label-emoji-strip-inline::after {
    display: none;
  }
  .label-emoji-strip-inline .label-emoji-row {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    margin-bottom: 0;
    padding: 0.2rem;
  }
  .label-emoji-strip-inline .label-emoji {
    font-size: 1.6rem;
    padding: 0.2rem;
  }
}

/* developer.css */
.developer-group {
  margin: 1rem 0;
}
.developer-heading {
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
}
.developer-row,
.developer-group .push-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.developer-button,
.developer-group .push-button {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  --line: var(--border);
  --j: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.developer-button:hover,
.developer-group .push-button:hover {
  --line: var(--border-strong);
}

/* tooltip.css */
.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: 18rem;
  padding: 0.35rem 0.55rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: pre-line;
  --j: 3px;
  clip-path: var(--jag-1);
  pointer-events: none;
}
.tooltip.on {
  display: flex;
}
.tooltip-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--teal);
  font-size: 1rem;
  line-height: 1.3;
}
.tooltip-words {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* console.css */
.console {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hex-comb {
  --hex-w: 156px;
  --hex-h: 152px;
  --hex-gap: 6px;
  --hex-clip: var(--face-clip);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hex-row {
  display: flex;
  gap: var(--hex-gap);
}
@media (max-width: 900px) {
  .console {
    padding: 1rem;
  }
  .hex-comb {
    --hex-w: min(156px, calc((100vw - 4rem) / 2.6));
    --hex-h: calc(var(--hex-w) * 0.9749);
  }
}
.hex-row + .hex-row {
  margin-top: calc(var(--hex-h) * -0.1);
}
.hex-row.shift {
  margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2);
}
.app-tile {
  flex: 0 0 auto;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: var(--hex-clip);
  background: var(--hex-border-light);
  padding: 2px;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: block;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.app-tile:not(.blank):hover {
  transform: scale(1.04);
  filter: brightness(1.04);
}
.hex-mid {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: var(--hex-clip);
  background: var(--hex-border-dark);
  padding: 4px;
}
.hex-face {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: var(--hex-clip);
  background: var(--surface);
  color: var(--ink);
  isolation: isolate;
}
.app-tile:not(.blank) .hex-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom right,
      transparent 0%,
      transparent 50%,
      var(--hex-border-dark) 50%,
      var(--hex-border-dark) 100%);
  z-index: 1;
}
.app-tile.app-tile-me {
  background: var(--me-ring);
}
.app-tile.app-tile-me .hex-mid {
  background: var(--me-rim);
}
.app-tile.app-tile-me .hex-face::before {
  display: none;
}
.app-tile-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.app-tile.blank {
  cursor: default;
}
.app-tile.blank .hex-face {
  background: var(--surface-2);
}
.app-tile-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 20px), calc(-50% - 20px));
  font-size: 4.6rem;
  line-height: 1;
  z-index: 0;
}
.app-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26%;
  height: 22%;
  z-index: 3;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Radio Canada", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--ink);
}
.oauth-consent,
.upload-link {
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
  margin: 0 auto;
  gap: 0.25rem;
}
.oauth-consent h2 svg,
.upload-link h2 svg {
  vertical-align: -0.15em;
}
.oauth-consent-small {
  color: var(--muted);
  font-size: 0.85rem;
}
.oauth-consent-answers {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.oauth-consent-yes,
.oauth-consent-no,
.upload-link-go {
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.45rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.oauth-consent-yes,
.upload-link-go {
  background: var(--teal);
  border: none;
  color: var(--on-accent);
}
.oauth-consent-no {
  background: none;
  border: 1px dashed var(--border);
  color: var(--ink-soft);
}
.oauth-consent-yes:disabled,
.oauth-consent-no:disabled,
.upload-link-go:disabled {
  opacity: 0.6;
  cursor: default;
}

/* doc/surface.css */
.reader-empty {
  align-items: center;
  justify-content: center;
}
.editor-meta-anchor {
  display: contents;
}
.publish-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.publish-bar-private {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.publish-bar-public {
  background: var(--teal);
  color: var(--on-accent);
}
.publish-bar-scheduled {
  background: var(--peach);
  color: var(--on-peach);
}
.publish-bar-standing {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.publish-bar-wish {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.publish-bar-acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-left: auto;
}
.publish-bar-publish,
.publish-bar-update,
.publish-bar-unpublish,
.publish-bar-view,
.publish-bar-diff {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  --j: 0.25em;
  --line: currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.publish-bar-publish:hover,
.publish-bar-update:hover,
.publish-bar-unpublish:hover,
.publish-bar-view:hover,
.publish-bar-diff:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.publish-bar-view {
  text-decoration: none;
}
.diff-page {
  padding: 1rem 1.2rem;
  max-width: var(--post-measure);
}
.diff-page-head {
  margin-bottom: 0.8rem;
}
.diff-page-title {
  margin: 0 0 0.2rem;
}
.diff-page-sub,
.diff-page-note,
.diff-page-same,
.diff-page-legend {
  margin: 0.3rem 0;
  color: var(--ink-soft);
}
.diff-page-legend {
  display: flex;
  gap: 0.8rem;
  font-size: 0.8rem;
}
.diff-page-acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.diff-page .publish-bar-view,
.diff-page .publish-bar-update {
  color: var(--ink);
}
.publish-bar-diff {
  text-decoration: none;
}
.words-diff {
  max-height: 60vh;
  overflow: auto;
  font-size: 0.8rem;
  white-space: pre-wrap;
  margin: 0;
}
.words-diff > span {
  display: block;
}
.words-diff-title {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}
.words-diff-del {
  background: color-mix(in srgb, var(--coral) 22%, transparent);
  text-decoration: line-through;
}
.words-diff-add {
  background: color-mix(in srgb, var(--teal) 22%, transparent);
}
.words-diff-same {
  opacity: 0.75;
}
.publish-bar-update:disabled {
  opacity: 0.55;
  cursor: default;
}
.publish-bar-update:disabled:hover {
  background: transparent;
}
.publish-bar-note {
  width: 100%;
  opacity: 0.9;
}
.publish-bar-error {
  width: 100%;
  color: var(--coral);
}
.editor-meta {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 0.35rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  --line: var(--border-strong);
  --j: 4px;
  box-shadow: 0 8px 20px var(--shadow-drop);
}
.reader-chips {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.reader-file .reader-head {
  flex-shrink: 0;
}
.reader-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.reader-marquee {
  background: var(--paper);
  background-clip: padding-box;
  --line: var(--border);
  --j: 3px;
  padding: 0.7rem 0.9rem;
}
.user-card {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  --line: var(--border);
  --j: 3px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.user-card-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-card-names strong {
  font-size: 0.95rem;
}
.user-card-names small {
  color: var(--muted);
}
.user-card-bad {
  color: var(--muted);
  font-style: italic;
}
.user-span {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  vertical-align: middle;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.reader-plain {
  background: var(--paper);
  --line: var(--border);
  --j: 3px;
  padding: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  overflow-y: auto;
}
.reader-media {
  max-width: 100%;
  --j: 3px;
  clip-path: var(--jag-1);
}
video.reader-media {
  max-width: min(100%, 320px);
  max-height: 320px;
}
.reader-sound-player {
  display: block;
  width: 100%;
}
.reader-sound-rule {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.sound-tags {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 0.8rem;
  align-items: center;
  margin: 0;
}
.sound-tag {
  display: contents;
}
.sound-tag dt {
  color: var(--muted);
  font-size: 0.85rem;
}
.sound-tag dd {
  margin: 0;
}
.sound-doc-field .annot-desc {
  width: 100%;
  box-sizing: border-box;
}
.sound-doc-field .annot-date,
.sound-doc-field .annot-time,
.sound-doc-field .annot-desc {
  font-size: inherit;
}
.sound-length {
  font-variant-numeric: tabular-nums;
}
.sound-date {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sound-cover-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.sound-cover-face {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border: 1px solid var(--border);
}
.sound-tag-value {
  width: 100%;
  background-color: var(--surface);
  --line: var(--border);
  --j: 3px;
  color: inherit;
  font: inherit;
  padding: 0.3rem 0.5rem;
}
.sound-tag-value:focus {
  outline: none;
  --line: var(--border-strong);
}
.mq-turbolink-rich:has(.rt-card) > .mq-turbolink-source,
.mq-turbolink-rich:has(.rt-room) > .mq-turbolink-source {
  display: none;
}
.rt-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 100%;
  position: relative;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  --j: 4px;
  clip-path: var(--jag-1);
  color: var(--ink);
  text-decoration: none;
}
a.rt-card:hover {
  --line: var(--teal);
}
.rt-card-face {
  width: 2.4rem;
  height: 2.34rem;
  flex-shrink: 0;
  object-fit: cover;
  clip-path: var(--face-clip);
}
.rt-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.rt-card-who {
  font-size: 0.8rem;
  color: var(--muted);
}
.rt-card-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-card-preview {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-card-when {
  font-size: 0.75rem;
  color: var(--faint);
}
.rt-card-thumb {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  object-fit: cover;
}
.rt-card-icon {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  color: var(--teal);
}
.rt-card-said {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.rt-card-speaker {
  width: 1.3rem;
  height: 1.27rem;
  flex-shrink: 0;
  object-fit: cover;
  clip-path: var(--face-clip);
}
.rt-card-speaker-name {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--ink-soft);
}
.rt-card-said .rt-card-title {
  font-weight: normal;
}
.rt-room {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  --j: 4px;
  clip-path: var(--jag-1);
}
.rt-room-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
}
.rt-room-head svg {
  font-size: 1.4rem;
  color: var(--teal);
  flex-shrink: 0;
}
.rt-room-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-room-owner {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
}
.rt-card-book {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-right: 0.3em;
  color: var(--teal);
}
.rt-card-private {
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.02em;
}
.post-history-version {
  margin: 0 0 1.2rem;
}
.post-history-when {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.post-history-first {
  font-weight: 400;
  color: var(--muted);
}

/* doc/annotations.css */
.annotations {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.3rem 0 0.5rem;
}
.annot-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.annot-title {
  flex: 1;
  min-width: 0;
}
.annot-label {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 3rem;
}
.annot-title,
.annot-date,
.annot-time {
  background-color: var(--surface);
  --line: var(--border);
  --j: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  color-scheme: light;
}
.annot-title:focus,
.annot-date:focus,
.annot-time:focus {
  outline: none;
  --line: var(--border-strong);
}
.annot-time:disabled {
  opacity: 0.4;
}
.annot-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.annot-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--pink);
  background: var(--surface-2);
  --line: var(--border);
  --j: 0.25em;
  padding: 0.08rem 0.5rem;
}
.annot-tag-implicit {
  background: none;
}
.annot-tag-active {
  cursor: pointer;
  background: var(--pink);
  color: var(--surface);
  border-color: var(--pink);
  font: inherit;
  font-size: 0.72rem;
}
.annot-tag-x {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
}
.annot-tag-x:hover {
  opacity: 1;
}
.annot-tag-input {
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  width: 6rem;
  padding: 0.1rem 0.2rem;
}
.annot-tag-input:focus {
  outline: none;
}
.annot-tag-refused {
  font-size: 0.75rem;
  color: var(--coral);
}
.annot-desc {
  background-color: var(--surface);
  --line: var(--border);
  --j: 3px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  resize: vertical;
  width: 100%;
}
.annot-desc:focus {
  outline: none;
  --line: var(--border-strong);
}
@media (max-width: 900px) {
  .annot-tags {
    gap: 0.45rem;
  }
  .annot-tag,
  .annot-tag-active {
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
  }
  .annot-tag-x {
    font-size: 1.3rem;
    padding: 0.1rem 0.4rem;
    margin-right: -0.5rem;
  }
  .annot-tag-input {
    font-size: 1rem;
    padding: 0.4rem 0.3rem;
    width: 8rem;
  }
  .annot-tag-refused {
    font-size: 0.9rem;
  }
}
.annot-notebook {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.annot-move {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  padding: 0.1rem 0.2rem;
}
.annot-move:hover {
  color: var(--ink);
}

/* doc/completions.css */
.cm-tooltip.cm-tooltip-autocomplete {
  background: var(--surface);
  --lw: 2px;
  border: var(--lw) solid transparent;
  --line: var(--ink);
  --j: 4px;
  clip-path: var(--jag-1);
  box-shadow: 0 8px 20px var(--shadow-drop);
  overflow: hidden;
}
.cm-tooltip.cm-tooltip-autocomplete::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  clip-path: var(--ring-1);
}
.cm-tooltip-autocomplete > ul {
  font-family: inherit;
}
.cm-tooltip-autocomplete > ul > li {
  padding: 3px 10px;
}
.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--teal);
  color: var(--on-accent);
}
.cm-completionDetail {
  margin-left: 0.7em;
  font-style: normal;
  font-size: 1.1em;
}
.completion-swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.4em;
  vertical-align: middle;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}

/* doc/tree.css */
.tree-pane {
  width: 270px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-right: 0.5rem;
  border-right: 1px solid var(--border);
}
.tree-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.epub-error {
  flex-basis: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.tree-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-2);
  --line: var(--border-strong);
  --j: 3px;
  padding: 0.25rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.tree-tool:hover {
  --line: var(--teal);
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem;
  --j: 2.5px;
  cursor: pointer;
  min-width: 0;
}
.tree-row:hover {
  background: var(--surface-2);
}
.tree-row.selected {
  --line: var(--teal);
  background: var(--surface-2);
}
.tree-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-row-section .tree-row-title {
  font-weight: 600;
}
.tree-row-title.pinned {
  color: var(--accent-ink);
}
.tree-caret {
  display: inline-flex;
  font-size: 0.8em;
  color: var(--muted);
  transition: transform 0.12s;
}
.tree-caret.open {
  transform: rotate(90deg);
}
.tree-row-actions {
  display: none;
  margin-left: auto;
  gap: 0.15rem;
}
.tree-row:hover .tree-row-actions {
  display: inline-flex;
}
.tree-act {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0.1rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95em;
}
.tree-act:hover {
  color: var(--teal);
}
.tree-act.danger:hover {
  color: var(--coral);
}
.tree-row.drop-before {
  box-shadow: 0 -2px 0 0 var(--teal);
}
.tree-row.drop-after {
  box-shadow: 0 2px 0 0 var(--teal);
}
.tree-row.drop-into {
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  --line: var(--teal);
}
.tree-row.lifting {
  opacity: 0.45;
}
.tree-unfiled.drop-hover {
  outline: 2px dashed var(--teal);
  outline-offset: 2px;
  --j: 3px;
  clip-path: var(--jag-1);
}
.tree-stub {
  color: var(--muted);
  font-style: italic;
  cursor: default;
}
.tree-empty {
  padding: 0.6rem 0.2rem;
}
.tree-unfiled {
  margin-top: 0.8rem;
  border-top: 1px dashed var(--border-strong);
  padding-top: 0.5rem;
}
.tree-unfiled-title {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.tree-row-icon {
  display: inline-flex;
}
.tree-standing-current {
  color: var(--sea);
}
.tree-standing-pending {
  color: var(--peach);
}
.tree-standing-hidden {
  color: var(--faint);
}

/* apps/notes.css */
.notes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.notes-columns {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.notes-list {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  min-height: 0;
}
.notes-count {
  margin: -0.15rem 0 0.1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}
.notes-select-all {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-ink);
  text-decoration: underline;
  cursor: pointer;
}
.notes-new {
  background: none;
  border: 1px dashed var(--border-strong);
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  padding: 0.45rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.notes-new:hover {
  border-color: var(--sea);
}
.tag-column {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
  min-height: 0;
}
.pane-head {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  --line: var(--border);
  --j: 3px;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 1rem 0.3rem 0.6rem;
  margin-bottom: 0.4rem;
}
.pane-head {
  cursor: pointer;
}
.pane-head:hover {
  color: var(--ink);
}
.pane-head-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.pane-head-label svg {
  flex-shrink: 0;
  font-size: 1rem;
}
.pane-min {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0.15rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
}
.pane-min:hover {
  color: var(--teal);
}
.pane-rail {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 1.9rem;
  padding: 0.5rem 0.2rem;
  background: var(--surface-2);
  --line: var(--border);
  --j: 3px;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
}
.pane-rail:hover {
  color: var(--teal);
  --line: var(--teal);
}
.pane-rail.active {
  color: var(--teal);
  background: var(--surface);
  --line: var(--teal);
}
.pane-rail-label {
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .panes {
    --rail-overlap: 0.8rem;
  }
  .panes > .pane-rail + .pane-rail {
    margin-left: calc((-1rem - var(--rail-overlap)) * (1 - var(--fanned, 0)));
    transition: margin-left 0.16s ease calc(0.3s * (1 - var(--fanned, 0)));
  }
  .panes > .pane-rail:has(+ .pane-rail)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--rail-overlap);
    width: 0.45rem;
    background:
      linear-gradient(
        to left,
        var(--shadow-drop),
        transparent);
    pointer-events: none;
    opacity: calc(1 - var(--fanned, 0));
    transition: opacity 0.16s ease calc(0.3s * (1 - var(--fanned, 0)));
  }
  :is(.panes > .pane-rail:is(:hover, :focus-visible), .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail, .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail + .pane-rail, .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail + .pane-rail + .pane-rail, .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail + .pane-rail + .pane-rail + .pane-rail, .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail, .panes > .pane-rail:is(:hover, :focus-visible) + .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail, .panes > .pane-rail:has(+ .pane-rail:is(:hover, :focus-visible)), .panes > .pane-rail:has(+ .pane-rail + .pane-rail:is(:hover, :focus-visible)), .panes > .pane-rail:has(+ .pane-rail + .pane-rail + .pane-rail:is(:hover, :focus-visible)), .panes > .pane-rail:has(+ .pane-rail + .pane-rail + .pane-rail + .pane-rail:is(:hover, :focus-visible)), .panes > .pane-rail:has(+ .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail:is(:hover, :focus-visible)), .panes > .pane-rail:has(+ .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail + .pane-rail:is(:hover, :focus-visible))) {
    --fanned: 1;
  }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .panes > .pane-rail,
  .panes > .pane-rail::before {
    transition-duration: 0s;
  }
}
@media (max-width: 900px) {
  .panes.panes {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.1rem;
  }
  .panes > .col-resizer {
    display: none;
  }
  .panes > .pane-rail {
    order: -1;
    align-self: flex-start;
    width: 2.3rem;
    gap: 0.35rem;
    padding: 0.35rem 0.2rem;
    font-size: 1.2rem;
  }
  .panes > .pane-rail .pane-rail-label {
    font-size: 0.84rem;
  }
  .pane-head {
    font-size: 0.9rem;
    padding: 0.25rem 1rem 0.25rem 0.6rem;
    margin-bottom: 0.3rem;
  }
  .pane-head-label svg {
    font-size: 1.2rem;
  }
  .pane-min {
    font-size: 1.08rem;
  }
  .panes.panes > :not(.pane-rail) {
    flex: 0 0 100%;
    width: calc(100% - 2.3rem - 0.1rem);
    max-width: none;
    min-width: 0;
    min-height: 0;
  }
  .panes:has(> * > .pane-head) > :not(.pane-rail):not(.col-resizer):not(:has(> .pane-head)) {
    display: none;
  }
}
.notes-columns .tag-column {
  width: var(--w-tags, 180px);
}
.notes-columns .notes-list {
  width: var(--w-list, 240px);
}
.files-foot {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}
.notes-columns .notes-list-browser {
  width: var(--w-list, 480px);
}
.notes-columns .tree-pane {
  width: var(--w-tree, 270px);
}
.notes-columns .book-column {
  width: var(--w-publish, 260px);
}
.notes-columns .links-column {
  width: var(--w-links, 220px);
}
.links-column {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
  font-size: 0.85rem;
}
.links-head {
  margin: 0.6rem 0 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: lowercase;
}
.links-row {
  display: block;
  padding: 0.3rem 0.5rem;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.links-row:hover,
.links-row:focus-visible {
  color: var(--teal);
  text-decoration: underline;
}
.links-row-web {
  color: var(--sea);
}
.links-row-gone {
  color: var(--faint);
}
.book-column {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  font-size: 0.85rem;
}
.book-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.book-block + .book-block {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.book-switch,
.book-section {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.book-title-line {
  margin: 0;
  color: var(--ink-soft);
}
.book-title-link {
  font-weight: 600;
}
.book-front {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.book-front-moved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: var(--ink-soft);
}
.book-off,
.book-ledger-head {
  margin: 0;
  color: var(--ink-soft);
}
.book-ledger-head {
  font-weight: 600;
  margin-top: 0.4rem;
}
.book-ledger {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  margin: 0;
}
.book-ledger dt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft);
}
.book-ledger dd {
  margin: 0;
}
.book-pages,
.book-sections {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.book-page {
  text-align: left;
  background: none;
  border: 0;
  padding: 0.1rem 0.2rem;
  color: var(--ink);
  cursor: pointer;
  border-left: 3px solid var(--peach);
}
.book-page-new {
  border-left-color: var(--peach);
}
.book-page-changed {
  border-left-color: var(--peach);
  font-style: italic;
}
.book-publish {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.book-progress {
  margin: 0;
  color: var(--ink-soft);
}
.book-view {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
}
.book-unpublish {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.col-resizer {
  flex-shrink: 0;
  align-self: stretch;
  width: 8px;
  margin: 0 -0.5rem;
  cursor: col-resize;
  --j: 3px;
  clip-path: var(--jag-1);
  touch-action: none;
}
.col-resizer:hover,
.col-resizer:active {
  background: var(--teal);
  opacity: 0.5;
}
.tag-cloud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background: none;
  border: 0;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  text-align: left;
}
.tag-cloud-row:hover {
  background: var(--surface);
}
.tag-cloud-row.active {
  background: var(--pink);
  color: var(--surface);
}
.tag-cloud-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-cloud-count {
  color: var(--muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.tag-cloud-row.active .tag-cloud-count {
  color: var(--surface);
  opacity: 0.85;
}
.tag-column-empty {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}
.note-row {
  -webkit-touch-callout: none;
  background: var(--surface);
  --line: var(--border);
  --j: 3px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--ink);
}
.note-row:hover {
  --line: var(--border-strong);
}
.note-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 3.2rem;
  flex-shrink: 0;
}
.note-row.selected {
  --line: var(--teal);
}
.note-row-title {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.note-row-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-row-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  --j: 4px;
  clip-path: var(--jag-1);
  flex-shrink: 0;
  background: var(--surface-2);
}
.note-row-thumb-big {
  width: 64px;
  height: 64px;
}
.files-browser {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.files-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}
.files-tile-slot {
  position: relative;
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 9rem;
}
.files-tile {
  -webkit-touch-callout: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  padding: 0.25rem;
  cursor: pointer;
  text-align: left;
}
.files-tile:hover,
.files-tile:focus-visible {
  border-color: var(--border-strong);
}
.files-tile.selected {
  border-color: var(--teal);
}
.files-tile-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-2);
  --floor-square: 6px;
}
.files-tile-face img,
.files-tile-face .drawing-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}
.files-tile-kind {
  display: flex;
  color: var(--faint);
  font-size: 2.6rem;
}
.files-tile-pin {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  display: flex;
  color: var(--sea);
}
.files-tile-title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.8rem;
}
.files-tile-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-tile-home {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: none;
  align-items: center;
  padding: 0.2rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--border);
  cursor: pointer;
}
.files-tile-slot:hover .files-tile-home,
.files-tile-home:focus-visible {
  display: inline-flex;
}
.files-tile-home:hover {
  color: var(--sea);
}
.note-row-desc {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-row-snippet {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}
.snippet-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.snippet-hit {
  background: var(--marker);
  color: var(--ink);
  --j: 2px;
  clip-path: var(--jag-1);
  padding: 0 1px;
}
.note-row-when {
  color: var(--faint);
  font-size: 0.7rem;
}
.notes-empty {
  text-align: center;
  margin-top: 1rem;
}
.notes-tagfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.note-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
}
.note-row-tag {
  font-size: 0.65rem;
  color: var(--pink);
  background: var(--surface-2);
  --line: var(--border);
  --j: 0.25em;
  padding: 0.02rem 0.4rem;
}
.note-row-tag:hover {
  --line: var(--pink);
}
.note-row-tag.active {
  background: var(--pink);
  color: var(--surface);
  --line: var(--pink);
}
.note-row-claimed {
  color: var(--teal);
}
.reader {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}
.reader-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.reader-head .editor-title {
  flex: 1 1 100%;
}
.reader {
  container-type: inline-size;
}
.reader-file {
  overflow: hidden;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  position: relative;
  --j: 4px;
  clip-path: var(--jag-1);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
}
.chip-word {
  display: none;
}
@media (max-width: 900px) {
  .chip.chip-worded {
    font-size: 1.5rem;
    padding: 0.375rem 0.6rem;
  }
  .chip-word {
    display: inline;
    margin-left: 0.3em;
    font-size: 0.55em;
  }
  .reader-chips {
    flex-wrap: wrap;
  }
}
.reader-folded .chip-word {
  display: inline;
  margin-left: 0.3em;
  font-size: 0.85em;
}
.chip-diverged {
  --line: var(--coral);
  color: var(--coral);
}
.chip-merged {
  --line: var(--sea);
  color: var(--sea);
}
.chip.chip-open {
  color: var(--on-accent);
  background: var(--teal);
  --line: var(--teal);
}
@media (max-width: 900px) {
  .note-row-tags {
    gap: 0.4rem;
    margin-top: 0.3rem;
  }
  .note-row-tag {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
  .tag-cloud-row {
    font-size: 1rem;
    padding: 0.65rem 0.6rem;
  }
  .tag-cloud-count {
    font-size: 0.85rem;
  }
}

/* doc/editor.css */
.editor-title {
  background: none;
  border: none;
  border-bottom: 1px dashed transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.editor-title:focus {
  outline: none;
  border-bottom-color: var(--teal);
}
.editor-body {
  background-color: var(--paper);
  --line: var(--border);
  --j: 3px;
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.8rem;
  min-height: 50vh;
  resize: vertical;
  width: 100%;
}
.editor-body:focus {
  outline: none;
  --line: var(--border-strong);
}
.editor-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: calc(-0.6rem - 2 * var(--lw));
  padding-left: 0.6rem;
  position: relative;
  z-index: 1;
}
.editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
  align-self: center;
  padding: 0 0.6rem calc(0.6rem + 2 * var(--lw)) 0;
}
.editor-tabs .tab.active {
  background: var(--paper);
  --line: var(--border);
  border-width: 0;
  padding: calc(0.3rem + var(--lw)) calc(0.6rem + var(--lw));
}
.editor-title-read {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.2rem 0;
}
.editor-live {
  background: var(--surface);
  --j: 3px;
  clip-path: var(--jag-1);
  min-height: 50vh;
  overflow: hidden;
}
.editor-live .cm-editor {
  min-height: 50vh;
  max-height: 75vh;
  background: var(--paper);
  background-clip: padding-box;
  border: var(--lw) solid transparent;
  --line: var(--border);
  --j: 3px;
  clip-path: var(--jag-1);
}
.editor-live .cm-editor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--line);
  clip-path: var(--ring-1);
}
.editor-live .cm-content {
  padding: 0.7rem 0.85rem;
}
.editor-live .cm-editor.cm-focused {
  outline: none;
}
.editor-live .cm-scroller {
  font-family: inherit;
  line-height: 1.5;
  padding: 0.8rem;
}
:not(.feed-composer) > .reader > .editor-live {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}
:not(.feed-composer) > .reader > .editor-live .cm-editor {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.editor-live .cm-content {
  min-height: 46vh;
}
.editor-side {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
}
.editor-side-source,
.editor-side-preview {
  flex: 1 1 0;
  min-width: 0;
}
.editor-side-source .editor-body {
  height: 100%;
  min-height: 50vh;
}
.editor-side-preview {
  max-height: 75vh;
  overflow-y: auto;
  background: var(--paper);
  --line: var(--border);
  --j: 3px;
  padding: 0.8rem;
  scroll-behavior: smooth;
}
.editor-side-preview .reader-marquee,
.editor-side-preview .reader-plain {
  background: none;
  border: 0;
  clip-path: none;
  --line: transparent;
  padding: 0;
}
.editor-cursor-node {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
  --j: 2px;
  clip-path: var(--jag-1);
}
.chip-button {
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  color: var(--sea);
}
.chip-button:hover {
  --line: var(--sea);
}
a.chip-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.chip-button:disabled {
  opacity: 0.35;
  cursor: default;
}
.chip-button:disabled:hover {
  --line: var(--border);
}
.chip-delete {
  color: var(--coral);
}
.chip-delete:hover {
  --line: var(--coral);
  background: var(--coral);
  color: var(--on-danger);
}
.chip.chip-pinned {
  color: var(--on-accent);
  background: var(--teal);
  --line: var(--teal);
}
.note-row-pin {
  font-size: 0.8em;
}
.note-row-title-text.pinned {
  color: var(--accent-ink);
}
.note-row-status {
  font-size: 0.9em;
}
.note-row-status-private {
  color: var(--muted);
}
.note-row-status-public {
  color: var(--teal);
}
.note-row-status-scheduled {
  color: var(--peach);
}
.note-row-status-hidden {
  color: var(--muted);
}
.note-row-status-pending {
  color: var(--peach);
}
.note-row-kind {
  font-size: 0.9em;
  color: var(--muted);
}
.waiting-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  clip-path: var(--dot-clip);
  background: var(--teal);
  animation: waiting-pulse 1.6s ease-in-out infinite;
  margin-right: 0.3rem;
}
@keyframes waiting-pulse {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
.status-spin {
  display: inline-flex;
  animation: status-spin 0.8s linear infinite;
}
@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}
.skip-link:hover {
  color: var(--muted);
}
@media (max-width: 500px) {
  .quickbar {
    padding: 0.4rem 10px calc(0.4rem + var(--safe-bottom));
  }
}
.editor-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
  text-align: center;
}
.chip-menu-anchor {
  display: inline-flex;
}
.chip-menu[hidden] {
  display: none;
}
.chip-menu {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem;
  background: var(--paper);
  --line: var(--border-strong);
}
.texthelp-row {
  display: inline-flex;
  gap: 0.35rem;
}
.texthelp-anchor {
  position: relative;
  display: inline-flex;
}
.texthelp-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  max-height: min(80vh, 40rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: 0.6rem;
  background: var(--paper);
  --line: var(--border);
  --j: 3px;
  color: var(--ink);
  text-align: left;
}
.texthelp-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.3rem 0.5rem;
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.texthelp-item:hover,
.texthelp-item:focus-visible {
  background: var(--surface-2);
}
.texthelp-about {
  color: var(--muted);
  font-size: 0.8rem;
}
.texthelp-heading {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.texthelp-letter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.texthelp-fonts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.1rem;
}
.texthelp-fonts .texthelp-item {
  padding: 0.2rem 0.35rem;
  font-size: 0.95rem;
  line-height: 1.25;
  min-width: 0;
}
.texthelp-fonts .texthelp-item > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.texthelp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.texthelp-sizes .texthelp-item {
  font-size: 1rem;
}
.texthelp-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr));
  gap: 0.35rem;
}
.texthelp-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: var(--swatch);
  cursor: pointer;
}
.texthelp-address {
  font: inherit;
  padding: 0.35rem 0.5rem;
  width: 18rem;
  max-width: 100%;
}
.chip-menu .texthelp-row,
.chip-menu .texthelp-anchor {
  display: contents;
}
.chip-menu .texthelp-panel {
  position: static;
  order: 1;
  flex: 1 1 100%;
  width: auto;
  max-width: none;
  max-height: none;
  clip-path: none;
  padding: 0.4rem 0 0;
  border-top: 1px dashed var(--border);
}

/* doc/bulk.css */
.bulk {
  padding: 0.8rem 1rem 1.5rem;
}
.bulk-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.bulk-count {
  margin: 0;
  font-size: 1.1rem;
}
.bulk-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
.bulk-clear:hover {
  color: var(--ink);
}
.bulk-note,
.bulk-progress {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.bulk-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bulk-rule {
  width: 100%;
  margin: 0.4rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.bulk-heading {
  margin: 0;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--muted);
}
.bulk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.bulk-input {
  background-color: var(--surface);
  --line: var(--border);
  --j: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  width: 12rem;
}
.bulk-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface);
  --line: var(--border);
  --j: 4px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.bulk-button:hover {
  --line: var(--border-strong);
}
.bulk-tag-count {
  font-size: 0.65rem;
  opacity: 0.8;
}
.bulk-danger {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.bulk-delete {
  align-self: flex-start;
  background: var(--coral);
  color: var(--on-danger);
  --line: var(--coral);
}

/* person.css */
.person-hex {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  clip-path: var(--face-clip);
}
.person-hex-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: inherit;
  clip-path: var(--face-clip);
}
.person-hex-mini {
  width: 1.4rem;
  height: 1.365rem;
}
.person-hex-small {
  width: 2rem;
  height: 1.95rem;
}
.person-hex-card {
  width: 4.5rem;
  height: 4.39rem;
}
.person-hex-hero {
  width: 9rem;
  height: 8.78rem;
  padding: 5px;
}
.person-chip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0.2em;
  text-decoration: none;
}
.person-chip[data-blocked=yes] .person-hex {
  opacity: 0.45;
}
.person-chip-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.3rem 0.6rem;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border-strong);
  --j: 4px;
  clip-path: var(--jag-1);
  color: var(--ink);
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 20;
}
.person-chip-label small {
  color: var(--muted);
  font-size: 0.7rem;
}
.person-chip:hover .person-chip-label,
.person-chip:focus-visible .person-chip-label {
  opacity: 1;
}
.feed-entry .person-chip-label {
  bottom: auto;
  top: calc(100% + 0.35rem);
  left: 0;
  transform: none;
  align-items: flex-start;
}
.person-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.person-inline[data-blocked=yes] .person-hex {
  opacity: 0.45;
}
.person-inline-name {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.person-banner-face {
  display: inline-flex;
  text-decoration: none;
}
.person-banner .person-hex-small {
  width: 3rem;
  height: 2.925rem;
}
.person-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.person-name-primary {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-banner .person-name-primary {
  font-size: 1.3rem;
}
.person-name-others {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-domain {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-banner-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.person-card-hero {
  position: relative;
  height: 250px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0 1rem 0.8rem;
  background-size: cover;
  background-position: center;
}
.person-card-hero .person-card-top {
  align-self: stretch;
  align-items: flex-end;
}
.person-card-hero .person-card-corner {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
}
.person-card-hero .person-card-name,
.person-card-hero .person-card-others {
  margin: 0;
  background: var(--plate);
  padding: 0.1rem 0.6rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
}
.person-card-hero .person-card-others {
  color: var(--ink-soft);
}
.person-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.person-card-corner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.person-rss {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
  background: var(--surface-2);
  --j: 0.3em;
  clip-path: var(--jag-1);
  text-decoration: none;
}
.person-rss:hover,
.person-rss:focus-visible {
  color: var(--ink);
}
.person-reach {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--surface-2);
  padding: 0.2rem 0.7rem;
  --j: 0.3em;
  clip-path: var(--jag-1);
}
.person-reach-n {
  font-weight: 600;
  color: var(--ink);
  cursor: help;
}
.person-known-by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.person-known-by-more {
  color: var(--faint);
}
.person-card-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0.7rem 0 0.1rem;
}
.person-card-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border);
  --j: 4px;
  clip-path: var(--jag-1);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.person-card-chat:hover:not(:disabled) {
  color: var(--ink);
}
.person-card-chat:disabled {
  cursor: progress;
}
.person-card-chat-bad {
  color: var(--coral);
}
.person-card-others {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}
.person-card-active {
  margin: 0.6rem 0 0;
  color: var(--faint);
  font-size: 0.8rem;
}
.person-card-bio {
  white-space: pre-wrap;
  color: var(--ink-soft);
  margin-top: 1rem;
  background: var(--surface-2);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.7rem 0.9rem;
  overflow-wrap: anywhere;
}
.person-demo {
  max-width: 640px;
}
.demo-lede {
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.demo-sample {
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
  margin-bottom: 1.8rem;
}
.demo-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal);
  margin: 0 0 0.2rem;
}
.demo-note {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 0.9rem;
}
.demo-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}
.demo-prose {
  line-height: 2;
  color: var(--ink-soft);
  margin: 0;
}
.person-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  background-origin: border-box;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 5px;
  clip-path: var(--jag);
  padding: 0.6rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.person-row:hover {
  --line: var(--teal);
  transform: translateY(-1px);
}
.person-row .ledger-glance {
  margin-left: auto;
  flex-shrink: 0;
}
.person-row-blocked {
  opacity: 0.6;
}
.demo-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
.person-row .person-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: 0.8em;
}
.person-row-storage {
  margin-left: auto;
  color: var(--faint);
  font-size: 0.72rem;
  white-space: nowrap;
  margin-right: 0.5rem;
}
.person-row-via {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--faint);
  font-size: 0.78rem;
}
@media (max-width: 900px) {
  .person-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.3rem;
    align-items: center;
  }
  .person-row > :first-child {
    grid-row: 1;
    align-self: start;
  }
  .person-row > :not(:first-child) {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    margin-right: 0;
  }
  .person-row .ledger-glance {
    margin-left: 0;
  }
}

/* facets.css */
.facets {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.8rem;
}
.facets-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.facets-picked-word {
  color: var(--muted);
  font-size: 0.85rem;
}
.facets-picked-word + .facets-picked-word::before {
  content: "\b7";
  margin-right: 0.5rem;
}
.facets-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--faint);
}
.facet-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  overflow: hidden;
}
.facet-row-open {
  flex-wrap: wrap;
}
.facet-row > * {
  flex-shrink: 0;
}
.facet-row-extra {
  display: inline-flex;
}
.facet-row-label {
  color: var(--muted);
  font-size: 0.75rem;
  margin-right: 0.2rem;
}
.facet-chip,
.facet-more {
  background: none;
  border: 1px dashed var(--border);
  --j: 0.25em;
  clip-path: var(--jag-1);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.facet-chip svg {
  font-size: 1.15em;
  margin-right: 0.25em;
  vertical-align: -0.2em;
}
.facet-chip-on {
  background: var(--chip-on);
  border-style: solid;
  color: var(--chip-on-ink);
}
.facet-chip-on .facet-count {
  color: var(--chip-on-count);
}
.facet-chip-out {
  border-style: solid;
  border-color: var(--coral);
  color: var(--muted);
  text-decoration: line-through;
}
.facet-count {
  color: var(--muted);
  font-size: 0.7rem;
}
.facet-more {
  border-style: dotted;
  color: var(--muted);
}
.facet-search {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.facet-search-box {
  font: inherit;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  min-width: 10rem;
}
.facet-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 5.4rem;
  overflow-y: auto;
  padding-left: 0.2rem;
}
.facet-search-none {
  color: var(--faint);
  font-size: 0.75rem;
  font-style: italic;
}
@media (max-width: 900px) {
  .facet-row {
    gap: 0.45rem;
  }
  .facet-chip,
  .facet-more {
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
  }
  .facet-count {
    font-size: 0.85rem;
  }
  .facet-row > [data-facet] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .facet-row-label {
    font-size: 0.9rem;
  }
}

/* copyinto.css */
.copy-buckets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.copy-bucket {
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.25em;
  clip-path: var(--jag-1);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.copy-bucket:hover {
  --line: var(--border-strong);
}
.copy-new-bucket {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}
.copy-new-input {
  background: var(--field);
  border: 1px dashed var(--border);
  --j: 0.25em;
  clip-path: var(--jag-1);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.25rem 0.8rem;
  width: 11rem;
}
.copy-done a {
  margin-left: 0.3rem;
}
.copy-chain {
  margin-top: 1.2rem;
}
.copy-chain-head {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

/* apps/notifications.css */
.notif-app {
  max-width: var(--post-measure);
  margin: 0 auto;
  padding: 1rem;
}
.notif-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.notif-bar .push-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}
.notif-bar .push-button {
  font: inherit;
  font-size: 0.85em;
  color: var(--ink-soft);
  background: none;
  --line: var(--border);
  --j: 4px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.notif-bar .push-button:hover {
  color: var(--ink);
}
.notif-bar .push-note,
.notif-bar .push-error {
  font-size: 0.8em;
  color: var(--ink-soft);
  margin: 0 auto 0 0;
}
.notif-mark-read {
  font: inherit;
  font-size: 0.85em;
  color: var(--ink-soft);
  background: none;
  --line: var(--border);
  --j: 4px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.notif-mark-read:hover {
  color: var(--ink);
  --line: var(--border-strong);
}
.notif-list {
  display: flex;
  flex-direction: column;
}
.notif-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.notif-unseen {
  background: var(--surface);
}
.notif-text {
  flex: 1;
  color: var(--ink);
}
.notif-claimed {
  color: var(--ink);
  font-style: italic;
  margin-right: 0.3em;
}
.notif-subject {
  color: var(--ink);
  font-weight: 600;
  margin-right: 0.3em;
}
.notif-room {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--teal);
}
.notif-stranger {
  margin-left: 0.4em;
  padding: 0.05em 0.4em;
  --line: var(--border);
  --j: 0.25em;
  color: var(--muted);
  font-size: 0.75em;
  white-space: nowrap;
}
.notif-cells {
  display: flex;
  gap: 0.35rem;
}
.notif-when {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85em;
  white-space: nowrap;
}
.notif-new {
  width: 0.5rem;
  height: 0.5rem;
  clip-path: var(--dot-clip);
  background: var(--teal);
}
.notif-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  padding: 2rem 0.5rem;
}

/* apps/chat.css */
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.chat-columns {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.chat-columns .chat-rooms {
  width: var(--w-rooms, 260px);
}
.chat-columns .tag-column {
  width: var(--w-tags, 150px);
}
.chat-rooms {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-y: auto;
  min-height: 0;
}
.chat-new-btn {
  background: none;
  border: 1px dashed var(--border-strong);
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--sea);
  padding: 0.45rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.chat-new-btn:hover {
  border-color: var(--sea);
}
.chat-rooms-empty {
  color: var(--muted);
  font-size: 0.85em;
  padding: 0.5rem 0.2rem;
  margin: 0;
}
.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.chat-list-divider {
  margin: 0.6rem 0 0.2rem;
  padding: 0 0.2rem;
  font-size: 0.75em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chat-list-left .chat-row {
  opacity: 0.7;
}
.chat-group-divider {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85em;
}
.chat-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.chat-group-name:hover {
  text-decoration: underline;
}
.chat-group-new {
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.chat-group-new:hover {
  color: var(--ink);
}
.chat-left-note,
.chat-muted-note {
  flex-wrap: wrap;
}
.chat-rejoin {
  margin-left: auto;
  font-size: 0.9em;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  cursor: pointer;
}
.chat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.4rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.chat-row:hover,
.chat-row-selected {
  background: var(--bg);
}
.chat-row-face {
  display: flex;
  flex: none;
}
.chat-row-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.chat-row-name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row-unread .chat-row-name {
  font-weight: 700;
}
.chat-row-when {
  font-size: 0.9em;
  color: var(--muted);
  white-space: nowrap;
}
.chat-row-unread .chat-row-when {
  color: var(--ink-soft);
}
.chat-row-by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.8em;
  min-width: 0;
}
.chat-row-tag {
  color: var(--ink-soft);
  background: var(--surface-2);
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0 0.35rem;
  white-space: nowrap;
}
.chat-new-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.chat-new-count {
  margin: 0;
  align-self: flex-end;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.chat-new-tag {
  flex: 1;
  min-width: 8rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
}
.chat-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-room,
.chat-new-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-room-head {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0 0.6rem;
}
.chat-room-name {
  margin: 0;
  font-size: 1.15em;
}
.chat-people {
  position: relative;
  font-size: 0.85em;
}
.chat-list-requests .chat-row {
  opacity: 0.85;
}
.chat-request-note {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chat-request-words {
  color: var(--ink);
}
.chat-accept {
  font-size: 0.9em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.1rem 0.9rem;
  cursor: pointer;
}
.chat-accept:disabled {
  cursor: progress;
}
.chat-people-two {
  display: inline-flex;
  align-items: center;
}
.chat-people-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--ink-soft);
  --line: var(--border);
  --j: 4px;
  padding: 0.15rem 0.5rem;
  list-style: none;
}
.chat-people-summary::-webkit-details-marker {
  display: none;
}
.chat-people-caret {
  color: var(--muted);
}
.chat-chatters-list {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 5;
  min-width: 16rem;
  max-height: 18rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.chat-chatters-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
}
.chat-chatters-when {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}
.chat-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.chat-gap {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.chat-older {
  display: block;
  font-size: 0.85em;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.75rem;
  cursor: pointer;
}
.chat-floor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem 0;
  background: var(--paper);
}
.chat-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.chat-line {
  position: relative;
  width: 100%;
  padding: 0.05rem 0.3rem;
  line-height: 1.3;
}
.chat-line-menu {
  position: absolute;
  right: 0.4rem;
  top: -0.55rem;
  display: none;
  align-items: center;
  gap: 0.1rem;
  padding: 0.05rem 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 5;
}
.chat-line:hover .chat-line-menu,
.chat-line-menu:has(.chat-emoji-pop) {
  display: inline-flex;
}
.chat-line-act {
  background: none;
  border: none;
  color: var(--ink);
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chat-line-act:disabled {
  opacity: 0.4;
  cursor: default;
}
.chat-emoji-pop {
  position: absolute;
  right: 0;
  top: 100%;
  width: 19rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.3rem;
  z-index: 40;
}
.chat-emoji-pop.up {
  top: auto;
  bottom: 100%;
}
.chat-emoji-search {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85em;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.chat-emoji-pop .chat-emoji-strip {
  position: static;
  width: auto;
  max-height: 11rem;
  overflow-y: auto;
}
.chat-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}
.chat-react {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  font-size: 0.85em;
  padding: 0 0.45rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.chat-react-sticker {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
.chat-sticker-pop {
  max-width: 17rem;
}
.chat-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 48px);
  gap: 0.3rem;
}
.chat-sticker-choice {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}
.chat-sticker-choice:hover {
  border-color: var(--teal);
}
.chat-sticker-choice img,
.chat-sticker-choice canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.chat-react-mine {
  border-color: var(--teal);
  background: var(--surface-2);
}
.chat-react-glyph {
  font-size: 1.1em;
}
.chat-line:hover {
  background: var(--surface);
}
.chat-line-cont {
  padding-top: 0;
}
.chat-line-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
}
.chat-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--ink);
}
.chat-speaker-name {
  font-weight: 600;
}
.chat-line-when {
  font-size: 0.75em;
  color: var(--muted);
}
.chat-line-untrusted {
  font-size: 0.85em;
  color: var(--muted);
}
.chat-line-untrusted .chat-line-body,
.chat-line-untrusted .chat-speaker,
.chat-line-untrusted .chat-speaker-name {
  color: var(--muted);
}
.chat-line-found {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--teal);
}
.chat-landed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  font-size: 0.8em;
  color: var(--muted);
}
.chat-result-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  overflow-y: auto;
  min-height: 0;
}
.chat-results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.chat-result-hit {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.3rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.chat-result-hit:hover {
  background: var(--surface);
}
.chat-result-where {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8em;
  color: var(--muted);
}
.chat-result-when {
  margin-left: auto;
}
.chat-result-said {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.chat-result-said .person-inline {
  flex: none;
  max-width: 30%;
  font-size: 0.85em;
}
.chat-result-words {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-result-words mark {
  background: var(--teal);
  color: var(--on-accent);
}
.chat-line-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.3rem 0;
  font-size: 0.8em;
  color: var(--muted);
}
.chat-chatters-muted {
  opacity: 0.6;
}
.chat-chatters-mute {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 0.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chat-chatters-mute:hover {
  color: var(--coral);
}
.chat-line-pending {
  opacity: 0.6;
}
.chat-line-failed {
  opacity: 1;
}
.chat-line-unsent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8em;
  color: var(--coral);
}
.chat-line-unsent-act {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.chat-line-made {
  position: absolute;
  left: 0.6rem;
  top: 0.15em;
  color: var(--muted);
  font-size: 1.05em;
  line-height: 1;
}
.chat-line-edited {
  font-size: 0.75em;
  color: var(--muted);
  font-style: italic;
}
.chat-line-act-danger:hover {
  color: var(--coral);
}
.chat-editing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 0.85em;
  color: var(--muted);
}
.chat-editing-cancel {
  margin-left: auto;
  font-size: 0.9em;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  cursor: pointer;
}
.chat-line-emoji .chat-line-body {
  font-size: calc(1.5em * var(--lean, 1));
  line-height: 1.25;
}
.chat-line-veil {
  max-width: 28rem;
  min-height: 3.5rem;
}
.room-card-line-untrusted {
  font-size: 0.85em;
  color: var(--muted);
}
.chat-line-hidden {
  font-size: 0.8em;
  color: var(--muted);
  font-style: italic;
  padding-left: 2.7rem;
}
.chat-line-body {
  color: var(--ink);
  padding-left: 2.4rem;
  position: relative;
  font-size: calc(1em * var(--lean, 1));
}
.chat-line-body p {
  margin: 0;
}
.chat-line-body .reader-marquee {
  background: none;
  border: none;
  clip-path: none;
  --line: transparent;
  padding: 0;
}
.chat-msg-sealed {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-style: italic;
}
.chat-foot {
  flex: none;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.chat-typing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  padding: 0 0.3rem 0 2.4rem;
  font-size: 0.8em;
  color: var(--muted);
  font-style: italic;
}
.chat-closed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  margin: 0;
  padding: 0.6rem 0.2rem;
}
.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.chat-composer-words {
  flex: 1;
  min-width: 0;
}
.chat-composer-words .editor-live {
  min-height: 0;
  max-height: none;
  height: auto;
  background: transparent;
  border: none;
  clip-path: none;
  --line: transparent;
  overflow: visible;
}
.chat-composer-words .editor-live .cm-editor {
  background: var(--field);
  border: 1px solid var(--border);
  clip-path: none;
  --line: transparent;
  min-height: 2.6rem;
  max-height: 10rem;
}
.chat-composer-words .editor-live .cm-editor.cm-focused {
  outline: none;
}
.chat-composer-words .editor-live .cm-scroller {
  font-family: inherit;
  line-height: 1.4;
  max-height: 10rem;
  padding: 0;
}
.chat-composer-words .editor-live .cm-content {
  min-height: 0;
  padding: 0.45rem 0.5rem;
}
.chat-composer-words .editor-live .cm-line {
  position: relative;
}
.chat-composer-words .editor-live .cm-placeholder {
  position: absolute;
  left: 6px;
  top: 0;
  pointer-events: none;
  color: var(--muted);
}
.chat-composer-count {
  flex: none;
  align-self: center;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.chat-composer-count-over {
  color: var(--coral);
  font-weight: 600;
}
.chat-composer-attach {
  background: none;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chat-line-body img,
.chat-line-body video {
  max-width: min(100%, calc(28rem * var(--lean, 1)));
  max-height: calc(20rem * var(--lean, 1));
  display: block;
}
.chat-composer-send {
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--on-accent);
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 1.2em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.chat-composer-send:disabled {
  opacity: 0.6;
  cursor: default;
}
.chat-new {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 0;
  max-width: var(--post-measure);
}
.chat-new-name,
.chat-new-words {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
}
.chat-new-words {
  min-height: 5rem;
  resize: vertical;
}
.chat-new-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chat-new-go {
  margin-left: auto;
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  color: var(--on-accent);
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.chat-new-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.chat-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  padding: 2rem 0.5rem;
  margin: 0;
}
.chat-refused {
  padding: 1rem 0;
}
.room-card-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.room-card-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.room-card-more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.2rem 0;
  color: var(--muted);
  font-size: 0.85em;
}
.room-card-more::before,
.room-card-more::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}
.room-card-words {
  flex: 1;
  min-width: 0;
}
.room-card-words .reader-marquee {
  background: none;
  border: none;
  clip-path: none;
  --line: transparent;
  padding: 0;
}
.room-card-words p {
  margin: 0;
}
.room-card-words img,
.room-card-words video {
  max-width: min(100%, 20rem);
  max-height: 12rem;
  display: block;
}
.room-card-when {
  flex: none;
  font-size: 0.75em;
  color: var(--muted);
}
.room-hash {
  color: var(--muted);
  font-weight: 400;
  margin-right: 0.15em;
}
.book-title svg {
  vertical-align: -0.12em;
  margin-right: 0.3em;
  color: var(--teal);
}

/* groups.css */
.people-tabs {
  margin-bottom: 0;
}
.groups {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.groups-found {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.groups-found-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.groups-found-box {
  margin-top: 0;
}
.groups-found-name,
.group-invite-filter {
  flex: 1;
  font: inherit;
  color: var(--ink);
  background-color: var(--surface);
  --line: var(--border);
  padding: 0.4rem 0.6rem;
}
.groups-found-go,
.group-join,
.group-new-post {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--teal);
  background: none;
  --line: var(--teal);
  --j: 0.25em;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.groups-found-go:disabled {
  color: var(--muted);
  --line: var(--border);
  cursor: default;
}
.groups-error {
  color: var(--coral);
  font-size: 0.85rem;
}
.groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.group-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
  background: var(--surface);
  --line: var(--border);
  --j: 5px;
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
}
.group-row-invite {
  --line: var(--teal);
}
.group-row-name {
  font-weight: 600;
}
.group-row-wrap {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}
.group-row-wrap .group-row {
  flex: 1;
  min-width: 0;
}
.group-invite-acts {
  display: flex;
  gap: 0.5rem;
}
.group-decline {
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  --j: 3px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.group-decline:hover {
  color: var(--ink);
  --line: var(--border-strong);
}
.group-row-standing {
  color: var(--muted);
  font-size: 0.8rem;
}
.group-row-invite .group-row-standing {
  color: var(--teal);
}
.group-page {
  max-width: var(--post-measure);
  margin: 3vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.group-head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.group-name {
  margin: 0;
}
.group-page > .person-card-bio {
  margin: 0;
}
.group-members-count {
  margin-left: 0.3em;
  font-size: 0.75em;
  font-style: italic;
  font-weight: normal;
  color: var(--muted);
}
.group-invite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--surface);
  --line: var(--teal);
  --j: 5px;
  padding: 0.7rem 0.9rem;
}
.group-invite p {
  margin: 0;
}
.group-members-title {
  font-size: 1.1rem;
  font-weight: 700;
}
.group-invite-someone,
.group-gone,
.group-pinned,
.group-posts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.group-members-box {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: none;
  border: none;
  clip-path: none;
}
.group-members-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  clip-path: var(--jag);
}
.group-members-head {
  flex-wrap: wrap;
}
.group-glance {
  order: 1;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.group-standing {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 1.1rem;
}
.group-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.group-member > .person-row {
  flex: 1;
  min-width: 0;
}
.group-member-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.group-act,
.group-leave {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  --line: var(--border);
  --j: 0.25em;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
.group-members-head .group-leave {
  margin-left: auto;
}
.group-invite-sent {
  margin: 0;
  color: var(--teal);
  font-size: 0.85rem;
}
.feed-saved-group {
  cursor: default;
}
.feed-entry-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: -0.7em -1em 0.6em;
  padding: 0.4em 1em;
  background: var(--frame);
  color: var(--frame-text);
  font-size: 0.9em;
}
.feed-entry-group-name {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.feed-entry-group-name:hover {
  text-decoration: underline;
}
.feed-entry-group-kind {
  font-size: 0.8em;
  font-style: italic;
  font-weight: normal;
  opacity: 0.7;
}
.feed-entry-group-public {
  padding: 0.7em 1em;
  font-size: 1.05em;
  gap: 0.7em;
}
.feed-entry-group-note {
  margin-left: auto;
  font-size: 0.85em;
  opacity: 0.8;
}
.feed-entry-hidden {
  opacity: 0.6;
}
.group-posts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.group-new-post {
  text-decoration: none;
}
.group-posts-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.group-hero {
  margin: 0;
}
.group-head + .group-members-box {
  margin-top: -0.9rem;
}
.group-edit-face {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--plate);
  --line: var(--border);
  --j: 0.25em;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}
.group-face-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  --line: var(--border);
}
.group-face-row,
.group-face-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.group-face-label {
  min-width: 4rem;
  font-weight: 600;
}
.group-face-acts {
  justify-content: flex-end;
}
.group-row-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.group-face-acts .profile-save {
  min-width: 6.5rem;
}
.group-face-acts .group-face-cancel {
  background: var(--surface-2);
  --line: var(--border);
  color: var(--ink-soft);
}
.group-tri {
  --face-clip: polygon(50% 0, 100% 100%, 0 100%);
}
.group-tri-mini {
  width: 1.6rem;
  height: 1.386rem;
}
.group-tri-band {
  width: 2.6rem;
  height: 2.252rem;
}
.group-tri-hero {
  width: 10rem;
  height: 8.66rem;
  padding: 6px;
}
.group-general {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.group-hero-mark {
  position: relative;
  display: inline-block;
}
.group-kind {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  font-size: 1.2rem;
  color: var(--ink);
  background: var(--surface);
  border: var(--lw) solid var(--border-strong);
  cursor: help;
}
.group-kind .group-kind-label {
  bottom: auto;
  top: calc(100% + 0.35rem);
  left: 0;
  transform: none;
  align-items: flex-start;
}
.group-kind:hover .group-kind-label,
.group-kind:focus-visible .group-kind-label {
  opacity: 1;
}
.public-group-follow {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.public-group-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.public-group-member {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.person-card-groups {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.2rem 0;
}
.person-card-groups a {
  color: var(--teal);
  text-decoration: none;
}
.group-tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.4rem;
  margin: 0.8rem 0;
  border-bottom: var(--lw) solid var(--border);
}
.group-tabs .tab {
  --line: var(--border);
  font-size: 0.95rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: calc(-1 * var(--lw));
}
.group-tabs .tab.active {
  color: var(--teal);
  background: var(--surface);
}

/* doc/drawing.css */
.notes-columns .drawing-tools {
  width: var(--w-tools, 190px);
}
.drawing-tools {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow-y: auto;
}
.drawing-toolset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.drawing-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
}
.drawing-tool-about {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.4rem 0 0;
  color: var(--muted);
}
.drawing-tool-about strong {
  color: var(--ink);
}
.drawing-tool-about span {
  font-size: 0.85rem;
  font-style: italic;
}
@media (max-width: 900px) {
  .drawing-tool-icon {
    width: 3.3rem;
    height: 3.3rem;
    font-size: 1.725rem;
  }
  .drawing-colours {
    grid-template-columns: repeat(auto-fill, minmax(39px, 1fr));
  }
  .colour-picker-now {
    width: 39px;
    height: 39px;
  }
  .colour-picker-hex {
    font-size: 1.1rem;
  }
}
.drawing-tool-icon[aria-disabled=true] {
  opacity: 0.35;
  cursor: not-allowed;
}
.drawing-tool-shake-a {
  animation: drawing-shake-a 0.35s ease-in-out;
}
.drawing-tool-shake-b {
  animation: drawing-shake-b 0.35s ease-in-out;
}
@keyframes drawing-shake-a {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes drawing-shake-b {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawing-tool-shake-a,
  .drawing-tool-shake-b {
    animation: none;
  }
}
.drawing-refused {
  margin: 0.4rem 0 0;
  color: var(--coral);
  font-size: 0.85rem;
}
.drawing-tool-icon:hover {
  border-color: var(--border-strong);
}
.drawing-tool-icon.active {
  border-color: var(--teal);
  background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--teal);
  color: var(--accent-ink);
}
.drawing-tool {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  text-align: left;
}
.drawing-framed {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.drawing-framed.error {
  color: var(--coral);
}
.drawing-tool:hover:not(:disabled) {
  border-color: var(--border-strong);
}
.drawing-tool.active {
  border-color: var(--teal);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--teal);
}
.drawing-tool:disabled {
  color: var(--faint);
  cursor: default;
}
.drawing-size {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.drawing-size input {
  width: 100%;
  accent-color: var(--teal);
}
.drawing-size-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.drawing-size-row input[type=range] {
  flex: 1;
  min-width: 0;
}
.drawing-size .drawing-size-number {
  width: 4.2rem;
  flex: none;
}
.drawing-colours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
  gap: 0.35rem;
}
.drawing-swatch {
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
}
.drawing-swatch.active {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.drawing-count {
  margin: 0;
  color: var(--faint);
  font-size: 0.8rem;
}
.drawing {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.drawing-hang {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--surface);
  --line: var(--border-strong);
  --j: 0.3em;
}
.drawing-head {
  align-items: center;
}
.drawing-floor {
  background-color: var(--floor-light);
  background-image:
    linear-gradient(
      45deg,
      var(--floor-dark) 25%,
      transparent 25%,
      transparent 75%,
      var(--floor-dark) 75%),
    linear-gradient(
      45deg,
      var(--floor-dark) 25%,
      transparent 25%,
      transparent 75%,
      var(--floor-dark) 75%);
  background-size: calc(var(--floor-square, 10px) * 2) calc(var(--floor-square, 10px) * 2);
  background-position: 0 0, var(--floor-square, 10px) var(--floor-square, 10px);
}
.drawing-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: auto;
}
.drawing-paper {
  position: relative;
  margin: auto;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  box-shadow: 0 1px 6px var(--shadow-drop);
  cursor: none;
  touch-action: none;
}
@supports (width: min(1px, 2px)) {
  .drawing-paper {
    width: min(100%, calc((100vh - 12rem) * 4 / 3));
  }
}
.drawing-paper.aim,
.drawing-paper.aim .drawing-canvas {
  cursor: crosshair;
}
.drawing-paper.type,
.drawing-paper.type .drawing-canvas {
  cursor: text;
}
.drawing-paper.grab,
.drawing-paper.grab .drawing-canvas {
  cursor: grab;
}
.drawing-paper.grabbing,
.drawing-paper.grabbing .drawing-canvas {
  cursor: grabbing;
}
.drawing-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.drawing-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.drawing-frame polygon {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
.drawing-frame rect {
  fill: var(--paper);
  stroke: var(--teal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.drawing-crop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.drawing-crop-shade {
  fill: var(--crop-shade);
}
.drawing-crop-edge {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
.drawing-crop-handle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.drawing-cursor {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px var(--paper);
}
.drawing-sticker-cursor {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  object-fit: fill;
  opacity: 0.85;
}
.drawing-paper.stamp,
.drawing-paper.stamp .drawing-canvas {
  cursor: none;
}
.drawing-stickers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawing-sticker-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
  gap: 0.35rem;
}
.drawing-sticker {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--surface);
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 3px;
  clip-path: var(--jag-1);
  cursor: pointer;
}
.drawing-sticker.active {
  --line: var(--teal);
  background: var(--paper);
}
.drawing-sticker-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.drawing-sticker-thumb img,
.drawing-sticker-thumb canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.drawing-cursor.eraser {
  border-style: dashed;
}
.note-row-thumb.drawing-thumb {
  width: 64px;
  height: 48px;
  object-fit: contain;
  vertical-align: middle;
  --floor-square: 4px;
}
.drawing-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
}
.colour-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.colour-picker-wheel {
  display: block;
  cursor: crosshair;
  touch-action: none;
}
.colour-picker-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.colour-picker-now {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.colour-picker-hex {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  padding: 0.25rem 0.4rem;
}
.notes-columns .drawing-layers {
  width: var(--w-layers, 190px);
}
.drawing-layers {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}
.drawing-layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.drawing-layer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: grab;
}
.drawing-layer.drop-above {
  box-shadow: 0 calc(-0.15rem - 1px) 0 0 var(--teal);
}
.drawing-layer.drop-below {
  box-shadow: 0 calc(0.15rem + 1px) 0 0 var(--teal);
}
.drawing-layer.current {
  border-color: var(--teal);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--teal);
}
.drawing-layer-thumb {
  grid-row: 1 / 3;
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 48px;
  justify-self: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
  --floor-square: 4px;
}
.drawing-layer-name {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawing-layer-name-field {
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--teal);
  padding: 0.05rem 0.25rem;
  cursor: text;
}
.drawing-layer-acts {
  display: flex;
  gap: 0.1rem;
  margin-left: -0.2rem;
}
.drawing-layer-name.hidden {
  color: var(--faint);
  text-decoration: line-through;
}
.drawing-layer-eye {
  flex-shrink: 0;
  font: inherit;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
}
.drawing-layer-eye:disabled {
  color: var(--faint);
  cursor: default;
}
.drawing-layer-eye:hover:not(:disabled) {
  color: var(--teal);
}
.drawing-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.drawing-nav-zoom {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.drawing-nav-zoom input {
  flex: 1;
  min-width: 0;
}
.drawing-nav-fit {
  align-self: flex-end;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  margin-top: -0.3rem;
  cursor: pointer;
}
.drawing-nav-fit:disabled {
  cursor: default;
}
.drawing-nav-fit:hover:not(:disabled) {
  color: var(--teal);
}
.drawing-nav-map {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  --floor-square: 5px;
}
.drawing-nav-mini {
  display: block;
  width: 100%;
  height: 100%;
}
.drawing-nav-rule {
  width: 100%;
  margin: 0.2rem 0;
  border: none;
  border-top: 1px solid var(--border);
}
.drawing-nav-view {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--viewport);
  pointer-events: none;
}
.imagepick {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.imagepick-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.imagepick-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  cursor: pointer;
}
.imagepick-upload:disabled {
  opacity: 0.6;
  cursor: default;
}
.imagepick-search {
  flex: 1;
  min-width: 12rem;
  font: inherit;
}
.imagepick-buckets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.imagepick-bucket {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--field);
  border: 1px solid var(--border-strong);
  padding: 0.15rem 0.55rem;
  cursor: pointer;
}
.imagepick-bucket.active {
  color: var(--on-accent);
  background: var(--sea);
  border-color: var(--sea);
}
.imagepick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.imagepick-tag {
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}
.imagepick-tag.active {
  color: var(--on-accent);
  background: var(--teal);
  border-color: var(--teal);
}
.imagepick-tag-count {
  opacity: 0.7;
}
.imagepick-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}
.imagepick-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  padding: 0.25rem;
  cursor: pointer;
  text-align: left;
}
.imagepick-item:hover,
.imagepick-item:focus-visible {
  border-color: var(--teal);
}
.imagepick-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  --floor-square: 6px;
}
.imagepick-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.imagepick-thumb .drawing-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  --floor-square: 6px;
}
.imagepick-title {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imagepick-more {
  align-self: center;
  font: inherit;
}
.drawing-text-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawing-text-words {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  resize: vertical;
}
.drawing-text-options select {
  width: 100%;
  font: inherit;
}
.drawing-tool-icon:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 900px) {
  .imagepick-tags {
    gap: 0.45rem;
  }
  .imagepick-tag {
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
  }
}

/* apps/device.css */
.device {
  max-width: 520px;
  margin: 4vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.device-menu,
.device-modes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.device-menu a.removal-option {
  text-decoration: none;
}
.device-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.device-field input,
.device-field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
}
.device-field input:focus,
.device-field textarea:focus {
  outline: 2px solid var(--glow);
  border-color: var(--teal);
}
.device-ticket {
  background: var(--surface);
  padding: 0.6rem 0.8rem;
}
.device-log {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}
.device-taglines {
  resize: vertical;
  line-height: 1.5;
}
.device-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.device-follows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.device-follows li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--surface);
  padding: 0.4rem 0.6rem;
}
.device-follow-who {
  color: var(--ink);
}
.device-follow-dials {
  color: var(--muted);
  font-size: 0.8rem;
  margin-left: auto;
}
.device-follow-x {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.device-dials {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.device-dial select {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
}
.device-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.4rem 0 0.2rem;
}
.machine-this {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.machine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.machine-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
}
.machine-row-quiet {
  opacity: 0.7;
}
.machine-icon {
  flex: none;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--teal);
}
.machine-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.machine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.machine-name {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.machine-words {
  color: var(--muted);
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-size: 0.8rem;
}
.machine-facts {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.machine-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.machine-status-answering {
  color: var(--teal);
}
.machine-status-dark,
.machine-status-unanswered {
  color: var(--coral);
}
.machine-reliability {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.machine-bar {
  flex: 0 0 6rem;
  height: 0.4rem;
  background: var(--surface-2);
}
.machine-bar-fill {
  display: block;
  height: 100%;
  background: var(--teal);
}
.machine-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.machine-link {
  font-size: 0.8rem;
  color: var(--teal);
  border: 1px solid var(--border);
  padding: 0.1rem 0.45rem;
  text-decoration: none;
}

/* apps/bank.css */
.bank-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.bank-columns {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.bank-columns .bank-portfolio {
  width: var(--w-portfolio, 240px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 1rem;
}
.bank-portfolio-empty {
  padding: 0.4rem 0.2rem;
}
.bank-columns .bank-market {
  width: var(--w-market, 280px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.bank-columns .bank-contracts-column {
  width: var(--w-contracts, 220px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.bank-contracts {
  padding: 0.4rem 0.6rem 1rem;
}
.bank-contracts-head {
  margin: 0.6rem 0 0.3rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.bank-contract-top {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  background: var(--surface);
  border: 4px solid var(--ink);
}
.bank-contract-top-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.bank-contract-top-name svg {
  flex-shrink: 0;
  font-size: 1.3rem;
}
.bank-contract-top-reward {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-weight: 700;
  color: var(--ink);
}
.bank-contract-fine {
  align-self: flex-start;
  font-size: 0.68rem;
  color: var(--muted);
  cursor: help;
}
.bank-contract-fine-text {
  display: none;
}
@media (max-width: 900px) {
  .bank-contract-fine {
    cursor: pointer;
  }
  .bank-contract-fine-label {
    display: none;
  }
  .bank-contract-fine-text {
    display: inline;
  }
}
.bank-contract-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bank-contract {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.88rem;
}
.bank-contract-done {
  color: var(--ink-soft);
}
.bank-contract-reward {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-size: 0.8rem;
  color: var(--muted);
}
.bank {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.2rem 1rem 2rem;
}
.bank > * {
  max-width: var(--post-measure);
}
.bank-balance {
  margin: 0 0 1rem;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
}
.bank-kinds {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.bank-kinds th {
  text-align: left;
  font-weight: normal;
  color: var(--ink-soft);
  padding: 0.2rem 0;
}
.bank-kinds td {
  text-align: right;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  padding: 0.2rem 0;
}
.bank-rule {
  margin: 1.2rem 0;
  border: none;
  border-top: 1px solid var(--border);
}
.bank-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bank-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  font-size: 0.9rem;
}
.bank-line-what {
  flex: 1;
  min-width: 0;
}
.bank-line-when {
  color: var(--faint);
  font-size: 0.75rem;
  white-space: nowrap;
}
.bank-line-amount {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  color: var(--sea);
  white-space: nowrap;
}
.bank-months {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bank-month-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  text-align: left;
}
.bank-month-head.open {
  background: var(--surface);
}
.bank-month-name {
  flex: 1;
  font-weight: 600;
}
.bank-month-count {
  color: var(--faint);
  font-size: 0.8rem;
}
.bank-month .bank-lines {
  margin-top: 0.3rem;
}
.bank-market-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.4rem 0.2rem 1rem;
}
.bank-instrument {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  background: var(--surface);
  border: 4px solid var(--ink);
  cursor: help;
}
.bank-instrument.unaffordable {
  opacity: 0.45;
  filter: grayscale(1);
}
.bank-instrument-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink);
}
.bank-instrument-name svg {
  font-size: 1.5rem;
}
.bank-instrument-amount {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bank-instrument-price {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-size: 1.1rem;
  text-align: center;
}
.bank-instrument-amount input {
  width: 100%;
  accent-color: var(--teal);
}
.bank-buy {
  align-self: center;
  padding: 0.4rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  cursor: pointer;
}
.bank-buy:disabled {
  opacity: 0.6;
  cursor: default;
}
.bank-holdings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bank-holding {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface);
  font-size: 0.85rem;
}
.bank-holding-kind {
  font-weight: 600;
}
.bank-holding-price {
  grid-column: 1 / -1;
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  overflow-wrap: anywhere;
}
.bank-holding-progress,
.bank-holding-paid {
  color: var(--muted);
  font-size: 0.78rem;
}
.bank-holding-paid {
  grid-column: 1 / -1;
}
.bank-holding-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--surface-2);
}
.bank-sell {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.15rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.bank-sell:disabled {
  opacity: 0.6;
  cursor: default;
}
.bank-holding-bar span {
  display: block;
  height: 100%;
  background: var(--sea);
}
.bank-unlock {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 3px solid var(--ink);
}
.bank-unlock.unaffordable {
  opacity: 0.45;
  filter: grayscale(1);
}
.bank-unlock-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}
.bank-unlock-name svg {
  font-size: 1.3rem;
}
.bank-unlock-about,
.bank-unlock-needs {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.bank-unlock-needs {
  font-style: italic;
  color: var(--muted);
}
.bank-unlock-warning {
  display: flex;
  gap: 0.3rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.8rem;
  color: var(--coral);
}
.bank-unlock-price {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  text-align: center;
}
.bank-unlock-discount {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.35em;
  font-size: 0.75em;
  color: var(--surface);
  background: var(--ink);
  cursor: help;
}
.unlock-locked {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}
.unlock-locked-card {
  max-width: 28rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 3px solid var(--ink);
}
.unlock-locked-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.bank-owned {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bank-owned-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.bank-owned-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink);
}
.bank-owned-when {
  color: var(--muted);
}
.bank-colorways {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.bank-commodities {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.bank-commodity {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  border: 3px solid var(--ink);
}
.bank-commodity-name {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}
.bank-commodity-price {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  color: var(--ink);
}
.bank-commodity-weather {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.bank-spark {
  grid-column: 1 / -1;
  width: 100%;
  height: 1.8rem;
}
.bank-spark polyline {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.bank-spark rect {
  fill: transparent;
}
.bank-commodity-buy {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.bank-commodity-units {
  width: 4.5rem;
  min-width: 0;
  font: inherit;
}
.bank-commodity-cost {
  font-family:
    "JetBrains Mono",
    ui-monospace,
    monospace;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* apps/amp.css */
.amp-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 0.5rem;
}
.amp-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 1rem;
}
.amp-playlists {
  width: var(--w-playlists, 180px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow-y: auto;
  min-height: 0;
}
.amp-playlists-group {
  margin: 0.4rem 0 0.1rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: lowercase;
}
.amp-filters {
  margin-bottom: 0.4rem;
}
.amp-range-row {
  align-items: center;
  gap: 0.35rem;
}
.amp-range-box {
  width: 5.5rem;
}
.amp-filters-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.amp-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.amp-count {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.amp-table {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  border: 1px solid var(--border);
}
.amp-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  width: max-content;
  min-width: 100%;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.amp-th {
  position: relative;
  padding: 0.35rem 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
}
.amp-th-sorts {
  cursor: pointer;
}
.amp-th-sorts:hover {
  color: var(--ink);
}
.amp-th-dir {
  margin-left: 0.25rem;
  color: var(--sea);
}
.amp-th-edge {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}
.amp-th-edge:hover {
  background: var(--border-strong);
}
.amp-columns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amp-columns-button {
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
}
.amp-columns-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}
.amp-rows {
  position: relative;
  min-width: 100%;
}
.amp-row {
  -webkit-touch-callout: none;
  position: absolute;
  left: 0;
  height: 30px;
  display: grid;
  align-items: center;
  width: max-content;
  min-width: 100%;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: default;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.amp-row:hover {
  background: var(--surface-2);
}
.amp-row-picked,
.amp-row-picked:hover {
  background: var(--chip-on);
  color: var(--chip-on-ink);
}
.amp-row-playing .amp-td-title {
  color: var(--sea);
  font-weight: 600;
}
.amp-row-picked.amp-row-playing .amp-td-title {
  color: inherit;
}
.amp-td-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sea);
}
.amp-row-picked .amp-td-lead {
  color: inherit;
}
.amp-td {
  padding: 0 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.amp-td-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.amp-empty {
  padding: 1rem;
}
.amp-panel {
  width: var(--w-file, 22rem);
  min-width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  min-height: 0;
}
.amp-panel-body {
  display: flex;
  flex-direction: column;
}
.amp-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.chip.amp-delete {
  background: var(--coral);
  color: var(--on-danger);
  --line: var(--coral);
}
.amp-panel-title {
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-strong);
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.amp-panel-sub {
  font-size: 0.95rem;
  margin: 1rem 0 0.4rem;
}
.amp-reaction {
  display: inline-flex;
  gap: 0.4rem;
}
.amp-layer {
  margin: 0;
}
.amp-layer-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
}
.amp-layer-row dt {
  color: var(--muted);
  font-size: 0.8rem;
}
.amp-layer-row dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.amp-layer-theirs {
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.player-buttons {
  display: flex;
  gap: 0.15rem;
}
.player-button {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 1.15rem;
  padding: 0.2rem;
  cursor: pointer;
  display: inline-flex;
}
.player-button:hover {
  color: var(--sea);
}
.player-button:disabled {
  opacity: 0.35;
  cursor: default;
}
.player-button.player-on,
.player-button.player-on:hover {
  background: var(--teal);
  color: var(--on-accent);
  border-radius: 3px;
}
.player-play {
  font-size: 1.5rem;
}
.player-thumb,
.player-mini-thumb {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: cover;
  flex-shrink: 0;
}
.player-thumb-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface);
}
.player-now {
  display: flex;
  flex-direction: column;
  min-width: 6rem;
  max-width: 16rem;
  overflow: hidden;
}
.player-title,
.player-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-title {
  font-size: 0.9rem;
  color: var(--ink);
}
.player-artist {
  font-size: 0.75rem;
  color: var(--muted);
}
.player-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 6rem;
}
.player-scrub {
  flex: 1;
  min-width: 0;
}
.player-time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.player-volume {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft);
}
.player-volume input {
  width: 5rem;
}
.player-volume input.player-volume-muted {
  opacity: 0.4;
}
.player-thumb-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
}
.player-source {
  color: var(--muted);
}
.player-rate {
  display: inline-flex;
  gap: 0.1rem;
  flex-shrink: 0;
}
.player-cassette-rate {
  display: none;
}
.player-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.player-file-amp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.player-mini {
  position: fixed;
  left: 1rem;
  bottom: calc(3rem + var(--safe-bottom) + 0.75rem);
  z-index: var(--layer-toast);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.3rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.app-frame:has(.amp-expanded) > .app-header {
  display: none;
}
.app-frame:has(.amp-expanded) {
  padding-top: 10px;
}
.player-mini-now {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.player-expanded {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.player-backdrop {
  position: absolute;
  inset: -2rem;
  opacity: 0.55;
}
.player-backdrop-light,
.player-backdrop-heavy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-backdrop-light {
  filter: blur(5px);
}
.player-backdrop-heavy {
  filter: blur(16px);
  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      black 50%,
      transparent 90%);
  mask-image:
    radial-gradient(
      ellipse at center,
      black 50%,
      transparent 90%);
}
.cassette-stage {
  position: relative;
  width: min(80%, 38rem);
}
.cassette {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 2px var(--shadow-drop)) drop-shadow(0 8px 10px var(--shadow-drop));
  transform-origin: 50% 100%;
  will-change: transform;
}
.cassette[role=button] {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cassette[role=button]:focus {
  outline: none;
}
.cassette[role=button]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.cassette-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -10%;
  height: 18%;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      var(--shadow-drop) 30%,
      transparent 70%),
    radial-gradient(
      ellipse at 50% 45%,
      var(--shadow-drop) 20%,
      transparent 60%);
  filter: blur(5px);
  will-change: transform, opacity;
}
.cassette-style-0 {
  --cassette-block: var(--teal);
}
.cassette-style-1 {
  --cassette-body: var(--ink-soft);
  --cassette-foot: var(--ink);
  --cassette-stripe: var(--pink);
  --cassette-block: var(--peach);
}
.cassette-style-2 {
  --cassette-body: var(--teal);
  --cassette-foot: var(--teal-deep);
  --cassette-stripe: var(--peach);
  --cassette-block: var(--pink);
}
.cassette-style-3 {
  --cassette-body: var(--pink);
  --cassette-foot: var(--surface-2);
  --cassette-stripe: var(--teal);
  --cassette-block: var(--peach);
}
.cassette-body {
  fill: var(--cassette-body, var(--surface));
  stroke: var(--cassette-edge);
  stroke-width: 3;
}
.cassette-screw {
  fill: var(--cassette-screw);
  stroke: var(--cassette-screw-edge);
  stroke-width: 1.5;
}
.cassette-screw-slot {
  stroke: var(--cassette-screw-edge);
  stroke-width: 1.2;
}
.cassette-label {
  fill: var(--paper);
  stroke: var(--border);
}
.cassette-stripe {
  fill: var(--cassette-stripe, var(--peach));
  opacity: 0.7;
}
.cassette-line {
  stroke: var(--border-strong);
  stroke-width: 1;
}
.cassette-line-faint {
  stroke: var(--border);
  stroke-width: 0.7;
}
.cassette-block,
.cassette-diagonal {
  fill: var(--cassette-block, var(--teal));
  opacity: 0.75;
}
.cassette-brand {
  fill: var(--paper);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 2px;
}
.cassette-side {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.cassette-side-letter {
  fill: var(--ink);
  font-size: 18px;
  font-weight: bold;
}
.cassette-print {
  fill: var(--ink);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.cassette-text {
  fill: var(--ink);
  font-family: "Caveat", cursive;
  font-size: 22px;
}
.cassette-text-small {
  font-size: 15px;
}
.cassette-font-caveat .cassette-text {
  font-family: "Caveat", cursive;
}
.cassette-font-audiowide .cassette-text {
  font-family: "Audiowide", sans-serif;
}
.cassette-font-major-mono .cassette-text {
  font-family: "Major Mono Display", monospace;
}
.cassette-font-atkinson .cassette-text {
  font-family: "Atkinson Hyperlegible", sans-serif;
}
.cassette-font-special-elite .cassette-text {
  font-family: "Special Elite", monospace;
}
.cassette-font-bungee .cassette-text {
  font-family: "Bungee", sans-serif;
}
.cassette-font-orbitron .cassette-text {
  font-family: "Orbitron", sans-serif;
}
.cassette-font-bitcount .cassette-text {
  font-family: "Bitcount", monospace;
}
.cassette-window {
  fill: var(--ink-soft);
  opacity: 0.35;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}
.cassette-tape {
  fill: var(--ink);
  opacity: 0.45;
}
.cassette-hub {
  fill: var(--paper);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}
.cassette-hole {
  fill: var(--ink-soft);
}
.cassette-tooth {
  fill: var(--paper);
}
.cassette-foot {
  fill: var(--cassette-foot, var(--surface-2));
  stroke: var(--border);
}
@keyframes cassette-spin {
  to {
    transform: rotate(360deg);
  }
}
.cassette-playing .cassette-reel {
  animation: cassette-spin 2.4s linear infinite;
}
.amp-tag {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.75rem;
  line-height: 1.35;
}
.amp-row-picked .amp-tag {
  border-color: currentColor;
  background: transparent;
}
.amp-reacted {
  margin-right: 0.5rem;
}
.amp-reacted-count {
  margin-left: 0.1rem;
  font-size: 0.75rem;
}
.amp-drag-handle {
  display: inline-flex;
  color: var(--muted);
  cursor: grab;
}
.amp-row-drop-before {
  box-shadow: inset 0 2px 0 var(--teal);
}
.amp-row-drop-after {
  box-shadow: inset 0 -2px 0 var(--teal);
}
.amp-take-out {
  white-space: nowrap;
}
.amp-mixtape-select {
  max-width: 12rem;
  font-size: 0.85rem;
}
.amp-playlists-group-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amp-playlists-new {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: 0.1rem 0.3rem;
}
.amp-playlists-new:hover {
  color: var(--teal);
}
.amp-on-air {
  display: inline-flex;
  margin-right: 0.25rem;
  color: var(--teal);
}
.amp-station {
  overflow-y: auto;
  min-height: 0;
}
.amp-station-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 0.5rem 0 1rem;
}
.amp-pie {
  width: 12rem;
  height: 12rem;
  flex-shrink: 0;
}
.amp-pie path,
.amp-pie circle {
  stroke: var(--surface);
  stroke-width: 0.8;
}
.amp-pie-empty {
  fill: var(--surface-2);
}
.amp-station-slices {
  flex: 1;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.amp-slice-row {
  display: grid;
  grid-template-columns: auto auto 1fr 9rem 3rem;
  align-items: center;
  gap: 0.5rem;
}
.amp-slice-swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 2px;
}
.amp-slice-name {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.amp-slice-weight {
  width: 100%;
}
.amp-slice-share {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.amp-slice-add {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}
.amp-station-playing {
  background: var(--teal);
  color: var(--on-accent);
  --line: var(--teal);
}
.amp-station-play {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.amp-station-lately {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.9rem;
}
.amp-station-artist {
  color: var(--muted);
}
.amp-station-lately li {
  cursor: pointer;
}
.amp-station-source {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.amp-slice-count {
  font-size: 0.8rem;
  color: var(--muted);
}
.amp-now {
  width: var(--w-now, 16rem);
  min-width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  min-height: 0;
}
.amp-now-from {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}
.amp-now-queue {
  list-style: none;
  margin: 0;
  padding: 0;
}
.amp-now-row {
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.amp-now-row:hover {
  background: var(--surface-2);
}
.amp-now-past {
  opacity: 0.55;
}
.amp-now-playing {
  background: var(--surface-2);
  border-left: 3px solid var(--teal);
}
.amp-now-title,
.amp-now-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amp-now-title {
  font-size: 0.9rem;
}
.amp-now-artist {
  font-size: 0.75rem;
  color: var(--muted);
}
.amp-now-rate {
  margin-top: 0.2rem;
}
.amp-now-end {
  margin: 0.5rem 0.4rem;
}
.amp-slice-0 {
  fill: var(--teal);
  background: var(--teal);
}
.amp-slice-1 {
  fill: var(--pink);
  background: var(--pink);
}
.amp-slice-2 {
  fill: var(--peach);
  background: var(--peach);
}
.amp-slice-3 {
  fill: var(--sea);
  background: var(--sea);
}
.amp-slice-4 {
  fill: var(--coral);
  background: var(--coral);
}
.amp-slice-5 {
  fill: var(--teal-deep);
  background: var(--teal-deep);
}
.amp-slice-6 {
  fill: var(--muted);
  background: var(--muted);
}
.amp-slice-7 {
  fill: var(--border-strong);
  background: var(--border-strong);
}
.amp-row-uncarried {
  color: var(--muted);
}
.amp-uncarried {
  margin-left: 0.5rem;
  padding: 0 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.7rem;
}
.amp-td-two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.amp-td-line,
.amp-td-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.amp-td-sub {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--muted);
}
.amp-row-picked .amp-td-sub {
  color: inherit;
  opacity: 0.8;
}
.amp-drag-handle,
.amp-th-edge {
  touch-action: none;
}
@media (max-width: 900px) {
  .amp-main {
    gap: 0.5rem;
  }
  .amp-row {
    font-size: 0.95rem;
  }
  .amp-drag-handle {
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.2rem;
  }
  .amp-th-edge {
    width: 14px;
  }
  .amp-th {
    padding-block: 0.6rem;
  }
  .amp-columns-menu label {
    padding-block: 0.15rem;
  }
  .amp-columns-button {
    min-width: 2rem;
  }
  .player-bar {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    padding: 0.35rem 0.5rem;
  }
  .player-buttons {
    grid-area: 1 / 1;
  }
  .player-bar > .player-thumb,
  .player-bar > .player-thumb-button {
    grid-area: 1 / 2;
  }
  .player-now {
    grid-area: 1 / 3 / 2 / 5;
    max-width: none;
    min-width: 0;
  }
  .player-bar > .player-rate,
  .player-level {
    display: none;
  }
  .player-cassette-rate {
    display: inline-flex;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    gap: 1rem;
    padding: 0.3rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
  }
  .player-cassette-rate .player-button {
    font-size: 1.8rem;
  }
  .player-track {
    grid-area: 2 / 1 / 3 / 4;
    min-width: 0;
  }
  .player-volume {
    display: none;
  }
  .player-button {
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
  }
  .player-play {
    font-size: 1.6rem;
  }
  .amp-slice-row {
    grid-template-columns: auto auto 1fr 3rem;
    row-gap: 0.1rem;
  }
  .amp-slice-weight {
    grid-row: 2;
    grid-column: 2 / -1;
  }
  .amp-station-slices {
    min-width: 0;
    flex-basis: 100%;
  }
  .amp-pie {
    margin: 0 auto;
  }
  .amp-panel-title {
    font-size: 1.2rem;
  }
}
.amp-pin {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  padding: 0.28rem 0.3rem;
  color: var(--muted);
  opacity: 0.6;
}
.amp-pin:hover,
.amp-pin-on {
  opacity: 1;
}
.amp-pin-on {
  color: var(--teal);
}
@media (hover: hover) {
  .feed-saved-row:not(:hover) .amp-pin:not(.amp-pin-on) {
    visibility: hidden;
  }
}
.amp-pinned-kind {
  display: inline-flex;
  margin-right: 0.25rem;
  color: var(--muted);
}
.feed-saved-row.active .amp-pin,
.feed-saved-row.active .amp-pinned-kind {
  color: var(--surface);
}

/* modal.css */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2rem + var(--safe-top)) calc(2rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(2rem + var(--safe-left));
}
.modal {
  width: min(480px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
  background: var(--teal-deep);
  clip-path: var(--panel-clip);
  color: var(--dock-text);
}
.modal.modal-wide {
  width: min(920px, 100%);
  height: 100%;
}
.modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.35rem 0 0.45rem 0.5rem;
}
.modal-title {
  font-family: "Press Start 2P", monospace;
  font-size: 0.95rem;
  color: var(--dock-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  padding: 0;
  background: var(--surface);
  border: 0;
  clip-path: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 1.3rem;
  box-shadow: inset 0 1px 2px var(--shadow-punch);
}
.modal-close:hover {
  color: var(--teal);
}
.modal-body {
  flex: 1;
  min-height: 6rem;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--surface);
  clip-path: var(--panel-clip);
  color: var(--ink);
}
@media (max-width: 900px) {
  .modal-close {
    width: 2.4rem;
    height: 2.4rem;
  }
  .modal-scrim {
    padding: calc(0.75rem + var(--safe-top)) calc(0.75rem + var(--safe-right)) calc(0.75rem + var(--safe-bottom)) calc(0.75rem + var(--safe-left));
  }
  .modal-ask-buttons .copy-bucket {
    font-size: 1rem;
    padding: 0.4rem 1rem;
  }
}
.modal-ask {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.modal-ask-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.modal-ask-input {
  background: var(--field);
  border: 1px solid var(--border-strong);
  font: inherit;
  padding: 0.4rem 0.6rem;
  color: var(--ink);
}
.modal-ask-body {
  color: var(--ink);
  line-height: 1.45;
}
.modal-ask-body p {
  margin: 0 0 0.6rem;
}
.rights-uncarried {
  margin: 0.2rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.rights-songs {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.modal-ask-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.copy-bucket.modal-ask-ok {
  background: var(--teal);
  color: var(--on-accent);
  --line: var(--teal);
}
.copy-bucket.modal-ask-danger {
  background: var(--coral);
  color: var(--on-danger);
  --line: var(--coral);
}
.copy-bucket.modal-ask-ok:disabled {
  opacity: 0.5;
  cursor: default;
}
.share-to {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.share-to .copy-bucket {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}
.share-to-state {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* qr.css */
.qr-code {
  display: block;
  width: 100%;
  height: auto;
}
.qr-plate {
  fill: var(--qr-light);
}
.qr-modules {
  fill: var(--qr-dark);
}
.qr-badge {
  width: 4.5rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: none;
  cursor: zoom-in;
  flex-shrink: 0;
}
.qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.qr-code-big {
  width: min(20rem, 100%);
}
.qr-said {
  margin: 0;
  max-width: 100%;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  text-align: center;
  color: var(--ink-soft);
}
.qr-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
.qr-panel .modal-ask-buttons {
  align-self: stretch;
}
.open-in-app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--teal);
  color: var(--on-accent);
  --line: var(--teal);
  font-size: 1rem;
  text-decoration: none;
}
.open-in-app svg {
  font-size: 1.3rem;
}

/* doc/upload.css */
.upload-rows {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.upload-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.upload-row-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.upload-name {
  flex: 1;
  min-width: 0;
  background-color: var(--paper);
  --line: var(--border);
  --j: 3px;
  padding: 0.3rem 0.5rem;
  font: inherit;
  color: var(--ink);
}
.upload-name:disabled {
  background-color: none;
  --line: transparent;
  color: var(--ink);
  opacity: 0.9;
}
.upload-size {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.upload-bar {
  height: 10px;
  background: var(--surface-2);
  --line: var(--border-strong);
  --j: 2.5px;
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  background: var(--teal);
  transition: width 0.15s ease;
}
.upload-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.upload-describe {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.upload-describe-icon {
  flex-shrink: 0;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 1.1rem;
}
.upload-describe-text {
  flex: 1;
  min-width: 0;
  resize: vertical;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  color: var(--ink);
}
.upload-done {
  color: var(--sea);
}
.upload-failed {
  color: var(--coral);
}
.upload-note {
  color: var(--muted);
  font-size: 0.8rem;
  flex: 1;
}
.upload-tags {
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.modal-ok {
  background: var(--teal-deep);
  color: var(--dock-text);
  border: 0;
  --j: 3px;
  clip-path: var(--jag-1);
  padding: 0.45rem 1.4rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.modal-ok:hover {
  background: var(--teal);
  color: var(--on-accent);
}
.upload-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(28rem, 100%);
  margin: auto;
  padding: 2rem;
  color: var(--muted);
  text-align: center;
}
.upload-pending .upload-bar {
  width: 100%;
}
.upload-pending-title {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.upload-inline {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(32rem, 100%);
  margin: 1rem auto 0;
}
.upload-inline-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.file-dropper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: min(32rem, 100%);
  min-height: 18rem;
  margin: auto;
  padding: 2rem;
  box-sizing: border-box;
  border: 5px dotted var(--border-strong);
  color: var(--muted);
  text-align: center;
}
.file-dropper.over {
  border-color: var(--teal);
  background: var(--field);
  color: var(--sea);
}
.file-dropper-icon {
  font-size: 3rem;
  line-height: 1;
}
.file-dropper-words {
  margin: 0;
  font-size: 1.1rem;
}
.file-dropper-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.file-dropper-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 1rem;
  padding: 0.5rem 1.1rem;
  color: var(--on-accent);
  background: var(--teal);
  border: none;
  --j: 3px;
  clip-path: var(--jag-1);
  cursor: pointer;
}
.file-dropper-upload:hover {
  background: var(--teal-deep);
  color: var(--dock-text);
}

/* toasts.css */
.toasts {
  position: fixed;
  right: 1rem;
  bottom: calc(3rem + var(--safe-bottom) + 0.75rem);
  width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: var(--layer-toast);
  pointer-events: none;
}
@media (max-width: 900px) {
  .toasts {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: calc(3rem + var(--safe-bottom) + 2.5rem);
  }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  background: var(--teal-deep);
  color: var(--dock-text);
  --line: var(--teal-deep);
  --j: 0.3em;
  font-size: 0.85rem;
  line-height: 1.35;
  animation: toast-in 160ms ease-out;
}
.toast-error {
  background: var(--coral);
  color: var(--on-danger);
  --line: var(--coral);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}
.toast-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.toast-count {
  font-size: 0.75rem;
  opacity: 0.8;
}
.toast-action {
  color: inherit;
  font-weight: bold;
  white-space: nowrap;
}
.toast-close {
  display: inline-flex;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.1rem;
  opacity: 0.7;
}
.toast-close:hover {
  opacity: 1;
}

/* crt.css */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}
body::before {
  background:
    radial-gradient(
      ellipse at 28% 18%,
      var(--crt-glare),
      transparent 45%),
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      var(--crt-scanline) 2px 3px);
  animation: crt-flicker 7s infinite steps(1, end);
}
body::after {
  border-radius: 2.2rem / 1.8rem;
  background:
    radial-gradient(
      ellipse at center,
      transparent 78%,
      var(--crt-vignette) 100%);
  box-shadow: inset 0 0 0.9rem var(--crt-edge), 0 0 0 3rem var(--crt-bezel);
}
@keyframes crt-flicker {
  0%, 100% {
    opacity: 1;
  }
  37% {
    opacity: 0.85;
  }
  38% {
    opacity: 1;
  }
  81% {
    opacity: 0.9;
  }
  82% {
    opacity: 1;
  }
}
:root:not([data-crt=off]) body {
  text-shadow: var(--crt-text-glow);
}
:root[data-crt=off] body::before,
:root[data-crt=off] body::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

/* index.css */
.postpage {
  max-width: var(--post-measure);
  margin: 0 auto;
  padding: 1rem;
}
.postpage:has(.book-reader) {
  max-width: none;
}
.book-reader-article {
  max-width: var(--post-measure);
}
.book-reader {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
.book-reader-tree {
  border-right: 1px solid var(--border);
  padding-right: 0.8rem;
  font-size: 0.9rem;
}
.book-reader-book {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.book-reader-epub {
  margin: 0 0 0.6rem;
}
.book-reader-list {
  list-style: none;
  margin: 0;
  padding-left: 0.9rem;
}
.book-reader-list-top {
  padding-left: 0;
}
.book-reader-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  margin: 0.35rem 0 0.1rem;
}
.book-reader-page {
  margin: 0.15rem 0;
}
.book-reader-page-current > a {
  font-weight: 600;
  color: var(--teal);
}
.book-reader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.book-reader-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  --j: 0.25em;
  clip-path: var(--jag-1);
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.book-reader-tag-on {
  border-style: solid;
  background: color-mix(in srgb, var(--surface-2) 84%, var(--ink) 16%);
  color: var(--ink);
}
.book-reader-tag-count {
  background: var(--ink-soft);
  color: var(--surface);
  --j: 0.25em;
  clip-path: var(--jag-1);
  padding: 0 0.4em;
  font-size: 0.85em;
}
.book-reader-none {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.book-reader-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.book-reader-step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.book-reader-where {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.book-reader-trail {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0.2rem 0;
}
.book-reader-title {
  margin: 0.2rem 0 0.6rem;
}
@media (max-width: 720px) {
  .book-reader {
    grid-template-columns: 1fr;
  }
  .book-reader-tree {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 0.6rem;
  }
}
.postpage-loading,
.postpage-missing {
  color: var(--muted);
  font-style: italic;
}
.minipost {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  --line: var(--border);
  position: relative;
  --j: 0.2rem;
  clip-path: var(--jag-1);
  text-decoration: none;
}
.minipost-title {
  font-weight: 600;
}
.minipost-words {
  font-style: italic;
}
.minipost-who {
  display: inline-flex;
  align-self: center;
}
.minipost-when {
  font-size: 0.8em;
  color: var(--muted);
}
.thread-seeking {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.thread-refresh {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
}
.thread-order {
  margin-left: 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.1rem 0.3rem;
}
.held-replies {
  border: 1px dashed var(--border-strong);
  --j: 4px;
  clip-path: var(--jag-1);
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 1rem;
}
.held-replies-head {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.held-reply {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.held-reply-hollow,
.thread-hollow {
  font-size: 0.85rem;
  color: var(--faint);
}
.held-reply-acts {
  display: flex;
  gap: 0.6rem;
}
.held-approve,
.held-suppress {
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
}
.feed-entry-replyto,
.postpage-parent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.replybox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.replybox-open {
  align-self: flex-start;
  padding: 0.4rem 1rem;
  color: var(--muted);
}
.replybox-note {
  font-size: 0.8rem;
  color: var(--muted);
}
.thread {
  margin-top: 1.25rem;
}
.thread-head {
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
.thread-empty,
.thread-deeper {
  color: var(--muted);
  font-style: italic;
}
.thread-reply {
  margin-top: 0.75rem;
}
.thread-reply .thread-level {
  margin-left: 1.25rem;
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
}
@media (max-width: 900px) {
  .book-reader-tags {
    gap: 0.45rem;
  }
  .book-reader-tag {
    align-items: center;
    font-size: 1rem;
    padding: 0.4rem 0.75rem;
  }
}