:root {
    color-scheme: light;
    --red: #e31b23;
    --red-dark: #bc111b;
    --ink: #151515;
    --paper: #f5f5f5;
    --white: #fff;
    --line: #e3e0de;
    --muted: #625d5c;
    --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: system-ui, sans-serif; }
button, select { font: inherit; }
button, a, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #057da4; outline-offset: 4px; }
h1, h2, p { margin: 0; }
.shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topbar { background: var(--ink); color: white; border-bottom: 1px solid #ffffff22; }
.topbar-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 850; letter-spacing: -.02em; }
.brand-divider { height: 17px; width: 1px; background: #ffffff45; margin: 0 3px; }
.brand-secondary { color: #d7d1d1; font-weight: 550; }
.edition, .kicker, .eyebrow, .group-count { font: 700 .69rem/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.edition, .kicker { display: flex; align-items: center; gap: 10px; }
.edition { color: #e6dddd; }
.edition span, .kicker span { background: #ff3b42; }
.edition span { width: 7px; height: 7px; border-radius: 50%; }
.kicker span { width: 24px; height: 2px; }
.hero { isolation: isolate; position: relative; overflow: hidden; background: #151515; color: white; border-bottom: 5px solid var(--red); }
.hero-inner { position: relative; padding-block: 45px 51px; }
.hero-pattern { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 84% 20%, #571219, transparent 63%), linear-gradient(110deg, #161414 25%, #290e11); }
.hero-pattern::before, .hero-pattern::after { content: ""; position: absolute; width: clamp(285px, 54vw, 900px); height: 160%; right: -6%; top: -50%; clip-path: polygon(0 11%, 50% 50%, 100% 11%, 100% 29%, 50% 71%, 0 29%); transform: rotate(-9deg); background: repeating-linear-gradient(125deg, #f41d2a 0 2px, #dd1520 2px 5px); opacity: .68; }
.hero-pattern::after { top: -24%; right: -8%; background: #f4212d; opacity: .24; }
.kicker { color: #f0bfc0; margin-bottom: 13px; }
.hero h1 { font: 950 clamp(2.8rem, 6.7vw, 5.55rem)/.88 var(--display); letter-spacing: -.066em; text-transform: uppercase; }
.hero h1 em { font-style: normal; color: #ff4148; }
.hero p:last-child { margin-top: 21px; color: #e0d7d7; font-size: clamp(.92rem, 2.4vw, 1.06rem); max-width: 37rem; }
.workspace { padding-block: 35px 51px; min-height: 55vh; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); align-items: start; gap: 26px; }
.selection-group { padding: 23px; margin-bottom: 19px; background: var(--white); border: 1px solid var(--line); border-radius: 13px; }
.group-head, .result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 19px; }
.eyebrow { color: var(--red-dark); margin-bottom: 5px; }
.group-head h2, .status-head h2, .result-head h2 { font: 900 clamp(1.25rem, 3.4vw, 1.8rem)/1.06 var(--display); letter-spacing: -.046em; text-transform: uppercase; }
.group-count { color: #5a4f50; background: #f2eeee; border-radius: 5px; padding: 6px 8px; white-space: nowrap; }
.position-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.position { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 8px 9px; background: #f8f7f7; border: 1px solid #eeebeb; border-radius: 8px; transition: background .18s, border-color .18s; }
.position:focus-within { border-color: #b5a9aa; }
.position.is-filled { border-color: #f3c5c7; background: #fff6f6; }
.position-number { display: grid; place-items: center; flex: 0 0 33px; height: 37px; color: #655d5d; border: 1px solid #e9e1e1; border-radius: 5px; background: white; font: 800 .89rem/1 var(--mono); }
.is-filled .position-number { background: var(--red-dark); color: white; border-color: var(--red-dark); }
.position-body { flex: 1; min-width: 0; }
.position label { display: block; font-size: .76rem; line-height: 1.3; font-weight: 780; margin-bottom: 3px; }
.position select { width: 100%; height: 38px; padding: 0 26px 0 9px; border: 1px solid #ded8d8; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23625d5c' stroke-width='1.6'/%3E%3C/svg%3E") right 9px center / 10px auto no-repeat; appearance: none; border-radius: 5px; color: #50494a; font-size: .87rem; text-overflow: ellipsis; }
.position select:disabled { opacity: .65; }
.position select[aria-invalid="true"] { border-color: var(--red-dark); }
.is-filled select { color: #151515; font-weight: 650; }
.status-card { position: sticky; top: 16px; background: #171616; color: white; border-radius: 13px; padding: 23px; box-shadow: 0 12px 26px #2111131c; }
.status-head { margin-bottom: 16px; }
.status-head .eyebrow { color: #ff797e; }
.mini-pitch { display: grid; gap: 3px; padding: 10px 14px; border: 1px solid #ffffff29; border-radius: 6px; background: linear-gradient(90deg, transparent 49.8%, #ffffff15 50%, transparent 50.2%), repeating-linear-gradient(#ffffff1c 0 1px, transparent 1px 27px), repeating-linear-gradient(#183c31 0 27px, #15352b 27px 54px); }
.mini-row, .mini-bench { display: flex; justify-content: center; gap: 15px; }
.mini-row [data-slot], .mini-bench [data-slot] { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ffffff43; background: #151515b0; color: #ddd5d5; font: 700 .67rem/1 var(--mono); transition: background .18s, border-color .18s; }
[data-slot].is-filled { background: var(--red-dark); border-color: #ff7881; color: white; }
.mini-bench { gap: 9px; padding: 10px 0; align-items: center; color: #d8cccc; font: 700 .67rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.status-body { margin-top: 4px; }
.progress-label { display: flex; align-items: baseline; gap: 9px; }
.progress-label strong { font: 900 1.55rem/1.1 var(--display); }
.progress-label span, #progress-note { color: #dfd5d5; font-size: .82rem; }
progress { appearance: none; display: block; width: 100%; height: 7px; border: 0; background: #4a4142; border-radius: 99px; overflow: hidden; margin: 10px 0; }
progress::-webkit-progress-bar { background: #4a4142; }
progress::-webkit-progress-value { background: #ff454d; border-radius: 99px; transition: width .22s ease; }
progress::-moz-progress-bar { background: #ff454d; border-radius: 99px; }
.error { color: #ffb9bd; font-size: .85rem; margin-top: 9px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 15px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: .79rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; transition: background .16s, box-shadow .16s; }
.button-red { background: var(--red-dark); color: white; }
.button-red:hover { background: #a80e17; box-shadow: 0 3px 14px #e31b2340; }
.button-outline { color: var(--ink); background: white; border-color: #d8d1d1; }
.button-outline:hover { background: #f5e9e9; }
.button:disabled { opacity: .6; cursor: default; box-shadow: none; }
#generate { width: 100%; margin-top: 15px; min-height: 53px; background: var(--red); animation: reveal .24s ease-out both; }
#generate:hover { background: var(--red-dark); }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.notice { background: #fff0f0; border-left: 4px solid var(--red-dark); padding: 15px; margin-bottom: 20px; }
.result { max-width: 790px; margin: 0 auto; }
.result-head { background: white; padding: 20px; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.result-head p:last-child { color: var(--muted); font-size: .86rem; margin-top: 8px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 7px; }
#graphic { display: block; width: 100%; height: auto; background: var(--ink); box-shadow: 0 12px 30px #21111326; border-radius: 5px; }
.text-lineup { margin-top: 23px; color: var(--muted); font-size: .89rem; }
.text-lineup summary { cursor: pointer; width: fit-content; }
.text-lineup li { margin-block: 5px; }
dialog { width: min(420px, calc(100% - 36px)); padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 65px #0005; }
dialog::backdrop { background: #151515b5; }
dialog h2 { font-size: 1.4rem; letter-spacing: -.03em; }
dialog p { margin: 8px 0 18px; color: var(--muted); line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.site-footer { color: #d5cccc; background: var(--ink); }
.site-footer .shell { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 .66rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 940px) {
    .editor { grid-template-columns: minmax(0, 1fr) 275px; gap: 17px; }
    .selection-group, .status-card { padding: 17px; }
}
@media (max-width: 760px) {
    .shell { width: calc(100% - 36px); }
    .editor { display: flex; flex-direction: column; gap: 0; }
    .selections, .status-card { width: 100%; }
    .status-card { top: auto; bottom: 0; z-index: 2; border-radius: 10px 10px 0 0; margin-top: 17px; padding: 11px 15px; }
    .status-head, .mini-pitch, .mini-bench { display: none; }
    .status-body { margin-top: 0; }
    .progress-label strong { font-size: 1.13rem; }
    progress { margin-block: 6px; height: 5px; }
    #progress-note { font-size: .73rem; }
    #generate { margin-top: 8px; min-height: 44px; }
    .position select { height: 44px; font-size: 1rem; }
    .workspace { padding-block: 21px 25px; }
    .result-actions, .reset { width: 100%; }
    .result-actions > * { flex: 1; }
    .result-actions .button-red { flex: 1.45; }
}
@media (max-width: 520px) {
    .position-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar-inner { min-height: 58px; }
    .edition { display: none; }
    .hero-inner { padding-block: 31px 34px; }
    .hero-pattern::before, .hero-pattern::after { right: -23%; opacity: .26; }
    .hero-pattern::after { opacity: .15; }
    .group-head { align-items: flex-start; }
    .group-count span { display: none; }
}
@media (max-width: 360px) {
    .result-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}