html,body{height:100%;margin:0}:root{--ui-scale: 1}body{font-family:Google Sans,sans-serif;font-size:14px;overflow:hidden;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0a0a0a);transform:scale(var(--ui-scale));transform-origin:top center}body.dragging{cursor:ns-resize}body.dragging *{-webkit-user-select:none;user-select:none;pointer-events:none}#app-container{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:20px;position:relative}.side-label{position:fixed;top:20px;transform:none;font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(36px,6vw,80px);color:#00ff64;text-transform:uppercase;letter-spacing:6px;-webkit-user-select:none;user-select:none;pointer-events:none;text-shadow:0 0 20px rgba(0,255,100,.6);z-index:0;opacity:.9}.side-label.left{left:calc(50% - (min(75vw,800px)/2) - 110px);transform:translate(-100%) rotate(-90deg);transform-origin:top right}.side-label.right{right:calc(50% - (min(75vw,800px)/2) - 110px);transform:translate(100%) rotate(90deg);transform-origin:top left}#video-section{width:min(75vw,800px);aspect-ratio:16/9;position:relative;border-radius:6px;overflow:hidden;box-shadow:0 10px 25px #0006,0 2px 8px #0000004d,inset 0 0 0 1px #00ff641a;background:#000;z-index:2}#background-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 2s ease-in-out}#background-video.visible{opacity:1}#video-section:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center bottom,transparent 30%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.3) 100%);pointer-events:none;z-index:1}#midi-section{width:min(75vw,800px);height:min(45vh,450px);position:relative;background:linear-gradient(145deg,#0a0a0a,#1a1a1a 30%,#0f1f0f 70%,#0a0a0a);border-radius:6px;overflow:hidden;box-shadow:0 -6px 20px #0009,0 2px 10px #0006,inset 0 0 0 1px #00ff6426,inset 0 1px #00ff641a;border-top:2px solid rgba(0,255,100,.2);z-index:2}#midi-section:before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(180deg,rgba(0,255,100,.1) 0%,rgba(0,255,100,.05) 30%,rgba(0,255,100,.02) 60%,transparent 100%);z-index:0}@media (max-width: 768px){#app-container{padding:10px;gap:15px}#video-section{width:95vw}#midi-section{width:95vw;height:min(55vh,600px)}.side-label{font-size:clamp(24px,4.5vw,60px);letter-spacing:3px}.side-label.left{left:clamp(20px,5vw,80px)}.side-label.right{right:clamp(20px,5vw,80px)}}