.slow-look-page {
  --slow-look-ink: var(--color-base-content);
  --slow-look-line: color-mix(in oklab, var(--color-secondary) 18%, var(--color-base-300));
}

body.slow-look-playing > nav[aria-label="Primary navigation"] { display: none; }
.slow-look-page.is-playing .slow-look__content { max-width: 100rem; padding-top: clamp(1rem, 2vw, 2rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
.slow-look__scene-templates { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.slow-look__hero-card { min-height: 19rem; border-radius: 1.1rem; padding: clamp(1.5rem, 4vw, 2.3rem); background: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 1.1rem 2.5rem color-mix(in oklab, var(--color-neutral) 20%, transparent); }
.slow-look__hero-scene { display: flex; align-items: end; gap: .7rem; min-height: 3.5rem; }
.slow-look__hero-scene span { display: block; width: 3.1rem; height: 2.5rem; border-radius: .7rem .7rem .3rem .3rem; background: var(--color-primary); transform: rotate(-4deg); box-shadow: 0 .5rem 1rem color-mix(in oklab, var(--color-primary) 22%, transparent); }
.slow-look__hero-scene span:nth-child(2) { height: 3.3rem; background: var(--color-secondary); transform: translateY(-.25rem) rotate(5deg); }
.slow-look__hero-scene span:nth-child(3) { width: 2.6rem; height: 2.2rem; background: var(--color-accent); transform: rotate(-7deg); }
.slow-look__hero-scene i { margin-left: auto; color: var(--color-neutral-content); font-size: 2.3rem; font-style: normal; }

.slow-look__scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.slow-look__scene-card { display: block; min-height: 18rem; border: 1px solid var(--slow-look-line); border-radius: var(--radius-box); padding: 1.25rem; background: var(--color-base-100); color: var(--slow-look-ink); text-align: left; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.slow-look__scene-card:hover, .slow-look__scene-card:focus-visible { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 6%, var(--color-base-100)); box-shadow: 0 .75rem 1.7rem color-mix(in oklab, var(--color-secondary) 10%, transparent); transform: translateY(-.1rem); }
.slow-look__scene-mark { display: inline-flex; min-width: 3.4rem; height: 3.1rem; align-items: center; justify-content: center; border-radius: .8rem; background: color-mix(in oklab, var(--color-secondary) 15%, transparent); color: var(--color-secondary); font-size: 1.3rem; font-weight: 950; }
.slow-look__scene-card:nth-child(2) .slow-look__scene-mark { background: color-mix(in oklab, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.slow-look__scene-card:nth-child(3) .slow-look__scene-mark { background: color-mix(in oklab, var(--color-accent) 18%, transparent); color: color-mix(in oklab, var(--color-accent) 75%, var(--slow-look-ink)); }

.slow-look__game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--slow-look-line); padding-bottom: 1rem; }
.slow-look__untimed { border: 1px solid color-mix(in oklab, var(--color-secondary) 35%, var(--slow-look-line)); border-radius: 999px; padding: .42rem .75rem; background: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)); color: color-mix(in oklab, var(--color-secondary) 34%, var(--slow-look-ink)); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.slow-look__progress { height: .45rem; margin-top: 1rem; overflow: hidden; border-radius: 999px; background: var(--color-base-200); }
.slow-look__progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); transition: width 180ms ease; }
.slow-look__stage { min-height: clamp(34rem, 65vh, 48rem); margin-top: 1rem; border: 1px solid var(--slow-look-line); border-radius: var(--radius-box); padding: clamp(1rem, 4vw, 2.5rem); background: linear-gradient(180deg, color-mix(in oklab, var(--color-secondary) 5%, var(--color-base-100)), var(--color-base-100) 18rem); color: var(--slow-look-ink); box-shadow: 0 1rem 2.5rem color-mix(in oklab, var(--color-neutral) 10%, transparent); }
.slow-look__stage:focus { outline: none; }
.slow-look__scene-frame { max-width: 56rem; margin: 0 auto; }
.slow-look__scene-art { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 .7rem 1.6rem color-mix(in oklab, var(--color-neutral) 15%, transparent); }
.slow-look__scene-caption { margin-top: .75rem; color: color-mix(in oklab, var(--slow-look-ink) 57%, transparent); font-size: .8rem; line-height: 1.4; text-align: center; }
.slow-look__question { max-width: 56rem; margin: 2rem auto 0; text-align: center; }
.slow-look__question-title { margin: .55rem auto 0; font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 950; line-height: 1.15; }
.slow-look__choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 56rem; margin: 1.25rem auto 0; }
.slow-look__choice { min-height: 4.3rem; border: 1px solid var(--slow-look-line); border-radius: var(--radius-box); padding: .8rem; background: var(--color-base-100); color: var(--slow-look-ink); font-weight: 850; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.slow-look__choice:hover:not(:disabled), .slow-look__choice:focus-visible { border-color: var(--color-secondary); background: color-mix(in oklab, var(--color-secondary) 7%, var(--color-base-100)); box-shadow: 0 .55rem 1.2rem color-mix(in oklab, var(--color-secondary) 10%, transparent); transform: translateY(-.1rem); }
.slow-look__choice:disabled { cursor: default; opacity: 1; }
.slow-look__choice.is-wrong { border-color: color-mix(in oklab, var(--color-error) 58%, var(--slow-look-line)); background: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100)); }
.slow-look__choice.is-right { border-color: color-mix(in oklab, var(--color-success) 58%, var(--slow-look-line)); background: color-mix(in oklab, var(--color-success) 8%, var(--color-base-100)); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-success) 17%, transparent); }
.slow-look__answer-panel { max-width: 56rem; margin: 1.4rem auto 0; border: 1px solid color-mix(in oklab, var(--color-secondary) 28%, var(--slow-look-line)); border-radius: var(--radius-box); padding: 1.1rem 1.25rem; background: color-mix(in oklab, var(--color-secondary) 6%, var(--color-base-100)); text-align: center; }
.slow-look__answer-copy { max-width: 42rem; margin: .55rem auto 0; color: color-mix(in oklab, var(--slow-look-ink) 68%, transparent); line-height: 1.5; }
.slow-look__pause-notice { margin-top: 1rem; border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, var(--slow-look-line)); border-radius: var(--radius-field); padding: 1rem; background: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)); text-align: center; }
.slow-look__feedback { min-height: 2rem; margin: 1rem auto 0; color: var(--slow-look-ink); text-align: center; }
.slow-look__feedback[data-state="correct"] { color: color-mix(in oklab, var(--color-success) 75%, var(--slow-look-ink)); font-weight: 800; }
.slow-look__feedback[data-state="second-look"] { color: color-mix(in oklab, var(--color-secondary) 70%, var(--slow-look-ink)); font-weight: 750; }
.slow-look__results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; margin-right: auto; margin-left: auto; }
.slow-look__result-card { min-height: 8rem; border: 1px solid var(--slow-look-line); border-radius: var(--radius-box); padding: 1.25rem; background: var(--color-base-100); text-align: center; }
.slow-look__result-card strong { display: block; margin-top: .5rem; color: var(--color-secondary); font-size: 2rem; font-variant-numeric: tabular-nums; }
.slow-look__result-card > span { color: color-mix(in oklab, var(--slow-look-ink) 58%, transparent); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.slow-look__stage button:focus-visible, .slow-look__scene-card:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }

@media (max-width: 980px) {
  .slow-look__scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .slow-look__scene-grid, .slow-look__choice-grid, .slow-look__results-grid { grid-template-columns: 1fr; }
  .slow-look__scene-card { min-height: auto; }
  .slow-look__game-topbar { align-items: flex-start; flex-direction: column; }
  .slow-look__stage { min-height: auto; padding: 1rem; }
  .slow-look__scene-art { border-radius: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slow-look__scene-card, .slow-look__choice, .slow-look__progress span { transition: none; }
}