*{box-sizing:border-box}html{background:#050505}body{margin:0;background:#080808;color:#e8e0d4;font-family:Inter,Arial,sans-serif;min-height:100vh}.hidden{display:none!important}.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app{min-height:100vh;max-width:1900px;margin:auto}.app-hidden{opacity:0}.splash{position:fixed;z-index:2000;inset:0;background:radial-gradient(circle at 50% 45%,#2b160c,#070707 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.7s}.splash.leave{opacity:0;visibility:hidden}.splash-logo{width:min(410px,70vw);filter:brightness(0) invert(1)}.splash-product{margin-top:20px;letter-spacing:.35em;color:#d9a85a;font-weight:800}.splash p{color:#8d8276}.splash-tube{width:45px;height:92px;border-radius:22px 22px 10px 10px;border:2px solid #8d7661;background:linear-gradient(90deg,#1b1512,#51413555,#17110f);position:relative;margin-top:30px;box-shadow:inset 0 0 18px #fff1}.splash-tube i{position:absolute;left:14px;right:14px;bottom:14px;height:36px;background:#ff8c1f;border-radius:50%;filter:blur(7px);animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.5;transform:scale(.85)}}button,a{font:inherit}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#111,#070707);border-bottom:1px solid #2a2a2a;padding:0 20px;position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:12px}.brand img{width:160px;filter:brightness(0) invert(1)}.brand span{font-weight:800;letter-spacing:.08em}.brand b{color:#d6a14b;letter-spacing:.14em}.nav-actions{display:flex;gap:7px;align-items:center}.nav-actions button,.nav-actions a{color:#c8c1b8;background:#121212;border:1px solid #333;padding:10px 13px;border-radius:5px;text-decoration:none;font-size:11px;letter-spacing:.04em}.nav-actions .active{border-color:#a27639;color:#f1c16c;background:#282017}.launch{min-height:calc(100vh - 100px);display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:8vh 6vw;align-items:center;background:radial-gradient(circle at 15% 40%,#261b13,#080808 50%)}.overline{color:#c9974c;letter-spacing:.16em;font-size:10px;font-weight:800}.launch h1{font-size:clamp(50px,6vw,105px);line-height:.9;margin:15px 0;letter-spacing:-.06em}.launch h1 em{font-style:normal;color:#ac7443}.launch p{max-width:630px;color:#a79d92;line-height:1.6}.upload-module{border:1px solid #4a392d;background:linear-gradient(145deg,#171310,#0b0a09);padding:14px;border-radius:12px;box-shadow:0 25px 70px #0009}.dropzone{width:100%;min-height:370px;background:radial-gradient(circle,#2a2119,#0c0b0a);border:1px dashed #9a6c37;border-radius:8px;color:#e9dfd0;display:flex;flex-direction:column;align-items:center;justify-content:center}.dropzone strong{font-size:18px;letter-spacing:.18em}.dropzone small{color:#9f8d7c;margin:8px}.dropzone b{margin-top:25px;color:#c38c4d;font-size:9px;letter-spacing:.1em}.upload-arrow{width:55px;height:55px;border-radius:50%;background:#191512;color:#e2a342;font-size:30px;display:grid;place-items:center;margin-bottom:18px}.load-status{margin-top:15px;color:#c4b7aa;font-size:12px}.load-bar{height:5px;background:#181310;border-radius:20px;margin-top:8px;overflow:hidden}.load-bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,#b77b32,#f0be60);transition:.3s}.workspace{padding:12px;background:linear-gradient(#0b0b0b,#050505)}.rack{border:1px solid #37312c;background:linear-gradient(145deg,#171615,#0b0b0b);box-shadow:inset 0 1px #ffffff0a,0 10px 35px #0008;border-radius:7px}.top-rack{display:grid;grid-template-columns:1fr 1.08fr;gap:8px;padding:8px}.track-panel,.measurement-panel{border:1px solid #292929;background:#0c0c0c;border-radius:5px;padding:10px}.track-title-row{display:flex;gap:12px;align-items:center}.track-title-row strong{flex:1}.track-title-row span{color:#928a82;font-size:11px}.ready-led{width:10px;height:10px;border-radius:50%;background:#6bcc55;box-shadow:0 0 10px #6bcc55}.track-panel canvas{width:100%;height:118px;background:#111;border:1px solid #28221d;border-radius:3px;margin:8px 0}.transport{display:flex;align-items:center;gap:6px}.transport button{background:#111;color:#ddd;border:1px solid #2f2f2f;height:34px;min-width:38px}.transport-play{color:#f2b85b!important}.transport span{font-family:monospace;font-size:12px;padding:0 8px}.transport input{flex:1;accent-color:#d39b46}.ab-switch{display:flex!important;padding:0!important}.ab-switch span{padding:9px 10px;font-size:8px}.ab-switch .active{background:#8d6635;color:white}.measurement-panel{display:grid;grid-template-columns:repeat(5,1fr) 125px;padding:0}.measure{padding:20px 12px;border-right:1px solid #222;text-align:center}.measure span{display:block;color:#8e857c;font-size:9px}.measure strong{font-size:27px;display:block;margin:12px 0 4px}.measure small{font-size:8px;color:#706961}.vertical-meters{display:flex;gap:11px;padding:12px;align-items:flex-end;justify-content:center}.vertical-meters>div{display:grid;grid-template-rows:auto 1fr;gap:5px;height:142px;text-align:center}.vertical-meters b{font-size:8px;color:#a89578}.vertical-meters i{display:block;width:12px;height:110px;background:#050505;border:1px solid #222;position:relative;overflow:hidden}.vertical-meters em{position:absolute;bottom:0;left:0;right:0;height:0;background:linear-gradient(to top,#5baa52 0 58%,#e0b447 58% 80%,#e05c3d 80%);transition:height .05s}.console-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8px;margin-top:8px}.master-meter-rack,.tube-rack{padding:14px}.rack-title,.module-title{color:#dfa94c;letter-spacing:.08em;font-weight:700;font-size:12px}.real-vu{height:310px;margin-top:12px;background:linear-gradient(#e6d0a0,#d7bd84);border:8px solid #0a0908;border-radius:7px;box-shadow:inset 0 0 45px #8a5e2666,0 0 0 2px #504335;position:relative;overflow:hidden}.vu-scale span{position:absolute;top:35px;transform:translateX(-50%);color:#18110c;font-size:24px}.vu-ticks{position:absolute;left:8%;right:8%;top:88px;height:28px;background:repeating-linear-gradient(90deg,#3a2919 0 1px,transparent 1px 4.2%);mask:linear-gradient(#000,#000)}.vu-colorbar{position:absolute;left:9%;right:9%;bottom:18px;height:13px;background:linear-gradient(90deg,#74aa57 0 65%,#d9bd45 65% 82%,#df8244 82% 90%,#c74d39 90%)}.needle,.needle-shadow,.peak-tick{position:absolute;left:50%;bottom:-24px;transform-origin:50% 100%}.needle{width:4px;height:250px;background:#24160f;box-shadow:1px 0 #9e6f52;transform:rotate(-38deg)}.needle-shadow{width:8px;height:250px;background:#0005;filter:blur(3px);transform:rotate(-39deg)}.peak-tick{height:235px;width:2px;background:linear-gradient(transparent 0 83%,#d74a31 83% 92%,transparent 92%);transform:rotate(-38deg)}.vu-brand{position:absolute;bottom:42px;left:0;right:0;text-align:center;color:#1e160f;letter-spacing:.25em;font-size:18px}.vu-db{position:absolute;bottom:28px;left:16px;color:#322519}.clip-lamp{position:absolute;bottom:25px;right:18px;background:#6e2b22;color:#db9e88;padding:7px 11px;border:1px solid #8d4337;border-radius:4px}.clip-lamp.on{background:#c84b39;color:white;box-shadow:0 0 20px #e54b34}.dual-bars{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.dual-bars>div{border:1px solid #39302a;padding:12px;border-radius:5px}.dual-bars span{color:#d6a454;font-size:10px;letter-spacing:.09em}.bar-slot{height:8px;background:#050505;border:1px solid #2d2925;margin:10px 0}.bar-slot i{display:block;width:0;height:100%;background:#e2a43a}.bar-slot.red i{background:#d54a37}.dual-bars b{display:block;text-align:right;color:#e6b654}.tube-rack{display:grid;grid-template-columns:170px 1fr 190px;gap:15px}.tube-bay{border:1px solid #292521;background:#080807;border-radius:5px;padding:12px}.tube{height:250px;width:90px;margin:auto;position:relative}.tube-glass{position:absolute;inset:12px 12px 48px;border:2px solid #75615188;border-radius:38px 38px 17px 17px;background:linear-gradient(90deg,#130f0d,#6f59452f,#17110e);box-shadow:inset 0 0 18px #d6b28b22}.tube-grid{position:absolute;left:27px;right:27px;top:50px;bottom:75px;border:1px solid #aa7951;border-top:7px double #8d6548;border-bottom:6px double #8d6548}.tube-filament{position:absolute;left:40px;right:40px;bottom:72px;height:82px;background:linear-gradient(#e77b27,#ffb23b,#f36a1b);border-radius:50%;filter:blur(3px);opacity:.8}.tube-glow{position:absolute;left:12px;right:12px;bottom:45px;height:135px;background:radial-gradient(ellipse at bottom,#ff8b1f99,transparent 68%);filter:blur(6px);opacity:.7;transition:.2s}.tube.off .tube-filament,.tube.off .tube-glow{opacity:.05}.tube-base{position:absolute;left:4px;right:4px;bottom:25px;height:38px;border-radius:4px 4px 13px 13px;background:linear-gradient(#2c2926,#070706)}.tube-gr span{font-size:8px;color:#b08753}.tube-gr-track{height:90px;width:12px;background:#040404;margin:8px auto;border:1px solid #32281f;position:relative;overflow:hidden}.tube-gr-track i{position:absolute;bottom:0;left:0;right:0;height:0;background:linear-gradient(to top,#d98d2d,#f2bd42);transition:.06s}.compressor-panel{padding:6px}.compressor-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;margin-top:28px}.control{text-align:center}.control span{display:block;font-size:8px;color:#c6b6a1;margin-top:7px}.control b{display:block;color:#e5b65f;font-size:10px;margin-top:4px}.knob{width:62px;height:62px;margin:auto;border-radius:50%;background:radial-gradient(circle at 34% 27%,#4d4943,#171614 57%,#070707 61%);border:1px solid #61584d;box-shadow:4px 7px 10px #0008,inset 1px 1px #fff2;position:relative;cursor:ns-resize;touch-action:none}.knob.large{width:75px;height:75px}.knob i{position:absolute;width:2px;height:22px;background:#e4c080;left:50%;top:5px;transform-origin:50% 26px;transform:rotate(0deg)}.compressor-footer{margin-top:20px;border-top:1px solid #29231f;padding-top:12px;display:flex;gap:12px;align-items:center;color:#8c8379;font-size:9px}.power{background:#1b1612;border:1px solid #59422e;color:#d9a75a;padding:8px 10px;border-radius:4px}.power i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff951f;box-shadow:0 0 11px #ff8d1b;margin-right:6px}.power:not(.active) i{background:#41281c;box-shadow:none}.compressor-vu{display:flex;flex-direction:column;align-items:center}.small-vu{width:160px;height:125px;background:linear-gradient(#dcb976,#ae7d3e);border:7px solid #15110e;border-radius:7px;position:relative;overflow:hidden;margin-top:30px}.small-vu span{position:absolute;top:45px;left:0;right:0;text-align:center;color:#2c1d10;font-size:24px}.small-vu div{position:absolute;width:2px;height:100px;background:#2b180e;left:50%;bottom:-35px;transform-origin:bottom;transform:rotate(-28deg)}.compressor-vu>span{margin-top:10px;color:#c99b55;font-size:9px}.processor-rack{margin-top:8px;display:grid;grid-template-columns:1.3fr .65fr .65fr .65fr 1.05fr;padding:0}.processor{padding:14px;border-right:1px solid #2a2521;min-height:190px}.module-title i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff9a28;box-shadow:0 0 9px #ff8c1d;margin-right:8px}.triple,.double{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px}.double{grid-template-columns:1fr 1fr}.limiter .status-leds{display:grid;gap:7px;margin-top:15px;font-size:8px;color:#aa9f94}.status-leds i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.status-leds .green{background:#68cb4e;box-shadow:0 0 8px #6ddd51}.status-leds .red{background:#5b231d}.status-leds .red.on{background:#e74e31;box-shadow:0 0 9px #ff4d2b}.analyzer-rack{margin-top:8px;display:grid;grid-template-columns:1.4fr .65fr .9fr;padding:10px;gap:10px}.spectrum-panel,.scope-panel,.analysis-summary{border:1px solid #24211e;padding:10px}.spectrum-panel canvas,.scope-panel canvas{width:100%;height:190px;background:#070707;margin-top:8px}.analysis-summary p{font-size:11px;color:#a1978d;line-height:1.55}.analysis-details{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:9px}.analysis-details b{color:#dfab59}.analysis-details small{color:#777}.preset-rack{margin-top:8px;padding:12px;display:grid;grid-template-columns:1fr 250px 210px;align-items:center;gap:18px}.preset-grid{display:flex;gap:6px;margin-top:9px}.preset{border:1px solid #40352c;background:#111;color:#b5aaa0;padding:9px 11px;font-size:9px}.preset.selected{color:#ffca72;border-color:#a16d34;background:#261b12}.intensity-box label{display:flex;justify-content:space-between;color:#b7a897;font-size:9px}.intensity-box input{width:100%;accent-color:#d69538}.export-master{height:58px;background:linear-gradient(#d59b45,#8e5926);border:1px solid #edb861;color:#1a1009;font-weight:900}.export-master small{display:block;font-size:8px;margin-top:4px}.result-panel{margin-top:8px;padding:14px;display:flex;gap:15px;align-items:center}.result-panel>div{padding:8px 12px;border:1px solid #333}.result-panel span,.result-panel small{font-size:8px;color:#8f867d}.result-panel strong{display:block;font-size:18px;color:#e6b75e}.download-btn,.small-button{padding:10px 14px;border:1px solid #77552e;background:#1a1511;color:#e3af59}footer{display:flex;justify-content:space-between;color:#726b63;font-size:8px;letter-spacing:.08em;padding:16px 25px}.toast{position:fixed;right:20px;bottom:20px;background:#18130f;color:#eedfc9;border:1px solid #6e4b2d;padding:11px 15px;border-radius:5px;opacity:0;transform:translateY(8px);transition:.2s;z-index:1000}.toast.show{opacity:1;transform:none}@media(max-width:1100px){.nav-actions button:nth-child(n+4){display:none}.top-rack,.console-grid{grid-template-columns:1fr}.measurement-panel{grid-template-columns:repeat(3,1fr)}.tube-rack{grid-template-columns:150px 1fr}.compressor-vu{display:none}.processor-rack{grid-template-columns:1fr 1fr}.processor{border-bottom:1px solid #2a2521}.analyzer-rack{grid-template-columns:1fr}.preset-rack{grid-template-columns:1fr}}@media(max-width:700px){.brand span{display:none}.brand img{width:130px}.nav-actions button:not(.active){display:none}.launch{grid-template-columns:1fr;padding:45px 15px}.launch h1{font-size:52px}.upload-module{padding:8px}.dropzone{min-height:260px}.workspace{padding:6px}.measurement-panel{grid-template-columns:1fr 1fr}.vertical-meters{display:none}.real-vu{height:230px}.tube-rack{grid-template-columns:1fr}.tube-bay{display:flex}.compressor-controls{grid-template-columns:repeat(2,1fr)}.processor-rack{grid-template-columns:1fr}.analyzer-rack{grid-template-columns:1fr}.preset-grid{flex-wrap:wrap}.preset-rack{grid-template-columns:1fr}.topbar{padding:0 10px}}
.tube{--glow:.55}.tube-glow{opacity:var(--glow)}.tube-filament{opacity:calc(.45 + var(--glow)*.5)}.interactive-knob.dragging{filter:brightness(1.2)}
/* v0.5.1 loader hotfix */
.load-status-row{display:flex;justify-content:space-between;gap:12px}
#loadPercent{color:#e0a84d;font-size:10px}
.cancel-load{margin-top:10px;border:1px solid #5c4432;background:#17110d;color:#cdbca9;padding:7px 10px;border-radius:4px;font-size:9px}
.load-status.error #loadStatusText{color:#ef806c}
.load-status.error .load-bar i{background:#c84f3b!important}
/* v0.5.4 — Compact Console */
html,body{overflow-x:hidden}
.topbar{height:52px;padding:0 14px}
.brand img{width:132px}
.brand span,.brand b{font-size:11px}
.nav-actions{gap:5px}
.nav-actions button,.nav-actions a{padding:7px 9px;font-size:9px}
.workspace{padding:7px;max-width:1800px;margin:0 auto}
/* Keep waveform/transport visible directly under the app bar. */
.top-rack{
position:sticky;
top:52px;
z-index:22;
grid-template-columns:minmax(0,1.3fr) minmax(560px,.95fr);
gap:6px;
padding:6px;
box-shadow:0 8px 24px #000b
}
.track-panel,.measurement-panel{padding:7px}
.track-panel canvas{height:66px;margin:5px 0}
.track-title-row{font-size:11px}
.transport button{height:28px;min-width:32px}
.transport span{font-size:10px;padding:0 5px}
.ab-switch span{padding:7px 8px;font-size:7px}
.measurement-panel{grid-template-columns:repeat(5,1fr) 86px}
.measure{padding:9px 6px}
.measure span{font-size:7px}
.measure strong{font-size:18px;margin:5px 0 2px}
.measure small{font-size:6px}
.vertical-meters{height:86px;padding:6px;gap:6px}
.vertical-meters>div{height:72px}
.vertical-meters i{height:56px;width:8px}
.console-grid{gap:6px;margin-top:6px;grid-template-columns:.86fr 1.14fr}
.master-meter-rack,.tube-rack{padding:9px}
.rack-title,.module-title{font-size:10px}
.real-vu{height:198px;margin-top:7px;border-width:6px}
.vu-scale span{top:22px;font-size:16px}
.vu-ticks{top:57px;height:17px}
.vu-colorbar{bottom:12px;height:8px}
.needle,.needle-shadow{height:168px;bottom:-18px}
.peak-tick{height:160px;bottom:-18px}
.vu-brand{bottom:28px;font-size:13px}
.vu-db{bottom:16px;font-size:9px}
.clip-lamp{bottom:14px;padding:4px 7px;font-size:8px}
.dual-bars{gap:7px;margin-top:7px}
.dual-bars>div{padding:7px}
.dual-bars span{font-size:7px}
.bar-slot{margin:5px 0;height:5px}
.dual-bars b{font-size:9px}
.tube-rack{grid-template-columns:112px 1fr 125px;gap:8px}
.tube-bay{padding:6px}
.tube{height:166px;width:64px}
.tube-glass{inset:8px 8px 32px}
.tube-grid{left:19px;right:19px;top:34px;bottom:51px}
.tube-filament{left:28px;right:28px;bottom:49px;height:55px}
.tube-glow{left:8px;right:8px;bottom:31px;height:92px}
.tube-base{bottom:16px;height:27px}
.tube-gr-track{height:54px}
.compressor-controls{grid-template-columns:repeat(5,1fr);gap:7px;margin-top:13px}
.knob{width:44px;height:44px}
.knob.large{width:52px;height:52px}
.knob i{height:15px;top:4px;transform-origin:50% 19px}
.control span{font-size:6px;margin-top:3px}
.control b{font-size:8px;margin-top:2px}
.compressor-footer{margin-top:8px;padding-top:7px;font-size:7px}
.power{padding:5px 7px;font-size:7px}
.small-vu{width:112px;height:82px;border-width:5px;margin-top:15px}
.small-vu span{top:27px;font-size:16px}
.small-vu div{height:65px;bottom:-22px}
.compressor-vu>span{font-size:7px}
.processor-rack{
margin-top:6px;
min-height:0;
grid-template-columns:1.25fr .62fr .62fr .62fr 1fr
}
.processor{min-height:118px;padding:8px}
.triple,.double{margin-top:8px}
.module-title{font-size:9px}
.module-title i{width:7px;height:7px}
.limiter .status-leds{margin-top:6px!important;gap:3px!important;font-size:6px!important}
.analyzer-rack{
margin-top:6px;
padding:6px;
grid-template-columns:1.4fr .62fr .9fr;
gap:6px
}
.spectrum-panel,.scope-panel,.analysis-summary{padding:6px}
.spectrum-panel canvas,.scope-panel canvas{height:100px;margin-top:4px}
.analysis-summary p{font-size:8px;line-height:1.3;margin:5px 0}
.analysis-details{font-size:7px;gap:3px 7px}
.preset-rack{
margin-top:6px;
padding:7px;
grid-template-columns:1fr 190px 250px;
gap:9px
}
.preset-grid{margin-top:4px;gap:4px}
.preset{padding:5px 7px;font-size:7px}
.intensity-box label{font-size:7px}
.final-actions{display:grid;grid-template-columns:84px 1fr;gap:6px}
.reset-master-bottom{
border:1px solid #6a5034;
background:#15110e;
color:#d5a057;
font-size:7px;
font-weight:800;
letter-spacing:.06em
}
.export-master{height:42px;font-size:10px}
.export-master small{font-size:6px}
footer{padding:7px 14px;font-size:6px}
/* Extra squeeze for 1080p / laptop height. */
@media(min-width:1101px) and (max-height:900px){
.track-panel canvas{height:50px}
.real-vu{height:170px}
.needle,.needle-shadow{height:145px}
.peak-tick{height:138px}
.tube{height:145px}
.processor{min-height:106px}
.spectrum-panel canvas,.scope-panel canvas{height:84px}
}
@media(max-width:1100px){
.top-rack{position:relative;top:auto;grid-template-columns:1fr}
.measurement-panel{grid-template-columns:repeat(3,1fr)}
.compressor-controls{grid-template-columns:repeat(3,1fr)}
.processor-rack{grid-template-columns:1fr 1fr}
.analyzer-rack{grid-template-columns:1fr}
.preset-rack{grid-template-columns:1fr}
}
/* v0.6 — Full-screen adaptive mastering + reference workflow */
.workspace{
width:100%;
max-width:none;
min-height:calc(100vh - 52px);
padding:8px 2vw 10px;
display:flex;
flex-direction:column;
gap:7px;
}
.top-rack,.console-grid,.processor-rack,.analyzer-rack,.preset-rack,.reference-rack{width:100%}
/* Use more of large desktop/laptop screens without returning to the oversized v0.5 look. */
@media(min-width:1101px){
.top-rack{flex:0 0 auto}
.console-grid{min-height:260px}
.real-vu{height:clamp(205px,24vh,285px)}
.needle,.needle-shadow{height:clamp(174px,21vh,245px)}
.peak-tick{height:clamp(165px,20vh,232px)}
.tube{height:clamp(175px,21vh,235px)}
.processor{min-height:clamp(122px,14vh,155px)}
.spectrum-panel canvas,.scope-panel canvas{height:clamp(105px,14vh,145px)}
.analyzer-rack{min-height:135px}
.preset-rack{margin-top:auto}
}
/* Adaptive mastering feedback */
.engineer-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.need-badge{
padding:5px 7px;border-radius:3px;border:1px solid #6c5135;
color:#d8a95f;background:#18120e;font-size:6px;letter-spacing:.07em;white-space:nowrap
}
.need-badge.minimal{border-color:#4d774e;color:#9ed39d;background:#10180f}
.need-badge.light{border-color:#84682d;color:#e0bb62;background:#1c170d}
.need-badge.normal{border-color:#80513a;color:#e2a071;background:#1b120d}
.adaptive-hint{display:inline-block;margin-left:8px;color:#827a70;font-size:6px}
/* Reference track */
.reference-rack{
display:grid;
grid-template-columns:180px 1fr 1.2fr;
gap:10px;
padding:9px;
align-items:center
}
.reference-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reference-head strong{display:block;margin-top:5px;font-size:9px;max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-head button{
border:1px solid #4d3c2f;background:#111;color:#a99a89;padding:5px 7px;font-size:6px
}
.reference-metrics{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid #28231f}
.reference-metrics div{padding:7px;border-right:1px solid #28231f;text-align:center}
.reference-metrics div:last-child{border-right:0}
.reference-metrics span{display:block;color:#777;font-size:6px}
.reference-metrics b{display:block;color:#dfaa58;margin-top:3px;font-size:8px}
.reference-copy{display:flex;align-items:center;gap:10px}
.reference-copy p{margin:0;color:#948b82;font-size:7px;line-height:1.35;flex:1}
.apply-reference{
border:1px solid #9a6a34;background:#21170f;color:#e2ac5c;
padding:8px 9px;font-size:7px;font-weight:800;white-space:nowrap
}
@media(max-width:1100px){
.reference-rack{grid-template-columns:1fr}
.reference-metrics{grid-template-columns:repeat(3,1fr)}
}
/* v0.7 — Rebalanced mastering engine */
.module-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.compressor-title-row{margin-bottom:4px}
.module-power{
border:1px solid #5b4431;background:#14100d;color:#796a5b;
padding:4px 7px;border-radius:3px;font-size:6px;font-weight:800;letter-spacing:.08em
}
.module-power.active{
color:#f0b95e;border-color:#9a6c35;background:#21170f;
box-shadow:inset 0 0 10px #d88b2422
}
.processor:has(.module-power:not(.active)){opacity:.72}
.processor:has(.module-power:not(.active)) .knob{filter:saturate(.25) brightness(.72)}
/* Monitor strip */
.monitor-rack{
display:grid;grid-template-columns:1fr 150px 1.4fr;gap:12px;
padding:9px;align-items:center
}
.monitor-buttons{display:flex;gap:5px;margin-top:7px}
.monitor-mode{
border:1px solid #3c342d;background:#0f0f0f;color:#8f8478;
padding:7px 9px;font-size:7px;border-radius:3px
}
.monitor-mode.active{border-color:#9a6a34;color:#f1bd65;background:#251a10}
.monitor-left p,.translation-result p{font-size:7px;color:#8d847b;line-height:1.35;margin:7px 0 0}
.translation-result span{font-size:6px;color:#736b63}
.translation-result strong{display:block;color:#dfaa58;margin-top:4px;font-size:11px}
.phone-visual{
width:90px;height:150px;border:4px solid #24211e;border-radius:18px;margin:auto;
background:linear-gradient(#111,#050505);box-shadow:0 8px 22px #0008,inset 0 0 0 1px #5f5449;position:relative
}
.phone-speaker{position:absolute;top:7px;left:33px;width:24px;height:3px;border-radius:4px;background:#4f4943}
.phone-screen{position:absolute;left:6px;right:6px;top:16px;bottom:16px;background:radial-gradient(circle at 50% 30%,#2a1d12,#080808 62%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone-screen b{color:#e3a94e;font-size:7px;letter-spacing:.08em}.phone-screen small{color:#786d63;font-size:5px;margin-top:4px}
.phone-home{position:absolute;bottom:5px;left:42px;width:7px;height:7px;border:1px solid #56504a;border-radius:50%}
.phone-wave{height:34px;display:flex;gap:2px;align-items:end;margin-bottom:7px}
.phone-wave i{display:block;width:3px;background:#d9963a;border-radius:3px;animation:phoneWave .7s infinite alternate}
.phone-wave i:nth-child(1){height:10px}.phone-wave i:nth-child(2){height:25px}.phone-wave i:nth-child(3){height:16px}.phone-wave i:nth-child(4){height:31px}.phone-wave i:nth-child(5){height:19px}.phone-wave i:nth-child(6){height:27px}.phone-wave i:nth-child(7){height:13px}
@keyframes phoneWave{to{transform:scaleY(.5);opacity:.55}}
.reference-actions{display:flex;gap:6px;align-items:center}
.apply-reference.secondary{border-color:#4b4035;color:#a99d90;background:#101010}
/* Export feedback */
.export-master:disabled{opacity:.68;cursor:wait}
/* v0.7.1 — playback safety + readable Engineer Notes */
.analysis-summary{
min-width:0;
padding:11px 13px!important;
background:linear-gradient(145deg,#151311,#0a0a0a);
}
.engineer-head{
align-items:flex-start;
padding-bottom:9px;
border-bottom:1px solid #2b2621;
}
.engineer-label{
display:block;
color:#d5a04a;
font-size:8px;
font-weight:800;
letter-spacing:.12em;
}
.engineer-title{
display:block;
margin-top:4px;
color:#f0e7db;
font-size:16px;
line-height:1.05;
}
.analysis-summary #analysisCopy{
color:#c5bbb0;
font-size:10px;
line-height:1.55;
margin:10px 0 11px;
max-width:68ch;
}
.need-badge{
font-size:7px!important;
padding:6px 8px!important;
}
.analysis-details{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:6px!important;
}
.analysis-chip{
border:1px solid #312a24;
background:#0e0d0c;
border-radius:4px;
padding:8px 7px;
min-width:0;
}
.analysis-chip small{
display:block;
color:#776f68;
font-size:6px;
letter-spacing:.1em;
margin-bottom:4px;
}
.analysis-chip b{
display:block;
color:#e3ad58;
font-size:9px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.analysis-chip.profile b{color:#f0c67e}
@media(min-width:1101px){
.analyzer-rack{grid-template-columns:1.25fr .55fr 1.1fr}
}
@media(max-width:700px){
.analysis-details{grid-template-columns:repeat(2,1fr)!important}
.engineer-title{font-size:14px}
.analysis-summary #analysisCopy{font-size:9px}
}
/* v0.7.2 — transport-first playback */
.transport-status{
color:#8d8379;
font-size:7px;
letter-spacing:.08em;
padding:4px 6px;
border:1px solid #2e2924;
background:#0d0c0b;
border-radius:3px;
white-space:nowrap;
}
.transport-status.playing{
color:#9cd48f;
border-color:#4b7046;
box-shadow:0 0 8px #65ad5525;
}
.analysis-summary #analysisCopy{
font-size:11px!important;
line-height:1.62!important;
}
.analysis-chip b{font-size:10px!important}
.analysis-chip small{font-size:7px!important}
.engineer-title{font-size:18px!important}
@media(max-width:700px){
.transport-status{display:none}
.engineer-title{font-size:15px!important}
.analysis-summary #analysisCopy{font-size:10px!important}
}
#transportAudio{position:fixed;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* v0.7.4 isolated transport */
.transport-status.playing{font-weight:800}
/* v0.7.5 playback diagnostics */
.diagnostic-panel{
grid-column:1/-1;
margin-top:6px;
border:1px solid #5c4635;
background:#0a0908;
border-radius:5px;
padding:9px;
}
.diagnostic-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.diagnostic-head strong{color:#e0ab59;font-size:8px;letter-spacing:.1em}
.diagnostic-head button{
border:1px solid #6a4d31;background:#17110d;color:#e0b067;
padding:6px 8px;font-size:7px;border-radius:3px
}
.diag-grid{
display:grid;
grid-template-columns:120px minmax(0,1fr) 120px minmax(0,1fr);
gap:4px 8px;
margin-top:8px;
font-size:7px
}
.diag-grid span{color:#756d65}
.diag-grid b{
color:#cfc4b8;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.diag-log{
max-height:100px;overflow:auto;margin:8px 0 0;padding:7px;
background:#050505;border:1px solid #24201c;color:#9ec793;
font:7px/1.45 monospace;white-space:pre-wrap
}
@media(max-width:800px){
.diag-grid{grid-template-columns:100px 1fr}
}
.diag-version{
margin-left:6px;
color:#91cc82;
font-size:6px;
letter-spacing:.05em;
}
.diagnostic-panel{display:none!important}
.assistant-rack{padding:12px;background:radial-gradient(circle at 90% 10%,rgba(213,158,69,.09),transparent 28%),linear-gradient(145deg,#151311,#090909)}
.assistant-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding-bottom:10px;border-bottom:1px solid #302920}
.assistant-head h3{margin:5px 0 4px;color:#f3eadf;font-size:18px;letter-spacing:-.025em}.assistant-head p{margin:0;color:#a99e92;font-size:9px;line-height:1.45;max-width:760px}
.assistant-confidence{text-align:right;border:1px solid #463827;background:#0c0b0a;padding:8px 10px;border-radius:4px}.assistant-confidence small{display:block;color:#776b5f;font-size:6px}.assistant-confidence strong{display:block;color:#e4ad55;font-size:17px;margin-top:3px}
.assistant-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:9px}.assistant-grid>div{padding:8px;border:1px solid #2e2822;background:#0c0b0a;border-radius:4px}.assistant-grid small{display:block;color:#766e66;font-size:6px}.assistant-grid b{display:block;color:#e3ad58;font-size:11px;margin:5px 0 3px}.assistant-grid span{display:block;color:#92877c;font-size:6px;line-height:1.3}
.assistant-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:9px}.assistant-actions span{color:#91877d;font-size:7px;line-height:1.4}
#applyAssistantBtn{border:1px solid #c08439;background:linear-gradient(#d49a47,#8e5926);color:#170f08;font-size:8px;font-weight:900;padding:10px 14px}
@media(max-width:1100px){.assistant-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.assistant-head,.assistant-actions{display:block}.assistant-grid{grid-template-columns:repeat(2,1fr)}#applyAssistantBtn{width:100%;margin-top:10px}}
/* v0.8.1 — ONE SCREEN / REAL ANALOG UI */
:root{
--ui-font:"Inter","Avenir Next","Helvetica Neue",Arial,sans-serif;
--ui-amber:#e2a84f;--ui-cream:#f2e9dc;--ui-muted:#aaa095;--ui-line:#3a3128;
}
html,body{height:100%;min-height:100%;font-family:var(--ui-font)!important;background:radial-gradient(circle at 50% -10%,#25201a 0,#11100f 28%,#070707 75%) fixed!important}
body{overflow:hidden!important}
#app{height:100vh;overflow:hidden!important}
.topbar{height:44px!important;min-height:44px!important;padding:0 16px!important;border-bottom:1px solid #342b23!important}
.brand img{width:122px!important}.brand span,.brand b{font-size:10px!important;letter-spacing:.09em!important}
.nav-actions{gap:6px!important}.nav-actions button,.nav-actions a{min-height:27px!important;padding:6px 10px!important;border-radius:4px!important;font-size:8px!important;font-weight:800!important;letter-spacing:.035em!important}
.workspace{
box-sizing:border-box;display:grid!important;
grid-template-rows:auto auto auto minmax(0,1fr) auto auto!important;
gap:5px!important;padding:5px 10px 7px!important;max-width:none!important;width:100%!important;
min-height:calc(100vh - 44px)!important;height:calc(100vh - 44px)!important;overflow:hidden!important
}
.rack{margin:0!important;border-color:#332b24!important;background:linear-gradient(160deg,rgba(22,20,18,.96),rgba(7,7,7,.98))!important;box-shadow:inset 0 1px rgba(255,255,255,.025),0 3px 10px #0005!important}
.top-rack{position:relative!important;top:auto!important;z-index:2!important;display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(500px,.9fr)!important;gap:5px!important;padding:5px!important;box-shadow:none!important}
.track-panel,.measurement-panel{padding:5px 7px!important}.track-panel canvas{height:46px!important;margin:3px 0!important}.track-title-row{font-size:9px!important}
.transport{gap:6px!important}.transport button{height:25px!important;min-width:29px!important;font-size:10px!important}.transport span,.transport b{font-size:8px!important}.ab-switch span{padding:6px 8px!important;font-size:6.5px!important}
.measurement-panel{grid-template-columns:repeat(5,1fr) 78px!important}.measure{padding:5px!important}.measure span{font-size:6px!important;letter-spacing:.05em!important}.measure strong{margin:3px 0 1px!important;font-size:16px!important;line-height:1!important}.measure small{font-size:5.5px!important}
.vertical-meters{height:62px!important;padding:4px!important;gap:5px!important}.vertical-meters>div{height:54px!important}.vertical-meters i{height:44px!important}
.console-grid{display:grid!important;grid-template-columns:.88fr 1.12fr!important;gap:5px!important;min-height:0!important;margin:0!important}
.master-meter-rack,.tube-rack{min-height:0!important;padding:7px!important}
.rack-title-row,.compressor-title-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important}
.rack-title,.module-title{color:var(--ui-amber)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.08em!important}.analog-sub{display:block;margin-top:2px;color:#74685c;font-size:5px;font-weight:800;letter-spacing:.12em}
.real-vu{
position:relative!important;height:150px!important;margin-top:5px!important;overflow:hidden!important;border:7px solid #17130f!important;border-radius:8px!important;
background:radial-gradient(ellipse at 50% 35%,#f8e0a9 0,#eacb8d 56%,#ae8551 100%)!important;
box-shadow:inset 0 0 0 2px #6d4f31,inset 0 -18px 35px #7f512955,inset 0 8px 22px #fff6,0 0 0 1px #493622,0 8px 16px #0009!important
}
.real-vu:after{content:"";position:absolute;inset:4px;border-radius:3px;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.23) 28%,transparent 42%);pointer-events:none;mix-blend-mode:screen}
.vu-scale span{top:17px!important;font-size:13px!important;color:#2a1c10!important;font-weight:800!important}.vu-ticks{top:45px!important;height:15px!important;opacity:.8!important}
.vu-brand{bottom:22px!important;color:#3a2617!important;font-size:11px!important;letter-spacing:.24em!important}.vu-db{bottom:11px!important;left:13px!important;color:#3d2b1b!important;font-size:8px!important}
.vu-colorbar{bottom:8px!important;height:6px!important;left:52px!important;right:45px!important;border-radius:10px!important}
.needle,.needle-shadow{height:128px!important;bottom:-17px!important;width:2px!important}.needle{background:linear-gradient(#4b1f17,#160b08)!important;box-shadow:0 0 2px #000!important}.peak-tick{height:120px!important;bottom:-17px!important}
.clip-lamp{bottom:10px!important;right:10px!important;padding:4px 7px!important;font-size:7px!important;border-radius:4px!important}
.dual-bars{gap:5px!important;margin-top:5px!important}.dual-bars>div{padding:5px 6px!important}.dual-bars span{font-size:6.5px!important}.dual-bars b{font-size:8px!important}.bar-slot{height:4px!important;margin:4px 0!important}
.tube-rack{grid-template-columns:125px 1fr 108px!important;gap:7px!important}
.tube-bay{position:relative!important;overflow:hidden!important;min-height:196px!important;padding:5px!important;border:1px solid #2f2720!important;border-radius:7px!important;background:linear-gradient(180deg,#12100e,#070707 65%,#11100e)!important;box-shadow:inset 0 0 22px #000!important}
.tube-hardware{position:relative;width:100%;height:158px;display:flex;align-items:flex-end;justify-content:center;gap:5px;overflow:hidden}
.transformer{position:absolute;bottom:17px;width:34px;height:82px;border:1px solid #332a22;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#080808,#201d19 45%,#090909 70%);box-shadow:inset 0 2px #464039,0 4px 9px #000}
.transformer-left{left:4px}.transformer-right{right:4px}
.tube-cage{position:absolute;left:20px;right:20px;top:8px;bottom:18px;pointer-events:none;z-index:5}
.tube-cage:before,.tube-cage:after,.tube-cage i{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#8a7765 10%,#c0a27e 50%,#78634f 90%,transparent);box-shadow:0 1px #111}
.tube-cage:before{top:20%}.tube-cage:after{top:67%}.tube-cage i:nth-child(1){top:42%}.tube-cage i:nth-child(2){top:0;bottom:0;left:17%;right:auto;width:1px;height:auto}.tube-cage i:nth-child(3){top:0;bottom:0;right:17%;left:auto;width:1px;height:auto}
.tube{z-index:3!important;width:58px!important;height:145px!important;margin:0 auto 4px!important;filter:drop-shadow(0 4px 8px #000)!important}
.tube-glass{inset:5px 7px 28px!important;border-radius:19px 19px 10px 10px!important;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.17) 22%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.12) 74%,rgba(255,255,255,.025))!important;border:1px solid rgba(202,188,168,.28)!important;box-shadow:inset 0 0 16px #000,inset 5px 0 10px rgba(255,255,255,.04)!important}
.tube-grid{left:19px!important;right:19px!important;top:31px!important;bottom:47px!important;border-color:#7e4b2d!important;box-shadow:0 0 8px #dd6d21aa!important}
.tube-filament{left:25px!important;right:25px!important;bottom:42px!important;height:52px!important;background:linear-gradient(#7b210d,#ff8d2d,#ffd07c,#ff7623,#721c0a)!important;box-shadow:0 0 6px #ff6f21,0 0 18px #ff7a1f,0 0 32px #d24513!important}
.tube-glow{left:3px!important;right:3px!important;bottom:27px!important;height:92px!important;opacity:.9!important;background:radial-gradient(ellipse at 50% 78%,rgba(255,145,45,.7),rgba(237,76,12,.18) 37%,transparent 70%)!important;filter:blur(2px)!important}
.tube-base{bottom:8px!important;height:25px!important;border-radius:3px 3px 7px 7px!important;background:linear-gradient(#2d2b28,#090909 75%,#15120f)!important;border:1px solid #453b31!important;box-shadow:0 4px 6px #000!important}
.tube-label{font-size:6px!important;color:#d59a45!important}.tube-gr-track{height:50px!important}
.compressor-controls{grid-template-columns:repeat(5,1fr)!important;gap:7px!important;margin-top:9px!important}.control span{font-size:6.5px!important;color:#c4b9ad!important;font-weight:700!important}.control b{font-size:8px!important;color:#ecb758!important}
.knob{width:41px!important;height:41px!important;background:radial-gradient(circle at 36% 28%,#454039 0,#1d1b18 34%,#0b0b0b 72%)!important;border:1px solid #554838!important;box-shadow:inset 0 0 0 1px #080808,inset 3px 4px 8px #ffffff0a,0 3px 6px #000c!important}
.knob.large{width:48px!important;height:48px!important}.knob:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px dotted rgba(226,168,79,.28);pointer-events:none}.knob i{height:14px!important;top:3px!important;background:#f1b757!important;box-shadow:0 0 4px #c88027!important}
.small-vu{width:94px!important;height:70px!important;margin-top:12px!important;border-width:5px!important;background:radial-gradient(ellipse at 50% 40%,#f0c272,#c18b44)!important;box-shadow:inset 0 4px 12px #fff5,0 4px 8px #0008!important}.small-vu span{top:23px!important;font-size:14px!important}.small-vu div{height:54px!important;bottom:-20px!important}
.processor-rack{grid-template-columns:1.35fr .62fr .62fr .62fr 1fr!important;gap:5px!important;min-height:0!important}.processor{min-height:95px!important;padding:6px 8px!important}.module-title-row{margin-bottom:2px!important}.module-title-row .module-title,.section-readable{font-size:8px!important}.module-power{min-width:28px!important;padding:4px 6px!important;font-size:6px!important}.triple,.double{margin-top:5px!important;align-items:flex-start!important}.processor .control span{font-size:6px!important}.processor .control b{font-size:7.5px!important}.limiter .status-leds{font-size:6px!important;line-height:1.2!important}
.analyzer-rack{min-height:0!important;padding:5px!important;gap:5px!important;grid-template-columns:1.2fr .55fr 1.05fr!important}.spectrum-panel,.scope-panel,.analysis-summary{min-height:0!important;padding:6px 8px!important}.spectrum-panel canvas,.scope-panel canvas{height:clamp(72px,10.5vh,105px)!important;margin-top:3px!important}
.analysis-summary{display:flex!important;flex-direction:column!important;justify-content:flex-start!important}.engineer-label{font-size:7px!important}.engineer-title{font-size:14px!important;margin-top:2px!important}.analysis-summary #analysisCopy{font-size:8px!important;line-height:1.35!important;margin:6px 0!important}.need-badge{font-size:6px!important;padding:4px 6px!important}.analysis-details{gap:4px!important}.analysis-chip{padding:5px!important}.analysis-chip small{font-size:5.5px!important;margin-bottom:2px!important}.analysis-chip b{font-size:7.5px!important}
.assistant-rack{padding:7px 9px!important}.assistant-head{padding-bottom:5px!important;gap:10px!important}.assistant-head h3{margin:2px 0!important;font-size:13px!important}.assistant-head p{font-size:7px!important;line-height:1.3!important}.assistant-confidence{padding:5px 7px!important}.assistant-confidence small{font-size:5px!important}.assistant-confidence strong{font-size:13px!important}.assistant-grid{grid-template-columns:repeat(6,1fr)!important;gap:4px!important;margin-top:5px!important}.assistant-grid>div{padding:5px!important}.assistant-grid small{font-size:5px!important}.assistant-grid b{margin:2px 0!important;font-size:8px!important}.assistant-grid span{font-size:5.3px!important;line-height:1.2!important}.assistant-actions{margin-top:5px!important}.assistant-actions span{font-size:6px!important}#applyAssistantBtn{padding:7px 10px!important;font-size:7px!important}
.monitor-rack{grid-template-columns:.65fr 110px 1fr!important;min-height:50px!important;padding:6px 8px!important}.monitor-buttons{gap:4px!important;margin-top:4px!important}.monitor-mode{padding:5px 7px!important;font-size:6px!important}.monitor-left p,.translation-result p{margin-top:4px!important;font-size:6px!important}.translation-result strong{margin-top:2px!important;font-size:9px!important}
.phone-visual{width:48px!important;height:76px!important;border-width:2px!important;border-radius:10px!important}.phone-screen{top:9px!important;bottom:8px!important;left:3px!important;right:3px!important}.phone-wave{height:20px!important;margin-bottom:3px!important}.phone-wave i{width:2px!important}.phone-screen b{font-size:4px!important}.phone-screen small{font-size:3px!important}.phone-home{display:none!important}
.preset-rack{grid-template-columns:1fr 170px 220px!important;gap:6px!important;padding:6px 8px!important;min-height:48px!important}.preset-grid{gap:3px!important;margin-top:3px!important}.preset{padding:5px 7px!important;font-size:6px!important}.intensity-box label{font-size:6px!important}.final-actions{grid-template-columns:74px 1fr!important;gap:5px!important}.reset-master-bottom{font-size:6px!important}.export-master{height:36px!important;font-size:9px!important}.export-master small{font-size:5px!important}
button,a,.control span,.control b,.measure span,.measure small,.assistant-grid span,.analysis-summary p{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}button{font-family:var(--ui-font)!important}button:focus-visible{outline:2px solid var(--ui-amber)!important;outline-offset:2px!important}
@keyframes tubeBreathe{0%,100%{filter:blur(2px) brightness(.92)}50%{filter:blur(2px) brightness(1.08)}}.tube:not(.off) .tube-glow{animation:tubeBreathe 2.8s ease-in-out infinite}
@media(min-width:1500px) and (min-height:900px){
.workspace{padding-left:16px!important;padding-right:16px!important;gap:6px!important}
.topbar{height:48px!important;min-height:48px!important}
.workspace{height:calc(100vh - 48px)!important;min-height:calc(100vh - 48px)!important}
.real-vu{height:168px!important}.tube-bay{min-height:210px!important}.tube{height:155px!important}
.spectrum-panel canvas,.scope-panel canvas{height:112px!important}
.analysis-summary #analysisCopy{font-size:8.5px!important}.assistant-head h3{font-size:14px!important}
}
@media(min-width:1101px) and (max-height:780px){
.topbar{height:40px!important;min-height:40px!important}
.workspace{height:calc(100vh - 40px)!important;min-height:calc(100vh - 40px)!important;gap:4px!important;padding-top:4px!important}
.track-panel canvas{height:38px!important}.real-vu{height:128px!important}.needle,.needle-shadow{height:108px!important}.peak-tick{height:102px!important}
.tube-bay{min-height:170px!important}.tube-hardware{height:136px!important}.tube{height:125px!important}
.processor{min-height:82px!important}.spectrum-panel canvas,.scope-panel canvas{height:66px!important}
.assistant-head h3{font-size:12px!important}.assistant-grid>div{padding:4px!important}.monitor-rack,.preset-rack{min-height:42px!important}
}
@media(max-width:1100px){
body,#app{overflow:auto!important;height:auto!important}
.workspace{display:block!important;height:auto!important;min-height:0!important;overflow:visible!important}
.top-rack,.console-grid,.processor-rack,.analyzer-rack,.assistant-grid,.preset-rack,.monitor-rack{display:grid!important;grid-template-columns:1fr!important;margin-bottom:7px!important}
.tube-rack{grid-template-columns:110px 1fr!important}
}
/* ============================================================
v0.8.2 — RESPONSIVE READABLE UI
Readability wins over forcing the entire console into one viewport.
Desktop behaves like a premium responsive web application.
============================================================ */
:root{
--font-xs:clamp(10px,.66vw,12px);
--font-sm:clamp(11px,.75vw,13px);
--font-md:clamp(12px,.86vw,15px);
--font-lg:clamp(15px,1.08vw,19px);
--font-xl:clamp(19px,1.45vw,26px);
}
/* Let the app breathe and scroll naturally when a screen is not tall enough. */
html,body{
height:auto!important;
min-height:100%!important;
}
body{
overflow-y:auto!important;
overflow-x:hidden!important;
}
#app{
height:auto!important;
min-height:100vh!important;
overflow:visible!important;
}
.workspace{
display:block!important;
height:auto!important;
min-height:calc(100vh - 52px)!important;
overflow:visible!important;
padding:10px clamp(10px,1.1vw,20px) 18px!important;
}
.workspace>.rack,
.workspace>.top-rack,
.workspace>.console-grid,
.workspace>.processor-rack,
.workspace>.analyzer-rack,
.workspace>.assistant-rack,
.workspace>.monitor-rack,
.workspace>.reference-rack,
.workspace>.preset-rack{
margin-bottom:9px!important;
}
/* Header */
.topbar{
height:52px!important;
min-height:52px!important;
padding:0 clamp(12px,1.3vw,22px)!important;
}
.brand img{width:clamp(126px,8.8vw,158px)!important}
.brand span,.brand b{
font-size:var(--font-sm)!important;
}
.nav-actions button,.nav-actions a{
min-height:34px!important;
padding:8px 12px!important;
font-size:var(--font-xs)!important;
line-height:1!important;
}
/* Top waveform / transport */
.top-rack{
display:grid!important;
grid-template-columns:minmax(0,1.35fr) minmax(520px,.9fr)!important;
gap:8px!important;
padding:8px!important;
}
.track-panel,.measurement-panel{
padding:9px 10px!important;
}
.track-title-row{
font-size:var(--font-sm)!important;
}
.track-panel canvas{
height:64px!important;
margin:6px 0!important;
}
.transport{
min-height:36px!important;
gap:8px!important;
}
.transport button{
min-width:36px!important;
height:34px!important;
font-size:14px!important;
}
.transport span,.transport b{
font-size:var(--font-xs)!important;
}
.transport-status{
font-size:var(--font-xs)!important;
}
.ab-switch span{
padding:8px 11px!important;
font-size:var(--font-xs)!important;
font-weight:800!important;
}
.measurement-panel{
grid-template-columns:repeat(5,minmax(80px,1fr)) 92px!important;
}
.measure{
padding:10px 8px!important;
}
.measure span{
font-size:var(--font-xs)!important;
line-height:1.2!important;
}
.measure strong{
font-size:clamp(19px,1.25vw,24px)!important;
margin:6px 0 3px!important;
}
.measure small{
font-size:var(--font-xs)!important;
}
.vertical-meters{
height:86px!important;
}
.vertical-meters>div{height:76px!important}
.vertical-meters i{height:64px!important}
/* Main console */
.console-grid{
display:grid!important;
grid-template-columns:minmax(420px,.9fr) minmax(640px,1.1fr)!important;
gap:8px!important;
}
.master-meter-rack,.tube-rack{
padding:10px!important;
}
.rack-title,.module-title{
font-size:var(--font-sm)!important;
line-height:1.2!important;
}
.analog-sub{
font-size:var(--font-xs)!important;
margin-top:4px!important;
}
.real-vu{
height:clamp(190px,20vw,260px)!important;
margin-top:8px!important;
}
.vu-scale span{
font-size:clamp(15px,1.05vw,19px)!important;
}
.vu-brand{
font-size:clamp(13px,.9vw,17px)!important;
}
.vu-db{
font-size:var(--font-xs)!important;
}
.clip-lamp{
font-size:var(--font-xs)!important;
padding:6px 9px!important;
}
.dual-bars>div{
padding:8px!important;
}
.dual-bars span,.dual-bars b{
font-size:var(--font-xs)!important;
}
/* Tube / compressor */
.tube-rack{
grid-template-columns:150px minmax(0,1fr) 125px!important;
}
.tube-bay{
min-height:245px!important;
}
.tube-hardware{
height:198px!important;
}
.tube{
width:72px!important;
height:184px!important;
}
.transformer{
width:42px!important;
height:108px!important;
}
.tube-label{
font-size:var(--font-xs)!important;
}
.tube-gr-track{height:66px!important}
.compressor-controls{
gap:12px!important;
margin-top:18px!important;
}
.control span{
font-size:var(--font-xs)!important;
line-height:1.25!important;
}
.control b{
font-size:var(--font-sm)!important;
margin-top:4px!important;
}
.knob{
width:54px!important;
height:54px!important;
}
.knob.large{
width:62px!important;
height:62px!important;
}
.knob i{
height:19px!important;
transform-origin:50% 25px!important;
}
.small-vu{
width:112px!important;
height:86px!important;
}
.compressor-footer{
font-size:var(--font-xs)!important;
}
.power{
font-size:var(--font-xs)!important;
padding:7px 10px!important;
}
/* Processor strip */
.processor-rack{
display:grid!important;
grid-template-columns:1.35fr .72fr .72fr .72fr 1.12fr!important;
gap:8px!important;
}
.processor{
min-height:142px!important;
padding:10px 12px!important;
}
.module-power{
min-width:40px!important;
min-height:27px!important;
padding:6px 9px!important;
font-size:var(--font-xs)!important;
}
.processor .control span{
font-size:var(--font-xs)!important;
}
.processor .control b{
font-size:var(--font-sm)!important;
}
.triple,.double{
margin-top:14px!important;
}
.status-leds{
font-size:var(--font-xs)!important;
line-height:1.5!important;
}
/* Analyzer / Engineer Notes */
.analyzer-rack{
display:grid!important;
grid-template-columns:1.15fr .62fr 1.05fr!important;
gap:8px!important;
padding:8px!important;
}
.spectrum-panel,.scope-panel,.analysis-summary{
padding:10px 12px!important;
}
.spectrum-panel canvas,.scope-panel canvas{
height:clamp(120px,13vw,175px)!important;
}
.engineer-label{
font-size:var(--font-xs)!important;
}
.engineer-title{
font-size:var(--font-xl)!important;
margin-top:4px!important;
}
.need-badge{
font-size:var(--font-xs)!important;
padding:6px 9px!important;
}
.analysis-summary #analysisCopy{
font-size:var(--font-md)!important;
line-height:1.5!important;
margin:10px 0 12px!important;
}
.analysis-details{
gap:7px!important;
}
.analysis-chip{
padding:8px 9px!important;
}
.analysis-chip small{
font-size:var(--font-xs)!important;
}
.analysis-chip b{
font-size:var(--font-sm)!important;
margin-top:3px!important;
}
/* Assistant */
.assistant-rack{
padding:11px 13px!important;
}
.assistant-head{
padding-bottom:10px!important;
}
.assistant-head .module-title{
font-size:var(--font-sm)!important;
}
.assistant-head h3{
font-size:var(--font-xl)!important;
margin:5px 0!important;
}
.assistant-head p{
font-size:var(--font-md)!important;
line-height:1.45!important;
}
.assistant-confidence{
padding:8px 11px!important;
}
.assistant-confidence small{
font-size:var(--font-xs)!important;
}
.assistant-confidence strong{
font-size:var(--font-lg)!important;
}
.assistant-grid{
gap:8px!important;
margin-top:9px!important;
}
.assistant-grid>div{
padding:9px!important;
}
.assistant-grid small{
font-size:var(--font-xs)!important;
}
.assistant-grid b{
font-size:var(--font-md)!important;
margin:5px 0 3px!important;
}
.assistant-grid span{
font-size:var(--font-xs)!important;
line-height:1.35!important;
}
.assistant-actions{
margin-top:9px!important;
}
.assistant-actions span{
font-size:var(--font-xs)!important;
}
#applyAssistantBtn{
min-height:38px!important;
padding:9px 13px!important;
font-size:var(--font-xs)!important;
}
/* Monitor */
.monitor-rack{
grid-template-columns:.75fr 130px 1fr!important;
padding:9px 11px!important;
}
.monitor-buttons{
margin-top:7px!important;
}
.monitor-mode{
min-height:30px!important;
padding:7px 10px!important;
font-size:var(--font-xs)!important;
}
.monitor-left p,.translation-result p{
font-size:var(--font-xs)!important;
line-height:1.4!important;
}
.translation-result span{
font-size:var(--font-xs)!important;
}
.translation-result strong{
font-size:var(--font-md)!important;
}
.phone-visual{
width:68px!important;
height:112px!important;
}
/* Presets / Export */
.preset-rack{
display:grid!important;
grid-template-columns:1fr 220px 300px!important;
gap:10px!important;
padding:9px 11px!important;
}
.preset-grid{
margin-top:7px!important;
gap:5px!important;
}
.preset{
min-height:31px!important;
padding:7px 10px!important;
font-size:var(--font-xs)!important;
}
.intensity-box label{
font-size:var(--font-xs)!important;
}
.final-actions{
grid-template-columns:100px 1fr!important;
gap:8px!important;
}
.reset-master-bottom{
min-height:42px!important;
font-size:var(--font-xs)!important;
}
.export-master{
height:46px!important;
font-size:var(--font-md)!important;
}
.export-master small{
font-size:var(--font-xs)!important;
margin-top:2px!important;
}
/* General legibility */
button,a,input,label,p,small,span,b,strong{
text-rendering:optimizeLegibility!important;
}
button{
font-weight:750!important;
}
button:hover{
filter:brightness(1.08);
}
/* Large desktop/iMac: spacious, still usually visible without much scrolling. */
@media(min-width:1600px){
.workspace{
padding-left:20px!important;
padding-right:20px!important;
}
.console-grid{
grid-template-columns:.9fr 1.1fr!important;
}
}
/* Normal laptop: preserve readable text and allow controlled vertical scroll. */
@media(min-width:1101px) and (max-width:1450px){
:root{
--font-xs:10px;
--font-sm:11px;
--font-md:12px;
--font-lg:15px;
--font-xl:19px;
}
.top-rack{
grid-template-columns:minmax(0,1.25fr) minmax(440px,.95fr)!important;
}
.console-grid{
grid-template-columns:minmax(390px,.9fr) minmax(560px,1.1fr)!important;
}
.tube-rack{
grid-template-columns:130px 1fr 110px!important;
}
.real-vu{height:185px!important}
.tube-bay{min-height:215px!important}
.tube-hardware{height:170px!important}
.tube{height:158px!important;width:64px!important}
.processor{min-height:125px!important}
}
/* Tablet/mobile: stacked and comfortably readable. */
@media(max-width:1100px){
.workspace{
padding:8px!important;
}
.top-rack,.console-grid,.processor-rack,.analyzer-rack,.assistant-grid,.monitor-rack,.preset-rack,.reference-rack{
grid-template-columns:1fr!important;
}
.measurement-panel{
grid-template-columns:repeat(3,1fr)!important;
}
.tube-rack{
grid-template-columns:140px 1fr!important;
}
.assistant-grid{
grid-template-columns:repeat(2,1fr)!important;
}
.final-actions{
grid-template-columns:1fr 1fr!important;
}
}
/* v0.9 — PRESET FIRST + PHASE SAFE */
.master-meter-rack .preset-dock{
margin-top:12px;
padding:11px;
border:1px solid #4a3827;
border-radius:7px;
background:linear-gradient(145deg,#19140f,#0b0a09);
box-shadow:inset 0 1px #ffffff08,0 4px 14px #0008;
}
.preset-dock-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.preset-dock-head .module-title{font-size:clamp(12px,.85vw,15px)!important}
.beta-plan{
border:1px solid #5d4933;border-radius:999px;padding:5px 8px;
color:#d6a55a;background:#100d0a;font-size:10px;font-weight:800;letter-spacing:.05em
}
.preset-grid-featured{
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:7px!important;margin-top:9px!important
}
.preset-grid-featured .preset{
position:relative;min-height:42px!important;padding:9px 10px!important;
font-size:clamp(10px,.75vw,13px)!important;text-align:left!important
}
.preset-grid-featured .preset small{
float:right;margin-left:6px;font-size:8px;color:#7f7469
}
.preset-grid-featured .preset[data-tier="pro"] small{color:#d3a24e}
.preset-dock-footer{
display:grid;grid-template-columns:minmax(240px,.7fr) 1.3fr;
gap:12px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid #30271f
}
.intensity-box-inline{
display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;
color:#aaa095;font-size:11px;font-weight:800
}
.intensity-box-inline b{color:#e4ad55}
.intensity-box-inline input{width:100%}
.plan-note{color:#8e8378;font-size:10px;line-height:1.35}
.action-rack{
display:flex!important;justify-content:flex-end!important;padding:9px 11px!important
}
.action-rack .final-actions{width:min(430px,100%)!important}
/* Make the analog master panel tall enough for featured presets. */
.console-grid{align-items:stretch!important}
.master-meter-rack{display:flex!important;flex-direction:column!important}
.master-meter-rack .preset-dock{margin-top:auto}
/* Main chain status cue */
.compressor-footer span{font-size:11px!important;color:#9e9388!important}
.processor .control b,.control b{font-weight:850!important}
/* More obvious parameter movement */
.interactive-knob{cursor:ns-resize!important}
.interactive-knob:hover{
border-color:#b07b3d!important;
box-shadow:0 0 0 2px #d89b4230,0 4px 9px #000c!important
}
.module-power.active{box-shadow:0 0 9px #d78c2635,inset 0 0 9px #d78c2620!important}
/* On smaller laptops use two preset rows rather than shrinking text. */
@media(max-width:1450px){
.preset-grid-featured{grid-template-columns:repeat(4,1fr)!important}
.preset-dock-footer{grid-template-columns:1fr!important}
}
@media(max-width:1100px){
.preset-grid-featured{grid-template-columns:repeat(2,1fr)!important}
}
/* MASTER ENGINE 1.0 — WOLFFMAN SUITE DESIGN LANGUAGE */
:root{--site-ink:#17120f;--site-brown:#2a1a13;--site-cream:#ebe2d2;--site-gold:#c99645;--site-gold-bright:#e2af5a}
html,body{background:radial-gradient(circle at 72% 8%,rgba(201,150,69,.18),transparent 24%),linear-gradient(135deg,#eee5d6,#ded1be)!important;color:var(--site-ink)!important}.grain{opacity:.07!important}
.topbar{background:linear-gradient(115deg,#17110e,#2c1c14)!important;border-bottom:1px solid #654329!important;box-shadow:0 8px 26px rgba(45,27,17,.16)!important}
.suite-brand{display:flex!important;align-items:center!important;gap:10px!important;min-width:0}.suite-mark{width:38px!important;height:38px!important;object-fit:contain!important;flex:0 0 38px}
.suite-name{display:flex;flex-direction:column;justify-content:center;line-height:1;padding-right:12px;border-right:1px solid rgba(255,255,255,.18)}
.suite-name strong{font-family:"Poppins","Avenir Next","Helvetica Neue",Arial,sans-serif!important;color:#fff!important;font-size:14px!important;font-weight:800!important;letter-spacing:.015em!important}
.suite-name span{margin-top:5px;color:#c6b9ad!important;font-size:10px!important;font-weight:500!important;letter-spacing:.035em!important}
.suite-product{padding:6px 9px!important;border:1px solid #7c5630!important;border-radius:5px!important;background:#24160f!important;color:var(--site-gold-bright)!important;font-size:9px!important;font-weight:850!important;letter-spacing:.13em!important}
.nav-actions button,.nav-actions a{border-color:#5e4938!important;background:#211813!important;color:#eee4d8!important}.nav-actions button:hover,.nav-actions a:hover{border-color:#b47d3e!important;background:#312117!important}.nav-actions .active{color:#1a110b!important;background:linear-gradient(#e2b15d,#b87832)!important;border-color:#e0aa54!important}
.splash{background:radial-gradient(circle at 50% 42%,#3a271b,#17110d 45%,#080706 100%)!important}.splash-mark{width:82px!important;height:82px!important;object-fit:contain!important}.splash-suite{display:flex;align-items:center;gap:10px;margin-top:4px}.splash-suite strong{font-family:"Poppins","Avenir Next","Helvetica Neue",Arial,sans-serif;color:#fff;font-size:22px;font-weight:800}.splash-suite span{color:#d2c4b6;font-size:15px}.splash-suite b{padding:5px 8px;border:1px solid #916134;border-radius:4px;color:#e4ad55;font-size:10px;letter-spacing:.12em}
.launch{color:var(--site-ink)!important;background:radial-gradient(circle at 80% 20%,rgba(196,145,67,.2),transparent 28%),linear-gradient(135deg,#f2eadc,#dfd1bd)!important}.launch-copy .overline{color:#8d5b2e!important}.launch-copy h1{color:#17120f!important}.launch-copy h1 em{color:#9a6534!important}.launch-copy p{color:#6c6258!important}.upload-module{background:linear-gradient(145deg,#18120e,#2b1c14)!important;border-color:#67482f!important;color:#fff!important}
.workspace{background:radial-gradient(circle at 80% 0,rgba(202,152,76,.12),transparent 28%),linear-gradient(145deg,#ded1be,#efe7da)!important}.workspace .rack,.console-grid>.rack,.processor,.analysis-summary,.spectrum-panel,.scope-panel{border-color:#4a382a!important}.rack{box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 13px rgba(56,35,21,.20)!important}
.rack-title,.module-title,.engineer-label{color:#e2aa51!important}.control span,.analysis-summary p,.assistant-head p,.assistant-grid span,.monitor-left p,.translation-result p,.plan-note,.compressor-footer span{color:#c7bbb0!important}.control b,.analysis-chip b,.assistant-grid b,.translation-result strong{color:#f0b85d!important}
.preview-engine-status{display:inline-flex;align-items:center;min-height:27px;padding:5px 8px;border:1px solid #42372d;border-radius:4px;background:#0c0b0a;color:#9d9186;font-size:10px;font-weight:700;letter-spacing:.025em;white-space:nowrap}
.preset-dock{border-color:#6a4a2d!important;background:radial-gradient(circle at 80% 0,rgba(204,144,59,.1),transparent 30%),linear-gradient(145deg,#19130f,#0a0908)!important}.preset-grid-featured .preset{color:#e8ddd2!important}.preset-grid-featured .preset.selected{border-color:#df9e48!important;background:linear-gradient(145deg,#3b2818,#17100b)!important;box-shadow:0 0 0 1px #d8923e30,0 5px 13px #0007!important;color:#ffc972!important}
.real-vu{box-shadow:inset 0 0 0 2px #654a30,inset 0 9px 22px #fff7,inset 0 -25px 45px #6e442954,0 0 0 1px #251a12,0 10px 24px #0009!important}.tube-bay{background:radial-gradient(circle at 50% 47%,rgba(230,103,31,.1),transparent 34%),linear-gradient(180deg,#16120f,#050505 70%,#17120e)!important}.footer{color:#6d6257!important;border-color:#b9aa96!important}
@media(max-width:900px){.suite-name span{display:none}.suite-name{padding-right:8px}.suite-product{font-size:8px!important}.preview-engine-status{display:none}}
/* ==============================================================
WOLFFMAN AUDIO LAB v1.1
Exact Wolffman website design-system alignment
Website source system:
--bg #090909
--panel #111
--text #f5f1e8
--muted #aaa49a
--gold #c7a35a
--light #f0ede5
--font Inter
============================================================== */
:root{
--wf-bg:#090909;
--wf-panel:#111111;
--wf-panel-soft:#171717;
--wf-text:#f5f1e8;
--wf-muted:#aaa49a;
--wf-gold:#c7a35a;
--wf-line:rgba(255,255,255,.12);
--wf-light:#f0ede5;
--wf-light-text:#101010;
--wf-light-muted:#6f6a63;
--wf-radius:18px;
--wf-radius-lg:22px;
--wf-font:Inter,Arial,sans-serif;
}
/* Global typography now matches wolffman.nl rather than the logo font. */
html,body,
button,input,select,textarea,
#app,.workspace,.launch,.rack,
.control,.measure,.analysis-summary,.assistant-rack,
.preset,.monitor-mode,.nav-actions{
font-family:var(--wf-font)!important;
}
body{
margin:0!important;
background:var(--wf-light)!important;
color:var(--wf-light-text)!important;
line-height:1.55!important;
}
.grain{opacity:.035!important}
/* Header mirrors the site's fixed translucent black header language. */
.topbar{
min-height:72px!important;
height:72px!important;
padding:0 clamp(16px,2vw,34px)!important;
background:linear-gradient(#080808f2,#080808dc)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
border-bottom:1px solid var(--wf-line)!important;
box-shadow:none!important;
}
.suite-brand{gap:13px!important}
.suite-mark{
width:40px!important;
height:40px!important;
flex-basis:40px!important;
}
.suite-name{
padding-right:15px!important;
border-right:1px solid var(--wf-line)!important;
}
.suite-name strong{
font-family:var(--wf-font)!important;
font-size:15px!important;
font-weight:900!important;
letter-spacing:-.015em!important;
color:var(--wf-text)!important;
}
.suite-name span{
margin-top:3px!important;
font-size:11px!important;
font-weight:600!important;
letter-spacing:.02em!important;
color:var(--wf-muted)!important;
}
.suite-product{
min-height:32px!important;
display:inline-flex!important;
align-items:center!important;
border:1px solid var(--wf-gold)!important;
border-radius:999px!important;
padding:0 13px!important;
background:transparent!important;
color:var(--wf-gold)!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.09em!important;
}
.nav-actions{
gap:8px!important;
}
.nav-actions button,.nav-actions a{
min-height:38px!important;
padding:0 15px!important;
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
background:transparent!important;
color:var(--wf-text)!important;
font-size:10px!important;
font-weight:800!important;
letter-spacing:.065em!important;
text-transform:uppercase!important;
}
.nav-actions button:hover,.nav-actions a:hover{
color:var(--wf-gold)!important;
border-color:var(--wf-gold)!important;
transform:translateY(-1px);
}
.nav-actions .active{
background:var(--wf-gold)!important;
border-color:var(--wf-gold)!important;
color:#0b0b0b!important;
}
/* Launch / upload screen follows a website light section. */
.launch{
min-height:calc(100vh - 72px)!important;
background:var(--wf-light)!important;
color:var(--wf-light-text)!important;
}
.site-eyebrow,.launch-copy .overline{
color:#8d6b32!important;
text-transform:uppercase!important;
font-size:12px!important;
font-weight:800!important;
letter-spacing:.2em!important;
}
.launch-copy h1{
color:var(--wf-light-text)!important;
font-size:clamp(52px,7vw,104px)!important;
line-height:.88!important;
letter-spacing:-.055em!important;
}
.launch-copy h1 em{color:#8e6334!important}
.launch-copy p{
max-width:650px!important;
color:var(--wf-light-muted)!important;
font-size:clamp(16px,1.35vw,20px)!important;
}
.upload-module{
border:1px solid var(--wf-line)!important;
border-radius:var(--wf-radius-lg)!important;
background:var(--wf-bg)!important;
color:var(--wf-text)!important;
box-shadow:0 24px 70px #0003!important;
}
.dropzone{
border-radius:16px!important;
}
.dropzone h2{font-size:clamp(21px,1.7vw,29px)!important}
.dropzone p,.dropzone small{color:var(--wf-muted)!important}
/* Application page = light Wolffman section containing dark studio modules. */
.workspace{
background:var(--wf-light)!important;
padding:14px clamp(12px,1.7vw,28px) 24px!important;
}
.workspace>.rack,
.workspace>.top-rack,
.workspace>.console-grid,
.workspace>.processor-rack,
.workspace>.analyzer-rack,
.workspace>.assistant-rack,
.workspace>.monitor-rack,
.workspace>.action-rack,
.workspace>.reference-rack{
margin-bottom:14px!important;
}
/* The site uses rounded dark cards; Audio Lab now uses exactly that language. */
.rack,
.top-rack,
.master-meter-rack,
.tube-rack,
.processor,
.spectrum-panel,
.scope-panel,
.analysis-summary,
.assistant-rack,
.monitor-rack,
.action-rack,
.reference-rack{
border:1px solid var(--wf-line)!important;
border-radius:var(--wf-radius)!important;
background:var(--wf-panel)!important;
color:var(--wf-text)!important;
box-shadow:none!important;
}
.top-rack{padding:10px!important}
.track-panel,.measurement-panel{
border-radius:14px!important;
background:#0d0d0d!important;
}
.console-grid,.processor-rack,.analyzer-rack{
gap:12px!important;
}
/* Strong site typographic hierarchy. */
.rack-title,.module-title,.engineer-label{
color:var(--wf-gold)!important;
text-transform:uppercase!important;
font-size:11px!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.analog-sub{
color:var(--wf-muted)!important;
font-size:9px!important;
font-weight:700!important;
letter-spacing:.08em!important;
}
.control span,.measure span,.measure small,
.analysis-chip small,.assistant-grid small,
.monitor-left p,.translation-result p,.plan-note,
.compressor-footer span{
color:var(--wf-muted)!important;
}
.control b,.analysis-chip b,.assistant-grid b,
.translation-result strong,.measure strong{
color:var(--wf-text)!important;
}
/* Transport = more like site buttons, while retaining studio clarity. */
.transport button{
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
background:#151515!important;
color:var(--wf-text)!important;
}
.transport button:hover{
border-color:var(--wf-gold)!important;
color:var(--wf-gold)!important;
}
.transport-status{
border-radius:999px!important;
padding:5px 9px!important;
background:#151515!important;
color:var(--wf-muted)!important;
}
.transport-status.playing{
color:#0d0d0d!important;
background:var(--wf-gold)!important;
}
.ab-switch{
border-radius:999px!important;
overflow:hidden!important;
border:1px solid var(--wf-line)!important;
}
.ab-switch span{
min-height:31px!important;
display:inline-flex!important;
align-items:center!important;
padding:0 12px!important;
color:var(--wf-muted)!important;
background:#0d0d0d!important;
}
.ab-switch span.active{
background:var(--wf-gold)!important;
color:#0c0c0c!important;
}
.preview-engine-status{
min-height:31px!important;
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
background:#151515!important;
color:var(--wf-muted)!important;
font-size:9px!important;
}
/* Measurements become clean like website stat blocks. */
.measurement-panel{
border:1px solid var(--wf-line)!important;
}
.measure{
border-right:1px solid var(--wf-line)!important;
}
.measure span{
text-transform:uppercase!important;
letter-spacing:.08em!important;
font-weight:800!important;
}
.measure strong{
font-size:clamp(20px,1.4vw,26px)!important;
letter-spacing:-.025em!important;
}
/* Keep analog hardware as the visual hero, but inside cleaner cards. */
.real-vu{
border-radius:16px!important;
border-color:#151515!important;
}
.tube-bay{
border-radius:14px!important;
}
.knob{
border-color:#4b453d!important;
}
.module-power,.power{
min-height:29px!important;
border:1px solid var(--wf-gold)!important;
border-radius:999px!important;
color:var(--wf-gold)!important;
background:transparent!important;
}
.module-power.active,.power.active{
color:#0b0b0b!important;
background:var(--wf-gold)!important;
box-shadow:none!important;
}
/* Presets now exactly echo website pill actions / cards. */
.preset-dock{
border:1px solid var(--wf-line)!important;
border-radius:14px!important;
background:#0c0c0c!important;
}
.preset-grid-featured .preset{
min-height:42px!important;
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
background:#151515!important;
color:var(--wf-text)!important;
text-align:center!important;
font-size:10px!important;
font-weight:850!important;
letter-spacing:.045em!important;
}
.preset-grid-featured .preset:hover{
border-color:var(--wf-gold)!important;
color:var(--wf-gold)!important;
}
.preset-grid-featured .preset.selected{
background:var(--wf-gold)!important;
border-color:var(--wf-gold)!important;
color:#0b0b0b!important;
box-shadow:none!important;
}
.preset-grid-featured .preset.selected small{color:#30220f!important}
.beta-plan{
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
color:var(--wf-muted)!important;
background:#151515!important;
}
/* Engineer notes becomes less cramped and adopts site prose treatment. */
.engineer-title{
color:var(--wf-text)!important;
font-size:clamp(22px,2vw,34px)!important;
line-height:1!important;
letter-spacing:-.035em!important;
}
.analysis-summary #analysisCopy{
color:var(--wf-muted)!important;
font-size:clamp(12px,.85vw,15px)!important;
line-height:1.55!important;
}
.need-badge{
border-radius:999px!important;
border-color:var(--wf-gold)!important;
color:var(--wf-gold)!important;
}
.analysis-chip{
border-radius:12px!important;
border-color:var(--wf-line)!important;
}
/* Master Assistant uses same content-card hierarchy as site. */
.assistant-head h3{
color:var(--wf-text)!important;
font-size:clamp(24px,2.2vw,38px)!important;
line-height:.98!important;
letter-spacing:-.04em!important;
}
.assistant-head p{
max-width:800px!important;
color:var(--wf-muted)!important;
}
.assistant-confidence,.assistant-grid>div{
border:1px solid var(--wf-line)!important;
border-radius:12px!important;
background:#0d0d0d!important;
}
.assistant-confidence strong{color:var(--wf-gold)!important}
#applyAssistantBtn,.export-master{
min-height:46px!important;
border:1px solid var(--wf-gold)!important;
border-radius:999px!important;
background:var(--wf-gold)!important;
color:#0b0b0b!important;
font-weight:900!important;
text-transform:uppercase!important;
letter-spacing:.065em!important;
}
#applyAssistantBtn:hover,.export-master:hover{
filter:brightness(1.12)!important;
transform:translateY(-1px)!important;
}
.reset-master-bottom,.monitor-mode{
border:1px solid var(--wf-line)!important;
border-radius:999px!important;
background:transparent!important;
color:var(--wf-text)!important;
}
.monitor-mode.active{
border-color:var(--wf-gold)!important;
color:#0b0b0b!important;
background:var(--wf-gold)!important;
}
/* Range tracks use the exact brand accent. */
input[type="range"]{accent-color:var(--wf-gold)!important}
/* Footer mirrors site's subtle separator. */
.footer{
padding:18px clamp(12px,1.7vw,28px)!important;
border-top:1px solid rgba(16,16,16,.12)!important;
color:#756f67!important;
background:var(--wf-light)!important;
}
/* Responsive behavior follows website rather than shrinking everything. */
@media(max-width:1280px){
.topbar{min-height:64px!important;height:64px!important}
.workspace{padding-top:10px!important}
.top-rack{grid-template-columns:1fr!important}
.measurement-panel{grid-template-columns:repeat(3,1fr)!important}
.console-grid{grid-template-columns:1fr!important}
.processor-rack{grid-template-columns:repeat(2,1fr)!important}
.processor-rack .tone,.processor-rack .limiter{grid-column:span 2}
.analyzer-rack{grid-template-columns:1fr 1fr!important}
.analysis-summary{grid-column:1/-1}
}
@media(max-width:760px){
.topbar{
height:auto!important;
min-height:64px!important;
flex-wrap:wrap!important;
padding:10px 14px!important;
}
.nav-actions{
width:100%!important;
overflow-x:auto!important;
padding-bottom:2px!important;
}
.nav-actions button,.nav-actions a{flex:0 0 auto}
.suite-name span{display:block!important}
.measurement-panel{grid-template-columns:repeat(2,1fr)!important}
.processor-rack,.analyzer-rack{grid-template-columns:1fr!important}
.processor-rack .tone,.processor-rack .limiter,.analysis-summary{grid-column:auto}
.assistant-grid{grid-template-columns:1fr!important}
.preset-grid-featured{grid-template-columns:repeat(2,1fr)!important}
.preset-dock-footer{grid-template-columns:1fr!important}
.action-rack .final-actions{width:100%!important}
}
/* v1.2 — B preview state should feel instant rather than like a render job. */
.preview-engine-status{
transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.ab-b.active ~ .preview-engine-status{
color:var(--wf-gold)!important;
border-color:rgba(199,163,90,.55)!important;
}
/* v1.2.1 — preserve the user's A/B selection while B starts */
.ab-switch .ab-b.active{
background:var(--wf-gold)!important;
color:#0b0b0b!important;
}
/* v1.2.2 — distinguish selected B from B audio actually running */
.ab-switch .ab-b.active{
position:relative;
}
.ab-switch .ab-b.active.audible:after{
content:"";
width:6px;height:6px;
margin-left:6px;
border-radius:50%;
background:#7ed46f;
box-shadow:0 0 7px #7ed46f;
}
.preview-engine-status{
font-weight:800!important;
}
/* v1.2.3 — controls repaired + Analog / Digital master meter */
.meter-mode-toggle{
display:inline-flex;
padding:3px;
border:1px solid var(--wf-line);
border-radius:999px;
background:#090909;
}
.meter-mode-toggle button{
min-height:29px;
padding:0 11px;
border:0;
border-radius:999px;
background:transparent;
color:var(--wf-muted);
font-size:9px;
font-weight:900;
letter-spacing:.07em;
cursor:pointer;
}
.meter-mode-toggle button.active{
background:var(--wf-gold);
color:#080808;
}
.digital-meter{
min-height:310px;
margin-top:12px;
padding:16px;
border:1px solid #2d333a;
border-radius:16px;
background:
radial-gradient(circle at 50% -20%,rgba(52,164,255,.16),transparent 35%),
linear-gradient(145deg,#05080b,#0a1015 52%,#030506);
box-shadow:
inset 0 0 0 1px rgba(110,200,255,.035),
inset 0 -30px 70px #0008,
0 12px 30px #0009;
color:#eaf7ff;
}
.digital-top{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.digital-top>div{
padding:10px 12px;
border:1px solid #1c313e;
border-radius:10px;
background:linear-gradient(145deg,#0b151b,#061016);
}
.digital-top small,.digital-footer small{
display:block;
color:#6693a9;
font-size:8px;
font-weight:800;
letter-spacing:.08em;
}
.digital-top strong{
display:inline-block;
margin-top:3px;
color:#a8eaff;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
font-size:clamp(22px,2vw,34px);
line-height:1;
text-shadow:0 0 12px #44c9ff55;
}
.digital-top span{
margin-left:5px;
color:#527789;
font-size:8px;
}
.digital-stereo{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
height:172px;
margin-top:12px;
}
.digital-channel{
display:grid;
grid-template-columns:24px 1fr 48px;
gap:8px;
align-items:center;
}
.digital-channel>b{
color:#72ddff;
font-size:18px;
text-shadow:0 0 10px #42cfff77;
}
.digital-track{
position:relative;
height:100%;
overflow:hidden;
border:1px solid #1a3440;
border-radius:7px;
background:
repeating-linear-gradient(to top,transparent 0 9px,#ffffff09 9px 10px),
#020507;
}
.digital-track i{
position:absolute;
left:3px;right:3px;bottom:3px;
height:0;
border-radius:4px;
background:linear-gradient(to top,#31dcff 0 68%,#87f49d 68% 82%,#ffd350 82% 93%,#ff5f5f 93%);
box-shadow:0 0 12px #27cfff77;
transition:height .045s linear;
}
.digital-track em{
position:absolute;
left:3px;right:3px;top:8%;
height:1px;
background:#fff8;
}
.digital-channel>span{
color:#92b3c1;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
font-size:11px;
text-align:right;
}
.digital-footer{
display:grid;
grid-template-columns:1fr 1fr 1.4fr auto;
gap:8px;
margin-top:12px;
}
.digital-footer>div{
padding:8px 10px;
border:1px solid #162c37;
border-radius:9px;
background:#071015;
}
.digital-footer b{
display:block;
margin-top:3px;
color:#8ddfff;
font-size:11px;
}
.digital-clip{
display:flex!important;
align-items:center;
justify-content:center;
min-width:68px;
color:#77e896!important;
font-weight:900;
letter-spacing:.08em;
}
.digital-clip.hot{
color:#fff!important;
background:#a92f2f!important;
border-color:#ed6060!important;
box-shadow:0 0 15px #f44a4a66;
}
/* Explicitly ensure the creative controls are never blocked by decorative UI. */
.interactive-knob,.preset,.module-power,.monitor-mode,
#intensity,#applyAssistantBtn{
pointer-events:auto!important;
position:relative;
z-index:2;
}
.interactive-knob{user-select:none!important;-webkit-user-select:none!important}
@media(max-width:760px){
.digital-top{grid-template-columns:1fr 1fr}
.digital-footer{grid-template-columns:1fr 1fr}
.digital-stereo{height:140px}
}
.engine-core-badge{margin-left:4px;color:var(--wf-muted);font-size:8px;font-weight:800;letter-spacing:.08em}
/* v2.0.1 — stronger tactile feedback without returning to clipping */
.range-status{
display:inline-flex;
min-height:31px;
align-items:center;
padding:0 9px;
border:1px solid rgba(199,163,90,.28);
border-radius:999px;
background:#111;
color:#c7a35a;
font-size:9px;
font-weight:800;
letter-spacing:.055em;
}
.real-vu .needle{
transition:transform .045s cubic-bezier(.2,.75,.3,1)!important;
}
/* v2.0.2 — wide-range mastering / instant translation */
.monitor-mode.active{
box-shadow:0 0 0 2px rgba(199,163,90,.12)!important;
}
.translation-result strong{
min-width:90px;
}
/* v2.1 — realtime waveform playhead + scrub */
.waveform-stage{position:relative;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#090909;cursor:crosshair;touch-action:none}
.waveform-stage #waveCanvas{display:block;width:100%!important;height:76px!important;margin:0!important;position:relative;z-index:1}
.waveform-played{position:absolute;left:0;top:0;bottom:0;width:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(199,163,90,.16),rgba(199,163,90,.025));mix-blend-mode:screen}
.waveform-playhead{position:absolute;left:0;top:0;bottom:0;width:2px;z-index:4;pointer-events:none;background:linear-gradient(#ffe6a8,#d09b38);box-shadow:0 0 8px #e0ab4bc4,0 0 19px #e0ab4b3d;transform:translateX(-1px)}
.waveform-playhead:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #f0bf68}
.waveform-playhead span{position:absolute;top:5px;left:8px;white-space:nowrap;padding:3px 6px;border:1px solid rgba(199,163,90,.35);border-radius:999px;background:#090909e8;color:#f0c36d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:9px;font-weight:800}
.waveform-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:5px 0 2px}
.waveform-toolbar>span{margin-right:auto;color:var(--wf-muted);font-size:8px;font-weight:800;letter-spacing:.08em}
.waveform-toolbar button{min-width:31px;min-height:26px;border:1px solid var(--wf-line);border-radius:999px;background:#111;color:var(--wf-text);font-size:9px;font-weight:900;cursor:pointer}
.waveform-toolbar button:hover{border-color:var(--wf-gold);color:var(--wf-gold)}
.range-status{color:#e2ae54!important;border-color:rgba(226,174,84,.45)!important}
/* v2.1.1 — Tube compressor defaults OFF + dedicated compressor presets */
.compressor-preset-bank{
margin-top:18px;
padding:13px;
border:1px solid var(--wf-line);
border-radius:14px;
background:linear-gradient(145deg,#0c0c0c,#111);
}
.compressor-preset-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:10px;
}
.compressor-preset-head small{
display:block;
margin-top:4px;
color:var(--wf-muted);
font-size:10px;
line-height:1.35;
}
#compressorPresetOff{
min-width:54px;
min-height:31px;
border:1px solid var(--wf-line);
border-radius:999px;
background:#090909;
color:var(--wf-muted);
font-size:9px;
font-weight:900;
letter-spacing:.08em;
cursor:pointer;
}
#compressorPresetOff:hover{
color:#ffb0a1;
border-color:#9d493c;
}
.compressor-preset-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.compressor-preset{
min-height:54px;
padding:9px 11px;
border:1px solid var(--wf-line);
border-radius:12px;
background:#151515;
color:var(--wf-text);
text-align:left;
cursor:pointer;
}
.compressor-preset b{
display:block;
color:var(--wf-text);
font-size:10px;
font-weight:850;
}
.compressor-preset small{
display:block;
margin-top:3px;
color:var(--wf-muted);
font-size:9px;
}
.compressor-preset:hover{
border-color:var(--wf-gold);
transform:translateY(-1px);
}
.compressor-preset.selected{
border-color:var(--wf-gold);
background:linear-gradient(145deg,#3b2a17,#19130d);
box-shadow:0 0 0 1px rgba(199,163,90,.12);
}
.compressor-preset.selected b{
color:#f0bf67;
}
@media(max-width:1050px){
.compressor-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
.compressor-preset-grid{grid-template-columns:1fr}
}
/* v2.1.2 — clean Reference UI */
.reference-help{
margin:8px 0 0;
color:var(--wf-muted);
font-size:11px;
line-height:1.45;
max-width:760px;
}
.reference-rack:empty{
display:none!important;
}
/* Prevent old orphaned helper remnants from appearing outside their module. */
.workspace > p.reference-help,
.workspace > .reference-copy-orphan{
display:none!important;
}
html.wf-locked,html.wf-locked body{overflow:hidden!important}
#wfPrivateGate{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 72% 18%,rgba(199,163,90,.18),transparent 28%),linear-gradient(135deg,#090909,#21150f 55%,#090909);color:#f5f1e8;font-family:Inter,Arial,sans-serif}
#wfPrivateGate[hidden]{display:none!important}
.wf-gate-card{width:min(470px,100%);box-sizing:border-box;padding:36px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#111;box-shadow:0 30px 100px #0009}
.wf-gate-kicker{color:#c7a35a;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.wf-gate-card h1{margin:11px 0 8px;font-size:clamp(32px,5vw,48px);line-height:.95;letter-spacing:-.05em}
.wf-gate-card p{margin:0 0 22px;color:#aaa49a;font-size:14px;line-height:1.55}
.wf-gate-card label{display:block;margin-bottom:7px;color:#d7cec1;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.wf-gate-row{display:grid;grid-template-columns:1fr auto;gap:8px}
#wfBetaPassword{height:48px;min-width:0;box-sizing:border-box;padding:0 16px;border:1px solid #ffffff24;border-radius:999px;outline:0;background:#080808;color:#fff;font:inherit}
#wfBetaPassword:focus{border-color:#c7a35a;box-shadow:0 0 0 3px #c7a35a22}
#wfBetaEnter{min-height:48px;padding:0 21px;border:1px solid #c7a35a;border-radius:999px;background:#c7a35a;color:#080808;cursor:pointer;font:900 10px/1 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#wfGateError{min-height:19px;margin-top:10px;color:#ff9385;font-size:12px}
.wf-gate-note{margin-top:17px;padding-top:15px;border-top:1px solid #ffffff17;color:#756f67;font-size:10px}
/* v2.1.6 export/reference final */
.reference-rack{padding:14px!important}
.reference-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.reference-head strong{display:block;margin-top:4px;color:var(--wf-text);font-size:15px}
.reference-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:12px}
.reference-stats>div{padding:9px;border:1px solid var(--wf-line);border-radius:11px;background:#0d0d0d}
.reference-stats small{display:block;color:var(--wf-muted);font-size:8px;font-weight:800}
.reference-stats b{display:block;margin-top:4px;color:var(--wf-text);font-size:11px}
.reference-advice{color:var(--wf-muted);font-size:11px;line-height:1.5}
#masterBtn span{white-space:nowrap}
@media(max-width:900px){.reference-stats{grid-template-columns:repeat(3,1fr)}}