html,body{background:var(--paper-2);overflow:hidden}.app{grid-template-columns:minmax(0, 1fr) var(--panel-w);grid-template-rows:var(--masthead-h) minmax(0, 1fr) var(--toolbar-h) auto;grid-template-areas:"head panel""stage panel""tools panel""status panel";height:100vh;display:grid}.masthead{justify-content:center;gap:var(--s-4);padding:0 var(--s-24);flex-direction:column;grid-area:head;display:flex}.masthead .name{align-self:flex-start}.toolbar{justify-content:space-between;align-items:center;gap:var(--s-24);padding:0 var(--s-24);grid-area:tools;min-width:0;display:flex}.toolbar .actions{gap:var(--s-24);align-items:center}.status{align-items:flex-start;gap:var(--s-64);padding:var(--s-12) var(--s-24) var(--s-24);min-width:0;color:var(--ink-2);white-space:nowrap;grid-area:status;display:flex;overflow:hidden}.status .col{flex-direction:column;align-items:flex-start;display:flex}.status .hi{color:var(--ink)}.status .inline{gap:var(--s-8);display:flex}.status a{color:inherit;text-decoration:none}.status a:focus-visible{outline:1px solid var(--signal);outline-offset:3px}.status .msg{text-overflow:ellipsis;min-width:0;overflow:hidden}.status .msg.busy{color:var(--signal)}.status .msg.error{color:var(--signal);text-transform:none;letter-spacing:0;white-space:normal}.stage{min-width:0;min-height:0;padding:var(--s-32);grid-area:stage;justify-content:center;align-items:center;display:flex;position:relative}.stage>canvas,.stage>svg{max-width:100%;max-height:100%;display:block}.stage .empty{gap:var(--s-24);position:absolute}.stage:not(.is-empty) .empty,.stage.is-empty>canvas,.stage.is-empty>svg{display:none}.stage.drop{outline:1px solid var(--signal);outline-offset:calc(var(--s-16) * -1)}.panel{border-left:1px solid var(--line);grid-area:panel;overflow-y:auto}.panel .section+.section{margin-top:var(--section-gap);border-top:1px solid var(--line)}@media (max-width:1280px){.toolbar .actions{gap:var(--s-16);font-size:var(--t-m);line-height:var(--t-m-lh)}}.stage>canvas{max-width:none;max-height:none}.gradient-editor{padding:var(--s-12) var(--s-12) 0;border-top:1px solid var(--line)}.gradient-bar{width:100%;height:var(--s-24);border:1px solid var(--swatch-line);cursor:copy;display:block}.gradient-track{height:var(--s-24);cursor:copy;position:relative}.gradient-stop{appearance:none;top:var(--s-8);border:1px solid var(--swatch-line);cursor:ew-resize;touch-action:none;width:12px;height:12px;margin-left:-6px;padding:0;position:absolute}.gradient-stop:before{content:"";width:1px;height:var(--s-8);background:var(--ink-2);margin-left:-.5px;position:absolute;bottom:100%;left:50%}.gradient-stop[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:1px}.gradient-stop[aria-pressed=true]:before{background:var(--ink)}.gradient-stop:focus-visible{outline:1px solid var(--signal);outline-offset:2px}.gradient-stop[aria-pressed=true]:focus-visible{outline:2px solid var(--signal);outline-offset:1px}.app{grid-template-rows:var(--masthead-h) minmax(0, 1fr) auto var(--toolbar-h) auto;grid-template-areas:"head panel""stage panel""strip panel""tools panel""status panel"}.strip{gap:var(--s-8);padding:var(--s-4) var(--s-24);grid-area:strip;min-width:0;display:flex;overflow-x:auto}.strip[hidden]{display:none}.thumb{appearance:none;cursor:pointer;margin:var(--s-4) var(--s-4);background:0 0;border:0;flex:none;padding:0;display:block}.thumb canvas{display:block}.thumb[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.thumb:focus-visible{outline:1px solid var(--signal);outline-offset:2px}.thumb[aria-pressed=true]:focus-visible{outline:2px solid var(--signal)}