@layer theme,base;@layer components{.kbd{min-width:22px;height:22px;font:600 11px/1 var(--font-mono);letter-spacing:0;text-transform:none;opacity:.9;background:#00000038;border-radius:6px;justify-content:center;align-items:center;padding:0 6px;display:inline-flex;box-shadow:inset 0 0 0 1px #fff3,0 1px #00000059}.keycap{width:40px;height:40px;font:400 18px/1 var(--font-pixel);font-variation-settings:"ELSH" var(--pixel-shape);color:var(--color-ink-strong);background:linear-gradient(#3a4046,#23272a);border-radius:10px;flex:none;justify-content:center;align-items:center;display:inline-flex;box-shadow:0 2px #08090a,0 0 0 1px #0009,inset 0 1px #fff3}.keycap[data-on]{color:#fff;background:linear-gradient(180deg, var(--a-hi), var(--a-lo));box-shadow:0 2px 0 var(--a-deep), 0 0 14px rgba(var(--ar), .55), 0 0 0 1px #0000008c, inset 0 1px 0 #ffffff73}button.keycap{cursor:pointer;border:0;padding:0;transition:filter .15s}button.keycap:hover:not(:disabled){filter:brightness(1.15)}button.keycap:disabled{opacity:.35;cursor:not-allowed}.keycap[data-size=sm]{border-radius:8px;width:30px;height:30px;font-size:14px}.led{background:#4a5157;border-radius:50%;flex:none;width:8px;height:8px;box-shadow:inset 0 1px 1px #0009}.led[data-tone=ok]{background:#6fdc6a;box-shadow:0 0 8px #6fdc6acc}.led[data-tone=warn]{background:#f5b33d;box-shadow:0 0 8px #f5b33db3}.led[data-tone=live]{background:var(--a-hi);box-shadow:0 0 10px rgba(var(--ar), 1);animation:1.6s ease-in-out infinite led-pulse}@keyframes led-pulse{50%{opacity:.45}}.slot{background:#0000002e;border:1.5px dashed #ffffff21;border-radius:14px;flex-direction:column;gap:10px;min-height:128px;padding:16px;display:flex;position:relative}.slot[data-filled]{background:linear-gradient(180deg, rgba(var(--ar), .16) 0%, rgba(var(--ar), .05) 100%), linear-gradient(180deg, #24282b, #1d2023);box-shadow:0 8px 16px -6px #0009, 0 0 0 1px #0009, inset 0 0 0 1.5px rgba(var(--ar), .55), inset 0 1px 0 #ffffff1f;border:0}.qrow[data-interactive]{cursor:pointer;transition:background .15s}.qrow[data-interactive]:hover{background:linear-gradient(#292e31 0%,#212427 100%)}.qrow[data-picked]{background:linear-gradient(180deg, rgba(var(--ar), .14) 0%, rgba(var(--ar), .04) 100%), linear-gradient(180deg, #24282b, #1d2023);box-shadow:0 8px 16px -6px #0009, 0 0 0 1px #0009, inset 0 0 0 1.5px rgba(var(--ar), .5), inset 0 1px 0 #ffffff1f}.navitem{width:100%;min-height:48px;font:600 13px/1 var(--font-sans);letter-spacing:.04em;color:var(--color-ink-label);text-align:left;white-space:nowrap;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:0 14px;text-decoration:none;transition:background .15s,color .15s;display:flex}.navitem:hover{color:var(--color-ink);background:#ffffff0a}.navitem[data-active],.navitem[aria-current=page]{color:var(--color-ink-strong);background:linear-gradient(#3a4046 0%,#2b3034 60%,#24282b 100%);box-shadow:0 2px #08090a,0 6px 12px -2px #0009,0 0 0 1px #0009,inset 0 1px #fff3}.navitem svg{color:var(--color-ink-muted);flex:none}.navitem[data-active] svg,.navitem[aria-current=page] svg{color:var(--a-hi);filter:drop-shadow(0 0 4px rgba(var(--ar), .7))}.pipe{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.pipe-step{font:600 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-faint);border-radius:7px;padding:6px 8px}.pipe-step[data-done]{color:var(--color-ink-sub)}.pipe-step[data-on]{color:#fff;background:linear-gradient(180deg, rgba(var(--ar), .5), rgba(var(--ar), .25));box-shadow:inset 0 0 0 1px rgba(var(--ar), .75), 0 0 14px -2px rgba(var(--ar), .6)}.pipe-sep{background:#ffffff29;width:10px;height:1px}.code{font:500 12.5px/1.55 var(--font-mono);color:var(--a-pale);white-space:pre;border-radius:12px;padding:13px 16px;display:block;overflow-x:auto}.copyfield{border-radius:12px;align-items:center;gap:10px;min-height:50px;padding:0 6px 0 16px;display:flex}.copyfield>code{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:500 13px/1 var(--font-mono);color:var(--color-ink-soft);flex:1;overflow:hidden}.dropzone{min-height:120px;color:var(--color-ink-label);font:500 13px/1.3 var(--font-sans);text-align:center;cursor:pointer;background:#0003;border:1.5px dashed #ffffff29;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:18px;transition:border-color .15s,background .15s;display:flex}.dropzone:hover{border-color:rgba(var(--ar), .6);background:rgba(var(--ar), .05)}.avatar{width:40px;height:40px;font:700 15px/1 var(--font-sans);color:var(--color-ink-strong);text-transform:uppercase;background:linear-gradient(#3a4046,#23272a);border-radius:12px;flex:none;justify-content:center;align-items:center;display:inline-flex;box-shadow:0 0 0 1px #0009,inset 0 1px #ffffff2e}.colorwell{cursor:pointer;border-radius:12px;align-items:center;gap:12px;min-height:54px;padding:0 14px 0 8px;display:flex;position:relative}.colorwell>i{border-radius:9px;flex:none;width:38px;height:38px;box-shadow:0 0 0 1px #0009,inset 0 1px 1px #ffffff59}.colorwell:focus-visible{outline:2px solid rgba(var(--ar), .85);outline-offset:3px}.bootline{font:500 13px/1.3 var(--font-mono);color:var(--color-ink-soft);align-items:center;gap:12px;animation:.25s ease-out both boot-in;display:flex}@keyframes boot-in{0%{opacity:0;transform:translate(-6px)}}.toast-action{font:700 13px/1 var(--font-sans);letter-spacing:.01em;text-transform:capitalize;color:var(--a-text);background:rgba(var(--ar), .12);box-shadow:inset 0 0 0 1px rgba(var(--ar), .45);border:0;border-radius:8px;flex:none;padding:8px 10px}.toast-action:hover{color:#fff;background:rgba(var(--ar), .25)}.blink{animation:1s steps(2,jump-none) infinite led-pulse}}@layer utilities;