.swr-app{display:flex;margin-top:50px;margin-bottom:50px;height:calc(100vh - 100px);position:relative}.swr-app *{box-sizing:border-box}.swr-left{width:280px;min-width:280px;background:#111;border-right:1px solid #1a1a1a;display:flex;flex-direction:column;overflow-y:auto}.swr-right{width:300px;min-width:300px;background:#111;border-left:1px solid #1a1a1a;display:flex;flex-direction:column;overflow-y:auto}.swr-viewport{flex:1;position:relative;background:#0d0d0d;min-width:0;overflow:hidden}.swr-stage{position:absolute;inset:0}.swr-stage>*{width:100%;height:100%;display:block}.swr-header{padding:8px 12px;background:#0a0a0a;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;gap:8px}.swr-header-title{color:#0f8;font-size:13px;font-weight:700}.swr-header-sub{color:#444;font-size:10px}.swr-section{padding:12px;border-bottom:1px solid #1a1a1a}.swr-section-title{color:#0f8;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.swr-note{color:#555;font-size:10px;text-transform:none;letter-spacing:0;margin-left:4px}.swr-dropzone{border:2px dashed #333;border-radius:4px;padding:20px 12px;text-align:center;cursor:pointer;transition:border-color .2s}.swr-dropzone:hover,.swr-dropzone.drag-over{border-color:#0f8}.swr-dropzone-icon{font-size:28px;margin-bottom:6px}.swr-dropzone-text{font-size:11px;color:#666}.swr-list{margin-top:8px;max-height:38vh;overflow-y:auto}.swr-item{display:flex;align-items:center;gap:6px;padding:5px 6px;font-size:11px;color:#aaa;cursor:pointer;border-left:2px solid transparent}.swr-item:hover{background:#1a1a1a}.swr-item.active{color:#0f8;border-left-color:#0f8;background:#00ff8810}.swr-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swr-item-size{color:#555;font-size:10px;flex:none}.swr-item-x{color:#555;flex:none;padding:0 4px}.swr-item-x:hover{color:#f55}.swr-btn{display:block;width:100%;padding:9px;border:1px solid #333;background:transparent;color:silver;font-family:inherit;font-size:12px;cursor:pointer;text-align:center;transition:all .2s}.swr-btn:hover,.swr-btn-primary{border-color:#0f8;color:#0f8}.swr-btn-primary:hover{background:#00ff8815}.swr-btn:disabled{opacity:.3;cursor:not-allowed}.swr-btn.recording{border-color:#f44;color:#f44}.swr-btn+.swr-btn,.swr-row+.swr-btn{margin-top:6px}.swr-row{display:flex;gap:6px}.swr-row>.swr-btn,.swr-row>.swr-btn+.swr-btn{margin-top:0}.swr-row .swr-btn{flex:1}.swr-row #swr-prev,.swr-row #swr-next{flex:0 0 44px}.swr-vol{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#666}.swr-vol input[type=range]{flex:1;accent-color:#00ff88}.swr-vol-val{width:26px;text-align:right;color:#aaa}.swr-row2{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:12px}.swr-k{color:#666;flex:none}.swr-v{color:#ddd;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swr-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:11px;color:#888}.swr-field select{width:160px;background:#0a0a0a;color:#ccc;border:1px solid #333;padding:4px;font-family:inherit;font-size:11px}.swr-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#aaa}.swr-check label{flex:1;cursor:pointer}.swr-check input[type=color]{width:34px;height:22px;border:1px solid #333;background:none;padding:0}.swr-trace{height:120px;margin:0 0 6px;padding:6px;overflow:auto;background:#0a0a0a;border:1px solid #1a1a1a;color:#9fd;font-size:10px;white-space:pre-wrap;word-break:break-all}.swr-credit{margin-top:auto;padding:10px 12px;font-size:10px;color:#555;line-height:1.5}.swr-credit a{color:#6a8}.swr-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#333;font-size:13px;pointer-events:none}.swr-msg{position:absolute;left:8px;bottom:8px;right:8px;font-size:11px;color:#0f8;pointer-events:none;text-shadow:0 0 4px #000}.swr-msg.error{color:#f66}.swr-dropover{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000000bf;border:2px dashed #00ff88;color:#0f8;font-size:14px;z-index:5;pointer-events:none}.swr-dropover.active{display:flex}.swr-help{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:#000c}.swr-help.active{display:flex}.swr-help-box{width:min(640px,92%);max-height:88%;overflow-y:auto;background:#111;border:1px solid #333;padding:16px}.swr-help-title{color:#0f8;font-size:13px;margin-bottom:10px}.swr-help-body{font-size:12px;color:#bbb;line-height:1.7;margin-bottom:12px}.swr-help-body p{margin:0 0 10px}.swr-help-body b{color:#ddd}.swr-help-body code{color:#9fd}.swr-help-body a{color:#6a8}@media(max-width:900px){.swr-app{flex-direction:column;height:auto}.swr-left,.swr-right{width:100%;min-width:0;border:none}.swr-viewport{min-height:60vh;flex:none}}