:root{--bg1:#2a1d15;--bg2:#1a120d;--cream:#fbe9d7;--amber:#f5a623;--coral:#ff7a45;--line:#4a3628;--card:#211710}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--cream);font-family:'Bricolage Grotesque',sans-serif;
background:radial-gradient(1200px 500px at 70% -10%,#3d2a1c,transparent),linear-gradient(180deg,var(--bg1),var(--bg2))}
.wrap{max-width:1120px;margin:0 auto;padding:40px 24px 30px}
header{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.title{margin:0;display:flex;flex-direction:column;font-weight:800;font-size:clamp(40px,6vw,60px);line-height:1.08;text-shadow:3px 3px 0 #000a;animation:rise .6s both}
.title .two{color:var(--amber)}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pill{font-family:inherit;font-weight:800;font-size:18px;color:var(--cream);background:linear-gradient(180deg,#3a281c,#2a1d15);border:3px solid var(--line);border-radius:999px;padding:14px 28px;cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:inset 0 2px 8px #0006;text-decoration:none;display:inline-block;text-align:center;animation:rise .6s both}
.btns .pill:nth-child(2){animation-delay:.08s}.btns .pill:nth-child(3){animation-delay:.16s}.btns .pill:nth-child(4){animation-delay:.24s}
.pill:hover:not(:disabled){transform:translateY(-2px)}
.pill:disabled{opacity:.45;cursor:not-allowed}
.coral{border-color:var(--coral);box-shadow:0 0 18px #ff7a4544,inset 0 2px 8px #0006;background:linear-gradient(180deg,#5a3424,#3a2218)}
.amber{border-color:var(--amber)}
.muted{border-color:#3d2c21}
.pill.sm{font-size:15px;padding:10px 20px}
.divider{border-top:2px dashed #5a4433;margin:30px 0 2px}
.boxed{font-family:'Martian Mono',monospace;display:inline-flex;flex-wrap:wrap;gap:2px 0;line-height:1}
.boxed i{font-style:normal;display:inline-block;min-width:.95em;padding:2px 2px;border:1.5px solid currentColor;text-align:center;font-size:.8em;margin-right:-1.5px}
.boxed i:nth-child(odd){background:var(--cream);color:#1a120d;border-color:var(--cream)}
.boxed b{width:.9em;display:inline-block}
.amberbox{color:var(--amber)}.amberbox i:nth-child(odd){background:transparent;color:var(--amber);border-color:var(--amber)}
.stage{position:relative;border-radius:32px;border:2px solid var(--line);background:#000;overflow:hidden;aspect-ratio:16/9}
.stage.drag{border-color:var(--amber);box-shadow:0 0 30px #f5a62355}
canvas{width:100%;height:100%;display:block}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#6b5240;font-family:'Martian Mono';font-size:12px;pointer-events:none}
.empty.hide{display:none}
.rec{position:absolute;top:18px;right:22px;font-family:'Martian Mono';font-weight:700;color:#ff4a3a;display:none;animation:pulse 1s infinite}
.rec.on{display:block}
.strip{position:relative;margin-top:24px;height:38px;border-radius:999px;border:2px solid var(--line);background:#2f2119;display:flex;overflow:hidden;cursor:crosshair;touch-action:none}
.strip .cell{flex:1;border-right:3px solid #1e150f;background-size:cover;background-position:center;opacity:.85}
.strip .sel{position:absolute;top:0;bottom:0;background:#f5a62355;border-left:2px solid var(--amber);border-right:2px solid var(--amber);display:none;pointer-events:none}
.strip .head{position:absolute;top:0;bottom:0;width:2px;background:var(--coral);left:0;pointer-events:none}
.status{margin-top:10px;font-size:13px;color:#a68a73}
.status i:nth-child(odd){background:#a68a73;border-color:#a68a73}
.clips{margin-top:40px;border:2px solid var(--line);border-radius:36px;padding:26px 30px;background:#1e1510;min-height:110px}
.clipsHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mini{font-family:'Martian Mono';font-size:11px;color:var(--cream);background:#2f2119;border:1.5px solid #5a4433;border-radius:999px;padding:7px 12px;cursor:pointer}
.mini:hover:not(:disabled){border-color:var(--amber)}.mini:disabled{opacity:.4}
.clipActions{display:flex;gap:8px}
.clipList{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.hint{color:#6b5240;font-size:14px;margin:0;font-weight:300}
.chip{display:flex;align-items:center;gap:8px;background:#2f2119;border:2px solid #4a3628;border-radius:16px;padding:6px 8px;cursor:grab;font-family:'Martian Mono';font-size:11px}
.chip img{width:64px;height:36px;object-fit:cover;border-radius:8px}
.chip.over{border-color:var(--amber)}
.chip button{background:none;border:none;color:var(--coral);cursor:pointer;font-size:14px}
.tagline{font-style:italic;font-weight:300;color:var(--amber);margin-top:10px;font-size:18px}
footer{margin-top:40px;text-align:center;color:#6b5240;font-size:14px}
footer a{color:var(--amber)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:#1c130e;border-left:2px solid var(--line);padding:24px;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);overflow:auto;z-index:20;box-shadow:-20px 0 40px #0008}
.drawer.open{transform:none}
.drawerHead{display:flex;justify-content:space-between;align-items:center}
.comboName{margin:16px 0;font-weight:800;font-size:22px;color:var(--coral)}
.fx{border:2px solid #3d2c21;border-radius:18px;padding:12px 14px;margin-bottom:10px;background:#251a13;transition:border-color .2s}
.fx.on{border-color:var(--amber)}
.fx label{display:flex;justify-content:space-between;align-items:center;font-weight:800;cursor:pointer}
.fx input[type=range]{width:100%;accent-color:var(--amber);margin-top:8px}
.fx input[type=checkbox]{accent-color:var(--coral);width:18px;height:18px}
.drawerBtns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:30;padding:20px}
.modal.open{display:flex}
.modalCard{background:#1e1510;border:2px solid var(--amber);border-radius:28px;padding:22px;max-width:720px;width:100%}
.modalCard video{width:100%;border-radius:16px;margin-top:14px;background:#000}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pulse{50%{opacity:.3}}
@media(max-width:700px){
  header{flex-direction:column;align-items:flex-start}
  .btns{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .pill{font-size:15px;padding:12px 14px}
  .stage{border-radius:20px}.clips{padding:20px;border-radius:24px}
}