.demo-tactile{--void:#000;--surface:#161615;--raise:#1f1f1e;--line:#232322;--text:#f6f5f2;--muted:#8b8b88;--dim:#676764;--gap:5px;--deck-pad:12px;--r-card:20px;--kb-ease:cubic-bezier(.23, 1, .32, 1);background:var(--void);width:100%;color:var(--text);-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;padding:24px;font:400 16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,system-ui,sans-serif;position:relative;container:tactile/inline-size}.demo-tactile *,.demo-tactile :before,.demo-tactile :after{box-sizing:border-box}.demo-tactile p{margin:0}.demo-tactile .kb-desk{grid-template-columns:clamp(200px,22cqi,300px) minmax(0,1fr);gap:16px;display:grid}.demo-tactile .tone-card{grid-area:1/1}.demo-tactile .deck-col{--u:40px;grid-area:1/2;min-width:0}.demo-tactile .kb-floor{grid-area:2/1/auto/-1}.demo-tactile .deck{gap:var(--gap);width:100%;padding:var(--deck-pad);border-radius:var(--r-card);touch-action:manipulation;transition:box-shadow .16s var(--kb-ease);background:linear-gradient(#3b3b3d,#2a2a2c);display:grid;box-shadow:inset 0 1px #ffffff14}.demo-tactile:focus-visible .deck,.demo-tactile:focus .deck{box-shadow:inset 0 1px 0 #ffffff14, 0 0 0 2px var(--void), 0 0 0 4px #6f6f6c}.demo-tactile .row{gap:var(--gap);display:flex}.demo-tactile .key{width:calc(var(--w) * var(--u) - var(--gap));height:calc(var(--u) * .86 - var(--gap));color:#cfcfcb;font-family:inherit;font-weight:500;font-size:clamp(9px, calc(var(--u) * .3), 14px);letter-spacing:-.01em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .11s var(--kb-ease), color .11s var(--kb-ease), transform .11s var(--kb-ease);background:#0b0b0b;border:0;border-radius:5px;margin:0;padding:0;line-height:1;overflow:hidden;box-shadow:0 0 0 1px #1a1a1b}.demo-tactile .row-fn .key{height:calc(var(--u) * .6 - var(--gap));font-size:clamp(8px, calc(var(--u) * .26), 12px)}.demo-tactile .key[data-kc="123"],.demo-tactile .key[data-kc="124"],.demo-tactile .stack .key{font-size:8px}.demo-tactile .key.on{color:#000;background:#f8f8f8;transition-duration:0s;transform:translateY(2px)}.demo-tactile .stack{gap:var(--gap);width:calc(var(--w) * var(--u) - var(--gap));display:grid}.demo-tactile .stack .key{width:100%;height:calc((var(--u) * .86 - var(--gap) - var(--gap)) / 2);border-radius:3px}.demo-tactile .tone-card.knobs{border-radius:var(--r-card);background:#161615;border:1px solid #232322;grid-template-rows:1fr auto;grid-template-columns:1fr 1fr;gap:6px 10px;padding:18px 12px 14px;display:grid}.demo-tactile .kn{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.demo-tactile .kn-big{grid-column:1/-1}.demo-tactile .kn-name,.demo-tactile .kn-ends{color:var(--dim);letter-spacing:-.01em;font-size:12px;line-height:1.5}.demo-tactile .kn-ends{justify-content:space-between;width:92px;display:flex}.demo-tactile .knob{--s:62px;width:var(--s);height:var(--s);cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 50% 40%,#232321,#0e0e0d 72%);border-radius:50%;outline:none;position:relative;box-shadow:0 0 0 1px #000,0 6px 14px #000000bf}.demo-tactile .kn-big .knob{--s:96px}.demo-tactile .knob:focus-visible{box-shadow:0 0 0 1px #000,0 0 0 3px #161615,0 0 0 5px #6f6f6c}.demo-tactile .knob:before{content:"";border-radius:50%;position:absolute;inset:-10px}.demo-tactile .knob-cap,.demo-tactile .knob-rot{pointer-events:none;border-radius:50%;position:absolute}.demo-tactile .knob-cap{background:conic-gradient(from 30deg,#e6e6e1,#7d7d78 22%,#f4f4f0 40%,#808079 62%,#d4d4cf 82%,#e6e6e1);inset:26%;box-shadow:0 0 0 1px #0009}.demo-tactile .knob-rot{transform:rotate(var(--a,0deg));inset:0}.demo-tactile .knob-rot i{background:#f4f4f1;border-radius:1px;width:2.5px;height:20%;margin-left:-1.25px;position:absolute;top:4%;left:50%}.demo-tactile .knob-ticks{pointer-events:none;position:absolute;inset:-9px}.demo-tactile .knob-ticks i{width:1.5px;height:4px;transform-origin:50% calc(var(--s) / 2 + 9px);background:#4a4a46;margin-left:-.75px;position:absolute;top:0;left:50%}.demo-tactile .knob-ticks i:first-child,.demo-tactile .knob-ticks i:last-child{background:#7a7a75;height:7px}.demo-tactile .kb-floor{align-items:center;gap:14px;min-width:0;margin-top:6px;display:flex}.demo-tactile .kb-floor-label{color:var(--muted);font-size:15px}.demo-tactile .kb-cycle{border:1px solid var(--line);background:var(--surface);border-radius:999px;flex:none;align-items:center;height:44px;display:flex}.demo-tactile .kb-pick{min-width:11.5em;height:100%;color:var(--text);white-space:nowrap;justify-content:center;align-items:center;padding:0 4px;font-size:15px;font-weight:500;display:inline-flex}.demo-tactile .kb-pick[aria-busy=true]{color:var(--muted)}.demo-tactile .kb-step{width:44px;height:100%;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;outline:none;flex:none;place-items:center;margin:0;padding:0;display:grid}@media (hover:hover){.demo-tactile .kb-step:hover{color:var(--text);background:var(--raise)}}.demo-tactile .kb-step:active{transform:scale(.94)}.demo-tactile .kb-step:focus-visible{box-shadow:0 0 0 2px var(--void), 0 0 0 4px var(--muted)}.demo-tactile .kb-blurb{min-width:0;color:var(--dim);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.demo-tactile .tally{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:14px}.demo-tactile .tally-n{color:var(--text);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:no-preference){.demo-tactile .kb-step{transition:color .14s var(--kb-ease), background-color .14s var(--kb-ease), transform .1s var(--kb-ease)}}@media (prefers-reduced-motion:reduce){.demo-tactile .key,.demo-tactile .key.on{transition:none;transform:none}.demo-tactile .deck{transition:none}}@container tactile (max-width:820px){.demo-tactile .kb-desk{grid-template-columns:minmax(0,1fr);gap:12px}.demo-tactile .deck-col{grid-area:1/1}.demo-tactile .kb-floor{grid-row:2;margin-top:0}.demo-tactile .tone-card.knobs{grid-area:3/1;justify-content:center;align-items:flex-end;gap:clamp(20px,7cqi,56px);padding:22px 12px 16px;display:flex}.demo-tactile .tone-card.knobs .kn-big{order:2}.demo-tactile .tone-card.knobs .kn:nth-child(2){order:1}.demo-tactile .tone-card.knobs .kn:nth-child(3){order:3}.demo-tactile .kb-floor-label,.demo-tactile .kb-blurb{display:none}}@container tactile (max-width:560px){.demo-tactile .row-fn,.demo-tactile .row-num{display:none}.demo-tactile .deck{--gap:4px;padding:8px}.demo-tactile .key{height:44px;font-size:9px}.demo-tactile .stack .key{height:20px}.demo-tactile .kb-cycle{flex:1;min-width:0}.demo-tactile .kb-pick{flex:1;min-width:0;font-size:14px}.demo-tactile .tally{font-size:13px}}@container tactile (max-width:420px){.demo-tactile .tone-card.knobs{gap:12px;padding-left:8px;padding-right:8px}.demo-tactile .tone-card.knobs .kn-big .knob{--s:80px}.demo-tactile .tone-card.knobs .knob{--s:54px}.demo-tactile .kn-name,.demo-tactile .kn-ends{font-size:11px}.demo-tactile .kn-ends{gap:10px;width:auto}.demo-tactile .key{font-size:8px}}