/* Louder · Modelo B · base: cores do brand book, tipos, interface mínima */
:root{--k:#0B0B0B;--w:#F1EEE6;--g:#A8A39B;--red:#E3402D;--flag:#C12637;--org:#D66624;--yel:#F4E764;--acid:#93DE2E;--grn:#0DA922;--mag:#CD2D8E;--vio:#5223C4;--gold:#EAB244;--blu:#3B448F;
 --ease:cubic-bezier(.16,1,.3,1);--fast:120ms;--std:240ms;--slow:480ms;
 --hud:#F1EEE6;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--k);color:var(--w);overflow:hidden;overscroll-behavior:none;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none}
.px{font-family:"VT323",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.02em}
.hv{font-family:"Archivo Black",Archivo,sans-serif;letter-spacing:-.03em}
.sc{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:900;letter-spacing:-.01em}
.dt{font-family:"Bodoni Moda",Georgia,serif;font-weight:700}
:focus-visible{outline:2px solid var(--yel);outline-offset:3px}
[hidden]{display:none!important}

/* o círculo LDR. (o "cone" deste modelo): pulsa de leve, no tempo de 112 BPM */
.ldr-c{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%;border:.08em solid currentColor;font-family:"Archivo Black",sans-serif;letter-spacing:-.03em;line-height:1;width:3.1em;font-size:16px}
.pulsa{animation:pulso 1.07s var(--ease) infinite}
@keyframes pulso{0%{transform:scale(1)}7%{transform:scale(1.045)}40%,100%{transform:scale(1)}}

/* interface: some quase toda */
#hud{position:fixed;inset:0;z-index:30;pointer-events:none;color:var(--hud);transition:color var(--slow) var(--ease)}
#ldr{position:absolute;left:18px;top:16px;pointer-events:auto;padding:4px;border-radius:50%}
#ldr .ldr-c{font-size:15px}
#conta{position:absolute;left:22px;bottom:16px;font-size:22px;line-height:1}
#prog{position:absolute;left:0;right:0;top:0;height:3px;background:color-mix(in srgb,var(--hud) 18%,transparent)}
#prog i{display:block;height:100%;width:0;background:var(--hud);transition:width var(--slow) var(--ease),background var(--slow) var(--ease)}
#som{position:fixed;right:18px;top:18px;z-index:60;font-size:19px;line-height:1;padding:6px 10px 4px;color:var(--hud);border:1px solid color-mix(in srgb,var(--hud) 45%,transparent);transition:color var(--slow) var(--ease),border-color var(--slow) var(--ease)}
#som[aria-pressed=true]{background:var(--hud);color:var(--k)}
body.abrindo #som{color:var(--g);border-color:#3a3836}

/* lista das 11 telas */
#menu{position:fixed;inset:0;z-index:55;background:var(--k);color:var(--w);overflow-y:auto;padding:84px 6vw 40px;display:flex;flex-direction:column;justify-content:center}
#menu ol{display:grid;gap:0;max-width:1200px}
#menu li button{display:flex;align-items:baseline;gap:18px;width:100%;text-align:left;padding:6px 0;font-family:"Archivo Black",sans-serif;font-size:clamp(26px,3.6vw,58px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--w);transition:color var(--fast)}
#menu li button b{font-family:"VT323",monospace;font-weight:400;font-size:.42em;color:var(--g);min-width:2em;letter-spacing:0}
#menu li button:hover,#menu li button[aria-current=true]{color:var(--yel)}
#menu li button[aria-current=true] b{color:var(--yel)}
#fecha{position:absolute;right:18px;top:60px;font-size:19px;color:var(--g);padding:4px 8px;border:1px solid #3a3836}
@media (max-width:700px){#menu{padding:70px 16px 30px;justify-content:flex-start}#menu li button{font-size:24px;gap:10px;padding:5px 0}#conta{left:16px;bottom:12px;font-size:20px}#ldr{left:12px;top:12px}#som{right:12px;top:14px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.pulsa{animation:none}}

/* rodada 1 (feedback dos sócios): LDR. sem círculo; some na capa; nunca por cima de borda */
.ldr-c{border:0;width:auto;aspect-ratio:auto;border-radius:0}
#ldr{border-radius:0;transition:opacity var(--slow) var(--ease),left var(--std) var(--ease),top var(--std) var(--ease)}
#ldr .ldr-c{font-size:22px}
body.na-capa #ldr{opacity:0;pointer-events:none}
#som,#conta{transition:color var(--slow) var(--ease),border-color var(--slow) var(--ease),right var(--std) var(--ease),top var(--std) var(--ease),left var(--std) var(--ease),bottom var(--std) var(--ease)}
body.moldura #ldr{left:40px;top:36px}
body.moldura #som{right:40px;top:40px}
body.moldura #conta{left:44px;bottom:38px}
@media (max-width:700px){body.moldura #ldr{left:18px;top:16px}body.moldura #som{right:18px;top:20px}body.moldura #conta{left:20px;bottom:20px}#ldr .ldr-c{font-size:19px}}