:root{
  --ink:#180a0d;
  --panel:#301419;
  --accent:#d43b44;
  --accent-2:#ff9298;
  --paper:#fbf4f5;
  --action-text:#ffffff;
  --theme-page:#eef3f5;--theme-surface:#ffffff;--theme-text:#180a0d;--theme-chrome:#180a0d;--theme-chrome-text:#ffffff;--theme-chrome-accent:#ff9298;--theme-hero:#180a0d;--theme-hero-text:#ffffff;--theme-panel:#301419;--theme-panel-text:#ffffff;--theme-odds:#eef6f8;--theme-odds-text:#301419;
  --dt-illustration-far:#180b0e;--dt-illustration-mid:#291216;--dt-illustration-near:#33161a;--dt-glow:#e39798;--dt-chrome:#110507;--dt-chrome-alt:#281216;--dt-chrome-text:#fae9eb;--dt-panel:#281115;--dt-panel-text:#fbf1f3;--dt-cta:#d43b44;--dt-cta-shadow:#4f0f1c;--dt-field:#fef8f9;--dt-field-text:#14080b;--dt-field-muted:#6a6364;--dt-border:#dc5559;--dt-border-soft:#f2c9cc;--dt-surface:#fdfafa;--dt-surface-text:#160a0c;--dt-odds:#f8eff0;--dt-odds-text:#190a0d;--dt-bet-slip:#fdfafa;--dt-bet-slip-text:#16090c;--dt-selected:#3b181e;--dt-selected-text:#fef7f8;--dt-muted:#7c7576;--dt-footer:#15070a;--dt-footer-text:#f6ebec;--dt-wordmark:#de5c60;--dt-atmosphere:#e39798;--dt-atmosphere-far:#180b0e;--dt-veil:#110507;--dt-scene-top:#0f0507;--dt-scene-mid:#230c11;--dt-scene-bottom:#2c0d13;--dt-cta-text:#ffffff;--dt-angle:122deg;
  --mid:#4f808c;
  --signal:#d77728;
  --positive:#229922;
  --white:#fff;
  --radius:6px;
  --font-body:"Inter",Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:"Space Grotesk",'Space Grotesk',Inter,system-ui,sans-serif;
  --font-data:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  color-scheme:light dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:none;background:var(--ink)}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{min-height:100svh;margin:0;min-width:280px;display:flex;flex-direction:column;background:var(--ink);color:var(--white);font:16px/1.5 var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.site-header,.site-footer{flex:0 0 auto}
.broadcast-layout,.forge-layout,.match-layout,.local-layout,.event-layout,.minimal-layout{min-width:0;display:flex;flex:1 0 auto;flex-direction:column}
.broadcast-hero,.forge-shell,.match-console,.local-story,.event-stage,.minimal-intro{flex:1 0 auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
a{color:inherit}
button,input{font:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:relative;z-index:20;min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:36px;padding:0 clamp(24px,5vw,76px);border-bottom:1px solid #ffffff20;background:color-mix(in srgb,var(--ink) 96%,transparent)}
.brand-link{min-width:0;max-width:100%;width:max-content;overflow:hidden;text-decoration:none}
.brand{display:inline-flex;align-items:center;gap:14px;max-width:100%;width:max-content}
.brand strong{max-width:clamp(130px,20vw,300px);overflow:hidden;font-family:var(--font-display);font-size:14px;font-weight:750;letter-spacing:.16em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.brand-logo{display:block;width:auto;max-width:112px;height:38px;object-fit:contain;object-position:left center}
.brand--name-in-logo .brand-logo{max-width:164px;height:46px}
.brand--oversized.brand--name-in-logo .brand-logo{max-width:min(320px,50vw);height:150px}
/* The reserved logo slot: what the header shows when the client has not supplied
   a mark. Dashed, greyed and set at the label size rather than a display size,
   so it reads as an empty box awaiting artwork and never as a wordmark in its own
   right. It reserves the same 38-46px height the real mark takes, so dropping a
   logo in later reflows nothing. */
.brand--logo-reserved{min-width:0;display:inline-flex;align-items:center}
.brand-logo-reserved{min-width:112px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px dashed color-mix(in srgb,currentColor 38%,transparent);border-radius:5px;background:color-mix(in srgb,currentColor 7%,transparent);color:color-mix(in srgb,currentColor 58%,transparent);font:750 11px/1 var(--font-body);letter-spacing:.18em;white-space:nowrap}
.brand--oversized .brand-logo-reserved{min-width:min(240px,40vw);height:112px;font-size:15px}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid currentColor;color:var(--paper);transform:rotate(45deg)}
.brand-mark i{font:800 13px/1 var(--font-display);font-style:normal;transform:rotate(-45deg)}
.site-header nav{display:flex;align-items:center;gap:32px;color:color-mix(in srgb,var(--paper) 76%,transparent);font-size:13px}
.site-header nav a{text-decoration:none;transition:color .18s ease}
.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--white)}
.market-label{justify-self:end;display:flex;align-items:center;gap:6px;color:var(--paper);font-size:12px;font-weight:650;letter-spacing:.08em}
.menu-button{display:none;width:44px;height:44px;place-items:center;padding:0;border:0;background:transparent;color:currentColor}
.menu-button svg{width:24px;height:24px}
.hero-copy h1,.forge-copy h1,.match-copy h1,.event-copy h1,.minimal-copy h1{max-width:760px;margin:0;font:700 clamp(54px,5.4vw,78px)/.96 var(--font-display);letter-spacing:-.055em;text-wrap:balance}
.hero-copy p,.forge-copy p,.match-copy p,.event-copy p,.minimal-copy p{max-width:600px;margin:24px 0 0;color:color-mix(in srgb,var(--paper) 82%,transparent);font-size:clamp(16px,1.45vw,19px);line-height:1.55}
.hero-logo-lockup{position:relative;z-index:1;width:min(100%,620px);display:grid;align-content:center;gap:22px}
.hero-logo-frame{display:block;width:min(100%,560px)}
.hero-logo-mark{display:block;width:100%;height:clamp(128px,17vw,230px);max-height:34vh;object-fit:contain;object-position:left center}
.hero-logo-lockup>p{margin:0}
.login-card{width:100%;max-width:400px;padding:30px;border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 92%,var(--ink));box-shadow:0 18px 48px #0005;backdrop-filter:none}
.login-heading h2{margin:0;font:700 26px/1.15 var(--font-display);letter-spacing:-.025em}
.login-heading p{margin:6px 0 22px;color:var(--accent-2);font-size:14px}
.login-card label{display:grid;gap:8px;margin:15px 0}
.login-card label>span:first-child{color:color-mix(in srgb,var(--paper) 84%,transparent);font-size:12px;font-weight:650}
.field-shell{position:relative;display:block}
.field-shell input{width:100%;min-height:50px;padding:0 14px;border:1px solid #ffffff2f;border-radius:max(3px,calc(var(--radius) - 2px));outline:0;background:color-mix(in srgb,var(--ink) 90%,transparent);color:var(--white);font-size:14px;transition:border-color .18s ease,box-shadow .18s ease}
.field-shell input::placeholder{color:color-mix(in srgb,var(--paper) 48%,transparent)}
.field-shell input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.login-options{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:4px 0 18px;color:var(--accent-2);font-size:12px}
.login-options a{text-decoration:none}
.login-card>button{width:100%;min-height:50px;border:0;border-radius:max(3px,calc(var(--radius) - 2px));background:var(--accent);color:var(--action-text);font-size:14px;font-weight:800;cursor:pointer;transition:filter .18s ease,transform .18s ease}
.login-card>button:hover,.login-card>button:focus-visible{filter:brightness(1.08)}
.login-card>button:active{transform:translateY(1px)}
.login-help{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;color:var(--accent-2);font-size:12px}
.login-help a{text-decoration:none}
.login-help i{width:1px;height:14px;background:#ffffff38}
.broadcast-media,.local-media,.event-media{position:relative;display:block;overflow:hidden;margin:0;background:var(--panel)}
.broadcast-media img,.local-media img,.event-media img{width:100%;height:100%;display:block;object-fit:cover}
.world-owned-scene{background:linear-gradient(132deg,var(--panel),var(--ink))}
.world-owned-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 24%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 52%)}
.world-owned-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 88%,transparent),transparent 66%)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:24px}
.section-heading>div{display:grid;gap:5px}
.section-heading span,.featured-banner>div>span{color:var(--accent-2);font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.section-heading h2,.featured-banner h2{margin:0;font:700 clamp(25px,2.7vw,36px)/1.05 var(--font-display);letter-spacing:-.035em}
.section-heading p{max-width:520px;margin:0;color:color-mix(in srgb,var(--paper) 65%,transparent);font-size:13px}
.featured-banner{display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:30px;padding:24px clamp(24px,5vw,76px);border-block:1px solid #ffffff1d;background:color-mix(in srgb,var(--panel) 74%,var(--ink));color:var(--white)}
.featured-art{height:88px;display:grid;place-items:center;overflow:hidden;border:1px solid #ffffff22;background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 26%,var(--ink)),var(--ink))}
.featured-art svg{width:112px;height:66px;color:var(--accent-2);opacity:.7}
.featured-banner h2{margin-top:5px;font-size:clamp(24px,2.5vw,34px)}
.featured-banner p{margin:8px 0 0;color:var(--accent-2);font-size:13px}
.featured-banner>a{display:flex;align-items:center;gap:9px;color:var(--accent-2);font-size:13px;text-decoration:none}
.featured-banner>a svg{width:19px;height:19px}
.odds-ticker{min-height:50px;display:flex;align-items:center;gap:16px;padding:8px clamp(24px,5vw,76px);border-bottom:1px solid #ffffff1c;background:color-mix(in srgb,var(--ink) 92%,black);font-family:var(--font-data);font-size:12px}
.odds-ticker>strong{font-family:var(--font-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.odds-ticker>span{margin-right:auto;color:var(--accent-2);font-family:var(--font-body)}
.odds-ticker>div{display:flex;align-items:center;gap:7px}
.odds-ticker b{color:var(--accent-2);font-size:12px}
.odds-ticker em{min-width:42px;padding:7px 12px;border:1px solid #ffffff24;border-radius:4px;color:var(--paper);font-style:normal;text-align:center}
.verified-feed,.feed-boundary,.sports-rail{padding:48px clamp(24px,6vw,92px);border-top:1px solid #ffffff17;background:var(--ink)}
.preview-event-grid,.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.preview-event-grid article,.event-card{min-width:0;display:grid;gap:14px;padding:20px;border:1px solid #ffffff20;border-radius:var(--radius);background:color-mix(in srgb,var(--panel) 72%,var(--ink))}
.preview-event-grid article>div:first-child{display:grid;gap:4px}
.preview-event-grid small,.event-card small{color:var(--accent-2);font-size:12px}
.preview-event-grid strong,.event-card strong{font:650 14px/1.3 var(--font-display)}
.preview-event-grid article>span{color:color-mix(in srgb,var(--paper) 58%,transparent);font-size:12px}
.price-slots{display:grid;grid-template-columns:repeat(6,auto);align-items:center;gap:6px;margin-top:auto;font-family:var(--font-data)}
.price-slots b{color:var(--accent-2);font-size:12px}
.price-slots em{min-width:34px;padding:7px;border:1px solid #ffffff1f;color:var(--paper);font-size:12px;font-style:normal;text-align:center}
.event-card{position:relative}
.event-card strong{display:flex;justify-content:space-between;gap:18px}
.event-card strong b{color:var(--accent-2);font-family:var(--font-data)}
.event-card em{position:absolute;right:18px;top:18px;color:var(--accent-2);font-size:12px;font-style:normal}
.feed-empty{grid-column:1/-1;color:color-mix(in srgb,var(--paper) 68%,transparent)}
.sport-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ffffff1d}
.sport-links a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:72px;padding:16px 18px;border-bottom:1px solid #ffffff1d;text-decoration:none;transition:background .18s ease}
.sport-links a:nth-child(3n+2){border-inline:1px solid #ffffff1d}
.sport-links a:hover,.sport-links a:focus-visible{background:#ffffff08}
.sport-links b{color:var(--accent-2);font:650 12px/1 var(--font-data)}
.sport-links span{font:650 16px/1.2 var(--font-display)}
.sport-links em{display:flex;align-items:center;gap:7px;color:color-mix(in srgb,var(--paper) 60%,transparent);font-size:12px;font-style:normal}
.sport-links em svg{width:18px;height:18px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(24px,5vw,76px);border-top:1px solid #ffffff1a;background:var(--ink);color:color-mix(in srgb,var(--paper) 62%,transparent);font-size:12px}
.site-footer nav{display:flex;gap:24px}
.site-footer a{text-decoration:none}

.broadcast-hero{position:relative;isolation:isolate;min-height:680px;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);align-items:center;gap:clamp(48px,7vw,110px);padding:76px clamp(28px,6vw,92px);overflow:hidden}
.broadcast-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 0%,transparent 43%,transparent 65%,color-mix(in srgb,var(--ink) 58%,transparent) 100%);pointer-events:none}
.broadcast-media{position:absolute;inset:0;z-index:-2}
.broadcast-copy{position:relative;z-index:1;max-width:720px}
.broadcast-rule{display:inline-block;margin-top:34px;padding-top:13px;border-top:2px solid var(--accent-2);color:var(--accent-2);font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.broadcast-login{position:relative;z-index:2;justify-self:end}

.site-header--forge,.site-header--minimal{border-color:#172d3324;background:var(--white);color:var(--ink)}
.site-header--forge .brand-mark,.site-header--minimal .brand-mark{color:var(--ink)}
.site-header--forge nav,.site-header--minimal nav{color:color-mix(in srgb,var(--ink) 72%,transparent)}
.site-header--forge .market-label,.site-header--minimal .market-label{color:var(--ink)}
.forge-shell{min-height:680px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);background:var(--white);color:var(--ink)}
.forge-stage{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:46px;padding:70px clamp(34px,7vw,108px);overflow:hidden;background:linear-gradient(135deg,var(--white) 0 70%,var(--paper) 70%)}
.forge-stage::before,.forge-stage::after{content:"";position:absolute;z-index:-1;aspect-ratio:1;transform:rotate(45deg)}
.forge-stage::before{right:-12%;top:-38%;width:62%;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent)}
.forge-stage::after{left:-15%;bottom:-55%;width:52%;background:var(--paper)}
.forge-emblem .brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.forge-emblem .brand-logo{max-width:min(240px,40vw);height:112px}
.forge-emblem .brand-logo-reserved{min-width:min(240px,40vw);height:112px;border-width:2px;border-radius:8px;font-size:15px}
.forge-emblem .brand-mark{width:118px;height:118px;border-width:2px;color:var(--ink)}
.forge-emblem .brand-mark i{font-size:32px}
.forge-emblem .brand strong{max-width:100%;font-size:18px;color:var(--ink)}
.forge-copy{position:relative;z-index:1}
.forge-copy h1{max-width:720px;color:var(--ink);font-size:clamp(52px,5.2vw,74px)}
.forge-copy p{max-width:560px;color:color-mix(in srgb,var(--ink) 68%,transparent)}
.forge-access{position:relative;display:flex;align-items:center;justify-content:center;padding:50px clamp(30px,4vw,58px);overflow:hidden;background:var(--ink);color:var(--white)}
.forge-access::before{content:"";position:absolute;right:-35%;bottom:-32%;width:75%;aspect-ratio:1;border:1px solid #ffffff18;transform:rotate(45deg)}
.forge-access .login-card{position:relative;border-color:#ffffff25;background:color-mix(in srgb,var(--panel) 92%,var(--ink));box-shadow:0 18px 48px #0005;backdrop-filter:none}
.forge-modules{background:var(--ink)}

.match-layout{background:var(--ink)}
.match-console{position:relative;isolation:isolate;min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);align-items:center;gap:52px;padding:54px clamp(28px,6vw,88px);overflow:hidden;border-bottom:3px solid var(--accent);background:linear-gradient(110deg,var(--panel),var(--ink))}
.match-console::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:80px 64px;mask-image:linear-gradient(90deg,#000,transparent 80%)}
.match-copy h1{max-width:650px;font-size:clamp(48px,5vw,68px)}
.match-copy p{max-width:520px}
.match-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:38px;border-block:1px solid #ffffff20}
.match-index span{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;padding:16px;border-right:1px solid #ffffff20;font-size:13px}
.match-index span:last-child{border-right:0}
.match-index b{grid-row:1/3;color:var(--accent-2);font:650 12px/1.5 var(--font-data)}
.match-index em{color:color-mix(in srgb,var(--paper) 52%,transparent);font-size:12px;font-style:normal;text-transform:uppercase}
.match-auth .login-card{margin-left:auto;border-radius:max(3px,calc(var(--radius) - 2px));box-shadow:none}
.match-data .verified-feed,.match-data .feed-boundary{border-top:0}

.local-story{min-height:680px;display:grid;grid-template-columns:minmax(420px,1.12fr) minmax(330px,.72fr) minmax(340px,.63fr);align-items:stretch;background:var(--paper);color:var(--ink)}
.local-portrait{position:relative;min-height:560px;overflow:hidden}
.local-media{position:absolute;inset:0}
.local-media img{object-position:42% center!important}
.local-portrait>span{position:absolute;left:28px;bottom:28px;z-index:2;padding:9px 12px;border-left:3px solid var(--signal);background:var(--white);color:var(--ink);font:750 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.local-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:58px clamp(28px,4vw,64px);border-left:2px solid var(--signal);background:var(--paper)}
.local-copy h1{color:var(--ink);font-size:clamp(46px,4.4vw,64px)}
.local-copy p{color:color-mix(in srgb,var(--ink) 68%,transparent)}
.local-sports{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.local-sports span{padding:8px 10px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);color:var(--ink);font-size:12px;font-weight:700;text-transform:uppercase}
.local-story>aside{display:flex;align-items:center;padding:34px;background:var(--ink);color:var(--white)}
.local-login{box-shadow:none}

.event-stage{position:relative;isolation:isolate;min-height:720px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;align-items:end;gap:38px;padding:78px clamp(28px,6vw,94px) 48px;overflow:hidden;background:var(--ink)}
.event-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 76%,transparent) 0 38%,color-mix(in srgb,var(--ink) 28%,transparent) 62%,var(--ink) 100%)}
.event-media{position:absolute;inset:0;z-index:-2}
.event-media img{object-position:18% center!important}
.event-message{grid-column:1;position:relative;max-width:760px}
.event-copy h1{max-width:760px;font-size:clamp(58px,6vw,88px);text-transform:uppercase}
.event-note{display:inline-block;margin-top:28px;padding:10px 0;border-block:1px solid var(--accent);color:var(--accent-2);font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.event-login{grid-column:1;width:100%}
.event-login .login-card{max-width:none;display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(150px,.5fr);align-items:end;gap:16px;padding:18px;border-color:#ffffff32;background:color-mix(in srgb,var(--ink) 92%,var(--panel));box-shadow:0 16px 44px #0000002e;backdrop-filter:none}
.event-login .login-heading,.event-login .login-options,.event-login .login-help{display:none}
.event-login .login-card label{margin:0}.event-login .login-card>button{margin:0}
.event-support{background:var(--ink)}

.minimal-layout{background:var(--white);color:var(--ink)}
.minimal-intro{position:relative;isolation:isolate;min-height:680px;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(360px,420px);align-items:center;gap:clamp(42px,6vw,88px);padding:74px clamp(28px,7vw,108px);overflow:hidden;background:linear-gradient(135deg,var(--white) 0 72%,var(--paper) 72%)}
.minimal-intro::before{content:"";position:absolute;right:-10%;top:-46%;width:42%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);transform:rotate(45deg)}
.minimal-copy{position:relative}
.minimal-copy h1{max-width:720px;color:var(--ink);font-size:clamp(58px,5.4vw,76px);font-weight:600}
.minimal-copy p{max-width:560px;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.minimal-divider{height:78%;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.minimal-intro>div:last-child{min-width:0}
.minimal-login{position:relative;padding:30px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:max(6px,var(--radius));background:var(--white);color:var(--ink);box-shadow:0 16px 44px #0000002e;backdrop-filter:none}
.minimal-login .login-heading h2{font-size:34px;font-weight:560}.minimal-login .login-heading p{color:var(--muted,#68777d)}
.minimal-login label>span:first-child{color:var(--ink)}.minimal-login .field-shell input{padding-inline:0;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 32%,transparent);border-radius:0;background:transparent;color:var(--ink)}.minimal-login .field-shell input::placeholder{color:color-mix(in srgb,var(--ink) 42%,transparent)}
.minimal-login .login-options,.minimal-login .login-help{color:var(--ink)}.minimal-login .login-help i{background:color-mix(in srgb,var(--ink) 22%,transparent)}.minimal-login>button{border-radius:0;background:var(--ink);color:var(--white)}
.minimal-content{background:var(--ink);color:var(--white)}
.minimal-layout>.featured-banner{border-color:#172d3326;background:var(--paper);color:var(--ink)}
.minimal-layout>.featured-banner .featured-art{border-color:#172d3320;background:var(--white)}
.minimal-layout>.featured-banner .featured-art svg,.minimal-layout>.featured-banner>div>span,.minimal-layout>.featured-banner p,.minimal-layout>.featured-banner>a{color:var(--ink)}

@media(max-width:1260px){
  .site-header{gap:22px;padding-inline:28px}.site-header nav{gap:20px}
  .local-story{grid-template-columns:1fr 1fr}.local-story>aside{grid-column:1/-1;justify-content:center}.local-login{max-width:620px}
  .event-stage{grid-template-columns:minmax(0,1fr)}.event-message,.event-login{grid-column:1}
  .minimal-intro{grid-template-columns:minmax(0,1fr) minmax(340px,400px)}.minimal-divider{display:none}
  .preview-event-grid,.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sport-links{grid-template-columns:repeat(2,minmax(0,1fr))}.sport-links a:nth-child(3n+2){border-inline:0}.sport-links a:nth-child(even){border-left:1px solid #ffffff1d}
}

@media(max-width:720px){
  body{font-size:15px}
  .site-header{min-height:64px;grid-template-columns:1fr auto;padding:0 20px}.site-header nav,.market-label{display:none}.menu-button{display:grid;justify-self:end}.brand{gap:11px}.brand strong{max-width:180px;font-size:12px;letter-spacing:.12em}.brand-mark{width:32px;height:32px}.brand--name-in-logo .brand-logo{max-width:118px;height:38px}
  .hero-copy h1,.forge-copy h1,.match-copy h1,.event-copy h1,.minimal-copy h1{font-size:clamp(42px,12vw,50px);line-height:.98;letter-spacing:-.05em}
  .hero-copy p,.forge-copy p,.match-copy p,.event-copy p,.minimal-copy p{margin-top:18px;font-size:16px;line-height:1.5}
  .hero-logo-lockup{gap:16px}.hero-logo-frame{width:min(100%,420px)}.hero-logo-mark{height:clamp(108px,32vw,168px);max-height:none}
  .login-card{max-width:none;padding:24px}.login-heading h2{font-size:25px}.login-heading p{font-size:14px}.field-shell input{min-height:50px;font-size:16px}.login-card>button{min-height:50px}.login-options{font-size:12px}.login-help{gap:12px;font-size:12px}
  .featured-banner{grid-template-columns:112px 1fr;gap:18px;padding:20px}.featured-art{height:74px}.featured-banner>a{grid-column:1/-1;justify-self:end}.featured-banner h2{font-size:22px}.featured-banner p{font-size:12px}
  .odds-ticker{align-items:flex-start;flex-wrap:wrap;padding:13px 20px}.odds-ticker>span{width:100%;order:3}.odds-ticker>div{margin-left:auto}.odds-ticker em{min-width:36px;padding:6px 9px}
  .verified-feed,.feed-boundary,.sports-rail{padding:38px 20px}.section-heading{align-items:start;flex-direction:column;gap:12px}.section-heading p{font-size:13px}
  .preview-event-grid,.event-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}.preview-event-grid article,.event-card{flex:0 0 calc(100vw - 58px);scroll-snap-align:start}
  .sport-links{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-top:1px solid #ffffff1d}.sport-links a{flex:0 0 calc(100vw - 78px);min-height:76px;border-left:0!important;border-right:1px solid #ffffff1d;scroll-snap-align:start}
  .site-footer{align-items:flex-start;flex-direction:column;padding:26px 20px}.site-footer nav{flex-wrap:wrap;gap:18px}

  .broadcast-hero{min-height:940px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:58px 20px 24px}
  .broadcast-hero::after{background:linear-gradient(180deg,var(--ink) 0%,transparent 40%,var(--ink) 64%,var(--ink) 100%)}
  .broadcast-media{height:540px}.broadcast-media img{object-position:center!important}
  .broadcast-copy{max-width:360px}.broadcast-rule{margin-top:24px}
  .broadcast-login{margin-top:205px;align-self:stretch}

  .forge-shell{min-height:0;display:block}.forge-stage{min-height:430px;gap:34px;padding:48px 22px 58px;background:linear-gradient(145deg,var(--white) 0 82%,var(--paper) 82%)}
  .brand-logo{max-width:92px;height:34px}
  .brand-logo-reserved{min-width:96px;height:34px;padding:0 10px;font-size:10px;letter-spacing:.14em}
  .forge-emblem .brand-logo{max-width:180px;height:82px}
  .forge-emblem .brand-logo-reserved{min-width:180px;height:82px;font-size:13px}
  .forge-emblem .brand-mark{width:82px;height:82px}.forge-emblem .brand-mark i{font-size:24px}.forge-emblem .brand strong{font-size:14px}
  .forge-access{padding:38px 22px 46px;clip-path:polygon(0 20px,100% 0,100% 100%,0 100%)}.forge-access .login-card{padding:0;border:0}

  .match-console{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:38px 18px 42px}.match-copy h1{font-size:44px}.match-index{grid-template-columns:1fr;margin-top:28px}.match-index span{border-right:0;border-bottom:1px solid #ffffff20}.match-index span:last-child{border-bottom:0}.match-auth .login-card{margin:0;padding:22px}

  .local-story{min-height:0;display:block}.local-portrait{min-height:360px}.local-media img{object-position:38% center!important}.local-copy{padding:42px 22px 30px;border-left:0;border-top:2px solid var(--signal)}.local-copy h1{font-size:46px}.local-story>aside{display:block;margin-top:-10px;padding:0 22px 46px;background:var(--paper)}.local-login{background:var(--ink);color:var(--white)}

  .event-stage{min-height:0;display:block;padding:390px 20px 42px;background:var(--ink)}.event-stage::after{background:linear-gradient(180deg,transparent 0 32%,var(--ink) 49%,var(--ink) 100%)}.event-media{height:430px}.event-media img{object-position:center!important}.event-copy h1{font-size:48px}.event-note{margin-top:22px}.event-login{margin-top:30px}.event-login .login-card{display:block;padding:24px}.event-login .login-heading{display:block}.event-login .login-card label{margin:15px 0}.event-login .login-card>button{margin-top:8px}.event-login .login-options,.event-login .login-help{display:flex}

  .minimal-intro{min-height:0;display:block;padding:54px 22px 48px;background:linear-gradient(150deg,var(--white) 0 73%,var(--paper) 73%)}.minimal-copy h1{font-size:46px}.minimal-intro>div:last-child{margin-top:38px}.minimal-login{padding:24px}.minimal-layout>.featured-banner{color:var(--ink)}
}

@media(prefers-reduced-motion:no-preference){
  .broadcast-media img,.event-media img{animation:hero-drift 18s ease-in-out infinite alternate}
  @keyframes hero-drift{from{transform:scale(1.001)}to{transform:scale(1.025)}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body.custom-login-active{min-width:320px;margin:0;background:var(--ink);color:var(--white);font-family:var(--font-body)}
.custom-login-canvas__header{position:relative;z-index:20;min-height:76px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:0 clamp(22px,4vw,64px);border-bottom:1px solid color-mix(in srgb,var(--white) 14%,transparent);background:color-mix(in srgb,var(--ink) 92%,transparent)}
.custom-login-canvas__brand{display:inline-flex;width:max-content;max-width:min(42vw,360px);align-items:center;color:inherit;text-decoration:none}
.custom-login-canvas__brand .brand{display:flex;align-items:center}.custom-login-canvas__brand .brand-logo{display:block;width:auto;max-width:min(42vw,320px);height:44px;object-fit:contain;object-position:left center}
.custom-login-canvas__actions{display:flex;align-items:center;gap:10px}.custom-login-canvas__actions a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid color-mix(in srgb,var(--white) 42%,transparent);border-radius:6px;color:inherit;font-weight:780;text-decoration:none}.custom-login-canvas__actions a:last-child{border-color:var(--accent);background:var(--accent);color:var(--action-text,var(--ink))}
.custom-login-canvas__main{position:relative;z-index:1;box-sizing:border-box;min-height:calc(100svh - 140px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);grid-template-areas:"banner auth";align-items:center;gap:clamp(34px,5vw,76px);padding:clamp(48px,7vw,104px) clamp(24px,5vw,80px);background:transparent}
.custom-login-canvas__banner{grid-area:banner;min-width:0}.custom-login-canvas__banner picture,.custom-login-canvas__banner-frame{position:relative;display:block;width:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--white) 20%,transparent);border-radius:10px;background:color-mix(in srgb,var(--ink) 72%,var(--panel));box-shadow:0 28px 70px #0007}.custom-login-canvas__banner img{display:block;width:100%;height:auto;aspect-ratio:1024/300;object-fit:cover}.custom-login-canvas__banner-frame{aspect-ratio:1024/300;display:grid;align-content:center;justify-items:center;gap:9px;text-align:center}.custom-login-canvas__banner-eyebrow{color:color-mix(in srgb,var(--white) 66%,transparent);font:800 11px/1 inherit;letter-spacing:.17em;text-transform:uppercase}.custom-login-canvas__banner-size{color:var(--white);font:760 clamp(19px,1.7vw,24px)/1 inherit;font-variant-numeric:tabular-nums}
.custom-login-canvas__auth{grid-area:auth;min-width:0}.custom-login-canvas__auth>.premium-auth-panel{width:100%;max-width:460px;margin-left:auto;padding:30px;border:1px solid color-mix(in srgb,var(--white) 20%,transparent);border-radius:8px;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--white);box-shadow:0 28px 70px #0007}
.custom-login-canvas__auth .premium-auth-panel__heading{margin-bottom:24px}.custom-login-canvas__auth .premium-auth-panel__heading>span{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--white) 68%,transparent);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.custom-login-canvas__auth .premium-auth-panel__heading h2{margin:0;color:inherit;font-size:clamp(26px,2.4vw,36px)}
.custom-login-canvas__auth form#login{width:100%;display:block;margin:0;padding:0;border:0;background:transparent;box-shadow:none}.custom-login-canvas__auth form#login>label{display:block;margin:16px 0}.custom-login-canvas__auth form#login label>span:first-child{display:flex;color:inherit;font-weight:720}.custom-login-canvas__auth .premium-auth-input{display:block;margin-top:8px}.custom-login-canvas__auth input{box-sizing:border-box;width:100%;min-height:52px;padding:0 15px;border:1px solid color-mix(in srgb,var(--white) 28%,transparent);border-radius:6px;background:color-mix(in srgb,var(--ink) 72%,transparent);color:inherit;font:inherit}.custom-login-canvas__auth input::placeholder{color:color-mix(in srgb,var(--white) 50%,transparent)}
.custom-login-canvas__auth .premium-auth-field__password{justify-content:space-between}.custom-login-canvas__auth .premium-show-password{padding:0;border:0;background:transparent;color:var(--accent-2);font:inherit;font-weight:760}.custom-login-canvas__auth .premium-auth-recovery{display:flex;justify-content:space-between;gap:16px;margin:15px 0;font-size:13px}.custom-login-canvas__auth a{color:inherit}.custom-login-canvas__auth .premium-auth-submit{width:100%;min-height:52px;margin-top:8px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:var(--action-text,var(--ink));font:inherit;font-weight:850}.custom-login-canvas__auth .premium-auth-join{margin:18px 0 0;text-align:center;color:color-mix(in srgb,var(--white) 72%,transparent)}
.custom-login-canvas-trust-row{position:relative;z-index:2;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:16px clamp(22px,4vw,64px);border-top:1px solid color-mix(in srgb,var(--white) 16%,transparent);background:var(--ink);color:color-mix(in srgb,var(--white) 78%,transparent);font-size:13px}.custom-login-canvas-trust-row .premium-trust-row__notice,.custom-login-canvas-trust-row nav{display:flex;align-items:center;gap:22px}.custom-login-canvas-trust-row a{color:inherit;text-decoration:none}
@media(max-width:720px){
  .custom-login-canvas__header{min-height:68px;padding:0 18px}.custom-login-canvas__brand{max-width:58vw}.custom-login-canvas__brand .brand-logo{max-width:55vw;height:38px}.custom-login-canvas__actions a:first-child{display:none}.custom-login-canvas__actions a{min-height:42px;padding:0 17px}
  .custom-login-canvas__main{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:28px 16px 32px}.custom-login-canvas__auth{order:1}.custom-login-canvas__banner{order:2}.custom-login-canvas__auth>.premium-auth-panel{max-width:none;margin:0;padding:24px 20px}.custom-login-canvas__banner picture,.custom-login-canvas__banner-frame{aspect-ratio:545/325}.custom-login-canvas__banner img{height:100%;aspect-ratio:auto}
  .custom-login-canvas-trust-row{align-items:flex-start;flex-direction:column;padding:24px 18px}.custom-login-canvas-trust-row .premium-trust-row__notice,.custom-login-canvas-trust-row nav{flex-wrap:wrap;gap:14px 18px}
}

.brand-world-art{position:absolute;inset:0;z-index:0;--world-vignette:42%;--world-glow-strength:24%;--world-photo-brightness:.7;--world-photo-saturation:.72;--world-photo-opacity:1;--world-veil-opacity:1;--world-base-top:color-mix(in srgb,var(--panel) 78%,transparent);--world-base-bottom:color-mix(in srgb,var(--ink) 92%,transparent);--world-horizon:color-mix(in srgb,var(--ink) 88%,transparent);overflow:hidden;color:var(--accent-2);pointer-events:none;isolation:isolate;background:radial-gradient(ellipse at center,transparent 43%,color-mix(in srgb,var(--ink) var(--world-vignette),transparent) 100%),radial-gradient(ellipse 72% 66% at var(--world-light-x) var(--world-light-y),color-mix(in srgb,var(--scene-glow) var(--world-glow-strength),transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 37%,transparent 72%),linear-gradient(180deg,transparent 0 55%,var(--world-horizon) 100%),linear-gradient(145deg,var(--world-base-top),var(--world-base-bottom))}
.brand-world-art .world-photo{position:absolute;inset:0;z-index:0;display:block;opacity:var(--world-photo-opacity);overflow:hidden}.brand-world-art .world-photo img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(var(--world-photo-saturation)) contrast(1.05) brightness(var(--world-photo-brightness));transform:scale(1.008)}
.brand-world-art[data-world-photo="true"]{--world-photo-brightness:.92;--world-photo-saturation:.94;--world-vignette:0%;--world-glow-strength:18%}
.brand-world-art[data-world-photo="true"][data-scene-light="amber"]{--world-photo-saturation:.98}
.brand-world-art .world-photo-veil{position:absolute;inset:0;z-index:1;opacity:var(--world-veil-opacity);background:radial-gradient(ellipse 92% 90% at center,transparent 54%,color-mix(in srgb,var(--ink) 32%,transparent) 100%),radial-gradient(ellipse 68% 76% at var(--world-light-x) var(--world-light-y),color-mix(in srgb,var(--scene-glow) 15%,transparent),transparent 60%),linear-gradient(180deg,transparent 0 55%,color-mix(in srgb,var(--ink) 12%,transparent) 68%,color-mix(in srgb,var(--ink) 78%,transparent) 100%);mix-blend-mode:normal}
.brand-world-art .world-atmosphere{position:absolute;inset:0;z-index:2;background-image:repeating-radial-gradient(circle at 17% 23%,color-mix(in srgb,var(--ink) 34%,transparent) 0 .45px,transparent .7px 3px),repeating-linear-gradient(117deg,color-mix(in srgb,var(--paper) 26%,transparent) 0 1px,transparent 1px 5px);background-size:7px 7px,11px 11px;mix-blend-mode:soft-light;opacity:.03}
.brand-world-art .world-layer{position:absolute;height:auto;color:inherit}
.brand-world-art .world-layer-back{z-index:3;right:-34%;bottom:-38%;width:170%;opacity:.07;transform:translateX(var(--world-shift)) rotate(var(--world-turn));transform-origin:center;filter:blur(4px)}
.brand-world-art .world-focus-halo{position:absolute;z-index:4;left:-3%;bottom:-1%;width:74vw;height:58%;background:radial-gradient(ellipse at 37% 68%,color-mix(in srgb,var(--scene-glow) 19%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 38%,transparent 70%);filter:blur(10px);opacity:.95}
.brand-world-art .world-layer-focus{z-index:5;left:0;right:auto;top:auto;bottom:-5%;width:clamp(45vw,min(68vw,145svh),70vw);opacity:.34;transform:none;transform-origin:center bottom;filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--ink) 42%,transparent))}
.brand-world-art .world-layer-pattern{inset:0;z-index:6;width:auto;height:auto;opacity:.16;overflow:hidden}
.brand-world-art .world-stop-light{stop-color:color-mix(in srgb,var(--scene-glow) 72%,var(--paper))}.brand-world-art .world-stop-mid{stop-color:color-mix(in srgb,var(--accent) 72%,var(--scene-glow))}.brand-world-art .world-stop-base{stop-color:color-mix(in srgb,var(--ink) 78%,var(--accent))}
.brand-world-art .world-stroke-light{stop-color:color-mix(in srgb,var(--scene-glow) 42%,var(--paper))}.brand-world-art .world-stroke-mid{stop-color:color-mix(in srgb,var(--accent-2) 68%,var(--scene-glow))}.brand-world-art .world-stroke-base{stop-color:color-mix(in srgb,var(--ink) 64%,var(--accent))}
.brand-world-art .world-fill{fill:var(--world-fill-paint);stroke:none}.brand-world-art .world-fill-soft{fill:var(--world-fill-paint);stroke:none;opacity:.72}
.brand-world-art .world-stroke{fill:none;stroke:var(--world-stroke-paint);stroke-width:4;vector-effect:non-scaling-stroke}.brand-world-art .world-heavy{stroke-width:7}.brand-world-art .world-faint{opacity:.34;stroke-width:2}
.brand-world-art .world-number{fill:var(--world-fill-paint);stroke:none;font:800 132px/1 ui-monospace,monospace;letter-spacing:-.08em;opacity:.72}
.brand-world-art .world-accent{position:absolute;display:block;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene-glow) 82%,transparent),transparent);transform-origin:left center}
.brand-world-art .world-accent-a{left:-4%;top:19%;width:48%;height:2px;transform:rotate(-13deg)}.brand-world-art .world-accent-b{left:5%;top:31%;width:34%;height:1px;transform:rotate(-13deg)}.brand-world-art .world-accent-c{left:68%;top:13%;width:28%;height:1px;transform:rotate(18deg)}
.brand-world-art .world-motif-fragment{position:absolute;right:-1%;top:9%;width:clamp(82px,10vw,150px);height:clamp(62px,7.5vw,112px);overflow:hidden;opacity:.88}
.brand-world-art .world-near-motif{position:absolute;left:-45%;top:-28%;width:185%;height:auto}.brand-world-art .world-motif-fragment-secondary{display:none}
.broadcast-copy,.broadcast-login,.forge-emblem,.forge-copy,.match-title,.match-auth,.local-copy,.local-story>aside,.event-message,.event-login,.minimal-number,.minimal-copy,.minimal-intro>div:last-child{position:relative;z-index:3}
.forge-stage>.brand-world-art,.minimal-intro>.brand-world-art{color:var(--accent)}.match-console>.brand-world-art{opacity:.96}
.brand-world-art[data-world-composition="horizon"]{--world-focus-left:0;--world-focus-bottom:-4%;--world-focus-width:70vw}.brand-world-art[data-world-composition="horizon"] .world-layer-back{right:-42%;bottom:-45%;width:190%;transform:translateX(var(--world-shift)) rotate(calc(var(--world-turn) * .35))}.brand-world-art[data-world-composition="horizon"] .world-layer-focus{left:0;right:auto;top:auto;bottom:-4%;width:clamp(45vw,min(70vw,145svh),70vw);transform:none}
.brand-world-art[data-world-composition="frame"]{--world-focus-left:4vw;--world-focus-bottom:-2%;--world-focus-width:62vw}.brand-world-art[data-world-composition="frame"] .world-layer-back{right:-55%;bottom:-34%;width:168%;transform:translateX(var(--world-shift)) rotate(var(--world-turn))}.brand-world-art[data-world-composition="frame"] .world-layer-focus{left:4vw;right:auto;top:auto;bottom:-2%;width:clamp(45vw,min(62vw,145svh),70vw);transform:none}
.brand-world-art[data-world-composition="monument"]{--world-focus-left:1vw;--world-focus-bottom:-7%;--world-focus-width:70vw}.brand-world-art[data-world-composition="monument"] .world-layer-back{right:-30%;bottom:-27%;width:150%;transform:translateX(var(--world-shift)) rotate(calc(var(--world-turn) * .4))}.brand-world-art[data-world-composition="monument"] .world-layer-focus{left:1vw;right:auto;top:auto;bottom:-7%;width:clamp(45vw,min(70vw,150svh),70vw);transform:none}
.brand-world-art[data-world-composition="motion"]{--world-focus-left:3vw;--world-focus-bottom:-3%;--world-focus-width:60vw}.brand-world-art[data-world-composition="motion"] .world-layer-back{right:-45%;bottom:-52%;width:182%;transform:translateX(var(--world-shift)) rotate(calc(-10deg + var(--world-turn)))}.brand-world-art[data-world-composition="motion"] .world-layer-focus{left:3vw;right:auto;top:auto;bottom:-3%;width:clamp(45vw,min(60vw,145svh),70vw);transform:none}.brand-world-art[data-world-composition="motion"] .world-accent-a{top:12%;width:62%;transform:rotate(-16deg)}.brand-world-art[data-world-composition="motion"] .world-accent-b{top:27%;width:48%;transform:rotate(-16deg)}
.brand-world-art[data-world-composition="immersive"]{--world-vignette:48%;--world-focus-left:0;--world-focus-bottom:-8%;--world-focus-width:70vw}.brand-world-art[data-world-composition="immersive"] .world-layer-back{right:-50%;bottom:-48%;width:198%;transform:translateX(var(--world-shift)) rotate(calc(var(--world-turn) * .45))}.brand-world-art[data-world-composition="immersive"] .world-layer-focus{left:0;right:auto;top:auto;bottom:-8%;width:clamp(45vw,min(70vw,150svh),70vw);transform:none}
.brand-world-art[data-world-treatment="silhouette"]{--world-vignette:55%;--world-glow-strength:18%}.brand-world-art[data-world-treatment="silhouette"] .world-layer-back{display:none}.brand-world-art[data-world-treatment="silhouette"] .world-layer-focus{opacity:.46}.brand-world-art[data-world-treatment="silhouette"] .world-fill-soft{opacity:.9}.brand-world-art[data-world-treatment="silhouette"] .world-stroke{stroke-width:7}.brand-world-art[data-world-treatment="silhouette"] .world-heavy{stroke-width:11}
.brand-world-art[data-world-treatment="linework"]{--world-vignette:30%;--world-glow-strength:18%;--world-base-top:color-mix(in srgb,var(--panel) 58%,transparent)}.brand-world-art[data-world-treatment="linework"] .world-layer-back{display:block;right:auto;top:auto;left:var(--world-focus-left);bottom:var(--world-focus-bottom);width:clamp(45vw,min(var(--world-focus-width),145svh),70vw);opacity:.14;transform:none;filter:blur(7px) saturate(1.25)}.brand-world-art[data-world-treatment="linework"] .world-layer-focus{opacity:.38;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 48%,transparent))}.brand-world-art[data-world-treatment="linework"] .world-fill,.brand-world-art[data-world-treatment="linework"] .world-fill-soft{fill:none;stroke:var(--world-stroke-paint);stroke-width:3}.brand-world-art[data-world-treatment="linework"] .world-stroke{stroke-width:3}.brand-world-art[data-world-treatment="linework"] .world-heavy{stroke-width:5}
.brand-world-art[data-world-treatment="pattern"]{--world-vignette:45%;--world-glow-strength:19%}.brand-world-art[data-world-treatment="pattern"] .world-layer-back{opacity:.05}.brand-world-art[data-world-treatment="pattern"] .world-layer-focus{opacity:.31}.brand-world-art[data-world-treatment="pattern"] .world-layer-pattern{opacity:.11;background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent-2) 42%,transparent) 0 1px,transparent 1px 32px);-webkit-mask-image:linear-gradient(90deg,#000 0 58%,transparent 82%);mask-image:linear-gradient(90deg,#000 0 58%,transparent 82%)}.brand-world-art[data-world-treatment="pattern"] .world-accent{display:none}.brand-world-art[data-world-treatment="pattern"] .world-motif-fragment{display:block;left:2%;right:auto;top:10%;width:clamp(82px,11vw,150px);height:auto;overflow:visible;opacity:1}.brand-world-art[data-world-treatment="pattern"] .world-motif-fragment-secondary{top:55%;left:8%}.brand-world-art[data-world-treatment="pattern"] .world-near-motif{position:relative;left:auto;top:auto;width:100%;filter:drop-shadow(15vw 0 0 color-mix(in srgb,var(--accent-2) 72%,transparent)) drop-shadow(30vw 0 0 color-mix(in srgb,var(--accent) 62%,transparent)) drop-shadow(45vw 0 0 color-mix(in srgb,var(--accent-2) 56%,transparent))}
.brand-world-art[data-world-family="nature"] .world-accent{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--scene-glow) 78%,transparent);box-shadow:28px -13px 0 color-mix(in srgb,var(--accent) 68%,transparent),58px 12px 0 color-mix(in srgb,var(--scene-glow) 54%,transparent),94px -4px 0 color-mix(in srgb,var(--paper) 44%,transparent)}.brand-world-art[data-world-family="nature"] .world-accent-a{left:8%;top:17%;transform:none}.brand-world-art[data-world-family="nature"] .world-accent-b{left:72%;top:31%;transform:scale(.72)}.brand-world-art[data-world-family="nature"] .world-accent-c{left:65%;top:15%;width:120px;height:34px;border:1px solid color-mix(in srgb,var(--scene-glow) 52%,transparent);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-shadow:none;background:none;transform:rotate(12deg)}
.brand-world-art[data-world-family="premium"] .world-accent,.brand-world-art[data-world-family="heritage"] .world-accent{width:7px;height:7px;background:color-mix(in srgb,var(--paper) 58%,var(--scene-glow));transform:rotate(45deg);box-shadow:0 0 12px color-mix(in srgb,var(--scene-glow) 48%,transparent)}.brand-world-art[data-world-family="premium"] .world-accent-a,.brand-world-art[data-world-family="heritage"] .world-accent-a{left:9%;top:16%}.brand-world-art[data-world-family="premium"] .world-accent-b,.brand-world-art[data-world-family="heritage"] .world-accent-b{left:45%;top:11%;transform:rotate(45deg) scale(.7)}.brand-world-art[data-world-family="premium"] .world-accent-c,.brand-world-art[data-world-family="heritage"] .world-accent-c{left:83%;top:24%;transform:rotate(45deg) scale(.55)}
.brand-world-art[data-world-family="digital"] .world-layer-pattern,.brand-world-art[data-world-family="gaming"] .world-layer-pattern{background-image:linear-gradient(color-mix(in srgb,var(--scene-glow) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--scene-glow) 22%,transparent) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,transparent 74%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,transparent 74%)}.brand-world-art[data-world-family="digital"] .world-accent,.brand-world-art[data-world-family="gaming"] .world-accent{width:5px;height:5px;background:var(--scene-glow);box-shadow:0 0 10px color-mix(in srgb,var(--scene-glow) 64%,transparent);transform:none}
.brand-world-art[data-world-family="animal"] .world-accent{width:34px;height:48px;border-left:2px solid color-mix(in srgb,var(--accent-2) 62%,transparent);border-radius:50%;background:none}.brand-world-art[data-world-family="animal"] .world-accent-a{left:4%;top:18%;transform:rotate(24deg)}.brand-world-art[data-world-family="animal"] .world-accent-b{left:7%;top:19%;transform:rotate(36deg) scale(.72)}.brand-world-art[data-world-family="animal"] .world-accent-c{left:10%;top:21%;transform:rotate(48deg) scale(.5)}.brand-world-art[data-world-family="animal"] .world-motif-fragment{left:2%;right:auto;top:62%}
.brand-world-art[data-world-family="motion"] .world-accent-a{top:12%;width:66%;height:3px;transform:rotate(-16deg)}.brand-world-art[data-world-family="motion"] .world-accent-b{top:29%;width:52%;height:2px;transform:rotate(-16deg)}.brand-world-art[data-world-family="motion"] .world-accent-c{left:55%;top:8%;width:38%;height:1px;transform:rotate(-16deg)}
body[data-brand-treatment="silhouette"] .login-card{border-color:color-mix(in srgb,var(--accent-2) 55%,transparent);background:color-mix(in srgb,var(--ink) 96%,var(--panel));box-shadow:12px 12px 0 color-mix(in srgb,var(--accent) 72%,transparent)}
body[data-brand-treatment="linework"] .login-card{border:1px solid color-mix(in srgb,var(--accent-2) 65%,transparent);background:color-mix(in srgb,var(--ink) 96%,var(--panel));box-shadow:0 18px 48px #0005}
body[data-brand-treatment="pattern"] .login-card{background:color-mix(in srgb,var(--ink) 97%,var(--panel));box-shadow:0 22px 70px #0009}
body[data-brand-treatment="cinematic"] .login-card{background:color-mix(in srgb,var(--panel) 94%,var(--ink))}
.login-card{position:relative;z-index:4;isolation:isolate;max-width:100%;background:color-mix(in srgb,var(--panel) 96%,var(--ink));backdrop-filter:none}
.login-card .field-shell input{border-color:color-mix(in srgb,var(--accent-2) 34%,#fff);background:color-mix(in srgb,var(--ink) 94%,var(--panel));color:#fff}
.login-options,.login-help{min-width:0;flex-wrap:wrap}.login-options a,.login-help a{max-width:100%;overflow-wrap:anywhere}
body[data-concept="minimal"] .minimal-login{padding:28px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--white) 97%,var(--paper));color:var(--ink);box-shadow:0 20px 58px #172d3324}
body[data-concept="minimal"] .minimal-login label>span:first-child,body[data-concept="minimal"] .minimal-login .login-options,body[data-concept="minimal"] .minimal-login .login-help{color:var(--ink)}
body[data-concept="minimal"] .minimal-login .field-shell input{border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:max(3px,calc(var(--radius) - 2px));background:var(--white);color:var(--ink)}
body[data-concept="minimal"] .minimal-login>button{border-radius:max(3px,calc(var(--radius) - 2px));background:var(--ink);color:var(--white)}
body[data-concept="forge"] .brand-world-art,body[data-concept="minimal"] .brand-world-art{--world-vignette:11%;--world-glow-strength:17%;--world-base-top:color-mix(in srgb,var(--white) 82%,transparent);--world-base-bottom:color-mix(in srgb,var(--paper) 88%,transparent);--world-horizon:color-mix(in srgb,var(--ink) 11%,transparent);color:var(--ink)}
body[data-concept="forge"] .brand-world-art .world-stop-light,body[data-concept="minimal"] .brand-world-art .world-stop-light{stop-color:color-mix(in srgb,var(--scene-glow) 52%,var(--white))}body[data-concept="forge"] .brand-world-art .world-stop-mid,body[data-concept="minimal"] .brand-world-art .world-stop-mid{stop-color:color-mix(in srgb,var(--accent) 66%,var(--scene-glow))}body[data-concept="forge"] .brand-world-art .world-stop-base,body[data-concept="minimal"] .brand-world-art .world-stop-base{stop-color:color-mix(in srgb,var(--ink) 74%,var(--accent))}
body[data-concept="forge"] .brand-world-art .world-stroke-light,body[data-concept="minimal"] .brand-world-art .world-stroke-light{stop-color:color-mix(in srgb,var(--scene-glow) 46%,var(--ink))}body[data-concept="forge"] .brand-world-art .world-stroke-mid,body[data-concept="minimal"] .brand-world-art .world-stroke-mid{stop-color:color-mix(in srgb,var(--ink) 58%,var(--scene-glow))}body[data-concept="forge"] .brand-world-art .world-stroke-base,body[data-concept="minimal"] .brand-world-art .world-stroke-base{stop-color:var(--ink)}
body[data-concept="forge"][data-brand-treatment="silhouette"] .brand-world-art,body[data-concept="minimal"][data-brand-treatment="silhouette"] .brand-world-art{--world-vignette:20%}
body[data-concept="forge"] .brand-world-art[data-world-photo="true"],body[data-concept="minimal"] .brand-world-art[data-world-photo="true"]{inset:0;border:0;border-radius:0;box-shadow:none;background:transparent}
body[data-concept="forge"] .forge-stage:has(>.brand-world-art[data-world-photo="true"])::before{z-index:1}
body[data-concept="forge"] .brand-world-art[data-world-photo="true"]{--world-photo-brightness:1;--world-photo-saturation:.92}
body[data-concept="forge"] .brand-world-art[data-world-photo="true"] .world-photo img{object-position:72% center}
body[data-concept="forge"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(90deg,var(--white) 0%,color-mix(in srgb,var(--white) 98%,transparent) 34%,color-mix(in srgb,var(--paper) 88%,transparent) 49%,color-mix(in srgb,var(--white) 18%,transparent) 72%,transparent 100%),radial-gradient(ellipse 58% 76% at 82% 34%,color-mix(in srgb,var(--scene-glow) 11%,transparent),transparent 68%)}
body[data-concept="minimal"] .brand-world-art[data-world-photo="true"]{--world-photo-brightness:1.03;--world-photo-saturation:.86}
body[data-concept="minimal"] .brand-world-art[data-world-photo="true"] .world-photo img{object-position:left center}
body[data-concept="minimal"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(90deg,color-mix(in srgb,var(--white) 8%,transparent) 0%,color-mix(in srgb,var(--white) 34%,transparent) 12%,color-mix(in srgb,var(--paper) 88%,transparent) 30%,color-mix(in srgb,var(--white) 98%,transparent) 43%,var(--white) 58%,var(--white) 100%),radial-gradient(ellipse 48% 76% at 8% 30%,color-mix(in srgb,var(--scene-glow) 9%,transparent),transparent 72%)}
.broadcast-hero:has(>.brand-world-art[data-world-photo="true"]) .broadcast-copy{text-shadow:0 2px 20px #000c,0 1px 3px #000}.match-console:has(>.brand-world-art[data-world-photo="true"]) .match-copy h1{text-shadow:0 2px 20px #000c,0 1px 3px #000}.match-console:has(>.brand-world-art[data-world-photo="true"]) .match-copy p{text-shadow:0 2px 14px #000d}.event-stage:has(>.brand-world-art[data-world-photo="true"]) .event-message{text-shadow:0 2px 22px #000d,0 1px 3px #000}
@media(max-width:720px){.brand-world-art{--world-vignette:46%}.brand-world-art .world-layer-back{right:-88%;bottom:-10%;width:194vw;opacity:.06}.brand-world-art .world-focus-halo{left:-8%;bottom:38%;width:90vw;height:34%}.brand-world-art .world-layer-focus{opacity:.3}.brand-world-art[data-world-composition="horizon"] .world-layer-focus{left:0;right:auto;top:auto;bottom:8%;width:clamp(60vw,min(70vw,90svh),70vw)}.brand-world-art[data-world-composition="frame"] .world-layer-focus{left:4vw;right:auto;top:auto;bottom:43%;width:clamp(60vw,min(62vw,90svh),70vw)}.brand-world-art[data-world-composition="monument"] .world-layer-focus{left:1vw;right:auto;top:auto;bottom:42%;width:clamp(60vw,min(70vw,90svh),70vw)}.brand-world-art[data-world-composition="motion"] .world-layer-focus{left:3vw;right:auto;top:auto;bottom:44%;width:clamp(60vw,min(60vw,90svh),70vw)}.brand-world-art[data-world-composition="immersive"] .world-layer-focus{left:0;right:auto;top:auto;bottom:40%;width:clamp(60vw,min(70vw,90svh),70vw)}.brand-world-art[data-world-treatment="linework"] .world-layer-back{bottom:42%;width:64vw}.brand-world-art .world-layer-pattern{opacity:.13}.brand-world-art[data-world-treatment="pattern"] .world-layer-pattern{opacity:.09}.local-portrait>.brand-world-art .world-layer-focus{left:3vw;right:auto;top:auto;bottom:-2%}body[data-concept="forge"] .brand-world-art[data-world-photo="true"],body[data-concept="minimal"] .brand-world-art[data-world-photo="true"]{inset:0;opacity:1}body[data-concept="forge"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(180deg,var(--white) 0%,color-mix(in srgb,var(--white) 92%,transparent) 34%,color-mix(in srgb,var(--paper) 30%,transparent) 62%,transparent 100%),radial-gradient(ellipse at 72% 76%,color-mix(in srgb,var(--scene-glow) 10%,transparent),transparent 68%)}body[data-concept="minimal"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(180deg,color-mix(in srgb,var(--white) 18%,transparent) 0%,color-mix(in srgb,var(--white) 88%,transparent) 34%,var(--white) 55%,var(--white) 100%)}}

body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card{border-color:color-mix(in srgb,var(--ink) 18%,transparent);background:var(--theme-panel);color:var(--theme-panel-text);box-shadow:0 24px 64px color-mix(in srgb,var(--ink) 20%,transparent)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .login-heading p,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card label>span:first-child,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .login-options,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .login-help{color:color-mix(in srgb,var(--ink) 78%,transparent)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .field-shell input{border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);background:var(--paper);color:var(--ink)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .field-shell input::placeholder{color:color-mix(in srgb,var(--ink) 48%,transparent)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .login-help i{background:color-mix(in srgb,var(--ink) 22%,transparent)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card>button,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .minimal-login>button{background:var(--accent);color:var(--action-text)}

body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .featured-banner,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .odds-ticker,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .verified-feed,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .feed-boundary,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .sports-rail,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .minimal-content,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .forge-modules,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .event-support{border-color:color-mix(in srgb,var(--ink) 13%,transparent);background:var(--theme-page);color:var(--ink)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .featured-art,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .preview-event-grid article,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .event-card{border-color:color-mix(in srgb,var(--ink) 15%,transparent);background:var(--white);color:var(--ink)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .section-heading span,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .featured-banner>div>span,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .featured-banner p,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .featured-banner>a,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .preview-event-grid small,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .event-card small,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .event-card b,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .event-card em,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .price-slots b,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .sport-links b{color:var(--panel)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .section-heading p,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .preview-event-grid article>span,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .sport-links em,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .feed-empty{color:color-mix(in srgb,var(--ink) 68%,transparent)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .price-slots em,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .odds-ticker em,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .sport-links,
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .sport-links a{border-color:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .price-slots em{background:var(--white);color:var(--ink)}

body[data-theme-mode="light"]{background:var(--theme-page);color:var(--ink)}
body[data-theme-mode="light"] .broadcast-layout,
body[data-theme-mode="light"] .forge-layout,
body[data-theme-mode="light"] .match-layout,
body[data-theme-mode="light"] .local-layout,
body[data-theme-mode="light"] .event-layout,
body[data-theme-mode="light"] .minimal-layout{background:var(--theme-page);color:var(--ink)}
body[data-theme-mode="light"] .site-header,
body[data-theme-mode="light"] .site-header--forge,
body[data-theme-mode="light"] .site-header--minimal{border-color:color-mix(in srgb,var(--ink) 16%,transparent);background:var(--theme-chrome);color:var(--theme-chrome-text)}
body[data-theme-mode="light"] .site-header .brand-mark,
body[data-theme-mode="light"] .site-header nav,
body[data-theme-mode="light"] .site-header .market-label{color:var(--ink)}
body[data-theme-mode="light"] .site-header nav a:hover,
body[data-theme-mode="light"] .site-header nav a:focus-visible{color:var(--accent)}
body[data-theme-mode="light"] .broadcast-hero,
body[data-theme-mode="light"] .match-console,
body[data-theme-mode="light"] .event-stage,
body[data-theme-mode="light"] .forge-stage,
body[data-theme-mode="light"] .minimal-intro,
body[data-theme-mode="light"] .local-copy{background:var(--theme-hero);color:var(--theme-hero-text)}
body[data-theme-mode="light"] .forge-shell,
body[data-theme-mode="light"] .local-story{background:var(--theme-page);color:var(--ink)}
body[data-theme-mode="light"] .forge-access,
body[data-theme-mode="light"] .local-story>aside{border-color:color-mix(in srgb,var(--ink) 12%,transparent);background:var(--theme-page);color:var(--ink)}
body[data-theme-mode="light"] .hero-copy h1,
body[data-theme-mode="light"] .hero-copy p,
body[data-theme-mode="light"] .forge-copy h1,
body[data-theme-mode="light"] .forge-copy p,
body[data-theme-mode="light"] .match-copy h1,
body[data-theme-mode="light"] .match-copy p,
body[data-theme-mode="light"] .event-copy h1,
body[data-theme-mode="light"] .event-copy p,
body[data-theme-mode="light"] .minimal-copy h1,
body[data-theme-mode="light"] .minimal-copy p,
body[data-theme-mode="light"] .forge-emblem .brand strong,
body[data-theme-mode="light"] .forge-emblem .brand-mark{color:var(--ink)}
body[data-theme-mode="light"] .match-index{border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
body[data-theme-mode="light"] .match-index span{border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
body[data-theme-mode="light"] .match-index em{color:color-mix(in srgb,var(--ink) 65%,transparent)}
body[data-theme-mode="light"] .broadcast-hero::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 92%,transparent) 38%,transparent 68%,color-mix(in srgb,var(--paper) 58%,transparent) 100%)}
body[data-theme-mode="light"] .event-stage::after{background:linear-gradient(90deg,var(--paper) 0 34%,color-mix(in srgb,var(--paper) 88%,transparent) 52%,color-mix(in srgb,var(--paper) 46%,transparent) 72%,var(--paper) 100%)}
body[data-theme-mode="light"] .brand-world-art{--world-vignette:10%;--world-glow-strength:13%;--world-base-top:color-mix(in srgb,var(--white) 92%,transparent);--world-base-bottom:color-mix(in srgb,var(--paper) 94%,transparent);--world-horizon:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--accent)}
body[data-theme-mode="light"] .brand-world-art[data-world-photo="true"]{--world-photo-brightness:1.04;--world-photo-saturation:.82}
body[data-theme-mode="light"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 96%,transparent) 34%,color-mix(in srgb,var(--white) 76%,transparent) 55%,color-mix(in srgb,var(--paper) 22%,transparent) 78%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--white) 12%,transparent),color-mix(in srgb,var(--paper) 76%,transparent))}
body[data-theme-mode="light"] .broadcast-hero:has(>.brand-world-art[data-world-photo="true"]) .broadcast-copy,
body[data-theme-mode="light"] .match-console:has(>.brand-world-art[data-world-photo="true"]) .match-copy h1,
body[data-theme-mode="light"] .match-console:has(>.brand-world-art[data-world-photo="true"]) .match-copy p,
body[data-theme-mode="light"] .event-stage:has(>.brand-world-art[data-world-photo="true"]) .event-message{text-shadow:none}
body[data-theme-mode="light"] .site-footer{border-color:color-mix(in srgb,var(--ink) 14%,transparent);background:var(--white);color:var(--ink)}

body[data-theme-mode="vibrant"]{background:var(--theme-hero);color:var(--theme-hero-text)}
body[data-theme-mode="vibrant"] .broadcast-layout,
body[data-theme-mode="vibrant"] .forge-layout,
body[data-theme-mode="vibrant"] .match-layout,
body[data-theme-mode="vibrant"] .local-layout,
body[data-theme-mode="vibrant"] .event-layout,
body[data-theme-mode="vibrant"] .minimal-layout,
body[data-theme-mode="vibrant"] .forge-shell,
body[data-theme-mode="vibrant"] .local-story{background:var(--theme-hero);color:var(--theme-hero-text)}
body[data-theme-mode="vibrant"] .site-header,
body[data-theme-mode="vibrant"] .site-header--forge,
body[data-theme-mode="vibrant"] .site-header--minimal{border-color:#ffffff30;background:var(--theme-chrome);color:var(--theme-chrome-text)}
body[data-theme-mode="vibrant"] .site-header .brand-mark,
body[data-theme-mode="vibrant"] .site-header nav,
body[data-theme-mode="vibrant"] .site-header .market-label{color:#ffffff}
body[data-theme-mode="vibrant"] .broadcast-hero,
body[data-theme-mode="vibrant"] .match-console,
body[data-theme-mode="vibrant"] .event-stage,
body[data-theme-mode="vibrant"] .forge-stage,
body[data-theme-mode="vibrant"] .forge-access,
body[data-theme-mode="vibrant"] .minimal-intro,
body[data-theme-mode="vibrant"] .local-copy,
body[data-theme-mode="vibrant"] .local-story>aside{background:var(--theme-hero);color:var(--theme-hero-text)}
body[data-theme-mode="vibrant"] .hero-copy h1,
body[data-theme-mode="vibrant"] .hero-copy p,
body[data-theme-mode="vibrant"] .forge-copy h1,
body[data-theme-mode="vibrant"] .forge-copy p,
body[data-theme-mode="vibrant"] .match-copy h1,
body[data-theme-mode="vibrant"] .match-copy p,
body[data-theme-mode="vibrant"] .event-copy h1,
body[data-theme-mode="vibrant"] .event-copy p,
body[data-theme-mode="vibrant"] .minimal-copy h1,
body[data-theme-mode="vibrant"] .minimal-copy p,
body[data-theme-mode="vibrant"] .forge-emblem .brand strong,
body[data-theme-mode="vibrant"] .forge-emblem .brand-mark{color:#ffffff}
body[data-theme-mode="vibrant"] .minimal-divider{background:#ffffff48}
body[data-theme-mode="vibrant"] .match-index,
body[data-theme-mode="vibrant"] .match-index span{border-color:#ffffff38}
body[data-theme-mode="vibrant"] .match-index em{color:#ffffffbf}
body[data-theme-mode="vibrant"] .broadcast-hero::after{background:linear-gradient(90deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 82%,transparent) 43%,transparent 70%,color-mix(in srgb,var(--panel) 74%,transparent) 100%)}
body[data-theme-mode="vibrant"] .event-stage::after{background:linear-gradient(90deg,var(--panel) 0 35%,color-mix(in srgb,var(--panel) 70%,transparent) 58%,color-mix(in srgb,var(--panel) 82%,transparent) 100%)}
body[data-theme-mode="vibrant"] .brand-world-art{--world-vignette:18%;--world-glow-strength:20%;--world-base-top:color-mix(in srgb,var(--panel) 92%,transparent);--world-base-bottom:color-mix(in srgb,var(--panel) 98%,var(--ink));--world-horizon:color-mix(in srgb,var(--ink) 34%,transparent);color:var(--accent-2)}
body[data-theme-mode="vibrant"] .brand-world-art[data-world-photo="true"]{--world-photo-brightness:.92;--world-photo-saturation:1.05}
body[data-theme-mode="vibrant"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(90deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 88%,transparent) 38%,color-mix(in srgb,var(--panel) 52%,transparent) 62%,color-mix(in srgb,var(--panel) 76%,transparent) 100%),radial-gradient(ellipse at var(--world-light-x) var(--world-light-y),color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 64%)}
body[data-theme-mode="vibrant"] .site-footer{border-color:#ffffff2b;background:var(--theme-chrome);color:#ffffff}

@media(max-width:720px){
  body[data-theme-mode="light"] .broadcast-hero::after,
  body[data-theme-mode="light"] .event-stage::after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 16%,transparent) 0 26%,color-mix(in srgb,var(--paper) 92%,transparent) 48%,var(--paper) 62%,var(--paper) 100%)}
  body[data-theme-mode="light"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(180deg,color-mix(in srgb,var(--white) 12%,transparent) 0 25%,color-mix(in srgb,var(--paper) 88%,transparent) 50%,var(--paper) 66%,var(--paper) 100%)}
  body[data-theme-mode="vibrant"] .broadcast-hero::after,
  body[data-theme-mode="vibrant"] .event-stage::after{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 22%,transparent) 0 28%,color-mix(in srgb,var(--panel) 88%,transparent) 49%,var(--panel) 63%,var(--panel) 100%)}
  body[data-theme-mode="vibrant"] .brand-world-art[data-world-photo="true"] .world-photo-veil{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 18%,transparent) 0 25%,color-mix(in srgb,var(--panel) 82%,transparent) 50%,var(--panel) 68%,var(--panel) 100%)}
}


body[data-scene-style="clean"]{--clean-field:var(--ink);--clean-text:var(--white);--clean-muted:color-mix(in srgb,var(--white) 76%,transparent);--clean-panel:var(--white);background:var(--clean-field);color:var(--clean-text)}
body[data-scene-style="clean"][data-theme-mode="vibrant"]{--clean-field:var(--panel)}
body[data-scene-style="clean"][data-theme-mode="light"]{--clean-field:var(--paper);--clean-text:var(--ink);--clean-muted:color-mix(in srgb,var(--ink) 66%,transparent)}
.clean-surface{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;background:var(--clean-field);opacity:1;pointer-events:none}
.clean-surface[data-clean-treatment="flat-brand"]{background:var(--clean-field)}
.clean-surface[data-clean-treatment="soft-gradient"]{background:linear-gradient(118deg,color-mix(in srgb,var(--clean-field) 72%,var(--scene-glow)) 0%,var(--clean-field) 48%,color-mix(in srgb,var(--clean-field) 76%,var(--panel)) 100%)}
.clean-surface[data-clean-treatment="subtle-texture"]{background:radial-gradient(circle at 24% 36%,color-mix(in srgb,var(--scene-glow) 18%,transparent) 0%,transparent 46%),repeating-linear-gradient(125deg,color-mix(in srgb,var(--clean-text) 8%,transparent) 0 1px,transparent 1px 7px),var(--clean-field)}
body[data-scene-style="clean"][data-theme-mode="light"] .clean-surface[data-clean-treatment="soft-gradient"]{background:linear-gradient(118deg,color-mix(in srgb,var(--paper) 80%,var(--accent-2)) 0%,var(--paper) 52%,color-mix(in srgb,var(--paper) 86%,var(--white)) 100%)}
body[data-scene-style="clean"][data-theme-mode="light"] .clean-surface[data-clean-treatment="subtle-texture"]{background:radial-gradient(circle at 24% 36%,color-mix(in srgb,var(--accent-2) 22%,transparent) 0%,transparent 46%),repeating-linear-gradient(125deg,color-mix(in srgb,var(--ink) 6%,transparent) 0 1px,transparent 1px 7px),var(--paper)}
body[data-scene-style="clean"] .site-header,
body[data-scene-style="clean"] .site-header--forge,
body[data-scene-style="clean"] .site-header--minimal{border-color:color-mix(in srgb,var(--clean-text) 18%,transparent);background:var(--clean-field);color:var(--clean-text)}
body[data-scene-style="clean"] .site-header .brand,
body[data-scene-style="clean"] .site-header .brand-mark,
body[data-scene-style="clean"] .site-header nav,
body[data-scene-style="clean"] .site-header .market-label,
body[data-scene-style="clean"] .site-header .menu-button{color:var(--clean-text)}
body[data-scene-style="clean"] .site-footer{border-color:color-mix(in srgb,var(--clean-text) 16%,transparent);background:var(--clean-field);color:var(--clean-muted)}
body[data-scene-style="clean"] .broadcast-hero,
body[data-scene-style="clean"] .forge-stage,
body[data-scene-style="clean"] .match-console,
body[data-scene-style="clean"] .local-story,
body[data-scene-style="clean"] .event-stage,
body[data-scene-style="clean"] .minimal-intro{position:relative;isolation:isolate;background:var(--clean-field);color:var(--clean-text)}
body[data-scene-style="clean"] .broadcast-hero::after,
body[data-scene-style="clean"] .forge-stage::before,
body[data-scene-style="clean"] .forge-stage::after,
body[data-scene-style="clean"] .forge-access::before,
body[data-scene-style="clean"] .match-console::before,
body[data-scene-style="clean"] .event-stage::after,
body[data-scene-style="clean"] .minimal-intro::before{content:none}
body[data-scene-style="clean"] .broadcast-copy,
body[data-scene-style="clean"] .forge-emblem,
body[data-scene-style="clean"] .forge-copy,
body[data-scene-style="clean"] .match-title,
body[data-scene-style="clean"] .local-copy,
body[data-scene-style="clean"] .event-message,
body[data-scene-style="clean"] .minimal-copy,
body[data-scene-style="clean"] .match-auth,
body[data-scene-style="clean"] .event-login{position:relative;z-index:2}
body[data-scene-style="clean"] .hero-copy h1,
body[data-scene-style="clean"] .hero-copy p,
body[data-scene-style="clean"] .forge-copy h1,
body[data-scene-style="clean"] .forge-copy p,
body[data-scene-style="clean"] .match-copy h1,
body[data-scene-style="clean"] .match-copy p,
body[data-scene-style="clean"] .local-copy h1,
body[data-scene-style="clean"] .local-copy p,
body[data-scene-style="clean"] .event-copy h1,
body[data-scene-style="clean"] .event-copy p,
body[data-scene-style="clean"] .minimal-copy h1,
body[data-scene-style="clean"] .minimal-copy p,
body[data-scene-style="clean"] .forge-emblem .brand strong,
body[data-scene-style="clean"] .forge-emblem .brand-mark{color:var(--clean-text)}
body[data-scene-style="clean"] .hero-copy p,
body[data-scene-style="clean"] .forge-copy p,
body[data-scene-style="clean"] .match-copy p,
body[data-scene-style="clean"] .local-copy p,
body[data-scene-style="clean"] .event-copy p,
body[data-scene-style="clean"] .minimal-copy p{color:var(--clean-muted)}
body[data-scene-style="clean"] .forge-shell{background:var(--clean-field);color:var(--clean-text)}
body[data-scene-style="clean"] .forge-access,
body[data-scene-style="clean"] .local-story>aside{position:relative;z-index:2;background:color-mix(in srgb,var(--clean-field) 88%,#000);color:var(--white)}
body[data-scene-style="clean"][data-theme-mode="light"] .forge-access,
body[data-scene-style="clean"][data-theme-mode="light"] .local-story>aside{background:color-mix(in srgb,var(--paper) 78%,var(--ink))}
body[data-scene-style="clean"] .local-story{grid-template-columns:minmax(0,1fr) minmax(360px,440px);overflow:hidden}
body[data-scene-style="clean"] .local-portrait{position:absolute;inset:0;z-index:0;min-height:0}
body[data-scene-style="clean"] .local-copy{grid-column:1;padding-inline:clamp(38px,8vw,132px);border:0;background:transparent;color:var(--clean-text)}
body[data-scene-style="clean"] .local-story>aside{grid-column:2}
body[data-scene-style="clean"] .minimal-layout{background:var(--clean-field);color:var(--clean-text)}
body[data-scene-style="clean"] .minimal-divider{position:relative;z-index:2;background:color-mix(in srgb,var(--clean-text) 24%,transparent)}
body[data-scene-style="clean"] .login-card,
body[data-scene-style="clean"][data-concept="minimal"] .minimal-login{position:relative;z-index:4;padding:30px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:max(6px,var(--radius));background:var(--clean-panel);color:var(--ink);box-shadow:0 16px 40px color-mix(in srgb,var(--ink) 14%,transparent);backdrop-filter:none}
body[data-scene-style="clean"] .login-card label>span:first-child,
body[data-scene-style="clean"] .login-card .login-options,
body[data-scene-style="clean"] .login-card .login-help{color:color-mix(in srgb,var(--ink) 76%,transparent)}
body[data-scene-style="clean"] .login-card .field-shell input{min-height:50px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:max(4px,calc(var(--radius) - 1px));background:color-mix(in srgb,var(--paper) 72%,var(--white));color:var(--ink)}
body[data-scene-style="clean"] .login-card .field-shell input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
body[data-scene-style="clean"] .login-card>button{border-radius:max(4px,calc(var(--radius) - 1px));background:var(--accent);color:var(--action-text)}
body[data-scene-style="clean"] .event-login .login-card{background:var(--clean-panel)}
body[data-scene-style="clean"] .minimal-intro>div:last-child{position:relative;z-index:2}
@media(max-width:720px){
  body[data-scene-style="clean"] .broadcast-hero,
  body[data-scene-style="clean"] .forge-shell,
  body[data-scene-style="clean"] .match-console,
  body[data-scene-style="clean"] .local-story,
  body[data-scene-style="clean"] .event-stage,
  body[data-scene-style="clean"] .minimal-intro{min-height:calc(100svh - 64px)}
  body[data-scene-style="clean"] .broadcast-hero{padding:54px 20px 28px}
  body[data-scene-style="clean"] .broadcast-login{margin-top:34px}
  body[data-scene-style="clean"] .forge-stage{min-height:0;background:transparent}
  body[data-scene-style="clean"] .local-story{display:block}
  body[data-scene-style="clean"] .local-copy{padding:52px 22px 30px}
  body[data-scene-style="clean"] .local-story>aside{margin:0;padding:0 22px 46px;background:transparent}
  body[data-scene-style="clean"] .event-stage{padding:56px 20px 36px}
  body[data-scene-style="clean"] .event-login{margin-top:32px}
  body[data-scene-style="clean"] .minimal-intro{padding:54px 22px 48px}
}


body{--login-card-surface:color-mix(in srgb,var(--panel) 92%,var(--ink));--login-card-text:var(--white);--login-card-muted:color-mix(in srgb,var(--paper) 76%,transparent);--login-input-surface:color-mix(in srgb,var(--ink) 90%,var(--panel))}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]),body[data-scene-style="clean"]{--login-card-surface:var(--white);--login-card-text:var(--ink);--login-card-muted:color-mix(in srgb,var(--ink) 74%,transparent);--login-input-surface:color-mix(in srgb,var(--paper) 78%,var(--white))}
body .login-card,
body .forge-access .login-card,
body .event-login .login-card,
body .minimal-login{padding:30px;border:1px solid color-mix(in srgb,var(--login-card-text) 16%,transparent);border-radius:max(6px,var(--radius));background:var(--login-card-surface);color:var(--login-card-text);box-shadow:0 16px 44px #0000002e;backdrop-filter:none}
body[data-theme-mode="light"] .login-card,
body[data-theme-mode="light"] .event-login .login-card,
body[data-theme-mode="light"] .minimal-login,
body[data-scene-style="clean"] .login-card,
body[data-scene-style="clean"] .event-login .login-card,
body[data-scene-style="clean"] .minimal-login{border-color:color-mix(in srgb,var(--ink) 13%,transparent);box-shadow:0 14px 36px color-mix(in srgb,var(--ink) 13%,transparent)}
body .login-card .login-heading p,
body .login-card label>span:first-child,
body .login-card .login-options,
body .login-card .login-help{color:var(--login-card-muted)}
body .login-card .field-shell input{border:1px solid color-mix(in srgb,var(--login-card-text) 24%,transparent);border-radius:max(4px,calc(var(--radius) - 1px));background:var(--login-input-surface);color:var(--login-card-text)}
body:is([data-theme-mode="light"],[data-theme-mode="vibrant"]) .login-card .field-shell input,
body[data-scene-style="clean"] .login-card .field-shell input{border-color:color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink)}
body .minimal-login>button{border-radius:max(4px,calc(var(--radius) - 1px))}
@media(max-width:720px){
  body .login-card,
  body .forge-access .login-card,
  body .event-login .login-card,
  body .minimal-login{padding:24px}
}


body[data-designed-theme="sunset-tropics"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="sunset-tropics"] .sunset-tropics-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden;
--dt-scene-bottom:color-mix(in oklch,var(--dt-chrome) 74%,var(--dt-illustration-mid));--dt-wordmark:color-mix(in oklch,var(--dt-surface) 86%,var(--dt-scene-top));--dt-chrome:var(--dt-illustration-near);--dt-chrome-alt:color-mix(in oklch,var(--dt-chrome) 86%,var(--dt-atmosphere-far));--dt-panel:color-mix(in oklch,var(--dt-chrome) 86%,var(--dt-surface));--dt-panel-text:var(--dt-surface);--dt-border-soft:color-mix(in oklch,var(--dt-atmosphere-far) 64%,var(--dt-surface));--dt-field:var(--dt-surface);--dt-field-text:var(--dt-chrome);--dt-field-muted:color-mix(in oklch,var(--dt-chrome) 58%,var(--dt-surface));--dt-cta:var(--dt-scene-top);--dt-cta-text:var(--dt-chrome);--dt-selected:var(--dt-chrome);--dt-footer:var(--dt-chrome);--dt-footer-text:var(--dt-surface);--dt-veil:var(--dt-chrome);
--mt-cone-tint:var(--dt-scene-top);--mt-cone-top:-8%;--mt-cone-width:76%;--mt-cone-height:80%;--mt-cone-center-angle:-9deg;--mt-cone-blur:34px;--mt-cone-opacity:.86;--mt-cone-spread:26% 24%;--mt-cone-origin:34%;--mt-cone-core:34%;--mt-cone-mid:15%;--mt-cone-edge:5%;--mt-cone-tail:2%;
--mt-haze-near:var(--dt-chrome);--mt-haze-far:var(--dt-atmosphere-far);--mt-haze-bottom:-8%;--mt-haze-height:72%;--mt-haze-blur:34px;--mt-haze-spread:82% 78%;--mt-haze-origin:94%;--mt-haze-core:96%;--mt-haze-mid:68%;--mt-haze-edge:46%;--mt-haze-pool-spread:34% 30%;--mt-haze-pool-origin:32%;--mt-haze-pool-tint:color-mix(in oklch,var(--dt-scene-top) 34%,var(--dt-chrome));--mt-haze-pool-strength:20%;
--mt-geometry-height:100%;--mt-geometry-role:var(--dt-chrome);--mt-geometry-contrast:6%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-chrome);--mt-vignette-spread:82% 70%;--mt-vignette-origin:46%;--mt-vignette-clear:40%;--mt-vignette-mid:38%;--mt-vignette-edge:82%;--mt-vignette-top:34%;--mt-vignette-bottom:64%;--mt-vignette-band:16% 80%;
}
/* One scene gradient, dusk rather than midday. The old backdrop ran the raw
   accent across the whole viewport, which is the "theme as wallpaper" the
   benchmark set never does and which read bright and candied next to the other
   eight.
   The stops interpolate the accent through the palette's panel rather than its
   ink. That matters: in oklch, this palette's yellow crossed with its teal ink
   passes through green and the sunset dies, while crossing it with the panel
   passes through amber into plum, which is what dusk actually looks like. Both
   ends are the operator's own palette, so a client recolour still drives all of
   it, and the actual sun is the materials cone alone. */
body[data-designed-theme="sunset-tropics"] .sunset-tropics-page[data-premium-chrome]{background:linear-gradient(180deg,
color-mix(in oklch,color-mix(in oklch,var(--dt-scene-top) 28%,var(--panel)) 78%,var(--dt-chrome)) 0%,
color-mix(in oklch,color-mix(in oklch,var(--dt-scene-top) 14%,var(--panel)) 74%,var(--dt-chrome)) 20%,
color-mix(in oklch,var(--dt-chrome) 76%,var(--panel)) 46%,
color-mix(in oklch,var(--dt-chrome) 92%,var(--dt-scene-bottom)) 100%)!important}
/* The shared soft-light pass multiplies the glow role across the whole page.
   On a theme whose glow IS the bright accent that is most of the brightness
   problem, so it is dialled back to a suggestion. */
body[data-designed-theme="sunset-tropics"] .sunset-tropics-page[data-premium-chrome]::after{opacity:.3}
body[data-designed-theme="sunset-tropics"] .tropics-uploaded-lockup{display:inline-flex;align-items:center;max-width:300px;min-height:58px}
body[data-designed-theme="sunset-tropics"] .tropics-uploaded-lockup .brand-logo{width:auto;max-width:280px;height:58px;display:block;object-fit:contain;object-position:left center}
body[data-designed-theme="sunset-tropics"] .tropics-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
body[data-designed-theme="sunset-tropics"] .tropics-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="sunset-tropics"] .tropics-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="sunset-tropics"] .tropics-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. The tone is the dusk chrome, so the slot sits
   inside the grading rather than punching a hole in it. */
body[data-designed-theme="sunset-tropics"] .tropics-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="sunset-tropics"] .tropics-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="sunset-tropics"] .tropics-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="sunset-tropics"] .tropics-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="sunset-tropics"] .tropics-banner__size--tall{display:none}
body[data-designed-theme="sunset-tropics"] .tropics-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="sunset-tropics"] .tropics-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="sunset-tropics"] .tropics-entry{min-width:0;display:grid;align-content:center}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="sunset-tropics"] .tropics-main{padding:20px 18px 26px}
body[data-designed-theme="sunset-tropics"] .tropics-shell{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="sunset-tropics"] .tropics-shell--solo{grid-template-columns:minmax(0,300px)}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor keeps landscape tablets - which do not have the room - on
   the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="sunset-tropics"] .tropics-shell,
body[data-designed-theme="sunset-tropics"] .tropics-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="sunset-tropics"] .tropics-column{width:100%;justify-items:stretch}
body[data-designed-theme="sunset-tropics"] .tropics-entry{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="sunset-tropics"]{overflow:auto}
body[data-designed-theme="sunset-tropics"] .sunset-tropics-page{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto;--mt-cone-top-sm:2%;--mt-cone-width-sm:142%;--mt-cone-height-sm:88%;--mt-cone-blur-sm:28px;--mt-geometry-left-sm:-50%;--mt-geometry-width-sm:200%;--mt-geometry-height-sm:68%;--mt-haze-height-sm:54%;}
body[data-designed-theme="sunset-tropics"] .tropics-main{align-content:start;padding:16px 16px 22px}
body[data-designed-theme="sunset-tropics"] .tropics-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="sunset-tropics"] .tropics-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="sunset-tropics"] .tropics-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="sunset-tropics"] .tropics-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="sunset-tropics"] .tropics-banner__frame{inset:12px}
body[data-designed-theme="sunset-tropics"] .tropics-banner__size--wide{display:none}
body[data-designed-theme="sunset-tropics"] .tropics-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="sunset-tropics"] .tropics-entry>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="sunset-tropics"] .sunset-tropics-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .tropics-entry>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
}

body[data-designed-theme]>div:first-child::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.085;mix-blend-mode:soft-light;background-image:radial-gradient(circle at 25% 25%,#fff 0 .45px,transparent .55px),radial-gradient(circle at 75% 60%,#000 0 .4px,transparent .5px),radial-gradient(circle at 40% 80%,#fff 0 .35px,transparent .48px);background-size:4px 4px,5px 5px,7px 7px;background-position:0 0,1px 2px,3px 1px}
body[data-designed-theme] .login-card input,
body[data-designed-theme] .login-card button[type="submit"]{transition:border-color .18s ease,box-shadow .18s ease,filter .18s ease,transform .18s ease}
body[data-designed-theme] .login-card button[type="submit"]{white-space:nowrap}
body[data-designed-theme] .login-card button[type="submit"]:active{transform:translateY(1px) scale(.995)}
body[data-designed-theme] [data-banner-source="banner-studio-sample"]{isolation:isolate;aspect-ratio:1024/300;transform:translateZ(0)}
body[data-designed-theme] [data-banner-source="banner-studio-sample"] img{object-position:center;transform:scale(1.001)}
body[data-designed-theme] [class$="-wordmark"]{max-width:100%;text-rendering:geometricPrecision}
body[data-designed-theme] footer{font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
@media(max-width:430px){body[data-designed-theme]>div:first-child::after{opacity:.07}}
@media(prefers-reduced-motion:reduce){
  body[data-designed-theme] .login-card input,
  body[data-designed-theme] .login-card button[type="submit"]{transition:none}
}


body[data-designed-theme="casino-royale"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="casino-royale"] .casino-royale-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden;
--mt-cone-tint:var(--dt-atmosphere);--mt-cone-top:-34%;--mt-cone-width:54%;--mt-cone-height:132%;--mt-cone-center-angle:-3deg;--mt-cone-blur:24px;--mt-cone-opacity:.96;--mt-cone-spread:24% 48%;--mt-cone-origin:27%;--mt-cone-core:54%;--mt-cone-mid:24%;--mt-cone-edge:7%;--mt-cone-tail:2%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);--mt-haze-bottom:-8%;--mt-haze-height:68%;--mt-haze-blur:24px;--mt-haze-spread:52% 72%;--mt-haze-origin:96%;--mt-haze-core:74%;--mt-haze-mid:28%;--mt-haze-edge:12%;--mt-haze-pool-spread:30% 34%;--mt-haze-pool-origin:87%;--mt-haze-pool-tint:var(--dt-atmosphere);--mt-haze-pool-strength:18%;
--mt-geometry-height:78%;--mt-geometry-contrast:6%;
--mt-grain-opacity:.044;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:64% 72%;--mt-vignette-origin:46%;--mt-vignette-clear:34%;--mt-vignette-mid:48%;--mt-vignette-edge:88%;--mt-vignette-top:54%;--mt-vignette-bottom:68%;--mt-vignette-band:13% 78%;
}
/* The 852px stage came out of 1260 - 360 - 48. The banner needs 1024, so the
   shell widens to the same 1376 the header and trust row already span and the
   account column comes down to 332: 1376 - 332 - 20 resolves the banner column
   to exactly 1024px at the 1440 reference width, and the slot fills it 1:1.
   Narrower viewports shrink the slot along its own ratio - a real banner
   scales, it is never letterboxed or cropped. */
body[data-designed-theme="casino-royale"] .casino-royale-main{position:relative;z-index:4;min-height:0;width:min(1376px,calc(100% - 64px));display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:20px;align-items:center;margin:0 auto;padding:28px 0 38px}
body[data-designed-theme="casino-royale"] .casino-royale-main--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="casino-royale"] .casino-royale-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   velvet tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="casino-royale"] .casino-royale-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:8px;background:color-mix(in oklch,var(--dt-chrome) 74%,var(--dt-panel));box-shadow:0 18px 40px color-mix(in oklch,var(--dt-chrome) 38%,transparent)}
body[data-designed-theme="casino-royale"] .casino-royale-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="casino-royale"] .casino-royale-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="casino-royale"] .casino-royale-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="casino-royale"] .casino-royale-banner__size--tall{display:none}
body[data-designed-theme="casino-royale"] .casino-royale-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="casino-royale"] .casino-royale-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="casino-royale"] .casino-royale-account{width:332px}
body[data-designed-theme="casino-royale"] .casino-royale-account .premium-auth-panel{background:var(--dt-panel)}
body[data-designed-theme="casino-royale"] .casino-royale-account .premium-auth-panel__heading h2{font-family:var(--font-body)}
body[data-designed-theme="casino-royale"] .casino-royale-uploaded-lockup{display:inline-flex;align-items:center;max-width:360px;min-height:64px}
body[data-designed-theme="casino-royale"] .casino-royale-uploaded-lockup .brand-logo{width:auto;max-width:330px;height:64px;display:block;object-fit:contain;object-position:left center}
body[data-designed-theme="casino-royale"] .casino-royale-product-header .premium-product-nav a:is(:hover,:focus-visible,.active){border-bottom-color:color-mix(in oklch,var(--dt-chrome-text) 24%,transparent)}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor is what keeps landscape tablets - which do not have the
   room - on the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="casino-royale"] .casino-royale-main{width:calc(100% - 36px);grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="casino-royale"] .casino-royale-main--solo{grid-template-columns:minmax(0,300px)}
}
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
/* This main IS the shell, so once it stacks its two auto rows would absorb the
   leftover track height and open a gap between the banner and the card. The
   rows hold their content height and the pair centres as one block instead. */
body[data-designed-theme="casino-royale"] .casino-royale-main,
body[data-designed-theme="casino-royale"] .casino-royale-main--solo{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:20px}
body[data-designed-theme="casino-royale"] .casino-royale-column{width:100%;justify-items:stretch}
body[data-designed-theme="casino-royale"] .casino-royale-account{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="casino-royale"]{overflow:auto}
body[data-designed-theme="casino-royale"] .casino-royale-page{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto;--mt-cone-top-sm:-24%;--mt-cone-width-sm:136%;--mt-cone-height-sm:108%;--mt-cone-blur-sm:22px;--mt-geometry-left-sm:-54%;--mt-geometry-width-sm:208%;--mt-geometry-height-sm:47%;--mt-haze-height-sm:50%;}
body[data-designed-theme="casino-royale"] .casino-royale-main{width:100%;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;padding:16px 16px 24px}
body[data-designed-theme="casino-royale"] .casino-royale-main--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="casino-royale"] .casino-royale-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="casino-royale"] .casino-royale-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="casino-royale"] .casino-royale-banner__frame{inset:12px}
body[data-designed-theme="casino-royale"] .casino-royale-banner__size--wide{display:none}
body[data-designed-theme="casino-royale"] .casino-royale-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header link. The :target overlay is still the
   script-free lift the header link drives, so the Close affordance belongs to
   that state and only that state. */
body[data-designed-theme="casino-royale"] .casino-royale-account{width:100%;display:block}
body[data-designed-theme="casino-royale"] .casino-royale-account>.premium-auth-sheet-close{display:none}
body[data-designed-theme="casino-royale"] .casino-royale-account:target{position:absolute;z-index:90;inset:0;width:auto;display:block;padding:16px;overflow:auto;border:0;background:var(--dt-chrome)}
body[data-designed-theme="casino-royale"] .casino-royale-account:target>.premium-auth-sheet-close{display:flex}
body[data-designed-theme="casino-royale"] .casino-royale-account:target>.premium-auth-panel{max-width:420px;margin:0 auto}
}

body[data-designed-theme="ice-rush"]{display:block;overflow:hidden;background:#071a32;color:#f4fbff}
body[data-designed-theme="ice-rush"] .ice-rush-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* Inverted value structure. Every stop resolves toward the deep chrome/ink end
   of the palette, so the old pale rink wash never returns and a client recolour
   still drives the whole scene. */
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome]{background:linear-gradient(180deg,
color-mix(in oklch,var(--dt-chrome) 86%,var(--dt-scene-top)) 0%,
color-mix(in oklch,var(--dt-scene-top) 74%,var(--dt-chrome)) 33%,
color-mix(in oklch,var(--dt-scene-mid) 26%,var(--dt-chrome)) 66%,
color-mix(in oklch,var(--dt-chrome) 88%,var(--dt-veil)) 100%)!important}
/* Ice Rush's glow role is an almost-white cyan, so the shared soft-light pass
   laid a pale wash over the whole page - the reason this theme read washed out
   rather than cold. Held back to a suggestion; the arena rig still does the
   lighting. */
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome]::after{opacity:.36}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md.
   Light source: a cold overhead arena rig above and behind frame. Three narrow
   near-vertical cones read as the bank; the ground haze is the pool they lay on
   the ice, held well under a blowout so the base stays ink. */
body[data-designed-theme="ice-rush"] .ice-rush-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-30%;--mt-cone-width:52%;--mt-cone-height:142%;--mt-cone-inset:-14%;
--mt-cone-angle:9deg;--mt-cone-center-angle:0deg;--mt-cone-blur:76px;--mt-cone-opacity:.95;
--mt-cone-spread:52% 62%;--mt-cone-origin:32%;--mt-cone-core:46%;--mt-cone-mid:24%;--mt-cone-edge:9%;--mt-cone-tail:3%;
--mt-spill-tint:var(--dt-atmosphere);--mt-spill-top:-20%;--mt-spill-height:52%;--mt-spill-blur:36px;
--mt-spill-spread:20% 30%;--mt-spill-origin:16%;--mt-spill-left-x:14%;--mt-spill-right-x:86%;
--mt-spill-left-strength:26%;--mt-spill-right-strength:26%;
--mt-haze-near:var(--dt-atmosphere);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:0%;--mt-haze-height:56%;--mt-haze-blur:34px;--mt-haze-spread:76% 54%;--mt-haze-origin:84%;
--mt-haze-core:42%;--mt-haze-mid:24%;--mt-haze-edge:12%;
--mt-haze-pool-tint:var(--dt-cta);--mt-haze-pool-spread:40% 34%;--mt-haze-pool-origin:80%;--mt-haze-pool-strength:15%;
--mt-geometry-role:var(--dt-panel-text);--mt-geometry-contrast:8%;--mt-geometry-height:74%;
--mt-grain-opacity:.044;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:74% 62%;--mt-vignette-origin:40%;--mt-vignette-clear:38%;
--mt-vignette-mid:36%;--mt-vignette-edge:82%;--mt-vignette-top:48%;--mt-vignette-bottom:32%;
}
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome] .ice-rush-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
body[data-designed-theme="ice-rush"] .ice-rush-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="ice-rush"] .ice-rush-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="ice-rush"] .ice-rush-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="ice-rush"] .ice-rush-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="ice-rush"] .ice-rush-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="ice-rush"] .ice-rush-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="ice-rush"] .ice-rush-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="ice-rush"] .ice-rush-banner__size--tall{display:none}
body[data-designed-theme="ice-rush"] .ice-rush-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="ice-rush"] .ice-rush-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="ice-rush"] .ice-rush-entry{min-width:0;display:grid;align-content:center}
/* Wordmark fix: the crystalline lockup used to run past its grid column and get
   clipped behind the login form. It now lives in the premium header's brand
   slot, which bounds and shrinks it instead of cropping it. */
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome] .premium-product-header__brand{min-width:0;max-width:236px;overflow:hidden}
body[data-designed-theme="ice-rush"] .ice-rush-uploaded-lockup{display:inline-flex;align-items:center;max-width:210px;min-height:44px}
body[data-designed-theme="ice-rush"] .ice-rush-uploaded-lockup .brand-logo{width:auto;max-width:210px;height:44px;display:block;object-fit:contain;object-position:left center}
/* Tablet framing for the contract geometry slot, held above the contract's own
   mobile block so phones keep the <=760px framing unchanged. */
@media(min-width:761px) and (max-width:900px){
body[data-designed-theme="ice-rush"] .ice-rush-page{--mt-geometry-left:-24%;--mt-geometry-width:148%}
}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome] .ice-rush-main{padding:20px 18px 26px}
body[data-designed-theme="ice-rush"] .ice-rush-shell{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="ice-rush"] .ice-rush-shell--solo{grid-template-columns:minmax(0,300px)}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor keeps landscape tablets - which do not have the room - on
   the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="ice-rush"] .ice-rush-shell,
body[data-designed-theme="ice-rush"] .ice-rush-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="ice-rush"] .ice-rush-column{width:100%;justify-items:stretch}
body[data-designed-theme="ice-rush"] .ice-rush-entry{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="ice-rush"]{overflow:auto}
body[data-designed-theme="ice-rush"] .ice-rush-page{
--mt-cone-top-sm:-30%;--mt-cone-width-sm:94%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-32%;--mt-cone-angle-sm:6deg;--mt-cone-blur-sm:38px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:42%;--mt-haze-bottom-sm:0%;
}
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome] .ice-rush-main{display:grid;align-content:start;padding:16px 16px 22px}
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome] .premium-product-header__brand,
body[data-designed-theme="ice-rush"] .ice-rush-uploaded-lockup{max-width:132px;min-height:38px}
body[data-designed-theme="ice-rush"] .ice-rush-uploaded-lockup .brand-logo{max-width:132px;height:38px}
body[data-designed-theme="ice-rush"] .ice-rush-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="ice-rush"] .ice-rush-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="ice-rush"] .ice-rush-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="ice-rush"] .ice-rush-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="ice-rush"] .ice-rush-banner__frame{inset:12px}
body[data-designed-theme="ice-rush"] .ice-rush-banner__size--wide{display:none}
body[data-designed-theme="ice-rush"] .ice-rush-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="ice-rush"] .ice-rush-entry>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="ice-rush"] .ice-rush-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .ice-rush-entry>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
}

body[data-designed-theme="metro-neon"]{display:block;overflow:hidden;background:#09091c;color:#f4f2ff}
body[data-designed-theme="metro-neon"] .metro-neon-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* Graphite owns the page. Every stop resolves toward chrome/ink so the old
   violet crypto wash never returns, while a client recolour still drives it. */
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome]{background:linear-gradient(168deg,
color-mix(in oklch,var(--dt-chrome) 94%,var(--dt-scene-top)) 0%,
color-mix(in oklch,var(--dt-chrome) 88%,var(--dt-scene-mid)) 44%,
color-mix(in oklch,var(--dt-chrome) 78%,var(--dt-scene-mid)) 74%,
color-mix(in oklch,var(--dt-veil) 88%,var(--dt-chrome)) 100%)!important}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md.
   Light source: the city itself, distant and below the horizon line. The cones
   sit low and very wide so they read as sky glow rather than beams; the spill
   is pushed down to the horizon to become two lit districts; the haze is
   street level. Nothing above the skyline is lit by anything. */
body[data-designed-theme="metro-neon"] .metro-neon-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-6%;--mt-cone-width:78%;--mt-cone-height:132%;--mt-cone-inset:-22%;
--mt-cone-angle:0deg;--mt-cone-blur:96px;--mt-cone-opacity:.9;
--mt-cone-spread:46% 40%;--mt-cone-origin:62%;--mt-cone-core:27%;--mt-cone-mid:13%;--mt-cone-edge:4%;--mt-cone-tail:1%;
--mt-spill-tint:var(--dt-cta);--mt-spill-top:48%;--mt-spill-height:46%;--mt-spill-blur:60px;
--mt-spill-spread:26% 34%;--mt-spill-origin:52%;--mt-spill-left-x:22%;--mt-spill-right-x:76%;
--mt-spill-left-strength:27%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-atmosphere);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-6%;--mt-haze-height:44%;--mt-haze-blur:44px;--mt-haze-spread:70% 62%;--mt-haze-origin:96%;
--mt-haze-core:29%;--mt-haze-mid:16%;--mt-haze-edge:8%;
--mt-haze-pool-tint:var(--dt-cta);--mt-haze-pool-spread:38% 30%;--mt-haze-pool-origin:94%;--mt-haze-pool-strength:12%;
--mt-geometry-role:var(--dt-atmosphere);--mt-geometry-contrast:8%;--mt-geometry-height:100%;
--mt-grain-opacity:.046;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:70% 58%;--mt-vignette-origin:56%;--mt-vignette-clear:30%;
--mt-vignette-mid:40%;--mt-vignette-edge:86%;--mt-vignette-top:56%;--mt-vignette-bottom:38%;
}
body[data-designed-theme="metro-neon"] .metro-neon-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The full-height access wall is gone. It was 352px of opaque chrome pinned to
   the page edge, and with a 1024px banner to hold at 1440 it left the slot
   16px short no matter how the padding was tuned - it also covered a quarter
   of the bokeh field the theme is made of. The rail survives as what it was
   for: a city access column, now contained and held first in a centred shell
   so the graphite and the out-of-focus city read edge to edge behind it.
   The arithmetic: 1440 - 2x32 edge = 1376 shell, minus the 332 access column
   and the 20 gap, resolves the banner column to exactly 1024. */
body[data-designed-theme="metro-neon"] .metro-neon-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:332px minmax(0,1fr);align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="metro-neon"] .metro-neon-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="metro-neon"] .metro-neon-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="metro-neon"] .metro-neon-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="metro-neon"] .metro-neon-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="metro-neon"] .metro-neon-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="metro-neon"] .metro-neon-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="metro-neon"] .metro-neon-banner__size--tall{display:none}
body[data-designed-theme="metro-neon"] .metro-neon-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="metro-neon"] .metro-neon-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="metro-neon"] .metro-neon-access{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px;background:var(--dt-chrome);color:var(--dt-panel-text)}
body[data-designed-theme="metro-neon"] .metro-neon-access__brand{max-width:200px;margin:0 0 18px}
body[data-designed-theme="metro-neon"] .metro-neon-access__panel{padding:0;border:0;background:transparent;box-shadow:none}
/* Brand lockup inside the product header and the access card. No neon glow anywhere. */
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome] .premium-product-header__brand{min-width:0;max-width:228px;overflow:hidden}
body[data-designed-theme="metro-neon"] .metro-neon-uploaded-lockup{display:inline-flex;align-items:center;max-width:200px;min-height:44px}
body[data-designed-theme="metro-neon"] .metro-neon-uploaded-lockup .brand-logo{width:auto;max-width:200px;height:44px;display:block;object-fit:contain;object-position:left center}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="metro-neon"] .metro-neon-page{--mt-geometry-left:-22%;--mt-geometry-width:144%}
body[data-designed-theme="metro-neon"] .metro-neon-main{padding:20px 18px 26px}
body[data-designed-theme="metro-neon"] .metro-neon-shell{grid-template-columns:300px minmax(0,1fr);gap:16px}
body[data-designed-theme="metro-neon"] .metro-neon-shell--solo{grid-template-columns:minmax(0,300px)}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 70% a side-by-side split leaves it.
   The banner is ordered ahead of the access card here so the client's artwork
   still opens the page. The height floor is what keeps landscape tablets -
   which do not have the room - on the two-column layout rather than clipping
   against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="metro-neon"] .metro-neon-shell,
body[data-designed-theme="metro-neon"] .metro-neon-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="metro-neon"] .metro-neon-column{width:100%;order:1;justify-items:stretch}
body[data-designed-theme="metro-neon"] .metro-neon-access{width:min(420px,100%);order:2}
}
@media(max-width:760px){
body[data-designed-theme="metro-neon"]{overflow:auto}
body[data-designed-theme="metro-neon"] .metro-neon-page{
--mt-cone-top-sm:6%;--mt-cone-width-sm:150%;--mt-cone-height-sm:96%;
--mt-cone-inset-sm:-26%;--mt-cone-angle-sm:0deg;--mt-cone-blur-sm:66px;
--mt-geometry-height-sm:100%;--mt-haze-height-sm:34%;--mt-haze-bottom-sm:-4%;
}
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="metro-neon"] .metro-neon-main{align-content:start;padding:16px 16px 22px}
body[data-designed-theme="metro-neon"] .metro-neon-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="metro-neon"] .metro-neon-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="metro-neon"] .metro-neon-column{order:1;justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="metro-neon"] .metro-neon-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="metro-neon"] .metro-neon-banner__frame{inset:12px}
body[data-designed-theme="metro-neon"] .metro-neon-banner__size--wide{display:none}
body[data-designed-theme="metro-neon"] .metro-neon-banner__size--tall{display:block}
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome] .premium-product-header__brand,
body[data-designed-theme="metro-neon"] .metro-neon-uploaded-lockup{max-width:132px;min-height:38px}
body[data-designed-theme="metro-neon"] .metro-neon-uploaded-lockup .brand-logo{max-width:132px;height:38px}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="metro-neon"] .metro-neon-access{order:2;padding:20px}
body[data-designed-theme="metro-neon"] .metro-neon-access>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .metro-neon-access>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
/* The shared overlay wash is 92% chrome, which was fine over a hero card and
   is not fine over a banner slot: the slot's own label read straight through
   the panel heading. The lifted panel is opaque here. */
body[data-designed-theme="metro-neon"] .metro-neon-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .metro-neon-access{background:var(--dt-chrome)!important}
}

body[data-designed-theme="stadium-night"]{display:block;overflow:hidden;background:#07140f;color:#eff9ef}
body[data-designed-theme="stadium-night"] .stadium-night-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:92px minmax(0,1fr) 118px 44px;overflow:hidden;background:
radial-gradient(ellipse 48% 28% at 50% 0%,#d9ffd529 0%,transparent 72%),
linear-gradient(180deg,#070d0b 0%,#0c1b14 38%,#123923 66%,#071a11 100%)}
body[data-designed-theme="stadium-night"] .stadium-night-page::before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,#020504a8,transparent 28%,transparent 72%,#020504a8),radial-gradient(ellipse 62% 32% at 50% 63%,#70d87822,transparent 76%);pointer-events:none}
body[data-designed-theme="stadium-night"] .stadium-night-brand-home{min-width:0;display:inline-flex;align-items:center;color:inherit;text-decoration:none}
/* Pre-contract framing. Premium chrome is always on for this theme, so this is
   only the floor the page falls back to if the contract is ever switched off.
   The old flex/justify-content framing went with the campaign layout it was
   written for: it sized the grid tracks to content, which starves a slot whose
   width is meant to come from the column. */
body[data-designed-theme="stadium-night"] .stadium-night-main{position:relative;z-index:4;min-height:0;display:grid;align-content:center;padding:28px 24px 20px}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome]{grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;background:linear-gradient(180deg,
color-mix(in oklch,var(--dt-scene-top) 92%,var(--dt-chrome)) 0%,
color-mix(in oklch,var(--dt-scene-top) 58%,var(--dt-scene-mid)) 42%,
color-mix(in oklch,var(--dt-scene-mid) 66%,var(--dt-scene-bottom)) 74%,
color-mix(in oklch,var(--dt-scene-bottom) 78%,var(--dt-chrome)) 100%)!important}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome]::before{display:none}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome] .stadium-night-main{z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
/* The shell's three numbers are ARITHMETIC and have to be solved together:
   1376 shell - card - gap must resolve the banner column to exactly 1024, which
   is the Banner Studio slot's design width. Simply widening the gap to the 40px
   this pass gives every other layout measured the slot at 1004x294 and broke the
   contract. So the card gives the 20px up instead - 1376 - 312 - 40 = 1024 - and
   the credential column is still wider than the 300px Sign-in first runs at. */
body[data-designed-theme="stadium-night"] .stadium-night-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 312px;align-items:center;gap:40px;margin:0 auto}
body[data-designed-theme="stadium-night"] .stadium-night-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="stadium-night"] .stadium-night-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="stadium-night"] .stadium-night-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="stadium-night"] .stadium-night-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="stadium-night"] .stadium-night-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="stadium-night"] .stadium-night-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="stadium-night"] .stadium-night-banner__size--tall{display:none}
body[data-designed-theme="stadium-night"] .stadium-night-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="stadium-night"] .stadium-night-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="stadium-night"] .stadium-night-entry{min-width:0;display:grid;align-content:center}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome] .stadium-night-main{padding:20px 18px 26px}
body[data-designed-theme="stadium-night"] .stadium-night-shell{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
body[data-designed-theme="stadium-night"] .stadium-night-shell--solo{grid-template-columns:minmax(0,300px)}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor keeps landscape tablets - which do not have the room - on
   the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="stadium-night"] .stadium-night-shell,
body[data-designed-theme="stadium-night"] .stadium-night-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:32px}
body[data-designed-theme="stadium-night"] .stadium-night-column{width:100%;justify-items:stretch}
body[data-designed-theme="stadium-night"] .stadium-night-entry{width:min(420px,100%)}
}
/* Tablet framing for the contract geometry slot. Held above the contract's own
   mobile block so phones keep the <=760px framing unchanged. */
@media(min-width:761px) and (max-width:820px){
body[data-designed-theme="stadium-night"] .stadium-night-page{--mt-geometry-left:-26%;--mt-geometry-width:152%}
}
@media(max-width:760px){
body[data-designed-theme="stadium-night"]{overflow:auto}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome] .stadium-night-main{display:grid;align-content:start;padding:16px 16px 22px}
body[data-designed-theme="stadium-night"] .stadium-night-shell{grid-template-columns:minmax(0,1fr);gap:24px}
body[data-designed-theme="stadium-night"] .stadium-night-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="stadium-night"] .stadium-night-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="stadium-night"] .stadium-night-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="stadium-night"] .stadium-night-banner__frame{inset:12px}
body[data-designed-theme="stadium-night"] .stadium-night-banner__size--wide{display:none}
body[data-designed-theme="stadium-night"] .stadium-night-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="stadium-night"] .stadium-night-entry>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="stadium-night"] .stadium-night-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .stadium-night-entry>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
}

body[data-designed-theme="desert-gold"]{display:block;overflow:hidden;background:#381e25;color:#fff5dc}
body[data-designed-theme="desert-gold"] .desert-gold-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* One scene gradient: a deep umber base whose warmth is raked in from the left,
   so the colour reads as directional light rather than a sepia fill. */
body[data-designed-theme="desert-gold"] .desert-gold-page[data-premium-chrome]{background:linear-gradient(101deg,
color-mix(in oklch,var(--dt-chrome) 56%,var(--dt-scene-mid)) 0%,
color-mix(in oklch,var(--dt-chrome) 84%,var(--dt-scene-mid)) 30%,
var(--dt-chrome) 64%,
color-mix(in oklch,var(--dt-chrome) 88%,var(--dt-veil)) 100%)!important}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="desert-gold"] .desert-gold-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-18%;--mt-cone-width:136%;--mt-cone-height:152%;--mt-cone-center-angle:-7deg;
--mt-cone-blur:62px;--mt-cone-opacity:.96;
--mt-cone-spread:42% 23%;--mt-cone-origin:62%;--mt-cone-core:42%;--mt-cone-mid:21%;--mt-cone-edge:7%;--mt-cone-tail:2%;
--mt-spill-tint:var(--dt-atmosphere);--mt-spill-top:-24%;--mt-spill-height:104%;--mt-spill-blur:46px;
--mt-spill-spread:30% 58%;--mt-spill-origin:30%;--mt-spill-left-x:-6%;--mt-spill-right-x:128%;
--mt-spill-left-strength:48%;--mt-spill-right-strength:3%;
--mt-haze-near:var(--dt-atmosphere);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-18%;--mt-haze-height:70%;--mt-haze-blur:34px;--mt-haze-spread:84% 76%;--mt-haze-origin:98%;
--mt-haze-core:40%;--mt-haze-mid:23%;--mt-haze-edge:15%;--mt-haze-pool-spread:40% 36%;--mt-haze-pool-origin:92%;--mt-haze-pool-strength:16%;
--mt-geometry-height:74%;--mt-geometry-contrast:8%;
--mt-grain-opacity:.042;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:84% 66%;--mt-vignette-origin:50%;--mt-vignette-clear:44%;--mt-vignette-mid:20%;--mt-vignette-edge:62%;--mt-vignette-top:24%;--mt-vignette-bottom:38%;
}
@media(max-width:760px){
body[data-designed-theme="desert-gold"] .desert-gold-page{
--mt-cone-top-sm:-24%;--mt-cone-width-sm:170%;--mt-cone-height-sm:118%;--mt-cone-blur-sm:38px;
--mt-geometry-height-sm:44%;--mt-haze-bottom-sm:-8%;--mt-haze-height-sm:50%;
}
}
body[data-designed-theme="desert-gold"] .desert-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
body[data-designed-theme="desert-gold"] .desert-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="desert-gold"] .desert-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="desert-gold"] .desert-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="desert-gold"] .desert-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 82%,var(--dt-panel))}
body[data-designed-theme="desert-gold"] .desert-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="desert-gold"] .desert-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="desert-gold"] .desert-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="desert-gold"] .desert-banner__size--tall{display:none}
body[data-designed-theme="desert-gold"] .desert-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="desert-gold"] .desert-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="desert-gold"] .desert-access-column{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px;background:var(--dt-chrome);color:var(--dt-panel-text)}
body[data-designed-theme="desert-gold"] .desert-access-column__brand{max-width:210px;margin:0 0 18px}
body[data-designed-theme="desert-gold"] .desert-uploaded-lockup{display:inline-flex;align-items:center;max-width:210px;min-height:44px}
body[data-designed-theme="desert-gold"] .desert-uploaded-lockup img{width:auto;max-width:210px;height:44px;display:block;object-fit:contain;object-position:left center}
body[data-designed-theme="desert-gold"] .desert-access-panel{padding:0;border:0;background:transparent;box-shadow:none}
/* Tablet framing for the contract geometry slot, held above the contract's own
   mobile block so phones keep the <=760px framing unchanged. */
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="desert-gold"] .desert-main{padding:20px 18px 26px}
body[data-designed-theme="desert-gold"] .desert-shell{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="desert-gold"] .desert-shell--solo{grid-template-columns:minmax(0,300px)}
body[data-designed-theme="desert-gold"] .desert-gold-page{--mt-geometry-left:-22%;--mt-geometry-width:146%}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor is what keeps landscape tablets - which do not have the
   room - on the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="desert-gold"] .desert-shell,
body[data-designed-theme="desert-gold"] .desert-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="desert-gold"] .desert-column{width:100%;justify-items:stretch}
body[data-designed-theme="desert-gold"] .desert-access-column{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="desert-gold"]{overflow:auto}
body[data-designed-theme="desert-gold"] .desert-gold-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="desert-gold"] .desert-main{align-content:start;padding:16px 16px 22px}
body[data-designed-theme="desert-gold"] .desert-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="desert-gold"] .desert-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="desert-gold"] .desert-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="desert-gold"] .desert-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="desert-gold"] .desert-banner__frame{inset:12px}
body[data-designed-theme="desert-gold"] .desert-banner__size--wide{display:none}
body[data-designed-theme="desert-gold"] .desert-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="desert-gold"] .desert-access-column{padding:20px}
body[data-designed-theme="desert-gold"] .desert-access-column>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="desert-gold"] .desert-gold-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .desert-access-column>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
/* The shared overlay wash is 92% chrome, which was fine over a hero card and
   is not fine over a banner slot: the slot's own label read straight through
   the panel heading. The lifted panel is opaque here. */
body[data-designed-theme="desert-gold"] .desert-gold-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .desert-access-column{background:var(--dt-chrome)!important}
}


body[data-designed-theme="champion-crest"]{display:block;overflow:hidden;background:#051229;color:#f8f1dd}
body[data-designed-theme="champion-crest"] .champion-crest-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* One scene gradient: deep navy, lifted only where the overhead hall light
   falls, so the value change reads as illumination rather than a fill. */
body[data-designed-theme="champion-crest"] .champion-crest-page[data-premium-chrome]{background:linear-gradient(180deg,
color-mix(in oklch,var(--dt-scene-top) 88%,var(--dt-chrome)) 0%,
color-mix(in oklch,var(--dt-scene-mid) 44%,var(--dt-chrome)) 42%,
color-mix(in oklch,var(--dt-scene-mid) 26%,var(--dt-chrome)) 68%,
color-mix(in oklch,var(--dt-chrome) 94%,var(--dt-veil)) 100%)!important}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="champion-crest"] .champion-crest-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-46%;--mt-cone-width:40%;--mt-cone-height:134%;--mt-cone-inset:2%;
--mt-cone-angle:8deg;--mt-cone-center-angle:0deg;--mt-cone-blur:54px;--mt-cone-opacity:.96;
--mt-cone-spread:32% 46%;--mt-cone-origin:24%;--mt-cone-core:40%;--mt-cone-mid:20%;--mt-cone-edge:6%;--mt-cone-tail:2%;
--mt-spill-tint:var(--dt-atmosphere);--mt-spill-top:-20%;--mt-spill-height:58%;--mt-spill-blur:34px;
--mt-spill-spread:24% 38%;--mt-spill-origin:18%;--mt-spill-left-x:14%;--mt-spill-right-x:86%;
--mt-spill-left-strength:32%;--mt-spill-right-strength:32%;
--mt-haze-near:var(--dt-atmosphere);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-12%;--mt-haze-height:64%;--mt-haze-blur:30px;--mt-haze-spread:68% 80%;--mt-haze-origin:100%;
--mt-haze-core:40%;--mt-haze-mid:23%;--mt-haze-edge:26%;--mt-haze-pool-spread:36% 34%;--mt-haze-pool-origin:94%;--mt-haze-pool-strength:16%;
--mt-geometry-height:96%;--mt-geometry-contrast:8%;
--mt-grain-opacity:.04;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:78% 68%;--mt-vignette-origin:42%;--mt-vignette-clear:42%;--mt-vignette-mid:22%;--mt-vignette-edge:66%;--mt-vignette-top:22%;--mt-vignette-bottom:40%;
}
@media(max-width:760px){
body[data-designed-theme="champion-crest"] .champion-crest-page{
--mt-cone-top-sm:-30%;--mt-cone-width-sm:74%;--mt-cone-height-sm:104%;--mt-cone-inset-sm:-14%;--mt-cone-angle-sm:6deg;--mt-cone-blur-sm:36px;
--mt-geometry-left-sm:-18%;--mt-geometry-width-sm:136%;--mt-geometry-height-sm:70%;
--mt-haze-bottom-sm:-8%;--mt-haze-height-sm:46%;
}
}
body[data-designed-theme="champion-crest"] .crest-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
body[data-designed-theme="champion-crest"] .crest-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="champion-crest"] .crest-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="champion-crest"] .crest-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="champion-crest"] .crest-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 84%,var(--dt-panel))}
body[data-designed-theme="champion-crest"] .crest-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="champion-crest"] .crest-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="champion-crest"] .crest-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="champion-crest"] .crest-banner__size--tall{display:none}
body[data-designed-theme="champion-crest"] .crest-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="champion-crest"] .crest-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="champion-crest"] .crest-entry{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px;background:var(--dt-chrome);color:var(--dt-panel-text)}
body[data-designed-theme="champion-crest"] .crest-entry__brand{max-width:200px;margin:0 0 18px}
body[data-designed-theme="champion-crest"] .crest-uploaded-lockup{display:inline-flex;align-items:center;max-width:200px;min-height:44px}
body[data-designed-theme="champion-crest"] .crest-uploaded-lockup img{width:auto;max-width:200px;height:44px;display:block;object-fit:contain;object-position:left center}
body[data-designed-theme="champion-crest"] .crest-entry-panel{padding:0;border:0;background:transparent;box-shadow:none}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="champion-crest"] .crest-main{padding:20px 18px 26px}
body[data-designed-theme="champion-crest"] .crest-shell{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="champion-crest"] .crest-shell--solo{grid-template-columns:minmax(0,300px)}
body[data-designed-theme="champion-crest"] .champion-crest-page{--mt-geometry-left:-16%;--mt-geometry-width:132%}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor is what keeps landscape tablets - which do not have the
   room - on the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="champion-crest"] .crest-shell,
body[data-designed-theme="champion-crest"] .crest-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="champion-crest"] .crest-column{width:100%;justify-items:stretch}
body[data-designed-theme="champion-crest"] .crest-entry{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="champion-crest"]{overflow:auto}
body[data-designed-theme="champion-crest"] .champion-crest-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="champion-crest"] .crest-main{align-content:start;padding:16px 16px 22px}
body[data-designed-theme="champion-crest"] .crest-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="champion-crest"] .crest-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="champion-crest"] .crest-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="champion-crest"] .crest-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="champion-crest"] .crest-banner__frame{inset:12px}
body[data-designed-theme="champion-crest"] .crest-banner__size--wide{display:none}
body[data-designed-theme="champion-crest"] .crest-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="champion-crest"] .crest-entry{padding:20px}
body[data-designed-theme="champion-crest"] .crest-entry>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="champion-crest"] .champion-crest-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .crest-entry>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
/* The shared overlay wash is 92% chrome, which was fine over a hero card and
   is not fine over a banner slot: the slot's own label read straight through
   the panel heading. The lifted panel is opaque here. */
body[data-designed-theme="champion-crest"] .champion-crest-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .crest-entry{background:var(--dt-chrome)!important}
}


body[data-designed-theme="court-kings"]{display:block;overflow:hidden;background:#211c18;color:#fff4df}
body[data-designed-theme="court-kings"] .court-kings-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* One scene gradient: near-black charcoal, lifted only across the middle where
   the overhead pool falls. The warmth is light, never a hardwood fill. */
body[data-designed-theme="court-kings"] .court-kings-page[data-premium-chrome]{background:linear-gradient(180deg,
color-mix(in oklch,var(--dt-chrome) 94%,var(--dt-veil)) 0%,
color-mix(in oklch,var(--dt-chrome) 84%,var(--dt-scene-bottom)) 44%,
color-mix(in oklch,var(--dt-chrome) 78%,var(--dt-scene-bottom)) 70%,
color-mix(in oklch,var(--dt-chrome) 96%,var(--dt-veil)) 100%)!important}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="court-kings"] .court-kings-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-46%;--mt-cone-width:94%;--mt-cone-height:156%;--mt-cone-center-angle:0deg;
--mt-cone-blur:56px;--mt-cone-opacity:.96;
--mt-cone-spread:32% 42%;--mt-cone-origin:40%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:7%;--mt-cone-tail:2%;
--mt-spill-tint:var(--dt-atmosphere);--mt-spill-top:-14%;--mt-spill-height:44%;--mt-spill-blur:32px;
--mt-spill-spread:22% 28%;--mt-spill-origin:10%;--mt-spill-left-x:32%;--mt-spill-right-x:68%;
--mt-spill-left-strength:26%;--mt-spill-right-strength:26%;
--mt-haze-near:var(--dt-atmosphere);--mt-haze-far:var(--dt-illustration-near);
--mt-haze-bottom:-14%;--mt-haze-height:74%;--mt-haze-blur:30px;--mt-haze-spread:58% 80%;--mt-haze-origin:98%;
--mt-haze-core:54%;--mt-haze-mid:29%;--mt-haze-edge:30%;--mt-haze-pool-spread:34% 34%;--mt-haze-pool-origin:90%;--mt-haze-pool-strength:24%;
--mt-geometry-height:78%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.044;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-spread:72% 64%;--mt-vignette-origin:46%;--mt-vignette-clear:40%;--mt-vignette-mid:26%;--mt-vignette-edge:74%;--mt-vignette-top:32%;--mt-vignette-bottom:42%;
}
@media(max-width:760px){
body[data-designed-theme="court-kings"] .court-kings-page{
--mt-cone-top-sm:-38%;--mt-cone-width-sm:150%;--mt-cone-height-sm:120%;--mt-cone-blur-sm:38px;
--mt-geometry-height-sm:44%;--mt-haze-bottom-sm:-8%;--mt-haze-height-sm:50%;
}
}
body[data-designed-theme="court-kings"] .court-main{position:relative;z-index:4;min-width:0;min-height:0;display:grid;align-content:center;padding:24px var(--premium-edge) 30px}
/* The banner sits in a 1fr column and the login card in a fixed one, so at the
   1440 reference width the banner column resolves to exactly 1024px and the
   slot fills it 1:1. Narrower viewports shrink the slot along its own ratio -
   a real banner scales, it is never letterboxed or cropped. */
body[data-designed-theme="court-kings"] .court-shell{width:100%;max-width:1376px;display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:center;gap:20px;margin:0 auto}
body[data-designed-theme="court-kings"] .court-shell--solo{grid-template-columns:minmax(0,332px);justify-content:center}
body[data-designed-theme="court-kings"] .court-column{min-width:0;display:grid;justify-items:start;gap:14px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="court-kings"] .court-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="court-kings"] .court-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="court-kings"] .court-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="court-kings"] .court-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="court-kings"] .court-banner__size--tall{display:none}
body[data-designed-theme="court-kings"] .court-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="court-kings"] .court-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
/* One simple solid card: username, password, submit, and the three recovery
   affordances premium chrome already ships. Nothing else belongs here. */
body[data-designed-theme="court-kings"] .court-entry{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:22px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px;background:var(--dt-chrome);color:var(--dt-panel-text)}
body[data-designed-theme="court-kings"] .court-entry__brand{max-width:200px;margin:0 0 18px}
body[data-designed-theme="court-kings"] .court-uploaded-lockup{display:inline-flex;align-items:center;max-width:200px;min-height:44px}
body[data-designed-theme="court-kings"] .court-uploaded-lockup img{width:auto;max-width:200px;height:44px;display:block;object-fit:contain;object-position:left center}
body[data-designed-theme="court-kings"] .court-entry-panel{padding:0;border:0;background:transparent;box-shadow:none}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="court-kings"] .court-main{padding:20px 18px 26px}
body[data-designed-theme="court-kings"] .court-shell{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
body[data-designed-theme="court-kings"] .court-shell--solo{grid-template-columns:minmax(0,300px)}
body[data-designed-theme="court-kings"] .court-kings-page{--mt-geometry-left:-20%;--mt-geometry-width:140%}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full column instead of the 60% a side-by-side split leaves it.
   The height floor is what keeps landscape tablets - which do not have the
   room - on the two-column layout rather than clipping against overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="court-kings"] .court-shell,
body[data-designed-theme="court-kings"] .court-shell--solo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
body[data-designed-theme="court-kings"] .court-column{width:100%;justify-items:stretch}
body[data-designed-theme="court-kings"] .court-entry{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="court-kings"]{overflow:auto}
body[data-designed-theme="court-kings"] .court-kings-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="court-kings"] .court-main{align-content:start;padding:16px 16px 22px}
body[data-designed-theme="court-kings"] .court-shell{grid-template-columns:minmax(0,1fr);gap:14px}
body[data-designed-theme="court-kings"] .court-shell--solo{grid-template-columns:minmax(0,1fr)}
body[data-designed-theme="court-kings"] .court-column{justify-items:stretch;gap:12px}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="court-kings"] .court-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="court-kings"] .court-banner__frame{inset:12px}
body[data-designed-theme="court-kings"] .court-banner__size--wide{display:none}
body[data-designed-theme="court-kings"] .court-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone it stays on the page
   instead of hiding behind the header control. Premium chrome's sheet-close
   label belongs to the overlay state only, so it appears when - and only when -
   the header control has actually lifted this same panel over the page. */
body[data-designed-theme="court-kings"] .court-entry{padding:20px}
body[data-designed-theme="court-kings"] .court-entry>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="court-kings"] .court-kings-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .court-entry>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
/* The shared overlay wash is 92% chrome, which was fine over a hero card and
   is not fine over a banner slot: the slot's own label read straight through
   the panel heading. The lifted panel is opaque here. */
body[data-designed-theme="court-kings"] .court-kings-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .court-entry{background:var(--dt-chrome)!important}
}


body[data-designed-theme="midnight-turf"]{display:block;overflow:hidden;background:#041912;color:#f1fff4}
body[data-designed-theme="midnight-turf"] .midnight-turf-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:hidden}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="midnight-turf"] .midnight-turf-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-46%;--mt-cone-width:58%;--mt-cone-height:128%;--mt-cone-inset:-16%;
--mt-cone-angle:24deg;--mt-cone-blur:52px;--mt-cone-opacity:.94;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:46%;--mt-cone-mid:23%;--mt-cone-edge:8%;
--mt-spill-left-strength:26%;--mt-spill-right-strength:24%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:72%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:58%;--mt-haze-edge:44%;--mt-haze-pool-strength:14%;
--mt-geometry-height:76%;--mt-geometry-contrast:8%;
--mt-grain-opacity:.038;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:62%;
}
@media(max-width:760px){
body[data-designed-theme="midnight-turf"] .midnight-turf-page{
--mt-cone-top-sm:-30%;--mt-cone-width-sm:126%;--mt-cone-height-sm:106%;
--mt-cone-inset-sm:-48%;--mt-cone-angle-sm:15deg;--mt-cone-blur-sm:34px;
--mt-geometry-height-sm:42%;--mt-haze-height-sm:48%;
}
}
/* The left account rail is this theme's shape and it stays a full-height
   surface flush to the page edge. Widening the banner column to a real
   1024x300 slot is arithmetic, not a redesign: 1440 - 352 rail - 2x32 edge
   resolves the main column to exactly 1024, so the rail gives up 8px and the
   main's fixed 42px gutters become the shared --premium-edge token. */
body[data-designed-theme="midnight-turf"] .turf-product-shell{position:relative;z-index:4;min-height:0;display:grid;grid-template-columns:352px minmax(0,1fr)}
body[data-designed-theme="midnight-turf"] .turf-account-rail{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:32px;border-right:1px solid color-mix(in oklch,var(--dt-border-soft) 28%,transparent);background:var(--dt-chrome);color:var(--dt-panel-text)}
body[data-designed-theme="midnight-turf"] .turf-account-rail__brand{max-width:210px;margin:0 0 28px}
body[data-designed-theme="midnight-turf"] .turf-account-panel{padding:0;border:0;background:transparent;box-shadow:none}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome] .turf-main{min-width:0;min-height:0;display:grid;align-content:center;justify-items:start;gap:14px;padding:34px var(--premium-edge) 42px}
/* Banner Studio slot: 1024x300 on desktop, 545x325 below the breakpoint. The
   solid tone and the inset frame are what make an empty slot read as reserved
   space rather than a missing image; the frame also shows the safe area a real
   banner's artwork lands inside. */
body[data-designed-theme="midnight-turf"] .turf-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="midnight-turf"] .turf-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="midnight-turf"] .turf-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 62%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="midnight-turf"] .turf-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body[data-designed-theme="midnight-turf"] .turf-banner__size--tall{display:none}
body[data-designed-theme="midnight-turf"] .turf-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 52%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
body[data-designed-theme="midnight-turf"] .turf-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="midnight-turf"] .turf-product-shell{grid-template-columns:300px minmax(0,1fr)}
body[data-designed-theme="midnight-turf"] .turf-account-rail{padding:26px}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome] .turf-main{padding:24px 18px 30px}
}
/* Portrait tablets have the height to stack, and stacking is what gives the
   banner the full width instead of the 55% a rail-plus-main split leaves it.
   The banner is ordered ahead of the account card so the client's artwork
   still opens the page. The height floor keeps landscape tablets - which do
   not have the room - on the rail layout rather than clipping into overflow. */
@media(min-width:761px) and (max-width:1040px) and (min-height:940px){
body[data-designed-theme="midnight-turf"] .turf-product-shell{display:flex;align-items:center;flex-direction:column;gap:32px;padding:26px 18px 32px}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome] .turf-main{order:1;width:100%;justify-items:stretch;padding:0}
body[data-designed-theme="midnight-turf"] .turf-account-rail{order:2;width:min(420px,100%);padding:24px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px}
}
@media(max-width:760px){
body[data-designed-theme="midnight-turf"]{overflow:auto}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome]{min-height:100svh;grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="midnight-turf"] .turf-product-shell{display:flex;flex-direction:column;gap:24px;padding:16px 16px 22px}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome] .turf-main{order:1;justify-items:stretch;gap:12px;padding:0}
/* Banner Studio's portrait-leaning mobile box. Same rule: the slot is the
   ratio, so the banner scales into the column instead of being cropped. */
body[data-designed-theme="midnight-turf"] .turf-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="midnight-turf"] .turf-banner__frame{inset:12px}
body[data-designed-theme="midnight-turf"] .turf-banner__size--wide{display:none}
body[data-designed-theme="midnight-turf"] .turf-banner__size--tall{display:block}
/* The login is the point of the page, so on a phone the rail comes off the
   edge and stays on the page as a card instead of hiding behind the header
   control. Premium chrome's sheet-close label belongs to the overlay state
   only, so it appears when - and only when - the header control has actually
   lifted this same panel over the page. */
body[data-designed-theme="midnight-turf"] .turf-account-rail{order:2;padding:20px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 30%,transparent);border-radius:8px}
body[data-designed-theme="midnight-turf"] .turf-account-rail>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .turf-account-rail>.premium-auth-panel>.premium-auth-sheet-close{display:flex}
/* The shared overlay wash is 92% chrome, which was fine over a promo card and
   is not fine over a banner slot: the slot's own label read straight through
   the panel heading. The lifted panel is opaque here. */
body[data-designed-theme="midnight-turf"] .midnight-turf-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .turf-account-rail{background:var(--dt-chrome)!important}
}


/* layouts-v1 - centre-column. One credential block, one banner contract, one arrangement. */
body[data-designed-theme="centre-column"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="centre-column"] .centre-column-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden}
body[data-designed-theme="centre-column"] .centre-column-main{position:relative;z-index:4;min-width:0;min-height:0}
body[data-designed-theme="centre-column"] .layout-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="centre-column"] .centre-column-account-panel{border-color:color-mix(in oklch,var(--dt-border-soft) 52%,transparent)}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="centre-column"] .centre-column-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-44%;--mt-cone-width:56%;--mt-cone-height:126%;--mt-cone-inset:-14%;
--mt-cone-angle:22deg;--mt-cone-blur:50px;--mt-cone-opacity:.92;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:8%;
--mt-spill-left-strength:24%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:70%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:56%;--mt-haze-edge:42%;--mt-haze-pool-strength:13%;
--mt-geometry-height:74%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:60%;
}
@media(max-width:760px){
body[data-designed-theme="centre-column"]{overflow:auto}
body[data-designed-theme="centre-column"] .centre-column-page{
--mt-cone-top-sm:-28%;--mt-cone-width-sm:124%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-46%;--mt-cone-angle-sm:14deg;--mt-cone-blur-sm:32px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:46%;
}
}

body[data-designed-theme="centre-column"] .centre-column-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 44%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="centre-column"] .centre-column-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="centre-column"] .centre-column-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="centre-column"] .centre-column-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="centre-column"] .centre-column-banner__size--tall{display:none}
body[data-designed-theme="centre-column"] .centre-column-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 56%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
@media(max-width:760px){
body[data-designed-theme="centre-column"] .centre-column-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="centre-column"] .centre-column-banner__frame{inset:12px}
body[data-designed-theme="centre-column"] .centre-column-banner__size--wide{display:none}
body[data-designed-theme="centre-column"] .centre-column-banner__size--tall{display:block}
}

body[data-designed-theme="centre-column"] .centre-column-page{grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px}
/* The stack, centred in the field. gap and padding are chosen so that at
   1440x900 the banner's top edge lands at y=88 and the card's at y=436 - the two
   figures the distinctness matrix is measured on. */
body[data-designed-theme="centre-column"] .centre-column-main{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:0;padding:0 var(--premium-edge)}
body[data-designed-theme="centre-column"] .centre-column-account{width:420px;max-width:100%}
/* Match Sign-in first's deeper credential plate while keeping this layout's
   own scene and composition. */
body[data-designed-theme="centre-column"] .centre-column-account{--dt-panel:color-mix(in oklch,var(--ink) 78%,var(--panel));--dt-panel-text:var(--paper)}
body[data-designed-theme="centre-column"] .centre-column-account>.premium-auth-panel{padding:20px 28px 22px}
body[data-designed-theme="centre-column"] .centre-column-account .premium-auth-panel__heading{margin-bottom:16px;text-align:center}
body[data-designed-theme="centre-column"] .layout-line{margin-top:-14px;text-align:center}
body[data-designed-theme="centre-column"][data-preview-display="expanded"] .centre-column-main{justify-content:center;gap:40px;padding:0 var(--premium-edge)}
/* A hairline centred under the banner: the axis the composition is built on,
   stated once. Palette-derived, no literal. */
body[data-designed-theme="centre-column"] .centre-column-account::before{content:"";display:block;width:64px;height:1px;margin:0 auto 16px;background:color-mix(in oklch,var(--dt-cta) 62%,transparent)}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="centre-column"] .centre-column-main{padding:0 20px}
body[data-designed-theme="centre-column"][data-preview-display="expanded"] .centre-column-main{justify-content:center;gap:32px;padding:0 20px}
body[data-designed-theme="centre-column"] .centre-column-account{width:min(420px,100%)}
}
/* Mobile is its own composition: the column runs the full width, the card loses
   its centred heading rule, and the page scrolls rather than fitting. */
@media(max-width:760px){
body[data-designed-theme="centre-column"] .centre-column-page{grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="centre-column"] .centre-column-main{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:16px 16px 24px}
body[data-designed-theme="centre-column"][data-preview-display="expanded"] .centre-column-main{justify-content:center;gap:24px}
body[data-designed-theme="centre-column"] .centre-column-account{width:100%}
body[data-designed-theme="centre-column"] .centre-column-account>.premium-auth-panel{padding:22px}
body[data-designed-theme="centre-column"] .centre-column-account .premium-auth-panel__heading{text-align:left}
body[data-designed-theme="centre-column"] .centre-column-account::before{margin-left:0}
body[data-designed-theme="centre-column"] .layout-line{margin-top:0;text-align:left}
body[data-designed-theme="centre-column"] .centre-column-account>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="centre-column"] .centre-column-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .centre-column-account{background:var(--dt-chrome)!important}
}


/* layouts-v1 - welcome-carousel. One credential block, one banner contract, one arrangement. */
body[data-designed-theme="welcome-carousel"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-main{position:relative;z-index:4;min-width:0;min-height:0}
body[data-designed-theme="welcome-carousel"] .layout-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account-panel{border-color:color-mix(in oklch,var(--dt-border-soft) 52%,transparent)}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-44%;--mt-cone-width:56%;--mt-cone-height:126%;--mt-cone-inset:-14%;
--mt-cone-angle:22deg;--mt-cone-blur:50px;--mt-cone-opacity:.92;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:8%;
--mt-spill-left-strength:24%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:70%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:56%;--mt-haze-edge:42%;--mt-haze-pool-strength:13%;
--mt-geometry-height:74%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:60%;
}
@media(max-width:760px){
body[data-designed-theme="welcome-carousel"]{overflow:auto}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-page{
--mt-cone-top-sm:-28%;--mt-cone-width-sm:124%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-46%;--mt-cone-angle-sm:14deg;--mt-cone-blur-sm:32px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:46%;
}
}

body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 44%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__size--tall{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 56%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
@media(max-width:760px){
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__frame{inset:12px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__size--wide{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-banner__size--tall{display:block}
}

body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel{position:relative;isolation:isolate;width:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px}
/* The track is the whole no-script story: one scroll-snap row, so a swipe, a
   keyboard arrow and a dot anchor all move it without a line of JavaScript. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;border-radius:12px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__track::-webkit-scrollbar{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__track:focus-visible{outline:2px solid var(--dt-cta);outline-offset:3px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__slide{scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__media{position:relative;overflow:hidden;aspect-ratio:1600/800;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__image{display:block;width:100%;height:100%;object-fit:cover}
/* Paradise's move: the artwork dissolves into the page rather than sitting in a
   frame. Their stop list is 0 / 0.99 at 65% / solid, against the page colour. */
/* Paradise runs 0 -> 0.99 at 65% -> solid, and gets away with it because their
   slide is a bright beach at midday. Sports photography is mostly dark, and the
   same stop list turned a floodlit pitch into a black rectangle. The fade now
   holds the artwork clear through the top half and only becomes ground where the
   copy actually sits. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 46%,color-mix(in oklch,var(--dt-chrome) 72%,transparent) 74%,var(--dt-chrome) 100%);pointer-events:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__eyebrow-slot{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__size--tall{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__copy{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;margin-top:-38px;padding:0 var(--premium-edge,24px);text-align:center}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__eyebrow{margin:0;color:var(--dt-cta);font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__headline{margin:0;color:var(--dt-panel-text);font:760 clamp(24px,2.6vw,38px)/1.08 var(--font-display,var(--font-body));letter-spacing:-.01em}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__body{margin:0;max-width:52ch;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-muted));font:640 14px/1.5 var(--font-body)}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__cta{margin-top:4px;padding:12px 30px;border-radius:999px;background:var(--dt-cta);color:var(--dt-cta-text,var(--dt-chrome));font:800 14px/1 var(--font-body);text-decoration:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__cta:hover{filter:brightness(1.06)}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__dots{display:flex;justify-content:center;align-items:center;gap:14px;padding:6px 0}
/* Anchors are inline, so a dot with only width/height collapses to nothing and
   the strip renders as a single scaled pip. It has to be a block. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__dot{display:block;width:9px;height:9px;border-radius:999px;background:color-mix(in oklch,var(--dt-panel-text) 55%,transparent);transition:background .18s ease,transform .18s ease}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__dot[aria-current="true"]{background:var(--dt-cta);transform:scale(1.25)}
/* Prev/next cannot be authored statically - the target depends on the slide you
   are already on - so they stay hidden until the script wires them up. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__arrow{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);z-index:2;padding:9px 14px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 50%,transparent);border-radius:999px;background:color-mix(in oklch,var(--dt-chrome) 72%,transparent);color:var(--dt-panel-text);font:700 12px/1 var(--font-body);cursor:pointer}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__arrow[hidden]{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__arrow--prev{left:12px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__arrow--next{right:12px}
@media(prefers-reduced-motion:reduce){
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__track{scroll-behavior:auto}
}
@media(max-width:760px){
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__media{aspect-ratio:720/900}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__frame{inset:12px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__size--wide{display:none}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__size--tall{display:block}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__copy{margin-top:-48px;gap:8px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-carousel__arrow{display:none}
}

/* The single deliberate departure from the frame: this page is taller than the
   viewport and is meant to be. See the header note. */
body[data-designed-theme="welcome-carousel"]{overflow:auto}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-page{grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px;overflow:visible}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-main{display:flex;flex-direction:column;align-items:center;gap:34px;padding:22px var(--premium-edge) 44px}
/* The carousel is the hero and takes the full measure; everything under it is
   held to the credential column's width so the page reads as one axis. */
body[data-designed-theme="welcome-carousel"] .welcome-carousel-hero{width:min(1024px,100%)}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account{width:420px;max-width:100%}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account>.premium-auth-panel{padding:20px 28px 22px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account .premium-auth-panel__heading{margin-bottom:16px;text-align:center}
body[data-designed-theme="welcome-carousel"] .layout-line{text-align:center}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="welcome-carousel"] .welcome-carousel-main{padding:20px 20px 36px;gap:28px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account{width:min(420px,100%)}
}
@media(max-width:760px){
body[data-designed-theme="welcome-carousel"] .welcome-carousel-page{grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-main{align-items:stretch;gap:26px;padding:14px 16px 28px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-hero{width:100%}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account{width:100%}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account>.premium-auth-panel{padding:22px}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account .premium-auth-panel__heading{text-align:left}
body[data-designed-theme="welcome-carousel"] .layout-line{text-align:left}
body[data-designed-theme="welcome-carousel"] .welcome-carousel-account>.premium-auth-panel>.premium-auth-sheet-close{display:none}
}


/* layouts-v1 - header-bar. One credential block, one banner contract, one arrangement. */
body[data-designed-theme="header-bar"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="header-bar"] .header-bar-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden}
body[data-designed-theme="header-bar"] .header-bar-main{position:relative;z-index:4;min-width:0;min-height:0}
body[data-designed-theme="header-bar"] .layout-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="header-bar"] .header-bar-account-panel{border-color:color-mix(in oklch,var(--dt-border-soft) 52%,transparent)}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="header-bar"] .header-bar-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-44%;--mt-cone-width:56%;--mt-cone-height:126%;--mt-cone-inset:-14%;
--mt-cone-angle:22deg;--mt-cone-blur:50px;--mt-cone-opacity:.92;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:8%;
--mt-spill-left-strength:24%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:70%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:56%;--mt-haze-edge:42%;--mt-haze-pool-strength:13%;
--mt-geometry-height:74%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:60%;
}
@media(max-width:760px){
body[data-designed-theme="header-bar"]{overflow:auto}
body[data-designed-theme="header-bar"] .header-bar-page{
--mt-cone-top-sm:-28%;--mt-cone-width-sm:124%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-46%;--mt-cone-angle-sm:14deg;--mt-cone-blur-sm:32px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:46%;
}
}

body[data-designed-theme="header-bar"] .header-bar-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 44%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="header-bar"] .header-bar-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="header-bar"] .header-bar-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="header-bar"] .header-bar-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="header-bar"] .header-bar-banner__size--tall{display:none}
body[data-designed-theme="header-bar"] .header-bar-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 56%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
@media(max-width:760px){
body[data-designed-theme="header-bar"] .header-bar-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="header-bar"] .header-bar-banner__frame{inset:12px}
body[data-designed-theme="header-bar"] .header-bar-banner__size--wide{display:none}
body[data-designed-theme="header-bar"] .header-bar-banner__size--tall{display:block}
}

body[data-designed-theme="header-bar"] .header-bar-page{grid-template-rows:182px minmax(0,1fr) 52px}
/* The account bar: two rows inside one header. Row one is identity, row two is
   the credential block. */
/* Row one is 76px for the same reason the shared bar is: a 44px control centred
   in it sits 16px below the bar's top edge. It was 56px, which put Create account
   6px from the edge - the crop the operator sent.
   Row two is 106px, and it was 80px. 80 was the tightest box that CONTAINED the
   credential block - 48px controls, an 8px gap, an 18px recovery line, 74px in
   total - and containing it is not the same as giving it room: centred in 80 it
   left the recovery line 2px above the bar's bottom edge, which is the operator's
   second note, "needs to be more padding between forgot password and help and
   support and the background underneath". 106 = 8 above + 74 + 24 below, and the
   block is bottom-aligned rather than centred so the 24 is spent where he asked
   for it. 24 below the links also equals the 24 between Create account and the
   fields, so the block sits in an even measure. The bar totals 182px and
   .header-bar-page's first track matches it. */
body[data-designed-theme="header-bar"] .header-bar-product-header{min-height:182px;display:grid;grid-template-columns:minmax(180px,auto) minmax(0,1fr);grid-template-rows:76px 106px;align-items:center;gap:0 32px;padding:0 var(--premium-edge)}
body[data-designed-theme="header-bar"] .header-bar-product-header>.header-bar-brand-home{grid-row:1}
body[data-designed-theme="header-bar"] .header-bar-account{grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px}
body[data-designed-theme="header-bar"] .header-bar-credentials{grid-row:2;grid-column:1/-1;justify-self:end;align-self:end;display:flex;justify-content:flex-end;padding-bottom:24px}
/* 816px wide, so the block's left edge lands at x=592 at 1440. */
body[data-designed-theme="header-bar"] .header-bar-login{width:816px;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 168px;align-items:center;gap:8px 10px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--dt-chrome-text);box-shadow:none;backdrop-filter:none}
body[data-designed-theme="header-bar"] .header-bar-field{display:block;margin:0;padding:0;border:0;background:transparent}
body[data-designed-theme="header-bar"] .header-bar-input{height:48px;display:block;overflow:hidden;border:1px solid var(--dt-border-soft);border-radius:7px;background:var(--dt-field)}
body[data-designed-theme="header-bar"] .header-bar-input:focus-within{border-color:var(--dt-cta);box-shadow:0 0 0 3px color-mix(in oklch,var(--dt-cta) 25%,transparent)}
body[data-designed-theme="header-bar"] .header-bar-input input{width:100%;height:100%;min-height:46px;padding:0 14px;border:0;border-radius:6px;outline:0;background:transparent;color:var(--dt-field-text);font:650 15px/1 var(--font-body);box-shadow:none}
body[data-designed-theme="header-bar"] .header-bar-input input::placeholder{color:var(--dt-field-muted)}
/* DESIGNED_THEME_ROLE_STYLES gives every designed theme's submit button a
   gradient CTA with a 4px hard shadow, at !important. premiumChrome flattens it
   for the shared auth panel; this bespoke row flattens it the same way and for
   the same reason - the operator asked for simple solid login controls, and a
   raised gradient button in a 48px bar reads as a toolbar widget. */
body[data-designed-theme="header-bar"] .header-bar-submit{width:100%;height:48px;min-height:48px;margin:0;padding:0 18px;border-radius:7px;font:820 14px/1 var(--font-body);cursor:pointer}
/* The flattening needs to outrank DESIGNED_THEME_ROLE_STYLES' own
   body[data-designed-theme] .login-card button[type="submit"] gradient, which is
   !important at (0,4,2) - exactly the reason premiumChrome's own submit rule is
   this long. Measured rather than guessed: with the gradient in place the row's
   button reads 3.78:1 composited, and flat it reads 5.37:1. */
body[data-designed-theme="header-bar"] [data-premium-chrome] .header-bar-login.login-card button.header-bar-submit[type="submit"]{border:1px solid var(--dt-cta)!important;background:var(--dt-cta)!important;background-image:none!important;color:var(--dt-cta-text)!important;box-shadow:none!important}
body[data-designed-theme="header-bar"] .header-bar-submit:is(:hover,:active){filter:brightness(1.04)}
body[data-designed-theme="header-bar"] .header-bar-submit:focus-visible{outline:3px solid color-mix(in oklch,var(--dt-cta) 42%,white);outline-offset:2px}
body[data-designed-theme="header-bar"] .header-bar-recovery{grid-column:1/-1;display:flex;justify-content:flex-start;gap:20px;font-size:12px}
body[data-designed-theme="header-bar"] .header-bar-recovery a{color:color-mix(in oklch,var(--dt-chrome-text) 86%,var(--dt-muted));font-weight:740;text-decoration:none}
body[data-designed-theme="header-bar"] .header-bar-recovery a:is(:hover,:focus-visible){color:var(--dt-chrome-text);text-decoration:underline;text-underline-offset:3px}
/* The field below the bar belongs to the banner, and the whole of it is now the
   surface the banner is grounded on. Both axes are centred: horizontal because
   the operator rejected a flush-left slot at 1440, vertical because a low slot
   only reads as grounded while there is a band under it to be low ON. With a
   continuous field, low reads as 3:1 dead air above the banner - his words - so
   the block is centred and the field carries the weight instead. */
body[data-designed-theme="header-bar"] .header-bar-main{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:0 var(--premium-edge)}
/* The operator's one line of copy sits UNDER the slot on this layout, and that is
   a contrast decision rather than a taste one. It used to sit above it, low on
   the page where the old plinth was densest. Centring the block moved it up into
   the lightest part of the field, and measured on painted pixels - the ancestor
   probe cannot see the plinth, it is a sibling - it fell to 2.84:1 on
   court-blue/prism and under 4.5:1 on five of eight palettes with the Prism
   backdrop, which puts a bright band exactly there. Below the slot it is back on
   the dense end of the field, where the ramp is at ~64% of chrome. */
body[data-designed-theme="header-bar"] .header-bar-main>.layout-line{align-self:center;max-width:min(1024px,100%);text-align:center}
/* THE PLINTH IS NOW THE FIELD, NOT A BAND INSIDE IT.
   It was position:absolute bottom:0 height:430px with a 1px cta hairline on top
   and a gradient that opened at 34% chrome, so it began at a single y with a
   34%-of-chrome jump and a rule drawn across it - measured as a 66-69 step in
   summed |dRGB| on a left-margin column at y=418, against a field whose own
   largest step was 45-57. That step is the band the operator rejected.
   Now it spans the field (inset:0) and ramps from nothing at the top to 88% at
   the trust row, ~0.2% of chrome per pixel at the steepest, which is under a
   tenth of a luma step per row and cannot band. The hairline is gone: an edge is
   exactly what was not wanted. The grounding it used to do by contrast is done by
   weight - the field under the banner is still materially denser than the field
   above it - plus the banner's own contact shadow below. */
body[data-designed-theme="header-bar"] .header-bar-plinth{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,color-mix(in oklch,var(--dt-chrome) 0%,transparent) 0%,color-mix(in oklch,var(--dt-chrome) 10%,transparent) 32%,color-mix(in oklch,var(--dt-chrome) 34%,transparent) 60%,color-mix(in oklch,var(--dt-chrome) 64%,transparent) 82%,color-mix(in oklch,var(--dt-chrome) 88%,transparent) 100%)}
/* NO box-shadow rule here on purpose, and it is worth writing down because the
   obvious move is to add one. The materials contract already gives every banner
   its contact shadow - 0 18px 44px of chrome at 34%, at !important, under
   [data-banner-source] - and it bans stacked glows outright, so a second layer
   here would be both dead (outranked) and against the contract. Measured with the
   contract's shadow suppressed, it is worth 3.8 luma directly under the slot's
   bottom edge on this layout and still 1.0 forty pixels down, which is what now
   does the contact work the plinth's hairline used to do. */
body[data-designed-theme="header-bar"] .header-bar-main>.layout-line{margin:0}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="header-bar"] .header-bar-product-header{grid-template-columns:minmax(0,1fr) auto;padding:0 20px}
body[data-designed-theme="header-bar"] .header-bar-credentials{justify-self:stretch}
body[data-designed-theme="header-bar"] .header-bar-login{width:100%}
body[data-designed-theme="header-bar"] .header-bar-main{padding:0 20px}
}
/* Mobile: a bar cannot hold a credential row, so the block leaves the row and
   becomes a full-width panel under a slim bar. The banner follows it. */
@media(max-width:760px){
body[data-designed-theme="header-bar"] .header-bar-page{grid-template-rows:auto minmax(0,1fr) auto}
body[data-designed-theme="header-bar"] .header-bar-product-header{min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--premium-mobile-header-height,68px) auto;gap:0;padding:0 16px 18px}
/* 24 at the bottom rather than 18 all round, for the operator's second note: on a
   phone the recovery links ARE the panel's last row, so 18 put them 18px off the
   panel edge. 24 is the same measure the desktop bar now gives them. */
body[data-designed-theme="header-bar"] .header-bar-credentials{grid-row:2;justify-self:stretch;display:block;padding:18px 18px 24px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 46%,transparent);border-radius:8px;background:var(--dt-panel);color:var(--dt-panel-text)}
body[data-designed-theme="header-bar"] .header-bar-login{width:100%;grid-template-columns:minmax(0,1fr);gap:12px;color:var(--dt-panel-text)}
body[data-designed-theme="header-bar"] .header-bar-input{height:50px}
body[data-designed-theme="header-bar"] .header-bar-input input{min-height:48px;font-size:16px}
body[data-designed-theme="header-bar"] .header-bar-submit{height:50px;min-height:50px}
body[data-designed-theme="header-bar"] .header-bar-recovery{justify-content:space-between;gap:12px}
body[data-designed-theme="header-bar"] .header-bar-recovery a{color:var(--dt-panel-text)}
body[data-designed-theme="header-bar"] .header-bar-main{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:24px;padding:24px 16px 24px}
body[data-designed-theme="header-bar"] .header-bar-plinth{display:none}
/* The header control lifts the shared panel host; this layout has no host, so
   the toggle has nothing to lift and the label is not shown. */
body[data-designed-theme="header-bar"] .premium-auth-toggle-label{display:none}
}


/* layouts-v1 - bottom-dock. One credential block, one banner contract, one arrangement. */
body[data-designed-theme="bottom-dock"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="bottom-dock"] .bottom-dock-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden}
body[data-designed-theme="bottom-dock"] .bottom-dock-main{position:relative;z-index:4;min-width:0;min-height:0}
body[data-designed-theme="bottom-dock"] .layout-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="bottom-dock"] .bottom-dock-account-panel{border-color:color-mix(in oklch,var(--dt-border-soft) 52%,transparent)}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="bottom-dock"] .bottom-dock-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-44%;--mt-cone-width:56%;--mt-cone-height:126%;--mt-cone-inset:-14%;
--mt-cone-angle:22deg;--mt-cone-blur:50px;--mt-cone-opacity:.92;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:8%;
--mt-spill-left-strength:24%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:70%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:56%;--mt-haze-edge:42%;--mt-haze-pool-strength:13%;
--mt-geometry-height:74%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:60%;
}
@media(max-width:760px){
body[data-designed-theme="bottom-dock"]{overflow:auto}
body[data-designed-theme="bottom-dock"] .bottom-dock-page{
--mt-cone-top-sm:-28%;--mt-cone-width-sm:124%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-46%;--mt-cone-angle-sm:14deg;--mt-cone-blur-sm:32px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:46%;
}
}

body[data-designed-theme="bottom-dock"] .bottom-dock-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 44%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__size--tall{display:none}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 56%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
@media(max-width:760px){
body[data-designed-theme="bottom-dock"] .bottom-dock-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__frame{inset:12px}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__size--wide{display:none}
body[data-designed-theme="bottom-dock"] .bottom-dock-banner__size--tall{display:block}
}

body[data-designed-theme="bottom-dock"] .bottom-dock-page{grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px}
/* Banner high, dock low, the middle band left open on purpose. padding-top puts
   the slot's top edge at y=224 and the dock's at y=680 at 1440x900. */
body[data-designed-theme="bottom-dock"] .bottom-dock-main{display:flex;flex-direction:column;align-items:center;gap:0;padding:156px 0 0}
body[data-designed-theme="bottom-dock"] .bottom-dock-main>.layout-line{margin:auto 0;padding:0 var(--premium-edge);text-align:center}
/* The dock. A strip, not a card: no radius on the outer edges, a lit top rule,
   and the fields on a row. */
body[data-designed-theme="bottom-dock"] .bottom-dock-dock{width:100%;margin-top:auto;padding:0;border:0;background:transparent;box-shadow:none}
body[data-designed-theme="bottom-dock"] .bottom-dock-dock>.premium-auth-panel{width:100%;padding:0;border:0;border-top:2px solid var(--dt-cta);border-radius:0;background:color-mix(in oklch,var(--dt-panel) 92%,var(--dt-chrome));box-shadow:0 -14px 40px color-mix(in oklch,var(--dt-chrome) 46%,transparent)}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-panel__heading{display:flex;align-items:baseline;gap:14px;margin:0;padding:12px 24px 0}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-panel__heading>span{margin:0}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-panel__heading h2{font-size:15px;letter-spacing:0}
/* The credential row.
   premiumChrome declares the auth form and its fields as a COLUMN, with
   !important, at (0,5,1) and (0,6,1). A dock re-lays the same fields out on a row,
   so these selectors are deliberately long enough to outrank those - measured, not
   guessed: at the shorter (0,4,1) the contract's padding:0 won and the dock's
   inputs ran off both page edges with "Create account" clipped by the viewport.
   Nothing about the FIELDS themselves is replaced; only the track they sit on.
   The bottom pad is 24 and was 16. On this layout the recovery links are the
   dock's last row and the trust row starts immediately under it, so 16 left them
   16px off a change of surface - the same complaint the operator raised about
   Header sign-in, one layout over. 24 is the measure both now use. */
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;grid-template-rows:auto auto;align-items:end;gap:10px 20px!important;padding:10px 24px 24px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-field{min-height:66px!important;grid-template-rows:14px 44px!important;gap:6px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-input{height:44px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-input input{min-height:42px!important}
/* Explicit placement, because the panel emits recovery BEFORE submit and
   auto-placement therefore pushed the button onto a second row, level with the
   links rather than with the fields it submits. On a dock the button belongs at
   the end of the credential row. */
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-submit{grid-row:1;grid-column:3;height:44px!important;min-height:44px!important;align-self:end}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-recovery{grid-row:2;grid-column:1/3;justify-content:flex-start;gap:22px;margin:0}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-join{grid-row:2;grid-column:3;margin:0;text-align:right}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="bottom-dock"] .bottom-dock-main{padding:34px 0 0}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px 18px 24px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-submit{grid-row:auto;grid-column:1/-1}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-recovery{grid-row:auto;grid-column:1/-1}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-join{grid-row:auto;grid-column:1/-1;text-align:left}
}
/* Mobile: a strip along the bottom edge of a phone IS a dock, so it sticks to the
   bottom of the viewport while the banner scrolls past it and releases when the
   trust row arrives.
   Sticky rather than viewport-pinned, and that is not a style preference. Every
   theme's stylesheet ships in EVERY export, and tests/export.test.js proves a
   malicious brand-name value cannot inject a declaration by asserting that no
   export contains a viewport-pinning position keyword anywhere - comment text
   included. Sticky is also the better dock: it stays in flow, so it reserves its
   own height and can never cover the trust row, which is what the padding hack
   this replaced existed to undo. */
@media(max-width:760px){
body[data-designed-theme="bottom-dock"] .bottom-dock-page{grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="bottom-dock"] .bottom-dock-main{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:16px 16px 26px}
body[data-designed-theme="bottom-dock"] .bottom-dock-dock{position:sticky;z-index:70;bottom:0;width:100%;margin-top:0}
body[data-designed-theme="bottom-dock"] .bottom-dock-dock>.premium-auth-panel{padding-bottom:8px}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card{grid-template-columns:minmax(0,1fr);gap:12px!important;padding:12px 16px 16px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-field{min-height:72px!important;grid-template-rows:16px 50px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-input{height:50px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-input input{min-height:48px!important;font-size:16px!important}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-form.login-card .premium-auth-submit{height:50px!important;min-height:50px!important;grid-row:auto;grid-column:1/-1}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-recovery,
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-join{grid-row:auto;grid-column:1/-1;text-align:left}
body[data-designed-theme="bottom-dock"] [data-premium-chrome] .bottom-dock-dock.premium-panel-host .premium-auth-panel__heading{padding:12px 16px 0}
body[data-designed-theme="bottom-dock"] .bottom-dock-dock>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="bottom-dock"] .premium-auth-toggle-label{display:none}
}


/* layouts-v1 - narrow-stack. One credential block, one banner contract, one arrangement. */
body[data-designed-theme="narrow-stack"]{display:block;overflow:hidden;background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme="narrow-stack"] .narrow-stack-page{position:relative;isolation:isolate;width:100%;min-height:100svh;display:grid;grid-template-columns:1fr;overflow:hidden}
body[data-designed-theme="narrow-stack"] .narrow-stack-main{position:relative;z-index:4;min-width:0;min-height:0}
body[data-designed-theme="narrow-stack"] .layout-line{max-width:62ch;margin:0;color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-muted));font:600 14px/1.55 var(--font-body)}
body[data-designed-theme="narrow-stack"] .narrow-stack-account-panel{border-color:color-mix(in oklch,var(--dt-border-soft) 52%,transparent)}
/* Materials contract tuning. Only --mt-* custom properties; never a materials
   declaration override. See MATERIALS_CONTRACT.md. */
body[data-designed-theme="narrow-stack"] .narrow-stack-page{
--mt-cone-tint:var(--dt-atmosphere);
--mt-cone-top:-44%;--mt-cone-width:56%;--mt-cone-height:126%;--mt-cone-inset:-14%;
--mt-cone-angle:22deg;--mt-cone-blur:50px;--mt-cone-opacity:.92;
--mt-cone-spread:36% 52%;--mt-cone-origin:24%;--mt-cone-core:44%;--mt-cone-mid:22%;--mt-cone-edge:8%;
--mt-spill-left-strength:24%;--mt-spill-right-strength:22%;
--mt-haze-near:var(--dt-illustration-mid);--mt-haze-far:var(--dt-atmosphere-far);
--mt-haze-bottom:-10%;--mt-haze-height:70%;--mt-haze-spread:70% 84%;--mt-haze-core:100%;--mt-haze-mid:56%;--mt-haze-edge:42%;--mt-haze-pool-strength:13%;
--mt-geometry-height:74%;--mt-geometry-contrast:7%;
--mt-grain-opacity:.036;
--mt-vignette-tint:var(--dt-veil);--mt-vignette-origin:38%;--mt-vignette-mid:26%;--mt-vignette-edge:60%;
}
@media(max-width:760px){
body[data-designed-theme="narrow-stack"]{overflow:auto}
body[data-designed-theme="narrow-stack"] .narrow-stack-page{
--mt-cone-top-sm:-28%;--mt-cone-width-sm:124%;--mt-cone-height-sm:104%;
--mt-cone-inset-sm:-46%;--mt-cone-angle-sm:14deg;--mt-cone-blur-sm:32px;
--mt-geometry-height-sm:40%;--mt-haze-height-sm:46%;
}
}

body[data-designed-theme="narrow-stack"] .narrow-stack-banner{position:relative;isolation:isolate;width:min(1024px,100%);aspect-ratio:1024/300;overflow:hidden;border:1px solid color-mix(in oklch,var(--dt-border-soft) 44%,transparent);border-radius:10px;background:color-mix(in oklch,var(--dt-chrome) 76%,var(--dt-panel))}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__frame{position:absolute;inset:14px;display:grid;align-content:center;justify-items:center;gap:9px;border:1px dashed color-mix(in oklch,var(--dt-panel-text) 20%,transparent);border-radius:6px;text-align:center}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__eyebrow{color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font:800 11px/1 var(--font-body);letter-spacing:.17em;text-transform:uppercase}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__size{color:var(--dt-panel-text);font:760 clamp(19px,1.7vw,24px)/1 var(--font-body);font-variant-numeric:tabular-nums}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__size--tall{display:none}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__note{color:color-mix(in oklch,var(--dt-panel-text) 56%,var(--dt-muted));font:640 12px/1.45 var(--font-body)}
@media(max-width:760px){
body[data-designed-theme="narrow-stack"] .narrow-stack-banner{width:100%;aspect-ratio:545/325}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__frame{inset:12px}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__size--wide{display:none}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner__size--tall{display:block}
}

body[data-designed-theme="narrow-stack"] .narrow-stack-page{grid-template-rows:var(--premium-header-height,68px) minmax(0,1fr) 52px}
/* The measure. Card high on the axis, slot grounded under it, and the padding is
   what puts the card's top edge at y=192 and the slot's at y=536 at 1440x900. */
body[data-designed-theme="narrow-stack"] .narrow-stack-main{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:0;padding:0 var(--premium-edge)}
body[data-designed-theme="narrow-stack"] .narrow-stack-account{width:300px;max-width:100%}
/* Compact: the eyebrow goes, the heading drops a step, the padding tightens. The
   FIELDS do not change - the contract owns those, and a 50px control is a 50px
   control at any measure. */
body[data-designed-theme="narrow-stack"] .narrow-stack-account>.premium-auth-panel{padding:20px 22px 22px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account .premium-auth-panel__heading{margin-bottom:14px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account .premium-auth-panel__heading>span{display:none}
body[data-designed-theme="narrow-stack"] .narrow-stack-account .premium-auth-panel__heading h2{font-size:19px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account .premium-auth-recovery{gap:10px;font-size:11px}
body[data-designed-theme="narrow-stack"] .narrow-stack-main>.layout-line{max-width:34ch;text-align:center}
/* This container is a column flexbox. Cross-axis start would pin the banner to
   the left; keep the whole sign-in-first composition on one centred axis. */
body[data-designed-theme="narrow-stack"] .narrow-stack-banner{align-self:center}
/* The full-screen preview keeps this compact pair together and centres the pair
   as one object, rather than stretching equal gaps over the whole viewport. */
body[data-designed-theme="narrow-stack"][data-preview-display="expanded"] .narrow-stack-main{justify-content:center;gap:40px;padding:0 var(--premium-edge)}
@media(min-width:761px) and (max-width:1040px){
body[data-designed-theme="narrow-stack"] .narrow-stack-main{padding:0 20px}
body[data-designed-theme="narrow-stack"][data-preview-display="expanded"] .narrow-stack-main{justify-content:center;gap:32px;padding:0 20px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account{width:min(340px,100%)}
}
/* Mobile: the order is what survives. The card keeps its narrow ceiling. */
@media(max-width:760px){
body[data-designed-theme="narrow-stack"] .narrow-stack-page{grid-template-rows:var(--premium-mobile-header-height,56px) minmax(0,1fr) auto}
body[data-designed-theme="narrow-stack"] .narrow-stack-main{display:flex;flex-direction:column;align-items:center;gap:24px;padding:22px 16px 26px}
body[data-designed-theme="narrow-stack"][data-preview-display="expanded"] .narrow-stack-main{justify-content:center;gap:24px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account{width:min(320px,100%)}
body[data-designed-theme="narrow-stack"] .narrow-stack-account>.premium-auth-panel{padding:20px}
body[data-designed-theme="narrow-stack"] .narrow-stack-account .premium-auth-panel__heading>span{display:block}
body[data-designed-theme="narrow-stack"] .narrow-stack-banner{width:100%}
body[data-designed-theme="narrow-stack"] .narrow-stack-account>.premium-auth-panel>.premium-auth-sheet-close{display:none}
body[data-designed-theme="narrow-stack"] .narrow-stack-page[data-premium-chrome]:has(.premium-auth-toggle:checked) .narrow-stack-account{background:var(--dt-chrome)!important}
}


body[data-designed-theme]:not([data-designed-theme=""]){background:var(--dt-scene-bottom);color:var(--dt-panel-text)}
body[data-designed-theme]:not([data-designed-theme=""])>div:first-child{background:
radial-gradient(ellipse 72% 46% at 16% -8%,color-mix(in oklch,var(--dt-glow) 46%,transparent) 0%,color-mix(in oklch,var(--dt-glow) 13%,transparent) 44%,transparent 72%),
radial-gradient(ellipse 54% 42% at 92% 18%,color-mix(in oklch,var(--dt-border-soft) 22%,transparent) 0%,transparent 74%),
radial-gradient(ellipse 86% 28% at 52% 72%,color-mix(in oklch,var(--dt-scene-mid) 62%,var(--dt-glow)) 0%,transparent 76%),
linear-gradient(var(--dt-angle),
  var(--dt-scene-top) 0%,
  color-mix(in oklch,var(--dt-scene-top) 52%,var(--dt-scene-mid)) 27%,
  var(--dt-scene-mid) 51%,
  color-mix(in oklch,var(--dt-scene-mid) 44%,var(--dt-scene-bottom)) 76%,
  var(--dt-scene-bottom) 100%)}
body[data-designed-theme]:not([data-designed-theme=""])>div:first-child::before{background:
linear-gradient(102deg,color-mix(in oklch,var(--dt-chrome) 66%,transparent) 0%,transparent 26%,transparent 67%,color-mix(in oklch,var(--dt-chrome-alt) 58%,transparent) 100%),
radial-gradient(ellipse 66% 34% at 48% 53%,color-mix(in oklch,var(--dt-glow) 24%,transparent) 0%,color-mix(in oklch,var(--dt-scene-mid) 12%,transparent) 42%,transparent 76%),
linear-gradient(180deg,transparent 0 34%,color-mix(in oklch,var(--dt-panel-text) 7%,transparent) 55%,transparent 73%)}
body[data-designed-theme]:not([data-designed-theme=""])>:is(
.sunset-tropics-page,.casino-royale-page,.stadium-night-page,.ice-rush-page,.metro-neon-page,
.desert-gold-page,.champion-crest-page,.court-kings-page,.midnight-turf-page
)::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.72;mix-blend-mode:soft-light;background:
radial-gradient(ellipse 54% 28% at 48% 8%,color-mix(in oklch,var(--dt-glow) 72%,transparent),transparent 72%),
linear-gradient(180deg,transparent 0 41%,color-mix(in oklch,var(--dt-panel-text) 13%,transparent) 55%,transparent 71%),
radial-gradient(circle at 24% 26%,color-mix(in oklch,var(--dt-panel-text) 36%,transparent) 0 .42px,transparent .62px),
radial-gradient(circle at 72% 64%,color-mix(in oklch,var(--dt-chrome) 48%,transparent) 0 .38px,transparent .58px);
background-size:auto,auto,4px 4px,7px 7px;background-position:0 0,0 0,0 0,2px 3px}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-wordmark"]{color:var(--dt-wordmark);text-shadow:0 3px 20px color-mix(in oklch,var(--dt-chrome) 72%,transparent)}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class*="glyph"],[class*="-mark"],.crest-brand-shield) [fill]{fill:var(--dt-glow)!important}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class*="glyph"],[class*="-mark"],.crest-brand-shield) [stroke]:not([stroke="none"]){stroke:var(--dt-border)!important}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-glyph"] circle:first-child,
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-mark"] circle:first-child{fill:var(--dt-border)!important}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-glyph"] circle:nth-child(2),
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-mark"] circle:nth-child(2){fill:var(--dt-chrome-alt)!important}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-glyph"] g,
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-mark"] g{color:var(--dt-glow);fill:var(--dt-glow)}
body[data-designed-theme]:not([data-designed-theme=""]) [class*="layer--far"],
body[data-designed-theme]:not([data-designed-theme=""]) [class*="-far"]{color:var(--dt-illustration-far);fill:var(--dt-illustration-far)}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class*="layer--far"],[class*="-far"]) [fill]:not([fill="none"]){fill:var(--dt-illustration-far)}
body[data-designed-theme]:not([data-designed-theme=""]) [class*="layer--mid"],
body[data-designed-theme]:not([data-designed-theme=""]) [class*="-mid"]{color:var(--dt-illustration-mid)}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class*="layer--mid"],[class*="-mid"]) [fill]:not([fill="none"]){fill:var(--dt-illustration-mid)}
body[data-designed-theme]:not([data-designed-theme=""]) [class*="layer--foreground"],
body[data-designed-theme]:not([data-designed-theme=""]) [class*="layer--front"],
body[data-designed-theme]:not([data-designed-theme=""]) [class*="-near"]{color:var(--dt-illustration-near)}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class*="layer--foreground"],[class*="layer--front"],[class*="-near"]) [fill]:not([fill="none"]){fill:var(--dt-illustration-near)}
body[data-designed-theme="ice-rush"] :is(.ice-layer--snow,.ice-layer--aurora,.ice-rink-marks){fill:var(--dt-glow)}
body[data-designed-theme="ice-rush"] .ice-rink-plane{fill:url(#ice-rink)}
body[data-designed-theme="ice-rush"] .ice-layer--shards{color:var(--dt-illustration-near);fill:var(--dt-illustration-near)}
body[data-designed-theme="metro-neon"] :is(.metro-layer--glow,.metro-layer--traffic){color:var(--dt-glow);fill:var(--dt-glow);stroke:var(--dt-glow)}
body[data-designed-theme="metro-neon"] .metro-ground{fill:var(--dt-illustration-near)}
body[data-designed-theme="desert-gold"] .desert-stars{fill:var(--dt-glow)}
body[data-designed-theme="desert-gold"] .desert-gold-illustration>ellipse{fill:color-mix(in oklch,var(--dt-glow) 24%,transparent)}
body[data-designed-theme="desert-gold"] .desert-gold-illustration>circle{fill:var(--dt-glow)}
body[data-designed-theme="desert-gold"] .desert-gold-illustration>g:nth-of-type(1){fill:var(--dt-illustration-far)}
body[data-designed-theme="desert-gold"] .desert-gold-illustration>g:nth-of-type(2),
body[data-designed-theme="desert-gold"] .desert-mobile-dunes{fill:var(--dt-illustration-mid)}
body[data-designed-theme="desert-gold"] .desert-gold-illustration>g:nth-of-type(3),
body[data-designed-theme="desert-gold"] .desert-gold-illustration>path{fill:var(--dt-illustration-near)}
body[data-designed-theme="champion-crest"] .champion-crest-illustration>ellipse{fill:url(#crest-halo)}
body[data-designed-theme="champion-crest"] .crest-arena-shimmer{fill:var(--dt-glow)}
body[data-designed-theme="champion-crest"] .champion-crest-illustration>g:nth-of-type(1){color:var(--dt-illustration-far);fill:var(--dt-illustration-far)}
body[data-designed-theme="champion-crest"] .champion-crest-illustration>g:nth-of-type(2){color:var(--dt-illustration-mid);fill:var(--dt-illustration-mid)}
body[data-designed-theme="champion-crest"] :is(.crest-emblem-layer,.champion-crest-illustration>g:nth-of-type(4)){color:var(--dt-illustration-near);fill:var(--dt-illustration-near)}
body[data-designed-theme="court-kings"] :is(.court-arena-shimmer,.court-kings-illustration>g:first-of-type){fill:var(--dt-glow)}
body[data-designed-theme="court-kings"] .court-hoop-shadow{fill:var(--dt-illustration-far)}
body[data-designed-theme="casino-royale"] .casino-layer--far [fill]:not([fill="none"]),
body[data-designed-theme="casino-royale"] .casino-layer--drapes [fill]:not([fill="none"]):not([fill^="url"]){fill:var(--dt-illustration-far)}
body[data-designed-theme="casino-royale"] .casino-layer--arena [fill]:not([fill="none"]):not([fill^="url"]){fill:var(--dt-illustration-mid)}
body[data-designed-theme="casino-royale"] .casino-layer--ring [fill]:not([fill="none"]):not([fill^="url"]),
body[data-designed-theme="casino-royale"] .casino-layer--front [fill]:not([fill="none"]):not([fill^="url"]){fill:var(--dt-illustration-near)}
body[data-designed-theme="casino-royale"] :is(.casino-layer--ring,.casino-layer--drapes,.casino-layer--front) [stroke]:not([stroke="none"]){stroke:var(--dt-border)}
body[data-designed-theme="casino-royale"] :is(.casino-crowd-shimmer,.casino-layer--accents [fill]:not([fill="none"])){fill:var(--dt-glow)}
body[data-designed-theme="midnight-turf"] .midnight-turf-illustration>rect{fill:url(#turf-light-halo)}
body[data-designed-theme="midnight-turf"] .turf-light-beams,
body[data-designed-theme="midnight-turf"] .turf-light-rigs{fill:var(--dt-glow)}
body[data-designed-theme="midnight-turf"] .turf-stadium-far,
body[data-designed-theme="midnight-turf"] .turf-stadium-far [fill]:not([fill="none"]){fill:var(--dt-illustration-far)}
body[data-designed-theme="midnight-turf"] .turf-stadium-mid,
body[data-designed-theme="midnight-turf"] .turf-stadium-mid [fill]:not([fill="none"]){fill:var(--dt-illustration-mid)}
body[data-designed-theme="midnight-turf"] .turf-pitch,
body[data-designed-theme="midnight-turf"] .midnight-turf-illustration>g:last-child{fill:var(--dt-illustration-near)}
body[data-designed-theme="midnight-turf"] .turf-crowd-shimmer{fill:var(--dt-border)}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
.casino-royale-rail,.stadium-night-access,.ice-rush-header,.metro-neon-rail,.desert-access-rail,
.crest-header,.court-access-bar,.turf-access-rail,.tropics-login-strip
){border-color:var(--dt-border);background:linear-gradient(160deg,var(--dt-panel),var(--dt-chrome-alt));color:var(--dt-panel-text);box-shadow:0 18px 48px color-mix(in oklch,var(--dt-chrome) 40%,transparent)}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
.casino-royale-header,.stadium-night-header,.desert-brand-header,.court-brand-header,.turf-brand-header
){border-color:color-mix(in oklch,var(--dt-border) 48%,transparent)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card{color:var(--dt-panel-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field"]{border-color:var(--dt-border)!important;color:var(--dt-border)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field"]>span,
body[data-designed-theme]:not([data-designed-theme=""]) :is(
.casino-royale-rule,.casino-royale-rail__cap,.casino-royale-rail__seal,.turf-access-heading>span,
.turf-night-line,.desert-kicker,.desert-access-heading>span,.crest-honor-line,.court-tipoff
){color:var(--dt-glow)!important}
body[data-designed-theme]:not([data-designed-theme=""]) :is([class$="__seal"],[class$="__cap"]){border-color:var(--dt-border)!important}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field__chip"],
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field__icon"]{background:var(--dt-chrome-alt);color:var(--dt-glow)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card input{border-color:var(--dt-border-soft);background:var(--dt-field);color:var(--dt-field-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card input::placeholder{color:var(--dt-field-muted)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card input:focus{border-color:var(--dt-border);box-shadow:0 0 0 4px color-mix(in oklch,var(--dt-border) 28%,transparent)}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card button[type="submit"]{border-color:var(--dt-cta-shadow)!important;background:linear-gradient(180deg,color-mix(in oklch,var(--dt-cta) 88%,var(--dt-glow)),var(--dt-cta))!important;color:var(--dt-cta-text)!important;box-shadow:0 4px 0 var(--dt-cta-shadow)!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-banner-source="banner-studio-sample"]{border-color:var(--dt-border);background:var(--dt-chrome);box-shadow:0 0 0 3px color-mix(in oklch,var(--dt-glow) 38%,transparent),0 18px 44px color-mix(in oklch,var(--dt-chrome) 34%,transparent)}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-message"]{color:var(--dt-panel-text);text-shadow:0 2px 18px var(--dt-chrome)}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-message"] p{color:color-mix(in oklch,var(--dt-panel-text) 78%,var(--dt-glow))}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-footer"]{border-color:var(--dt-border);background:var(--dt-footer);color:var(--dt-footer-text)}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-footer"] a:is(:hover,:focus-visible){color:var(--dt-glow)}

body[data-designed-theme]:not([data-designed-theme=""])>div:first-child{
  --dt-radius-xs:6px;
  --dt-radius-sm:8px;
  --dt-radius-md:12px;
  --dt-radius-lg:16px;
}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-illustration"]{
  filter:saturate(1.08) contrast(1.035);
  shape-rendering:geometricPrecision;
}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  [class*="layer--far"],[class*="-far"]
){filter:blur(.35px) drop-shadow(0 12px 28px color-mix(in oklch,var(--dt-chrome) 18%,transparent))}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  [class*="layer--mid"],[class*="-mid"]
){filter:drop-shadow(0 14px 24px color-mix(in oklch,var(--dt-chrome) 24%,transparent))}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  [class*="layer--foreground"],[class*="layer--front"],[class*="-near"],
  .ice-layer--shards,.metro-ground,.crest-emblem-layer,.court-hoop-shadow,.turf-pitch
){filter:drop-shadow(0 18px 28px color-mix(in oklch,var(--dt-chrome) 38%,transparent))}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  .ice-rink-plane,.metro-ground,.crest-emblem-layer,.court-hoop-shadow,.turf-pitch,
  .casino-layer--ring,.casino-layer--front
){stroke:color-mix(in oklch,var(--dt-border-soft) 42%,transparent);stroke-width:.8;paint-order:stroke fill}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  .casino-royale-rail,.stadium-night-access,.ice-rush-header,.metro-neon-rail,.desert-access-rail,
  .crest-header,.court-access-bar,.turf-access-rail,.tropics-login-strip
){
  border:1px solid transparent;
  border-radius:var(--dt-radius-md);
  background:
    linear-gradient(155deg,
      color-mix(in oklch,var(--dt-panel) 94%,var(--dt-glow)) 0%,
      var(--dt-panel) 46%,
      color-mix(in oklch,var(--dt-chrome-alt) 92%,var(--dt-chrome)) 100%) padding-box,
    linear-gradient(132deg,
      color-mix(in oklch,var(--dt-border-soft) 78%,var(--dt-panel-text)) 0%,
      var(--dt-border) 31%,
      color-mix(in oklch,var(--dt-border) 34%,var(--dt-chrome)) 68%,
      var(--dt-border-soft) 100%) border-box;
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 16%,transparent) inset,
    0 -1px 0 color-mix(in oklch,var(--dt-chrome) 58%,transparent) inset,
    0 22px 56px color-mix(in oklch,var(--dt-chrome) 46%,transparent),
    0 5px 18px color-mix(in oklch,var(--dt-glow) 8%,transparent);
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field"]{
  overflow:hidden;
  border:1px solid transparent!important;
  border-radius:var(--dt-radius-sm)!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklch,var(--dt-field) 96%,var(--dt-panel-text)) 0%,
      var(--dt-field) 48%,
      color-mix(in oklch,var(--dt-field) 92%,var(--dt-border-soft)) 100%) padding-box,
    linear-gradient(145deg,var(--dt-border-soft),color-mix(in oklch,var(--dt-border) 58%,var(--dt-chrome))) border-box!important;
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 54%,transparent) inset,
    0 3px 8px color-mix(in oklch,var(--dt-chrome) 17%,transparent) inset,
    0 1px 2px color-mix(in oklch,var(--dt-chrome) 16%,transparent);
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card [class$="-field"]:focus-within{
  border-color:transparent!important;
  box-shadow:
    0 0 0 1px var(--dt-border),
    0 0 0 4px color-mix(in oklch,var(--dt-border) 24%,transparent),
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 54%,transparent) inset,
    0 4px 10px color-mix(in oklch,var(--dt-chrome) 18%,transparent) inset!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card input{
  border:0!important;
  border-radius:calc(var(--dt-radius-sm) - 1px)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-weight:680;
  letter-spacing:.005em;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card button[type="submit"]{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in oklch,var(--dt-cta) 62%,var(--dt-panel-text))!important;
  border-radius:var(--dt-radius-sm)!important;
  background:linear-gradient(180deg,
    color-mix(in oklch,var(--dt-cta) 58%,var(--dt-panel-text)) 0%,
    color-mix(in oklch,var(--dt-cta) 88%,var(--dt-glow)) 12%,
    var(--dt-cta) 58%,
    color-mix(in oklch,var(--dt-cta) 72%,var(--dt-cta-shadow)) 100%)!important;
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 68%,transparent) inset,
    0 -1px 0 color-mix(in oklch,var(--dt-cta-shadow) 65%,transparent) inset,
    0 3px 0 var(--dt-cta-shadow),
    0 8px 18px color-mix(in oklch,var(--dt-cta-shadow) 32%,transparent)!important;
  font-kerning:normal!important;
  font-optical-sizing:auto;
  letter-spacing:.105em!important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card button[type="submit"]:hover{
  filter:saturate(1.08) brightness(1.045);
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 74%,transparent) inset,
    0 -1px 0 color-mix(in oklch,var(--dt-cta-shadow) 65%,transparent) inset,
    0 4px 0 var(--dt-cta-shadow),
    0 12px 24px color-mix(in oklch,var(--dt-cta-shadow) 36%,transparent)!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card button[type="submit"]:active{
  filter:saturate(1.02) brightness(.98);
  transform:translateY(2px) scale(.997);
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 42%,transparent) inset,
    0 -1px 0 color-mix(in oklch,var(--dt-cta-shadow) 74%,transparent) inset,
    0 1px 0 var(--dt-cta-shadow),
    0 5px 12px color-mix(in oklch,var(--dt-cta-shadow) 28%,transparent)!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card button[type="submit"]:focus-visible{
  outline:2px solid var(--dt-panel-text)!important;
  outline-offset:3px!important;
  box-shadow:
    0 0 0 5px color-mix(in oklch,var(--dt-border) 38%,transparent),
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 68%,transparent) inset,
    0 3px 0 var(--dt-cta-shadow)!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) [data-banner-source="banner-studio-sample"]{
  overflow:hidden;
  border:1px solid color-mix(in oklch,var(--dt-border-soft) 78%,var(--dt-panel-text))!important;
  border-radius:var(--dt-radius-md)!important;
  box-shadow:
    0 0 0 1px var(--dt-border),
    0 0 0 4px color-mix(in oklch,var(--dt-chrome) 64%,transparent),
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 54%,transparent) inset,
    0 24px 64px color-mix(in oklch,var(--dt-chrome) 48%,transparent),
    0 7px 20px color-mix(in oklch,var(--dt-glow) 9%,transparent)!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) [data-banner-source="banner-studio-sample"]::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in oklch,var(--dt-panel-text) 14%,transparent),transparent 18% 72%,color-mix(in oklch,var(--dt-chrome) 23%,transparent)),
    linear-gradient(110deg,color-mix(in oklch,var(--dt-border-soft) 16%,transparent),transparent 28% 72%,color-mix(in oklch,var(--dt-glow) 9%,transparent));
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 58%,transparent) inset,
    1px 0 0 color-mix(in oklch,var(--dt-border-soft) 48%,transparent) inset,
    0 -1px 0 color-mix(in oklch,var(--dt-chrome) 72%,transparent) inset;
}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-wordmark"]{
  font-kerning:normal;
  font-optical-sizing:auto;
  white-space:nowrap;
}
body[data-designed-theme]:not([data-designed-theme=""]) :is(
  .casino-royale-rule,.casino-royale-rail__cap,.stadium-night-live,.stadium-night-access__label b,
  .ice-rush-coldline,.metro-neon-rail__index,.metro-neon-access-copy b,.metro-neon-signal,
  .desert-kicker,.desert-access-heading>span,.crest-honor-line,.court-tipoff,.turf-access-heading>span,.turf-night-line
){
  font-kerning:normal;
  font-optical-sizing:auto;
  font-weight:850;
  letter-spacing:.22em!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-message"] strong{
  font-kerning:normal;
  font-optical-sizing:auto;
  letter-spacing:-.035em;
  text-wrap:balance;
}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-message"] p{
  max-width:58ch;
  font-kerning:normal;
  font-optical-sizing:auto;
  font-weight:570;
  letter-spacing:.012em;
  line-height:1.55;
  text-wrap:pretty;
}
body[data-designed-theme]:not([data-designed-theme=""]) [class$="-footer"]{
  border-top:0!important;
  background:
    linear-gradient(90deg,transparent 0%,var(--dt-border-soft) 18%,var(--dt-border) 50%,var(--dt-border-soft) 82%,transparent 100%) top/100% 1px no-repeat,
    linear-gradient(155deg,var(--dt-footer),color-mix(in oklch,var(--dt-footer) 88%,var(--dt-chrome-alt)))!important;
  font-kerning:normal;
  font-optical-sizing:auto;
  letter-spacing:.055em;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card :is(
  .desert-field,.crest-field,.court-field,.turf-field
){
  overflow:visible;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card :is(
  .desert-field,.crest-field,.court-field,.turf-field
):focus-within{
  border:0!important;
  box-shadow:none!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card :is(
  .desert-field,.crest-field,.court-field,.turf-field
) input{
  border:1px solid transparent!important;
  border-radius:var(--dt-radius-xs)!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklch,var(--dt-field) 96%,var(--dt-panel-text)) 0%,
      var(--dt-field) 48%,
      color-mix(in oklch,var(--dt-field) 92%,var(--dt-border-soft)) 100%) padding-box,
    linear-gradient(145deg,var(--dt-border-soft),color-mix(in oklch,var(--dt-border) 58%,var(--dt-chrome))) border-box!important;
  box-shadow:
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 54%,transparent) inset,
    0 3px 9px color-mix(in oklch,var(--dt-chrome) 18%,transparent) inset,
    0 1px 2px color-mix(in oklch,var(--dt-chrome) 18%,transparent)!important;
}
body[data-designed-theme]:not([data-designed-theme=""]) .login-card :is(
  .desert-field,.crest-field,.court-field,.turf-field
) input:focus{
  border-color:var(--dt-border)!important;
  box-shadow:
    0 0 0 3px color-mix(in oklch,var(--dt-border) 24%,transparent),
    0 1px 0 color-mix(in oklch,var(--dt-panel-text) 54%,transparent) inset,
    0 4px 10px color-mix(in oklch,var(--dt-chrome) 18%,transparent) inset!important;
}

body[data-designed-theme]:not([data-designed-theme=""]) .sportsbook-shell{background:var(--dt-chrome)}
body[data-designed-theme]:not([data-designed-theme=""]) .sportsbook-main{background:transparent}
body[data-designed-theme]:not([data-designed-theme=""]) .sportsbook-topbar{border-bottom-color:var(--dt-border);background:linear-gradient(100deg,var(--dt-chrome),var(--dt-chrome-alt))}
body[data-designed-theme]:not([data-designed-theme=""]) .sportsbook-topbar>nav a.active{border-color:var(--dt-border);color:var(--dt-chrome-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .sportsbook-topbar .account-link{border-color:var(--dt-cta);background:var(--dt-cta);color:var(--dt-cta-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .sport-rail{background:linear-gradient(180deg,var(--dt-chrome),var(--dt-chrome-alt))}
body[data-designed-theme]:not([data-designed-theme=""]) .sport-rail a{color:var(--dt-chrome-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .sport-rail a>span{color:var(--dt-glow)}
body[data-designed-theme]:not([data-designed-theme=""]) .sport-rail a.active{border-left-color:var(--dt-border);background:var(--dt-selected);color:var(--dt-selected-text)}
body[data-designed-theme]:not([data-designed-theme=""]) :is(.featured-matchups,.board-tabs,.market-board,.bet-slip){border-color:var(--dt-border-soft);background:var(--dt-surface);color:var(--dt-surface-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .market-board>header{background:linear-gradient(90deg,var(--dt-chrome),var(--dt-chrome-alt));color:var(--dt-chrome-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .feed-state{border-color:var(--dt-border);color:var(--dt-glow)}
body[data-designed-theme]:not([data-designed-theme=""]) .odds-price{border-color:var(--dt-border-soft);background:var(--dt-odds);color:var(--dt-odds-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .odds-price:hover{border-color:var(--dt-border);background:color-mix(in oklch,var(--dt-odds) 86%,var(--dt-glow))}
body[data-designed-theme]:not([data-designed-theme=""]) .odds-price.selected{border-color:var(--dt-selected);background:var(--dt-selected);color:var(--dt-selected-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .board-tabs [role=tab].active{border-color:var(--dt-border);color:var(--dt-selected)}
body[data-designed-theme]:not([data-designed-theme=""]) .bet-slip{background:var(--dt-bet-slip);color:var(--dt-bet-slip-text)}
body[data-designed-theme]:not([data-designed-theme=""]) .bet-slip :is(.slip-panel header button,.slip-pick>b,.slip-summary strong,.preview-boundary){color:var(--dt-selected)}
body[data-designed-theme]:not([data-designed-theme=""]) .bet-slip :is(.slip-panel h2 span,.mobile-slip-summary span b){background:var(--dt-cta);color:var(--dt-cta-text)}
body[data-designed-theme]:not([data-designed-theme=""]) :is(.sportsbook-footer,.mobile-bottom-nav){border-top-color:var(--dt-border);background:var(--dt-footer);color:var(--dt-footer-text)}
@media(max-width:720px){
  body[data-designed-theme]:not([data-designed-theme=""]){background:color-mix(in oklch,var(--dt-surface) 92%,var(--dt-scene-mid))}
  body[data-designed-theme]:not([data-designed-theme=""]) .mobile-sports{border-bottom-color:var(--dt-border-soft);background:var(--dt-surface)}
  body[data-designed-theme]:not([data-designed-theme=""]) .mobile-sports a{border-color:var(--dt-border-soft);background:var(--dt-odds);color:var(--dt-odds-text)}
  body[data-designed-theme]:not([data-designed-theme=""]) .mobile-sports a.active{border-color:var(--dt-selected);background:var(--dt-selected);color:var(--dt-selected-text)}
  body[data-designed-theme]:not([data-designed-theme=""]) .bet-slip>.mobile-slip-summary{background:var(--dt-bet-slip);color:var(--dt-bet-slip-text)}
}


/* THE HEADER BAR'S HEIGHT IS ITS CONTROL HEIGHT PLUS ITS BREATHING ROOM.
   The account controls are 44px tall and the bar is centred on them, so the bar
   height IS the top gap x2 + 44. The operator's note was that Create account sat
   hard against the top edge of the bar; it was 68px, giving a 12px gap that read
   as cramped once the nav came out and the row held only a mark and two buttons.
   76 = 16 + 44 + 16 on desktop, 68 = 12 + 44 + 12 on a phone, both on the 4/8
   rhythm. Every layout's page grid reads these two properties rather than
   repeating the number, so the bar and the row it occupies can never disagree. */
body[data-designed-theme] [data-premium-chrome="designed-premium-chrome-v1"]{--premium-header-height:76px;--premium-mobile-header-height:68px;--premium-edge:clamp(24px,3vw,32px);font-family:var(--font-body);text-rendering:optimizeLegibility}
body[data-designed-theme]>[data-premium-chrome="designed-premium-chrome-v1"]{background:linear-gradient(var(--dt-angle),var(--dt-scene-top),var(--dt-scene-bottom))!important}
body[data-designed-theme]>[data-premium-chrome="designed-premium-chrome-v1"]::before,
body[data-designed-theme]>[data-premium-chrome="designed-premium-chrome-v1"]::after{display:none!important;background:none!important}
body[data-designed-theme] [data-premium-chrome="designed-premium-chrome-v1"] [class$="-illustration"],
body[data-designed-theme] [data-premium-chrome="designed-premium-chrome-v1"] :is([class*="layer--far"],[class*="-far"],[class*="layer--mid"],[class*="-mid"],[class*="layer--foreground"],[class*="layer--front"],[class*="-near"]){filter:none!important}
.premium-product-header{position:relative;z-index:40;min-height:var(--premium-header-height);display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(220px,1fr);align-items:center;gap:32px;padding:0 var(--premium-edge);border-bottom:1px solid color-mix(in oklch,var(--dt-border-soft) 24%,transparent);background:var(--dt-chrome);color:var(--dt-chrome-text)}
/* No nav, so no middle track. Two columns rather than three with an empty one:
   an "auto" track that resolves to zero still costs its two 32px gaps, which
   pushed the account controls 64px off the right edge they are aligned to. */
.premium-product-header[data-header-nav="none"]{grid-template-columns:minmax(0,1fr) auto}
.premium-product-header__brand{min-width:0;display:inline-flex;align-items:center;max-width:220px;overflow:hidden;color:inherit;text-decoration:none}
/* The lockup box, and BOTH states land in it: an uploaded mark and the reserved
   [ LOGO ] slot occupy the same 210x44, so dropping a logo in later reflows
   nothing. The attribute match is *= rather than $=, because a lockup's class
   list ends with its brand modifiers, not with the lockup class - for example
   "turf-uploaded-lockup brand brand--logo-uploaded brand--name-in-logo" - so the
   $= form these rules used to carry matched nothing at all, and the header logo
   was being sized by the base sheet's generic .brand-logo instead. */
.premium-product-header [class*="-uploaded-lockup"]{max-width:210px!important;min-height:44px!important}
.premium-product-header [class*="-uploaded-lockup"] img,
.premium-product-header [class*="-uploaded-lockup"] .brand-logo{width:auto!important;max-width:210px!important;height:44px!important;object-fit:contain!important;object-position:left center!important}
.premium-product-header .brand-logo-reserved{min-width:132px;height:44px}
.premium-product-nav{height:100%;display:flex;align-items:center;gap:28px}
.premium-product-nav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;color:color-mix(in oklch,var(--dt-chrome-text) 72%,var(--dt-muted));font-size:13px;font-weight:720;text-decoration:none}
.premium-product-nav a:is(:hover,:focus-visible),.premium-product-nav a.active{border-bottom-color:var(--dt-cta);color:var(--dt-chrome-text)}
.premium-account-actions{position:relative;justify-self:end;display:flex;align-items:center;gap:8px}
.premium-account-action{min-width:84px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid color-mix(in oklch,var(--dt-chrome-text) 58%,transparent);border-radius:7px;color:var(--dt-chrome-text);font-size:13px;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.premium-account-action--join{border-color:var(--dt-cta);background:var(--dt-cta);color:var(--dt-cta-text)}
.premium-auth-disclosure{position:relative}
.premium-auth-disclosure>summary{list-style:none}
.premium-auth-disclosure>summary::-webkit-details-marker{display:none}
.premium-auth-sheet{position:absolute;top:52px;right:0;z-index:60;width:360px}
.premium-auth-panel{width:100%;padding:28px;border:1px solid color-mix(in oklch,var(--dt-border-soft) 48%,transparent);border-radius:8px;background:var(--dt-panel);color:var(--dt-panel-text);box-shadow:0 18px 46px color-mix(in oklch,var(--dt-chrome) 44%,transparent)}
.premium-auth-sheet-close{display:none}
.premium-auth-panel__heading{margin:0 0 22px}
.premium-auth-panel__heading>span{display:block;margin-bottom:7px;color:color-mix(in oklch,var(--dt-panel-text) 68%,var(--dt-muted));font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.premium-auth-panel__heading h2{margin:0;color:var(--dt-panel-text);font:760 24px/1.1 var(--font-body);letter-spacing:-.025em}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card{display:grid!important;gap:16px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--dt-panel-text)!important;box-shadow:none!important;backdrop-filter:none!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-field{min-height:73px!important;display:grid!important;grid-template-rows:16px 50px!important;gap:7px!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--dt-panel-text)!important;box-shadow:none!important;font-size:12px!important;font-weight:720!important;letter-spacing:.01em!important;text-transform:none!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-field>span:first-child{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;color:var(--dt-panel-text)!important;clip:auto!important;white-space:normal!important;border:0!important;background:transparent!important;box-shadow:none!important}
.premium-auth-field__password{display:flex;align-items:center;justify-content:space-between;gap:16px}
.premium-auth-field__password>span{color:var(--dt-panel-text)!important}
.premium-show-password{min-width:40px;margin:0;padding:0;border:0;background:transparent;color:color-mix(in oklch,var(--dt-panel-text) 74%,var(--dt-cta));font:700 12px/1 var(--font-body);cursor:pointer}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-input{height:50px!important;display:block!important;overflow:hidden!important;border:1px solid var(--dt-border-soft)!important;border-radius:7px!important;background:var(--dt-field)!important;box-shadow:none!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-input:focus-within{border-color:var(--dt-cta)!important;box-shadow:0 0 0 3px color-mix(in oklch,var(--dt-cta) 25%,transparent)!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-input input{width:100%!important;height:100%!important;min-height:48px!important;padding:0 14px!important;border:0!important;border-radius:6px!important;outline:0!important;background:transparent!important;color:var(--dt-field-text)!important;font:650 15px/1 var(--font-body)!important;letter-spacing:0!important;box-shadow:none!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-input input::placeholder{color:var(--dt-field-muted)}
.premium-auth-recovery{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-2px;font-size:12px}
.premium-auth-recovery a,.premium-auth-join a{color:var(--dt-panel-text);font-weight:760;text-underline-offset:3px}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-submit{width:100%;height:50px;min-height:50px;margin:0!important;padding:0 18px;border:1px solid var(--dt-cta)!important;border-radius:7px!important;background:var(--dt-cta)!important;color:var(--dt-cta-text)!important;font:820 14px/1 var(--font-body)!important;letter-spacing:.01em!important;text-transform:none!important;box-shadow:none!important;cursor:pointer;transition:filter .16s ease!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-submit:is(:hover,:active){filter:brightness(1.04)!important;transform:none!important;box-shadow:none!important}
body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-submit:focus-visible{outline:3px solid color-mix(in oklch,var(--dt-cta) 42%,white)!important;outline-offset:2px!important;box-shadow:none!important}
.premium-auth-join{margin:0;color:color-mix(in oklch,var(--dt-panel-text) 66%,var(--dt-muted));font-size:12px;text-align:center}
.premium-trust-row{position:relative;z-index:35;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px var(--premium-edge);border-top:1px solid color-mix(in oklch,var(--dt-border-soft) 28%,transparent);background:var(--dt-footer);color:var(--dt-footer-text);font-size:11px}
.premium-trust-row__notice,.premium-trust-row nav{display:flex;align-items:center;gap:20px}
.premium-trust-row__notice strong{min-width:30px;height:30px;display:grid;place-items:center;border:1px solid color-mix(in oklch,var(--dt-footer-text) 52%,transparent);border-radius:50%;font-size:10px}
.premium-trust-row a{color:inherit;text-decoration:none}.premium-trust-row a:is(:hover,:focus-visible){color:var(--dt-cta);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
  body[data-designed-theme] [data-premium-chrome="designed-premium-chrome-v1"]{--premium-edge:16px}
  .premium-product-header{position:sticky;top:0;z-index:80;min-height:var(--premium-mobile-header-height);grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0 16px}
  .premium-product-header__brand{max-width:160px}
  .premium-product-header [class*="-uploaded-lockup"]{max-width:132px!important;min-height:38px!important}
  .premium-product-header [class*="-uploaded-lockup"] img,
  .premium-product-header [class*="-uploaded-lockup"] .brand-logo{max-width:132px!important;height:38px!important;object-position:left center!important}
  .premium-product-header .brand-logo-reserved{min-width:104px;height:38px}
  .premium-product-nav{display:none}
  .premium-account-actions{gap:6px}
  .premium-account-action{min-width:68px;height:44px;padding:0 10px;font-size:12px}
  .premium-auth-sheet{position:fixed;z-index:90;top:var(--premium-mobile-header-height);right:0;bottom:0;left:0;width:auto;padding:16px;overflow:auto;background:color-mix(in oklch,var(--dt-chrome) 92%,transparent)}
  .premium-auth-panel{max-width:420px;margin:0 auto;padding:24px}
  .premium-auth-disclosure[open]::before{content:"";position:fixed;z-index:85;inset:var(--premium-mobile-header-height) 0 0;background:color-mix(in oklch,var(--dt-chrome) 78%,transparent)}
  .premium-auth-sheet-close{height:32px;display:flex;align-items:center;justify-content:flex-end;margin:-8px -4px 4px;color:var(--dt-panel-text);font-size:12px;font-weight:760;cursor:pointer}
  [data-premium-chrome="designed-premium-chrome-v1"]:has(.premium-auth-toggle:checked) .premium-panel-host{position:fixed!important;z-index:90!important;top:var(--premium-mobile-header-height)!important;right:0!important;bottom:0!important;left:0!important;width:auto!important;display:block!important;padding:16px!important;overflow:auto!important;border:0!important;background:color-mix(in oklch,var(--dt-chrome) 92%,transparent)!important}
  [data-premium-chrome="designed-premium-chrome-v1"]:has(.premium-auth-toggle:checked) .premium-panel-host>.premium-auth-panel{max-width:420px;margin:0 auto}
  [data-premium-chrome="designed-premium-chrome-v1"]:has(.premium-auth-toggle:checked) .premium-panel-host>:not(.premium-auth-panel){display:none!important}
  .premium-trust-row{align-items:flex-start;flex-direction:column;gap:12px;padding:16px;font-size:10px}
  .premium-trust-row__notice,.premium-trust-row nav{width:100%;flex-wrap:wrap;gap:10px 16px}
}
@media(prefers-reduced-motion:reduce){.premium-auth-form *{transition:none!important}}


/* materials-v1 - backdrop container. Light and atmosphere, never objects. */
body[data-materials-contract="materials-v1"] .materials-air{position:absolute;z-index:1;inset:0;display:block;overflow:hidden;pointer-events:none;contain:paint}
body[data-materials-contract="materials-v1"] .materials-air>*{position:absolute;display:block}
/* Luminance cones: the light an off-screen source would throw. No fixture is
   ever drawn - only its light. */
body[data-materials-contract="materials-v1"] .materials-air__cone{top:var(--mt-cone-top,-40%);width:var(--mt-cone-width,52%);height:var(--mt-cone-height,132%);opacity:var(--mt-cone-opacity,.9);filter:blur(var(--mt-cone-blur,46px));background:radial-gradient(ellipse var(--mt-cone-spread,38% 48%) at 50% var(--mt-cone-origin,28%),
color-mix(in oklch,var(--mt-cone-tint,var(--dt-glow)) var(--mt-cone-core,40%),transparent) 0%,
color-mix(in oklch,var(--mt-cone-tint,var(--dt-glow)) var(--mt-cone-mid,20%),transparent) 28%,
color-mix(in oklch,var(--mt-cone-tint,var(--dt-glow)) var(--mt-cone-edge,6%),transparent) 52%,
color-mix(in oklch,var(--mt-cone-tint,var(--dt-glow)) var(--mt-cone-tail,2%),transparent) 70%,transparent 84%)}
body[data-materials-contract="materials-v1"] .materials-air__cone--left{left:var(--mt-cone-inset,-12%);transform:rotate(var(--mt-cone-angle,19deg))}
body[data-materials-contract="materials-v1"] .materials-air__cone--right{right:var(--mt-cone-inset,-12%);transform:rotate(calc(var(--mt-cone-angle,19deg) * -1))}
body[data-materials-contract="materials-v1"] .materials-air__cone--center{left:50%;translate:-50% 0;transform:rotate(var(--mt-cone-center-angle,0deg))}
/* Spill: the wash either source throws across the top edge. */
body[data-materials-contract="materials-v1"] .materials-air__spill{right:0;left:0;top:var(--mt-spill-top,-16%);height:var(--mt-spill-height,58%);filter:blur(var(--mt-spill-blur,30px));background:
radial-gradient(ellipse var(--mt-spill-spread,14% 36%) at var(--mt-spill-left-x,4%) var(--mt-spill-origin,20%),color-mix(in oklch,var(--mt-spill-tint,var(--dt-glow)) var(--mt-spill-left-strength,32%),transparent),transparent 70%),
radial-gradient(ellipse var(--mt-spill-spread,14% 36%) at var(--mt-spill-right-x,96%) var(--mt-spill-origin,20%),color-mix(in oklch,var(--mt-spill-tint,var(--dt-glow)) var(--mt-spill-right-strength,28%),transparent),transparent 70%)}
/* Ground luminance: lit surface, not a drawn plane. Nothing here has an edge. */
body[data-materials-contract="materials-v1"] .materials-air__haze{right:0;bottom:var(--mt-haze-bottom,-16%);left:0;height:var(--mt-haze-height,74%);filter:blur(var(--mt-haze-blur,28px));background:
radial-gradient(ellipse var(--mt-haze-spread,62% 86%) at 50% var(--mt-haze-origin,100%),color-mix(in oklch,var(--mt-haze-near,var(--dt-illustration-mid)) var(--mt-haze-core,100%),transparent) 0%,color-mix(in oklch,var(--mt-haze-near,var(--dt-illustration-mid)) var(--mt-haze-mid,54%),transparent) 34%,color-mix(in oklch,var(--mt-haze-far,var(--dt-illustration-far)) var(--mt-haze-edge,40%),transparent) 60%,transparent 84%),
radial-gradient(ellipse var(--mt-haze-pool-spread,40% 46%) at 50% var(--mt-haze-pool-origin,92%),color-mix(in oklch,var(--mt-haze-pool-tint,var(--dt-glow)) var(--mt-haze-pool-strength,10%),transparent),transparent 74%)}
/* Tone-on-tone geometry, blurred and masked by the theme so it only just
   emerges from the haze. Held at or under 8% contrast by this rule. */
body[data-materials-contract="materials-v1"] .materials-air__geometry{right:0;bottom:0;left:var(--mt-geometry-left,0);height:var(--mt-geometry-height,78%);width:var(--mt-geometry-width,100%);color:color-mix(in oklch,var(--mt-geometry-role,var(--dt-panel-text)) var(--mt-geometry-contrast,7%),transparent);fill:none}
/* Film grain: SVG feTurbulence, desaturated, held near 4%. */
body[data-materials-contract="materials-v1"] .materials-air__grain{inset:0;width:100%;height:100%;opacity:var(--mt-grain-opacity,.042)}
/* Vignette: soft edge falloff toward the chrome role. */
body[data-materials-contract="materials-v1"] .materials-air__vignette{inset:0;background:
radial-gradient(ellipse var(--mt-vignette-spread,78% 68%) at 50% var(--mt-vignette-origin,42%),transparent 0%,transparent var(--mt-vignette-clear,46%),color-mix(in oklch,var(--mt-vignette-tint,var(--dt-chrome)) var(--mt-vignette-mid,34%),transparent) 76%,color-mix(in oklch,var(--mt-vignette-tint,var(--dt-chrome)) var(--mt-vignette-edge,76%),transparent) 100%),
linear-gradient(180deg,color-mix(in oklch,var(--mt-vignette-tint,var(--dt-chrome)) var(--mt-vignette-top,42%),transparent) 0%,transparent var(--mt-vignette-band,16% 84%),color-mix(in oklch,var(--mt-vignette-tint,var(--dt-chrome)) var(--mt-vignette-bottom,40%),transparent) 100%)}
/* Contained photography, graded by one contract - see MATERIALS_PHOTO_GRADE.
   Fixed order of operations, scalar knobs inside documented bands, every colour
   still resolved from a --dt-* role so a client recolour retints the plate with
   the rest of the scene. */
body[data-materials-contract="materials-v1"] .materials-photo{position:absolute;z-index:0;inset:0;overflow:hidden;isolation:isolate;background:var(--mt-photo-base,var(--dt-chrome));pointer-events:none}
body[data-materials-contract="materials-v1"] .materials-photo>span{position:absolute;inset:0;display:block}
/* Stage 1-3: desaturate, contrast curve, exposure. One chain for all nine. */
body[data-materials-contract="materials-v1"] .materials-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--mt-photo-focus,50% 36%);transform:var(--mt-photo-transform,none);filter:var(--mt-photo-filter,grayscale(1) contrast(var(--mt-photo-contrast,1.12)) brightness(var(--mt-photo-exposure,1.46)))}
/* Stage 4: the palette duotone, held to a strength ceiling. Past the ceiling
   the multiply eats the midtones and the subject reads as a silhouette. */
body[data-materials-contract="materials-v1"] .materials-photo__tone{background:var(--mt-photo-tone,color-mix(in oklch,var(--mt-photo-tone-light,var(--dt-atmosphere)) var(--mt-photo-tone-mix,54%),var(--mt-photo-tone-deep,var(--dt-cta))));opacity:var(--mt-photo-duotone,.72);mix-blend-mode:multiply}
/* Stage 5: the shared shadow floor - anchored to the operator's own ink, not
   to the theme's chrome. Chrome lightness runs from L .14 to L .34 across the
   nine, so a chrome-anchored floor put four plates two stops above the others;
   ink is every palette's darkest primitive, so anchoring here is what actually
   makes the floor shared. It is still fully palette-derived, so a client
   recolour moves it with everything else. */
body[data-materials-contract="materials-v1"] .materials-photo__floor{background:var(--mt-photo-floor,color-mix(in oklch,var(--mt-photo-black-tint,var(--ink)) var(--mt-photo-black,77%),var(--dt-chrome)));mix-blend-mode:lighten}
/* Stage 6: the copy veil. -near covers the headline side; -far is the
   legibility floor and never goes past MATERIALS_PHOTO_GRADE.legibilityFloor. */
body[data-materials-contract="materials-v1"] .materials-photo__veil{background:var(--mt-photo-veil,
linear-gradient(var(--mt-photo-veil-angle,96deg),color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-near,92%),transparent) 0%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-near,92%),transparent) 24%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-mid,58%),transparent) 58%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-far,16%),transparent) 100%),
linear-gradient(180deg,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-top,24%),transparent) 0%,transparent 30% 66%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-bottom,38%),transparent) 100%))}
/* Effects budget reset. Denied: control bevels, stacked glows, metallic rims,
   CTA gradients, wordmark glow, pictorial illustration. Permitted: one scene
   gradient, one panel shadow, one focus ring. */
body[data-materials-contract="materials-v1"] [class$="-wordmark"]{text-shadow:none!important}
body[data-materials-contract="materials-v1"] :is([class$="-glyph"],[class$="-mark"],[class$="-illustration"]){filter:none!important}
body[data-materials-contract="materials-v1"] .login-card :is([class$="-field"],[class$="-input"],input,button[type="submit"]){background-image:none!important;box-shadow:none!important;text-shadow:none!important}
body[data-materials-contract="materials-v1"] :is(
.casino-royale-rail,.stadium-night-access,.ice-rush-header,.metro-neon-rail,.desert-access-rail,
.crest-header,.court-access-bar,.turf-access-rail,.tropics-login-strip
){background-image:none!important;box-shadow:none!important}
body[data-materials-contract="materials-v1"] [data-banner-source]{box-shadow:0 18px 44px color-mix(in oklch,var(--dt-chrome) 34%,transparent)!important}
@media(max-width:760px){
body[data-materials-contract="materials-v1"] .materials-air__cone{top:var(--mt-cone-top-sm,-34%);width:var(--mt-cone-width-sm,120%);height:var(--mt-cone-height-sm,112%);filter:blur(var(--mt-cone-blur-sm,30px))}
body[data-materials-contract="materials-v1"] .materials-air__cone--left{left:var(--mt-cone-inset-sm,-44%);transform:rotate(var(--mt-cone-angle-sm,13deg))}
body[data-materials-contract="materials-v1"] .materials-air__cone--right{right:var(--mt-cone-inset-sm,-44%);transform:rotate(calc(var(--mt-cone-angle-sm,13deg) * -1))}
body[data-materials-contract="materials-v1"] .materials-air__geometry{left:var(--mt-geometry-left-sm,-40%);width:var(--mt-geometry-width-sm,180%);height:var(--mt-geometry-height-sm,46%)}
body[data-materials-contract="materials-v1"] .materials-air__haze{bottom:var(--mt-haze-bottom-sm,-6%);height:var(--mt-haze-height-sm,52%)}
body[data-materials-contract="materials-v1"] .materials-photo img{object-position:var(--mt-photo-focus-sm,50% 40%);transform:var(--mt-photo-transform-sm,scale(1.18))}
body[data-materials-contract="materials-v1"] .materials-photo__veil{background:var(--mt-photo-veil-sm,
linear-gradient(var(--mt-photo-veil-angle-sm,184deg),color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-near,92%),transparent) 0%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-mid,58%),transparent) 46%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-far,16%),transparent) 82%,color-mix(in oklch,var(--dt-chrome) var(--mt-photo-veil-bottom,38%),transparent) 100%))}
}


/* backdrops-v1 - the swappable backdrop axis. A page with no treatment selected
   never sees a single declaration below. */
body[data-backdrop-treatment]:not([data-backdrop-treatment=""]) .backdrop{position:absolute;z-index:1;inset:0;display:block;overflow:hidden;pointer-events:none;contain:paint}
/* Deliberately does NOT set display. position:absolute already blockifies every
   layer, and a display declaration here outranks any per-layer display toggle a
   treatment needs on specificity - which is exactly the bug that once had a
   portrait composition painting over its desktop one. */
body[data-backdrop-treatment]:not([data-backdrop-treatment=""]) .backdrop>*{position:absolute;inset:0}
/* The export's own base stylesheet carries a global svg{fill:none;stroke:currentColor;
   stroke-width:1.7} for its icon set. Inherited into a backdrop that draws flat
   planes, that put a 1.7px paper-coloured outline around every shape - which is
   what made an early geometric render look like a pitch with touchlines. Every
   treatment opts out here and states its own paint; the arc strokes carry their
   own stroke and stroke-width on the element, which outranks an inherited value. */
body[data-backdrop-treatment]:not([data-backdrop-treatment=""]) .backdrop svg{fill:none;stroke:none}
body[data-backdrop-treatment]:not([data-backdrop-treatment=""]) .backdrop__grain{width:100%;height:100%;opacity:var(--bg-grain,.05)}
/* One vignette primitive for all three treatments, every figure a knob: the
   tint, the ellipse centre and spread, where the falloff starts and how hard it
   lands. A treatment that wants a different vignette sets variables rather than
   restating the background - a per-treatment background declaration here would
   lose to this rule on specificity, which is a quiet way to ship a treatment
   whose vignette silently never applied. */
body[data-backdrop-treatment]:not([data-backdrop-treatment=""]) .backdrop__vignette{background:
radial-gradient(ellipse var(--bg-vignette-spread,86% 74%) at var(--bg-vignette-at,50% 46%),transparent 0 var(--bg-vignette-clear,44%),color-mix(in oklch,var(--bg-vignette-tint,var(--dt-chrome)) var(--bg-vignette-mid,26%),transparent) var(--bg-vignette-mid-stop,78%),color-mix(in oklch,var(--bg-vignette-tint,var(--dt-chrome)) var(--bg-vignette-edge,66%),transparent) 100%),
linear-gradient(180deg,color-mix(in oklch,var(--bg-vignette-tint,var(--dt-chrome)) var(--bg-vignette-top,34%),transparent) 0%,transparent var(--bg-vignette-band,15% 85%),color-mix(in oklch,var(--bg-vignette-tint,var(--dt-chrome)) var(--bg-vignette-bottom,32%),transparent) 100%)}
/* A treatment owns the whole field, so the generic designed-theme scene
   decoration - the soft-light glow ellipse and its dot pass - stands down. It
   was written to lift a flat gradient; over a composed backdrop it only softens
   the edges the composition depends on. Scoped to pages that selected a
   treatment, so no other surface changes. */
body[data-backdrop-treatment]:not([data-backdrop-treatment=""])>div:first-child::after{display:none!important}
/* ---- 3. HALFTONE ---------------------------------------------------------
   Duotone screen print. The paper is the deep field, the plates are the ink. */
body[data-backdrop-treatment="halftone"] .backdrop{--bg-grain:.055;--bg-vignette-mid:20%;--bg-vignette-edge:58%}
body[data-backdrop-treatment="halftone"] .backdrop__paper{background:
linear-gradient(var(--bg-paper-angle,163deg),
  var(--bg-paper-a,color-mix(in oklch,var(--dt-scene-top) 82%,var(--dt-chrome))) 0%,
  var(--bg-paper-b,color-mix(in oklch,var(--dt-chrome) 72%,var(--dt-scene-mid))) 46%,
  var(--bg-paper-c,color-mix(in oklch,var(--dt-scene-bottom) 42%,var(--dt-chrome))) 100%)}
/* Every ink level shares one screen; the mask decides which level shows where,
   and a larger dot covers a smaller one at the same screen position, so the
   nested masks composite into a continuous dot-size ramp. */
body[data-backdrop-treatment="halftone"] .backdrop__screen{overflow:hidden}
body[data-backdrop-treatment="halftone"] .backdrop__ink{position:absolute;inset:-70%;display:block}
body[data-backdrop-treatment="halftone"] :is(.backdrop__screen--h1,.backdrop__screen--h2,.backdrop__screen--h3,.backdrop__screen--h4,.backdrop__screen--h5,.backdrop__screen--h6,.backdrop__screen--h7)>.backdrop__ink{color:color-mix(in oklch,var(--bg-ink-light-role,var(--dt-glow)) var(--bg-ink-light,60%),transparent)}
/* The shadow plate: a second ink at the other screen angle, a finer pitch, and
   ramped along the opposite diagonal. Two angles ramped two ways is what stops a
   halftone reading as one flat pattern. The 2px translate is press
   mis-registration, which is what a two-plate print actually looks like. */
body[data-backdrop-treatment="halftone"] :is(.backdrop__screen--s1,.backdrop__screen--s2)>.backdrop__ink{color:color-mix(in oklch,var(--bg-ink-deep-role,var(--dt-border)) var(--bg-ink-deep,44%),transparent)}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h1{-webkit-mask-image:linear-gradient(148deg,transparent 0 0%,currentColor 0% 7%,transparent 15%);mask-image:linear-gradient(148deg,transparent 0 0%,currentColor 0% 7%,transparent 15%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h1>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 11.2px,transparent 11.8px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h2{-webkit-mask-image:linear-gradient(148deg,transparent 0 7%,currentColor 15% 20%,transparent 28%);mask-image:linear-gradient(148deg,transparent 0 7%,currentColor 15% 20%,transparent 28%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h2>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 9.3px,transparent 9.9px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h3{-webkit-mask-image:linear-gradient(148deg,transparent 0 20%,currentColor 28% 34%,transparent 42%);mask-image:linear-gradient(148deg,transparent 0 20%,currentColor 28% 34%,transparent 42%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h3>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 7.6px,transparent 8.2px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h4{-webkit-mask-image:linear-gradient(148deg,transparent 0 34%,currentColor 42% 49%,transparent 57%);mask-image:linear-gradient(148deg,transparent 0 34%,currentColor 42% 49%,transparent 57%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h4>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 6.1px,transparent 6.7px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h5{-webkit-mask-image:linear-gradient(148deg,transparent 0 49%,currentColor 57% 65%,transparent 73%);mask-image:linear-gradient(148deg,transparent 0 49%,currentColor 57% 65%,transparent 73%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h5>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 4.7px,transparent 5.3px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h6{-webkit-mask-image:linear-gradient(148deg,transparent 0 65%,currentColor 73% 82%,transparent 90%);mask-image:linear-gradient(148deg,transparent 0 65%,currentColor 73% 82%,transparent 90%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h6>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 3.4px,transparent 4px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h7{-webkit-mask-image:linear-gradient(148deg,transparent 0 82%,currentColor 90% 100%);mask-image:linear-gradient(148deg,transparent 0 82%,currentColor 90% 100%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--h7>.backdrop__ink{transform:rotate(15deg);background-image:radial-gradient(circle at 50% 50%,currentColor 0 2.2px,transparent 2.8px);background-size:34px 34px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--s1{-webkit-mask-image:linear-gradient(58deg,transparent 0 0%,currentColor 0% 20%,transparent 32%);mask-image:linear-gradient(58deg,transparent 0 0%,currentColor 0% 20%,transparent 32%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--s1>.backdrop__ink{transform:rotate(75deg) translate(2px,1px);background-image:radial-gradient(circle at 50% 50%,currentColor 0 4.2px,transparent 4.8px);background-size:21px 21px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--s2{-webkit-mask-image:linear-gradient(58deg,transparent 0 20%,currentColor 32% 60%,transparent 78%);mask-image:linear-gradient(58deg,transparent 0 20%,currentColor 32% 60%,transparent 78%);}
body[data-backdrop-treatment="halftone"] .backdrop__screen--s2>.backdrop__ink{transform:rotate(75deg) translate(2px,1px);background-image:radial-gradient(circle at 50% 50%,currentColor 0 2px,transparent 2.6px);background-size:21px 21px}
/* Halftone. The one treatment whose whole idea is ink on paper, so a lifted
   paper is not a softer halftone - it is no halftone. Each of the four rebuilds
   its paper from its own deep roles; the ink stays the light plate, which is the
   authored design, because inverting to a dark ink on a light paper would be a
   different treatment rather than a tuned one. The inversion is still reachable
   - --bg-ink-light-role and --bg-ink-deep-role take any palette role - and it is
   deliberately unused: a theme that genuinely wants a light paper should say so
   here rather than have the plate flipped for it. */
body[data-backdrop-treatment="halftone"][data-designed-theme="sunset-tropics"] .backdrop{--bg-paper-a:color-mix(in oklch,var(--dt-panel) 62%,var(--dt-chrome));--bg-paper-b:color-mix(in oklch,var(--dt-chrome) 88%,var(--dt-scene-mid));--bg-paper-c:color-mix(in oklch,var(--ink) 76%,var(--dt-chrome));--bg-ink-light:52%;--bg-ink-deep:38%}
body[data-backdrop-treatment="halftone"][data-designed-theme="court-kings"] .backdrop{--bg-paper-a:color-mix(in oklch,var(--dt-panel) 74%,var(--dt-scene-top));--bg-paper-b:color-mix(in oklch,var(--dt-chrome) 82%,var(--dt-scene-mid));--bg-paper-c:color-mix(in oklch,var(--ink) 78%,var(--dt-panel));--bg-ink-light:54%}
body[data-backdrop-treatment="halftone"][data-designed-theme="desert-gold"] .backdrop{--bg-paper-c:color-mix(in oklch,var(--dt-chrome) 74%,var(--dt-scene-mid));--bg-ink-light:56%}
body[data-backdrop-treatment="halftone"][data-designed-theme="ice-rush"] .backdrop{--bg-paper-c:color-mix(in oklch,var(--dt-chrome) 72%,var(--dt-scene-mid));--bg-ink-light:56%;--bg-ink-deep:40%}
/* Champion Crest and Metro Neon are deep, but their --dt-border is a high-chroma
   gold and cyan; at 44% the shadow plate stopped reading as a second INK and
   started reading as a colour cast over the field. */
body[data-backdrop-treatment="halftone"][data-designed-theme="champion-crest"] .backdrop{--bg-ink-deep:36%}
body[data-backdrop-treatment="halftone"][data-designed-theme="metro-neon"] .backdrop{--bg-ink-deep:34%}
@media(max-width:760px){
body[data-backdrop-treatment="halftone"] .backdrop__screen--h1>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h2>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h3>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h4>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h5>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h6>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--h7>.backdrop__ink{background-size:30px 30px}
body[data-backdrop-treatment="halftone"] .backdrop__screen--s1>.backdrop__ink,
body[data-backdrop-treatment="halftone"] .backdrop__screen--s2>.backdrop__ink{background-size:19px 19px}
}





.premium-product-header__brand {
   @media (max-width: 1040px) {
      margin-inline: auto;
   }
}

body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-field:has(.error) {
   min-height: 96px !important;
}

body[data-designed-theme]:not([data-designed-theme=""]) [data-premium-chrome] .premium-auth-form.login-card .premium-auth-input:has(> .error) {
   height: auto !important;
   overflow: visible !important;
}

.login-card label.error {
   flex: 0 1 auto;
   max-width: calc(100% - 8px);
   margin: 0 auto;
   padding: 4px;
   font-size: 0.875em;
   text-align: center;
   color: #fff;
   background-color: #f44;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
}

.login__item--error {
   display: none;
   justify-content: center;
   width: 100%;
   padding: 12px;
   background-color: #f44;
   font-weight: bold;
   text-align: center;
   border-radius: var(--dt-radius-sm);
}

@media (max-width: 760px) {
   body[data-designed-theme="midnight-turf"] .turf-banner {
      max-width: 545px;
      max-height: 325px;
      margin-inline: auto;
   }
}

body[data-designed-theme="midnight-turf"] .turf-banner__frame {
   position: static;
   object-fit: contain;
}

body[data-designed-theme="midnight-turf"] .turf-banner__frame iframe,
body[data-designed-theme="midnight-turf"] .turf-banner__frame img {
   display: block;
   max-width: 100%;
   margin: auto;
}

body[data-designed-theme="midnight-turf"] .turf-banner__frame iframe {
   background-color: transparent;
}