[hidden] { display:none !important; }
html[data-mode="public"] .creator-only { display:none !important; }
html[data-mode="creator"] .public-only { display:none !important; }
.tag { background:var(--lime); color:#0a0a0a; font:700 13px var(--head); padding:3px 10px; border-radius:99px; margin-right:auto; }
.studio { max-width:1040px; margin:0 auto; padding:24px 16px 56px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start; }
.stage-panel { position:sticky; top:76px; }
.title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.title-row h1 { font-size:clamp(32px,5vw,44px); font-weight:800; line-height:1; }
.btn.wide { display:block; width:100%; }
.btn.big { padding:17px; font-size:19px; margin-top:12px; }
button.btn { cursor:pointer; }
button.btn:disabled { opacity:.5; cursor:wait; }
.tabs { display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); padding:4px; border-radius:999px; margin-bottom:12px; }
.tab { flex:1; padding:9px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:700 15px var(--head); cursor:pointer; }
.tab.on { background:var(--fg); color:#0a0a0a; }
.hint { color:var(--muted); font-size:14px; margin:6px 0; }
.hint.center { text-align:center; }
.error { color:#ff7a6b; font-weight:600; min-height:1em; margin:8px 0 0; }
.racers { display:grid; gap:10px; margin-bottom:10px; }
.racer { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:12px; display:grid; gap:10px; }
.racer-top { display:grid; grid-template-columns:minmax(0,1fr) 42px 42px 38px; gap:6px; align-items:center; }
input[type=text],select { width:100%; min-width:0; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:#050507; color:var(--fg); font:500 16px var(--body); }
input[type=color] { width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:50%; overflow:hidden; background:none; cursor:pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
input[type=color]::-webkit-color-swatch { border:0; }
input[type=color]::-moz-color-swatch { border:0; }
.remove { height:42px; border:0; background:transparent; color:var(--muted); font-size:22px; cursor:pointer; border-radius:10px; }
.remove:hover { color:var(--fg); }
.shapes { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.shape-tile { flex:0 0 58px; height:58px; padding:5px; border:1.5px solid var(--line); background:#050507; border-radius:12px; cursor:pointer; }
.shape-tile img { display:block; width:100%; height:100%; object-fit:contain; }
.shape-tile.on { border-color:var(--lime); background:#191b0c; }
.racer.team .shapes { display:none; }
.field { margin-top:16px; }
.field label,.label { display:flex; justify-content:space-between; font:700 15px var(--head); margin-bottom:6px; }
.opt { color:var(--muted); font:400 14px var(--body); }
output { color:var(--lime); }
input[type=range] { width:100%; accent-color:var(--lime); height:28px; }
.seg { display:flex; gap:4px; background:var(--panel); border:1px solid var(--line); padding:4px; border-radius:14px; }
.seg button { flex:1; padding:9px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:700 15px var(--head); cursor:pointer; }
.seg button.on { background:var(--lime); color:#0a0a0a; }
.screen { position:relative; }
.screen canvas,.screen video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.status { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; padding:20px; background:rgba(5,5,7,.72); font:700 18px var(--head); }
.spinner { width:40px; height:40px; border:4px solid #2c2c35; border-top-color:var(--lime); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.after { display:none; margin-top:14px; }
body.has-race .after { display:block; }
body.has-race #idleClip { display:none; }
.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.row3 .btn { padding:10px 4px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.creator-export .field { margin-top:12px; }
.creator-export .row2 { margin-top:10px; }
@media (max-width:820px) {
  .studio { grid-template-columns:1fr; gap:26px; padding-top:16px; }
  .stage-panel { position:static; }
  .screen { width:min(100%,56vh); margin:0 auto; }
  body:not(.has-race) .stage-panel { display:none; }
  body.has-race .controls-panel { display:none; }
}
.sheet { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.76); display:flex; align-items:flex-end; justify-content:center; }
.sheet-box { position:relative; background:var(--panel); border:1px solid var(--line); width:100%; max-width:520px; max-height:92vh; overflow:auto; padding:22px 16px calc(24px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; }
.sheet-box h2 { font-size:28px; margin:0 44px 10px 0; }
.close { position:absolute; right:8px; top:8px; width:44px; height:44px; background:transparent; border:0; color:var(--fg); font-size:30px; line-height:1; cursor:pointer; }
.choice { display:flex; flex-direction:column; align-items:center; gap:2px; padding:18px 10px; border-radius:16px; border:1.5px solid var(--line); background:#050507; color:var(--fg); cursor:pointer; font:500 14px var(--body); }
.choice b { font:800 24px var(--head); }
.choice span { color:var(--muted); }
.choice:hover,.choice.hot { border-color:var(--lime); }
.bar { height:12px; background:#050507; border-radius:9px; overflow:hidden; margin:6px 0; }
.bar i { display:block; height:100%; width:0; background:var(--lime); }
#whopCheckout { min-height:60px; margin-top:8px; }
@media (min-width:600px) { .sheet { align-items:center; } .sheet-box { border-radius:24px; padding:24px; } }

.nav .account { color:var(--lime); }
.img-btn { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); cursor:pointer; }
.img-btn input { position:absolute; opacity:0; width:1px; height:1px; }
.img-btn u { color:var(--fg); }
input[type=file] { width:100%; color:var(--muted); font:500 14px var(--body); }
.btn.ghost.wide.big { margin-top:8px; font-size:17px; }

.lock { color:var(--lime); font:600 13px var(--body); text-decoration:none; }
.lock:hover { text-decoration:underline; }
body:not(.extras-locked) .lock { display:none; }
body.extras-locked #title, body.extras-locked #music, body.extras-locked .img-btn { opacity:.45; cursor:not-allowed; }

.mode-picks { display:flex; gap:6px; margin-bottom:16px; overflow-x:auto; }
.mode-pick { flex:0 0 auto; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); font:700 15px var(--head); cursor:pointer; }
.mode-pick.on { background:var(--lime); border-color:var(--lime); color:#0a0a0a; }
.layers-only { display:none; }
body.mode-layers .layers-only { display:block; }
body.mode-layers .rings-only { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.layer-chip { padding:7px 11px; border-radius:10px; border:0; font:700 14px var(--head); text-transform:capitalize; cursor:pointer; color:#0a0a0a; }
.layer-chip.add { background:transparent !important; border:1.5px solid var(--line); color:var(--fg) !important; }
.layer-chip:disabled { opacity:.4; cursor:not-allowed; }
.l-glass { background:#bfeaff; } .l-wafer { background:#f2b95c; } .l-jelly { background:#ff5b93; } .l-wax { background:#f4e7b4; }
.l-chocolate { background:#6a3a20; color:#fff; } .l-ice { background:#8fd7ff; } .l-foam { background:#d7ff3e; } .l-wood { background:#c98a4c; }
#ballColor { display:block; }