:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#202538;
  background:#f7f6fb;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,select,input {
  font:inherit
}

button,select {
  cursor:pointer
}

button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #f4a65d;
  outline-offset:3px
}

[hidden] {
  display:none!important
}

.site-header {
  background:#fff;
  border-bottom:1px solid #e7e5ee
}

.header-inner {
  max-width:1760px;
  padding:19px 20px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#202538;
  font-size:19px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1px
}

.brand-icon {
  background:#7258d8;
  color:#fff;
  border-radius:9px;
  font-size:28px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center
}

.brand-accent {
  color:#765bd8
}

.brand small {
  display:block;
  color:#8e8b9d;
  font-size:8px;
  letter-spacing:1.4px;
  margin-top:5px
}

.mode-switch {
  display:flex;
  gap:4px;
  padding:4px;
  background:#f3f1f8;
  border-radius:11px
}

.mode-switch button {
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6f6c7c;
  padding:10px 18px;
  font-weight:700;
  font-size:13px
}

.mode-switch button.active {
  background:white;
  color:#5d45ba;
  box-shadow:0 2px 8px #28203512
}

.container {
  max-width:1760px;
  padding:0 20px;
  margin:auto
}

.hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 6px 22px
}

.hero > div:first-child { min-width:0 }
.hero h1 { font-size:clamp(32px,4vw,56px) }

.eyebrow,.step-label {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:850;
  color:#8b859c
}

.eyebrow {
  color:#7258d8
}

.eyebrow span {
  font-size:16px;
  margin-right:5px
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:clamp(38px,5vw,62px);
  line-height:1.06;
  letter-spacing:-2.8px;
  margin:14px 0
}

h1 em {
  font-style:normal;
  color:#765bd8
}

.hero p {
  max-width:460px;
  color:#777588;
  line-height:1.6;
  font-size:15px
}



.workspace {
  background:white;
  border:1px solid #ebe9f0;
  border-radius:18px;
  box-shadow:0 14px 35px #29204509;
  padding:30px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:22px
}

.section-heading h2 {
  font-size:23px;
  letter-spacing:-.7px;
  margin:7px 0
}

.section-heading h2 span {
  color:#e79c61
}

.section-heading p {
  font-size:13px;
  color:#858394
}

:is(#explore, #tv-lab, #jumper-lab) .section-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start
}
:is(#explore, #tv-lab, #jumper-lab) .section-heading > div:first-child { grid-column:1; min-width:0 }
:is(#explore, #tv-lab, #jumper-lab) .mode-nav-row { grid-column:2; align-self:start; justify-content:center }
#explore .select-label { grid-column:3; justify-self:end }
.mode-nav-row { display:flex; justify-content:flex-end; min-width:0 }
@media (max-width:950px) {
  #explore .select-label { grid-column:1 / -1; justify-self:end }
}
@media (max-width:750px) {
  :is(#explore, #tv-lab, #jumper-lab) .section-heading { grid-template-columns:minmax(0,1fr) }
  :is(#explore, #tv-lab, #jumper-lab) .mode-nav-row { grid-column:1 / -1; order:-1; justify-content:flex-start }
  #explore .select-label { justify-self:stretch }
  .mode-switch { max-width:100% }
  .mode-switch button { padding:9px 10px; white-space:nowrap }
}

.select-label {
  display:grid;
  gap:7px;
  font-size:9px;
  letter-spacing:1px;
  font-weight:800;
  color:#9994a5
}

.select-label select {
  min-width:180px;
  border:1px solid #e6e4ed;
  border-radius:8px;
  background:#faf9fc;
  color:#39394c;
  font-size:12px;
  font-weight:650;
  padding:10px
}

.upload-zone {
  border:2px dashed #b9acec;
  background:#f8f5ff;
  border-radius:12px;
  padding:18px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  color:#6451a9;
  font-size:13px
}

.upload-zone.dragging {
  border-color:#6045c5;
  background:#eee9fc
}

.upload-zone label { font-weight:800 }
.upload-zone input { max-width:100%; font-size:12px }
.upload-zone p { flex-basis:100%; font-size:11px; color:#777184 }
.upload-zone .upload-error { color:#ad354e; font-weight:700 }

.comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.image-card {
  margin:0;
  border:1px solid #e7e5ed;
  border-radius:12px;
  overflow:hidden;
  background:#faf9fc
}

.image-card figcaption,.card-bottom {
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  font-weight:850;
  letter-spacing:.9px
}

.card-tag {
  font-size:9px;
  color:#9791a2
}

.live-dot {
  color:#765bd8;
  font-size:9px
}

.picture {
  padding:0 12px
}

.picture canvas {
  display:block;
  width:100%;
  height:auto;
  border-radius:6px
}

.picture canvas {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin: auto;
}

.card-bottom {
  font-weight:600;
  letter-spacing:0;
  color:#8c8899
}

.card-bottom strong {
  color:#7258d8
}

.controls {
  padding:25px 4px 14px
}

.resolution-head {
  display:flex;
  justify-content:space-between;
  align-items:center
}

.resolution-head h3 {
  font-size:19px;
  margin:5px 0
}

.resolution-head h3 span {
  color:#a496d7
}

.grid-option {
  font-size:12px;
  font-weight:650;
  color:#666477;
  display:flex;
  align-items:center;
  gap:7px
}

.grid-option input {
  accent-color:#765bd8;
  width:16px;
  height:16px
}

.range-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px
}

.range-row span {
  font-size:9px;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.8px;
  color:#aaa6b5
}

input[type=range] {
  width:100%;
  accent-color:#775dd9;
  cursor:pointer
}

.range-ticks {
  display:flex;
  justify-content:space-between;
  margin:1px 83px 0;
  font-size:10px;
  color:#a5a1b1
}

.stats {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:23px
}

.stats div {
  border:1px solid #eeedf2;
  border-radius:9px;
  padding:11px 16px;
  min-width:115px
}

.stats div span,.stats div strong {
  display:block
}

.stats div span {
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  color:#a09baa;
  margin-bottom:4px
}

.stats div strong {
  font-size:17px
}

.stats b {
  color:#c7c2d0
}

.stats .total {
  background:#f1edfc;
  border-color:#f1edfc;
  min-width:160px
}

.stats .total strong {
  color:#6a50c7
}

.notice {
  display:flex;
  align-items:center;
  gap:14px;
  background:#fbf5ea;
  border-radius:10px;
  padding:15px 17px;
  margin-top:14px
}

.notice-icon {
  color:#d99d53;
  font-size:25px
}

.notice strong {
  font-size:12px
}

.notice p {
  font-size:12px;
  color:#8c8375;
  margin-top:3px
}





footer {
  max-width:1760px;
  margin:28px auto;
  padding:0 26px 32px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  color:#aaa5b5
}

footer span span {
  color:#ad9de8
}

.hint-button {
  border:0;
  background:#eee9fc;
  color:#6b50c8;
  border-radius:9px;
  padding:12px 15px;
  margin-top:20px;
  font-size:12px;
  font-weight:800
}

.feedback {
  margin-top:24px;
  padding:17px 20px;
  border-radius:10px;
  background:#fff3e7;
  font-size:13px;
  line-height:1.6
}

.feedback.correct {
  background:#e9f6ef
}

@media(max-width:650px) {
  .header-inner,.container {
  padding-left:16px;
  padding-right:16px
}

.brand small {
  font-size:7px
}

.mode-switch button {
  padding:9px 10px;
  font-size:12px
}

.hero {
  padding:24px 2px 18px
}



.workspace {
  padding:18px
}

.section-heading {
  align-items:start;
  flex-direction:column
}

.select-label,.select-label select {
  width:100%
}

.comparison {
  grid-template-columns:1fr
}

.stats {
  gap:6px
}

.stats div,.stats .total {
  min-width:0;
  flex:1;
  padding:10px 7px
}

.stats div strong {
  font-size:13px
}

.range-row span {
  font-size:8px
}

.range-ticks {
  margin-left:69px;
  margin-right:69px
}

footer {
  padding:0 18px 24px;
  gap:12px
}

}

#theme-toggle {
  border: 1px solid #d5cfeb;
  border-radius: 8px;
  background: #fff;
  color: #5d45ba;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

#theme-toggle:hover { background: #f3f1f8; }

/* TV Lab */

.tv-size-screens {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin: 32px 6px 0;
}

.tv-size-screen {
  flex: var(--diagonal) 1 0;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.tv-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #c8c7ca url('/assets/tv-photo.png') center / 100% 100% no-repeat;
}

.tv-size-bezel {
  position: absolute;
  /* Slightly inset from the photographed bezel (1448 × 1086 source pixels). */
  left: 3.8%;
  top: 12.52%;
  width: 92.27%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: #303044;
}

.tv-size-bezel canvas {
  display: block;
  width: 100%;
  height: auto;
}

.tv-size-bezel canvas { aspect-ratio: 16 / 9; }

.tv-stretch-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 3px solid white;
  border-radius: 50%;
  background: #765bd8;
  box-shadow: 0 1px 5px #202538;
  cursor: nwse-resize;
  touch-action: none;
}

.tv-stretch-label, .tv-stretch-spacer {
  display: block;
  height: 56px;
  margin-top: 10px;
}

.tv-stretch-label {
  color: #777588;
  font-size: 12px;
}

.tv-stretch-label input {
  display: block;
  margin-top: 6px;
}

.tv-size-screen figcaption {
  margin-top: 12px;
  color: #343347;
  font-size: 14px;
  font-weight: 850;
}

.tv-size-screen figcaption span {
  color: #8c8899;
  font-size: 11px;
}

/* The inches are 50% larger than the 14px caption; the screen size in cm sits beside them. */
.tv-size-screen figcaption .tv-inches { font-size: 21px; font-weight: 850; }
.tv-size-screen figcaption .tv-cm { margin-left: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tv-resolution {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tv-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.tv-tools p {
  color: #777588;
  font-size: 12px;
  line-height: 1.6;
}

.tv-fact, .tv-signal {
  margin-top: 20px;
  padding: 18px;
  border-radius: 10px;
  background: #f1edfc;
}

.tv-fact {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tv-fact > span { color: #765bd8; font-size: 24px; }
.tv-fact strong, .tv-signal h3 { font-size: 14px; }
.tv-fact p, .tv-signal p, .tv-quiz > p {
  margin-top: 6px;
  color: #777588;
  font-size: 13px;
  line-height: 1.6;
}

.tv-signal { background: #f8f7fb; }
.tv-signal h3 { margin-top: 7px; }

/* Announced to screen readers without taking visible space. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tv-quiz { margin-top: 22px; }
.tv-quiz h2 { margin-top: 8px; font-size: 23px; }
.tv-quiz h2 span { color: #e79c61; }
.tv-answers { display: grid; gap: 9px; margin-top: 18px; }
.tv-answers button {
  padding: 14px 16px;
  border: 1px solid #e7e4ed;
  border-radius: 9px;
  background: white;
  color: #343347;
  font-weight: 700;
  text-align: left;
}
.tv-answers button:hover { border-color: #816be0; background: #f7f4ff; }

@media (max-width: 750px) {
  .tv-stretch-spacer { display: none; }
  .tv-size-screens { flex-direction: column; align-items: center; gap: 26px; }
  .tv-size-screen { flex: none; width: var(--screen-width); }
}

@media (max-width: 650px) {
  .tv-tools { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 850px) {
  .header-inner { flex-wrap: wrap; gap: 14px; }
  #theme-toggle { margin-left: auto; }
}

@media (max-width: 480px) {
  .header-inner { flex-wrap: wrap; gap: 14px; }
  .mode-switch { width: 100%; }
  .mode-switch button { flex: 1; min-width:0; padding:9px 5px; font-size:11px; }
}

/* Jumper Lab */
.jumper-choice { width:fit-content; max-width:100%; margin-bottom:16px; }
.jumper-frame { width:100%; max-width:720px; margin:auto; border-radius:14px; background:#f1edfc; overflow-x:auto; overflow-y:hidden; }
.jumper-frame canvas { display:block; max-width:none; }
.jumper-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px 20px; align-items:center; max-width:720px; margin:24px auto 0; }
.jumper-controls label { font-size:13px; font-weight:700; color:#777588; }
.jumper-controls output { float:right; margin-left:12px; font-variant-numeric:tabular-nums; }
.jumper-controls input { min-width:0; }
.jumper-controls button { grid-column:1 / -1; justify-self:start; margin:0; }
.jumper-stats { max-width:720px; margin:20px auto 0; font-size:13px; font-weight:700; line-height:1.7; }
@media (max-width:480px) {
  .jumper-choice { width:100%; }
  .jumper-controls { grid-template-columns:minmax(0,1fr); gap:8px; }
  .jumper-controls input { margin-bottom:8px; }
}

/* Standard skin: Colour Depth's playful palette, without changing the lab layout or Cyber. */
html:not([data-theme="cyber"]) {
  color-scheme: light;
  color: #2b1a3d;
  background-color: #fffdf9;
  background-image:
    radial-gradient(circle, #5a189a20 1.5px, transparent 2px),
    radial-gradient(circle, #ff8fab66 2px, transparent 2.5px),
    linear-gradient(125deg, #fff1c9, #ffe0ec 52%, #dcf1ff);
  background-size: 76px 76px, 113px 113px, cover;
  background-position: 0 0, 34px 45px, 0 0;
  font-family: ui-rounded, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
}

html:not([data-theme="cyber"]) :is(h1, h2, h3, .brand) {
  font-family: ui-rounded, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  color: #2b1a3d;
}

html:not([data-theme="cyber"]) :is(.site-header, .workspace) {
  background: #fffdf9;
  border-color: #ffd23f;
  box-shadow: 6px 7px 0 #5a189a24;
}

html:not([data-theme="cyber"]) .site-header { border-bottom-width: 3px; }
html:not([data-theme="cyber"]) .workspace {
  border-width: 2px;
  border-radius: 22px;
}
html:not([data-theme="cyber"]) :is(.brand-accent, h1 em, .eyebrow, .live-dot, .card-bottom strong, .stats .total strong, .tv-fact > span, .resolution-head h3 span, footer span span) { color: #5a189a; }
html:not([data-theme="cyber"]) .brand-icon { background: #5a189a; color: #fffdf9; border-radius: 14px; }
html:not([data-theme="cyber"]) :is(.mode-switch) {
  background: #f1eaff;
  border: 1px solid #d2b8eb;
  border-radius: 14px;
}
html:not([data-theme="cyber"]) :is(.mode-switch button) { color: #4b315c; border-radius: 10px; }
html:not([data-theme="cyber"]) :is(.mode-switch button.active) {
  background: #5a189a;
  color: #fffdf9;
  box-shadow: 2px 3px 0 #2b1a3d55;
}
html:not([data-theme="cyber"]) :is(.mode-switch button:hover:not(.active)) { background: #e3f4ff; color: #2b1a3d; }
html:not([data-theme="cyber"]) .tv-stretch-handle { background: #5a189a; color: #fffdf9; }
html:not([data-theme="cyber"]) :is(#theme-toggle, .hint-button) {
  background: #ffd23f;
  color: #2b1a3d;
  border: 2px solid #5a189a;
  border-radius: 12px;
  font-weight: 800;
}
html:not([data-theme="cyber"]) :is(#theme-toggle:hover, .hint-button:hover:not(:disabled)) { background: #ffec99; }
html:not([data-theme="cyber"]) :is(.section-heading h2 span, .tv-quiz h2 span) { color: #5a189a; }

html:not([data-theme="cyber"]) :is(.image-card, .select-label select, .tv-answers button) {
  background: #fffdf9;
  color: #2b1a3d;
  border-color: #d2b8eb;
  border-radius: 12px;
}
html:not([data-theme="cyber"]) :is(.image-card, .stats div) { border-color: #d2b8eb; }
html:not([data-theme="cyber"]) .tv-answers button:hover:not(:disabled) { background: #e3f4ff; border-color: #5a189a; }
html:not([data-theme="cyber"]) :is(.tv-answers button:disabled, .hint-button:disabled) {
  opacity: .65;
  cursor: not-allowed;
}
html:not([data-theme="cyber"]) :is(.upload-zone, .tv-signal) { background: #e3f4ff; }
html:not([data-theme="cyber"]) .upload-zone { border-color: #5a189a; color: #2b1a3d; }
html:not([data-theme="cyber"]) .upload-zone.dragging { background: #f1eaff; border-color: #40106f; }
html:not([data-theme="cyber"]) :is(.stats .total, .tv-fact, .jumper-frame) { background: #f1eaff; border-color: #d2b8eb; }
html:not([data-theme="cyber"]) :is(.notice, .feedback) { background: #fff1c9; color: #2b1a3d; border: 1px solid #ffd23f; }
html:not([data-theme="cyber"]) .feedback.correct { background: #d9f7e9; border-color: #339a6d; }
html:not([data-theme="cyber"]) .feedback.incorrect { background: #ffe4eb; border-color: #b64a70; }
html:not([data-theme="cyber"]) :is(.notice-icon, .upload-zone .upload-error) { color: #9b3050; }
html:not([data-theme="cyber"]) :is(.hero p, .section-heading p, .upload-zone p, .card-bottom, .grid-option, .notice p, .tv-stretch-label, .tv-tools p, .tv-fact p, .tv-signal p, .tv-quiz > p, .image-card .card-tag, .jumper-controls label, footer) { color: #4b315c; }
html:not([data-theme="cyber"]) :is(.step-label, .select-label, .stats div span, .range-row span, .range-ticks, .brand small, .tv-size-screen figcaption span, .tv-resolution) { color: #624777; }
html:not([data-theme="cyber"]) .tv-size-screen figcaption { color: #2b1a3d; }
html:not([data-theme="cyber"]) :is(input[type="range"], input[type="checkbox"]) { accent-color: #5a189a; }
html:not([data-theme="cyber"]) :is(button, select, input, summary):focus-visible { outline: 3px solid #5a189a; outline-offset: 3px; }

@media (max-width: 480px) {
  html:not([data-theme="cyber"]) .workspace { box-shadow: 3px 4px 0 #5a189a24; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="cyber"]) *, html:not([data-theme="cyber"]) *::before, html:not([data-theme="cyber"]) *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Cyber is a separate skin. The standard overrides above do not affect it. */
html[data-theme="cyber"] {
  color-scheme: dark;
  color: #e6f4f5;
  background: #03090b;
  font-family: "Rajdhani", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
}

html[data-theme="cyber"] :is(.site-header, .workspace) {
  background: #071216;
  border-color: #28515a;
  box-shadow: 0 10px 32px #0008;
}

html[data-theme="cyber"] :is(.brand, .tv-size-screen figcaption) { color: #e6f4f5; }
html[data-theme="cyber"] :is(.brand-accent, h1 em, .eyebrow, .live-dot, .card-bottom strong, .stats .total strong, .tv-fact > span) { color: #e8ff00; }
html[data-theme="cyber"] :is(.brand-icon, .tv-stretch-handle) { background: #e8ff00; color: #03090b; }
html[data-theme="cyber"] #theme-toggle:hover { background: #c6dc00; color: #03090b; }
html[data-theme="cyber"] :is(.mode-switch, .stats .total, .tv-fact, .tv-signal, .hint-button, .jumper-frame) { background: #10242a; }
html[data-theme="cyber"] :is(.image-card, .select-label select, .tv-answers button, #theme-toggle) {
  background: #0d1d23;
  border-color: #38616a;
  color: #e6f4f5;
}
html[data-theme="cyber"] :is(.mode-switch button.active) { background: #26505a; color: #e8ff00; box-shadow: none; }
html[data-theme="cyber"] :is(.mode-switch button) { color: #b1cbd0; }
html[data-theme="cyber"] :is(.mode-switch button.active) { color: #e8ff00; }
html[data-theme="cyber"] :is(.upload-zone, .notice, .feedback) { background: #10242a; border-color: #38616a; color: #e6f4f5; }
html[data-theme="cyber"] .upload-zone.dragging { background: #20404a; border-color: #00d9f5; }
html[data-theme="cyber"] :is(.feedback.correct, .feedback.incorrect) { background: #17333a; border: 1px solid #00d9f5; }
html[data-theme="cyber"] .feedback.incorrect { border-color: #ff79d4; }
html[data-theme="cyber"] :is(.hero p, .section-heading p, .upload-zone p, .card-bottom, .grid-option, .notice p, .tv-stretch-label, .tv-tools p, .tv-fact p, .tv-signal p, .tv-quiz > p, .image-card .card-tag, .jumper-controls label, footer) { color: #b1cbd0; }
html[data-theme="cyber"] :is(.step-label, .select-label, .stats div span, .range-row span, .range-ticks, .brand small, .tv-size-screen figcaption span, .tv-resolution) { color: #a9c2ca; }
html[data-theme="cyber"] :is(.hint-button, .notice-icon, .tv-quiz h2 span, .section-heading h2 span) { color: #00d9f5; }
html[data-theme="cyber"] :is(.stats div, .image-card) { border-color: #38616a; }
html[data-theme="cyber"] .tv-answers button:hover { background: #20404a; border-color: #00d9f5; }
html[data-theme="cyber"] :is(input[type="range"], input[type="checkbox"]) { accent-color: #e8ff00; }
html[data-theme="cyber"] :is(button, select, input, summary):focus-visible { outline: 3px solid #e8ff00; outline-offset: 3px; }
html[data-theme="cyber"] .upload-zone .upload-error { color: #ff9cde; }
html[data-theme="cyber"] #theme-toggle { border-color: #e8ff00; color: #e8ff00; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="cyber"] *, html[data-theme="cyber"] *::before, html[data-theme="cyber"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}