:root{--mix-lime:#c9f23a;--mix-ink:#111;--mix-line:#111;--mix-muted:#686868;--mix-grid:#dedede;--mix-panel:#fff;--mix-height:88px;--mix-scale:16px}
*{box-sizing:border-box}
body.mix-page{margin:0;background:#f4f4f4;color:var(--mix-ink);font-family:"Press Start 2P",monospace;font-size:9px;line-height:1.7}
.mix-app{width:min(1600px,100%);min-height:100vh;margin:auto;padding:0 14px 16px;background:#fff;border-inline:1px solid #ddd}
.mix-topbar{display:flex;align-items:center;gap:24px;min-height:54px;border-bottom:2px solid var(--mix-line)}
.mix-brand{display:flex;align-items:center;gap:8px;min-width:205px;color:var(--mix-ink);text-decoration:none;font-size:11px;line-height:1.5}.mix-brand>span:first-child{font-size:28px}.mix-brand small{font-size:7px}
.mix-topbar nav{display:flex;align-self:stretch;flex:1}.mix-topbar nav a{display:grid;place-items:center;padding:0 18px;border-inline-start:1px solid var(--mix-line);color:var(--mix-ink);text-decoration:none}.mix-topbar nav a:last-child{border-inline-end:1px solid var(--mix-line)}.mix-topbar nav a.active{background:var(--mix-lime)}
.mix-back{color:var(--mix-ink);text-decoration:none;white-space:nowrap}
.mix-titlebar{display:flex;align-items:center;gap:20px;padding:16px 0 12px;border-bottom:2px solid var(--mix-line)}
.mix-titlebar>div:first-child{min-width:280px}.eyebrow{margin:0 0 6px;color:#555;font-size:7px}.mix-titlebar h1{margin:0;font-size:clamp(22px,3vw,34px);line-height:1.3}.tagline{margin:2px 0 0;color:#333;font-size:8px}
.transport,.project-tools{display:flex;align-items:center;gap:6px}.transport{margin-left:auto}.transport button,.project-tools button,.tool-button{display:flex;min-width:45px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:2px solid var(--mix-ink);background:#fff;color:var(--mix-ink);font:inherit;font-size:19px;cursor:pointer}.transport button small,.project-tools small{font:7px "Press Start 2P",monospace}.transport .transport-primary{background:var(--mix-lime)}.transport .record-button{color:#e22}.project-tools button,.tool-button{min-width:80px;font-size:15px}.project-tools button:last-child{min-width:92px}.tool-button{cursor:pointer}
button:hover,.tool-button:hover{background:var(--mix-lime)!important;color:var(--mix-ink)!important}button:focus-visible,input:focus-visible,.tool-button:focus-visible{outline:3px dashed #73a000;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}
.mix-statusbar{display:flex;align-items:center;gap:18px;min-height:38px;padding:4px 8px;border-bottom:2px solid var(--mix-ink);font-size:7px}.mix-statusbar>span:first-child{flex:1;color:#555}.time-readout{font-size:11px}.bpm-control{display:flex;align-items:center;gap:7px}.bpm-control input{width:55px;padding:5px;border:1px solid var(--mix-ink);font:inherit}.meter{display:flex;width:92px;height:14px;align-items:center;padding:2px;border:1px solid var(--mix-ink)}.meter i{display:block;width:4%;height:100%;background:var(--mix-lime);transition:width .08s linear}
.editor-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:380px;border-bottom:2px solid var(--mix-ink)}
.timeline{position:relative;min-width:0;overflow:auto;background:#fff}.track-label-header{position:sticky;left:0;z-index:5;height:30px;width:170px;padding:7px 9px;border-bottom:1px solid var(--mix-line);background:#f3f3f3}.ruler-wrap{position:sticky;top:0;z-index:4;height:30px;margin-left:170px;overflow:hidden;background:#fafafa;border-bottom:1px solid var(--mix-line)}.ruler{position:relative;height:30px;min-width:100%;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--mix-scale)*10 - 1px),#aaa calc(var(--mix-scale)*10 - 1px) calc(var(--mix-scale)*10))}.ruler span{position:absolute;top:2px;color:#444;font-size:7px}.track-list{position:relative;min-width:max-content}.track-row{display:flex;min-height:var(--mix-height);border-bottom:1px solid #aaa}.track-controls{position:sticky;left:0;z-index:3;display:flex;width:170px;min-width:170px;align-items:center;gap:6px;padding:7px;background:#f7f7f7;border-right:2px solid var(--mix-ink)}.track-controls.active-track{box-shadow:inset 0 0 0 2px #91bd00}.track-info{flex:1;min-width:0}.track-name{display:block;width:100%;overflow:hidden;border:0;background:transparent;text-align:left;text-overflow:ellipsis;white-space:nowrap;font:8px "Press Start 2P",monospace}.track-type{display:block;margin-top:3px;color:#777;font-size:6px}.track-buttons{display:flex;gap:3px}.track-buttons button{width:22px;height:21px;padding:0;border:1px solid var(--mix-ink);background:#fff;font:7px "Press Start 2P",monospace}.track-buttons button.on{background:var(--mix-lime)}.track-volume{position:absolute;left:11px;bottom:4px;width:90px;height:4px;accent-color:#789e00}.track-pan{position:absolute;right:8px;bottom:4px;width:45px;height:4px;accent-color:#555}.track-lane{position:relative;width:calc(var(--mix-scale)*180);min-height:var(--mix-height);background-image:linear-gradient(to right,#eee 1px,transparent 1px);background-size:calc(var(--mix-scale)*10) 100%;cursor:crosshair}.track-row:nth-child(even) .track-lane{background-color:#fcfcfc}
.audio-clip{position:absolute;top:8px;height:70px;min-width:32px;overflow:hidden;border:1px solid #4e6500;background:#e8ff9a;color:#111;cursor:grab;touch-action:none}.audio-clip.selected{outline:2px solid #111;outline-offset:1px}.audio-clip canvas{display:block;width:100%;height:100%;opacity:.9}.clip-label{position:absolute;top:2px;left:4px;max-width:95%;overflow:hidden;color:#111;font-size:6px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.midi-clip{background:#d6c2ff;border-color:#49337a}.midi-note{position:absolute;top:30px;height:12px;background:#684ba5;border:1px solid #39275f}
.playhead{position:absolute;z-index:6;top:0;bottom:0;left:0;width:2px;background:#8bbd00;pointer-events:none}.playhead:before{position:absolute;top:0;left:-5px;width:12px;height:10px;background:#8bbd00;content:"";clip-path:polygon(0 0,100% 0,50% 100%)}
.inspector{padding:12px;border-left:2px solid var(--mix-ink);background:#fcfcfc}.inspector h2{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--mix-ink);font-size:9px}.inspector h2 span{color:#6e8f00}.effect-control{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;margin:8px 0 12px;font-size:7px}.effect-control input{flex-basis:100%;width:100%;accent-color:#82a900}.inspector details{margin-top:9px;border:1px solid #aaa}.inspector summary{padding:7px;background:#f1f1f1;cursor:pointer}.inspector details .effect-control{padding:0 8px}.inspector-note{margin-top:16px;color:#777;font:11px/1.5 system-ui,sans-serif}
.clip-editor{border-bottom:2px solid var(--mix-ink)}.editor-tabs{display:flex;align-items:center;gap:6px;min-height:40px;border-bottom:1px solid var(--mix-ink)}.editor-tabs button,.edit-tools button{min-height:31px;padding:6px 10px;border:1px solid var(--mix-ink);background:white;font:7px "Press Start 2P",monospace;cursor:pointer}.editor-tabs button.selected{background:var(--mix-lime)}.editor-tabs span{margin-left:auto;color:#555;font-size:7px}.edit-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:54px;padding:8px}.edit-tools label{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:7px}.edit-tools label input[type=range]{width:110px;accent-color:#82a900}.envelope-tools p,.midi-tools p{margin:0;color:#666;font:12px system-ui,sans-serif}.piano-roll{display:grid;grid-template-columns:38px repeat(16,minmax(23px,1fr));width:min(720px,100%);gap:2px;margin:8px 0;overflow-x:auto}.piano-roll .piano-key{align-self:center;color:#555;font:7px "Press Start 2P",monospace}.piano-roll button{height:24px;border:1px solid #999;background:#fafafa;font:6px "Press Start 2P",monospace}.piano-roll button.beat{border-left:2px solid #555}.piano-roll button.note-on{background:#c9f23a}#envelopeCanvas{width:min(720px,100%);height:130px;border:1px solid #aaa;touch-action:none}.record-button.recording{background:#ffdddd;color:#b00;animation:rec-pulse 1s steps(2,end) infinite}@keyframes rec-pulse{50%{background:#fff}}.mix-help{margin:12px 0;color:#666;font:12px/1.5 system-ui,sans-serif}.mix-app footer{padding:10px 0;color:#777;font-size:7px}
@media(max-width:1050px){.mix-titlebar{flex-wrap:wrap}.transport{margin-left:0}.project-tools{margin-left:auto}.editor-shell{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:760px){.mix-app{padding-inline:8px}.mix-topbar{flex-wrap:wrap;gap:5px;padding:8px 0}.mix-brand{min-width:0;flex:1}.mix-topbar nav{order:3;flex-basis:100%;height:36px;overflow:auto}.mix-topbar nav a{padding:0 10px;font-size:7px;white-space:nowrap}.mix-titlebar>div:first-child{min-width:100%}.transport{margin:0}.project-tools{margin:0;flex-wrap:wrap}.editor-shell{grid-template-columns:1fr}.inspector{border-top:2px solid var(--mix-ink);border-left:0}.mix-statusbar{flex-wrap:wrap}.mix-statusbar>span:first-child{flex-basis:100%}.editor-tabs{flex-wrap:wrap;padding:5px 0}.editor-tabs span{flex-basis:100%;margin:0}.track-controls{width:140px;min-width:140px}.ruler-wrap{margin-left:140px}.playhead{left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Destaque persistente para a faixa selecionada na linha do tempo. */
.track-row.active-track-row .track-controls{background:#e8ddff;box-shadow:inset 0 0 0 2px #7846b8}
.track-row.active-track-row .track-lane{background-color:#f4efff}

.reset-project-button{border-color:#a22;color:#8b1e1e}.reset-project-button:hover{background:#fff0f0}

.recording-monitor{margin:0 0 10px;padding:10px;border:2px solid #7846b8;background:#f4efff}.recording-monitor[hidden]{display:none}.recording-monitor-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:#4d2b7a;font:8px "Press Start 2P",monospace}.recording-monitor canvas{display:block;width:100%;height:100px;background:#fff;border:1px solid #9a7ac2}.record-button.recording{background:#ffe8ef;color:#a00}

/* Tema escuro do MIXMASTER */
html[data-theme="dark"] body.mix-page{background:#0b0d12;color:#edf0f7}
html[data-theme="dark"] .mix-app{background:#141720;border-color:#303441}
html[data-theme="dark"] .mix-topbar,html[data-theme="dark"] .mix-titlebar,html[data-theme="dark"] .mix-statusbar,html[data-theme="dark"] .clip-editor{border-color:#aeb3c1}
html[data-theme="dark"] .mix-brand,html[data-theme="dark"] .mix-back,html[data-theme="dark"] .mix-topbar nav a{color:#edf0f7}
html[data-theme="dark"] .mix-topbar nav a{border-color:#aeb3c1}
html[data-theme="dark"] .mix-topbar nav a.active{background:#c9f23a;color:#111}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .tagline,html[data-theme="dark"] .mix-statusbar>span:first-child,html[data-theme="dark"] .mix-help,html[data-theme="dark"] .mix-app footer{color:#b8bdca}
html[data-theme="dark"] .transport button,html[data-theme="dark"] .project-tools button,html[data-theme="dark"] .tool-button,html[data-theme="dark"] .editor-tabs button,html[data-theme="dark"] .edit-tools button,html[data-theme="dark"] .theme-toggle{background:#202430;color:#edf0f7;border-color:#b6bbc8}
html[data-theme="dark"] .transport .transport-primary,html[data-theme="dark"] .editor-tabs button.selected{background:#c9f23a;color:#111}
html[data-theme="dark"] .transport .record-button{color:#ff7686}
html[data-theme="dark"] .theme-toggle{display:flex;align-items:center;gap:5px;padding:7px 9px;font:7px "Press Start 2P",monospace;cursor:pointer}
html[data-theme="dark"] .theme-toggle small{font:6px "Press Start 2P",monospace}
.theme-toggle{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #111;background:#fff;color:#111;font:7px "Press Start 2P",monospace;white-space:nowrap;cursor:pointer}
.theme-toggle small{font:6px "Press Start 2P",monospace}
html[data-theme="dark"] .mix-statusbar,html[data-theme="dark"] .editor-shell{color:#edf0f7}
html[data-theme="dark"] .meter,html[data-theme="dark"] .bpm-control input{background:#202430;color:#edf0f7;border-color:#b6bbc8}
html[data-theme="dark"] .timeline,html[data-theme="dark"] .ruler-wrap{background:#141720}
html[data-theme="dark"] .track-label-header{background:#202430;color:#edf0f7;border-color:#aeb3c1}
html[data-theme="dark"] .ruler{background-color:#181b25;background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--mix-scale)*10 - 1px),#3a3e4b calc(var(--mix-scale)*10 - 1px) calc(var(--mix-scale)*10))}
html[data-theme="dark"] .ruler span{color:#d3d6df}
html[data-theme="dark"] .track-row{border-color:#454957}
html[data-theme="dark"] .track-controls{background:#1a1d27;border-color:#aeb3c1}
html[data-theme="dark"] .track-name{color:#edf0f7}
html[data-theme="dark"] .track-type,html[data-theme="dark"] .inspector-note{color:#aeb3c1}
html[data-theme="dark"] .track-lane{background-color:#141720;background-image:linear-gradient(to right,#2a2e39 1px,transparent 1px)}
html[data-theme="dark"] .track-row:nth-child(even) .track-lane{background-color:#181b25}
html[data-theme="dark"] .track-row.active-track-row .track-controls{background:#292337;box-shadow:inset 0 0 0 2px #bd91ff}
html[data-theme="dark"] .track-row.active-track-row .track-lane{background-color:#211d2c}
html[data-theme="dark"] .track-buttons button,html[data-theme="dark"] .inspector details,html[data-theme="dark"] .inspector details summary{background:#202430;color:#edf0f7;border-color:#555b6a}
html[data-theme="dark"] .inspector{background:#171a23;border-color:#aeb3c1}
html[data-theme="dark"] .inspector h2{border-color:#777d8b}
html[data-theme="dark"] .inspector h2 span{color:#c9f23a}
html[data-theme="dark"] .audio-clip{background:#37451d;border-color:#c9f23a;color:#f4f6ec}
html[data-theme="dark"] .clip-label{color:#f4f6ec}
html[data-theme="dark"] .midi-clip{background:#33264a;border-color:#c2a3f0}
html[data-theme="dark"] .recording-monitor{background:#211d2c;border-color:#9d6be0}
html[data-theme="dark"] .recording-monitor-heading{color:#d3b8ff}
html[data-theme="dark"] .recording-monitor canvas,html[data-theme="dark"] #envelopeCanvas{background:#181b25;border-color:#73798a}
html[data-theme="dark"] .mix-page input[type="number"]{background:#202430;color:#edf0f7;border-color:#b6bbc8}
html[data-theme="dark"]{--mix-wave-color:#d5b5ff}
@media(max-width:760px){.theme-toggle{margin-left:auto}}


.quick-start{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 14px;border-bottom:2px solid var(--mix-ink);background:var(--mix-panel,#f6f6f6);font:13px/1.5 system-ui,sans-serif;color:var(--mix-ink)}.quick-start strong{font:9px/1.5 "Press Start 2P",monospace}.quick-start span{max-width:30rem}.home-guidance{font-size:14px}.envelope-tools canvas:focus-visible{outline:3px dashed #73a000;outline-offset:3px}.envelope-status{font:12px/1.5 system-ui,sans-serif!important;color:#444!important}
@media(max-width:760px){.quick-start{display:grid;gap:6px;padding:10px}.quick-start strong{margin-bottom:3px}}


.mix-app footer .site-audio-mark{margin-top:14px}


/* Tipografia retrô aplicada a todos os elementos do MIXMASTER. */
body.mix-page,body.mix-page *{font-family:"Press Start 2P",monospace!important}


/* Escala compacta e consistente com Voz e Guitarra. */
body.mix-page{font-size:10px;line-height:1.8}
.quick-start{font:9px/1.7 "Press Start 2P",monospace}
.inspector-note,.envelope-tools p,.midi-tools p,.mix-help{font-size:9px;line-height:1.7}
.envelope-status{font-size:9px!important;line-height:1.7!important}


/* Escala tipográfica refinada para equilibrar o MIXMASTER com Voz e Guitarra. */
body.mix-page{font-size:8px;line-height:1.7}
.mix-brand{font-size:9px}
.mix-brand>span:first-child{font-size:24px}
.mix-brand small{font-size:6px}
.mix-topbar nav a{font-size:8px}
.mix-titlebar h1{font-size:clamp(18px,2.5vw,27px);line-height:1.3}
.eyebrow{font-size:6px}
.tagline{font-size:7px}
.quick-start{font-size:8px;line-height:1.7}
.quick-start strong{font-size:8px}
.inspector h2{font-size:8px}
.inspector-note,.envelope-tools p,.midi-tools p,.mix-help{font-size:8px;line-height:1.7}
.envelope-status{font-size:8px!important;line-height:1.7!important}
.mix-app footer{font-size:6px}