.huddi,.huddi *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:none!important;-moz-osx-font-smoothing:unset;font-smooth:never;text-rendering:geometricPrecision;font-variant-ligatures:none;letter-spacing:0!important}.huddi{--s: 2;--huddi-ink: #e8e8e8;--huddi-cut: #0d0d0d;--huddi-solid: #e8e8e8;font-family:Silkscreen,monospace;font-size:calc(8px * var(--s));line-height:1;color:var(--huddi-solid);white-space:pre;user-select:none;-webkit-user-select:none;pointer-events:none}.huddi.blend-difference{mix-blend-mode:difference;color:#fff}.huddi.blend-solid{mix-blend-mode:normal;color:var(--huddi-solid)}.huddi .hit{pointer-events:auto;cursor:pointer}.huddi button.hit{display:block;width:100%;background:none!important;border:none!important;outline:none!important;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}.huddi .osdsol-bar{cursor:ew-resize;touch-action:pan-y;padding:1em 0;margin:-1em 0;position:relative}.huddi .osdsol-xy{cursor:crosshair;touch-action:none}.huddi .osdsol-hdr{cursor:pointer}.huddi .grid1 .gc{display:inline-block;width:1ch;text-align:center;line-height:1}.huddi .grid1 .gc.cut{background:var(--huddi-ink);color:var(--huddi-cut)}.huddi.blend-difference .grid1 .gc.cut{background:#fff;color:#000}.huddi .grid1 .gline{display:block;line-height:1}.huddi .osd-gap{height:1em;pointer-events:none}.huddi .row{white-space:pre}.huddi .row.disabled{pointer-events:none;display:none}.huddi .panel{pointer-events:auto;text-align:left;max-height:calc(100dvh - 8px * var(--s) - 2.5em);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;touch-action:pan-y}.huddi .panel::-webkit-scrollbar{display:none}.huddi .anchor-tr{position:absolute;top:calc(8px * var(--s));right:calc(8px * var(--s));display:flex;flex-direction:column;align-items:flex-end}.huddi .anchor-bl{position:absolute;bottom:calc(8px * var(--s) + 1ch);left:calc(8px * var(--s) + 1ch)}.huddi .anchor-br{position:absolute;bottom:calc(8px * var(--s));right:calc(8px * var(--s));text-align:right;pointer-events:none}.huddi .credits{display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}.huddi .credit-line{display:block;min-height:1em;line-height:1}.huddi .midi-hud{opacity:0;transition:opacity .25s steps(2,end);pointer-events:none}.huddi .midi-hud.visible{opacity:1}.huddi .learn-chip{opacity:0;transition:opacity .2s steps(2,end);pointer-events:none}.huddi .learn-chip.visible{opacity:1}.huddi .pad-col{display:inline-block;vertical-align:bottom;line-height:1;white-space:pre}.huddi .pad-col+.pad-col{margin-left:1ch}.huddi .pad-readout{line-height:1;white-space:pre;pointer-events:none;min-height:2em}.huddi .xy-pad,.huddi .joy-pad,.huddi .vbar-pad{line-height:1;white-space:pre}.huddi-stage,.huddi .huddi-stage{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:56;touch-action:none;font-family:Silkscreen,monospace;font-size:calc(8px * var(--s, 2));line-height:1;color:#fff;-webkit-font-smoothing:none!important;text-rendering:geometricPrecision;font-variant-ligatures:none;letter-spacing:0!important;user-select:none;-webkit-user-select:none}.huddi-stage-shape{z-index:55}.huddi-stage .stage-knob,.huddi-stage .port-knob,.huddi-stage .shape-knob{position:absolute;left:0;top:0;line-height:1;white-space:pre;text-align:left;box-sizing:border-box}.huddi-stage .port-knob{pointer-events:auto;cursor:grab;touch-action:none}.huddi-stage .port-knob.dragging{cursor:grabbing}.huddi-stage .shape-knob{pointer-events:none;text-align:center}.huddi-stage .stage-knob-grid,.huddi-stage .port-knob-grid,.huddi-stage .shape-knob-grid,.huddi-stage .stage-readout,.huddi-stage .shape-readout{line-height:1;white-space:pre;pointer-events:none;cursor:inherit}.huddi-stage .grid1 .gline{display:block!important;line-height:1;white-space:pre}.huddi-stage .grid1 .gc{display:inline-block;width:1ch;text-align:center;line-height:1}.huddi-stage .grid1 .gc.cut{background:#fff;color:#000}:root{--bg: #0a0a0a;--fg: #e8e8e8;--muted: #888;--yellow: #f5e000;--card: #141414;--line: #2a2a2a}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;line-height:1.45}.huddi-face{font-family:Silkscreen,monospace;font-weight:400;letter-spacing:0;-webkit-font-smoothing:none}.top{padding:1.5rem 1.25rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0a0a0aeb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}.brand{font-size:24px}.tag{color:var(--muted);margin:.35rem 0 .75rem;font-size:.9rem}.toc{display:flex;flex-wrap:wrap;gap:.75rem}.toc a{color:var(--yellow);text-decoration:none;font-size:.85rem}.toc a:hover{text-decoration:underline}main{max-width:960px;margin:0 auto;padding:1.5rem 1.25rem 4rem}section{margin:2.5rem 0}h2{font-family:Silkscreen,monospace;font-weight:400;font-size:18px;margin:0 0 1rem;color:var(--yellow)}h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .75rem}.laws{padding-left:1.25rem}.laws li{margin:.35rem 0}.note{color:var(--muted);font-size:.9rem}code{font-family:ui-monospace,monospace;font-size:.9em;color:var(--yellow)}.token-table{overflow-x:auto}.token-table table{border-collapse:collapse;width:100%;font-size:.9rem}.token-table th,.token-table td{border-bottom:1px solid var(--line);padding:.4rem .5rem;text-align:left}.token-table th{color:var(--muted);font-weight:500}.token-list{columns:2;gap:1.5rem;color:var(--muted);font-size:.85rem}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}.swatch{background:var(--card);border:1px solid var(--line);padding:1rem}.swatch label{display:block;margin-top:.75rem;font-size:.75rem;color:var(--muted)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.demo-card{background:var(--card);border:1px solid var(--line);padding:1rem}.stage-frame{padding:1rem;min-height:12rem;position:relative}.add-bg{background:#0d0d0d}.dark-bg{background:#111}.huddi.add-ink{--huddi-ink: var(--yellow);--huddi-cut: #0d0d0d;--huddi-solid: var(--yellow);color:var(--yellow)}.motion-row{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}.hit-btn{font-family:Silkscreen,monospace;font-weight:400;font-size:12px;background:transparent;color:var(--yellow);border:1px solid var(--yellow);padding:.5rem .75rem;cursor:pointer}.hit-btn:hover{background:var(--yellow);color:#000}.foot{border-top:1px solid var(--line);padding:1.25rem;text-align:center;color:var(--muted);font-size:.85rem}a{color:var(--yellow)}