.pista-page{background:var(--ink,#020b10);color:var(--foam,#f2f6f3);font:16px/1.5 "FBR Text",sans-serif;min-height:100vh;margin:0}
.pista-page main{box-sizing:border-box;width:min(100%,50rem);margin:auto;padding:2rem 1.2rem 5rem}
.pista-page a{color:var(--mist,#a9bdc1)}.pista-page h1{font:700 clamp(2rem,7vw,4rem)/1 "FBR Display",sans-serif;margin:2rem 0 1rem}
.pista-page .editor{display:grid;grid-template-columns:minmax(8rem,.8fr) 1.2fr;gap:1.5rem;align-items:start}
.pista-page .retrato{position:sticky;top:1rem;display:grid;place-items:center;border:1px solid #29464d;border-radius:1rem;background:radial-gradient(ellipse at 55% 40%,#29414d,#101d29 66%,#09151e);min-height:12rem}
.pista-page canvas{width:100%;image-rendering:pixelated}.pista-page label{display:grid;gap:.25rem;margin:.75rem 0}
.pista-page select,.pista-page input,.pista-page textarea,.pista-page button{box-sizing:border-box;font:inherit;color:inherit;padding:.6rem .8rem;border:1px solid #49646b;background:#11212a;border-radius:.5rem;width:100%}
.pista-page button{color:var(--ink,#020b10);background:var(--green,#1ee28b);font-weight:700;margin-top:.6rem;cursor:pointer}
.pista-page button:disabled{opacity:.45}.pista-page [hidden]{display:none!important}.pista-page .erro{color:var(--pink,#ff6fb0)}
.pista-page fieldset{border:0;margin:0;padding:0}.pista-page label:has(input[type=checkbox]){display:flex;align-items:center}.pista-page input[type=checkbox]{width:auto}
@media(max-width:540px){.pista-page .editor{grid-template-columns:1fr;gap:.3rem}.pista-page .retrato{z-index:1;top:0;min-height:0;height:8rem}.pista-page canvas{width:9.2rem}}
.pista-page .retrato canvas{width:min(100%,12rem);aspect-ratio:32/44;height:auto}
.pista-page .dado{width:auto;margin:.6rem auto 1rem;background:transparent;color:var(--foam,#f2f6f3);border:1px solid #49646b;font-weight:600;font-size:.9rem;padding:.45rem .9rem}
.pista-page .retrato{gap:0;padding-top:1rem}
.pista-page .abas{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 .4rem}
.pista-page .abas{flex-wrap:nowrap;overflow-x:auto}
.pista-page .abas button{flex:none;width:auto;margin:0;background:#11212a;color:var(--foam,#f2f6f3);border:1px solid #29464d;font-weight:600;font-size:.9rem;padding:.45rem .8rem;border-radius:999px}
.pista-page .abas button[aria-selected=true]{background:var(--green,#1ee28b);color:var(--ink,#020b10);border-color:transparent}
.pista-page .escolha{margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.pista-page .escolha legend{font-weight:700;margin-bottom:.45rem;padding:0}
.pista-page .escolha label{margin:0;display:block;cursor:pointer}
.pista-page .escolha input{position:absolute;opacity:0;width:1px;height:1px}
.pista-page .escolha span{display:block;padding:.42rem .75rem;border:1px solid #29464d;border-radius:999px;background:#0d1b23;font-size:.92rem}
.pista-page .escolha input:checked+span{border-color:var(--green,#1ee28b);background:#0f2c22;color:#dfffee}
.pista-page .escolha input:focus-visible+span{outline:2px solid var(--green,#1ee28b);outline-offset:2px}
.pista-page .cores span{width:2.1rem;height:2.1rem;padding:0;border-radius:50%;background:var(--c);border:2px solid transparent;box-shadow:inset 0 0 0 2px rgba(2,11,16,.35)}
.pista-page .cores input:checked+span{border-color:var(--foam,#f2f6f3);background:var(--c);box-shadow:0 0 0 2px var(--green,#1ee28b)}
.pista-page label.mostrar{display:flex;align-items:flex-start;gap:.7rem;margin:1.4rem 0 .4rem;padding:.8rem .9rem;border:1px solid #29464d;border-radius:.8rem;background:#0d1b23}
.pista-page label.mostrar input{width:1.2rem;height:1.2rem;margin-top:.15rem;accent-color:var(--green,#1ee28b)}
.pista-page label.mostrar small{color:var(--mist,#a9bdc1)}
.pista-page .cartao-dj{border:1px solid #29464d;border-radius:.9rem;padding:.8rem 1rem;margin:.8rem 0;display:flex;gap:1rem;align-items:flex-start}
.pista-page .cartao-dj legend{padding:0 .3rem;font-weight:700}
.pista-page .cartao-dj canvas{flex:none;width:5.5rem;aspect-ratio:28/30;height:auto;background:#0d1b23;border-radius:.6rem;margin-top:.8rem}
.pista-page .dj-campos{flex:1;min-width:0}
.pista-page .cartao-dj .linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:0 .6rem}
.pista-page .cartao-dj .linha label{margin:.35rem 0}
.pista-page .luzes{display:flex;gap:.8rem;flex-wrap:wrap}
.pista-page .luzes label{display:grid;justify-items:center;gap:.2rem;margin:.3rem 0}
.pista-page .luzes input{width:3rem;height:3rem;padding:0;border-radius:50%;overflow:hidden;cursor:pointer}
.pista-page h2{font:700 1.4rem/1.2 "FBR Display",sans-serif;margin:2.2rem 0 .4rem}
.pista-page .prev{display:block;width:100%;max-width:30rem;image-rendering:pixelated;border-radius:.8rem;margin:.6rem 0}
.pista-page .nota{color:var(--mist,#a9bdc1);font-size:.9rem;margin:.2rem 0}
@media(max-width:540px){.pista-page .retrato canvas{width:7rem}.pista-page .retrato{position:sticky;height:auto;padding:.4rem;display:flex;align-items:center;justify-content:center;gap:1rem}.pista-page .dado{margin:0}}

@media(max-width:540px){.pista-page .cartao-dj{flex-direction:column}.pista-page .cartao-dj canvas{margin:0 auto}}