/* THE GOD TERMINAL — popup scenes 06–10: nap schedule, moonbeams, mascot,
 * word puzzle, tidy desktop. Each scene's DOM lives in a container-query root
 * so it reads well from a 230px mobile window up to a 680px desktop one. */

@keyframes sc2-rise-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes sc2-sweep-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes sc2-breathe {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes sc2-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes sc2-glint {
  from { transform: translateX(-120%) skewX(-20deg); }
  to { transform: translateX(320%) skewX(-20deg); }
}

/* ═════════════ 06 · Office Nap Schedule ═════════════ */
.sc-nap-schedule-root {
  position: relative;
  container-type: inline-size;
  display: grid;
  gap: 0.75rem;
  overflow: hidden;
  border-radius: 6px;
}
.sc-nap-schedule-list { display: grid; gap: 0.3rem; transition: opacity 600ms ease; }
.sc-nap-schedule-row {
  display: grid;
  grid-template-columns: 1.75rem 15ch minmax(3rem, 1fr) 12.5ch 0.55rem;
  grid-template-areas: "icon name bar status led";
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  animation: sc2-rise-in 380ms cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: calc(var(--i) * 45ms);
  transition: background-color 700ms ease, border-color 700ms ease;
}
.sc-nap-schedule-icon {
  grid-area: icon;
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  transform-origin: 50% 85%;
  transition: filter 700ms ease;
}
.sc-nap-schedule-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  transition: color 700ms ease;
}
.sc-nap-schedule-bar {
  grid-area: bar;
  position: relative;
  height: 0.55rem;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.sc-nap-schedule-fill, .sc-nap-schedule-ghost {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  border-radius: inherit;
  animation: sc2-sweep-in 340ms cubic-bezier(.3, 1, .4, 1) both;
  animation-delay: calc(var(--i) * 40ms + 40ms);
}
.sc-nap-schedule-ghost { background: var(--text-bright); opacity: 0.85; }
.sc-nap-schedule-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, var(--bg)), var(--good));
  box-shadow: 0 0 10px color-mix(in srgb, var(--good) 70%, transparent);
}
.sc-nap-schedule-status {
  grid-area: status;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--good);
  text-shadow: var(--text-glow);
  font-variant-numeric: tabular-nums;
}
.sc-nap-schedule-pct { color: var(--text-bright); }
.sc-nap-schedule-led {
  grid-area: led;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}

.sc-nap-schedule-row.is-draining .sc-nap-schedule-status { color: var(--warn); }
.sc-nap-schedule-row.is-napping {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.sc-nap-schedule-row.is-napping .sc-nap-schedule-icon { filter: grayscale(0.65) brightness(0.8); }
.sc-nap-schedule-row.is-napping .sc-nap-schedule-name { color: var(--dim); text-shadow: none; }
.sc-nap-schedule-row.is-napping .sc-nap-schedule-status { color: var(--dim); font-style: italic; text-shadow: none; }
.sc-nap-schedule-row.is-napping .sc-nap-schedule-pct { color: var(--dim); }
.sc-nap-schedule-row.is-napping .sc-nap-schedule-led {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: sc2-breathe 2.2s ease-in-out infinite;
}

.sc-nap-schedule-z {
  position: absolute;
  z-index: 2;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-2);
  text-shadow: 0 0 calc(10px * var(--glow-k) + 2px) var(--accent-2), 0 0 1px var(--bg);
  pointer-events: none;
}

.sc-nap-schedule-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.65rem;
  transition: opacity 500ms ease;
}
.sc-nap-schedule-foot-k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.sc-nap-schedule-pips { display: flex; gap: 0.35rem; flex: 1; }
.sc-nap-schedule-pip {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--good);
  box-shadow: 0 0 8px color-mix(in srgb, var(--good) 70%, transparent);
  transition: background-color 500ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(.2, 1.6, .4, 1);
}
.sc-nap-schedule-pip.is-off {
  background: color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: none;
  transform: scale(0.75);
}
.sc-nap-schedule-count {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  font-variant-numeric: tabular-nums;
}

/* Night falls: the office dims and a moon comes out. */
.sc-nap-schedule-night {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1rem;
  text-align: center;
  pointer-events: none;
  /* Night: a soft moonlit pool in the middle so the banner reads over the sleeping rows. */
  background:
    radial-gradient(55% 60% at 50% 48%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 75%),
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--bg) 82%, transparent), transparent),
    color-mix(in srgb, var(--bg) 58%, transparent);
  opacity: 0;
  transition: opacity 550ms ease;
}
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-night { opacity: 1; }
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-list { opacity: 0.28; }
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-foot { opacity: 0; }
.sc-nap-schedule-moon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: inset -0.85rem 0.4rem 0 0 var(--text-bright);
  filter: drop-shadow(0 0 calc(12px * var(--glow-k) + 4px) var(--glow));
  transform: rotate(-60deg) translateY(14px) scale(0.6);
  opacity: 0;
  transition: transform 800ms cubic-bezier(.2, 1.4, .3, 1) 60ms, opacity 450ms ease 60ms;
}
.sc-nap-schedule-banner {
  display: grid;
  gap: 0.2rem;
  text-transform: uppercase;
  transform: translateY(10px) scale(0.9);
  opacity: 0;
  transition: transform 650ms cubic-bezier(.2, 1.5, .3, 1) 180ms, opacity 400ms ease 180ms;
}
.sc-nap-schedule-banner-k {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--dim);
}
.sc-nap-schedule-banner-v {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  text-shadow: 0 0 calc(16px * var(--glow-k) + 3px) var(--glow), 0 0 2px var(--text);
}
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-moon { transform: rotate(-24deg); opacity: 1; }
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-banner { transform: none; opacity: 1; }
.sc-nap-schedule-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-bright);
  box-shadow: 0 0 6px var(--glow);
  opacity: 0;
  transform: scale(var(--s));
}
.sc-nap-schedule-root.is-asleep .sc-nap-schedule-star { animation: sc2-twinkle 1.6s ease-in-out var(--d) infinite both; }

@container (max-width: 459px) {
  .sc-nap-schedule-row {
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    grid-template-areas: "icon name name" "icon bar status";
    row-gap: 0.25rem;
    column-gap: 0.55rem;
    padding: 0.35rem 0.5rem;
  }
  .sc-nap-schedule-icon { font-size: 1.15rem; }
  .sc-nap-schedule-name { font-size: 0.875rem; }
  .sc-nap-schedule-status { font-size: 0.8rem; }
  .sc-nap-schedule-bar { height: 0.45rem; }
  .sc-nap-schedule-led { display: none; }
  .sc-nap-schedule-foot { padding: 0 0.5rem; }
  .sc-nap-schedule-banner-v { font-size: 1.4rem; }
}

html[data-reduced-motion="on"] .sc-nap-schedule-row,
html[data-reduced-motion="on"] .sc-nap-schedule-fill,
html[data-reduced-motion="on"] .sc-nap-schedule-ghost { animation-duration: 1ms; }

/* ═════════════ 07 · Bottling Moonbeams ═════════════ */
.sc-moonbeams-root {
  container-type: inline-size;
  display: grid;
  gap: 0.55rem;
}
/* Two columns, never wrapped: the status stays right-aligned (its punch grows leftward
 * from the right edge) and simply breaks onto two lines in narrow windows. */
.sc-moonbeams-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 1rem;
  padding: 0 0.15rem;
}
.sc-moonbeams-readout {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.78;
  color: var(--text-bright);
  text-shadow: 0 0 calc(18px * var(--glow-k) + 4px) var(--glow), 0 0 2px var(--text);
  font-variant-numeric: tabular-nums;
}
.sc-moonbeams-num { display: inline-block; min-width: 1.5ch; text-align: right; }
.sc-moonbeams-unit { margin-left: 0.06em; font-size: 0.55em; color: var(--dim); text-shadow: none; }
.sc-moonbeams-status {
  justify-self: end;
  margin-bottom: 0.2rem;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  transform-origin: 100% 100%;
  transition: color 300ms ease, text-shadow 300ms ease;
}
.sc-moonbeams-status::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.55rem;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  vertical-align: 0.1em;
  animation: sc2-breathe 900ms ease-in-out infinite;
}
.sc-moonbeams-root.is-bottled .sc-moonbeams-status {
  font-size: 1.25rem;
  color: var(--text-bright);
  text-shadow: 0 0 calc(14px * var(--glow-k) + 3px) var(--glow), 0 0 2px var(--text);
}
.sc-moonbeams-root.is-bottled .sc-moonbeams-status::after { display: none; }
.sc-moonbeams-canvas { display: block; width: 100%; height: 12rem; }

@container (max-width: 380px) {
  .sc-moonbeams-head { gap: 0.6rem; }
  .sc-moonbeams-readout { font-size: 3.4rem; }
  .sc-moonbeams-status { font-size: 0.75rem; letter-spacing: 0.1em; }
  .sc-moonbeams-root.is-bottled .sc-moonbeams-status { font-size: 1rem; }
}

/* ═════════════ 08 · ASCII Mascot ═════════════ */
@keyframes sc2-line-on {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(2.6); }
  70% { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes sc2-idle {
  0%, 100% { scale: 1; }
  50% { scale: 1.015; }
}
.sc-mascot-root { container-type: inline-size; }
.sc-mascot-stage {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.35rem 0.25rem 0.5rem;
}
.sc-mascot-face {
  position: relative;
  flex: none;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.12;
  white-space: pre;
  color: var(--text);
  text-shadow: 0 0 calc(10px * var(--glow-k) + 1px) var(--glow);
  transform-origin: 50% 92%;
  animation: sc2-idle 2.6s ease-in-out 700ms infinite;
}
.sc-mascot-line {
  display: block;
  animation: sc2-line-on 300ms ease-out both;
  animation-delay: calc(var(--i) * 45ms + 80ms);
}
.sc-mascot-eye {
  display: inline-block;
  color: var(--text-bright);
  text-shadow: 0 0 calc(12px * var(--glow-k) + 3px) var(--glow), 0 0 2px var(--text-bright);
  transition: transform 110ms cubic-bezier(.2, 1.6, .4, 1);
}
.sc-mascot-eye.is-shut { transform: translateY(0.12em) scale(1.2, 0.85); }
.sc-mascot-whisker { color: var(--dim); text-shadow: none; }
.sc-mascot-mouth { color: var(--accent-3); text-shadow: 0 0 8px var(--accent-3); }
.sc-mascot-cheek { position: relative; display: inline-block; }
.sc-mascot-cheek::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.9em;
  height: 0.95em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bad) 80%, transparent), transparent);
  transform: translate(-50%, -45%) scale(0.4);
  opacity: 0;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, 1.6, .4, 1);
}
.sc-mascot-root.is-blushing .sc-mascot-cheek::after { opacity: 0.85; transform: translate(-50%, -45%) scale(1); }
.sc-mascot-spark {
  position: absolute;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  background: var(--accent-3);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--accent-3));
}

.sc-mascot-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 9%, var(--panel-strong));
  box-shadow: 0 0 calc(18px * var(--glow-k)) -4px var(--glow), inset 0 0 18px -10px var(--glow);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  transform-origin: 0 50%;
  opacity: 0;
  scale: 0.6;
  transition: opacity 180ms ease, scale 380ms cubic-bezier(.2, 1.6, .4, 1);
}
.sc-mascot-bubble.is-on { opacity: 1; scale: 1; }
/* Tail: a rotated square straddling the left edge, pointing at the cat. */
.sc-mascot-bubble::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--line-bright);
  border-bottom: 1px solid var(--line-bright);
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.sc-mascot-say + .sc-mascot-say { color: var(--text); font-style: italic; }
.sc-mascot-rest { visibility: hidden; }
.sc-mascot-caret { position: relative; display: inline-block; width: 0; }
.sc-mascot-say.is-typing .sc-mascot-caret::after {
  content: '';
  position: absolute;
  left: 1px;
  bottom: -0.2em;
  width: 0.55em;
  height: 1.15em;
  background: var(--cursor);
  box-shadow: 0 0 8px var(--glow);
}

@container (max-width: 400px) {
  .sc-mascot-stage { flex-direction: column; align-items: stretch; gap: 1rem; }
  .sc-mascot-face { align-self: center; font-size: clamp(0.85rem, 7.6cqi, 1.3rem); }
  .sc-mascot-bubble { order: -1; transform-origin: 50% 100%; font-size: 0.95rem; }
  .sc-mascot-bubble::before { left: 50%; top: auto; bottom: -7px; transform: translateX(-50%) rotate(-45deg); }
}

html[data-reduced-motion="on"] .sc-mascot-face { animation: none; }
html[data-reduced-motion="on"] .sc-mascot-line { animation-duration: 1ms; }

/* ═════════════ 09 · Extremely Serious Word Puzzle ═════════════ */
/* Green / yellow / gray must stay recognisable in every palette, so these three
 * are fixed hues gently tinted toward the palette's text colour. */
@keyframes sc2-tile-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes sc2-key {
  0% { scale: 1; }
  40% { scale: 1.12; }
  100% { scale: 1; }
}
.sc-word-puzzle-root {
  --wp-exact: color-mix(in srgb, #3ccf74 84%, var(--text));
  --wp-near: color-mix(in srgb, #f0c23c 86%, var(--text));
  --wp-miss: color-mix(in srgb, #707b85 48%, var(--panel-strong));
  container-type: inline-size;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding: 0.15rem 0 0.25rem;
}
html[data-palette="lavender"] .sc-word-puzzle-root { --wp-exact: #7fd3a0; --wp-near: #e6cc80; }
html[data-palette="midnight"] .sc-word-puzzle-root { --wp-exact: #519d6f; --wp-near: #b49b56; --wp-miss: #323c43; }
.sc-word-puzzle-board { display: grid; gap: 0.4rem; width: min(100%, 17.5rem); }
.sc-word-puzzle-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.sc-word-puzzle-tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: clamp(1.1rem, 7cqi, 1.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  animation: sc2-tile-in 320ms cubic-bezier(.2, 1.5, .4, 1) both;
  animation-delay: calc(var(--d) * 28ms);
  transition: border-color 160ms ease;
}
.sc-word-puzzle-row.is-active .sc-word-puzzle-tile:not(.is-exact, .is-near, .is-miss) { border-color: var(--line-bright); }
.sc-word-puzzle-tile.is-typed { animation: sc2-key 160ms ease-out; }
.sc-word-puzzle-tile.is-exact,
.sc-word-puzzle-tile.is-near,
.sc-word-puzzle-tile.is-miss {
  border-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  text-shadow: none;
}
.sc-word-puzzle-tile.is-exact {
  background-color: var(--wp-exact);
  color: color-mix(in srgb, var(--wp-exact) 18%, #000);
  box-shadow: 0 0 calc(16px * var(--glow-k) + 4px) -5px var(--wp-exact);
}
.sc-word-puzzle-tile.is-near {
  background-color: var(--wp-near);
  color: color-mix(in srgb, var(--wp-near) 18%, #000);
  box-shadow: 0 0 calc(16px * var(--glow-k) + 4px) -5px var(--wp-near);
}
.sc-word-puzzle-tile.is-miss {
  background-color: var(--wp-miss);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 55%);
  color: color-mix(in srgb, var(--text-bright) 70%, transparent);
}
.sc-word-puzzle-status {
  min-height: 1.8rem;
  display: grid;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.sc-word-puzzle-root.is-solved .sc-word-puzzle-status {
  /* Container-relative so the punched-up line still fits the narrowest mobile window. */
  font-size: clamp(1rem, 7.5cqi, 1.4rem);
  letter-spacing: 0.12em;
  color: var(--wp-exact);
  text-shadow: 0 0 calc(14px * var(--glow-k) + 4px) color-mix(in srgb, var(--wp-exact) 70%, transparent);
}

html[data-reduced-motion="on"] .sc-word-puzzle-tile { animation-duration: 1ms; }

/* ═════════════ 10 · Tidying the Desktop ═════════════ */
@keyframes sc2-stamp {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--rot)) scale(2.4);
    animation-timing-function: cubic-bezier(.55, 0, 1, .45);
  }
  66% {
    opacity: 1;
    transform: translateY(-50%) rotate(var(--rot)) scale(0.9);
    animation-timing-function: cubic-bezier(.2, .8, .3, 1);
  }
  100% { opacity: 1; transform: translateY(-50%) rotate(var(--rot)) scale(1); }
}
.sc-tidy-desktop-root {
  container-type: inline-size;
  display: grid;
  gap: 0.85rem;
}
.sc-tidy-desktop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sc-tidy-desktop-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  animation: sc2-rise-in 360ms cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: calc(var(--i) * 40ms);
  transition: background-color 400ms ease;
}
.sc-tidy-desktop-icon {
  flex: none;
  width: 1.2rem;
  height: 1.45rem;
  filter: drop-shadow(0 0 calc(5px * var(--glow-k)) currentColor);
  transition: opacity 400ms ease;
}
.sc-tidy-desktop-icon svg { display: block; width: 100%; height: 100%; }
.sc-tidy-desktop-name { min-width: 0; overflow-wrap: anywhere; }
.sc-tidy-desktop-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  background-image: linear-gradient(var(--text-bright), var(--text-bright));
  background-repeat: no-repeat;
  background-position: 0 56%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 170ms cubic-bezier(.3, .7, .3, 1), opacity 400ms ease;
}
.sc-tidy-desktop-ext { color: var(--dim); }
.sc-tidy-desktop-row.is-struck .sc-tidy-desktop-text { background-size: 100% 2px; }
.sc-tidy-desktop-row.is-filed { background: color-mix(in srgb, var(--text) 2%, transparent); }
.sc-tidy-desktop-row.is-filed .sc-tidy-desktop-icon,
.sc-tidy-desktop-row.is-filed .sc-tidy-desktop-text { opacity: 0.42; }

.sc-tidy-desktop-stamp {
  position: absolute;
  right: calc(1.2rem + var(--nudge));
  top: 50%;
  padding: 0.15rem 0.5rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--bad) 70%, transparent);
  -webkit-mask-image: var(--ink);
  mask-image: var(--ink);
  -webkit-mask-size: 120px;
  mask-size: 120px;
  opacity: 0;
  transform: translateY(-50%) rotate(var(--rot));
  transform-origin: 72% 50%;
  pointer-events: none;
}
.sc-tidy-desktop-row.is-stamped .sc-tidy-desktop-stamp { animation: sc2-stamp 210ms both; }

.sc-tidy-desktop-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.6rem;
  padding: 0 0.65rem;
}
.sc-tidy-desktop-foot-k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.sc-tidy-desktop-meter { flex: 1; min-width: 0; }
.sc-tidy-desktop-pct {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
  font-variant-numeric: tabular-nums;
}
.sc-tidy-desktop-foot > :not(.sc-tidy-desktop-banner) { transition: opacity 300ms ease; }
.sc-tidy-desktop-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-transform: uppercase;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2, 1.5, .4, 1);
}
.sc-tidy-desktop-banner::before,
.sc-tidy-desktop-banner::after {
  content: '';
  width: 0.85rem;
  height: 0.85rem;
  background: var(--accent-3);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 4px var(--accent-3));
}
.sc-tidy-desktop-banner-k {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--dim);
}
.sc-tidy-desktop-banner-v {
  position: relative;
  overflow: hidden;
  padding: 0 0.15em;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-bright);
  text-shadow: 0 0 calc(16px * var(--glow-k) + 3px) var(--glow), 0 0 2px var(--text);
}
/* One glint sweeps across PRISTINE as it lands. */
.sc-tidy-desktop-banner-v::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-foot > :not(.sc-tidy-desktop-banner) { opacity: 0; }
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-banner { opacity: 1; transform: none; }
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-banner::before,
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-banner::after { animation: sc2-twinkle 900ms ease-in-out infinite; }
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-banner::after { animation-delay: 450ms; }
.sc-tidy-desktop-root.is-pristine .sc-tidy-desktop-banner-v::after { animation: sc2-glint 700ms ease-in-out 200ms both; }

@container (max-width: 420px) {
  .sc-tidy-desktop-row { gap: 0.55rem; padding: 0.3rem 0.5rem; }
  .sc-tidy-desktop-text { font-size: 0.8rem; }
  .sc-tidy-desktop-stamp { right: calc(0.4rem + var(--nudge) * 0.5); }
  .sc-tidy-desktop-foot { padding: 0 0.5rem; }
  .sc-tidy-desktop-banner-v { font-size: 1.25rem; }
  .sc-tidy-desktop-banner-k { font-size: 0.75rem; letter-spacing: 0.16em; }
}
/* Narrowest mobile windows: names wrap under the stamps, so the stamp ink turns opaque
 * enough to read; the label sits above the meter and the banner stacks between its stars. */
@container (max-width: 320px) {
  .sc-tidy-desktop-stamp { background: color-mix(in srgb, color-mix(in srgb, var(--bad) 20%, var(--bg)) 86%, transparent); }
  .sc-tidy-desktop-foot { flex-wrap: wrap; row-gap: 0.3rem; padding-top: 0.2rem; }
  .sc-tidy-desktop-foot-k { flex-basis: 100%; }
  .sc-tidy-desktop-banner {
    display: grid;
    grid-template: "a k b" auto "a v b" auto / auto auto auto;
    place-content: center;
    column-gap: 0.6rem;
  }
  .sc-tidy-desktop-banner::before { grid-area: a; align-self: center; }
  .sc-tidy-desktop-banner::after { grid-area: b; align-self: center; }
  .sc-tidy-desktop-banner-k { grid-area: k; justify-self: center; }
  .sc-tidy-desktop-banner-v { grid-area: v; }
}

html[data-reduced-motion="on"] .sc-tidy-desktop-row { animation-duration: 1ms; }
html[data-reduced-motion="on"] .sc-tidy-desktop-row.is-stamped .sc-tidy-desktop-stamp { animation-duration: 120ms; }