/* ===== aurora 3D (canvas) + solid UI ===== */
html,body{background:#03040b!important;overflow-x:clip}
body::before,body::after{display:none!important}
#aurora3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;display:block;transition:opacity .6s}
body.cam-on #aurora3d{opacity:.3}
button.primary,.primary,.primary-button,.mobile-start{background:#5eead4!important;color:#042f2a!important;border:1px solid #99f6e4!important;border-radius:999px!important;font-weight:700!important;text-shadow:none!important;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(0,0,0,.18) inset,0 4px 0 rgba(0,0,0,.3),0 12px 30px rgba(45,212,191,.35)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
button.primary:hover:not(:disabled),.primary-button:hover:not(:disabled),.mobile-start:hover{background:#99f6e4!important}
.primary::after,.primary-button::after,.mobile-start::after{content:"";position:absolute;left:10%;right:10%;top:2px;height:40%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
button.primary:focus-visible,.primary-button:focus-visible,.mobile-start:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* desktop */
@media (min-width:1200px){
 .shell,main{max-width:1360px;margin-inline:auto}
 .workspace{grid-template-columns:minmax(0,1fr) 300px!important;gap:28px!important;align-items:start}
 .workspace>aside,.side-panel{position:sticky;top:20px}
}
@media (min-width:1700px){.shell,main{max-width:1520px}.workspace{grid-template-columns:minmax(0,1fr) 340px!important}}
/* tablet */
@media (min-width:761px) and (max-width:1199px){
 .workspace{grid-template-columns:1fr!important;gap:22px!important}
 .workspace>aside,.side-panel{position:static}
}
/* mobile */
@media (max-width:760px){
 .workspace{grid-template-columns:1fr!important;gap:18px!important}
 .mobile-start{min-height:56px;font-size:16px!important}
 .stage,.instrument{width:100%!important;margin-inline:0!important}
 .toolbar{flex-wrap:wrap;gap:8px}
 .toolbar button,.toolbar .swatch,.icon-button{min-width:40px;min-height:40px}
}
/* ===== mobile declutter ===== */
.size-pop{position:relative;display:inline-flex}
.size-pop summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid #2b3142;background:#151926}
.size-pop summary::-webkit-details-marker{display:none}
.size-pop summary i{width:10px;height:10px;border-radius:50%;background:#e9e9f5;box-shadow:0 0 0 4px #ffffff14}
.size-pop .size-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:30;padding:12px 14px;border-radius:14px;background:#121520;border:1px solid #2b3142;box-shadow:0 18px 40px #0009}
.size-pop .brush-control{display:flex!important;align-items:center;gap:10px}
.size-pop .brush-control input{width:140px!important}
@media (max-width:760px){
 .topbar,.shell>header{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center;gap:12px;padding:14px 4px!important;margin:0 0 6px!important;border:0!important}
 .topbar .header-note,.topbar .creator,.brand small,.shell>header nav a:not(:first-child),.exp-choice,.eyebrow,.workspace-subtitle,.heading>p,.welcome-kicker{display:none!important}
 .voltar-airsong,.shell>header nav a:first-child{font-size:0!important;padding:9px 14px!important;border-radius:999px!important;border:1px solid #3a3360!important;background:#171a29!important;color:#e9e6ff!important;white-space:nowrap;text-decoration:none!important;margin:0!important}
 .voltar-airsong::after{content:"AirSong ↗";font-size:13px;font-weight:600}
 .shell>header nav a:first-child::after{content:"AirDraw ↗";font-size:13px;font-weight:600}
 .shell>header nav{display:flex!important;margin:0!important;padding:0!important;border:0!important}
 .shell>header nav a:first-child>*{display:none}
 .brand{gap:10px!important}
 .workspace-heading,.heading{display:block!important;text-align:left!important;margin:10px 0 16px!important}
 .workspace-heading h1,.heading h1{font-size:28px!important;line-height:1.15;margin:0!important}
 .toolbar{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:3px!important;padding:6px!important;overflow:visible!important;justify-content:space-between}
 .toolbar::-webkit-scrollbar{display:none}
 .toolbar .tool-divider,.toolbar .swatch-rainbow,.save-button span{display:none!important}
 .toolbar .icon-button,.toolbar .save-button{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;display:grid;place-items:center}
 .toolbar .swatches{display:flex;gap:3px;flex-wrap:nowrap}
 .toolbar .swatches>.swatch{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;flex:0 0 auto}
 .toolbar-end{display:flex;gap:3px;margin-left:0}
 .size-pop summary{width:30px;height:30px}
 .size-pop .size-panel{left:auto;right:-60px;transform:none}
 .palette-more summary{min-width:34px;height:26px;padding:0 4px;font-size:11px}
 .page-footer,footer{flex-direction:column;gap:6px;text-align:center}
}
/* scrim for legibility over aurora */
body::after{display:block!important;content:""!important;position:fixed!important;inset:0!important;z-index:-1!important;pointer-events:none;background:linear-gradient(180deg,rgba(3,4,11,.35),rgba(3,4,11,.15) 40%,rgba(3,4,11,.45))!important;animation:none!important;filter:none!important;mix-blend-mode:normal!important;transform:none!important}
header,.heading,.workspace-heading,nav,footer,.page-footer{text-shadow:0 1px 12px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6)}
/* ===== Vérité gradient buttons (logo: #f472b6 → #a855f7 → #3b82f6 / #60a5fa) ===== */
@property --vang{syntax:"<angle>";inherits:false;initial-value:0deg}
button.primary,.primary,.primary-button,.mobile-start{
 background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),linear-gradient(110deg,#f472b6,#a855f7,#3b82f6,#60a5fa,#a855f7,#f472b6)!important;
 background-size:100% 100%,300% 100%!important;animation:vgrad 6s linear infinite,vglow 3s ease-in-out infinite alternate!important;
 color:#fff!important;font-weight:800!important;text-shadow:0 1px 2px rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.28)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.3),0 10px 28px rgba(168,85,247,.45)!important}
button.primary:hover:not(:disabled),.primary-button:hover:not(:disabled),.mobile-start:hover{background:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.26)),linear-gradient(110deg,#f472b6,#a855f7,#3b82f6,#60a5fa,#a855f7,#f472b6)!important;background-size:100% 100%,300% 100%!important}
.primary::after,.primary-button::after,.mobile-start::after{background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0))!important}
@keyframes vgrad{from{background-position:0 0,0% 50%}to{background-position:0 0,150% 50%}}
@keyframes vglow{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.3),0 8px 22px rgba(244,114,182,.35)}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.3),0 12px 34px rgba(59,130,246,.5)}}
/* top pills: animated thin gradient border, dark fill */
.voltar-airsong,.shell>header nav a:first-child,.stage-bar .small-button{
 --vang:0deg;position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 14px!important;border-radius:999px!important;
 border:1.5px solid transparent!important;color:#f5f3ff!important;font-weight:650;font-size:13px;text-decoration:none!important;
 background:linear-gradient(#0d1020,#0d1020) padding-box,conic-gradient(from var(--vang),#f472b6,#a855f7,#3b82f6,#60a5fa,#a855f7,#f472b6) border-box!important;
 box-shadow:0 0 14px rgba(168,85,247,.25)!important;animation:vspin 5s linear infinite;transition:box-shadow .2s,transform .2s}
.voltar-airsong:hover,.shell>header nav a:first-child:hover,.stage-bar .small-button:hover{box-shadow:0 0 22px rgba(244,114,182,.45)!important;transform:translateY(-1px)}
@keyframes vspin{to{--vang:360deg}}
.stage-bar .small-button{height:32px;font-size:12px;padding:0 12px!important}
#fullscreen.small-button{width:32px;padding:0!important}
#fullscreen.small-button span{display:none}
.voltar-airsong::before,.shell>header nav a:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#3b82f6);box-shadow:0 0 8px #a855f7}
@media (max-width:760px){.voltar-airsong,.shell>header nav a:first-child{font-size:0!important;padding:0 14px!important}}
@media (prefers-reduced-motion:reduce){button.primary,.primary,.primary-button,.mobile-start{animation:none!important;background-position:0 0,30% 50%!important}.voltar-airsong,.shell>header nav a:first-child,.stage-bar .small-button{animation:none}}
/* ===== Luz + Gravar ===== */
.rec-btn{gap:6px}
.rec-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#gravar .rec-core{fill:#f43f5e;stroke:none}
#luz[aria-pressed="true"]{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--vang),#f472b6,#a855f7,#3b82f6,#60a5fa,#a855f7,#f472b6) border-box!important;color:#1e1b4b!important}
#gravar[aria-pressed="true"]{color:#fff!important;background:linear-gradient(#7f1d1d,#7f1d1d) padding-box,conic-gradient(from var(--vang),#f43f5e,#f472b6,#f43f5e) border-box!important}
.stage-bar>div{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.rec-bar{position:absolute!important;top:10px;left:10px;z-index:6;display:flex;gap:6px;background:none!important;border:0!important;padding:0!important;margin:0!important;width:auto!important}
.luz-ring{position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;opacity:0;transition:opacity .25s;box-shadow:inset 0 0 0 14px #fff,inset 0 0 60px 20px rgba(255,255,255,.75)}
body.luz-on .luz-ring{opacity:1}
body.luz-on .stage{box-shadow:0 0 0 6px #fff,0 0 80px 30px rgba(255,255,255,.65)!important}
body.luz-on::after{background:rgba(255,255,255,.18)!important}
.rec-badge{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(10,10,20,.82);border:1px solid rgba(244,63,94,.6);color:#fff;font:700 13px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.rec-badge[hidden],.rec-sheet[hidden]{display:none!important}
.rec-badge i{width:10px;height:10px;border-radius:50%;background:#f43f5e;box-shadow:0 0 10px #f43f5e;animation:recblink 1s steps(2) infinite}
.rec-badge b{color:#fda4af;letter-spacing:.08em}
.rec-stop{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-radius:999px;border:0;background:#e11d48;color:#fff;font:700 12px system-ui,sans-serif;cursor:pointer}
.rec-stop svg{width:12px;height:12px;fill:#fff}
@keyframes recblink{50%{opacity:.2}}
.rec-sheet{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));z-index:1000;padding:12px;border-radius:18px;background:rgba(13,16,32,.94);border:1.5px solid transparent;background:linear-gradient(#0d1020,#0d1020) padding-box,linear-gradient(110deg,#f472b6,#a855f7,#3b82f6) border-box;color:#f5f3ff;display:grid;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.rec-preview{width:100%;max-height:38vh;border-radius:12px;background:#000}
.rec-note{margin:0;font-size:13px;color:#d8d4f5;text-align:center}
.rec-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rec-dl,.rec-share{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font:800 14px system-ui,sans-serif;text-decoration:none;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.28);background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),linear-gradient(110deg,#f472b6,#a855f7,#3b82f6);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.rec-share{background:#171a29}
.rec-dl svg,.rec-share svg,.rec-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rec-close{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:1}
@media (max-width:760px){.stage-bar .rec-btn{padding:0 10px!important}.stage-bar .small-button{font-size:11.5px}}
@media (max-width:420px){.stage-title #mode-label{display:none}}
@media (prefers-reduced-motion:reduce){.rec-badge i{animation:none}}

.stage-bar .rec-btn span,.rec-badge span,.rec-stop span,.rec-dl span,.rec-share span{display:inline!important;font-size:12px}
.rec-sheet video.rec-preview{position:static!important;display:block!important;transform:none!important;opacity:1!important;inset:auto!important;height:auto!important;object-fit:contain!important}
.rec-note{font-weight:600}
.rec-badge,.rec-time{white-space:nowrap}
/* ===== Pincel largo: cursor com pontas dos dedos ===== */
.brush-cursor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;display:none}
.brush-cursor circle{filter:drop-shadow(0 0 6px rgba(168,85,247,.8))}