.editor{display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100dvh - var(--header-h))}.editor-body{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}@media(min-width:1000px){.editor-body{grid-template-columns:minmax(0,1fr) 296px}}.editor-main{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0}.rail{display:flex;align-items:center;gap:12px;padding:0 16px;height:var(--rail-h);border-bottom:1px solid var(--rule);background:var(--surface)}.rail-track{position:relative;flex:1;height:34px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--rule);touch-action:none}.rail-ticks{position:absolute;inset:0;pointer-events:none}.rtick{position:absolute;top:0;bottom:0;width:1px;background:var(--rule)}.rtick.is-major{background:var(--rule-2)}.rtick i{position:absolute;bottom:0;left:3px;font-size:9px;font-style:normal;color:var(--ink-3);opacity:.65}.rail-band{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 8px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--ink-3);overflow:hidden;transition:background .15s,color .15s}.rail-band:last-of-type{border-right:0}.rail-band:hover{background:#7d96af14}.rail-band.is-active{background:var(--mark-soft);color:var(--ink)}.band-name{font-size:12px;font-weight:600}.band-min{font-size:10px;opacity:.75}.rail-marker{position:absolute;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:var(--rule-2);cursor:ew-resize;touch-action:none}.rail-marker:after{content:"";position:absolute;inset:0 -6px}.rail-marker:hover,.rail-marker.is-dragging{background:var(--ink)}.rail-playhead{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;background:var(--mark);cursor:ew-resize;touch-action:none}.rail-playhead:after{content:"";position:absolute;inset:-6px -9px}.playhead-flag{position:absolute;top:-3px;left:50%;transform:translate(-50%);padding:2px 6px;border-radius:var(--r-sm);background:var(--mark);color:var(--mark-ink);font-size:10px;font-weight:600;white-space:nowrap;pointer-events:none}.rail-add{flex:none}.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;border-bottom:1px solid var(--rule)}.editor-hint{margin:0;font-size:12px;color:var(--ink-3)}.editor-hint kbd{padding:1px 4px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);font-family:var(--font-mono);font-size:10px}.editor-actions{display:flex;gap:6px}.canvas-stage{overflow:auto;padding:28px 16px 32px;background-image:linear-gradient(var(--grid-paper) 1px,transparent 1px),linear-gradient(90deg,var(--grid-paper) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}.canvas-scaler{margin-inline:auto}.canvas-frame{display:grid;gap:4px}.ruler{position:relative;display:grid}.ruler-rows{grid-template-columns:1fr}.ruler .tick{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;font-size:9px;color:var(--ink-3)}.ruler .tick b{position:absolute;color:var(--ink-2);font-weight:600}.ruler .tick i{font-style:normal;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}.ruler-cols .tick{border-top:1px solid var(--rule-2);align-items:flex-end;padding-bottom:1px}.ruler-cols .tick b{top:-11px;left:0;transform:translate(-50%)}.ruler-rows .tick{flex-direction:column;border-right:1px solid var(--rule-2);align-items:flex-start;justify-content:center;padding-left:3px}.ruler-rows .tick b{top:0;right:3px;transform:translateY(-50%)}.ruler-cols .tick:before,.ruler-rows .tick:before{content:"";position:absolute;background:var(--rule-2)}.ruler-cols .tick:before{left:0;top:0;width:1px;height:4px}.ruler-rows .tick:before{top:0;right:0;height:1px;width:4px}.ruler .tick-last{position:absolute;font-size:9px;font-weight:600;color:var(--ink-2)}.ruler-cols .tick-last{right:0;top:3px;transform:translate(50%)}.ruler-rows .tick-last{bottom:0;right:3px;transform:translateY(50%)}.canvas-grid{position:relative;display:grid;padding:0;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-sm);touch-action:none}.canvas-grid.is-dragging{cursor:crosshair}.cell{border:1px dashed var(--rule);border-radius:2px;background:var(--surface-2)}.area{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:7px 8px;border:1.5px solid hsl(var(--h) 62% var(--tone-l));border-radius:var(--r-sm);background:linear-gradient(hsl(var(--h) 62% var(--tone-l) / var(--tone-fill)),hsl(var(--h) 62% var(--tone-l) / var(--tone-fill))),var(--surface);cursor:grab;overflow:hidden;user-select:none}.area:hover{background:linear-gradient(hsl(var(--h) 62% var(--tone-l) / calc(var(--tone-fill) + .07)),hsl(var(--h) 62% var(--tone-l) / calc(var(--tone-fill) + .07))),var(--surface)}.area.is-selected{border-color:var(--mark);box-shadow:0 0 0 1px var(--mark),var(--shadow-1);z-index:3}.area-name{font-size:11px;font-weight:600;color:hsl(var(--h) 55% var(--tone-text-l));overflow:hidden;text-overflow:ellipsis;max-width:100%}.area-coords{font-size:9px;color:var(--ink-3);opacity:0;transition:opacity .12s}.area:hover .area-coords,.area.is-selected .area-coords{opacity:1}.handle{position:absolute;width:9px;height:9px;border:1.5px solid var(--mark);border-radius:2px;background:var(--surface);z-index:4}.handle-nw{top:-5px;left:-5px;cursor:nwse-resize}.handle-n{top:-5px;left:50%;margin-left:-4.5px;cursor:ns-resize}.handle-ne{top:-5px;right:-5px;cursor:nesw-resize}.handle-w{top:50%;left:-5px;margin-top:-4.5px;cursor:ew-resize}.handle-e{top:50%;right:-5px;margin-top:-4.5px;cursor:ew-resize}.handle-sw{bottom:-5px;left:-5px;cursor:nesw-resize}.handle-s{bottom:-5px;left:50%;margin-left:-4.5px;cursor:ns-resize}.handle-se{bottom:-5px;right:-5px;cursor:nwse-resize}.draft{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--mark);border-radius:var(--r-sm);background:var(--mark-soft);color:var(--mark);font-size:11px;font-weight:600;pointer-events:none;z-index:5}.inspector{display:grid;align-content:start;gap:0;border-top:1px solid var(--rule);background:var(--surface);overflow-y:auto}@media(min-width:1000px){.inspector{border-top:0;border-left:1px solid var(--rule)}}.track-group{margin-bottom:12px}.track-group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.gap-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.area-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.area-row{display:grid;grid-template-columns:10px minmax(0,1fr) 20px 20px;align-items:center;gap:6px;padding:2px 4px;border-radius:var(--r-sm);cursor:pointer}.area-row:hover{background:var(--surface-2)}.area-row.is-selected{background:var(--mark-soft);box-shadow:inset 2px 0 0 var(--mark)}.area-row.is-hidden .swatch,.area-row.is-hidden .input{opacity:.42}.swatch{width:10px;height:10px;border-radius:2px;border:1.5px solid hsl(var(--h) 62% var(--tone-l));background:hsl(var(--h) 62% var(--tone-l) / .35)}