:root { --bg:#f7f8f7; --paper:#ffffff; --ink:#1d2321; --ink2:#5a6461; --line:#dde3e0; --line2:#eef1ef; --accent:#c8372d; --ok:#2f7d4f; --okbg:#e3f1e8; --warn:#7a4c00; --warnbg:#fbeed6; --mutebg:#eceff0; --hover:#f1f4f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#151918; --paper:#1e2422; --ink:#e9ece9; --ink2:#a3aca8; --line:#323b38; --line2:#2a3230; --accent:#e0574b; --ok:#6fc48f; --okbg:#1f3a2b; --warn:#f0c47a; --warnbg:#3d2f14; --mutebg:#2a3230; --hover:#232a28; } }
:root[data-theme="dark"] { --bg:#151918; --paper:#1e2422; --ink:#e9ece9; --ink2:#a3aca8; --line:#323b38; --line2:#2a3230; --accent:#e0574b; --ok:#6fc48f; --okbg:#1f3a2b; --warn:#f0c47a; --warnbg:#3d2f14; --mutebg:#2a3230; --hover:#232a28; }
body { background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; font-size:15px; line-height:1.5; }
.wrap { max-width:1100px; margin:0 auto; padding:32px 24px 80px; display:flex; flex-direction:column; gap:24px; }
.mono { font-family:'IBM Plex Mono',Menlo,monospace; font-variant-numeric:tabular-nums; }
.crumb { font-size:13px; color:var(--ink2); }
h1 { font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-size:34px; font-weight:700; margin:0; line-height:1.1; }
.proj { display:flex; flex-direction:column; gap:10px; }
.sum { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; color:var(--ink2); }
.sum b { color:var(--ink); }
.list { background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.head { display:grid; grid-template-columns:64px minmax(0,1fr) 110px 110px 170px 24px; gap:16px; padding:10px 20px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink2); border-bottom:1px solid var(--line); }
.scene + .scene { border-top:1px solid var(--line2); }
.row { all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:64px minmax(0,1fr) 110px 110px 170px 24px; gap:16px; align-items:center; padding:16px 20px; cursor:pointer; color:var(--ink); }
.row:hover { background:var(--hover); } .row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.id { font-weight:500; } .ttl { display:flex; flex-direction:column; font-weight:600; } .ttl small { font-weight:400; font-size:13px; color:var(--ink2); }
.who,.assets { font-size:14px; color:var(--ink2); } .assets b { color:var(--ink); }
.chev { color:var(--ink2); transition:transform .15s; } .row[aria-expanded="true"] .chev { transform:rotate(180deg); }
.pill { display:inline-flex; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap; justify-self:start; }
.p-ok { background:var(--okbg); color:var(--ok); } .p-warn { background:var(--warnbg); color:var(--warn); } .p-mute { background:var(--mutebg); color:var(--ink2); }
.detail { padding:8px 20px 28px; display:flex; flex-direction:column; gap:24px; background:var(--bg); border-top:1px solid var(--line2); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.col { display:flex; flex-direction:column; gap:10px; }
.k { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); margin-top:8px; }
.job { margin:0; font-size:15px; }
.meta { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink2); }
.clip { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--ink2); } .clip img { width:160px; height:90px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.beats { display:flex; flex-direction:column; } .beat { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; padding:6px 0; border-top:1px solid var(--line2); font-size:14px; } .beat:first-child { border-top:none; }
.lines { display:flex; flex-direction:column; } .line { display:grid; grid-template-columns:56px 90px minmax(0,1fr); gap:10px; font-size:13px; padding:4px 0; border-top:1px solid var(--line2); } .line:first-child { border-top:none; }
.thumbs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } figure { margin:0; display:flex; flex-direction:column; gap:4px; } figure img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; border:1px solid var(--line); } figcaption { font-size:12px; color:var(--ink2); }
.box { margin:0; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--paper); font-size:14px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; } .chips span { border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:13px; background:var(--paper); }
.handback { display:flex; flex-direction:column; gap:10px; }
.slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.slot { display:flex; align-items:center; gap:10px; border:1px dashed var(--line); border-radius:6px; padding:10px 12px; font-size:14px; background:var(--paper); }
.dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--line); flex:none; }
.up { margin-left:auto; font-size:13px; color:var(--accent); font-weight:500; }
.muted { font-size:13px; color:var(--ink2); }
@media (max-width:820px) { .head { display:none; } .row { grid-template-columns:56px minmax(0,1fr) 24px; } .row .pill,.row .who,.row .assets { display:none; } .grid2,.slots { grid-template-columns:1fr; } .thumbs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
img { max-width:100%; }
@media (prefers-reduced-motion: reduce) { .chev { transition:none; } }
.bible { background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.brow { grid-template-columns:minmax(0,1fr) 24px; }
.ph { width:100%; aspect-ratio:16/9; border-radius:6px; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink2); background:var(--bg); }
.toolbar { display:flex; gap:10px; align-items:center; }
.btn { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:6px; padding:8px 14px; font:inherit; font-size:14px; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; padding:8px 20px 24px; background:var(--bg); border-top:1px solid var(--line2); }
.form .full { grid-column:1 / -1; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.form input, .form textarea, .form select { font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:9px 11px; text-transform:none; letter-spacing:0; font-weight:400; }
.form textarea { min-height:96px; resize:vertical; }
.form .mono { font-family:'IBM Plex Mono',Menlo,monospace; }
.checks { display:flex; flex-wrap:wrap; gap:8px; }
.checks label { flex-direction:row; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-weight:400; font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:5px 10px; background:var(--paper); cursor:pointer; }
.actions { grid-column:1 / -1; display:flex; gap:10px; align-items:center; }
.err { color:var(--accent); font-size:13px; }
.note { font-size:13px; color:var(--ink2); }
.slot input { flex:1; font:inherit; font-size:13px; border:none; background:transparent; color:var(--ink); min-width:0; }
.slot .dot.on { background:var(--ok); border-color:var(--ok); }
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.btn:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.btn:has(.vh) { position:relative; }