/* ============================================================
   HALFTONE PRESS — "A3 · Bench"
   Neo-grotesque Swiss tool: signal red on warm paper, flat
   hairlines, no grain, no drop shadows. Controls dock LEFT,
   stage RIGHT, effect filmstrip across the bottom.
   ============================================================ */

:root {
  /* ============================================================
     PALETTE — the only five colours in the system. Everything
     else is one of these or an opacity/blend of ink & paper via
     color-mix(); change a value here and it propagates everywhere.
     ============================================================ */
  --paper: #eeebe3; /* warm off-white — base ground          */
  --paper-2: #ddd8ca; /* stage ground (recessed surface)       */
  --ink: #15120d; /* near-black                            */
  --accent: #f54129; /* signal red (primary)                  */
  --accent-2: #f5882a; /* press mustard (secondary)             */

  /* derived — same two hues only, never a new colour */
  --ink-soft: color-mix(
    in srgb,
    var(--ink) 60%,
    var(--paper)
  ); /* muted label / meta */

  /* BORDER WEIGHTS — only three exist anywhere:
       1px  structure / hairlines (the tokens below)
       2px  selection emphasis    (.film.on outline)
       3px  active-pass marker     (.block--stack.is-on stripe) */
  --hair: 1px solid var(--ink);
  --hair-soft: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --exp: "Archivo Expanded", "Archivo", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;

  --rail-w: 340px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback */
  height: 100dvh; /* fill the visible viewport on every device (mobile URL-bar safe) */
  overflow: hidden;
}

kbd {
  font-family: var(--mono);
  font-size: 10px;
  border: var(--hair-soft);
  padding: 0 4px;
}

/* ---------------- Masthead ---------------- */
.masthead {
  display: flex;
  align-items: stretch;
  border-bottom: var(--hair);
  flex: 0 0 auto;
}
.mh-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 26px;
}
.mh-mark {
  display: flex;
  gap: 5px;
}
.mh-mark i {
  width: 13px;
  height: 13px;
  border: var(--hair);
  display: block;
}
.mh-mark i:nth-child(1) {
  background: var(--accent);
}
.mh-mark i:nth-child(2) {
  background: var(--ink);
}
.mh-mark i:nth-child(3) {
  background: transparent;
}
.mh-title {
  font-family: var(--exp);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.mh-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 26px;
  gap: 30px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mh-meta b {
  color: var(--ink);
  font-weight: 700;
}
.mh-tag {
  padding: 0 22px;
  display: flex;
  align-items: center;
  border-left: var(--hair);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* masthead app label */
.modebar {
  display: flex;
  border-left: var(--hair);
}
.modebar__btn {
  display: flex;
  align-items: center;
  font-family: var(--exp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px;
  color: var(--ink-soft);
}
.modebar__btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* ---------------- Layout: rail LEFT | work area RIGHT ---------------- */
.body {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  flex: 1;
  min-height: 0;
}

/* ---------------- Left control rail ---------------- */
.rail {
  border-right: var(--hair);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.rail-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.block {
  border-bottom: var(--hair);
}
.block-head {
  display: flex;
  background: var(--paper-2);
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px 10px;
  border-bottom: var(--hair-soft);
}
.block-head .ix {
  font-size: 11px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.block-head h3 {
  margin: 0;
  font-family: var(--exp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
}
.block--b .block-head {
  background: var(--paper-2);
  border-bottom-color: transparent;
}
.block--b .block-head .ix {
  color: var(--ink);
}
.block--b .block-head h3 {
  color: var(--ink);
}
.block-tools {
  display: flex;
  gap: 14px;
}
.block-tools[hidden] {
  display: none;
}
.tool {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.tool:hover {
  color: var(--accent);
}

/* Pre-adjust (02) — all accent elements read in ink only, never red */
.block--b .field__val {
  color: var(--ink);
}
.block--b input[type="range"]::-webkit-slider-thumb {
  background: var(--ink);
  border-color: var(--ink);
}
.block--b input[type="range"]::-moz-range-thumb {
  background: var(--ink);
  border-color: var(--ink);
}
.block--b input[type="range"]:focus-visible {
  outline-color: var(--ink);
}
.block--b .toggle input:checked + .toggle__track {
  background: var(--ink);
}
.block--b .toggle input:focus-visible + .toggle__track {
  outline-color: var(--ink);
}

/* Stage B — stacked second effect. Slot ix badges read in their slot colour. */
.block--a .block-head .ix {
  color: var(--accent);
} /* slot A reads red */
.block--stack .block-head .ix {
  color: var(--accent-2);
} /* slot B reads mustard */
/* Slot B active: recolour all accent-tinted controls to mustard */
.block--stack.is-on .field__val {
  color: var(--accent-2);
}
.block--stack.is-on input[type="range"]::-webkit-slider-thumb {
  background: var(--accent-2);
}
.block--stack.is-on input[type="range"]::-moz-range-thumb {
  background: var(--accent-2);
}
.block--stack.is-on input[type="range"]:focus-visible {
  outline-color: var(--accent-2);
}
.block--stack.is-on .toggle input:checked + .toggle__track {
  background: var(--accent-2);
}
.note--add {
  margin: 0;
}
.note--add b {
  color: var(--accent-2);
}
.block-body {
  padding: 15px 20px;
}
.block-body--sub {
  border-top: var(--hair-soft);
  padding-top: 12px;
}

.note {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin: 10px 0 0;
  line-height: 1.45;
}

/* ---------------- Controls ---------------- */
.row {
  margin-bottom: 14px;
}
.row:last-child {
  margin-bottom: 0;
}
.row--buttons {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}
.row--base {
  margin: 0 0 14px;
  padding: 10px;
  border: var(--hair-soft);
}
.row--base .field__label {
  color: var(--accent);
}

.field__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 8px;
}
.field__label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.field__val {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* range — hairline track, small round accent thumb */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--ink);
}
input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--ink);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--hair);
  margin-top: -5px;
}
input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: var(--hair);
}
input[type="range"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* select — flat hairline box with ink caret */
select {
  width: 100%;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 26px 8px 10px;
  border: var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    right 13px center,
    right 8px center;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}
select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* text input */
input[type="text"] {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 10px;
  border: var(--hair);
  background: transparent;
  color: var(--ink);
  letter-spacing: 0.03em;
}
input[type="text"]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* segmented control */
.seg {
  display: flex;
  border: var(--hair);
}
.seg button {
  flex: 1;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-right: var(--hair);
  cursor: pointer;
  color: var(--ink);
}
.seg button:last-child {
  border-right: none;
}
.seg button.is-active {
  background: var(--ink);
  color: var(--paper);
}
.seg button:not(.is-active):hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* toggle switch */
.toggle {
  display: inline-flex;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle__track {
  width: 40px;
  height: 20px;
  border: var(--hair);
  background: var(--paper-2);
  position: relative;
  transition: background 0.12s;
}
.toggle__track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--ink);
  transition: transform 0.12s ease;
}
.toggle input:checked + .toggle__track {
  background: var(--accent);
}
.toggle input:checked + .toggle__track::after {
  transform: translateX(20px);
  background: var(--paper);
}
.toggle input:focus-visible + .toggle__track {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* color swatch */
.color-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 22px;
  border: var(--hair);
  padding: 0;
  background: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
input[type="color"]::-moz-color-swatch {
  border: none;
}
.color-field__hex {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------- Color editors ---------------- */
#prestage-controls:not(:empty) {
  margin-top: 14px;
}
.grad-preset {
  margin-bottom: 10px;
}
.grad-bar {
  position: relative;
  height: 26px;
  border: var(--hair);
  cursor: crosshair;
  margin-bottom: 16px;
}
.grad-stop {
  position: absolute;
  top: 100%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -2px) rotate(45deg);
  border: var(--hair);
  cursor: grab;
  touch-action: none;
}
.grad-stop.removing {
  opacity: 0.35;
  border-style: dashed;
}
.grad-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.grad-swatches input[type="color"] {
  width: 28px;
  height: 20px;
}

.curve-pad {
  display: block;
  border: var(--hair);
  margin-top: 10px;
  cursor: crosshair;
  touch-action: none;
  background: var(--paper);
}
.seg--curve {
  margin-top: 0;
}
.seg--curve button {
  font-size: 9px;
  padding: 6px 4px;
}

/* ---------------- Buttons ---------------- */
.btn {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 14px;
  border: var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.btn--primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn--block {
  flex: 1;
  width: 100%;
}
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn[disabled]:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------------- Export (pinned bottom of rail) ---------------- */
.exp-opts {
  padding: 12px 20px;
  border-top: var(--hair-soft);
}
.exp-opts .note {
  margin-top: 8px;
}
.exp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--hair);
  flex: 0 0 auto;
}
.exp button {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px;
  background: transparent;
  border: none;
  border-right: var(--hair);
  cursor: pointer;
  color: var(--ink);
}
.exp button:last-child {
  border-right: none;
}
.exp button.primary {
  background: var(--accent);
  color: var(--paper);
}
.exp button:hover {
  background: var(--ink);
  color: var(--paper);
}
.exp button.primary:hover {
  background: var(--ink);
}
.exp button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.exp button[disabled]:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------------- Right work area ---------------- */
.workarea {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 34px 22px;
  gap: 16px;
  min-height: 0;
}
.stage-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hair);
  background: var(--paper-2);
  overflow: hidden;
}

/* registration ticks */
.tick {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
}
.tick::before,
.tick::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.tick::before {
  width: 100%;
  height: 1px;
  top: 50%;
}
.tick::after {
  height: 100%;
  width: 1px;
  left: 50%;
}
.tick.tl {
  top: 10px;
  left: 10px;
}
.tick.tr {
  top: 10px;
  right: 10px;
}
.tick.bl {
  bottom: 10px;
  left: 10px;
}
.tick.br {
  bottom: 10px;
  right: 10px;
}

/* the proof — white sheet hugging the canvas */
.proof {
  background: var(--paper);
  border: var(--hair);
  line-height: 0;
}
.proof canvas {
  display: block;
}

.ascii-text {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  white-space: pre;
  z-index: 4;
  padding: 14px;
  user-select: text;
}

.stage-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stage-meta .grp {
  display: flex;
  gap: 26px;
}
.stage-meta b {
  color: var(--ink);
  font-weight: 700;
}
.dot-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}
.dot-live::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
}

/* empty / drop state */
.empty {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.empty.is-hover {
  background: var(--accent);
  border-style: solid;
  color: var(--paper);
}
.empty[hidden] {
  display: none;
}
.empty-inner {
  text-align: center;
  max-width: 340px;
  padding: 20px;
}
.empty-glyph {
  font-size: 38px;
  line-height: 1;
  color: var(--accent);
}
.empty.is-hover .empty-glyph {
  color: var(--paper);
}
.empty h2 {
  font-family: var(--exp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
}
.empty p {
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.empty.is-hover h2,
.empty.is-hover p {
  color: var(--paper);
}
.empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.empty-hint {
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-top: 16px;
  opacity: 0.6;
}

/* ---------------- Effect filmstrip ---------------- */
.strip {
  border-top: var(--hair);
  flex: 0 0 auto;
}
.strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 34px 9px;
}
.strip-head__lead {
  display: flex;
  align-items: center;
  gap: 12px;
}
.strip-head h4 {
  margin: 0;
  font-family: var(--exp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.strip-head > span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A / B preset-target toggle — which slot the filmstrip edits. Active slot
   lights in its own colour (A red, B mustard); B dims until a second effect exists. */
.abtog {
  display: flex;
  border: var(--hair);
}
.abtog__btn {
  font-family: var(--exp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 5px 12px;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-right: var(--hair);
  cursor: pointer;
}
.abtog__btn:last-child {
  border-right: none;
}
.abtog__btn:not(.is-active):hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.abtog__btn.is-empty {
  opacity: 0.4;
}
.abtog__btn[data-slot="A"].is-active {
  background: var(--accent);
  color: var(--paper);
}
.abtog__btn[data-slot="B"].is-active {
  background: var(--accent-2);
  color: var(--ink);
}
.films {
  display: flex;
  gap: 14px;
  padding: 0 34px 18px;
  overflow-x: auto;
}
.film {
  flex: 0 0 auto;
  width: 118px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: var(--font);
}
.film .thumb {
  display: block;
  width: 118px;
  height: 88px;
  border: var(--hair);
  background: var(--paper);
  line-height: 0;
  overflow: hidden;
}
.film .thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}
.film:hover .thumb {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}
.film.on .thumb,
.film.on:hover .thumb {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.films.is-b .film.on .thumb,
.films.is-b .film.on:hover .thumb {
  outline-color: var(--accent-2);
}
.film .cap {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.film .cap b {
  color: var(--ink);
  font-weight: 700;
}
.film.on .cap b {
  color: var(--accent);
}
.films.is-b .film.on .cap b {
  color: var(--accent-2);
}

/* ---------------- Scrollbars ---------------- */
.rail-scroll::-webkit-scrollbar,
.films::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.rail-scroll::-webkit-scrollbar-track,
.films::-webkit-scrollbar-track {
  background: transparent;
}
.rail-scroll::-webkit-scrollbar-thumb,
.films::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.rail-scroll::-webkit-scrollbar-thumb:hover,
.films::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* ---------------- Responsive ----------------
   The app always fills the viewport (100dvh, no page scroll). Only two regions
   ever scroll: the control rail (.rail-scroll) and the effect strip (.films). */

/* Tablet & small laptops — keep the two-column layout, just tighten it. */
@media (max-width: 1024px) {
  :root {
    --rail-w: 300px;
  }
  .stage {
    padding: 22px 22px 16px;
  }
}

/* Phones — stack into one viewport-tall column: masthead + canvas + strip fixed
   on top, the controls drawer fills the rest. Still no page scroll; the drawer
   (.rail-scroll) and the strip (.films) are the only things that scroll. */
@media (max-width: 720px) {
  .body {
    display: flex;
    flex-direction: column;
  }

  /* canvas + strip first (fixed), controls drawer second (fills + scrolls) */
  .workarea {
    order: 1;
    flex: 0 0 auto;
    border-bottom: var(--hair);
  }
  .stage {
    flex: 0 0 auto;
    height: 35vh; /* fallback */
    height: 35dvh;
    padding: 14px 16px 10px;
    gap: 8px;
  }
  .rail {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    border-right: none;
  }

  /* condensed masthead (drop the meta strip, trim the brand) */
  .mh-meta {
    display: none;
  }
  .mh-brand {
    padding: 12px 16px;
    border-right: none;
  }
  .mh-title {
    font-size: 17px;
  }

  /* compact stage meta so it never wraps and steals canvas height */
  .stage-meta {
    font-size: 9px;
  }
  .stage-meta .grp {
    gap: 12px;
  }

  /* smaller, tighter filmstrip */
  .strip-head {
    padding: 9px 16px 7px;
  }
  .films {
    gap: 10px;
    padding: 0 16px 14px;
  }
  .film,
  .film .thumb {
    width: 96px;
  }
  .film .thumb {
    height: 72px;
  }

  /* tighter rail body + export bar for thumb reach */
  .block-head {
    padding: 11px 16px 9px;
  }
  .block-body {
    padding: 13px 16px;
  }
  .exp-opts {
    padding: 10px 16px;
  }
  .exp button {
    padding: 13px;
  }
}