.app{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.main-content{display:flex;flex-direction:column;height:100%;width:100%;transition:margin-left .3s ease;margin-left:100px}.editor-container{flex:1;display:flex;background-color:#f8f9fa;min-height:0;width:100%}@media (max-width: 768px){.main-content,.main-content.menu-open{margin-left:0}}.controls{display:flex;align-items:center;gap:20px;padding:15px 30px;background:#fff;border-bottom:1px solid #dee2e6;box-shadow:0 2px 4px #0000000d}.playButton{padding:0;width:48px;height:48px;border-radius:50%;border:none;background:#4a90e2;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-size:24px}.playButton:hover{background:#357abd;transform:scale(1.05)}.playButton:active{transform:scale(.95)}.slider{width:120px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#dee2e6;outline:none;border-radius:2px;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#4a90e2;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#4a90e2;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.slider::-webkit-slider-runnable-track{height:4px;border-radius:2px}.slider::-moz-range-track{height:4px;border-radius:2px}.editor-wrapper{position:relative;width:100%;display:flex;flex:1;min-height:0;min-width:0;padding:20px;background:#f8f9fa}.editor{width:100%;height:100%;padding:20px;font-family:Fira Code,monospace;font-size:14px;line-height:1.6;border:none;background:#fff;color:#2c3e50}.editor:focus{outline:none}.menu{position:fixed;left:-250px;top:0;width:300px;height:100%;background:#1a1a1a;transition:all .3s ease;z-index:1000;padding:20px}.menu.open{left:0}.hamburger{position:fixed;left:20px;top:20px;z-index:1001;background:none;border:none;cursor:pointer;padding:10px}.hamburger-icon{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px}.hamburger-icon span{display:block;width:100%;height:2px;background:#fff;transition:all .3s ease}.hamburger-icon.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger-icon.open span:nth-child(2){opacity:0}.hamburger-icon.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.menu ul{list-style:none;padding:0;margin:60px 0 0}.menu li{padding:15px 0;color:#fff;cursor:pointer}.menu li:hover{color:#666}@media (max-width: 768px){.menu{width:100%;left:0;transform:translate(-100%);padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}.menu.open{transform:translate(0);width:100vw}.hamburger{top:auto;bottom:20px}.hamburger-icon span{background:#000}.hamburger-icon.open span{background:#fff}}.main-content{transition:margin-left .3s ease}.main-content.menu-open{margin-left:250px}@media (max-width: 768px){.main-content.menu-open{margin-left:0}}.menu li.selected{color:#4a9eff;font-weight:700}.menu li.selected:hover{color:#3182ce}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;height:100%}body{margin:0;min-width:320px;height:100%;width:100%;overflow:hidden}#root{height:100%;width:100%}