/* BRAT Studio. Follows the BRAT app standard (01_KITS/APP_STANDARD/BRAT_APP_STANDARD.md), which is drawn from CRIB.
   Black on white with BRAT light grey for buttons, or white on black. One grey, one hairline.
   Four type sizes, two weights. No radius, no shadow. */

@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-weight: 400; font-display: swap; src: local("NHaasGroteskDSPro-55Rg"), url(/fonts/ds-400.woff2) format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Display Pro"; font-weight: 700; font-display: swap; src: local("NHaasGroteskDSPro-75Bd"), url(/fonts/ds-700.woff2) format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Text Pro"; font-weight: 400; font-display: swap; src: local("NHaasGroteskTXPro-55Rg"), url(/fonts/tx-400.woff2) format("woff2"); }
@font-face { font-family: "Neue Haas Grotesk Text Pro"; font-weight: 700; font-display: swap; src: local("NHaasGroteskTXPro-75Bd"), url(/fonts/tx-700.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --ink: #000;
  --paper: #fff;
  --grey: #666;
  --line: #dcdcdc;
  --wash: #e8e8e8;
  --scrim: rgb(255 255 255 / 0.9);
  /* Display Pro at 18px and above, Text Pro below */
  --font: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-small: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: clamp(40px, 5.4vw, 84px);
  --title: 28px;
  --body: 18px;
  --label: 14px;
  --m: 32px;
  --bar: 72px;
  --gap: 12px;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --in: cubic-bezier(0.7, 0, 0.84, 0);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  color-scheme: dark;
  --ink: #fff;
  --paper: #000;
  --grey: #8f8f8f;
  --line: #2e2e2e;
  --wash: #1c1c1c;
  --scrim: rgb(0 0 0 / 0.88);
}
@media (max-width: 640px) { :root { --m: 16px; --bar: 108px; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; padding-top: var(--bar); background: var(--paper); color: var(--ink);
  font: 400 var(--body) / 1.4 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.panel-open { overflow: hidden; }
h1, h2, h3, p, ul, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
strong, b { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.muted { color: var(--grey); }
.label { font-size: var(--label); font-family: var(--font-small); }
.caps { text-transform: uppercase; }
.sub { font-size: var(--body); font-weight: 700; }

/* top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar); background: var(--paper);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 40px; padding: 0 var(--m);
}
.wordmark {
  flex: none; display: block; width: 96px; height: 40px; background: currentColor; border: 0; padding: 0;
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat;
}
.nav { display: flex; gap: 28px; }
.nav button {
  font-size: var(--label); font-family: var(--font-small); line-height: 1; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--grey);
}
.nav button:hover { color: var(--ink); }
.nav button[aria-current] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bar-actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.live { font-size: var(--label); font-family: var(--font-small); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.live::before { content: ""; width: 10px; height: 10px; background: var(--ink); animation: beat 900ms var(--out) infinite alternate; }
@keyframes beat { from { scale: 0.3; } to { scale: 1; } }
@media (max-width: 640px) {
  .bar { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 60px 46px; gap: 0 16px; }
  .wordmark { grid-area: 1 / 1; width: 86px; height: 36px; }
  .bar-actions { grid-area: 1 / 2; justify-self: end; gap: 16px; }
  .nav { grid-area: 2 / 1 / 3 / 3; gap: 18px; }
  .hide-phone { display: none; }
}

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--wash); background: var(--wash); color: var(--ink);
  font-size: var(--label); font-family: var(--font-small); font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; text-decoration: none;
  -webkit-appearance: none; appearance: none;
}
.btn.primary, .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* The BRAT button. Flat. Three things happen together when the pointer arrives:
   the ink rises from the bottom edge, the label rolls up as its twin rolls in, and a line draws under it.
   The ink is a white layer in difference blending, so whatever it covers turns to its opposite, in either theme. */
.ink { position: relative; isolation: isolate; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: scale 480ms var(--out); }
.ink::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; background: #fff; mix-blend-mode: difference; pointer-events: none;
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 480ms var(--out);
}
.ink .l { position: relative; display: inline-block; overflow: hidden; height: 1.4em; line-height: 1.4; }
.ink .l i { display: block; font-style: normal; text-shadow: 0 1.4em 0 currentColor; transition: translate 520ms var(--out); }
.ink .l::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(1.5px, 0.07em); background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform 460ms var(--out);
}
@media (hover: hover) {
  .ink:hover:not(:disabled)::after { transform: scaleY(1); transform-origin: 50% 100%; }
  .ink:hover:not(:disabled):not([aria-pressed="true"]) .l i { translate: 0 -1.4em; }
  .ink:hover:not(:disabled):not([aria-pressed="true"]) .l::after { transform: scaleX(1); transform-origin: 0 50%; transition-delay: 120ms; }
}
.ink.tapped:not(:disabled)::after { transform: scaleY(1); transform-origin: 50% 100%; }
.ink.tapped:not(:disabled):not([aria-pressed="true"]) .l i { translate: 0 -1.4em; }
.ink.tapped:not(:disabled):not([aria-pressed="true"]) .l::after { transform: scaleX(1); transform-origin: 0 50%; transition-delay: 120ms; }
.ink:active:not(:disabled) { scale: 0.97; transition: scale 90ms var(--in); }
.ink.landed { animation: land 520ms var(--out); }
@keyframes land { from { scale: 0.95; } }
.ink[aria-pressed="true"]::after, .ink:disabled::after, .slot.full::after { display: none; }
.btn:disabled { color: var(--grey); cursor: default; }
.tbtn {
  min-height: 44px; padding: 0; border: 0; background: none; font-size: var(--label); font-family: var(--font-small); color: var(--ink);
  display: inline-flex; align-items: center; text-decoration: none;
}
/* text buttons: a thin line at rest, a heavier one draws over it and leaves to the right */
.tbtn > span, .tbtn:not(:has(> span)) {
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.75em) / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) 100% calc(50% + 0.75em + 1px) / 0 2px no-repeat;
  transition: background-size 460ms var(--out);
}
.tbtn > span { padding: 6px 0; }
.tbtn:hover:not(:disabled) > span, .tbtn:hover:not(:disabled):not(:has(> span)) { background-size: 100% 1px, 100% 2px; background-position: 0 calc(50% + 0.75em), 0 calc(50% + 0.75em + 1px); }
.tbtn.quiet { color: var(--grey); }
.fbtn {
  min-height: 44px; padding: 0 2px; border: 0; background: none; font-size: var(--label); font-family: var(--font-small);
  display: inline-flex; align-items: center; color: var(--grey); white-space: nowrap;
}
.fbtn:hover { color: var(--ink); }
.fbtn.on { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.field {
  display: block; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; outline: none; -webkit-appearance: none; appearance: none;
}
.field:hover { border-bottom-color: var(--grey); }
.field:focus, .field:focus-visible { border-bottom-color: var(--ink); outline: none; }
.field::placeholder { color: var(--grey); opacity: 1; }
.field.area { resize: none; line-height: 1.3; }

/* page */
.page { padding: 36px var(--m) 176px; }
.name {
  display: block; font-size: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.92;
  letter-spacing: -0.03em; padding: 0 0 0.05em; margin-bottom: 28px;
}

/* composer */
.composer { margin-bottom: 56px; }
.prompt-in { font-size: var(--title); letter-spacing: -0.02em; line-height: 1.2; min-height: 3.6em; padding-top: 0; }
input.prompt-in { min-height: 56px; font-weight: 700; }
.controls { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 28px; align-items: flex-start; }
.group { min-width: 0; }
.group.wide { flex: 1 1 100%; }
.group > .label { display: block; margin-bottom: 8px; color: var(--grey); }
.group > .label b { color: var(--ink); margin-left: 6px; }
/* options in a set are the same width, so the set reads as one control */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg .btn { padding: 0 16px; }
@media (max-width: 760px) { .seg { display: flex; flex-wrap: wrap; } }
.select { padding-right: 28px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 2px center; background-size: 12px 8px; min-width: 240px; cursor: pointer; }
.select option { background: var(--paper); color: var(--ink); }
.disc > span::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; border: 5px solid transparent; border-left-color: currentColor; border-right-width: 0; transition: rotate 300ms var(--out); }
.disc[aria-expanded="true"] > span::before { rotate: 90deg; }
.ratio { display: inline-block; border: 2px solid currentColor; }
.hint { margin-top: 8px; max-width: 520px; }

.slide input[type="range"] { -webkit-appearance: none; appearance: none; width: 260px; max-width: 70vw; height: 44px; background: transparent; margin: 0; }
.slide input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.slide input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
.slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 28px; background: var(--ink); margin-top: -14px; border: 0; }
.slide input[type="range"]::-moz-range-thumb { width: 12px; height: 28px; background: var(--ink); border: 0; }
.num { width: 160px; }

/* characters to pick */
.faces { display: flex; gap: var(--gap); overflow-x: auto; padding: 6px 6px 8px; margin: -6px; }
.face { flex: 0 0 auto; width: 96px; background: none; border: 0; padding: 0; text-align: left; }
.face img, .face i { display: grid; place-items: center; width: 96px; height: 120px; object-fit: cover; background: var(--wash); font-style: normal; font-size: var(--title); }
.face span { display: block; padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face[aria-pressed="true"] img, .face[aria-pressed="true"] i { outline: 3px solid var(--ink); outline-offset: 3px; }
.face[aria-pressed="true"] span { font-weight: 700; }
.face { transition: scale 480ms var(--out); -webkit-tap-highlight-color: transparent; }
.face:active { scale: 0.96; transition: scale 90ms var(--in); }
.face:hover i { background: var(--ink); color: var(--paper); }

/* image slots */
.slot {
  position: relative; display: grid; place-items: center; width: 168px; height: 120px; background: var(--wash); cursor: pointer;
  text-align: center; padding: 10px; font-weight: 700; overflow: hidden;
}
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.target { z-index: 86; outline: 3px solid var(--ink); outline-offset: 3px; }
.slot.full span { position: absolute; left: 0; bottom: 0; background: var(--paper); color: var(--ink); padding: 6px 10px; opacity: 0; }
.slot.full:hover span, .slot.full:focus-within span { opacity: 1; }
.slot.big { width: 100%; max-width: 760px; height: 132px; font-size: var(--body); font-weight: 400; }
.shots { display: grid; gap: 4px; margin-bottom: 12px; max-width: 900px; }
.shot { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px auto auto; gap: 0 14px; align-items: center; }
.shot .secs { text-align: right; }
.slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.refs { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.refs .thumb { width: 120px; height: 120px; }
.wide-in { width: min(520px, 80vw); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumb { position: relative; width: 84px; height: 84px; padding: 0; border: 0; background: var(--wash); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; inset: auto 0 0 0; background: var(--paper); color: var(--ink); padding: 3px 0; opacity: 0; }
.thumb:hover span, .thumb:focus-visible span { opacity: 1; }
.more { margin-top: 12px; }
.more .controls { margin-top: 12px; }

/* the primary action, scaled up: one per screen */
.go {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; min-height: 88px; margin-top: 32px;
  padding: 0 28px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); text-align: left;
  transition: padding 480ms var(--out);
}
/* the action stays on screen while you compose, however long the settings run */
.composer .go { position: sticky; bottom: var(--stick, 0px); z-index: 15; }
.go b { font-size: var(--title); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.go span { white-space: nowrap; }
.go:hover:not(:disabled) { padding-left: 44px; }
.go.ink { transition: scale 480ms var(--out), padding 480ms var(--out); }
.go.ink:active:not(:disabled) { scale: 0.985; }
.go:disabled { background: var(--wash); border-color: var(--wash); color: var(--grey); cursor: default; }
.error { margin-top: 16px; font-weight: 700; }

/* toolbar over the feed */
.toolbar {
  position: sticky; top: var(--bar); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 40px; min-height: 56px; margin: 0 calc(var(--m) * -1) 32px; padding: 4px var(--m); background: var(--paper);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 40px; }

/* feed */
.job { margin-bottom: 56px; }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: 44px; }
.job-head .acts { display: inline-flex; gap: 20px; margin-left: auto; }
.wait { font-weight: 700; }
.prompt { max-width: 760px; margin: 2px 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* three sizes and two layouts, chosen in the toolbar and remembered */
.results { --col: 280px; --one: 520px; --film: 640px; --tall: calc(100vh - var(--bar) - 220px); }
.results.size-s { --col: 170px; --one: 300px; --film: 380px; }
.results.size-l { --col: 440px; --one: 800px; --film: 1100px; }
.grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr)); }
.grid.n1 { grid-template-columns: minmax(0, var(--one)); }
.grid.film { grid-template-columns: minmax(0, var(--film)); }
.grid.sheet { margin-bottom: 40px; }
/* a single picture or a video never grows taller than the window: it shrinks to fit and the tile hugs it */
.grid.n1 .tile, .grid.film .tile { width: fit-content; max-width: 100%; }
.grid.n1 .tile img, .grid.n1 .tile video, .grid.film .tile video, .grid.film .tile img { width: auto; max-width: 100%; max-height: var(--tall); }
.grid.n1 .pending, .grid.film .pending { max-height: var(--tall); }
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results.size-s .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results.size-l .grid { grid-template-columns: minmax(0, 1fr); }
  .grid.n1, .grid.film { grid-template-columns: minmax(0, 1fr); }
}
.tile { position: relative; background: var(--wash); }
/* a new result arrives behind an ink shutter that lifts, one tile after the next */
.tile.enter::after {
  content: ""; position: absolute; inset: 0 0 44px 0; z-index: 2; background: var(--ink); pointer-events: none;
  transform-origin: 50% 0; animation: lift 760ms var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
@keyframes lift { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.tile-link { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
/* its number drops in from the top edge when the pointer arrives */
.tile-link::after {
  content: attr(data-n); position: absolute; left: 0; top: 0; padding: 9px 12px; background: var(--ink); color: var(--paper);
  font: 700 var(--label) / 1 var(--font-small); font-variant-numeric: tabular-nums; translate: 0 -101%; transition: translate 380ms var(--out);
}
.tile-link:hover::after, .tile-link:focus-visible::after { translate: 0 0; }
.tile img, .tile video { display: block; width: 100%; height: auto; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; background: var(--paper); }
.gone { display: grid; place-items: center; text-align: center; padding: 16px; }
.tile.low img { image-rendering: auto; }
.older { margin: 0 0 56px; }
.lowline { flex: 1 1 100%; margin-bottom: 4px; }
/* waiting: a line scans each frame in turn, the first frame counts the seconds, the bottom edge fills toward the usual time */
.pending { position: relative; background: var(--wash); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 16px 20px; }
.pending .count { font-size: var(--display); font-weight: 700; line-height: 0.86; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pending .label { font-weight: 700; }
.pending::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); animation: scan 2600ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; animation-delay: calc(var(--i, 0) * -520ms); }
@keyframes scan { from { top: 0; } to { top: calc(100% - 1px); } }
.pending::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 30%; background: var(--ink); animation: sweep 1600ms var(--out) infinite; }
.pending.timed::after { width: var(--p, 0%); animation: none; transition: width 1000ms linear; }
@keyframes sweep { from { translate: -100% 0; } to { translate: 340% 0; } }
.empty { max-width: 560px; padding: 24px 0; color: var(--grey); }
.day { margin: 0 0 20px; }

/* panel: one result, full screen */
.panel { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--paper); translate: 100% 0; transition: translate 480ms var(--out); }
.panel.open { translate: 0 0; }
.panel.closing { transition: translate 300ms var(--in); }
.panel-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 var(--m); border-bottom: 1px solid var(--line); }
.panel-nav { display: flex; align-items: center; gap: 12px; }
.panel-nav .label { margin-right: 8px; font-variant-numeric: tabular-nums; }
.panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); }
.panel-image { min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--wash); }
.panel-image img, .panel-image video { display: block; max-width: 100%; max-height: calc(100vh - 72px - 64px); object-fit: contain; }
.panel-details { min-height: 0; overflow: auto; padding: 24px var(--m) 56px; }
.panel-title { font-size: var(--title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.panel-details .block { margin-top: 24px; }
.panel-details .block > .label { display: block; color: var(--grey); margin-bottom: 6px; }
.fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--label); font-family: var(--font-small); }
.fact dt { color: var(--grey); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 28px; }
@media (max-width: 760px) {
  .panel-body { display: block; overflow: auto; }
  .panel-image { display: block; padding: 16px; }
  .panel-image img, .panel-image video { width: 100%; max-height: none; }
  .panel-bar { height: 60px; }
}

/* characters page */
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px var(--gap); }
.cast img, .cast .blank { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--wash); }
.cast figcaption { padding-top: 12px; display: grid; gap: 2px; justify-items: start; }
.row-name { font-size: var(--title); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; }

/* find: one field over everything */
body.pal-open { overflow: hidden; }
.pal { position: fixed; inset: 0; z-index: 80; background: transparent; transition: background 260ms var(--out); }
.pal.open { background: var(--scrim); }
.pal-box { background: var(--paper); border-bottom: 1px solid var(--ink); padding: 20px var(--m) 16px; max-height: 100vh; display: flex; flex-direction: column; translate: 0 -100%; transition: translate 260ms var(--in); }
.pal.open .pal-box { translate: 0 0; transition: translate 420ms var(--out); }
.pal-in { width: 100%; border: 0; outline: none; background: transparent; padding: 0; font-size: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; caret-color: var(--ink); }
.pal-in::placeholder { color: var(--line); opacity: 1; }
.pal-list { min-height: 0; list-style: none; margin: 16px calc(var(--m) * -1) 0; padding: 0; overflow: auto; border-top: 1px solid var(--line); }
.pal-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 0 16px; min-height: 52px; padding: 0 var(--m); border-bottom: 1px solid var(--line); cursor: pointer; }
.pal.open .pal-row { animation: palrow 420ms var(--out) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes palrow { from { opacity: 0; translate: 0 10px; } }
.pal-kind, .pal-hint { color: var(--grey); }
.pal-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-row.on { background: var(--ink); color: var(--paper); }
.pal-row.on .pal-kind, .pal-row.on .pal-hint { color: inherit; }
.pal-none { padding: 16px var(--m); }
.pal-foot { margin-top: 12px; }
.key { margin-left: 8px; font-weight: 400; text-decoration: none; display: inline-block; }
.spend b { color: var(--ink); }
@media (max-width: 640px) { .pal-row { grid-template-columns: minmax(0, 1fr) auto; } .pal-kind { display: none; } .pal-foot { display: none; } }

/* toast and drop */
#toast {
  position: fixed; left: var(--m); bottom: var(--m); z-index: 90; max-width: min(520px, calc(100vw - var(--m) * 2)); margin: 0;
  padding: 14px 18px; background: var(--ink); color: var(--paper); font-size: var(--label); font-family: var(--font-small); line-height: 1.3;
  visibility: hidden; opacity: 0; translate: 0 8px; transition: opacity 200ms var(--in), translate 200ms var(--in), visibility 0s 200ms;
}
#toast .tbtn { color: inherit; min-height: 0; margin-left: 18px; font-weight: 700; }
#toast.show { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 320ms var(--out), translate 320ms var(--out); }
#drop { position: fixed; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; background: var(--scrim); border: 2px solid var(--ink); margin: 12px; pointer-events: none; }
#drop.show { display: flex; }
#drop p { font-size: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.03em; margin: 0; }

/* landing: always black, whatever the theme */
body.locked { padding-top: 0; background: #000; }
.landing { --ink: #000; --paper: #fff; --grey: #555; --line: #c6c6c6; --wash: #e8e8e8; position: fixed; inset: 0; overflow: hidden; background: #000; color: #fff; color-scheme: light; }
.landing-logo {
  position: absolute; left: var(--m); bottom: calc(var(--m) + 36px); width: min(62vw, 1180px); aspect-ratio: 290.1 / 83.1; background: #fff;
  -webkit-mask: var(--logo) left bottom / contain no-repeat; mask: var(--logo) left bottom / contain no-repeat;
}
.landing-note { position: absolute; left: var(--m); margin: 0; }
.landing-note.top { top: var(--m); }
.landing-note.bottom { bottom: var(--m); }
.door { position: absolute; right: var(--m); top: 50%; translate: 0 -50%; width: min(380px, calc(100vw - var(--m) * 2)); background: #fff; color: #000; }
.door-form { display: flex; flex-direction: column; padding: 32px; }
.door-title { font-size: var(--title); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.door-row { margin-top: 20px; }
.door-row .label { display: block; color: var(--grey); }
.door-error { min-height: 20px; margin-top: 16px; font-weight: 700; }
.door-go { width: 100%; margin-top: 8px; min-height: 52px; }
@media (max-width: 760px) {
  .landing-logo { top: calc(var(--m) + 44px); bottom: auto; width: 72vw; -webkit-mask-position: left top; mask-position: left top; }
  .door { left: var(--m); right: var(--m); top: auto; bottom: calc(var(--m) + 36px); translate: none; width: auto; }
  .door-form { padding: 24px; }
  .go { min-height: 72px; padding: 0 20px; }
  .go span { display: none; }
}

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

/* Increase Contrast: hairlines and greys go to full ink */
@media (prefers-contrast: more) { :root, :root[data-theme="dark"] { --grey: var(--ink); --line: var(--ink); } }
@media (max-width: 1500px) { .toolbar > .hide-phone { display: none; } }