@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#101012;--side:#0c0c0e;--panel:#17181b;--raised:#25272d;--active:#252525;--line:#343434;--muted:#c4c4c4;--dim:#8d8d95;--text:#fff;--accent:#3a6af1;--accent-hover:#4a78f5;--ring:#2c4fb8;--ledge:#3157d0;--chip:#637bce1f;--chip-line:#6678d373;--chip-dot:#6679d3}
*{font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif!important;letter-spacing:normal!important}
body{background:var(--bg);color:var(--text);font-size:14px}

header{border-bottom:0;background:var(--bg)}
.brand{gap:0}
.brand-text{display:inline-block;background:none;color:#fff;font-size:22px;font-weight:700;line-height:1;padding:0}
.header-note{font-size:13px;color:var(--muted)}
.top-nav{display:flex;align-items:center;gap:28px}
.top-nav a{color:#fff;text-decoration:none;font-size:14px;font-weight:500}
.top-nav a:hover{color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:500;border-radius:8px;padding:7px 14px;box-shadow:0 0 0 1px var(--ring),0 4px 0 0 var(--ledge),0 4px 0 1px var(--ring);cursor:pointer;transition:transform .08s,box-shadow .08s,background .15s}
.cta:not(:disabled):hover{background:var(--accent-hover)}
.cta:not(:disabled):active{transform:translateY(3px);box-shadow:0 0 0 1px var(--ring),0 1px 0 0 var(--ledge)}
.cta svg{width:15px;height:15px}

.panel,.create-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:none}
.section-title h1,.section-title h2,.library-heading .section-title h1,.timeline-title h2,.settings h2{font-size:16px!important;font-weight:600!important;color:#fff}
.hint,.link-form p,.library-note,.template-details,.timeline-heading p,.crop-controls label,.trim-info,.local-note,.time-labels{color:var(--muted)}

.step[data-step]{width:24px;height:24px;font-size:12px!important;font-weight:600;border:0;color:var(--muted);background:var(--raised);box-shadow:none}
.step[data-step].current{background:var(--accent);color:#fff;box-shadow:0 0 0 1px var(--ring)}
.step[data-step].done{background:var(--chip);color:#9fb0ff;box-shadow:inset 0 0 0 1px var(--chip-line)}

.export-button,.link-input-row button{background:var(--accent);color:#fff;font-weight:600;border-radius:8px;box-shadow:0 0 0 1px var(--ring),0 4px 0 0 var(--ledge),0 4px 0 1px var(--ring);transition:transform .08s,box-shadow .08s,background .15s}
.export-button span,.link-input-row button{color:#fff}
.export-button:not(:disabled):hover,.link-input-row button:hover{background:var(--accent-hover)}
.export-button:not(:disabled):active,.link-input-row button:active{transform:translateY(3px);box-shadow:0 0 0 1px var(--ring),0 1px 0 0 var(--ledge)}
.export-button:disabled{opacity:.45}

.link-input-row input,.trim-info input{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:#fff;font-size:12px}
.link-input-row input:focus,.trim-info input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3a6af133}
.link-form>label{font-size:12px;font-weight:500;color:var(--muted)}

.segmented{background:transparent;border:0;padding:0;gap:6px}
.segmented button,.transform-buttons button{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:12px;font-weight:400;padding:6px 10px}
.segmented button.active{background:var(--chip);border-color:var(--chip-line);color:#fff}
.segmented button:not(.active):hover,.transform-buttons button:hover{border-color:#55555c;color:#fff}

.dropzone{background:var(--bg);border:1px dashed #44444b;border-radius:10px}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#3a6af10d}
.dropzone strong{font-weight:600;color:#fff}
.dropzone em{color:#8fa6ff}
.upload-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;line-height:0;font-size:0;border-radius:50%!important;background:var(--raised)!important;border:1px solid var(--line)!important;color:#fff!important}
.upload-icon svg{width:20px;height:20px;display:block}
.file-row{background:var(--bg);border:1px solid var(--line);border-radius:8px}
.sample-button{color:var(--muted);border-top-color:var(--line)}
.sample-button span{color:#fff;font-weight:500}
.upload-divider{color:var(--dim)}
.upload-divider:before,.upload-divider:after{background:var(--line)}
.link-feedback{color:var(--muted)}
#status.error,.link-feedback .error,.error{color:#ff7b7b!important}

.length-badge{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--chip-line);border-radius:999px;color:#fff;font-size:11px;font-weight:500;padding:3px 9px}
.length-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--chip-dot)}
.selection{border-color:var(--accent);background:#3a6af112}
.handle{background:var(--accent)!important;color:#fff!important}
.timeline{border-radius:8px}
.play-button{background:var(--raised);border:1px solid var(--line);color:#fff}
.player input,.crop-controls input{accent-color:var(--accent)}
.canvas-wrap{background:var(--side)}
.original-links a{color:#8fa6ff}
.coral-dot{background:var(--accent)!important}

footer{border-top:0;color:var(--dim);font-size:12px!important}

.link-form>label{font-size:14px;margin-bottom:10px}
.link-input-row input{font-size:14px;padding:12px}
.link-input-row button{width:46px;font-size:20px}
.link-form p,#linkHelp{font-size:13px;line-height:1.5}
.link-feedback,#linkStatus,.link-feedback button{font-size:13px}
.upload-divider{font-size:11px;letter-spacing:.06em!important}
.volume-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.volume-label{display:flex;align-items:center;gap:8px;color:#fff;font-weight:500}
.volume-label svg{width:17px;height:17px;color:var(--muted)}
#sourceVolumeValue{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.volume-row input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--accent)}
.setting-row.corner-picker,.setting-row.size-picker{justify-content:space-between;margin-top:12px}
.corner-grid{display:grid;grid-template-columns:repeat(2,22px);grid-template-rows:repeat(2,14px);gap:3px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.corner-grid button{padding:0;border:1px solid #2c2c31;border-radius:3px;background:#1b1c20;cursor:pointer;transition:background .12s,border-color .12s}
.corner-grid button:hover{border-color:#5a5a62;background:#25272d}
.corner-grid button.active{background:var(--accent);border-color:var(--ring)}
.corner-grid button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.canvas-upload,.canvas-wrap.vertical .canvas-upload{inset:0}
.dropzone strong{font-size:15px}
.dropzone{cursor:pointer;outline:none}
.dropzone:focus{border-style:solid;border-color:var(--accent);background:#3a6af112;box-shadow:0 0 0 3px #3a6af133}
.dropzone:focus .upload-icon{background:var(--accent)!important}
.dropzone .paste-ready{display:none;color:#b7c5ff}
.dropzone:focus .paste-ready{display:block}
.dropzone:focus .drop-rules{display:none}
.browse-link{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:#8fa6ff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.browse-link:hover{color:#b7c5ff}
.browse-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.dropzone kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--raised);color:#fff;font-size:.85em;line-height:1.3;text-align:center}
.dropzone>span:not(.upload-icon){font-size:14px}
.dropzone small{font-size:12px;line-height:1.5}
.local-note{font-size:13px}
.sample-button,.sample-button span{font-size:14px}
#fileName{font-size:13px}
#fileMeta{font-size:12px}
.hint,.crop-controls label,.setting-row label{font-size:13px}
.crop-controls output{font-size:12px}
.transform-buttons button,.segmented button{font-size:13px}
#timelineHelp,.timeline-heading p{font-size:13px}
.trim-info,.time-labels{font-size:12px}
.trim-info input{font-size:13px}
.library-note,.template-details{font-size:12px}
#exportNote{font-size:13px}

@media(min-width:1200px){
  :root{--preview-reserve:336px}
  main{gap:0;padding:8px 32px 0}
  .clip-library,aside,.editor{border:1px solid var(--line);background:var(--panel);overflow-y:auto}
  .clip-library{align-self:stretch;max-height:none;background:var(--side);border-radius:16px 0 0 16px;border-right:0;padding:0 8px 8px;display:flex;flex-direction:column}
  aside{border-right:0;border-left:1px solid var(--line);gap:0;padding:0}
  .editor{border-radius:0 16px 16px 0;padding:0}

  .clip-library .library-heading{height:56px;padding:0 12px;margin:0}
  .clip-library .section-title h1{font-size:14px!important;font-weight:500!important}
  .clip-grid{gap:2px}
  .clip-card{display:flex;align-items:center;gap:10px;background:transparent;border:0;border-radius:6px;padding:7px 10px;box-shadow:none}
  .clip-card:hover{background:#1b1b1e}
  .clip-card[aria-pressed=true]{background:var(--active);border:0;box-shadow:none}
  .clip-card img{width:96px;height:auto;aspect-ratio:16/9;border-radius:6px;object-fit:cover;flex-shrink:0}
  .clip-card-info{gap:2px}
  .clip-card-info strong{font-size:13px!important;font-weight:500;line-height:1.25}
  .clip-card-info>span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
  .clip-card-info>span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--chip-dot)}
  .clip-card:nth-child(2) .clip-card-info>span::before{background:#ff6538}
  .clip-card:nth-child(3) .clip-card-info>span::before{background:#40aadb}
  .clip-card:nth-child(4) .clip-card-info>span::before{background:#e4405f}
  .selected-label{display:none!important}
  .clip-library .library-note{margin:auto 0 0;padding:12px 12px 4px;border-top:1px solid var(--line);font-size:12px}

  aside>.panel{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 24px}
  aside>.panel:first-child .section-title{height:56px;margin:-20px -24px 16px;padding:0 24px;border-bottom:1px solid var(--line)}

  .preview-panel{background:transparent;border:0;border-radius:0}
  .preview-heading{height:56px;padding:0 24px;border-bottom:1px solid var(--line)}
  .player{border-top:1px solid var(--line)}
  .template-details{padding:10px 24px}
  .editor>#status{margin:0;padding:8px 24px 0}
  .editor .create-panel{margin:auto 0 0;border:0;border-top:1px solid var(--line);border-radius:0 0 16px 0;background:transparent;padding:16px 24px 20px}
  .create-panel .export-button{font-size:18px;padding:11px 20px}
  footer{padding:12px 4px}
}