*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html,body{height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#000;color:#fff}#app{width:100%;height:100%;display:flex;flex-direction:column;position:relative}#loop-panel{height:80px;background:linear-gradient(180deg,#141414f2,#0a0a0afa);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);padding:15px 20px;display:flex;justify-content:center;align-items:center}.loop-container{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:300px}.loop-header{display:flex;align-items:center;width:100%;position:relative}.header-text{font-size:30px;font-weight:700;letter-spacing:2px;background:linear-gradient(135deg,#b3884d,#5bb386,#4d9bb3,#9d4db3,#b35d94);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;width:120px;flex-shrink:0}.header-text.left{text-align:right;margin-right:20px}.header-text.right{text-align:left;margin-left:20px}.loop-controls{display:flex;gap:15px;align-items:center;justify-content:center;flex:0 0 auto}.loop-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:2px solid #444;cursor:pointer;touch-action:none;box-shadow:inset 2px 2px 4px #0009,inset -2px -2px 4px #ffffff1a,0 2px 4px #0000004d;display:flex;align-items:center;justify-content:center;transition:transform .1s ease;position:relative}.loop-btn:active{transform:scale(.95)}.record-btn[data-state=recording]{background:linear-gradient(145deg,#f44,#c33);border-color:#f66;box-shadow:inset 2px 2px 4px #0009,inset -2px -2px 4px #fff3,0 0 10px #ff44444d}.record-dot{width:12px;height:12px;border-radius:50%;background:#f44;transition:background .2s ease}.record-btn[data-state=recording] .record-dot{background:#fff;animation:recordPulse 1s ease-in-out infinite alternate}@keyframes recordPulse{0%{opacity:.8;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.play-icon{width:0;height:0;border-left:10px solid #66ff66;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px;transition:all .2s ease}.play-btn[data-state=playing] .play-icon{border:none;width:8px;height:12px;background:linear-gradient(to right,#66ff66 0%,#66ff66 35%,transparent 35%,transparent 65%,#66ff66 65%,#66ff66 100%);margin-left:0}.loop-progress-indicator{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);box-shadow:inset 2px 2px 4px #0009,inset -2px -2px 4px #ffffff1a,0 2px 4px #0000004d;position:relative;opacity:0;transition:opacity .2s ease}.play-btn[data-state=playing]~.loop-progress-indicator{opacity:1}.loop-progress-indicator .progress-circle{position:absolute;top:0;left:0;width:40px;height:40px;pointer-events:none}.progress-bar{transition:none}.loop-volume-container{display:flex;flex-direction:column;align-items:center;gap:2px}.loop-volume-knob{width:35px;height:35px;border-radius:50%;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:2px solid #444;position:relative;cursor:pointer;touch-action:none;box-shadow:inset 2px 2px 4px #0009,inset -2px -2px 4px #ffffff1a,0 2px 4px #0000004d}.loop-volume-knob:active{transform:scale(.98)}.loop-volume-knob .knob-handle{position:absolute;top:4px;left:50%;width:2px;height:12px;background:linear-gradient(180deg,#ff6b35,#ff4500);border-radius:1px;transform:translate(-50%);transform-origin:center 13px;box-shadow:0 1px 2px #0006}.clear-btn{background:linear-gradient(145deg,#3a2a2a,#2a1a1a);border-color:#555}.clear-btn:hover{background:linear-gradient(145deg,#4a3a3a,#3a2a2a)}.clear-icon{font-size:20px;font-weight:700;color:#f66;line-height:1}.loop-status{display:flex;justify-content:center;align-items:center}.loop-label{font-size:9px;font-weight:700;letter-spacing:1px;color:#888;text-align:center}#oil-surface-container{flex:1;position:relative;overflow:hidden}#oil-surface{width:100%;height:100%;display:block;touch-action:none}#touch-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#controls-panel{height:120px;background:linear-gradient(180deg,#141414f2,#0a0a0afa);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);padding:20px;display:flex;justify-content:center;align-items:center}.control-group{display:flex;gap:40px;justify-content:center;align-items:center}.knob-container{display:flex;flex-direction:column;align-items:center;gap:8px}.knob{width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:2px solid #444;position:relative;cursor:pointer;touch-action:none;box-shadow:inset 2px 2px 4px #0009,inset -2px -2px 4px #ffffff1a,0 4px 8px #0000004d}.knob:active{transform:scale(.98)}.knob-handle{position:absolute;top:8px;left:50%;width:4px;height:20px;background:linear-gradient(180deg,#ff6b35,#ff4500);border-radius:2px;transform:translate(-50%);transform-origin:center 22px;box-shadow:0 2px 4px #0006}.knob-container label{font-size:11px;font-weight:700;letter-spacing:1px;color:#ccc;text-align:center}#instruction-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffffe6;font-size:24px;font-weight:300;letter-spacing:3px;text-align:center;pointer-events:none;z-index:100;opacity:0;animation:fadeInText 3s ease-in-out 1s forwards;text-shadow:0 2px 8px rgba(0,0,0,.5)}#instruction-text.hidden{animation:fadeOutText 1s ease-out forwards}@keyframes fadeInText{0%{opacity:0;transform:translate(-50%,-50%) translateY(20px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}@keyframes fadeOutText{0%{opacity:1;transform:translate(-50%,-50%) translateY(0)}to{opacity:0;transform:translate(-50%,-50%) translateY(-20px)}}@media (max-width: 768px){#loop-panel{height:65px;padding:10px 15px}.loop-container{min-width:280px}.header-text{font-size:16px;letter-spacing:1px;width:80px}.header-text.left{margin-right:6px}.header-text.right{margin-left:6px}.loop-controls{gap:12px}.loop-btn,.loop-progress-indicator,.loop-progress-indicator .progress-circle{width:35px;height:35px}.record-dot{width:10px;height:10px}.play-icon{border-left-width:8px;border-top-width:5px;border-bottom-width:5px}.play-btn[data-state=playing] .play-icon{width:6px;height:10px}.progress-circle{width:41px;height:41px}.loop-volume-knob{width:30px;height:30px}.loop-volume-knob .knob-handle{top:3px;height:10px;transform-origin:center 11px}.clear-icon{font-size:16px}.loop-label{font-size:8px}#controls-panel{height:100px;padding:15px}.control-group{gap:25px}.knob{width:50px;height:50px}.knob-handle{top:6px;height:16px;transform-origin:center 19px}.knob-container label{font-size:10px}#instruction-text{font-size:20px;letter-spacing:2px}}@media (max-width: 480px){#loop-panel{height:60px;padding:8px 15px}.loop-container{min-width:250px}.header-text{font-size:14px;letter-spacing:.5px;width:60px}.loop-controls{gap:8px}.loop-btn,.loop-progress-indicator,.loop-progress-indicator .progress-circle{width:32px;height:32px}.loop-volume-knob{width:28px;height:28px}.progress-circle{width:38px;height:38px}.loop-volume-knob .knob-handle{top:2px;height:9px;width:1.5px;transform-origin:center 10px}.control-group{gap:20px}.knob{width:45px;height:45px}.knob-handle{top:5px;height:14px;transform-origin:center 17px}#instruction-text{font-size:18px;letter-spacing:1px}}