:root {
  color-scheme: dark;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: #fff7ff;
  background: #100b1c;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100svh; background: radial-gradient(circle at 50% -10%, #6f416a, #160f28 58%, #0d0916); }
button, input { font: inherit; }
.shell { min-height: 100svh; display: grid; place-items: center; padding: 18px; }
.game { position: relative; width: min(100%, 470px); min-height: min(100svh - 36px, 790px); overflow: hidden; border: 1px solid #b77ca1; border-radius: 30px; background: linear-gradient(150deg, #2e2047, #171226); box-shadow: 0 24px 90px #07030e99; }
.topbar, .scorebar, .lab-bench { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 22px 0; color: #f5d6e7; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.topbar > b { color: #fff7ff; }
.topbar > span { color: #c79bbd; font-size: .58rem; }
.back-link, .hub-link { color: #dba7c5; font-size: .66rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.back-link:hover, .hub-link:hover, .back-link:focus-visible, .hub-link:focus-visible { color: #fff2f8; text-decoration: underline; }
.scorebar { display: flex; justify-content: space-between; padding: 35px 28px 15px; }
.scorebar span { display: flex; flex-direction: column; gap: 4px; }
.scorebar span:last-child { text-align: right; }
.scorebar small { color: #c498b7; font-size: .55rem; font-weight: 900; letter-spacing: .18em; }
.scorebar strong { color: #ffd2e3; font-size: 1.7rem; }
.lab-bench { display: grid; gap: 14px; padding: 0 22px 30px; }
.target-card, .match-card { border: 1px solid #9d6e98; border-radius: 22px; background: #342348cc; box-shadow: inset 0 1px #fff2; }
.target-card { padding: 25px 22px 20px; text-align: center; }
.kicker { margin: 0; color: #9be8cd; font-size: .61rem; font-weight: 900; letter-spacing: .2em; }
.target-card > strong { display: block; margin-top: 14px; color: #fff2f7; font-size: 1rem; }
.target-card > p:last-child { min-height: 1.3em; margin: 8px 0 0; color: #cbaec7; font-size: .78rem; }
.swatch { border-radius: 16px; box-shadow: inset 0 0 0 1px #fff5, 0 12px 30px #0003; transition: background .18s, opacity .28s, transform .28s, filter .28s; }
.swatch--target { width: min(100%, 260px); height: 118px; margin: 17px auto 0; background: #76516e; }
.swatch--target.swatch--hidden { opacity: .08; transform: scale(.9); filter: blur(10px) grayscale(1); }
.match-card { padding: 19px; }
.match-heading { display: flex; justify-content: space-between; gap: 8px; color: #e1bfd6; font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.match-heading output { color: #c59bbd; letter-spacing: 0; text-transform: none; }
.preview { height: 52px; margin: 13px 0 17px; background: hsl(0 0% 25%); }
.sliders { display: grid; gap: 13px; }
.sliders label { display: grid; gap: 7px; color: #dfbfd5; font-size: .75rem; }
.sliders label span { display: flex; justify-content: space-between; }
.sliders output { color: #aee6d5; font-weight: 800; }
input[type="range"] { width: 100%; accent-color: #ee9fbe; cursor: pointer; }
input[type="range"]:disabled { cursor: not-allowed; opacity: .35; }
.primary, .next-button { width: 100%; min-height: 50px; margin-top: 20px; border: 0; border-radius: 14px; cursor: pointer; font-weight: 900; }
.primary { background: linear-gradient(135deg, #9be8cd, #57baa4); color: #171226; box-shadow: 0 5px #2e7a6d; }
.primary:active, .next-button:active { transform: translateY(3px); }
.primary:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }
.next-button { margin-top: 10px; background: #ee9fbe; color: #2a1530; }
.result { min-height: 1.3em; margin: 13px 0 0; color: #ffd2a5; font-size: .78rem; text-align: center; }
.overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 22px; background: #100b1dcc; backdrop-filter: blur(9px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.overlay--visible { opacity: 1; pointer-events: auto; }
.card { width: min(100%, 350px); padding: 34px 27px 27px; border: 1px solid #c18bb0; border-radius: 25px; background: linear-gradient(145deg, #51335b, #241a3d); box-shadow: 0 22px 70px #08020f99; text-align: center; }
.hero { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 78px; height: 74px; margin: 0 auto 23px; padding-bottom: 12px; border: 2px solid #e1a6be; border-radius: 23px; }
.hero span { position: absolute; top: 15px; width: 20px; height: 20px; border: 4px solid #ffb0cb; border-radius: 50%; }
.hero i { display: block; width: 11px; height: 22px; border-radius: 6px; background: #9be8cd; }
.hero i:nth-of-type(2) { height: 35px; background: #ef94b2; }
.hero i:nth-of-type(3) { height: 27px; background: #f6c47e; }
.card h1, .card h2 { margin: 10px 0 0; color: #fff8ff; font-size: 3.1rem; line-height: .95; letter-spacing: -.08em; }
.card h1 em { color: #ffb1ca; font-style: normal; }
.card h2 { font-size: 2.7rem; }
.card > p:not(.kicker) { margin: 19px auto 24px; max-width: 275px; color: #e0c5da; font-size: .89rem; line-height: 1.52; }
.card > small { display: block; margin-top: 16px; color: #b28eaa; font-size: .66rem; }
.seal { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px; border: 2px solid #9be8cd; border-radius: 50%; color: #aaf1d6; font-size: 2rem; }
.hub-link { display: block; width: fit-content; margin: 17px auto 0; font-size: .72rem; }
@media (max-width: 430px) { .shell { padding: 0; } .game { min-height: 100svh; border: 0; border-radius: 0; } }