/* The one hand-written stylesheet — session 38: the single vocabulary,
   mirroring the design of record (docs/design/UNIFICATION-ORDER.md, with
   the gallery of record docs/design/gallery-of-record-2026-09-30/ and the
   captures under docs/design/current/ as the appearance reference since
   session 106; the drops' own galleries — drop 1's, archived at
   docs/archive/design/FULL-GALLERY-all-pages.html, drop 2's and drop 3's
   under their folders' mocks/ — are records, each save the ORDER's ruled
   departures) and inventoried in docs/design/CSS-VOCABULARY.md. Tokens
   verbatim from the session-23 prototype; two system fonts (Georgia +
   ui-monospace), no imports, no web fonts, no third-party anything.
   Copy is never authored here — text-transform is presentation, the
   pack strings are the copy. Rule weights: the ink double rule is the
   brand (masthead only); grey hairlines are structure; purple — the
   session-98 palette, drop 1 (ORDER v1.4 §4d) — is action and live status,
   never brand. */

:root {
  --ink: #1a1a1a; --accent: #53225c;
  --tint: #ebd999; --tint-ink: #4a3d12; --tint-rule: #a08b4a;
  --error: #d60036; --error-bg: #fdf2f5;
  --info-bg: #f6f2f7; --info-ink: #664a6b;
  --paper: #fff; --panel: #fbfbf9;
  --muted: #6b6b63; --faint: #b4b2a9;
  --star: #bd8c00;
  --measure: 34rem;
  --rule: rgba(0, 0, 0, .18); --hair: rgba(0, 0, 0, .09);
  --was: #f7dde3; --now: #cfe4d7;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* THE MEASURE (session 103, drop 3; the director's ruling of 1 Oct 2026): the body is one column,
   --measure its widest — the sheet's one max-width beside an image's 100% — and the text, the
   boxes, a field, a help line and a full button fill it. One length in rem, no width keyed to the
   screen: a narrower screen draws the same page, a wider one draws it centred. The components with a
   size of their own keep it — the masthead image, the small inline button, a multiple-choice item's
   cell, the stars' and the page squares' boxes, the sparkline. A surface that needs another column
   overrides the TOKEN on its own body, never the rule — the cockpit does (the last section). */

/* Border-box everywhere — the masthead pair's 4px height counts its own
   borders (ORDER §1.6): never content-box. */
* { box-sizing: border-box; }

body {
  font-family: var(--serif);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  margin: 0 auto;
  padding: 0 1.1rem 1.5rem;
  max-width: var(--measure);
  -webkit-text-size-adjust: 100%;
}

/* Accessibility floor: focus is always visible. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile-first floor: nothing wider than the viewport. */
img { max-width: 100%; }
pre { white-space: pre-wrap; }

h1 { font-size: 1.3rem; line-height: 1.35; margin: 1rem 0 0.5rem; }

/* Section headings render as the small-caps label vocabulary. */
h2 {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.25rem;
}
section { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; }
section.first { border-top: 0; margin-top: 0.6rem; }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.55rem 0 0;
}
p.lede { font-size: 1.05rem; }
/* S45 (ORDER v1.3 §4c): a paper's display code never breaks mid-code. */
.code { white-space: nowrap; }
small { color: var(--muted); }
.m0 { margin: 0 0 0.1rem; }
a { color: var(--accent); }

/* Masthead (ORDER §1.6) — the wordmark image is the page identity; the
   ink double rule (2px over a 0.5px hairline, 1.5px of daylight) is the
   brand line, drawn full width by the pseudo-element. The header's
   bottom padding stays 0: the breathing room is the pseudo-element's
   margin-top. Sizing is width-first (header 225px, lockup 253px). The
   pseudo-element carries its own box-sizing (session 98, the review's
   row 21): the universal reset above matches elements, never pseudo-
   elements, so without it the 4px was content and the daylight 4px. */
header.brand { padding: 1.2rem 0 0; text-align: center; }
header.brand::after {
  content: "";
  display: block;
  height: 4px;
  box-sizing: border-box;
  margin-top: 1.1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}
header.brand img { width: min(225px, 100%); height: auto; }
.lockup { text-align: center; padding-top: 1.6rem; }
.lockup h1 { margin: 0; }
.lockup img { width: min(253px, 100%); height: auto; }
.lockup hr {
  border: 0;
  height: 4px;
  margin: 0.95rem 0 0;
  border-top: 2px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
}

/* Messages — the message-box law (the ORDER's §2.4): .flash the gold box
   (something needs fixing, or can't be undone), .info the purple card
   (where things stand), .err the red card (this way is closed), .decask
   the December ask; instructions, legends and tips are plain text. The
   landing's offer box is one of the law's named exceptions — gold, in .flash
   (session 102's review, row 40). */
.flash {
  background: var(--tint);
  color: var(--tint-ink);
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
}
.info {
  border-left: 3px solid var(--accent);
  background: var(--info-bg);
  color: var(--info-ink);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
}
.err, .errorlist {
  border-left: 3px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
}
/* Field errors: Django's list (the ritual page's ul, routed to the fix series — s100.4) or the
   vocabulary's span inside its field's paragraph (forms.FieldErrors, session 100; every consent
   form's since session 102) — one dress for both. */
.errorlist { display: block; list-style: none; margin: 0.2rem 0; }
.decask {
  border-left: 3px solid var(--accent);
  background: var(--info-bg);
  color: var(--info-ink);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
  border-radius: 0 8px 8px 0;
}

/* Buttons — the grammar (ORDER §2.1): one base, then the dress.
   .btn filled purple = the page's one main act · .btn-o outline = every
   other action and every way out · .btn-rf red fill = the deletion
   ceremony · .btn-r careful red outline = the ask-a-person act ·
   .btn-dis inert grey (aria-disabled, focusable; dress, never opacity)
   · .pbtn the paper ladder, the face from the view (open · progress ·
   done · far; session 98, ORDER v1.4 §5.14 — the two held faces one outline). */
.btn, .btn-o, .btn-rf, .btn-dis, .btn-r, .pbtn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  margin: 0.6rem 0 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn, .pbtn.open { background: var(--accent); color: #fff; }
.btn-o { background: transparent; color: var(--accent); }
.btn-rf { background: var(--error); border-color: var(--error); color: #fff; }
.btn-r { background: transparent; border-color: var(--error); color: var(--error); }
.btn-dis { background: var(--muted); border-color: var(--muted); color: #fff; cursor: default; }
.pbtn.done, .pbtn.progress { background: transparent; color: var(--accent); }
.pbtn.far { background: transparent; border-color: #d3d1c7; color: var(--faint); cursor: default; }
/* Small outline = inline row actions (Change, notify when available). */
.btn-os {
  display: inline-block;
  font: inherit;
  font-size: 0.8rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.2rem 0.65rem;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Forms. A field is the column's width, as a button is (the measure). */
form p { margin: 1rem 0; }
label { display: block; margin-bottom: 0.2rem; font-size: 0.85rem; }
input[type="email"], input[type="text"], input[type="password"],
input[type="file"], select {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  background: var(--panel);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  margin-right: 0.4rem;
}
p:has(> input[type="checkbox"]) label { display: inline; }
/* A tick (session 100, drop 2): box and label side by side, a wrapped label keeping its left edge —
   the label on a zero basis, so it takes the rest of its box's line and wraps inside it, never onto
   a line of its own (the review's row 2); the box on the label's first baseline, as it sits inline
   (the director's STOP 1 ruling Q-E); a field error on its own line beneath. */
p.tick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; margin: 0.5rem 0 1.3rem; font-size: 0.9rem; }
p.tick > input { flex: none; margin: 0; }
p.tick > label { flex: 1; }
p.tick > .errorlist { flex-basis: 100%; }
.formrule { border-top: 0.5px solid var(--rule); margin-top: 1.7rem; }
small.help {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--accent);
}
/* The signup is_adult inversion (ORDER §5.5): ticked = adult, the
   parent field hides; unticked — the default — keeps the protective
   minor path in view. Without :has() nothing hides. */
form:has(#id_is_adult:checked) p.parent { display: none; }
/* Counsel's summary on signup (session 100, drop 2 panel 18; ORDER §2.1's named exception): white on
   the accent — a text panel, never an act. */
p.privacy-summary { background: var(--accent); color: #fff; border-radius: 8px; padding: 0.85rem 1rem; margin: 1rem 0; }
/* The transcript field — mono is the student's own words. */
textarea {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  background: var(--panel);
}
/* The ritual's double entry (presentation only; the machinery is the
   session-5 form): blind entry renders as the dots field, the visible
   re-entry as the spaced mono check. */
#ritual-form input[type="password"] { font-family: var(--mono); letter-spacing: 0.3em; }
#ritual-form input[type="text"] { font-family: var(--mono); letter-spacing: 0.16em; }
/* The multiple-choice grid (session 100, drop 2 panels 15 and 17): unframed; each question's
   number and select on one line, 9rem each (two to a line from 360px, drop 2's Chromium measure);
   "No answer" muted until a letter is chosen. Every grid shows (the director's ruling: no per-page
   rule). */
fieldset.mcq { border: 0; padding: 0; margin: 1.1rem 0 0.4rem; min-width: 0; }
fieldset.mcq legend { padding: 0; margin: 0 0 0.45rem; font-size: 0.85rem; line-height: 1.5; }
fieldset.mcq p { display: inline-flex; align-items: center; gap: 0.4rem; width: 9rem; margin: 0 0.7rem 0.5rem 0; vertical-align: top; }
fieldset.mcq label { margin: 0; min-width: 1.4rem; text-align: right; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
fieldset.mcq select { flex: 1; min-width: 0; padding: 0.45rem 0.4rem; font-size: 0.9rem; }
fieldset.mcq select:has(option[value=""]:checked) { color: var(--muted); }
/* Honeypot (session 20): off-screen, never display:none — humans and
   screen readers never meet it, form-stuffing bots do. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The feedback page (session 98; ORDER v1.4 §4d.4, gallery panel 33): one
   fieldset per statement, nothing counts them; the radio is the state — laid
   invisibly over its numeral chip (the system chooser's principle), the
   chosen one filled; the end labels ride bands 1 and 5 for readers (.vh)
   and sit beneath for eyes. The chip is the label's own span: the reader's
   hidden span inside it is never dressed. The pointer is the label's — a
   radio is a replaced element and never stretches to insets (the review's
   row 29); the label's activation is the click. */
.likert { border: 0; margin: 1.3rem 0 0; padding: 0; min-width: 0; }
.likert legend { padding: 0; margin: 0 0 0.45rem; line-height: 1.5; }
.lk { display: flex; gap: 6px; }
.lk label { flex: 1; position: relative; margin: 0; font-size: inherit; cursor: pointer; }
.lk input { position: absolute; margin: 0; opacity: 0; }
.lk label > span {
  display: block;
  text-align: center;
  padding: 0.5rem 0;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
.lk input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.lk input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The chosen band stays visible in forced colours (session 100, drop 2; s98 row 20): the system's
   own highlight pair, which forcing keeps — a system colour is never forced (CSS Color Adjustment 1
   §3.1) — so nothing is released and the band's focus ring stays forced like every other (the
   review's row 13). */
@media (forced-colors: active) {
  .lk input:checked + span { background: Highlight; border-color: Highlight; color: HighlightText; }
}
.ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; }
/* The rating's thanks page (session 100, drop 2 panels 1–2): five text stars on one row per row —
   a star that stands in --star, pressable or not (.stars .on outranks .stars > a), a pressable one
   that does not in the accent, a static one that does not muted. Each link's glyph box is the 44px
   target WCAG 2.2 names (2.5.5) — sized boxes, not a.pg's ::before inset, because adjacent stars'
   insets would overlap their hit areas — and the static row's boxes the same, for the layout; the
   first box starts at the text edge. */
.rate h2 { margin-top: 1.3rem; }
.stars { display: flex; margin: 0.1rem 0 0; font-size: 1.75rem; line-height: 1; }
.stars > a, .stars > .on, .stars > .off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
}
.stars > a { color: var(--accent); }
.stars .on { color: var(--star); }
.stars .off { color: var(--muted); }

/* The consent card — the cockpit's (submission, house, incident); the confirmation pages left
   it for the consent shape (session 103). */
article.consent-card {
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  padding: 0.35rem 1rem;
  margin: 1rem 0;
  background: var(--panel);
  font-size: 0.92rem;
}
article.consent-card p + p { border-top: 0.5px solid var(--hair); padding-top: 0.8rem; }

/* Rows, labels, folds. */
ul.rows, ul.subjects { list-style: none; padding: 0; margin: 0.3rem 0 0; }
ul.rows li { border-top: 0.5px solid var(--hair); padding: 0.45rem 0; }
ul.rows li:first-child { border-top: 0; }
details.group ul.rows li { border-top: 0; }
/* The summary's wrong-page warning (session 100, drop 2 panel 14): the gold row tucked under its
   page row, unfenced. */
ul.rows li.flash { border-top: 0; padding: 0.55rem 0.75rem; margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.5; }
li.srow { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
li.orow { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
/* A subject's sparkline (session 100, drop 2 panel 6): its own line beneath the subject's name, the
   svg 12.5rem × 4rem in the accent (the system's text colour in forced colours), shrinking only when
   the row is too narrow; its "latest" tag beside it. */
li.srow .spark { flex-basis: 100%; min-width: 0; display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.1rem; }
li.srow .spark svg { flex: 0 1 12.5rem; min-width: 0; height: 4rem; color: var(--accent); }
@media (forced-colors: active) {
  li.srow .spark svg { color: CanvasText; }
}
.pgname { display: flex; align-items: center; gap: 0.55rem; }
/* The system chooser (subjects): the radio is the state — off-screen,
   keyboard-operable — and its label the button; :checked dresses the
   chosen one and the :has() rule reveals that system's list. Without
   :has() both lists render (the ruled degrade). */
.sys { display: flex; gap: 9px; margin: 1rem 0 0.4rem; }
.sys input { position: absolute; opacity: 0; }
.sysbtn {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
}
.sys input:checked + .sysbtn { background: var(--accent); color: #fff; }
.sys input:focus-visible + .sysbtn { outline: 2px solid var(--accent); outline-offset: 2px; }
form:has(#sys-vce:checked) ul.hsc, form:has(#sys-hsc:checked) ul.vce { display: none; }
li.dashrow { padding: 0; }
li.dashrow > a { display: block; padding: 0.45rem 0; text-decoration: none; color: var(--ink); }
li.dashrow .t { color: var(--accent); }
li.dashrow .sub { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 0.1rem; }
details.group, ul.rows.group { margin-left: 0.6rem; }
details.group { border-top: 0.5px solid var(--hair); padding: 0.35rem 0 0.5rem; }
details.group:first-of-type { border-top: 0; }
/* The one small label: muted by default, .tg the purple live-status
   variant — one rule set, no separate purple class. */
.tag {
  border: 0.5px solid var(--faint);
  border-radius: 3px;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  display: inline-block;
  margin-left: 0.4rem;
}
.tag.tg { border-color: var(--accent); color: var(--accent); }
/* Chips — verified results display (data values in the bold slot). */
.chip {
  display: inline-block;
  border: 0.5px solid var(--rule);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.15rem 0.3rem 0.15rem 0;
}
.chip b { color: var(--ink); }
/* Details-collapse vocabulary (native, no JS): no marker, ever — the
   arrow is drawn once by ::before. */
summary { cursor: pointer; padding: 0.25rem 0; color: var(--accent); list-style: none; }
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "\25B8  "; }
details[open] > summary::before { content: "\25BE  "; }
.acct { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; padding-top: 0.4rem; }
.acct details { margin: 0.5rem 0 0; }
.acct .ab { margin-top: 0.6rem; }
/* The sample showcase (ORDER v1.1 §4a, panel 26): two native folds,
   hairline-topped, un-indented, last in the landing's column; each
   page is an image framed like paper (its intrinsic size in markup —
   no layout shift). .vh hides the per-document summary from sight,
   not from readers (the honeypot's technique under its own name). */
details.sample { border-top: 0.5px solid var(--rule); margin-top: 1.3rem; padding: 0.35rem 0 0.5rem; }
details.sample summary { font-size: 1.02rem; }
details.sample img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.8rem 0 0;
  border: 0.5px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.vh { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Subject cards — the upload flow's step one. */
a.card, p.card {
  display: block;
  border: 0.5px solid rgba(0, 0, 0, .22);
  border-radius: 8px;
  padding: 0.8rem 0.75rem;
  margin: 0.5rem 0;
  text-decoration: none;
}
p.card.dim { border-color: var(--hair); background: var(--panel); color: var(--muted); }
/* The available subject wears the fill (drop 1 §4d.6, panel 17). */
a.card { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The transcript-checking walk: page chips (links, 44px tap target via
   the pseudo-element), the mono script blocks, the before/after
   highlights. */
.pgs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0.9rem 0 0; }
.pg {
  width: 30px; height: 30px; border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, .22); color: var(--muted);
  text-align: center; line-height: 29px;
  font-family: var(--mono); font-size: 12px;
}
.pg.done { background: var(--accent); color: #fff; border-color: var(--accent); }
.pg.now { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; line-height: 27px; }
.pg.todo { color: var(--faint); }
a.pg { position: relative; text-decoration: none; }
a.pg::before { content: ""; position: absolute; inset: -7px; }
.script {
  border: 0.5px solid var(--rule); border-radius: 8px; padding: 13px;
  margin: 0.5rem 0 0; background: var(--panel);
  font-family: var(--mono); font-size: 0.8rem; line-height: 2.05;
  white-space: pre-wrap;
}
.script.old { color: var(--muted); }
.script.new { border-color: var(--accent); background: var(--info-bg); }
/* The [?] marker inside the script — inherits its mono, a touch smaller. */
.mm { font-size: 0.85em; }
.struck { text-decoration: line-through; color: var(--muted); }
.hl-old { background: var(--was); padding: 1px 3px; color: var(--ink); }
.hl-new { background: var(--now); padding: 1px 3px; }

/* Footer — the stacked entity lines, the integrity chain last. */
footer {
  border-top: 0.5px solid var(--rule);
  margin-top: 1.4rem;
  padding-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.7;
}
footer .ln { display: block; }
footer .ln + .ln { margin-top: 0.15rem; }
footer .chain { margin-top: 0.45rem; }
footer .chain-head { word-break: break-all; font-family: var(--mono); font-size: 0.65rem; color: var(--muted); }

/* CARRIED — old selectors the untouched templates still wear (ruled
   (D) 25 Aug 2026; the alias above points at its new home): ul.subjects
   for the cockpit's queues (stands with the cockpit); the landing's two
   retired with its rebuild (session 102). The bare button dress stands:
   the cockpit wears it (the re-agree screen's act a .btn since session 103). */
button {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  text-decoration: none;
  cursor: pointer;
}

/* Cockpit (director-only surface, session 6) — carried unchanged; its body keeps the column it had
   (session 103, D-ruled: the cockpit's own measure — the token overridden, the body's rule the one). */
body.cockpit { --measure: 42rem; }
.cockpit-bar { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e2e2e2; }
.cockpit-error { background: #fbeaea; border: 1px solid #d9a3a0; padding: 0.5rem 0.75rem; }
.pdf-frame { width: 100%; height: 30rem; border: 1px solid #dddddd; }
.side-by-side { display: flex; gap: 1rem; flex-wrap: wrap; }
.side-by-side > section { flex: 1 1 20rem; min-width: 0; }
pre.transcript { white-space: pre-wrap; background: #f6f6f4; border: 1px solid #dddddd; padding: 0.5rem; }
.burn-page { position: relative; display: inline-block; max-width: 100%; }
.burn-page img { max-width: 100%; display: block; user-select: none; }
.burn-box { position: absolute; background: #000000; opacity: 0.65; outline: 2px solid #a4160f; pointer-events: none; }
img.preview { max-width: 100%; border: 2px solid #a4160f; }