/*
  Simu on the web, in the app's own terms.

  Every colour below is a value from Theme.swift in the app, so a page and the
  screen it was opened from agree: paper, a little warm, in light; the darkroom
  in dark; orange only for the one thing to press and the current choice.
  Film strips and the share card do not change with the appearance, because in
  the app they do not either: film is dark, and a card is paper.

  The appearance follows the system unless the reader picks Light or Dark in the
  footer, which sets data-theme on <html> (simu.js, and a line in each <head>
  so the page never flashes the wrong one first).

  No web fonts: they would be the only request to another server, and the
  privacy policy says opening a page reaches Cloudflare and nothing else.
*/

:root {
  color-scheme: light;
  --bg: #f4f2ee;                       /* Theme.background */
  --surface: #ffffff;                  /* Theme.surface */
  --control: rgba(0, 0, 0, .055);      /* Theme.control */
  --hairline: rgba(0, 0, 0, .14);      /* Theme.hairline */
  --ink: #000000;                      /* label */
  --dim: rgba(60, 60, 67, .62);        /* secondaryLabel */
  --faint: rgba(60, 60, 67, .32);      /* tertiaryLabel */
  --accent: #ff9500;                   /* Theme.accent, systemOrange */
  --on-accent: #1d1305;
  --accent-text: #b35200;              /* AccentColor */
  --warning: #c78500;
  --success: #008f7a;
  --film: #130f0d;                     /* Theme.filmBase */
  --film-hole: var(--bg);
  --glow: rgba(255, 159, 10, .10);
  --bar: rgba(244, 242, 238, .78);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);

  --paper: #fbfaf7;                    /* Theme.cardPaper */
  --paper-ink: #1c1c1c;
  --paper-muted: #6b6b6b;
  --paper-rule: rgba(0, 0, 0, .12);

  --card-radius: 16px;
  --control-radius: 12px;
  --gutter: 16px;
  --label-line: 1.3rem;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, "Noto Serif", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* The darkroom. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #121212;
    --control: rgba(255, 255, 255, .08);
    --hairline: rgba(255, 255, 255, .16);
    --ink: #ffffff;
    --dim: rgba(235, 235, 245, .62);
    --faint: rgba(235, 235, 245, .3);
    --accent: #ff9f0a;
    --on-accent: #1d1305;
    --accent-text: #ff9f0a;
    --warning: #ffd60a;
    --success: #63e6e2;
    --film: #231d18;
    --glow: rgba(255, 159, 10, .14);
    --bar: rgba(0, 0, 0, .72);
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #121212;
  --control: rgba(255, 255, 255, .08);
  --hairline: rgba(255, 255, 255, .16);
  --ink: #ffffff;
  --dim: rgba(235, 235, 245, .62);
  --faint: rgba(235, 235, 245, .3);
  --accent: #ff9f0a;
  --on-accent: #1d1305;
  --accent-text: #ff9f0a;
  --warning: #ffd60a;
  --success: #63e6e2;
  --film: #231d18;
  --glow: rgba(255, 159, 10, .14);
  --bar: rgba(0, 0, 0, .72);
  --shadow: none;
}

/* Increase Contrast, where the app has firmer values for the faint fills. */
@media (prefers-contrast: more) {
  :root {
    --control: rgba(0, 0, 0, .11);
    --hairline: rgba(0, 0, 0, .4);
    --dim: rgba(60, 60, 67, .85);
    --accent-text: #8c3d00;
    --warning: #996100;
    --success: #006b5c;
  }
  :root[data-theme="dark"] {
    --surface: #212121;
    --control: rgba(255, 255, 255, .17);
    --hairline: rgba(255, 255, 255, .45);
    --dim: rgba(235, 235, 245, .85);
    --accent-text: #ffb340;
    --film: #302a24;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #212121;
    --control: rgba(255, 255, 255, .17);
    --hairline: rgba(255, 255, 255, .45);
    --dim: rgba(235, 235, 245, .85);
    --accent-text: #ffb340;
    --film: #302a24;
  }
}

/* CJK text in each language's own system face. */
:lang(zh-Hant) { --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
                 --serif: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif; }
:lang(zh-Hans) { --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
                 --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; }
:lang(ja)      { --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
                 --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
:lang(zh-Hant), :lang(zh-Hans), :lang(ja) { line-break: strict; }
@media (max-width: 480px) { body { font-size: 16px; } }

a { color: var(--accent-text); text-decoration-thickness: .06em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .1em; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
code, kbd, pre, .mono { font-family: var(--mono); }
/* Inline code may break, or a long address widens a phone's page. */
code { font-size: .86em; background: var(--control); padding: .12em .4em; border-radius: 6px; overflow-wrap: anywhere; }
pre code { white-space: pre; }
strong { font-weight: 650; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 20; background: var(--surface); padding: .5rem .9rem; border-radius: 999px; }
.skip:focus { left: var(--gutter); }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }

/* ---------- The mark: seven film simulations, the slot you are on widest ---------- */

.mark {
  display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 22.5%;
  background: linear-gradient(90deg,
    #b83c2c 0 12.9%, #b4aea2 0 25.8%, #d98c58 0 38.7%, #efeae0 0 61.3%,
    #c59a23 0 74.2%, #5f7266 0 87.1%, #41626b 0);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}

/* ---------- Bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--hairline);
}
.bar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none;
         font-weight: 650; font-size: 1.05rem; letter-spacing: -.01em; }
.bar nav { margin-left: auto; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { color: var(--dim); text-decoration: none; font-size: .9rem; white-space: nowrap;
             padding: .35rem .75rem; border-radius: 999px; }
.bar nav a:hover { color: var(--ink); background: var(--control); }
.bar nav a[aria-current="page"] { color: var(--accent-text); background: var(--control); font-weight: 600; }
@media (max-width: 560px) {
  .bar .wrap { flex-wrap: wrap; gap: 0; padding-top: .35rem; }
  .bar nav { margin: 0 calc(-1 * var(--gutter)); padding: .2rem var(--gutter) .45rem; width: calc(100% + 2 * var(--gutter)); }
  .bar nav { gap: 0; }
  .bar nav a { padding: .3rem .55rem; font-size: .86rem; }
  .bar nav a:first-child { margin-left: -.55rem; }
}

/* ---------- Hero, as the App Store pages are set ---------- */

.hero { position: relative; padding: 4.5rem 0 3rem; text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 30%, var(--glow), transparent 70%);
}
.hero .mark { width: 4.25rem; height: 4.25rem; margin-bottom: 1.4rem; box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 .5px rgba(0,0,0,.12); }
.display {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; line-height: 1.12;
  font-size: clamp(2.2rem, 6.4vw, 3.75rem); margin: 0 0 .9rem; text-wrap: balance;
}
:lang(zh-Hant) .display, :lang(zh-Hans) .display, :lang(ja) .display { letter-spacing: .02em; }
.lede { color: var(--dim); font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin: 0 auto 2rem; max-width: 34rem; text-wrap: balance; }
.hero .actions { justify-content: center; }

.page-head { padding: 3rem 0 1.6rem; }
.page-head .display { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: .4rem; }
.page-head .lede { margin: 0; max-width: none; text-align: left; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
           font: 600 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- Buttons: the app's prominent capsule and its quieter neighbour ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
  background: var(--control); color: var(--accent-text);
  transition: transform .12s ease-out, opacity .12s ease-out, background-color .12s ease-out;
}
.button:hover { text-decoration: none; }
.button:active { transform: scale(.98); opacity: .75; }
.button.prominent { background: var(--accent); color: var(--on-accent); }
.button.wide { width: 100%; }
.button svg { width: 1.1em; height: 1.1em; flex: none; }
.button.small { min-height: 2.1rem; padding: .35rem .9rem; font-size: .88rem; }

/* ---------- Grouped content, as Settings lays it out ---------- */

.group-label { margin: 2.2rem .25rem .5rem; color: var(--dim); font-size: .82rem; font-weight: 500; line-height: var(--label-line);
               text-transform: uppercase; letter-spacing: .04em; }
:lang(zh-Hant) .group-label, :lang(zh-Hans) .group-label, :lang(ja) .group-label { text-transform: none; letter-spacing: 0; font-size: .88rem; }
.card { background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--shadow); }
.list { list-style: none; margin: 0; padding: 0; }
.list li + li { border-top: .5px solid var(--hairline); margin-left: 1rem; }
.list li + li > a { margin-left: -1rem; padding-left: 1rem; }
.list a { display: flex; align-items: center; gap: .75rem; padding: .78rem 1rem; color: var(--ink); text-decoration: none; }
.list a:hover { background: var(--control); }
.list li:first-child a { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.list li:last-child a { border-radius: 0 0 var(--card-radius) var(--card-radius); }
.list a::after { content: ""; margin-left: auto; width: .45rem; height: .45rem; flex: none;
                 border: solid var(--faint); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.list .icon { width: 1.75rem; height: 1.75rem; border-radius: 7px; display: grid; place-items: center; flex: none;
              background: var(--accent); color: #fff; }
.list .icon svg { width: 1.05rem; height: 1.05rem; }

/* ---------- Reading pages ---------- */

.layout { display: grid; gap: 0 3rem; padding-bottom: 2rem; max-width: 66rem; }
@media (min-width: 960px) {
  .layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .layout > aside { position: sticky; top: 4.5rem; }
  /* The contents and the first group start on one line: both labels at the
     top, and where the page has no label of its own (the format), its first
     card drops by a label's height to meet the contents card. */
  .layout > aside .group-label:first-child,
  .layout > .prose > .group-label:first-child { margin-top: 0; }
  .layout > .prose > .card:first-child { margin-top: calc(var(--label-line) + .5rem); }
}
/* Grid items default to their content's width; a wide table or code block
   would otherwise widen the page instead of scrolling inside its card. */
.layout > * { min-width: 0; }
.prose { max-width: 42rem; }
.section { padding: 1.35rem 1.4rem 1.2rem; margin: 0 0 1rem; }
.section > :first-child { margin-top: 0; }
.section > :last-child { margin-bottom: 0; }
.section h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .7rem; }
.section h3 { font-size: 1.02rem; margin: 1.6rem 0 .35rem; }
.section p, .section li { margin: .55rem 0; }
.section ul, .section ol { padding-left: 1.25rem; }
.section li::marker { color: var(--dim); }
.note { color: var(--dim); font-size: .92em; }
@media (max-width: 480px) { .section { padding: 1.1rem 1.1rem 1rem; } }

/* The camera's menu, as chips. */
.menu-path { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .7rem 0; padding: 0; list-style: none; }
.menu-path li { margin: 0 !important; display: flex; align-items: center; gap: .4rem; }
.menu-path li + li::before { content: "→"; color: var(--faint); }
.menu-path code { display: inline-block; padding: .35rem .6rem; border-radius: 8px; font-size: .8rem; white-space: normal; }

pre { background: var(--control); border-radius: var(--control-radius); padding: .9rem 1rem; overflow-x: auto;
      font-size: .84rem; line-height: 1.55; margin: .9rem 0; }
pre code { background: none; padding: 0; font-size: inherit; }
.table { overflow-x: auto; margin: .8rem -1.4rem; padding: 0 1.4rem; }
.table table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.table th, .table td { border-bottom: .5px solid var(--hairline); padding: .5rem .8rem .5rem 0; text-align: left; white-space: nowrap; vertical-align: top; }
.table th { color: var(--dim); font-weight: 600; font-size: .8rem; }
.table tr:last-child td { border-bottom: 0; }
.table td:last-child { white-space: normal; min-width: 14rem; }
@media (max-width: 480px) { .table { margin: .8rem -1.1rem; padding: 0 1.1rem; } }

/* ---------- Segmented controls: language, appearance ---------- */

.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: var(--control); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented button, .segmented a {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 500 .85rem/1 var(--sans); padding: .5rem .8rem; border-radius: 8px;
}
.segmented [aria-current="true"], .segmented [aria-pressed="true"] {
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600;
}
:root[data-theme="dark"] .segmented [aria-current="true"], :root[data-theme="dark"] .segmented [aria-pressed="true"] { background: #636366; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented [aria-current="true"],
  :root:not([data-theme="light"]) .segmented [aria-pressed="true"] { background: #636366; }
}
.segmented svg { width: 1rem; height: 1rem; }
.langbar { margin: 0 0 1.4rem; }

/* ---------- Film: the strip, its sprocket holes, and the C numbers on its edge ---------- */

.strip {
  --hole-w: 14px; --hole-h: 9px; --pitch: 26px;
  position: relative; background: var(--film); padding: 18px 10px; border-radius: 6px;
  margin: 0 auto; max-width: 46rem;
}
.strip::before, .strip::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: var(--hole-h);
  background-image: linear-gradient(var(--film-hole), var(--film-hole));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Crect x='6' width='14' height='9' rx='2.5'/%3E%3C/svg%3E") 0 0 / var(--pitch) var(--hole-h) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Crect x='6' width='14' height='9' rx='2.5'/%3E%3C/svg%3E") 0 0 / var(--pitch) var(--hole-h) repeat-x;
}
.strip::before { top: 5px; }
.strip::after { bottom: 5px; }
.frames { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.frame { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #2a2622; }
.frame .slot { position: absolute; top: 5px; left: 5px; }
.frame .film { position: absolute; left: 6px; right: 6px; bottom: 5px; font: 600 .56rem/1.15 var(--mono);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               color: rgba(255,255,255,.86); text-shadow: 0 1px 2px rgba(0,0,0,.45); letter-spacing: .02em; }
.frame.light .film { color: rgba(0,0,0,.62); text-shadow: none; }
@media (max-width: 560px) {
  .frames { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .strip { padding: 16px 6px; --pitch: 20px; }
  .frame .film { display: none; }
  .frame .slot { top: 3px; left: 3px; font-size: .6rem; padding: 2px 3px; }
}

.slot { display: inline-block; font: 800 .72rem/1 var(--mono); color: var(--accent); background: var(--film);
        padding: 3px 5px; border-radius: 3px; letter-spacing: .02em; }
.slot.bare { background: none; padding: 0; color: var(--accent-text); }

/* ---------- The share card: paper in every appearance ---------- */

.paper {
  background: var(--paper); color: var(--paper-ink); border-radius: 10px; padding: 1.35rem;
  box-shadow: 0 0 0 .5px var(--paper-rule), 0 18px 48px rgba(0,0,0,.16);
  color-scheme: light;
}
.paper h1 { font: 700 1.6rem/1.2 var(--sans); letter-spacing: -.01em; margin: 0 0 .2rem; overflow-wrap: anywhere; }
.paper .kind { color: var(--paper-muted); font-size: .85rem; margin: 0 0 1.1rem; }
.paper .rule { height: .5px; background: var(--paper-rule); margin: 1.1rem 0; border: 0; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.1rem; margin: 0; }
.cells div { min-width: 0; }
.cells dt { font-size: .74rem; color: var(--paper-muted); line-height: 1.3; }
.cells dd { margin: .1rem 0 0; font: .92rem/1.35 var(--mono); overflow-wrap: anywhere; }
.cells dd.unread { color: var(--paper-muted); }
@media (max-width: 340px) { .cells { grid-template-columns: 1fr; } }
.paper .slot-head { display: flex; align-items: center; gap: .55rem; margin: 1.4rem 0 .6rem; font: 650 1.02rem/1.3 var(--sans); }
.paper .slot-head:first-child { margin-top: 0; }
.paper-foot { display: flex; align-items: flex-end; gap: 1rem; }
.paper-foot .who { display: flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .95rem; margin-bottom: .45rem; }
.paper-foot .mark { width: 1.25rem; height: 1.25rem; }
.paper-foot .code { font: .78rem/1.45 var(--mono); color: var(--paper-muted); overflow-wrap: anywhere; word-break: break-all; }
.paper-foot .button { margin-left: auto; background: rgba(0,0,0,.055); color: #b35200; }

.reader { display: grid; gap: 2rem; padding: 2.5rem 0 3rem; }
@media (min-width: 900px) {
  .reader { grid-template-columns: minmax(0, 27rem) minmax(0, 22rem); justify-content: center; gap: 4rem; align-items: start; padding-top: 3.5rem; }
  #entry.reader { grid-template-columns: minmax(0, 36rem); }
  .reader > .side { position: sticky; top: 5rem; }
}
.reader .paper { width: 100%; max-width: 27rem; margin: 0 auto; }
.side .display { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.side .lede { margin: 0 0 1.6rem; text-align: left; }

.field { width: 100%; min-height: 7.5rem; resize: vertical; display: block;
         font: 1rem/1.5 var(--mono); color: var(--ink); background: var(--surface);
         border: .5px solid var(--hairline); border-radius: var(--control-radius); padding: .85rem 1rem; }
.field::placeholder { color: var(--faint); }
.error { color: var(--warning); font-weight: 600; margin: .8rem 0; }
.private { display: flex; gap: .55rem; align-items: flex-start; color: var(--dim); font-size: .88rem; margin: 1.2rem 0 0; }
.private svg { width: 1rem; height: 1rem; flex: none; margin-top: .2rem; }

/* ---------- Footer ---------- */

.foot { border-top: .5px solid var(--hairline); margin-top: 3rem; padding: 2rem 0 3rem; color: var(--dim); font-size: .85rem; }
.foot .wrap { display: grid; gap: 1.4rem; }
.foot .controls { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.foot .control { display: flex; flex-direction: column; gap: .45rem; min-width: 0; max-width: 100%; }
.foot .control > span { font-size: .78rem; }
.foot .links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot .links a { color: var(--dim); }
.foot p { margin: 0; max-width: 44rem; }
@media (min-width: 900px) {
  .foot .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .foot .controls { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .bar, .foot .controls, .skip { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border: .5px solid #ccc; }
}

/* A kit's seven frames on the share card, as the app's film plate: four over three. */
.plate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 1.2rem; }
.plate-frame { position: relative; aspect-ratio: 1; border-radius: 4px; background: #130f0d; padding: 5px;
               display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.plate-frame.empty { background: none; border: 1px dashed var(--paper-rule); }
.plate-frame.empty .slot { background: none; color: var(--paper-muted); }
.plate-film { font: 600 .6rem/1.2 var(--mono); color: rgba(255,255,255,.82); overflow-wrap: anywhere; }
.paper .slot { background: #130f0d; }