@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root { --ink:#11110f; --paper:#e8e3d6; --panel:#d8d3c7; --line:#67665e; --acid:#d7ff3f; --cyan:#39d9c8; --orange:#f16a35; --muted:#8b897e; --mono:'DM Mono',monospace; --serif:'Instrument Serif',serif; }
* { box-sizing:border-box; }
html { background:var(--ink); color:var(--ink); }
body { margin:0; min-width:320px; min-height:100vh; background:var(--paper); font-family:var(--mono); font-size:12px; }
button,input,label { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,label:has(input:focus-visible) { outline:3px solid var(--orange); outline-offset:2px; }
.masthead { height:66px; display:grid; grid-template-columns:280px 1fr auto; align-items:center; border-bottom:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:0 24px; gap:24px; }
.wordmark { color:inherit; text-decoration:none; font-size:20px; letter-spacing:-.08em; display:flex; width:max-content; }
.wordmark span { font-weight:300; }.wordmark b { color:var(--acid); font-weight:500; }
.masthead p { margin:0; color:#8d8c84; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.file-state { display:flex; align-items:center; gap:9px; color:#b9b7ad; text-transform:uppercase; font-size:9px; }
.file-state i { width:7px; height:7px; background:var(--acid); border-radius:50%; box-shadow:0 0 9px rgba(215,255,63,.55); }
main { display:grid; grid-template-columns:280px minmax(520px,1fr) 300px; min-height:calc(100vh - 104px); }
.source-rail,.control-rail { background:var(--panel); padding:20px; }
.source-rail { border-right:1px solid var(--ink); }.control-rail { border-left:1px solid var(--ink); }
.section-label { display:flex; align-items:center; gap:12px; font-weight:500; font-size:10px; letter-spacing:.08em; padding-bottom:12px; border-bottom:1px solid var(--line); }
.section-label span { color:var(--orange); }
.drop-zone { min-height:118px; margin-top:14px; border:1px dashed var(--line); display:grid; place-items:center; align-content:center; gap:4px; cursor:pointer; background:rgba(255,255,255,.12); transition:.15s; }
.drop-zone:hover { background:var(--acid); border-color:var(--ink); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
.drop-zone input { position:absolute; opacity:0; pointer-events:none; }
.drop-icon { border:1px solid currentColor; padding:4px 6px; font-size:9px; margin-bottom:5px; }
.drop-zone strong { font-size:13px; }.drop-zone small { color:var(--line); }
.text-button { min-height:44px; border:0; background:none; padding:8px 0; text-decoration:underline; cursor:pointer; font-size:10px; }
.source-meta dl { margin:8px 0 20px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-bottom:0; }
.source-meta dl div { padding:8px; border-bottom:1px solid var(--line); }.source-meta dl div:nth-child(odd) { border-right:1px solid var(--line); }
dt { font-size:8px; color:var(--line); }dd { margin:3px 0 0; font-size:10px; }
.lane-head { margin-top:6px; }.lane-list { display:grid; margin-top:12px; border-top:1px solid var(--line); }
.lane { min-height:54px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; display:grid; grid-template-columns:1fr auto; align-items:center; text-align:left; padding:8px 4px; }
.lane span { display:flex; align-items:center; gap:8px; font-size:10px; }.lane i { width:8px;height:8px;border:1px solid var(--ink);border-radius:50%; }.lane small { grid-column:1;color:var(--line);margin-left:16px; }.lane b { grid-row:1 / span 2;grid-column:2;font-size:17px;font-weight:300; }
.lane.active { background:var(--ink);color:var(--paper);padding-inline:10px; }.lane.active i { background:var(--acid);border-color:var(--acid);box-shadow:0 0 6px var(--acid); }
.workbench { min-width:0; padding:26px 30px; background-color:var(--paper); background-image:radial-gradient(#b8b3a8 0.65px,transparent .65px); background-size:8px 8px; }
.workbench-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
.eyebrow { font-size:9px; color:var(--orange); letter-spacing:.12em; }
h1 { font:400 clamp(50px,5.2vw,84px)/.78 var(--serif); letter-spacing:-.035em; margin:13px 0 0; }h1 em { font-weight:400;color:var(--orange); }
.readout { text-align:right; border-top:1px solid var(--ink); padding-top:8px; min-width:112px; }.readout strong { font:400 42px/1 var(--serif); }.readout span { display:block;font-size:8px;text-transform:uppercase; }
.transport { display:grid;grid-template-columns:150px minmax(240px,1fr) 170px;min-height:48px;border:1px solid var(--ink);border-bottom:0;background:var(--ink);color:var(--paper); }
.transport button { min-height:46px;border:0;border-right:1px solid #4b4b46;background:transparent;color:inherit;cursor:pointer; }
.transport-play { display:flex;align-items:center;gap:11px;padding:0 14px;text-align:left; }.transport-play span { color:var(--acid);font-size:16px; }.transport-play b { font-size:9px;letter-spacing:.06em; }
.ab-switch { display:grid;grid-template-columns:1fr 1fr; }.ab-switch button { display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;letter-spacing:.05em; }.ab-switch button span { display:grid;place-items:center;width:20px;height:20px;border:1px solid #77766f;font-size:8px; }.ab-switch button.active { background:var(--acid);color:var(--ink); }.ab-switch button.active span { border-color:var(--ink);background:var(--ink);color:var(--acid); }
.transport-state { display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:8px;padding:0 11px;color:#aaa89e; }.transport-state i { grid-row:1 / span 2;width:7px;height:7px;border-radius:50%;background:#77766f; }.transport-state span { font-size:8px; }.transport-state small { font-size:6px;color:#77766f; }.transport.playing .transport-state i { background:var(--acid);box-shadow:0 0 8px rgba(215,255,63,.7); }
.timeline-shell { border:1px solid var(--ink); background:rgba(232,227,214,.96); position:relative; box-shadow:6px 6px 0 var(--ink); }
.ruler { height:27px; display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); }.ruler span { padding:7px 10px;font-size:8px;border-right:1px solid var(--line); }.ruler span:last-child { border:0; }
#timeline { display:block;width:100%;height:340px; }
.playhead { position:absolute;z-index:3;top:27px;bottom:27px;left:2.7%;width:2px;background:var(--acid);box-shadow:0 0 0 1px rgba(17,17,15,.55);pointer-events:none;transition:left 35ms linear; }
.grid-line { stroke:#aaa69c;stroke-width:.7;stroke-dasharray:2 3; }.grid-line.bar { stroke:var(--ink);stroke-width:1;stroke-dasharray:none; }
.lane-bg { fill:transparent;stroke:#aaa69c;stroke-width:.6; }.lane-bg.selected { fill:rgba(215,255,63,.13); }
#timeline text { font:8px var(--mono);fill:#67665e;letter-spacing:.05em; }
.note-before { fill:none;stroke:#11110f;stroke-width:1.2; }.note-after { fill:#77766f; }.note-after.target { fill:var(--orange); }
.legend { display:flex;gap:20px;padding:9px 12px;border-top:1px solid var(--ink);font-size:8px;text-transform:uppercase; }.legend span { display:flex;align-items:center;gap:6px; }.legend i { width:14px;height:6px;display:block; }.legend .before { border:1px solid var(--ink); }.legend .after { background:var(--orange); }
.event-strip { display:grid;grid-template-columns:repeat(8,1fr);margin-top:18px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink); }
.event-strip div { min-width:0;padding:9px 6px;border-right:1px solid var(--line);display:grid;gap:2px; }.event-strip div:last-child{border:0}.event-strip span{font-size:7px;color:var(--muted)}.event-strip b{font-size:11px}.event-strip small{color:var(--orange)}
.event-strip .unchanged { opacity:.45; }
.proof-strip { position:relative;display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(330px,2fr) minmax(170px,1fr);margin-top:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:opacity .15s; }
.proof-strip.pending { opacity:.48; }.proof-strip.pending::after { content:'UNAPPLIED RECIPE';position:absolute;right:8px;top:-16px;background:var(--orange);color:var(--ink);padding:3px 6px;font-size:6px; }
.proof-summary,.protected-proof { min-width:0;padding:9px 11px;display:grid;gap:3px; }.proof-summary { border-right:1px solid #4b4b46; }.protected-proof { border-left:1px solid #4b4b46; }.proof-strip span,.proof-strip small { font-size:7px;color:#8f8e85; }.proof-strip strong { font-size:10px;color:var(--acid);font-weight:500; }.proof-strip small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.effect-ledger { display:grid;grid-template-columns:repeat(5,1fr); }.effect-ledger>span { min-width:0;padding:8px 6px;border-right:1px solid #343431;display:grid;gap:2px; }.effect-ledger>span:last-child { border:0; }.effect-ledger b { font-size:6px;font-weight:400;color:#8f8e85; }.effect-ledger strong { color:#66665f; }.effect-ledger .active strong { color:var(--orange); }.effect-ledger small { font-size:6px; }
.control { display:grid; grid-template-columns:1fr auto; gap:7px; padding:11px 0; border-bottom:1px solid var(--line); }
.control span { display:grid;gap:2px; }.control b { font-size:10px;font-weight:500; }.control small { font-size:8px;color:var(--line); }.control output { font-size:11px;color:var(--orange); }
.control input { grid-column:1 / -1;width:100%;accent-color:var(--orange);height:14px;cursor:pointer; }
.protect-note { margin:14px 0; border:1px solid var(--line); padding:10px;display:flex;justify-content:space-between;font-size:8px; }.protect-note strong { color:#347e73; }
.primary { width:100%;min-height:52px;border:1px solid var(--ink);background:var(--acid);font-weight:500;display:flex;justify-content:space-between;align-items:center;padding:0 14px;cursor:pointer;box-shadow:4px 4px 0 var(--ink); }.primary:hover { transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink); }.primary span { font-size:20px; }
.export-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px; }.export-row button { min-height:44px;border:1px solid var(--ink);background:transparent;font-size:9px;cursor:pointer; }.export-row button:hover { background:var(--ink);color:var(--paper); }
.status { min-height:36px;margin:14px 0 0;font-size:9px;line-height:1.5;color:var(--line); }.status.success { color:#25685f; }.status.error { color:#b33120; }.status.pending { color:#9d491f; }
footer { height:38px;background:var(--ink);color:#8d8c84;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:8px;text-transform:uppercase;letter-spacing:.06em; }footer p { margin:0; }
@media (max-width:1100px) { main { grid-template-columns:240px minmax(470px,1fr) 270px; }.source-rail,.control-rail{padding:16px}.workbench{padding:22px 20px} }
@media (max-width:800px) {
  .masthead { height:60px;grid-template-columns:1fr auto;padding:0 14px; }.masthead p{display:none}.file-state span{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main { display:flex;flex-direction:column;min-height:auto; }.source-rail { order:1;border:0;border-bottom:1px solid var(--ink);padding:20px 14px; }.workbench { order:2;padding:22px 14px 26px;border-bottom:1px solid var(--ink); }.control-rail { order:3;border:0;padding:20px 14px; }
  .workbench-head { align-items:flex-end; }.eyebrow{font-size:8px}h1{font-size:48px;line-height:.83}.readout{min-width:74px}.readout strong{font-size:34px}.readout span{font-size:7px}
  .transport{grid-template-columns:130px 1fr 150px}.transport-state small{display:none}#timeline { height:278px; }.timeline-shell{box-shadow:4px 4px 0 var(--ink)}.event-strip{grid-template-columns:repeat(4,1fr)}.event-strip div:nth-child(4){border-right:0}.event-strip div:nth-child(-n+4){border-bottom:1px solid var(--line)}.proof-strip{grid-template-columns:1fr 2fr 1fr}
  .source-meta dl { grid-template-columns:repeat(4,1fr); }.source-meta dl div{border-right:1px solid var(--line)!important}.source-meta dl div:last-child{border-right:0!important}.lane-list{grid-template-columns:1fr 1fr}.lane:nth-child(odd){border-right:1px solid var(--line)}
  .control { min-height:62px; }.primary{min-height:56px}.export-row button{min-height:48px}
  footer{height:auto;min-height:54px;padding:10px 14px;gap:10px}footer p{text-align:center}
}
@media (max-width:430px) {
  .masthead{height:44px;padding:0 10px}.wordmark{font-size:17px}.file-state{font-size:7px}.file-state span{max-width:128px}
  .source-rail{padding:7px 10px 8px}.source-rail>.section-label:first-child{padding-bottom:4px;height:20px}.drop-zone{min-height:42px;margin-top:4px;display:flex;gap:7px}.drop-zone .drop-icon,.drop-zone small,.text-button,.source-meta,.lane-head{display:none}.drop-zone strong{font-size:10px}.lane-list{grid-template-columns:repeat(3,1fr);margin-top:4px;border:1px solid var(--line)}.lane{min-height:38px;padding:3px 5px;border-bottom:0;border-right:1px solid var(--line)!important;grid-template-columns:1fr auto}.lane:last-child{border-right:0!important}.lane span{font-size:7px;gap:4px}.lane i{width:6px;height:6px}.lane small{display:none}.lane b{font-size:12px}.lane.active{padding-inline:5px}
  .workbench{padding:6px 10px 8px}.workbench-head{height:25px;margin-bottom:4px;align-items:center;justify-content:flex-end}.workbench-head>div:first-child{display:none}.readout{min-width:96px;padding-top:2px;display:flex;align-items:baseline;justify-content:flex-end;gap:5px}.readout strong{font-size:24px}.readout span{font-size:6px;max-width:55px;text-align:left}
  .transport{grid-template-columns:98px 1fr;min-height:42px}.transport button{min-height:40px}.transport-play{padding:0 9px;gap:7px}.transport-play b{font-size:7px}.ab-switch button{font-size:7px;gap:4px}.ab-switch button span{width:17px;height:17px}.transport-state{display:none}
  .ruler{height:19px}.ruler span{padding:4px 6px;font-size:7px}#timeline{height:105px}.playhead{top:19px;bottom:22px}.legend{height:22px;padding:5px 8px;font-size:6px;gap:12px}.event-strip{display:none}.timeline-shell{box-shadow:3px 3px 0 var(--ink)}
  .proof-strip{grid-template-columns:1fr 1fr;margin-top:6px}.proof-summary,.protected-proof{padding:4px 6px;gap:1px;min-height:34px}.proof-summary{border-right:1px solid #4b4b46}.protected-proof{border-left:0}.proof-strip strong{font-size:8px}.proof-strip span,.proof-strip small{font-size:5px}.effect-ledger{grid-column:1 / -1;grid-row:2}.effect-ledger>span{padding:3px 4px;gap:0;min-height:27px}.effect-ledger b,.effect-ledger small{font-size:5px}.effect-ledger strong{font-size:7px}
  .control-rail{padding:7px 10px 9px}.control-rail>.section-label{height:22px;padding-bottom:4px}#controls{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}.control{min-height:42px;padding:2px 0;gap:0}.control span{display:block}.control b{font-size:8px}.control small{display:none}.control output{font-size:8px}.control input{height:22px;margin:0}.protect-note{display:none}.primary{min-height:44px;margin-top:5px}.export-row{margin-top:6px}.export-row button{min-height:44px}.status{display:none}
  footer{min-height:36px;padding:6px 10px}footer p{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}