:root{font-family:Arial,Helvetica,sans-serif;color:#242821;background:#f3f1e9;font-synthesis:none;--muted:#65685d;--line:#d5d6c9;--coral:#d86843;--olive:#899743;--blue:#668b9a}
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased}
main{max-width:1152px;margin:auto;padding:0 36px}
header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
a{color:inherit;text-underline-offset:4px}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;text-decoration:none;min-height:44px}
.mark{background:#242821;color:#fffef8;width:32px;height:32px;text-align:center;padding-top:2px;border-radius:7px}
.edition,.version{font-family:monospace;font-size:12px;color:var(--muted);font-weight:400}
.version{display:flex;gap:16px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:36px 0 26px}
.eyebrow{font-family:monospace;font-size:10px;letter-spacing:1.2px;color:var(--muted);margin:0 0 12px}
h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-1.5px;font-weight:500;line-height:1.08;margin:0;text-wrap:balance}
.dek{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.lab{background:#fdfcf6;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lab-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);font-size:12px}
.lab-heading>span:first-child{display:flex;align-items:center;gap:8px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--olive)}
.duration,.offset,.timecode,.frame-count,.ruler{font-family:monospace;font-variant-numeric:tabular-nums}
.duration{color:var(--muted)}
.stage{padding:15px 24px 12px;background-image:radial-gradient(#d8dacf 0.65px,transparent 0.65px);background-size:16px 16px}
.lane-row{display:grid;grid-template-columns:100px 1fr 90px;align-items:center;gap:20px;height:73px}
.lane-label{display:flex;gap:12px;align-items:center;font-family:monospace;font-size:10px;color:var(--muted)}
.lane-label span{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#34392e}
.lane{height:48px;position:relative}
.lane::before{content:"";position:absolute;left:0;right:0;top:23px;border-top:1px dashed #d4d7c7}
.token{position:absolute;width:44px;height:44px;top:2px;pointer-events:none;user-select:none}
.square{border-radius:10px;background:var(--coral);border:1px solid #b64e2c}
.circle{border-radius:50%;background:var(--olive);border:1px solid #637126}
.diamond{background:var(--blue);border:1px solid #416b7e;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.destination{position:absolute;right:0;top:2px;width:44px;height:44px;border:1px dashed #babfae;border-radius:10px;pointer-events:none}
.offset{text-align:right;font-size:10px;color:var(--muted)}
.transport{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:12px 24px 0}
.buttons{display:flex;gap:8px}
button{font:500 13px Arial,Helvetica,sans-serif;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:6px;color:#34392e;background:#fdfcf6;cursor:pointer;touch-action:manipulation;transition:background-color 120ms ease-out}
#play{background:#293326;color:#fffef8;border-color:#293326;min-width:88px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #242821;outline-offset:4px}
.timecode{font-size:17px;white-space:nowrap}
.timecode span{font-size:12px;color:var(--muted)}
.frame-count{margin-left:auto;font-size:10px;letter-spacing:1px;color:var(--muted)}
.scrubber{padding:14px 24px 0}
.scrubber label{display:flex;justify-content:space-between;font-size:11px;color:#414b38}
.scrubber label span{color:var(--muted)}
input[type=range]{display:block;accent-color:#36452d;width:100%;height:44px;margin:0;cursor:ew-resize;touch-action:pan-y}
.timeline{padding:0 24px 20px}
.ruler{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-bottom:8px}
.clips{position:relative;background:repeating-linear-gradient(to right,transparent 0,transparent calc(16.666667% - 1px),#e5e7db calc(16.666667% - 1px),#e5e7db 16.666667%)}
.clip-track{height:22px;position:relative;margin-top:4px;background:#f0f1e8;border-radius:3px;overflow:hidden}
.clip{position:absolute;left:var(--start);width:var(--length);height:100%;border-radius:3px;padding:4px 10px;font-family:monospace;font-size:10px;color:#2e332b;white-space:nowrap;overflow:hidden}
.coral{background:#edb49c}.olive{background:#c6cd98}.blue{background:#b3cbd4}.return{background:#e3e6d6;color:#4d5841}
#playhead{position:absolute;top:-5px;bottom:-5px;left:0;width:1px;background:#35482d;pointer-events:none}
#playhead::before{content:"";position:absolute;left:-3px;top:-1px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid #35482d}
.motion-note{font-size:12px;margin:0;padding:0 24px 16px;color:var(--muted)}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:24px 0}
h2{font-size:19px;font-weight:500;letter-spacing:-.4px;margin:0 0 8px;text-wrap:balance}
.notes p:not(.eyebrow){font-size:12px;line-height:1.65;color:var(--muted);margin:0;max-width:370px}
.code-note{border-left:1px solid var(--line);padding-left:28px}
.code-label{display:block;font:9px monospace;letter-spacing:1px;color:var(--muted);margin-bottom:12px}
code{display:block;font-size:18px;letter-spacing:-.3px;margin-bottom:8px;color:#384e2c}
footer{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding:14px 0 max(14px,env(safe-area-inset-bottom));color:var(--muted);font-size:10px}
footer span:first-child{margin-right:auto}
footer a{display:flex;align-items:center;gap:10px;min-height:44px}
@media(hover:hover) and (pointer:fine){button:hover{background:#eeefe3}#play:hover{background:#43503d}a:hover{color:#242821}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:620px){main{padding:0 18px}header{height:68px}.wordmark{font-size:18px;gap:8px}.edition{font-size:10px}.version{font-size:10px;gap:5px}.intro{display:block;margin:28px 0 22px}.dek{margin-top:12px;font-size:13px}.eyebrow{font-size:9px;letter-spacing:.8px}.lab-heading{padding:12px 16px}.stage{padding:14px 16px}.lane-row{grid-template-columns:1fr 65px;gap:12px;height:86px}.lane-label{grid-column:1/-1;gap:8px;align-self:end}.lane{height:48px}.offset{font-size:9px}.transport{padding:12px 16px 0;gap:12px}button{padding:0 12px}#play{min-width:70px}.timecode{font-size:14px}.timecode span{font-size:10px}.frame-count{display:none}.scrubber{padding:14px 16px 0}.scrubber label{font-size:10px}.timeline{padding:0 16px 18px}.clip{font-size:9px;padding:5px}.notes{grid-template-columns:1fr;gap:20px;padding:24px 0}.code-note{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid var(--line)}footer{flex-wrap:wrap;gap:0 16px}footer>span:first-child{flex-basis:100%;padding-top:8px}h1{letter-spacing:-.9px}}
.render .notes,.render footer{display:none}
.render .lane-row{height:58px}