:root {
  color-scheme: light;
  --paper: oklch(0.93 0.021 81);
  --ink: oklch(0.21 0.029 47);
  --muted: oklch(0.48 0.027 59);
  --line: oklch(0.72 0.032 75 / .7);
  --keep: oklch(0.46 0.14 145);
  --pass: oklch(0.54 0.19 28);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 500 15px/1.45 var(--font-body); }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.masthead { min-height: 68px; padding: 0 3.5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); letter-spacing: .015em; }
.wordmark { color: inherit; text-decoration: none; font-weight: 700; }
.masthead p { margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.masthead p span { padding: 0 .35rem; color: var(--ink); }
.masthead output { justify-self: end; min-width: 7.5rem; text-align: right; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
main { max-width: 1450px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 6rem) 3.5vw 3rem; }
.intro { max-width: 770px; margin-bottom: clamp(2.5rem, 6vw, 5.5rem); }
.eyebrow { margin: 0 0 .75rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--font-display); letter-spacing: -.065em; line-height: .88; }
h1 { max-width: 11ch; font-size: clamp(3.8rem, 7.8vw, 8.4rem); }
.lede { max-width: 52ch; margin: 1.6rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.23rem); line-height: 1.55; }
.review { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(370px, 520px) minmax(170px, 1fr); gap: clamp(1.5rem, 4.5vw, 6rem); align-items: center; }
.rules, .queue { align-self: stretch; padding: 1rem 0; }
.rules ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .55rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .91rem; }
.rules b { color: var(--muted); font-size: .72rem; letter-spacing: .06em; }
.tip { max-width: 20ch; margin: 1.4rem 0 0; color: var(--muted); font-size: .82rem; }
.deck { position: relative; min-height: 610px; }
.next-proof { position: absolute; inset: 14px -10px -10px 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid oklch(0.55 0.027 60 / .7); background: oklch(0.92 0.018 82); box-shadow: 6px 6px 0 oklch(0.71 0.052 70 / .35); pointer-events: none; }
.next-proof img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.78); }
.proof-card { min-height: 610px; padding: 1.05rem; position: relative; z-index: 1; overflow: hidden; background: oklch(0.97 0.011 82); border: 1px solid oklch(0.55 0.027 60); box-shadow: 10px 10px 0 oklch(0.71 0.052 70 / .55); transition: transform 260ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease; touch-action: pan-y; user-select: none; }
.proof-card.is-leaving-left { transform: translateX(-125%) rotate(-8deg); opacity: 0; }
.proof-card.is-leaving-right { transform: translateX(125%) rotate(8deg); opacity: 0; }
.proof-topline, .proof-caption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.proof-topline { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.wear-stage { min-height: 365px; position: relative; display: grid; place-items: center; isolation: isolate; }
.printify-mockup { width: 100%; height: 365px; display: block; object-fit: contain; mix-blend-mode: multiply; }
.loading-card { min-height: 610px; display: grid; place-items: center; padding: 2rem; border: 1px solid oklch(0.55 0.027 60); background: oklch(0.97 0.011 82); color: var(--muted); text-align: center; }
.proof-caption { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.source-cover { width: 55px; height: 55px; flex: 0 0 auto; align-self: center; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.proof-caption > div { margin-right: auto; }
.album-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
.album-year { margin: .45rem 0 0; color: var(--muted); font-size: .84rem; }
.edge-swatch { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--ink); border-radius: 50%; background: var(--edge); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .1rem; }
.controls button { min-height: 68px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: .6rem; align-items: center; padding: .7rem .85rem; border: 1px solid currentColor; background: transparent; cursor: pointer; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
.controls button:hover { transform: translateY(-2px); }
.controls span { grid-row: 1 / 3; font-size: 2.25rem; font-weight: 400; line-height: 1; }
.controls b { font-size: 1rem; align-self: end; }.controls small { align-self: start; color: currentColor; opacity: .72; }
.reject { color: var(--pass); }.reject:hover { background: oklch(.9 .045 28); }
.approve { color: var(--keep); }.approve:hover { background: oklch(.9 .055 145); }
.queue { display: flex; flex-direction: column; }
#queue-list { border-top: 1px solid var(--line); }
.queue-item { display: grid; grid-template-columns: 26px 1fr; gap: .65rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.queue-item img { width: 26px; height: 26px; object-fit: cover; border-radius: 2px; }
.queue-item b, .queue-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.queue-item b { font-size: .9rem; }.queue-item span { margin-top: .14rem; color: var(--muted); font-size: .75rem; }
.undo { width: max-content; margin-top: auto; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--ink); background: none; cursor: pointer; font-weight: 700; }.undo:disabled { opacity: .38; cursor: not-allowed; }.undo:not(:disabled):hover { color: var(--keep); border-color: var(--keep); }
kbd { margin-left: .35rem; padding: .1rem .3rem; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: .7rem var(--font-body); }
.result { max-width: 650px; margin: 2rem auto 0; padding: clamp(2rem, 6vw, 4rem) 0; text-align: center; }.result h2 { font-size: clamp(3rem, 6vw, 5.5rem); }.result p:not(.eyebrow) { color: var(--muted); }.result-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.7rem; }.result button { padding: .75rem 1rem; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-weight: 700; }.result button:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 980px) { .review { grid-template-columns: minmax(350px, 520px) minmax(160px, 260px); justify-content: center; }.rules { display: none; }.deck { min-height: 575px; }.proof-card { min-height: 575px; } }
@media (max-width: 650px) { .masthead { grid-template-columns: 1fr auto; padding: 0 1.25rem; }.masthead p { display: none; }.masthead output { min-width: 0; }.intro { margin-bottom: 2.3rem; }.review { display: block; }.queue { margin-top: 2.5rem; }.deck, .proof-card { min-height: 520px; }.next-proof { inset: 8px -6px -6px 6px; }.wear-stage { min-height: 300px; }.printify-mockup { height: 300px; }.proof-card { box-shadow: 6px 6px 0 oklch(0.71 0.052 70 / .55); }.result-actions { flex-direction: column; }.result button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; scroll-behavior: auto !important; } }