.tsim{--tsim-tet:#2563eb;--tsim-ji:#d97706;--tsim-ji-ink:#b45309;--tsim-beat:#7c3aed;--tsim-warn:#dc2626;--tsim-line:#9ca3af;--tsim-grid:rgba(17, 24, 39, 0.08);--tsim-on-tone:#ffffff;--tsim-on-tone-ji:#1f2937;--tsim-fg:var(--color-text-primary, #111827);--tsim-muted:var(--color-text-muted, #6b7280);--tsim-surface:var(--color-bg-secondary, #f3f4f6);--tsim-surface-2:var(--body-background, #ffffff);--tsim-border:var(--color-border, #e5e7eb);--tsim-radius:var(--border-radius-lg, 0.5rem);margin:1.75rem 0 2rem;padding:1rem 1rem 1.15rem;border:1px solid var(--tsim-border);border-radius:var(--border-radius-xl,.75rem);background:var(--tsim-surface);color:var(--tsim-fg)}html.dark .tsim{--tsim-tet:#2dd4bf;--tsim-ji:#fbbf24;--tsim-ji-ink:#fbbf24;--tsim-beat:#c4b5fd;--tsim-warn:#f87171;--tsim-line:#6a6a6a;--tsim-grid:rgba(255, 255, 255, 0.09);--tsim-on-tone:#14181a;--tsim-on-tone-ji:#14181a}.tsim__head{margin-bottom:.9rem}.tsim__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin:0 0 .35rem;font-size:1rem;font-weight:700;line-height:1.4;color:var(--tsim-fg)}.tsim__badge{padding:.1rem .45rem;border:1px solid var(--tsim-line);border-radius:999px;font-size:.6875rem;font-weight:600;letter-spacing:.02em;color:var(--tsim-muted)}.tsim__desc{margin:0;font-size:.875rem;line-height:1.6;color:var(--tsim-muted)}.tsim__desc+.tsim__desc{margin-top:.35rem}.tsim__panel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.85rem 1.25rem;margin-bottom:.85rem;padding:.85rem 1rem;border:1px solid var(--tsim-border);border-radius:var(--tsim-radius);background:var(--tsim-surface-2)}.tsim__field{display:flex;flex-direction:column;gap:.4rem;flex:1 1 15rem;min-width:12rem}.tsim__field--auto{flex:initial;min-width:0}.tsim__label{font-size:.8125rem;font-weight:600;color:var(--tsim-fg)}.tsim__label small{font-weight:400;color:var(--tsim-muted)}.tsim__range{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--tsim-muted)}.tsim__range input[type=range]{flex:1;min-width:6rem;accent-color:var(--tsim-ji)}.tsim__checks{display:flex;flex-direction:column;gap:.4rem}.tsim__check{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--tsim-fg);cursor:pointer}.tsim__check input{accent-color:var(--tsim-beat)}.tsim__check.is-disabled{color:var(--tsim-muted);cursor:not-allowed}.tsim__buttons{display:flex;flex-wrap:wrap;gap:.5rem;flex:1 1 100%}.tsim__buttons--start{flex:initial}.tsim__buttons--start .tsim__btn{flex:initial;min-width:10rem}.tsim__btn{flex:1 1 6.5rem;min-width:6rem;padding:.5rem .6rem;white-space:nowrap;border:1px solid var(--tsim-tone,var(--tsim-line));border-radius:var(--tsim-radius);background:0 0;color:var(--tsim-tone,var(--tsim-fg));font:inherit;font-size:.8125rem;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color var(--transition-fast,.15s),color var(--transition-fast,.15s)}.tsim__btn:hover{background:color-mix(in srgb,var(--tsim-tone,var(--tsim-line)) 14%,transparent)}.tsim__btn:focus-visible{outline:2px solid var(--tsim-tone,var(--tsim-line));outline-offset:2px}.tsim__btn.is-active{background:var(--tsim-tone,var(--tsim-line));color:var(--tsim-on,var(--tsim-on-tone))}.tsim__btn[data-tone=tet]{--tsim-tone:var(--tsim-tet)}.tsim__btn[data-tone=ji]{--tsim-tone:var(--tsim-ji);--tsim-on:var(--tsim-on-tone-ji)}.tsim__btn[data-tone=beat]{--tsim-tone:var(--tsim-beat)}.tsim__btn[data-tone=mute]{--tsim-tone:var(--tsim-muted);flex:0 1 5rem;min-width:4.5rem}.tsim__readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem 1rem;margin:0 0 .9rem;padding:.75rem .9rem;border:1px solid var(--tsim-border);border-radius:var(--tsim-radius);background:var(--tsim-surface-2)}.tsim__readout--nowrap{grid-template-columns:repeat(var(--tsim-cols,3),minmax(0,1fr));gap:.6rem .7rem}.tsim__readout--4{--tsim-cols:4}@media(max-width:44rem){.tsim__readout--4{--tsim-cols:2}}.tsim__stat{min-width:0}.tsim__stat dt{margin:0 0 .15rem;font-size:.75rem;font-weight:500;color:var(--tsim-muted)}.tsim__stat dd{margin:0;font-size:1rem;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.tsim__stat dd small{display:block;font-size:.75rem;font-weight:500;color:var(--tsim-muted)}.tsim__stat[data-tone=tet] dd{color:var(--tsim-tet)}.tsim__stat[data-tone=ji] dd{color:var(--tsim-ji-ink)}.tsim__stat[data-tone=beat] dd{color:var(--tsim-beat)}.tsim__stat[data-tone=warn] dd{color:var(--tsim-warn)}.tsim__stat.is-idle dd{color:var(--tsim-muted);font-weight:600}.tsim__figure{margin:0 0 .85rem}.tsim__figure:last-of-type{margin-bottom:.6rem}.tsim__figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .5rem;margin:0 0 .35rem;font-size:.8125rem;font-weight:600;color:var(--tsim-fg)}.tsim__figcaption small{font-weight:400;color:var(--tsim-muted)}.tsim__canvas{display:block;width:100%;height:7.5rem;border:1px solid var(--tsim-border);border-radius:var(--tsim-radius);background:var(--tsim-surface-2)}.tsim__canvas--sum{height:8.5rem}.tsim__canvas--spectrum{height:15.5rem}.tsim__figure[hidden]{display:none}.tsim__legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0;list-style:none;font-size:.8125rem;color:var(--tsim-muted)}.tsim__legend-item{display:inline-flex;align-items:center;gap:.4rem}.tsim__swatch{width:.85rem;height:.2rem;border-radius:999px;background:var(--tsim-line)}.tsim__swatch[data-tone=tet]{background:var(--tsim-tet)}.tsim__swatch[data-tone=ji]{background:var(--tsim-ji)}.tsim__swatch[data-tone=beat]{background:var(--tsim-beat)}.tsim__swatch[data-tone=warn]{background:var(--tsim-warn)}.tsim__note{margin:.5rem 0 0;font-size:.75rem;line-height:1.55;color:var(--tsim-muted)}.tsim__note code{font-size:.9em}@media(max-width:40rem){.tsim__buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tsim__buttons .tsim__btn{flex:none;min-width:0;white-space:normal;line-height:1.3}.tsim__buttons--odd .tsim__btn[data-tone=mute]{grid-column:1/-1}.tsim__buttons--start{display:block}.tsim__buttons--start .tsim__btn{width:100%}}@media(max-width:32rem){.tsim{padding:.85rem .75rem 1rem}.tsim__panel{padding:.75rem}.tsim__readout{padding:.65rem .7rem;gap:.5rem .6rem}.tsim__stat dt{font-size:.6875rem}.tsim__stat dd{font-size:.875rem}.tsim__stat dd small{font-size:.6875rem}.tsim__btn{font-size:.75rem}.tsim__canvas--spectrum{height:15rem}}