/* ---------------------------------------------------------------------------
   OCTOPUS SUPERINTELLIGENCE. One black field a non human process runs on.
   Built to art/ref/vadim-glitch-poster.jpg, measured: 95.8% of the frame below
   lum 24, ink 1.8%, field #060606, bone #D8D8D8, deep red #B60000, cyan fringe.
   Every responsive override lives at the END of this file.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Krypton";
  src: url("../fonts/MonaspaceKrypton-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* field and ink, sampled off his picture */
  --field: #060606;
  --panel: #0b0b0b;
  --ink: #d8d8d8;          /* 14.2:1 on the field */
  --dim: #8c8c8c;          /*  6.0:1 */
  --mute: #7a7a7a;         /*  4.6:1, the floor: separators and disabled text */
  --idle: #4a4a4a;         /* strokes only, never a word */
  --line: #262626;
  --frame: #d8d8d8;
  --red: #ff2e1a;          /*  5.5:1, every red word and every live state */
  --red-deep: #b60000;     /* structure only: fills, slices, the status square */
  --cyan: #7fd8de;

  /* one type scale, nothing off it */
  --t-sm: 16px;
  --t: 16px;
  --t-md: 18px;
  --t-lg: 22px;
  --t-num: 40px;
  --lh: 1.6;
  --track: 0.08em;

  /* one spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --rail: 196px;
  --gap: 48px;
  --shell: min(1360px, 100vw - 64px);
  --page: calc(var(--shell) - var(--rail) - var(--gap));
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--field); }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "Krypton", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-variation-settings: "wght" 300;
  font-size: var(--t);
  line-height: var(--lh);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the field: an even grain over everything, the one treatment his picture has */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/grain.png");
  background-size: 256px 256px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

::selection { background: var(--red-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- shell ---- */

.shell {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--gap);
  align-items: start;
  padding: var(--s5) 0 var(--s8);
}

.sheet { min-width: 0; }

/* ---------------------------------------------------------------- rail ---- */

.rail {
  position: sticky;
  top: var(--s7);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.rail__ident {
  position: relative;
  font-size: var(--t-sm);
  color: var(--dim);
  padding-bottom: var(--s4);
}
.rail__ident::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.rail__ident b {
  font-variation-settings: "wght" 600;
  color: var(--ink);
  display: block;
  letter-spacing: 0.02em;
  margin-bottom: var(--s1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.rail__ident > span { min-width: 0; overflow-wrap: anywhere; }

.rail__list { display: flex; flex-direction: column; gap: var(--s1); list-style: none; margin: 0; padding: 0; }

.rail__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  text-decoration: none;
  color: var(--mute);
  font-size: var(--t);
  letter-spacing: 0.02em;
  transition: color 0.18s, background-color 0.18s;
}
.rail__link img { width: 20px; height: auto; opacity: 0.45; transition: opacity 0.18s, transform 0.18s; }
.rail__link:hover { color: var(--ink); background: #101010; }
.rail__link:hover img { opacity: 1; transform: translateX(2px); }
.rail__link[aria-current="page"] { color: var(--ink); }
.rail__link[aria-current="page"] img { opacity: 1; }

.rail__note {
  position: relative;
  font-size: var(--t-sm);
  color: var(--mute);
  padding-top: var(--s4);
}
.rail__note::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
}

/* the phone drawer: hidden above 760, but it keeps the page's own type so it is never
   a 13 px browser default waiting to be switched on */
.drawer-key {
  display: none;
  font: inherit;
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  color: var(--ink);
  background: transparent;
  border: 0;
}

/* --------------------------------------------------------------- blocks --- */

.block { margin-bottom: var(--s8); }
.block:last-child { margin-bottom: 0; }

.head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
}
.head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.head h2 {
  margin: 0;
  font-size: var(--t-lg);
  font-variation-settings: "wght" 600;
  letter-spacing: 0.02em;
}
.head p { margin: 0; font-size: var(--t-sm); color: var(--dim); }

/* ------------------------------------------------------------ first run --- */

/* His picture's own skeleton: a block of system lines top left, a binary column
   top right, a dialog under it, the specimen in the middle, the second dialog
   lower left, one line of warning lower right. The diagonal is the composition. */
.run {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s5);
  row-gap: var(--s5);
  align-items: start;
}

.boot { grid-column: 1 / 8; grid-row: 1; }
.boot p { margin: 0; font-size: var(--t); color: var(--dim); white-space: nowrap; }
.boot .lead { color: var(--ink); font-variation-settings: "wght" 600; letter-spacing: var(--track); }
.boot .alarm { color: var(--red); }
.boot b { color: var(--ink); font-variation-settings: "wght" 500; }

.cursor { color: var(--ink); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.prompt { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.prompt .key { padding: var(--s2) var(--s4); min-height: 44px; }
.prompt > span { color: var(--dim); font-size: var(--t); }

.bits { grid-column: 9 / 13; grid-row: 1; text-align: right; }
.bits ol { margin: 0; padding: 0; list-style: none; }
.bits li { font-size: var(--t); color: var(--ink); letter-spacing: 0.18em; font-variation-settings: "wght" 200; }
.bits li:nth-child(even) { color: var(--dim); }
.bits .bits__label {
  margin: var(--s2) 0 0;
  font-size: var(--t-sm);
  color: var(--mute);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

/* the specimen: the one big thing on the screen, a share of the column */
.spec { grid-column: 2 / 9; grid-row: 2 / span 2; justify-self: center; position: relative; width: min(100%, 470px); margin: 0; }
.spec__stack { position: relative; width: min(100%, 418px); margin: 0 auto; overflow: hidden; }
.spec img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* the specimen is never quite still: a slow breath, and a torn slice every few seconds
   that jolts the whole figure sideways the way a broken display does */
.spec__stack img:first-child { animation: breathe 7.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.93; } }

.spec__tear {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.spec.tearing .spec__tear { opacity: 0.85; }
.spec.tearing .spec__stack { transform: translateX(var(--jolt, 0px)); }
.spec__stack { transition: transform 0.06s steps(2, end); }

.spec__name {
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--dim);
}
.spec__num {
  margin: var(--s1) 0 0;
  text-align: center;
  font-size: var(--t-num);
  line-height: 1.05;
  font-variation-settings: "wght" 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.spec__num[data-sign="down"] { color: var(--red); }
.spec__foot { margin: var(--s2) 0 0; text-align: center; font-size: var(--t-sm); color: var(--mute); }
.spec figcaption { display: block; }

.aside { grid-column: 9 / 13; grid-row: 3; align-self: start; }
.aside p { margin: 0; font-size: var(--t); color: var(--dim); }
.aside p + p { margin-top: var(--s2); }
.aside b { color: var(--ink); font-variation-settings: "wght" 500; }

.run .dlg--helm { grid-column: 9 / 13; grid-row: 2; }
.run .dlg--coin { grid-column: 1 / 9; grid-row: 4; }

.run__tail { grid-column: 9 / 13; grid-row: 4; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* -------------------------------------------------------------- dialogs --- */

.dlg {
  position: relative;
  border: 1px solid var(--frame);
  background: var(--panel);
  padding: var(--s5);
}
.dlg::after {
  /* the reference's torn slice, caught on the frame's own top edge */
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: -5px;
  height: 11px;
  background: url("../img/slice-a.webp") center / 100% 100% no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.dlg__bar {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s3);
}
.dlg__icon { width: 34px; height: 34px; flex: none; margin-top: 2px; }
.dlg__title { min-width: 0; flex: 1; }
.dlg__title h3 {
  margin: 0;
  font-size: var(--t-lg);
  font-variation-settings: "wght" 600;
  letter-spacing: 0.02em;
}
.dlg__title p { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--dim); }

.dlg__state {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--mute);
}
.dlg__state::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--idle);
}
.dlg__state[data-on="live"] { color: var(--ink); }
.dlg__state[data-on="live"]::before { background: var(--red-deep); }

.dlg__body > * + * { margin-top: var(--s3); }
.dlg__ok { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.dlg p { margin: 0; }

/* rows: a fixed label column, a fluid value column, values on one right line */
.rows { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s5); row-gap: var(--s2); }
.rows dt {
  font-size: var(--t-sm);
  color: var(--mute);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.rows dd { margin: 0; font-size: var(--t); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.rows dd b { font-variation-settings: "wght" 600; }

/* the mint: selectable, wrapping, never abbreviated */
.mint {
  display: block;
  font-size: var(--t);
  line-height: 1.5;
  color: var(--ink);
  background: #000;
  border: 1px solid var(--line);
  padding: var(--s2) var(--s4);
  user-select: all;
  overflow-wrap: anywhere;
  min-width: 0;
}
.mint[data-empty="1"] { color: var(--mute); user-select: none; }

/* ----------------------------------------------------------------- keys --- */

.keys { display: flex; flex-wrap: wrap; gap: var(--s2); }

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, transform 0.08s;
}
.key:hover { background: var(--ink); color: #000; }
.key:active { transform: translateY(1px); }
.key[aria-disabled="true"], .key:disabled {
  border-color: var(--idle);
  color: var(--mute);
  cursor: not-allowed;
  pointer-events: none;
}
.key--wide { flex: 1 1 160px; }
.key--primary { border-color: var(--red); color: var(--red); }
.key--primary:hover { background: var(--red); color: #000; }
.key__mark { width: 18px; height: 18px; flex: none; }
.key[aria-disabled="true"] .key__mark { opacity: 0.45; }

.keys--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.keys--row .key { padding: var(--s3) var(--s4); letter-spacing: 0.02em; }
.keys--row .key { min-width: 0; }

/* ---------------------------------------------------------------- table --- */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t); }
.tbl caption { text-align: left; font-size: var(--t-sm); color: var(--mute); padding-bottom: var(--s3); letter-spacing: 0.02em; }
.tbl th, .tbl td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
.tbl th {
  font-size: var(--t-sm);
  font-variation-settings: "wght" 500;
  color: var(--mute);
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
}
.tbl td { color: var(--ink); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .down { color: var(--red); }
.tbl .off { color: var(--mute); }
.tbl__wrap { overflow-x: auto; }

/* --------------------------------------------------------------- pieces --- */

.note { font-size: var(--t-sm); color: var(--mute); margin: 0; }
.note--risk { color: var(--dim); }
.note--risk b { color: var(--red); font-variation-settings: "wght" 500; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); align-items: stretch; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); padding: var(--s5); background: var(--panel); }
.card--open { border-color: var(--frame); }
.card__fig { align-self: center; width: 100%; height: 210px; object-fit: contain; margin-bottom: var(--s4); }
.card h3 { margin: 0 0 var(--s2); font-size: var(--t-lg); font-variation-settings: "wght" 600; letter-spacing: 0.02em; }
.card .rule { margin: 0 0 var(--s4); font-size: var(--t); color: var(--dim); }
.card .rows { margin-top: auto; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding-top: var(--s4); }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--frame); }
.step b { display: block; font-size: var(--t-sm); color: var(--red); letter-spacing: var(--track); text-transform: uppercase; }
.step span { display: block; margin-top: var(--s2); font-size: var(--t); color: var(--dim); }

.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset legend { padding: 0; font-size: var(--t-sm); color: var(--mute); letter-spacing: var(--track); text-transform: uppercase; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin-top: var(--s3); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: var(--t);
  color: var(--dim);
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.choice:hover { border-color: var(--mute); color: var(--ink); }
.choice input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  border: 1px solid var(--idle);
  background: #000;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.choice input::after { content: ""; width: 8px; height: 8px; background: transparent; }
.choice input:checked { border-color: var(--red); }
.choice input:checked::after { background: var(--red); }
.choice:hover input { border-color: var(--mute); }
.choice:has(input:checked) { border-color: var(--frame); color: var(--ink); background: #101010; }
.choice:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

select.field, input.field {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: #000;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: var(--t);
}
select.field:focus-visible, input.field:focus-visible { border-color: var(--frame); }

.say { margin: 0; font-size: var(--t); min-height: calc(var(--t) * var(--lh)); }
.say[data-kind="ok"] { color: var(--ink); }
.say[data-kind="bad"] { color: var(--red); }
.say[data-kind="wait"] { color: var(--dim); }

/* the slice that tears across the field when a decision lands */
.tear {
  position: fixed;
  left: 0;
  right: 0;
  height: 26px;
  background: url("../img/slice-a.webp") center / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #000;
  padding: var(--s3) var(--s4);
  z-index: 9;
}
.skip:focus { left: var(--s4); top: var(--s4); position: fixed; }

.vhidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------- extra --- */

.plain { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.plain li { position: relative; padding-left: var(--s5); font-size: var(--t); color: var(--ink); }
.plain li + li { margin-top: var(--s2); }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 1px; background: var(--red); }

.has-helm { color: var(--red); font-variation-settings: "wght" 400; font-size: var(--t-sm); letter-spacing: var(--track); text-transform: uppercase; }

.disclose { margin-top: var(--s5); }
.disclose summary {
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--dim);
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: var(--s2) 0;
  min-height: 36px;
}
.disclose summary:hover { color: var(--ink); }
.pre {
  margin: var(--s3) 0 0;
  padding: var(--s4);
  background: #000;
  border: 1px solid var(--line);
  color: var(--dim);
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rows dd.off, .off { color: var(--mute); }
.card .plain { margin-bottom: var(--s4); }
.card .note { margin-bottom: var(--s4); }

/* =========================================================== responsive === */
/* every override lives below the base rules, never above them */

@media (max-width: 1180px) {
  :root { --shell: min(100%, 100vw - 48px); --page: var(--shell); }
  .shell { grid-template-columns: 1fr; row-gap: var(--s6); padding-top: var(--s5); }
  .rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--s4);
  }
  .rail__ident { padding: 0; flex: 1 1 100%; }
  .rail__ident::after { display: none; }
  .rail__note { display: none; }
  .rail__list { flex-direction: row; flex-wrap: wrap; gap: var(--s2); }
  .rail__note { border: 0; padding: 0; flex: 1 1 100%; }
  .boot, .bits, .aside, .spec, .run .dlg--helm, .run .dlg--coin, .run__tail { grid-column: 1 / -1; grid-row: auto; }
  .bits { text-align: left; }
  .spec { justify-self: center; }
  .run { row-gap: var(--s6); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --shell: min(100%, 100vw - 32px); --t-num: 34px; }
  .shell { padding: var(--s4) 0 var(--s7); }
  .cards { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .run__tail { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .boot p { white-space: normal; }
  .dlg { padding: var(--s4); }
  .dlg::after { left: -8px; right: -8px; }
  .keys--row { grid-template-columns: 1fr; }


  /* a table on a phone is not a scroll region: every row becomes labelled lines */
  .tbl__wrap { overflow-x: visible; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl caption { padding-bottom: var(--s4); }
  .tbl tr { position: relative; padding: var(--s4) 0; }
  .tbl tr + tr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
  .tbl td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--s4);
    align-items: baseline;
    padding: var(--s1) 0;
    border: 0;
    text-align: left;
  }
  .tbl td::before {
    content: attr(data-label);
    color: var(--mute);
    font-size: var(--t-sm);
    letter-spacing: var(--track);
    text-transform: uppercase;
  }
  .tbl td.num { text-align: left; }
  .tbl td[colspan] { grid-template-columns: 1fr; }
  .tbl td[colspan]::before { content: none; }

  /* the rail becomes a drawer behind one mark */
  .drawer-key {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    min-height: 48px;
    padding: var(--s2) var(--s4) var(--s2) 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--t-sm);
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
  }
  .drawer-key img { width: 20px; height: auto; }
  /* static, never offset: the base rule sticks the rail 48 px down, and a relative rail
     keeps that offset and walks straight into the sheet under it */
  .rail { position: relative; top: auto; display: block; }
  .rail__ident {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name key" "week key";
    align-items: center;
    column-gap: var(--s4);
  }
  .rail__ident b { grid-area: name; }
  .rail__ident > span { grid-area: week; }
  .drawer-key { grid-area: key; justify-self: end; }
  .rail__list {
    display: none;
    flex-direction: column;
    gap: var(--s1);
    margin-top: var(--s4);
    border-top: 1px solid var(--line);
    padding-top: var(--s4);
  }
  .rail[data-open="1"] .rail__list { display: flex; }
  .rail__link { min-height: 52px; }
  .rail__note { margin-top: var(--s4); }
}

@media (max-width: 380px) {
  :root { --shell: min(100%, 100vw - 24px); }
  .rows { grid-template-columns: 1fr; row-gap: var(--s1); }
  .rows dd { margin-bottom: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .tear, .spec__tear { display: none; }
  * { transition-duration: 0.01ms !important; }
}