:root { --accent: #baff00; --bg: #080a08; --surface: #141811; --text: #f3f6ec; --muted: #aeb7a3; --line: #30362b; --radius: 18px; --font: "Segoe UI", Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--font); } a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } :focus-visible { outline:3px solid var(--accent); outline-offset:5px; } ::selection { background:var(--accent); color:var(--bg); } h1,h2,h3,p { margin:0; } h1,h2,h3 { line-height:1.1; letter-spacing:-.045em; } h1 { font-size:clamp(42px,6.9vw,96px); font-weight:750; } h2 { font-size:clamp(32px,4vw,56px); } h3 { font-size:25px; } p { color:var(--muted); } small { color:var(--muted); } .container { width:min(1240px,calc(100% - 64px)); margin:auto; } .eyebrow { font-size:12px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 22px; gap:10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text); font-weight:650; transition:background .15s,transform .15s; } .button:hover { background:#242e17; transform:translateY(-1px); } .button--primary { background:var(--accent); border-color:var(--accent); color:#151d00; } .button--primary:hover { background:#deff54; } .button--danger { background:#4c2725; border-color:#8e4c47; } .actions { display:flex; gap:12px; flex-wrap:wrap; } .badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; border:1px solid var(--line); border-radius:5px; padding:5px 9px; color:var(--muted); letter-spacing:.02em; } .badge--ready { color:var(--accent); } .badge--warning { color:#ffca80; } .brand { font-size:22px; font-weight:850; letter-spacing:-.05em; display:flex; align-items:center; gap:10px; } .brand-symbol { border:3px solid var(--accent); width:25px; height:25px; transform:rotate(-12deg); display:block; border-radius:5px; } .brand em { color:var(--accent); font-style:normal; } .skip { position:fixed; top:-100px; left:16px; z-index:100; padding:12px; background:var(--accent); color:black; } .skip:focus { top:12px; } .card { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:26px; } .muted { color:var(--muted); } .grid { display:grid; gap:20px; } .field { display:grid; gap:8px; color:var(--muted); margin-bottom:18px; } input,select { min-height:48px; padding:10px 12px; background:#0d110b; border:1px solid var(--line); border-radius:8px; color:var(--text); width:100%; } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); } [hidden] { display:none!important; } @media(max-width:720px) { .container { width:calc(100% - 32px); } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }

 .app-shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; } .sidebar { padding:28px 18px; background:#0d110b; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:28px; } .sidebar .brand { padding:0 10px; } .app-nav { display:grid; gap:8px; } .nav-item { border:0; background:none; color:var(--muted); padding:14px; text-align:left; border-radius:8px; display:flex; align-items:center; gap:14px; min-height:48px; } .nav-item:hover { background:#242e17; } .nav-item[aria-current=page] { background:#baff0016; color:var(--accent); } .nav-icon { font-size:17px; width:22px; text-align:center; } .sidebar-bottom { margin-top:auto; padding:12px; font-size:12px; } .sidebar-bottom a { display:block; margin-top:12px; text-decoration:underline; } .app-main { min-width:0; } .app-header { padding:20px 34px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; } .app-header strong { font-size:14px; } .app-header small { display:block; } .app-content { padding:32px 34px; max-width:1600px; margin:auto; } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:26px; } .page-heading h1 { font-size:36px; } .page-heading p { margin-top:8px; font-size:14px; } .demo-notice { border:1px solid #596c39; border-radius:8px; padding:10px 14px; color:#d0dfad; font-size:12px; background:#baff0008; margin-bottom:24px; } .stat-grid { grid-template-columns:repeat(4,1fr); margin-bottom:24px; } .stat { padding:22px; } .stat small { display:block; } .stat strong { display:block; font-size:30px; letter-spacing:-.04em; margin:6px 0; font-variant-numeric:tabular-nums; } .stat .badge { border:0; padding:0; } .race-grid { grid-template-columns:1.5fr 1fr; align-items:start; } .panel-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; } .panel-title h2 { font-size:19px; letter-spacing:-.02em; } .timer { text-align:center; padding:24px 0; border-block:1px solid var(--line); margin-bottom:24px; } .timer strong { font-size:clamp(42px,5vw,70px); line-height:1.2; letter-spacing:-.04em; font-variant-numeric:tabular-nums; display:block; } .timer small { letter-spacing:.13em; text-transform:uppercase; font-size:11px; } .race-controls { display:flex; gap:10px; flex-wrap:wrap; } .race-controls .button { flex:1; } .table-scroll { overflow-x:auto; } table { border-collapse:collapse; width:100%; white-space:nowrap; font-size:14px; } th { font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; font-weight:500; text-align:left; } td,th { padding:14px 12px; border-bottom:1px solid var(--line); } td:first-child,th:first-child { padding-left:0; } tbody tr:last-child td { border-bottom:0; } .pilot-name { font-weight:650; } .pilot-tag { color:var(--muted); font-size:11px; display:block; } .position { color:var(--accent); font-weight:700; } .table-section { margin-top:24px; } .device-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; } .device-row:last-child { border:0; } .device-row small { display:block; font-size:11px; } .event-list { list-style:none; padding:0; margin:0; } .event-list li { padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; } .event-list time { font-size:11px; margin-right:12px; color:var(--muted); } .track-preview { min-height:230px; border:1px solid var(--line); border-radius:12px; background:radial-gradient(ellipse,#2b3b28,#131b15); overflow:hidden; position:relative; } .track-preview svg { display:block; width:100%; height:230px; } .track-preview text { fill:#e8f3df; font:14px Arial; } .settings-grid { grid-template-columns:1fr 1fr; } .login-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; } .login-story { padding:60px; background:radial-gradient(ellipse at 30% 65%,#33472a,transparent 70%); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); } .login-story h1 { font-size:clamp(42px,5vw,70px); margin:50px 0 24px; } .login-story h1 span { color:var(--accent); } .login-story p { max-width:430px; } .login-form { display:grid; place-items:center; padding:32px; } .login-card { width:min(100%,420px); } .login-card h2 { font-size:32px; margin-bottom:12px; } .login-card>p { margin-bottom:30px; } .login-card .button { width:100%; } .login-note { margin-top:20px; font-size:12px; } .toast { position:fixed; bottom:24px; right:24px; z-index:50; max-width:calc(100vw - 48px); padding:16px 22px; border:1px solid var(--accent); background:#141811; border-radius:12px; box-shadow:0 12px 60px #0008; } @media(max-width:1100px) { .app-shell { grid-template-columns:190px minmax(0,1fr); } .app-content { padding:24px; } .app-header { padding:16px 24px; } .race-grid { grid-template-columns:1fr; } .stat-grid { gap:12px; } .stat { padding:16px; } } @media(max-width:800px) { .app-shell { grid-template-columns:1fr; } .sidebar { padding:12px 20px; border-right:0; border-bottom:1px solid var(--line); gap:14px; } .sidebar .brand { padding:0; } .app-nav { display:flex; overflow-x:auto; gap:6px; } .nav-item { flex-shrink:0; padding:10px 14px; } .nav-icon { display:none; } .sidebar-bottom { display:none; } .app-header { padding:12px 20px; } .app-content { padding:20px; } .page-heading h1 { font-size:30px; } .stat-grid { grid-template-columns:repeat(2,1fr); } .page-heading { flex-wrap:wrap; } .card { padding:20px; } .settings-grid { grid-template-columns:1fr; } .login-page { grid-template-columns:1fr; } .login-story { padding:28px; border-right:0; border-bottom:1px solid var(--line); } .login-story h1 { margin:32px 0 20px; font-size:40px; } .login-story>small { display:none; } .login-form { padding:32px 24px; } } @media(max-width:430px) { .app-header .badge { display:none; } .app-content { padding:16px; } .stat strong { font-size:26px; } .race-controls .button { flex-basis:100%; } }

button:disabled,.button[aria-disabled="true"] { opacity:.45; cursor:not-allowed; transform:none; } .remote-status-warning { color:#ffca80; } .remote-status-online { color:var(--accent); }


/* The approved brand board is used intact as a CSS sprite. */
:root { --accent-hover: #deff54; --accent-dim: #baff0017; --font-display: "Arial Black", "Segoe UI", Arial, sans-serif; }
body { background:#080a08; }
.brand { flex-shrink:0; max-width:260px; }
.brand-mark { display:block; width:252px; height:65px; background-image:url('../images/bl0ckrace-brandboard.png'); background-repeat:no-repeat; background-size:860.16px 573.44px; background-position:-7.28px -244.16px; }
.brand-symbol { display:none; }
h1,h2 { font-family:var(--font-display); font-weight:900; letter-spacing:-.045em; }
.hero h1 { font-style:italic; text-transform:uppercase; font-size:clamp(42px,6.1vw,84px); line-height:.98; }
.eyebrow { color:var(--accent); letter-spacing:.2em; }
.button { border-radius:3px; font-size:14px; letter-spacing:.03em; }
.button--primary { background:var(--accent); color:#111500; border-color:var(--accent); box-shadow:0 3px 0 #647e00; }
.button--primary:hover { background:var(--accent-hover); }
.card { border-radius:8px; background:linear-gradient(145deg,#171a16,#0e110f); border-color:#30362b; }
.badge { border-radius:3px; }
.site-header { background:#080a08f2; }
.header-row { min-height:94px; }
.hero { position:relative; background:radial-gradient(ellipse at 78% 40%,#baff0013,transparent 48%); }
.hero::before { content:''; position:absolute; top:34px; left:0; width:90px; height:3px; background:var(--accent); transform:skewX(-32deg); box-shadow:104px 0 #baff0038; }
.hero-copy { position:relative; z-index:1; }
.hero-note { letter-spacing:.035em; }
.race-scene { background:#080a08; border-radius:8px; border-color:#384225; height:420px; box-shadow:0 20px 90px #baff0010; }
.brand-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 5%; }
.race-scene .scene-label { background:#080a08d9; color:#d6e2bc; padding:8px 12px; border-left:2px solid var(--accent); top:18px; left:18px; }
.scene-caption { background:#090d08e8; border-color:#3e4b22; border-radius:4px; }
.overview-strip { border-color:#30362b; }
.overview-strip strong::before { content:''; display:inline-block; width:6px; height:6px; background:var(--accent); margin-right:12px; }
.product-visual { background-image:url('../images/bl0ckrace-brandboard.png'); background-size:1152px 768px; background-repeat:no-repeat; border-color:#30362b; height:230px; }
.product-visual > div { display:none; }
.product-card:nth-child(1) .product-visual { background-position:-285px -500px; }
.product-card:nth-child(2) .product-visual { background-position:0 -500px; }
.product-card:nth-child(3) .product-visual { background-position:-576px -500px; }
.product-card .copy { border-top:2px solid #baff0040; }
.product-card .badge { color:var(--accent); background:#baff000b; }
.flow-section { background:#10130d; border-color:#30362b; }
.step-number { font-style:italic; font-weight:800; }
.steps article { border-top:2px solid #3c4c17; padding-top:24px; }
.contact { background:linear-gradient(115deg,#baff00,#d4ff44); border-radius:8px; position:relative; overflow:hidden; }
.contact::after { content:''; position:absolute; top:-90px; right:16%; width:60px; height:400px; background:#1821000c; transform:skewX(-28deg); }
.contact .button { z-index:1; }
.contact h2 { font-style:italic; }
.site-footer { background:#060806; }
.sidebar { background:#0a0d09; border-color:#30362b; }
.sidebar .brand { padding:0; }
.sidebar .brand-mark { width:174px; height:45px; background-size:583.68px 389.12px; background-position:-4.94px -165.68px; }
.nav-item { border-radius:4px; }
.nav-item[aria-current=page] { background:var(--accent); color:#111500; font-weight:750; }
.app-header { background:#0d100b; border-color:#30362b; }
.app-content { background:radial-gradient(ellipse at top right,#baff0005,transparent 50%); }
.demo-notice { background:#baff0008; border-color:#455027; color:#c1cdab; }
.stat { border-top:2px solid #658000; }
.stat strong { font-style:italic; }
.timer strong { font-family:"Consolas", "Courier New", monospace; font-weight:800; color:#f3f6ec; }
.position { color:var(--accent); }
.track-preview { background:radial-gradient(ellipse,#293419,#0e1308); border-radius:6px; }
.track-preview circle { fill:var(--accent); }
.login-story { background:radial-gradient(ellipse at 30% 65%,#baff0016,transparent 65%),#080a08; border-color:#30362b; position:relative; }
.login-story::after { content:''; position:absolute; width:70px; height:50%; right:25px; bottom:0; border-left:1px solid #baff0028; border-right:1px solid #baff0028; transform:skewX(-20deg); pointer-events:none; }
.login-story h1 { font-style:italic; text-transform:uppercase; }
.login-form { background:#10140e; }
.toast { border-color:var(--accent); background:#202914; border-radius:6px; }
.brand-tagline { color:var(--accent); font-size:11px; font-style:italic; letter-spacing:.22em; text-transform:uppercase; margin-top:20px; }
@media(max-width:1100px) { .site-nav { gap:18px; } .brand-mark { width:220px; height:59px; background-size:752.64px 501.76px; background-position:-6.37px -213.64px; } }
@media(max-width:800px) { .sidebar .brand-mark { width:220px; height:59px; background-size:752.64px 501.76px; background-position:-6.37px -213.64px; } }
@media(max-width:720px) { .header-row { min-height:78px; } .hero { padding-top:48px; } .hero::before { top:20px; width:45px; } .hero h1 { font-size:clamp(37px,9vw,64px); } .race-scene { height:320px; } .site-nav .button { align-self:flex-start; } .contact::after { right:8%; } .product-visual { height:230px; } }

.brand-logo {display:block;width:252px;max-width:100%;height:auto;object-fit:contain}.sidebar .brand-logo{width:174px}.race-settings{margin-top:24px}.race-settings legend{padding:0 10px;font-weight:700}.race-settings fieldset{border:1px solid var(--line);padding:20px;margin:0}.race-settings .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.start-lights{display:flex;gap:12px;align-items:center;margin:20px 0}.start-lights i{display:block;width:24px;height:24px;border:2px solid #8a9183;border-radius:50%;background:#30362b}.start-lights[data-stage=countdown] i{background:#e74646;border-color:#ffb7b7}.start-lights[data-stage=running] i{background:#baff00;border-color:#efffbf}@media(max-width:600px){.race-settings .settings-grid{grid-template-columns:1fr}}

/* BL0CKRACE Control v0.8: #080B0A / #151A17 / #DFFF00. */
:root {--accent:#dfff00;--bg:#080b0a;--surface:#151a17;--muted:#aab7a5;--line:#394536;--accent-hover:#efff7b;}
body{background:#080b0a}.portal-shell{--accent:#dfff00}.portal-shell[data-theme=cyan]{--accent:#00e5ff;--accent-hover:#85f3ff}.portal-shell[data-theme=amber]{--accent:#ffca28;--accent-hover:#ffe58c}
.portal-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.portal-brand>span{font-family:"Arial Black",sans-serif;font-size:27px;font-style:italic;letter-spacing:-.04em}.portal-brand em{color:var(--accent)}
.sidebar{background:#0a100c;border-right:1px solid #32432b}.sidebar .brand-logo{width:184px}.sidebar .app-nav{margin-top:22px}.nav-item{padding:16px 12px}.nav-item[aria-current=page]{background:var(--accent);color:#10150b}.sidebar-bottom p{font-size:12px;margin:16px 0}
.app-header{background:#111813;min-height:92px;border-bottom:2px solid #32432b}.app-header strong{font-family:"Arial Black",sans-serif;font-size:21px;font-style:italic;letter-spacing:.03em}.app-content{padding:32px;background:radial-gradient(ellipse at top right,#dfff0007,transparent 50%)}
.header-actions{display:flex;align-items:center;gap:12px}.header-actions form{margin:0}.account-label{font-size:13px;color:var(--muted)}.locale-form{display:flex;gap:6px}.locale-form select{width:72px;min-height:42px}.locale-submit{min-height:42px;padding:6px 10px}.header-actions .button{min-height:42px}
.portal-footer{padding:24px 32px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}.portal-hero{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:28px 0 54px;align-items:center}.portal-hero h1,.auth-story h1{font-family:"Arial Black",sans-serif;font-style:italic;text-transform:uppercase;font-size:clamp(35px,4.2vw,62px);line-height:1.03;margin:16px 0 24px}.portal-hero p,.auth-story p{font-size:17px;max-width:580px;margin-bottom:24px}.race-emblem{min-height:330px;border:1px solid #3c5033;border-top:3px solid var(--accent);background:linear-gradient(140deg,#1b2819,#0b110c);padding:34px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden}.race-emblem:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 75px,#dfff0006 76px 100px);pointer-events:none}.race-emblem img{width:100%;height:auto;position:relative}.race-emblem>span{font-size:11px;letter-spacing:.2em;margin-top:30px;color:var(--accent)}.emblem-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px;font-size:10px;color:#acbaa5}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 22px}.section-heading h2{font-size:26px}.section-heading a{color:var(--accent);font-size:14px}.portal-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.portal-cards .card{padding:24px;display:flex;flex-direction:column;gap:20px}.event-card-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}.event-track-art{height:118px;position:relative;display:flex;align-items:center;justify-content:space-evenly;background:radial-gradient(ellipse,#253a19,#0e160e);overflow:hidden;border-bottom:2px solid var(--accent)}.event-track-art i{width:44px;height:64px;border:3px solid var(--accent);border-bottom:0;transform:skewY(-10deg);opacity:.5}.event-track-art i:nth-child(2){width:64px;height:90px;opacity:.9}.event-track-art span{position:absolute;bottom:8px;right:10px;font-size:10px;font-weight:700;color:#dbe5d4;letter-spacing:.2em}.event-card h3{font-size:25px}.event-card .button{margin-top:auto}.empty-state{grid-column:1/-1;min-height:190px;justify-content:center}.empty-state h3{font-size:26px}.controller-card h2{font-size:26px}.controller-card a:last-child{color:var(--accent);font-size:13px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:1150px;margin:36px auto}.auth-story{padding:24px 0}.role-tags{display:flex;gap:10px;flex-wrap:wrap}.portal-form-card{max-width:760px;padding:32px}.portal-form-card h2{margin-bottom:24px}.portal-form-card p{margin-bottom:24px}.portal-form-card form>div>div{margin-bottom:20px}.portal-form-card label{display:block;margin:0 0 8px;color:var(--muted)}.portal-form-card textarea{width:100%;min-height:150px;background:#0d110b;border:1px solid var(--line);color:var(--text);padding:14px;font:inherit;border-radius:5px}.portal-form-card input[type=checkbox]{width:20px;min-height:20px}.portal-form-card .button{margin:12px 0 24px}.portal-form-card ul{color:#ffb9ad}.checkin-form{display:flex;align-items:center;gap:10px}.checkin-form input[type=number]{min-width:80px;max-width:100px}.checkin-form .button{font-size:12px;padding:8px 12px}.registration-card{margin-top:24px;display:flex;flex-direction:column;gap:22px}.registration-card h2{font-size:28px}.event-description p{white-space:normal}.stat{background:#18221b;border-color:#3c5033}.stat strong{color:var(--accent);font-size:32px}.form-notice{padding:16px 20px;background:#dfff000d;border:1px solid var(--accent);margin-bottom:24px}
.portal-shell .page-heading h1{font-family:"Arial Black",sans-serif;font-style:italic;font-size:clamp(30px,4vw,48px)}.portal-shell .card{border-radius:5px;background:#151d17}.portal-shell .timer strong{font-size:clamp(42px,6vw,67px);font-style:normal}.portal-shell .button{border-radius:5px}.portal-shell .button--primary{background:var(--accent);color:#10150b;border-color:var(--accent)}.portal-shell .button--primary:hover{background:var(--accent-hover)}.portal-shell code{font-size:12px;overflow-wrap:anywhere}.remote-section .table-section{margin-top:24px}.race-hub-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
@media(max-width:1200px){.portal-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions{gap:8px}.account-label{display:none}.portal-hero{grid-template-columns:1fr}.race-emblem{min-height:230px}.race-emblem img{max-width:650px}}
@media(max-width:800px){.portal-shell{display:block}.sidebar{position:static;width:auto;padding:20px;border-right:0;border-bottom:1px solid var(--line)}.portal-brand{flex-direction:row;align-items:center;justify-content:space-between}.sidebar .brand-logo{width:160px}.sidebar .app-nav{display:flex;overflow-x:auto;gap:8px;margin-top:18px}.nav-item{white-space:nowrap;padding:12px}.nav-icon{display:none}.sidebar-bottom{display:none}.app-header{flex-wrap:wrap;padding:16px;gap:14px}.header-actions{flex-wrap:wrap}.app-content{padding:24px 16px}.auth-grid{grid-template-columns:1fr;gap:24px;margin:0}.auth-story{padding:16px 0}.auth-story h1{font-size:42px}.portal-cards{grid-template-columns:1fr}.portal-form-card{padding:24px}.checkin-form{flex-direction:column;align-items:flex-start}.portal-footer{padding:20px 16px}}