#controller{width:min(60rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);color:var(--text);padding:var(--space-5);position:fixed;top:50%;left:50%;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transform:translate(-50%,-50%)}#controller:not([open]){display:none}#controller[open]{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:var(--space-4)}#controller:focus{outline:none}#controller::backdrop{background:#0009}#controller input{user-select:text}#controller>header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:var(--space-3)}#controller>header>h2{font-size:var(--text-lg);font-weight:600;letter-spacing:-.03em}#controller>div{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius)}#controller>div>.field{flex:1 1 14rem}#controller>div>p{flex:1 0 100%;color:var(--muted);font-size:var(--text-sm);line-height:1.5}#controller>div>div{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:var(--space-2)}#controller>div>div>.btn{flex:0 0 auto}#controller>p{color:var(--muted);font-size:var(--text-sm);line-height:1.5}#controller>figure{min-width:44rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:var(--space-3)}#controller>figure>svg{width:100%;height:auto;display:block;user-select:none}#controller>figure>svg>path{fill:var(--bg);stroke:var(--line);stroke-width:2}#controller>figure>svg>rect{fill:var(--elevated);stroke:var(--line);stroke-width:1.5}#controller>figure>svg>g[aria-hidden] line{stroke:var(--line);stroke-width:1.5}#controller>figure>svg>g[aria-hidden] circle{fill:var(--muted)}#controller>figure>svg text{font-family:var(--font-mono);font-size:10px;text-anchor:middle;dominant-baseline:central;fill:currentColor;pointer-events:none}#controller>figure>svg>g[role=button]{color:var(--text);cursor:pointer;outline:none}#controller>figure>svg>g[role=button]>:first-child{fill:var(--elevated);stroke:var(--line);stroke-width:1.5}#controller>figure>svg>g[role=button]>text:nth-child(2):not(:last-child){font-family:var(--font-sans);font-size:12px;font-weight:700}#controller>figure>svg>g[role=button]>text:nth-child(3){font-size:9px;opacity:.65}#controller>figure>svg>g[role=button]>svg{stroke:currentColor;fill:none}#controller>figure>svg>g.pad-legend>text:nth-child(2){text-anchor:start}#controller>figure>svg>g.pad-legend>text:nth-child(3){font-size:12px;text-anchor:end}#controller>figure>svg>g[role=button]:hover>:first-child,#controller>figure>svg>g[role=button]:focus-visible>:first-child{stroke:var(--muted)}#controller>figure>svg>g[role=button][data-active=true]>:first-child{stroke:var(--accent);stroke-width:3}#controller>figure>svg>g[role=button][aria-pressed=true]{color:var(--on-accent)}#controller>figure>svg>g[role=button][aria-pressed=true]>:first-child{fill:var(--accent);stroke:var(--accent)}#controller>figure>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}#controller>figure>div>div{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:var(--space-2)}#controller>figure>div>div>span{color:var(--muted);font-size:var(--text-sm)}#controller>figure>div>div>.btn{flex:0 0 auto}#controller>figure>div>div>.btn[aria-pressed=true]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}#controller>dialog{width:min(22rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);color:var(--text);padding:var(--space-5);position:fixed;top:50%;left:50%;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transform:translate(-50%,-50%)}#controller>dialog:not([open]){display:none}#controller>dialog[open]{display:block}#controller>dialog::backdrop{background:#0000008c}#controller>dialog>form{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:var(--space-4)}#controller>dialog header>h2{font-size:var(--text-lg);font-weight:600;letter-spacing:-.03em}#controller>dialog footer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:var(--space-2)}@media(max-width:640px){#controller{padding:var(--space-4)}#controller>div>div{width:100%}#controller>div>div>.btn{flex:1 1 0}}