/* One complete material system per palette, shared by the desk and its tools. */
body[data-direction="desktop"] {
  --desk-bg: #e2e8ef;
  --desk-glow: #f0f3f8;
  --desk-ink: #182234;
  --desk-muted: #536177;
  --desk-accent: #2543e8;
  --desk-on-accent: #fff;
  --desk-sticker: #fb7733;
  --desk-sticker-ink: #182234;
  --desk-surface: #fff;
  --desk-bar: #f5f7fb;
  --desk-border: #ced7e3;
  --desk-footer: #253fe0;
  --desk-footer-ink: #fff;
  --desk-console: #20273e;
  --desk-console-ink: #e5e9f5;
  --desk-console-muted: #abb6d1;
  --desk-console-control: #96a9ff;
  --desk-console-on-control: #15213a;
  --network-bg: #e9eeff;
  --network-ink: #253bea;
  --network-pulse: #e66826;
  --network-core: #fff;
  --network-line: #bbc5ed;
  --network-dot: #bcc6e9;
  --ink: var(--desk-ink);
  color-scheme: light;
  background: var(--desk-bg);
  color: var(--desk-ink);
}
body[data-direction="desktop"][data-palette="apricot"] {
  --desk-bg: #f5e3dc;
  --desk-glow: #fff2e9;
  --desk-ink: #46232f;
  --desk-muted: #775561;
  --desk-accent: #9d2948;
  --desk-on-accent: #fff5ed;
  --desk-sticker: #ef9875;
  --desk-sticker-ink: #492331;
  --desk-surface: #fff7f1;
  --desk-bar: #f8eae4;
  --desk-border: #dfc4c5;
  --desk-footer: #9d2948;
  --desk-footer-ink: #fff5ed;
  --desk-console: #452736;
  --desk-console-ink: #fff0e7;
  --desk-console-muted: #d8b7c1;
  --desk-console-control: #efb1bb;
  --desk-console-on-control: #452736;
  --network-bg: #f9e1df;
  --network-ink: #9d2948;
  --network-pulse: #b55327;
  --network-core: #fff7f1;
  --network-line: #ddb3bd;
  --network-dot: #dfbdc4;
}
body[data-direction="desktop"][data-palette="botanical"] {
  --desk-bg: #e1ebe1;
  --desk-glow: #f1f4e9;
  --desk-ink: #213f35;
  --desk-muted: #536d5f;
  --desk-accent: #235846;
  --desk-on-accent: #f3f4e6;
  --desk-sticker: #e3be50;
  --desk-sticker-ink: #263f34;
  --desk-surface: #f9fbf3;
  --desk-bar: #edf2e8;
  --desk-border: #c5d2bf;
  --desk-footer: #235846;
  --desk-footer-ink: #f3f4e6;
  --desk-console: #233d35;
  --desk-console-ink: #eef4e8;
  --desk-console-muted: #b0c9b8;
  --desk-console-control: #c9d78e;
  --desk-console-on-control: #233d35;
  --network-bg: #e0ecdd;
  --network-ink: #235846;
  --network-pulse: #9b6e1b;
  --network-core: #f9fbf3;
  --network-line: #b3cabb;
  --network-dot: #b1c7b8;
}
body[data-direction="desktop"][data-palette="midnight"] {
  --desk-bg: #141d31;
  --desk-glow: #22314a;
  --desk-ink: #e9efff;
  --desk-muted: #adbcd7;
  --desk-accent: #9eb6ff;
  --desk-on-accent: #142039;
  --desk-sticker: #ffae83;
  --desk-sticker-ink: #182234;
  --desk-surface: #26324a;
  --desk-bar: #2e3c56;
  --desk-border: #435372;
  --desk-footer: #263b66;
  --desk-footer-ink: #edf3ff;
  --desk-console: #172137;
  --desk-console-ink: #e5edff;
  --desk-console-muted: #a5b5d4;
  --desk-console-control: #9eb6ff;
  --desk-console-on-control: #142039;
  --network-bg: #1d2b47;
  --network-ink: #afc2ff;
  --network-pulse: #ffae83;
  --network-core: #172137;
  --network-line: #455b84;
  --network-dot: #3a4c6b;
  color-scheme: dark;
}
body[data-direction="desktop"][data-palette="ember"] {
  --desk-bg: #292025;
  --desk-glow: #443139;
  --desk-ink: #ffece3;
  --desk-muted: #d1b3b4;
  --desk-accent: #ffb56e;
  --desk-on-accent: #342329;
  --desk-sticker: #eb857e;
  --desk-sticker-ink: #342329;
  --desk-surface: #48353c;
  --desk-bar: #503c42;
  --desk-border: #73515a;
  --desk-footer: #6a4042;
  --desk-footer-ink: #fff0e5;
  --desk-console: #30232c;
  --desk-console-ink: #fff0e5;
  --desk-console-muted: #d4b1bf;
  --desk-console-control: #ffb56e;
  --desk-console-on-control: #30232c;
  --network-bg: #3b2933;
  --network-ink: #ffb56e;
  --network-pulse: #ebaaa5;
  --network-core: #30232c;
  --network-line: #78515c;
  --network-dot: #684650;
  color-scheme: dark;
}
body[data-direction="desktop"][data-palette="ultraviolet"] {
  --desk-bg: #271d39;
  --desk-glow: #43305e;
  --desk-ink: #f4eaff;
  --desk-muted: #ccbadf;
  --desk-accent: #d5b3ff;
  --desk-on-accent: #30203f;
  --desk-sticker: #ace9d0;
  --desk-sticker-ink: #30203f;
  --desk-surface: #483358;
  --desk-bar: #523d64;
  --desk-border: #755787;
  --desk-footer: #674887;
  --desk-footer-ink: #f8efff;
  --desk-console: #302040;
  --desk-console-ink: #f4eaff;
  --desk-console-muted: #cdb9e2;
  --desk-console-control: #ace9d0;
  --desk-console-on-control: #302040;
  --network-bg: #39284b;
  --network-ink: #d5b3ff;
  --network-pulse: #ace9d0;
  --network-core: #302040;
  --network-line: #74538d;
  --network-dot: #684881;
  color-scheme: dark;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body[data-direction="desktop"] .desktop-page {
  position: relative;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 15%,
    var(--desk-glow),
    var(--desk-bg) 60%
  );
}
body[data-direction="desktop"] :focus-visible {
  outline: 2px solid var(--desk-accent);
  outline-offset: 5px;
}
body[data-direction="desktop"] .desk-brand-icon {
  border-color: var(--desk-muted);
}
body[data-direction="desktop"] .desk-card {
  background: var(--desk-surface);
  border-color: color-mix(in srgb, var(--desk-border), var(--desk-surface) 45%);
  box-shadow:
    0 3px 4px #0000000c,
    0 18px 38px #00000012;
}
body[data-direction="desktop"] .window-bar {
  background: var(--desk-bar);
  border-color: var(--desk-border);
  color: var(--desk-muted);
  gap: 12px;
}
body[data-direction="desktop"] .window-lights i {
  background: var(--desk-border);
}
body[data-direction="desktop"] .window-lights i:first-child {
  background: var(--desk-sticker);
}
.window-grip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  cursor: grab;
  touch-action: none;
}
.window-grip:active {
  cursor: grabbing;
}
.window-grip .micro {
  font-size: 8px;
  white-space: nowrap;
}
.grip-dots {
  font-size: 15px;
  opacity: 0.6;
}
.window-grip:disabled {
  cursor: default;
  opacity: 1;
}
.window-grip:disabled .grip-dots {
  visibility: hidden;
}
body[data-direction="desktop"] .desk-game {
  background: #172529;
  color: #fff;
}
body[data-direction="desktop"] .desk-game .window-bar {
  background: #253235;
  border-color: #ffffff25;
  color: #d3dedf;
}
body[data-direction="desktop"] .desk-game .window-lights i {
  background: #6c7c7d;
}
body[data-direction="desktop"] .desk-game .window-lights i:first-child {
  background: var(--desk-sticker);
}
body[data-direction="desktop"] .desk-intro-mark,
body[data-direction="desktop"] .work-word,
body[data-direction="desktop"] .about-stamp {
  color: var(--desk-accent);
}
body[data-direction="desktop"] .desk-intro p {
  color: var(--desk-muted);
}
body[data-direction="desktop"] .desk-intro > .contact-link {
  background: var(--desk-accent);
  color: var(--desk-on-accent);
  box-shadow: 0 3px 7px #00000016;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.desk-intro > .contact-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px #00000025;
}
.desk-word {
  display: inline-block;
}
.word-caret {
  margin-left: -0.03em;
}
.desk-play-hint {
  display: block;
  margin-top: 26px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  line-height: 1.7;
  color: var(--desk-muted);
}
.desk-play-hint > span {
  font-size: 15px;
  vertical-align: middle;
  margin-right: 4px;
  color: var(--desk-accent);
}
body[data-direction="desktop"] .desk-discipline {
  background: transparent;
  box-shadow: none;
  padding: 0;
  height: 130px;
  perspective: 650px;
  text-align: left;
  isolation: isolate;
}
.sticker-front,
.sticker-back {
  position: absolute;
  inset: 0;
  padding: 15px 20px;
  background: var(--desk-sticker);
  color: var(--desk-sticker-ink);
  box-shadow: 0 5px 8px #00000020;
  backface-visibility: hidden;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sticker-back {
  transform: rotateY(180deg);
}
.desk-discipline[aria-pressed="true"] .sticker-front {
  transform: rotateY(-180deg);
}
.desk-discipline[aria-pressed="true"] .sticker-back {
  transform: rotateY(0deg);
}
.desk-discipline .sticker-front .sticker-small,
.desk-discipline .sticker-back .sticker-small {
  position: static;
  display: block;
  font:
    8px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.desk-discipline .sticker-front .sticker-type,
.desk-discipline .sticker-back .sticker-type {
  position: static;
  font:
    800 39px/0.92 "Bricolage Grotesque",
    sans-serif;
  letter-spacing: -0.06em;
}
.desk-discipline .sticker-back .sticker-type {
  font-size: 30px;
}
.sticker-type > span {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 43px;
}
.desk-discipline:hover .sticker-type > span {
  animation: sticker-spin 2s linear infinite;
}
@keyframes sticker-spin {
  to {
    rotate: 360deg;
  }
}
body[data-direction="desktop"] .clock-face {
  border-color: var(--desk-border);
  background: repeating-conic-gradient(
    var(--desk-muted) 0deg 1deg,
    transparent 1deg 30deg
  );
  box-shadow: inset 0 0 0 5px var(--desk-surface);
}
body[data-direction="desktop"] .clock-face:before {
  background: var(--desk-surface);
}
body[data-direction="desktop"] .clock-hour,
body[data-direction="desktop"] .clock-minute {
  background: var(--desk-ink);
}
body[data-direction="desktop"] .clock-second,
body[data-direction="desktop"] .clock-face > span {
  background: var(--desk-accent);
}
body[data-direction="desktop"] .desk-case-link {
  border-color: var(--desk-border);
}
body[data-direction="desktop"] .desk-parallel .network-caption,
body[data-direction="desktop"] .network {
  background: var(--network-bg);
  color: var(--network-ink);
}
body[data-direction="desktop"] .network-caption {
  background: var(--network-bg);
  border-color: var(--network-line);
}
body[data-direction="desktop"] .bot-window {
  background: var(--desk-console);
  border-color: var(--desk-border);
  color: var(--desk-console-ink);
}
body[data-direction="desktop"] .bot-top {
  border-color: color-mix(in srgb, var(--desk-console-ink), transparent 88%);
}
body[data-direction="desktop"] .bot-top > div > span,
body[data-direction="desktop"] .demo-label,
body[data-direction="desktop"] .message > span {
  color: var(--desk-console-muted);
}
body[data-direction="desktop"] .bot-symbol {
  background: var(--desk-console-control);
  color: var(--desk-console-on-control);
}
body[data-direction="desktop"] .message:before {
  background: var(--desk-sticker);
  color: var(--desk-sticker-ink);
}
body[data-direction="desktop"] .message.bot:before {
  background: var(--desk-console-control);
  color: var(--desk-console-on-control);
}
body[data-direction="desktop"] .message.bot b {
  background: color-mix(in srgb, var(--desk-console-control), transparent 75%);
  color: var(--desk-console-ink);
}
body[data-direction="desktop"] .bot-command {
  background: color-mix(
    in srgb,
    var(--desk-console),
    var(--desk-console-ink) 10%
  );
}
body[data-direction="desktop"] .bot-command button {
  background: var(--desk-console-control);
  color: var(--desk-console-on-control);
}
body[data-direction="desktop"] .desk-tags span {
  background: color-mix(in srgb, var(--desk-accent), var(--desk-bg) 88%);
}
body[data-direction="desktop"] .desk-footer {
  background: var(--desk-footer);
  color: var(--desk-footer-ink);
  padding-bottom: 120px;
}
body[data-direction="desktop"] .desk-footer h2 em {
  color: var(--desk-footer-ink);
}
body[data-direction="desktop"] .project-dialog,
body[data-direction="desktop"] .contact-dialog {
  background: var(--desk-surface);
  color: var(--desk-ink);
  border: 1px solid var(--desk-border);
}
body[data-direction="desktop"] .detail-tags > span {
  background: color-mix(in srgb, var(--desk-accent), var(--desk-surface) 88%);
  border-color: var(--desk-border);
}
body[data-direction="desktop"] .detail-copy section {
  border-color: var(--desk-border);
}
body[data-direction="desktop"] .detail-visit {
  background: var(--desk-accent);
  color: var(--desk-on-accent);
}
body[data-direction="desktop"] .contact-placeholder {
  color: var(--desk-muted);
  border-color: var(--desk-border);
  background: var(--desk-bar);
}
body[data-direction="desktop"] .detail-heading > p,
body[data-direction="desktop"] .detail-copy section p,
body[data-direction="desktop"] .contact-dialog p {
  color: var(--desk-muted);
}
body[data-direction="desktop"] .detail-copy > div {
  border-color: var(--desk-border);
}
body[data-direction="desktop"] .dialog-close {
  background: var(--desk-bar);
  border-color: var(--desk-border);
  color: var(--desk-ink);
}
body[data-direction="desktop"] .detail-back {
  border-color: var(--desk-muted);
}
/* A compact tool dock replaces the first-viewport comparison bar. */
.desktop-dock {
  position: fixed;
  z-index: 30;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--desk-border), transparent 20%);
  border-radius: 17px;
  background: color-mix(in srgb, var(--desk-surface), transparent 7%);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 35px #0000001b;
  white-space: nowrap;
}
.dock-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px 0 6px;
  font:
    8px "IBM Plex Mono",
    monospace;
  color: var(--desk-muted);
}
.dock-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--desk-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--desk-accent), transparent 92%);
}
.dock-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 10px;
  transition:
    background 0.2s,
    transform 0.2s;
  color: var(--desk-ink);
}
.dock-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--desk-accent);
}
.dock-button:hover {
  background: var(--desk-bar);
  transform: translateY(-2px);
}
.dock-button[aria-expanded="true"] {
  background: var(--desk-accent);
  color: var(--desk-on-accent);
}
.dock-button[aria-expanded="true"] svg {
  color: inherit;
}
.dock-palette-name {
  font:
    7px "IBM Plex Mono",
    monospace;
  opacity: 0.75;
  margin-left: 1px;
}
.dock-separator {
  height: 22px;
  width: 1px;
  background: var(--desk-border);
  margin: 0 3px;
}
.dock-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.desktop-panel {
  position: fixed;
  inset: auto 24px 94px auto;
  width: 430px;
  max-width: calc(100% - 28px);
  max-height: calc(100dvh - 120px);
  margin: 0;
  border: 1px solid var(--desk-border);
  border-radius: 20px;
  padding: 22px;
  background: var(--desk-surface);
  color: var(--desk-ink);
  box-shadow: 0 20px 75px #00000035;
  overflow-y: auto;
}
.desktop-panel::backdrop {
  background: transparent;
}
.desktop-panel:popover-open {
  animation: panel-arrive 0.3s var(--ease) both;
}
@keyframes panel-arrive {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 23px;
}
.panel-header .micro {
  font-size: 7px;
  color: var(--desk-muted);
}
.panel-header h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.045em;
  margin-top: 7px;
  line-height: 1.1;
}
.panel-header > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--desk-border);
  border-radius: 50%;
  font-size: 23px;
  flex-shrink: 0;
}
.palette-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.palette-group h3 {
  font:
    9px "IBM Plex Mono",
    monospace;
  margin: 0 0 12px;
  color: var(--desk-muted);
}
.palette-group h3 > span {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 4px;
}
.palette-choice {
  display: block;
  text-align: left;
  width: 100%;
  border: 1px solid var(--desk-border);
  border-radius: 10px;
  padding: 7px 7px 10px;
  margin-bottom: 10px;
  background: var(--desk-bar);
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.palette-choice:hover {
  transform: translateY(-2px);
  border-color: var(--desk-accent);
}
.palette-choice[aria-pressed="true"] {
  border-color: var(--desk-accent);
  box-shadow: 0 0 0 1px var(--desk-accent);
}
.palette-swatches {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  height: 30px;
  margin-bottom: 8px;
}
.palette-swatches i {
  flex: 1;
}
.palette-swatches i:first-child {
  flex: 1.8;
}
.palette-name {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
}
.palette-check {
  visibility: hidden;
  color: var(--desk-accent);
}
.palette-choice[aria-pressed="true"] .palette-check {
  visibility: visible;
}
.palette-note {
  display: block;
  font-size: 8px;
  margin: 3px 3px 0;
  color: var(--desk-muted);
}
.palette-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid var(--desk-border);
  font-size: 9px;
  color: var(--desk-muted);
}
.palette-footer button {
  color: var(--desk-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.terminal-panel {
  background: var(--desk-console);
  color: var(--desk-console-ink);
  width: 460px;
}
.terminal-panel .panel-header {
  margin-bottom: 16px;
}
.terminal-panel .panel-header .micro,
.terminal-muted,
.terminal-footnote {
  color: var(--desk-console-muted);
}
.terminal-panel .panel-header h2 {
  font:
    13px "IBM Plex Mono",
    monospace;
  color: var(--desk-console-control);
  margin-top: 12px;
  letter-spacing: -0.04em;
}
.terminal-panel .panel-header > button {
  border-color: color-mix(in srgb, var(--desk-console-muted), transparent 50%);
}
.terminal-output {
  height: 225px;
  overflow: auto;
  font:
    11px/1.7 "IBM Plex Mono",
    monospace;
  scrollbar-color: var(--desk-console-muted) var(--desk-console);
}
.terminal-output p {
  margin: 5px 0 12px;
}
.terminal-accent,
.terminal-command-line {
  color: var(--desk-console-control);
}
.terminal-entry {
  padding: 6px 0;
  border-top: 1px solid
    color-mix(in srgb, var(--desk-console-muted), transparent 85%);
}
.terminal-output button {
  color: var(--desk-console-control);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.terminal-projects {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
}
.terminal-projects button {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.terminal-shortcuts {
  display: flex;
  gap: 7px;
  margin-top: 15px;
}
.terminal-shortcuts button {
  font:
    9px "IBM Plex Mono",
    monospace;
  padding: 6px 9px;
  border: 1px solid
    color-mix(in srgb, var(--desk-console-muted), transparent 60%);
  border-radius: 5px;
  color: var(--desk-console-ink);
}
.terminal-shortcuts button:hover {
  background: color-mix(in srgb, var(--desk-console-control), transparent 85%);
}
.terminal-form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid
    color-mix(in srgb, var(--desk-console-muted), transparent 65%);
  margin-top: 15px;
  padding-top: 12px;
}
.terminal-form label {
  color: var(--desk-console-control);
  font:
    16px "IBM Plex Mono",
    monospace;
}
.terminal-form input {
  font:
    11px "IBM Plex Mono",
    monospace;
  min-width: 0;
  flex: 1;
  color: var(--desk-console-ink);
  background: transparent;
  border: 0;
  padding: 10px 0;
  border-radius: 0;
}
.terminal-form input::placeholder {
  color: var(--desk-console-muted);
  opacity: 0.75;
}
.terminal-form button {
  width: 33px;
  height: 30px;
  border-radius: 5px;
  background: var(--desk-console-control);
  color: var(--desk-console-on-control);
  font-size: 17px;
}
.terminal-footnote {
  display: block;
  font:
    7px "IBM Plex Mono",
    monospace;
  margin-top: 13px;
}
@media (min-width: 851px) {
  body[data-direction="desktop"] [data-desk-window] {
    --desk-angle: -2deg;
    position: relative;
    transform: translate(var(--drag-x, 0px), var(--drag-y, 0px))
      rotate(var(--desk-angle));
    animation: desk-window-arrive 0.8s var(--ease) both;
    animation-delay: 0.1s;
  }
  body[data-direction="desktop"] .desk-software {
    --desk-angle: 2deg;
    animation-delay: 0.18s;
  }
  body[data-direction="desktop"] .desk-parallel {
    --desk-angle: -1.5deg;
    animation-delay: 0.26s;
  }
  body[data-direction="desktop"] [data-desk-window]:hover {
    transform: translate(var(--drag-x, 0px), var(--drag-y, 0px))
      rotate(var(--desk-angle));
  }
  body[data-direction="desktop"] [data-desk-window].is-dragging {
    transition: none;
    box-shadow:
      0 10px 25px #00000025,
      0 35px 65px #00000025;
  }
  @keyframes desk-window-arrive {
    from {
      opacity: 0;
      translate: 0 25px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}
@media (max-width: 1100px) {
  body[data-direction="desktop"] .desk-discipline {
    height: 117px;
  }
  .sticker-front,
  .sticker-back {
    padding: 13px 17px;
  }
  .desk-discipline .sticker-front .sticker-type {
    font-size: 33px;
  }
  .desk-discipline .sticker-back .sticker-type {
    font-size: 25px;
  }
  .sticker-type > span {
    font-size: 32px;
    right: 7px;
  }
  .dock-status {
    display: none;
  }
}
@media (max-width: 850px) {
  .desk-play-hint {
    display: none;
  }
}
@media (max-width: 600px) {
  .desktop-dock {
    bottom: 14px;
    gap: 2px;
    padding: 6px;
    max-width: calc(100% - 24px);
    border-radius: 14px;
  }
  .dock-button {
    flex-direction: column;
    gap: 4px;
    font-size: 8px;
    padding: 6px 12px;
    min-width: 54px;
  }
  .dock-palette-name {
    display: none;
  }
  .dock-separator {
    margin: 0 1px;
  }
  .desktop-panel {
    bottom: 92px;
    right: 14px;
    padding: 18px;
    border-radius: 16px;
  }
  .panel-header h2 {
    font-size: 22px;
  }
  .palette-groups {
    gap: 10px;
  }
  .palette-note {
    font-size: 7px;
  }
  .palette-footer {
    font-size: 8px;
    gap: 10px;
  }
  .terminal-output {
    height: 190px;
    font-size: 10px;
  }
  .desktop-dock .dock-button span {
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .dock-button {
    padding: 6px 8px;
  }
  .palette-panel {
    padding: 14px;
  }
  .panel-header h2 {
    font-size: 20px;
  }
  .palette-note {
    letter-spacing: -0.02em;
  }
}
body[data-direction="desktop"][data-motion="off"] *,
body[data-direction="desktop"][data-motion="off"] *:before,
body[data-direction="desktop"][data-motion="off"] *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .desktop-panel:popover-open,
  .desk-discipline:hover .sticker-type > span {
    animation: none;
  }
  .sticker-front,
  .sticker-back {
    transition: none;
  }
}