/* The storefront keeps its cobalt cells; the circuit rests directly on white. */
html.is-landing,html.is-landing body{background:#fff}
html.is-landing .app{height:100dvh;min-height:650px;padding:12px;display:grid;grid-template-rows:minmax(0,1fr) 48px;gap:8px;background:#fff}
html.is-landing main{min-width:0;min-height:0;border:0;order:0;display:block}
html.is-landing .drive-area{height:100%;min-height:0;background:#fff}
html.is-landing.is-editing-appearance .drive-area{isolation:auto}
html.is-landing .viewport-bar{display:none!important}
html.is-landing .landing-invite{top:auto;bottom:8px;left:22px;transform:none}
html.is-landing .landing-invite button{justify-content:flex-start;gap:9px;min-height:44px;min-width:0;padding:0 10px 0 0;border:0;border-radius:0;background:transparent;color:#626262;box-shadow:none;font-size:10px;letter-spacing:0}
html.is-landing .landing-invite button:hover{background:transparent;color:#171717}
html.is-landing .landing-invite button:focus-visible{outline-color:var(--blue);outline-offset:4px}
.landing-transmitter{display:block;flex:none;width:22px;height:26px}
/* A quiet text leaderboard, centered beneath the circuit. */
.landing-board{position:absolute;top:var(--landing-track-bottom,60%);left:50%;transform:translateX(-50%);width:320px;max-width:calc(100% - 44px);min-width:0;padding:0;font-family:var(--mono);color:var(--blue)}
html:not(.is-landing) .landing-board{display:none}
.landing-laps{display:flex;flex-direction:column;min-width:0}
.landing-lap{display:grid;grid-template-columns:2ch minmax(0,1fr) 7ch 8px;align-items:baseline;gap:0 12px;width:100%;min-height:26px;margin:0;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--blue);text-align:left;font:12px var(--mono);font-variant-numeric:tabular-nums;line-height:1.5}
.landing-lap:hover{background:transparent!important}
.landing-lap:hover .landing-lap__time,.landing-lap[aria-pressed=true] .landing-lap__time{text-decoration:underline;text-underline-offset:4px}
.landing-lap[aria-pressed=true]{font-weight:500}
.landing-lap:focus-visible{outline:1px solid var(--blue);outline-offset:3px}
.landing-lap__rank{font-weight:400}
.landing-lap__initials{display:flex;align-items:baseline;gap:12px;min-width:0}
.landing-lap__instagram{font-size:10px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75}
.landing-lap__time{text-align:right;white-space:nowrap}
.landing-lap__car{grid-column:2 / 4;grid-row:2;font-size:9px;font-weight:400;line-height:1.4;opacity:.75;white-space:nowrap}
.landing-lap__play{font-size:7px;align-self:center}
.landing-board__footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 12px;padding-top:6px;font-size:8px;line-height:1.5;text-align:center;color:var(--blue)}
.landing-board__footer p{margin:0}
.landing-board__footer #landingBoardStatus:empty{display:none}
.landing-board__footer button{flex:none;padding:2px 0;border:0;border-radius:0;background:transparent;color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:3px}
.landing-board__footer button:hover{background:transparent!important}
.landing-board__footer button:focus-visible{outline:1px solid var(--blue);outline-offset:3px}
.landing-board[data-has-laps=true][data-notice=false] .landing-board__footer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;white-space:nowrap}
.site-nav{position:relative;order:1;z-index:10;min-width:0;color:var(--blue);font-family:var(--mono)}
html:not(.is-landing) .site-nav{display:none}
.site-nav__bar{display:flex;gap:8px;height:48px;min-width:0}
.site-nav__cell{display:flex;align-items:center;justify-content:center;height:48px;flex:0 0 48px;padding:0;border:1px solid var(--blue);border-radius:0;background:#fff;color:var(--blue);text-decoration:none}
.site-nav__logo{padding:10px}
.site-nav__logo img{width:100%;height:auto}
.site-nav__cell svg{width:20px;height:20px}
.site-nav__announcement{flex:1 1 auto;min-width:0;overflow:hidden;justify-content:flex-start}
.site-nav__marquee{display:flex;align-items:center;width:max-content;min-width:200%;animation:store-welcome 18s linear infinite}
.site-nav__marquee span{flex:1 0 auto;padding:0 96px 0 0;white-space:nowrap;font-size:10px;line-height:1.6;letter-spacing:.5px;text-transform:uppercase}
@keyframes store-welcome{to{transform:translateX(-50%)}}
.site-nav__cell:hover:not(:disabled),.site-nav__cell[aria-expanded=true]{background:var(--blue);color:white}
.site-nav__logo:hover{background:#f0f2ff}
.site-nav__cell:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.site-nav__menu{position:absolute;right:56px;bottom:calc(100% + 8px);width:160px;max-height:calc(100dvh - 84px);overflow:auto;border:1px solid var(--blue);background:white}
.site-nav__menu a{display:block;padding:12px 18px;border-bottom:1px solid var(--blue);color:var(--blue);text-decoration:none;font-size:10px;line-height:16px;text-transform:uppercase;letter-spacing:.5px}
.site-nav__menu a:last-child{border-bottom:0}
.site-nav__menu a:hover,.site-nav__menu a:focus-visible{color:#fff;background:var(--blue);outline:0}
html.is-landing .app.nav-at-top{grid-template-rows:48px minmax(0,1fr)}
html.is-landing .nav-at-top main{order:1}
.nav-at-top .site-nav{order:0}
.nav-at-top .site-nav__menu{top:calc(100% + 8px);bottom:auto}
.nav-at-top .site-nav__direction svg{transform:rotate(180deg)}
@media(max-width:600px){html.is-landing .app{padding:8px;gap:8px}html.is-landing .landing-invite{left:10px;bottom:8px}html.is-landing .landing-invite button{font-size:9px}.site-nav__marquee span{font-size:9px}.landing-board{max-width:calc(100% - 28px);padding-bottom:0}.landing-lap{column-gap:10px;min-height:28px;font-size:11px}.landing-lap__initials{gap:8px}.landing-lap__instagram{font-size:9px}}
@media(prefers-reduced-motion:reduce){.site-nav__marquee{animation:none}.site-nav__marquee span{padding-left:14px}}

.landing-display{position:absolute;right:22px;bottom:8px;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 0 10px 10px;z-index:4;font-size:10px;color:#626262}
.landing-display:hover{color:#171717;background:transparent!important}
.display-glyph{width:12px;height:12px;border:1px solid currentColor;background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0 / 4px 4px;opacity:.7}
html:not(.is-landing) .landing-display{display:none}
.appearance-panel{position:absolute;right:22px;bottom:74px;z-index:8;width:320px;max-width:calc(100% - 32px);max-height:calc(100% - 94px);overflow:auto;background:#fff;border:1px solid #dedede;box-shadow:4px 4px 0 #22222212;padding:20px;color:#222}
html.is-landing .appearance-panel{position:fixed;right:22px;top:50%;bottom:auto;transform:translateY(-50%);max-height:calc(100dvh - 120px)}
@media(max-width:600px){html.is-landing .appearance-panel{right:8px}}
.appearance-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:20px}
.appearance-heading h2{font-size:22px;font-weight:500;letter-spacing:-.6px;margin:0}
.appearance-heading>button{font-size:24px;width:34px;height:34px;margin:0;color:var(--blue)}
.appearance-palettes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.palette-choice{text-align:left;padding:10px;border:1px solid #dedede;font-size:11px;min-height:72px;display:flex;flex-direction:column;gap:10px;line-height:1.4}
.palette-choice:hover{background:#f5f5f5!important}
.palette-choice[aria-pressed=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#f8f9ff;color:var(--blue)}
.palette-swatch{display:block;width:100%;height:19px;border:1px solid #00000012}
.swatch-macintosh{background:linear-gradient(90deg,#363636 0 25%,#909090 25% 50%,#c4c4c4 50% 75%,#f5f5f5 75%)}
.swatch-platinum{background:linear-gradient(90deg,#505c72 0 25%,#8a96ac 25% 50%,#bac2cf 50% 75%,#eeeef1 75%)}
.swatch-amber{background:linear-gradient(90deg,#37322b 0 25%,#87704f 25% 50%,#c5a365 50% 75%,#f1dab0 75%)}
.swatch-clay{background:linear-gradient(90deg,#543f30 0 25%,#957453 25% 50%,#b69773 50% 75%,#e9e5d1 75%)}
.appearance-dither{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:17px;border-top:1px solid #e4e4e4;font-size:11px;cursor:pointer}
.appearance-dither input{width:16px;height:16px;accent-color:var(--blue);margin:0}
.appearance-note{font-size:9px;margin:20px 0 0;color:#444;line-height:1.5}
.appearance-note:empty{display:none}
html.is-editing-appearance .pause-overlay{display:none!important}
html.is-editing-appearance .drive-dock,html.is-editing-appearance .speed-display{visibility:hidden}
@media(max-width:600px){.landing-display{right:10px;bottom:8px;font-size:9px}.appearance-panel{right:8px;bottom:72px;padding:16px;width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100% - 80px)}.appearance-heading{margin-bottom:16px}.appearance-palettes{gap:8px}.appearance-dither{margin-top:16px;padding-top:16px}.appearance-note{margin-top:14px}}

/* Storefront embeds show the resting circuit without a second navigation bar. */
html.is-landing.is-store-embed .app{height:100dvh;min-height:0;padding:0;display:block}
html.is-landing.is-store-embed main{height:100%}
html.is-landing.is-store-embed .site-nav,
html.is-landing.is-store-embed .landing-invite,
html.is-landing.is-store-embed .landing-display{display:none!important}