:root {
  color-scheme: dark;
  --ink: #f4f7f4;
  --muted: #9ca89f;
  --void: #060907;
  --deep: #0a100c;
  --surface: #111a13;
  --line: rgba(215, 243, 220, .18);
  --green: #00e35a;
  --green-lite: #a5ffbf;
  --red: #ff5a57;
  --red-lite: #ffaba8;
  --mono: "DM Mono", monospace;
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--void); font-family: var(--body); }
a { color: inherit; }
.skip { position: absolute; top: -60px; left: 16px; z-index: 20; padding: 10px 14px; color: #071009; background: var(--green); font-weight: 700; }
.skip:focus { top: 16px; }

.site-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(22px, 5vw, 80px); }
.brand { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; letter-spacing: -.04em; }
.brand span { font: 700 22px/1 var(--display); }
.brand i { color: var(--green); font: 500 16px/1 var(--display); }
.edition { color: rgba(244, 247, 244, .7); font: 500 10px/1 var(--mono); letter-spacing: .14em; }

.hero { isolation: isolate; position: relative; min-height: min(760px, 82vh); display: flex; align-items: end; padding: 142px clamp(22px, 8vw, 146px) 88px; overflow: hidden; border-bottom: 1px solid var(--line); background: #080b09; }
.hero-photo { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.04) contrast(1.07); }
.hero-vignette { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(2, 5, 3, .78) 0%, rgba(4, 8, 5, .32) 51%, rgba(3, 5, 4, .68) 100%), linear-gradient(0deg, rgba(3, 7, 4, .95) 0%, rgba(3, 7, 4, 0) 48%); }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: linear-gradient(rgba(164, 255, 191, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 255, 191, .13) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, black 70%); }
.hero-copy { max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--green-lite); font: 500 11px/1.2 var(--mono); letter-spacing: .13em; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 25px; font: 700 clamp(58px, 9.7vw, 156px)/.76 var(--display); letter-spacing: -.09em; color: #f9fbf9; text-shadow: 0 7px 40px rgba(0, 0, 0, .35); }
h1 em { display: inline-block; vertical-align: .1em; margin: 0 .08em; color: var(--green); font: 500 .22em/.8 var(--mono); letter-spacing: -.1em; }
h1 strong { color: transparent; -webkit-text-stroke: 1.5px rgba(220, 255, 230, .88); font: inherit; }
.thesis { margin-bottom: 26px; color: #e0e8e2; font-size: clamp(16px, 1.55vw, 21px); line-height: 1.45; }
.picks { display: flex; gap: 10px; flex-wrap: wrap; }
.pick { width: min(250px, 100%); padding: 12px 15px; border: 1px solid; background: rgba(4, 9, 5, .53); backdrop-filter: blur(8px); }
.pick b { display: block; margin-bottom: 4px; font: 500 10px/1 var(--mono); letter-spacing: .11em; }
.pick span { color: #dae4dc; font-size: 13px; }
.cheval-pick { border-color: rgba(0, 227, 90, .6); }.cheval-pick b { color: var(--green); }
.derek-pick { border-color: rgba(255, 90, 87, .58); }.derek-pick b { color: var(--red); }
.hero-stamp { position: absolute; right: clamp(22px, 6vw, 90px); bottom: 74px; display: grid; transform: rotate(-7deg); color: var(--green); text-align: center; line-height: .7; text-shadow: 0 0 24px rgba(0, 227, 90, .58); }
.hero-stamp span { font: 700 clamp(18px, 2vw, 29px)/.85 var(--display); letter-spacing: .13em; }.hero-stamp b { font: 700 clamp(45px, 5.5vw, 82px)/.75 var(--display); letter-spacing: -.09em; }.hero-stamp i { margin-top: 10px; color: #e9ffef; font: 500 9px/1 var(--mono); letter-spacing: .18em; font-style: normal; }

.score-section { position: relative; padding: 96px clamp(22px, 8vw, 146px) 72px; background: radial-gradient(circle at 50% 0, rgba(0, 227, 90, .1), transparent 33%), var(--deep); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 35px; }.section-head .eyebrow { margin-bottom: 18px; }.section-head h2 { margin-bottom: 0; font: 700 clamp(44px, 6vw, 92px)/.83 var(--display); letter-spacing: -.085em; }.as-of { max-width: 220px; margin: 0 0 3px; color: var(--muted); font: 400 11px/1.55 var(--mono); text-align: right; }
.winner-panel { display: flex; align-items: center; gap: 18px; min-height: 90px; margin-bottom: 16px; padding: 22px 27px; border: 1px solid rgba(0, 227, 90, .45); background: linear-gradient(100deg, rgba(0, 227, 90, .15), rgba(0, 227, 90, .025)); box-shadow: inset 0 0 36px rgba(0, 227, 90, .04); }.winner-panel.derek { border-color: rgba(255, 90, 87, .5); background: linear-gradient(100deg, rgba(255, 90, 87, .13), rgba(255, 90, 87, .02)); }.winner-panel.tie { border-color: rgba(244, 247, 244, .28); background: rgba(244, 247, 244, .04); }.winner-panel.is-loading { opacity: .68; }.winner-kicker { min-width: 112px; color: var(--green-lite); font: 500 10px/1.25 var(--mono); letter-spacing: .12em; }.derek .winner-kicker { color: var(--red-lite); }.winner-panel p { flex: 1; margin: 0; font: 600 clamp(18px, 2.1vw, 29px)/1 var(--display); letter-spacing: -.045em; }.winner-panel small { color: var(--muted); font: 400 10px/1.5 var(--mono); max-width: 190px; }
.fight-card { display: grid; grid-template-columns: 1fr 1px 1fr; position: relative; border: 1px solid var(--line); background: #0a100c; }.fighter { min-width: 0; padding: clamp(25px, 4vw, 56px); }.fighter-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 33px; }.side, .symbol, .return-label { font: 500 10px/1 var(--mono); letter-spacing: .1em; }.cheval .side { color: var(--green); }.derek .side { color: var(--red); }.symbol { color: var(--muted); }.fighter h3 { margin-bottom: 9px; font: 600 clamp(29px, 4vw, 55px)/.9 var(--display); letter-spacing: -.07em; }.fighter-take { min-height: 38px; margin-bottom: 43px; color: var(--muted); font-size: 14px; }.return { margin-bottom: 7px; font: 600 clamp(42px, 5.7vw, 78px)/.85 var(--display); letter-spacing: -.09em; }.cheval .return { color: var(--green); }.derek .return { color: var(--red); }.return-label { color: var(--muted); }.progress-track { height: 7px; margin: 17px 0 30px; overflow: hidden; background: rgba(244, 247, 244, .1); }.progress { display: block; width: 50%; height: 100%; transition: width .8s cubic-bezier(.2,.8,.2,1); }.cheval .progress { background: var(--green); box-shadow: 0 0 18px rgba(0, 227, 90, .7); }.derek .progress { background: var(--red); box-shadow: 0 0 18px rgba(255, 90, 87, .6); }.fighter dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }.fighter dl div + div { border-left: 1px solid var(--line); padding-left: 12px; }.fighter dt { margin-bottom: 6px; color: var(--muted); font: 400 9px/1 var(--mono); letter-spacing: .08em; }.fighter dd { margin: 0; font: 500 13px/1.2 var(--mono); }.versus { align-self: stretch; position: relative; width: 1px; background: var(--line); }.versus span, .versus i { position: absolute; left: 50%; transform: translateX(-50%); }.versus span { top: 42%; color: var(--ink); font: 700 31px/.65 var(--display); }.versus i { top: 50%; color: var(--green); font: 700 28px/.65 var(--display); font-style: normal; }
.method { margin: 17px 0 0; color: var(--muted); font: 400 10px/1.5 var(--mono); }
.trash-section { display: grid; grid-template-columns: minmax(220px, .76fr) minmax(0, 1.24fr); gap: clamp(42px, 8vw, 128px); padding: 100px clamp(22px, 8vw, 146px); border-top: 1px solid var(--line); background: radial-gradient(circle at 14% 12%, rgba(255, 90, 87, .12), transparent 25%), #090d0a; }
.trash-intro { max-width: 390px; }.trash-intro .eyebrow { color: var(--red-lite); }.trash-intro h2 { margin: 0 0 19px; font: 700 clamp(50px, 6vw, 94px)/.78 var(--display); letter-spacing: -.095em; }.trash-intro h2 em { color: transparent; -webkit-text-stroke: 1px var(--red); font-style: normal; }.trash-lede { max-width: 290px; color: var(--muted); font-size: 16px; line-height: 1.5; }.member-status { display: inline-flex; align-items: center; gap: 8px; margin: 29px 0 0; color: var(--green-lite); font: 500 11px/1.3 var(--mono); }.member-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0, 227, 90, .12); }.member-status strong { color: var(--ink); font-weight: 500; }
.login-lock { margin-top: 29px; padding: 18px; border: 1px solid rgba(255, 90, 87, .48); background: linear-gradient(135deg, rgba(255, 90, 87, .13), rgba(255, 90, 87, .02)); }.login-lock p { margin-bottom: 15px; color: #fff2f1; font: 600 15px/1.35 var(--display); letter-spacing: -.025em; }.login-button { display: inline-flex; align-items: center; gap: 8px; color: var(--red-lite); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-decoration: none; }.login-button:hover { color: #fff; }.login-button span { font-size: 16px; line-height: 0; }
.trash-arena { min-width: 0; }.trash-form { margin-bottom: 16px; padding: 22px; border: 1px solid rgba(0, 227, 90, .42); background: linear-gradient(145deg, rgba(0, 227, 90, .09), rgba(0, 227, 90, .015)); }.trash-form label, .trash-feed-head { display: flex; justify-content: space-between; gap: 12px; color: var(--green-lite); font: 500 10px/1.2 var(--mono); letter-spacing: .12em; }.trash-form label span { color: var(--muted); font-size: 9px; }.trash-form textarea { display: block; width: 100%; min-height: 115px; margin: 14px 0; resize: vertical; border: 1px solid rgba(244, 247, 244, .16); border-radius: 0; outline: 0; background: rgba(3, 7, 4, .82); color: var(--ink); padding: 14px; font: 400 15px/1.5 var(--body); }.trash-form textarea::placeholder { color: #758077; }.trash-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 227, 90, .12); }.trash-form button { border: 0; padding: 12px 15px; background: var(--green); color: #061009; cursor: pointer; font: 700 10px/1 var(--mono); letter-spacing: .1em; }.trash-form button:hover { background: var(--green-lite); }.trash-form button span { padding-left: 6px; font-size: 14px; }.trash-flash { margin: 0 0 16px; padding: 13px 16px; font: 500 11px/1.4 var(--mono); }.trash-flash.success { border: 1px solid rgba(0, 227, 90, .42); color: var(--green-lite); background: rgba(0, 227, 90, .08); }.trash-flash.error { border: 1px solid rgba(255, 90, 87, .45); color: var(--red-lite); background: rgba(255, 90, 87, .08); }
.trash-feed { border: 1px solid var(--line); background: #0c120d; }.trash-feed-head { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink); }.trash-feed-head span:last-child { color: var(--muted); font-size: 9px; }.empty-ring { margin: 0; padding: 30px 18px; color: var(--muted); font: 400 13px/1.5 var(--mono); }.trash-feed ul { margin: 0; padding: 0; list-style: none; }.trash-feed li { padding: 18px; border-top: 1px solid rgba(215, 243, 220, .1); }.trash-feed li:first-child { border-top: 0; }.trash-feed li div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.trash-feed li strong { color: var(--green-lite); font: 500 11px/1.2 var(--mono); }.trash-feed li time { color: var(--muted); font: 400 9px/1.2 var(--mono); }.trash-feed li p { margin: 8px 0 0; color: #edf4ee; font-size: 14px; line-height: 1.5; }
.trash-message-actions { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; margin-top: 14px; }.trash-message-actions details { min-width: 0; }.trash-message-actions summary, .trash-delete-form button, .trash-edit-form button { color: var(--green-lite); background: transparent; border: 0; padding: 0; cursor: pointer; font: 500 9px/1 var(--mono); letter-spacing: .1em; }.trash-message-actions summary { list-style: none; }.trash-message-actions summary::-webkit-details-marker { display: none; }.trash-delete-form button { color: var(--red-lite); }.trash-edit-form { display: block; width: min(100%, 420px); margin-top: 13px; padding: 14px; border: 1px solid rgba(0, 227, 90, .28); background: rgba(0, 227, 90, .045); }.trash-edit-form label { display: block; margin-bottom: 9px; color: var(--muted); font: 500 9px/1 var(--mono); letter-spacing: .1em; }.trash-edit-form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 82px; margin-bottom: 10px; resize: vertical; border: 1px solid rgba(244, 247, 244, .16); outline: 0; background: rgba(3, 7, 4, .82); color: var(--ink); padding: 10px; font: 400 14px/1.45 var(--body); }.trash-edit-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 227, 90, .12); }.trash-edit-form button { border: 1px solid rgba(0, 227, 90, .42); padding: 9px 10px; color: #061009; background: var(--green); }.trash-edit-form button:hover { background: var(--green-lite); }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 31px clamp(22px, 8vw, 146px); border-top: 1px solid var(--line); color: var(--muted); background: var(--void); font: 500 10px/1.4 var(--mono); letter-spacing: .08em; }footer p { margin: 0; }footer a { color: var(--green-lite); text-decoration: none; }
@media (max-width: 720px) { .site-header { padding: 21px 20px; }.edition { display: none; }.hero { min-height: 670px; padding: 116px 22px 42px; align-items: end; }.hero-photo { object-position: 53% center; }.hero-vignette { background: linear-gradient(90deg, rgba(2, 5, 3, .78), rgba(3, 6, 4, .38)), linear-gradient(0deg, rgba(3, 7, 4, .97), transparent 60%); }.hero-stamp { top: 113px; right: 20px; bottom: auto; }.picks { gap: 7px; }.pick { width: 100%; }.score-section { padding: 68px 20px 52px; }.section-head { align-items: start; flex-direction: column; gap: 18px; }.as-of { text-align: left; }.winner-panel { display: block; padding: 19px; }.winner-kicker { display: block; margin-bottom: 10px; }.winner-panel small { display: block; margin-top: 13px; }.fight-card { grid-template-columns: 1fr; }.versus { justify-self: center; width: calc(100% - 50px); height: 1px; }.versus span { top: 50%; left: 46%; }.versus i { top: 50%; left: 54%; }.fighter { padding: 30px 24px; }.fighter-take { min-height: auto; margin-bottom: 28px; } footer { padding: 25px 20px; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.progress { transition: none; } }
@media (max-width: 720px) { .trash-section { grid-template-columns: 1fr; gap: 34px; padding: 68px 20px; }.trash-intro { max-width: none; }.trash-lede { max-width: 270px; } }