:root{color-scheme:dark;--bg:#101315;--panel:#191e21;--line:#30383d;--muted:#9da9ae;--text:#edf0ed;--accent:#b6dba0;--blue:#99c8d9;--amber:#dbc297}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.4 "Segoe UI",Arial,sans-serif;height:100vh;overflow:hidden;display:flex;flex-direction:column}button,input,select{font:inherit;color:inherit}button,select{border:1px solid var(--line);background:#22292d;border-radius:5px;padding:7px 11px}button{cursor:pointer;white-space:nowrap}button:hover{background:#343f43;border-color:#66767d}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.35;cursor:default}input[type=text],input[type=number]{background:#13181a;border:1px solid var(--line);border-radius:4px;padding:5px 7px}header{height:79px;flex-shrink:0;display:flex;align-items:center;padding:0 25px;gap:32px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;min-width:242px}.brand-icon{font-size:29px;letter-spacing:2px;color:var(--accent)}.brand strong{font-size:14px;letter-spacing:2px}.brand small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.project{flex:1}.project input{font-size:19px;font-weight:600;background:transparent;border:0;padding:0;display:block;width:100%;max-width:450px}.project span{font-size:11px;color:var(--muted)}.file-actions{display:flex;gap:7px}.transport{height:59px;display:flex;align-items:center;gap:9px;padding:0 25px;border-bottom:1px solid var(--line);flex-shrink:0}.transport label{display:flex;align-items:center;gap:7px;color:var(--muted);margin-left:5px}.primary{background:var(--accent);color:#172313;border-color:var(--accent);font-weight:600;min-width:112px}.primary:hover{background:#c7e8b4}.divider{height:24px;border-left:1px solid var(--line);margin:0 6px}.spacer{flex:1}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;flex:1;min-height:0}.workspace{padding:24px 25px 18px;display:flex;flex-direction:column;gap:16px;min-height:0}.section-title{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:600}h1{font-size:23px;font-weight:500;letter-spacing:-.5px;margin:4px 0 0}h2{font-size:19px;font-weight:500;margin:6px 0 0}.add-actions{display:flex;gap:7px}.timeline-shell{border:1px solid var(--line);border-radius:7px;background:#151a1d;flex:1;min-height:150px;display:flex;flex-direction:column;overflow:hidden}.timeline-caption{display:flex;justify-content:space-between;padding:12px 14px;color:var(--muted);font-size:10px;border-bottom:1px solid var(--line);gap:10px}.timeline-caption span:first-child{letter-spacing:1.5px}#ruler{height:27px;flex-shrink:0;margin-left:155px;position:relative;border-bottom:1px solid var(--line)}#ruler span{position:absolute;top:6px;font-size:10px;color:#8d9ba2;transform:translateX(-50%)}#ruler span:first-child{transform:none}#lanes{overflow-y:auto;flex:1;min-height:0}.lane{height:76px;display:flex;border-bottom:1px solid #2a3237}.lane.selected{background:#212a2c}.lane-label{width:155px;flex-shrink:0;padding:12px;display:flex;align-items:flex-start;gap:9px;cursor:pointer;border-right:1px solid var(--line)}.lane-index{font-size:10px;color:var(--muted);padding-top:2px}.lane-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:112px;font-weight:500}.lane-info{font-size:10px;color:var(--muted);margin-top:7px}.track{position:relative;flex:1;min-width:0;background-image:linear-gradient(to right,#ffffff08 1px,transparent 1px);background-size:20% 100%;overflow:hidden}.block{position:absolute;top:7px;height:61px;border:1px solid var(--accent);background:#344c3c;border-radius:4px;cursor:grab;overflow:hidden;touch-action:none;min-width:12px}.lane:nth-child(3n+2) .block{background:#2c444f;border-color:var(--blue)}.lane:nth-child(3n) .block{background:#4c4434;border-color:var(--amber)}.block.muted{opacity:.3}.block canvas{position:absolute;width:100%;height:37px;bottom:1px;left:0;opacity:.8}.block span{position:relative;display:block;padding:3px 7px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block:active{cursor:grabbing}.drop-hint{height:32px;padding:8px 13px;color:#7f9097;font-size:11px;flex-shrink:0}.history{height:161px;flex-shrink:0;display:flex;flex-direction:column}.history-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.history-heading button{padding:4px 10px;font-size:11px}.history-heading #historyCount{margin-left:13px;color:var(--muted);font-size:11px}#editLog{overflow:auto;border-top:1px solid var(--line);flex:1}.log-entry{display:grid;grid-template-columns:48px 1fr 115px;gap:12px;padding:8px 3px;border-bottom:1px solid #252c30;font-size:11px}.log-author{color:var(--accent);text-transform:uppercase;font-size:10px}.log-author.ai{color:var(--blue)}.log-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-time{color:var(--muted);text-align:right}.log-entry.undone{opacity:.4}.empty{color:var(--muted);font-size:12px;padding:15px 0}aside{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}.inspector-heading{padding:24px 20px 17px}.tabs{display:flex;margin:0 17px;border-bottom:1px solid var(--line)}.tabs button{background:transparent;border:0;border-radius:0;padding:9px 10px;color:var(--muted);font-size:12px}.tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}#controls{flex:1;overflow-y:auto;padding:17px 20px}.control{margin-bottom:17px}.control-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.control-head label{font-size:12px;color:#c0cbd0}.control-head input[type=number]{width:80px;text-align:right;font-size:12px}.control input[type=range]{width:100%;accent-color:var(--accent);height:17px;margin:0;cursor:ew-resize}.control .unit{font-size:10px;color:var(--muted);display:block}.control select,.control input[type=text]{width:100%;margin-top:6px}.control.toggle{display:flex;justify-content:space-between;margin-bottom:13px}.control.toggle input{accent-color:var(--accent)}.control.group-title{font-size:10px;letter-spacing:1.5px;color:var(--muted);padding-top:6px;border-top:1px solid var(--line);margin:20px 0 14px}.control-note{color:var(--muted);font-size:11px;margin:0 0 16px}.source-path{word-break:break-all;font-size:12px;color:var(--blue);padding:11px;background:#13191c;border-radius:4px;margin-bottom:17px}.inspector-footer{padding:13px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}.inspector-footer span{color:var(--muted);font-size:10px}.inspector-footer button{font-size:10px;padding:5px 7px}footer{height:31px;flex-shrink:0;border-top:1px solid var(--line);padding:7px 25px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}#status{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#status.error{color:#f3a7a1}body.dragover .timeline-shell{outline:2px solid var(--accent)}@media(min-height:900px){.lane{height:96px}.block{height:80px}.block canvas{height:55px}.history{height:205px}.workspace{padding-top:30px;gap:22px}}
:root .history{height:140px}
@media(min-height:900px){:root .history{height:205px}}
.loop-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#1d2a22;font-weight:600}
.transport .loop-gap{width:64px;text-align:right}
/* Served mode (editor-served.js, http from serve.mjs). Every .served-only element stays hidden
   from file://, so the v1 page is unchanged there. One focal point: the match score. */
[hidden]{display:none!important}
.served-only{display:none}
body.served .section-title,body.served .v1-only,body.served .drop-hint,body.served .timeline-caption>span:first-child{display:none}
body.served .workspace{padding:12px 20px 10px;gap:10px}
body.served .timeline-shell{position:relative;min-height:0}
body.served .history{height:104px}
body.served .history-heading{margin-bottom:4px}
body.served .log-entry{padding:6px 3px}
.score-hero{grid-template-columns:auto minmax(0,1fr) auto auto;gap:22px;align-items:center;flex-shrink:0;height:92px;padding:8px 16px;border:1px solid var(--line);border-radius:7px;background:#151a1d}
body.served .score-hero{display:grid}
.score-main{display:flex;flex-direction:column;gap:3px;min-width:200px}
.score-row{display:flex;align-items:baseline;gap:12px}
#matchScore{font-size:46px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px;transition:opacity .15s}
#matchScore.stale{opacity:.5}
.score-hero.empty #matchScore{color:var(--muted)}
#scoreMark{font-size:15px;font-weight:600}
#scoreMark.better{color:var(--accent)}
#scoreMark.worse{color:#f3a7a1}
#scoreSub{font-size:11px;color:var(--muted);white-space:nowrap}
#scoreLines{margin:0;padding:0 0 0 16px;font-size:11px;color:#c0cbd0;min-width:0;display:flex;flex-direction:column;gap:4px}
#scoreLines li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-box{display:flex;flex-direction:column;gap:7px}
.ab{display:flex;padding:0;height:44px;min-width:156px;overflow:hidden;font-weight:600;font-size:14px;letter-spacing:1px}
.ab span{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ab[data-side=mix] .ab-mix{background:var(--accent);color:#172313}
.ab[data-side=ref] .ab-ref{background:var(--amber);color:#2a2213}
.fit-box{display:flex;flex-direction:column;gap:7px;width:104px}
.fit-box button{padding:5px 11px}
.fit-meter{height:4px;border-radius:2px;background:var(--line);overflow:hidden;visibility:hidden}
.fit-meter.running{visibility:visible}
#fitBar{height:100%;width:0;background:#b6dba0;transition:width .2s}
.ab-box #pickReference{min-width:156px;padding:5px 11px}
body.served .timeline-caption{align-items:center;padding:6px 10px 6px 12px}
body.served .view-tabs,body.served .timeline-tools,.timeline-tools .add-actions{display:flex;gap:5px}
.view-tabs button,.timeline-tools button{padding:5px 11px;font-size:12px}
.view-tabs button.active{color:var(--accent);border-color:var(--accent);background:#1d2a22}
.view-tabs button.busy::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-left:7px;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.compare-row{height:52px;flex-shrink:0;border-bottom:1px solid var(--line);background:#12171a}
body.served .compare-row{display:flex}
.compare-row .lane-label{padding:7px 12px;cursor:default}
.compare-text{min-width:0;width:100%}
.compare-top{display:flex;justify-content:space-between;align-items:center}
.compare-name{font-size:10px;color:var(--amber);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:4px}
.ref-nav{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--muted)}
.ref-nav button{padding:0 6px;font-size:11px;line-height:16px}
#compareCanvas{position:absolute;left:0;top:3px;width:100%;height:calc(100% - 6px)}
.compare-row.drop-target{outline:2px solid var(--amber);outline-offset:-2px}
body.served .lane{height:60px}
body.served .lane-label{padding:8px 12px}
body.served .lane-info{margin-top:4px}
body.served .block{top:5px;height:50px}
body.served .block canvas{height:30px}
.card-badge{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:#2c3a44;color:var(--blue);font-weight:600}
.card-badge.missing{opacity:.5}
.lane.drop-target,.new-lane.drop-target{outline:2px solid var(--accent);outline-offset:-2px;background:#1d2a22}
.new-lane{height:32px;flex-shrink:0;align-items:center;padding:0 14px;color:var(--muted);font-size:12px;border-top:1px dashed var(--line)}
body.served .new-lane{display:flex}
body.served .timeline-shell.teardown .teardown-view{display:flex;flex-direction:column;flex:1;min-height:0}
body.served .timeline-shell.teardown :is(#ruler,.compare-row,#lanes,.new-lane){display:none}
.spectro-row{display:flex;flex:1;min-height:0;border-bottom:1px solid var(--line)}
.spectro-label{width:155px;flex-shrink:0;padding:12px;font-weight:600;letter-spacing:1.5px;font-size:11px;color:var(--muted);border-right:1px solid var(--line)}
.spectro-track{position:relative;flex:1;min-width:0}
.spectro-track canvas{position:absolute;left:0;top:0;width:100%;height:100%}
#cardBoxes{position:absolute;inset:0}
/* Labels sit at the end of each box: the cards of a shot all start near 0 ms, so their starts pile up. */
.card-box{position:absolute;border:2px solid var(--accent);background:#0000002e;border-radius:3px;padding:0 4px;font-size:13px;font-weight:700;display:flex;align-items:flex-start;justify-content:flex-end;min-width:22px;min-height:20px;text-shadow:0 1px 2px #000}
.card-box:hover{background:#ffffff26}
.card-box.linked{border-width:3px;background:#ffffff30;box-shadow:0 0 0 2px #fff}
.spectro-foot{height:46px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 12px;font-size:12px;color:var(--muted)}
#teardownStatus{flex-shrink:0}
.card-chips{display:flex;gap:6px;min-width:0;overflow:hidden}
.card-chip{display:flex;align-items:center;gap:7px;padding:6px 11px;font-size:12px;border-left:4px solid var(--card)}
.card-chip strong{color:var(--card);font-size:14px}
.card-chip.linked{background:#1d2a22;border-color:var(--card);box-shadow:inset 0 0 0 1px var(--card)}
.ref-picker{position:absolute;top:44px;right:12px;width:360px;max-height:calc(100% - 56px);display:flex;flex-direction:column;background:var(--panel);border:1px solid #66767d;border-radius:7px;box-shadow:0 10px 30px #0009;z-index:20}
.picker-head{padding:12px 14px 8px;display:flex;flex-direction:column;gap:2px}
.picker-head span{font-size:11px;color:var(--muted)}
.picker-list{overflow:auto;flex:1;min-height:0;padding:2px 12px;display:flex;flex-direction:column;gap:6px}
.picker-item{text-align:left;padding:10px 12px;font-size:13px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.picker-item::before{content:"";display:inline-block;width:12px;height:12px;border:1px solid currentColor;border-radius:3px;margin-right:9px;vertical-align:-1px}
.picker-item.on{border-color:var(--accent);background:#1d2a22;color:var(--accent)}
.picker-item.on::before{background:var(--accent)}
.picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px}
.picker-note{color:var(--muted);font-size:12px;padding:8px 2px}
.picker-note.error{color:#f3a7a1}
.group-tabs{display:flex;gap:4px;margin:-8px 0 14px;position:sticky;top:-17px;z-index:2;background:var(--panel);padding:8px 0}
.group-tabs button{padding:6px 8px;font-size:12px;flex:1 1 auto;position:relative}
.group-tabs button.active{color:var(--accent);border-color:var(--accent);background:#1d2a22}
.group-tabs button.changed::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.card-link label{font-size:12px;color:#c0cbd0}
.segmented{display:flex;gap:4px;margin-top:6px}
.segmented button{flex:1;padding:8px 0;font-size:13px}
.segmented button.active{background:var(--accent);color:#172313;border-color:var(--accent);font-weight:600}
.shelf{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.shelf-head{display:flex;gap:6px}
.shelf-head select{flex:1;min-width:0;padding:7px 8px}
.shelf-head input{width:118px;background:#13181a;border:1px solid var(--line);border-radius:4px;padding:6px 8px}
.shelf-path{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);min-width:0}
.shelf-path button{padding:3px 10px;font-size:11px}
#shelfDir{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shelf-list{height:236px;overflow:auto;border:1px solid var(--line);border-radius:5px;background:#13181a}
.shelf-folder{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #252c30;border-radius:0;background:transparent;padding:9px 12px;color:var(--blue)}
.shelf-item{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid #252c30;cursor:grab;touch-action:none;user-select:none}
.shelf-item:hover,.shelf-item:focus-visible{background:#212a2c}
.shelf-item.unsafe{opacity:.5}
.shelf-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shelf-size{color:var(--muted);font-size:11px;flex-shrink:0}
.shelf-hint{font-size:11px;color:var(--muted)}
.drag-ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:50;padding:6px 10px;background:var(--accent);color:#172313;border-radius:4px;font-weight:600;font-size:12px;white-space:nowrap}
@media(min-height:900px){body.served .workspace{padding-top:18px;gap:14px}body.served .history{height:170px}body.served .lane{height:84px}body.served .block{height:72px}body.served .block canvas{height:48px}.compare-row{height:72px}.score-hero{height:104px}#matchScore{font-size:54px}.shelf-list{height:400px}}

/* Phone (2026-09-28, for the hosted copy): one column that scrolls, so the layers, history and
   controls stack instead of squeezing into the desktop grid. Inputs are 16px because iOS Safari
   zooms the page into any smaller input on focus. Wider screens are untouched. */
@media (max-width:760px){
body{height:auto;min-height:100vh;overflow-y:auto;font-size:14px}
header{height:auto;flex-wrap:wrap;gap:10px 16px;padding:12px 16px}
.brand{min-width:0}
.project{flex:1 1 100%;order:2}
.file-actions{order:3;flex-wrap:wrap}
.transport{height:auto;flex-wrap:wrap;gap:8px;padding:10px 16px}
.transport .divider,.transport .spacer{display:none}
.transport label{margin-left:0}
main{display:flex;flex-direction:column;flex:none}
.workspace{padding:16px;gap:12px}
.section-title{flex-wrap:wrap;gap:10px}
.add-actions{flex-wrap:wrap}
h1{font-size:20px}
.timeline-shell{flex:none;min-height:0}
#ruler{margin-left:112px}
.lane-label{width:112px;padding:10px 8px}
.lane-name{max-width:84px}
#lanes{flex:none;overflow:visible}
.drop-hint{display:none}
.history{height:auto}
#editLog{max-height:200px}
.log-entry{grid-template-columns:40px 1fr 64px}
aside{border-left:0;border-top:1px solid var(--line)}
#controls{overflow:visible}
footer{height:auto;flex-direction:column;gap:2px;padding:8px 16px}
#status{max-width:100%;white-space:normal}
button,select{padding:9px 12px}
input[type=text],input[type=number],select,.project input{font-size:16px}
.control-head input[type=number]{width:96px;font-size:16px}
.control input[type=range]{height:28px}
}