html, body {height: 100%;margin: 0;padding: 0;overflow: hidden;}#mastering-page {--bg: #b5b3af;--panel: #b9b7b3;--panel-raised: #d4d2ce;--panel-inset: #a6a4a0;--screen-bg: #1c1a18;--screen-label: rgba(148,158,148,0.7);--text: #1c1a18;--text-2: #484442;--text-3: #8a8784;--accent: #1ec8c2;--accent-hi: #40e0da;--hi: rgba(255,255,255,0.65);--sh: rgba(0,0,0,0.2);--sh-deep: rgba(0,0,0,0.35);--rule: rgba(0,0,0,0.1);--led-off: #6e6c6a;--led-on: #1ec8c2;--led-glow: rgba(30,200,194,0.6);--led-red: #e02828;--led-red-glow: rgba(224,40,40,0.6);--knob-face: radial-gradient(circle at 36% 32%, #444240, #0e0c0a 70%);--knob-ring: #c4c2be;}#mastering-page {position: fixed;inset: 0;background: var(--bg);display: flex;flex-direction: column;overflow: hidden;font-family: 'DM Mono', monospace;}.mk-hdr {display: flex;align-items: center;height: 2.6rem;flex-shrink: 0;padding: 0 0.9rem;gap: 0.85rem;background: var(--panel);border-bottom: 1px solid rgba(0,0,0,0.12);box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(0,0,0,0.18);}.mk-logo {font-size: 0.7rem;font-weight: 400;letter-spacing: 0.24em;color: var(--text);flex-shrink: 0;text-transform: uppercase;}.mk-logo-sub {color: var(--text-3);margin-left: 0.2em;}.mk-track {flex: 1;text-align: center;font-size: 0.63rem;letter-spacing: 0.1em;color: var(--text-2);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.mk-hdr-end {display: flex;align-items: center;gap: 0.7rem;flex-shrink: 0;}.mk-gr-strip {display: flex;align-items: center;gap: 0.4rem;}.mk-lbl {font-size: 0.54rem;letter-spacing: 0.2em;color: var(--text-3);text-transform: uppercase;}.mk-gr-track {width: 5rem;height: 5px;background: var(--panel-inset);border-radius: 2px;overflow: hidden;box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.5);}.mk-gr-fill {height: 100%;width: 0%;background: linear-gradient(90deg, var(--accent), var(--accent-hi));border-radius: 2px;transition: width 0.05s linear;}.mk-gr-val {font-size: 0.6rem;color: var(--accent);min-width: 2.4rem;text-align: right;letter-spacing: 0.02em;}.mk-ico-btn {width: 1.9rem;height: 1.9rem;border-radius: 0.38rem;border: none;cursor: pointer;flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: radial-gradient(ellipse at 44% 38%, #e0ddd8, var(--panel-raised));color: var(--text-3);box-shadow: -4px -4px 8px rgba(255,255,255,0.65), 4px 5px 10px rgba(0,0,0,0.25);transition: box-shadow 0.08s ease, color 0.12s;}.mk-ico-btn:hover {color: var(--accent);}.mk-ico-btn:active {box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(255,255,255,0.45), 1px 2px 4px rgba(0,0,0,0.18);}.mk-ico-btn svg {width: 0.95rem;height: 0.95rem;pointer-events: none;}.mk-face {flex: 1;min-height: 0;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 0.65rem;padding: 0.8rem 0.8rem 1rem;overflow: visible;}.mk-col {display: flex;flex-direction: column;gap: 0.55rem;min-height: 0;overflow: visible;}.mk-col--left .mk-card {flex: 1;}.mk-col--mid {display: grid;grid-template-rows: 1fr 1fr 1fr;gap: 0.55rem;}.mk-col--mid > * {min-height: 0;}.mk-col--right {display: grid;grid-template-rows: 1fr 1fr;gap: 0.55rem;}.mk-col--right > * {min-height: 0;}.mk-card {background: var(--panel);border-radius: 1rem;border: 1px solid rgba(255,255,255,0.2);box-shadow: -4px -4px 9px rgba(255,255,255,0.52), 4px 5px 11px rgba(0,0,0,0.2);display: flex;flex-direction: column;padding: 0.62rem 0.8rem 0.9rem;overflow: visible;position: relative;}.mk-card::before {content: attr(data-label);display: block;font-family: 'DM Mono', monospace;font-size: 0.56rem;font-weight: 300;letter-spacing: 0.3em;color: var(--text-3);text-transform: uppercase;margin-bottom: 0.58rem;flex-shrink: 0;}.mk-screen {background: var(--screen-bg);border-radius: 0.55rem;overflow: hidden;border: 1px solid rgba(0,0,0,0.3);box-shadow: inset 0 3px 9px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.3);display: flex;flex-direction: column;min-height: 0;}.mk-screen canvas {display: block;width: 100%;height: 100%;flex: 1;min-height: 0;}.mk-upload {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;gap: 0.4rem;padding: 1rem;transition: background 0.15s;}.mk-upload:hover, .mk-upload.drag-over {background: rgba(30,200,194,0.05);}.mk-upload-icon {width: 2rem;height: 2rem;color: var(--screen-label);opacity: 0.5;}.mk-upload-txt {margin: 0;font-size: 0.63rem;letter-spacing: 0.14em;color: rgba(148,158,148,0.6);text-transform: uppercase;}.mk-upload-sub {margin: 0;font-size: 0.54rem;letter-spacing: 0.1em;color: rgba(120,128,120,0.45);}.mk-waveform-wrap {flex: 1;min-height: 0;position: relative;overflow: hidden;}.mk-waveform {display: block;width: 100%;height: 100%;}.mk-playhead {position: absolute;top: 0;bottom: 0;width: 1px;left: 0%;background: var(--accent);opacity: 0.9;pointer-events: none;display: none;box-shadow: 0 0 5px var(--led-glow);}.mk-playhead.visible {display: block;}.mk-transport {display: flex;align-items: center;gap: 0.45rem;padding: 0.4rem 0.55rem;border-top: 1px solid rgba(0,0,0,0.12);flex-shrink: 0;background: rgba(0,0,0,0.08);}.mk-btn {flex-shrink: 0;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;position: relative;}.mk-btn-sq {width: 2.1rem;height: 2.1rem;border-radius: 0.42rem;background: radial-gradient(ellipse at 44% 38%, #e0ddd8 0%, var(--panel-raised) 100%);color: var(--text-3);border: none;box-shadow: -5px -5px 11px rgba(255,255,255,0.65), 5px 6px 13px rgba(0,0,0,0.28);transition: box-shadow 0.07s ease, color 0.1s;}.mk-btn-sq svg {width: 0.85rem;height: 0.85rem;pointer-events: none;}.mk-btn-sq:hover {color: var(--accent);}.mk-btn-sq:active {box-shadow: inset 3px 3px 6px rgba(0,0,0,0.22), inset -2px -2px 4px rgba(255,255,255,0.5), 2px 3px 6px rgba(0,0,0,0.2), -1px -1px 3px rgba(255,255,255,0.4);}#mkPlay::before {content: '';position: absolute;top: 0.26rem;right: 0.26rem;width: 0.25rem;height: 0.25rem;border-radius: 50%;background: var(--led-off);transition: background 0.15s, box-shadow 0.15s;}#mkPlay.playing::before {background: var(--led-red);box-shadow: 0 0 5px var(--led-red-glow), 0 0 10px var(--led-red-glow);}#mkPlay.playing {color: var(--led-red);box-shadow: inset 3px 3px 6px rgba(0,0,0,0.22), inset -2px -2px 4px rgba(255,255,255,0.5), 2px 3px 5px rgba(0,0,0,0.18);}#mkLoop.active {color: var(--led-on);}#mkLoop.active::after {content: '';position: absolute;bottom: 0.22rem;left: 50%;transform: translateX(-50%);width: 0.22rem;height: 0.22rem;border-radius: 50%;background: var(--led-on);box-shadow: 0 0 4px var(--led-glow), 0 0 8px var(--led-glow);}.mk-seek {flex: 1;height: 0.38rem;border-radius: 0.2rem;background: var(--panel-inset);box-shadow: inset 2px 2px 5px rgba(0,0,0,0.28), inset -1px -1px 3px rgba(255,255,255,0.45);cursor: pointer;position: relative;user-select: none;}.mk-seek-fill {position: absolute;left: 0;top: 0;bottom: 0;width: 0%;background: linear-gradient(90deg, var(--accent), var(--accent-hi));border-radius: 0.2rem;pointer-events: none;}.mk-seek-thumb {position: absolute;top: 50%;left: 0%;transform: translate(-50%, -50%);width: 0.9rem;height: 0.9rem;border-radius: 0.18rem;background: radial-gradient(ellipse at 44% 38%, #e0ddd8, var(--panel-raised));box-shadow: -3px -3px 6px rgba(255,255,255,0.6), 3px 4px 8px rgba(0,0,0,0.3);pointer-events: none;}.mk-time {font-size: 0.63rem;font-weight: 300;color: var(--text-3);flex-shrink: 0;letter-spacing: 0.03em;}.mk-knob {--rot: -135deg;width: 3.5rem;height: 3.5rem;border-radius: 50%;cursor: ns-resize;flex-shrink: 0;position: relative;background: var(--knob-face);box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 0 0 6px var(--knob-ring), 0 0 0 7px rgba(0,0,0,0.16), 8px 10px 22px rgba(0,0,0,0.48), -4px -5px 10px rgba(255,255,255,0.42);transition: box-shadow 0.08s ease;}.mk-knob:active {box-shadow: 0 0 0 3px rgba(255,255,255,0.14), 0 0 0 6px var(--knob-ring), 0 0 0 7px rgba(0,0,0,0.2), 4px 6px 12px rgba(0,0,0,0.4), -2px -3px 6px rgba(255,255,255,0.32);}.mk-knob::before {content: '';position: absolute;width: 0.28rem;height: 0.28rem;top: 0.22rem;left: 1.61rem;border-radius: 50%;background: var(--led-on);box-shadow: 0 0 4px 2px var(--led-glow), 0 0 8px var(--led-glow);transform-origin: 0.14rem 1.53rem;transform: rotate(var(--rot));transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}.mk-knob.dragging::before {transition: none;}.mk-knob--sm {width: 1.9rem;height: 1.9rem;box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 0 0 4px var(--knob-ring), 0 0 0 5px rgba(0,0,0,0.15), 5px 6px 12px rgba(0,0,0,0.45), -3px -3px 7px rgba(255,255,255,0.38);}.mk-knob--sm::before {width: 0.2rem;height: 0.2rem;top: 0.14rem;left: 0.85rem;transform-origin: 0.1rem 0.81rem;}.mk-bk {position: relative;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}.mk-bk::before {content: '';position: absolute;bottom: -0.08rem;left: -0.04rem;width: 0.15rem;height: 0.15rem;border-radius: 50%;background: var(--text-3);opacity: 0.5;}.mk-bk::after {content: '';position: absolute;bottom: -0.08rem;right: -0.04rem;width: 0.15rem;height: 0.15rem;border-radius: 50%;background: var(--text-3);opacity: 0.5;}.mk-hsliders {display: flex;flex-direction: column;gap: 0.42rem;flex: 1;justify-content: center;}.mk-hs {display: flex;align-items: center;gap: 0.5rem;cursor: ew-resize;user-select: none;}.mk-hs-lbl {font-family: 'DM Mono', monospace;font-size: 0.56rem;font-weight: 300;letter-spacing: 0.18em;color: var(--text-3);text-transform: uppercase;min-width: 2.4rem;text-align: right;flex-shrink: 0;}.mk-hs-track {flex: 1;height: 6px;background: var(--panel-inset);border-radius: 3px;box-shadow: inset 2px 2px 5px rgba(0,0,0,0.28), inset -1px -1px 3px rgba(255,255,255,0.45);position: relative;}.mk-hs-fill {position: absolute;left: 0;top: 0;bottom: 0;width: 0%;background: linear-gradient(90deg, var(--accent), var(--accent-hi));border-radius: 3px;pointer-events: none;}.mk-hs-thumb {position: absolute;top: 50%;left: 0%;transform: translate(-50%, -50%);width: 0.72rem;height: 1.15rem;background: radial-gradient(ellipse at 44% 38%, #e0ddd8, var(--panel-raised));border-radius: 0.22rem;box-shadow: -3px -3px 6px rgba(255,255,255,0.62), 3px 4px 8px rgba(0,0,0,0.3);pointer-events: none;transition: box-shadow 0.07s ease;}.mk-hs.dragging .mk-hs-thumb {box-shadow: inset 1px 1px 3px rgba(0,0,0,0.18), 1px 2px 4px rgba(0,0,0,0.22), -1px -1px 2px rgba(255,255,255,0.4);}.mk-hs-val {font-family: 'DM Mono', monospace;font-size: 0.63rem;font-weight: 300;color: var(--accent);letter-spacing: 0.02em;min-width: 3.4rem;text-align: right;flex-shrink: 0;}.mk-eq-card {overflow: hidden;}.mk-eq-10 {flex: 1;min-height: 0;display: flex;align-items: stretch;justify-content: space-between;gap: 0.22rem;}.mk-bc {flex: 1;display: flex;flex-direction: column;align-items: center;gap: 0.28rem;min-height: 0;}.mk-slider {flex: 1;min-height: 0;cursor: ns-resize;display: flex;justify-content: center;padding: 0.2rem 0;}.mk-slider-track {position: relative;width: 6px;height: 100%;min-height: 2.5rem;background: var(--panel-inset);border-radius: 3px;box-shadow: inset 2px 2px 5px rgba(0,0,0,0.28), inset -1px -1px 3px rgba(255,255,255,0.45);flex-shrink: 0;overflow: visible;isolation: isolate;}.mk-slider-fill {position: absolute;left: 0;right: 0;background: linear-gradient(180deg, var(--accent-hi), var(--accent));border-radius: 3px;top: 50%;bottom: 50%;pointer-events: none;}.mk-slider-thumb {position: absolute;left: 50%;bottom: 50%;transform: translate(-50%, 50%);width: 1.1rem;height: 0.55rem;background: radial-gradient(ellipse at 44% 38%, #e0ddd8, var(--panel-raised));border-radius: 0.18rem;box-shadow: -3px -2px 5px rgba(255,255,255,0.6), 3px 3px 7px rgba(0,0,0,0.28);pointer-events: none;}.mk-eq-10 .mk-slider-track::after {content: '';position: absolute;left: -0.45rem;right: 0;top: 0;bottom: 0;z-index: -1;pointer-events: none;background-image: linear-gradient(transparent calc(8.33% - 0.5px), var(--text-3) calc(8.33% - 0.5px), var(--text-3) calc(8.33% + 0.5px), transparent calc(8.33% + 0.5px)), linear-gradient(transparent calc(29.17% - 0.5px), var(--text-3) calc(29.17% - 0.5px), var(--text-3) calc(29.17% + 0.5px), transparent calc(29.17% + 0.5px)), linear-gradient(transparent calc(50% - 0.5px), var(--text-3) calc(50% - 0.5px), var(--text-3) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent calc(70.83% - 0.5px), var(--text-3) calc(70.83% - 0.5px), var(--text-3) calc(70.83% + 0.5px), transparent calc(70.83% + 0.5px)), linear-gradient(transparent calc(91.67% - 0.5px), var(--text-3) calc(91.67% - 0.5px), var(--text-3) calc(91.67% + 0.5px), transparent calc(91.67% + 0.5px));opacity: 0.5;}.mk-bhz {font-family: 'DM Mono', monospace;font-size: 0.56rem;font-weight: 300;letter-spacing: 0.04em;color: var(--text-3);text-align: center;flex-shrink: 0;}