@font-face{ font-family:'Heading Now'; src:url('../fonts/HeadingNowTrial-65Medium.ttf') format('truetype');
  font-weight:500;
}
@font-face{ font-family:'Relationship Melodrame'; src:url('../fonts/Relationship_of_mC_lodrame.ttf') format('truetype');
  font-weight:400;
}

:root{ --bg:#101012; --panel:#17171a; --line:#2a2a2d; --paper:#f2ede2; --rec:#ff3b30; --amber:#ffb84d; --mono: ui-monospace,'SF Mono','Menlo','Consolas',monospace; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--paper); font-family:'Heading Now', system-ui, sans-serif; min-height:100vh; }
.app{ display:grid; grid-template-columns:340px 1fr; min-height:100vh; }
@media (max-width:900px){ .app{ grid-template-columns:1fr; } }

.sidebar{ background:var(--panel); border-right:1px solid var(--line); padding:22px 20px 50px; overflow-y:auto; max-height:100vh; }
.brand{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--rec); }
.brand span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8a8a8f; }
h1{ font-size:19px; margin:0 0 20px; font-weight:500; }
.group{ margin-bottom:20px; }
.group + .group{ border-top:1px dashed var(--line); padding-top:18px; }
.group label.title{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8a8a8f; margin-bottom:9px; }
textarea, select, input[type=range], input[type=color], input[type=file], input[type=number]{
  width:100%; background:#0d0d0f; border:1px solid var(--line); color:var(--paper);
  border-radius:6px; padding:9px 10px; font-family:inherit; font-size:13.5px;
}
textarea{ resize:vertical; min-height:52px; font-family:'Relationship Melodrame', serif; font-size:19px; }
select{ appearance:none; cursor:pointer; }
.row{ display:flex; gap:8px; }
.row > *{ flex:1; }
.slider-label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:#8a8a8f; margin-bottom:6px; }
.checkline{ display:flex; align-items:center; gap:8px; font-size:13px; color:#c9c9cd; }
.checkline input{ width:auto; }
.hint{ font-size:11.5px; color:#6f6f75; line-height:1.5; margin-top:7px; }
.btn{ background:#0d0d0f; border:1px solid var(--line); color:var(--paper); border-radius:6px; padding:8px 12px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; cursor:pointer; text-transform:uppercase; }
.btn:hover{ border-color:var(--amber); }
.btn.wide{ width:100%; margin-top:8px; }
.btn.primary{ background:var(--amber); color:#181307; border-color:var(--amber); font-weight:600; }
.btn.small{ padding:4px 8px; font-size:10.5px; }

.layer-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.layer-row{ display:flex; align-items:center; gap:8px; background:#0d0d0f; border:1px solid var(--line); border-radius:6px; padding:7px 9px; cursor:pointer; }
.layer-row.selected{ border-color:var(--amber); }
.layer-row span.name{ flex:1; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-row .del{ font-family:var(--mono); font-size:12px; color:#8a8a8f; }
.layer-row .del:hover{ color:var(--rec); }
.layer-row .reorder{ display:flex; flex-direction:column; gap:0; line-height:1; }
.layer-row .ro-btn{ font-size:11px; color:#8a8a8f; cursor:pointer; padding:1px 3px; }
.layer-row .ro-btn:hover{ color:var(--amber); }
.swatch-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.swatch{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line); cursor:pointer; flex:none; }
.swatch.selected{ outline:2px solid var(--amber); outline-offset:2px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family:var(--mono); font-size:11px; padding:6px 10px; border-radius:20px; border:1px solid var(--line); background:#0d0d0f; color:#c9c9cd; cursor:pointer; }
.chip.active{ background:var(--amber); color:#181307; border-color:var(--amber); font-weight:600; }

.main{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 22px; gap:18px; position:relative; }
.viewfinder{ position:relative; display:inline-block; }
.corner{ position:absolute; width:22px; height:22px; border-color:var(--amber); opacity:.85; }
.corner.tl{ top:-10px; left:-10px; border-top:2px solid; border-left:2px solid; }
.corner.tr{ top:-10px; right:-10px; border-top:2px solid; border-right:2px solid; }
.corner.bl{ bottom:-10px; left:-10px; border-bottom:2px solid; border-left:2px solid; }
.corner.br{ bottom:-10px; right:-10px; border-bottom:2px solid; border-right:2px solid; }
canvas{
  display:block;
  background:
    linear-gradient(45deg,#222 25%,transparent 25%), linear-gradient(-45deg,#222 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#222 75%), linear-gradient(-45deg,transparent 75%,#222 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0px;
  border-radius:2px; max-width:80vw; max-height:52vh; width:auto; height:auto;
}
.transport{ display:flex; align-items:center; gap:14px; font-family:var(--mono); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 16px; flex-wrap:wrap; justify-content:center; }
.tbtn{ background:#0d0d0f; border:1px solid var(--line); color:var(--paper); border-radius:6px; padding:8px 13px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; cursor:pointer; text-transform:uppercase; }
.tbtn:hover{ border-color:var(--amber); }
.tbtn.rec{ color:var(--rec); border-color:#4a1c1a; }
.tbtn.rec.active{ background:var(--rec); color:#160705; border-color:var(--rec); }
.tbtn.rec.active .recdot{ animation:pulse 1s infinite; }
.recdot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:5px; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.timecode{ font-size:13px; color:#c9c9cd; min-width:88px; }
.status{ font-family:var(--mono); font-size:11.5px; color:var(--amber); min-height:14px; }
.footer-note{ max-width:640px; text-align:center; font-size:12px; color:#6f6f75; line-height:1.6; }
.footer-note b{ color:#9c9ca0; }