@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--fg);min-height:100vh;font-size:16px;line-height:1.55}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.code-block{background:var(--color-hover);border:.5px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-md);margin:var(--space-sm) 0 var(--space-md);overflow-x:auto}.code-block code{font-family:var(--font-mono);font-size:var(--fs-body-s);white-space:pre;background:0 0;padding:0;line-height:1.6}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--color-fg-4)}.token.punctuation{color:var(--color-fg-3)}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:var(--color-code-fg)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--color-fg-2)}.token.operator,.token.entity,.token.url,.language-css .token.string{color:var(--color-fg-3)}.token.atrule,.token.attr-value,.token.keyword{color:var(--color-code-fg)}.token.function,.token.class-name{color:var(--color-fg)}.token.regex,.token.important,.token.variable{color:var(--color-fg-2)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.content-page{height:100%;display:flex;overflow:hidden}.content-page h2{font-size:var(--fs-heading-xl);letter-spacing:-.03em;margin-bottom:var(--space-lg);color:var(--fg);font-weight:700;line-height:1.2}.content-page h3{font-size:var(--fs-heading-s);letter-spacing:-.01em;color:var(--fg);margin-top:var(--space-2xl);margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:.5px solid var(--border);font-weight:600}.content-page h3:first-child{margin-top:0}.content-page p{font-size:var(--fs-body-m);color:var(--fg-muted);margin-bottom:var(--space-sm);line-height:1.65}.content-page strong{color:var(--fg);font-weight:600}.content-page code{font-family:var(--font-mono);font-size:var(--fs-body-s);color:var(--fg);background:var(--bg-elevated);border-radius:3px;padding:1px 5px}.content-left{flex:1;min-width:0;overflow-y:auto}.about-scroll{padding:var(--space-xl) max(var(--space-xl), (100% - 560px) / 2) var(--space-3xl) var(--space-xl)}.content-right{border-left:.5px solid var(--border);flex-shrink:0;width:540px;overflow:hidden}.content-right-scroll{height:100%;padding:var(--space-lg) var(--space-xl);overflow-y:auto}.inline-play{border:1px solid var(--border);width:24px;height:24px;color:var(--fg-subtle);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .1s;display:inline-flex}.inline-play:hover{color:var(--fg);border-color:var(--fg-subtle)}.inline-play:active{transform:scale(.9)}.sound-examples{gap:4px var(--space-sm);margin:var(--space-sm) 0 var(--space-lg);padding:var(--space-sm) 0;border-top:.5px solid var(--border);border-bottom:.5px solid var(--border);grid-template-columns:1fr auto;align-items:center;display:grid}.sound-examples span{font-size:var(--fs-body-m);color:var(--fg-muted)}.profiles-grid{gap:var(--space-sm);margin:var(--space-sm) 0 var(--space-md);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.profile-card{padding:var(--space-md);border:.5px solid var(--border);border-radius:var(--radius-md);flex-direction:column;gap:2px;display:flex}.profile-card strong{font-size:var(--fs-body-m);color:var(--fg)}.profile-card span{font-size:var(--fs-body-m);color:var(--fg-muted)}.profile-card code{font-family:var(--font-mono);font-size:var(--fs-body-m);color:var(--fg-subtle);margin-top:4px}.select-with-sound{font-family:inherit;display:inline-block;position:relative}.select-with-sound-trigger{width:100%;min-width:180px;font:inherit;color:inherit;background:var(--bg,#fff);border:1px solid var(--border,#ddd);cursor:pointer;text-align:left;border-radius:3px;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:16px;display:flex}.select-with-sound-trigger:after{content:"▾";opacity:.5;font-size:10px}[data-open]>.select-with-sound-trigger{border-color:var(--accent,#d97a2b);border-radius:3px 3px 0 0}[data-open]>.select-with-sound-trigger:after{content:"▴"}.select-with-sound-panel{z-index:10;background:var(--bg,#fff);border:1px solid var(--accent,#d97a2b);border-top:none;border-radius:0 0 3px 3px;max-height:200px;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.select-with-sound-option{cursor:pointer;color:inherit;padding:5px 10px;font-size:13px}.select-with-sound-option[data-focused]{background:var(--accent-muted,#d97a2b26);color:var(--accent,#d97a2b)}.select-with-sound-option[aria-selected=true]{font-weight:600}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.demo-page{padding:var(--space-lg) var(--space-xl);height:100%;overflow-y:auto}.demo-page h2{font-size:var(--fs-heading-xl);letter-spacing:-.03em;margin-bottom:var(--space-sm);font-weight:700}.demo-page>p{font-size:var(--fs-body-m);color:var(--fg-muted);margin-bottom:var(--space-lg)}.demo-split{border:.5px solid var(--border);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:1px;display:grid;overflow:hidden}.demo-pane{padding:var(--space-lg) var(--space-xl);background:var(--bg)}.demo-pane.with-sound{background:var(--bg-elevated)}.demo-pane-label{font-size:var(--fs-body-m);color:var(--fg-subtle);margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.03em;font-weight:600;display:block}.demo-form{gap:var(--space-md);flex-direction:column;display:flex}.demo-form label{font-size:var(--fs-body-m);color:var(--fg-muted);flex-direction:column;gap:3px;font-weight:500;display:flex}.demo-form input[type=text],.demo-form input[type=email],.demo-form input[type=password],.demo-form textarea,.demo-form select{font-family:var(--font-body);font-size:var(--fs-body-m);border:1px solid var(--border);background:var(--bg-surface);color:var(--fg);border-radius:3px;outline:none;padding:6px 10px}.demo-form input[type=text]:focus,.demo-form input[type=email]:focus,.demo-form input[type=password]:focus,.demo-form textarea:focus,.demo-form select:focus{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent-subtle)}.demo-form textarea{resize:vertical;min-height:40px}.demo-form select{cursor:pointer}.demo-form input[type=range]{accent-color:var(--accent)}.demo-form input[type=checkbox],.demo-form input[type=radio]{accent-color:var(--accent);width:16px;height:16px}.demo-form details{border:1px solid var(--border);border-radius:3px}.demo-form details summary{font-size:var(--fs-body-m);cursor:pointer;color:var(--fg);padding:8px 10px}.demo-form details label{padding:4px 10px 10px}.demo-form-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}@media (width<=600px){.demo-form-row{grid-template-columns:1fr}}.demo-label-row{justify-content:space-between;align-items:baseline;display:flex}.demo-range-value{font-family:var(--font-mono);font-size:var(--fs-body-s);color:var(--fg-subtle);font-weight:400}.demo-form-toggles{flex-direction:column;gap:6px;display:flex}.demo-form-toggles label{cursor:pointer;flex-direction:row;align-items:center;gap:8px}.demo-form-fieldset{border:1px solid var(--border);padding:var(--space-xs) var(--space-sm) var(--space-sm);border-radius:4px;flex-direction:column;gap:4px;display:flex}.demo-form-fieldset legend{font-size:var(--fs-body-m);color:var(--fg-muted);padding:0 4px;font-weight:500}.demo-form-fieldset label{cursor:pointer;flex-direction:row;align-items:center;gap:6px}.demo-form-actions{margin-top:var(--space-xs);gap:6px;display:flex}.demo-form-actions button{font-size:var(--fs-body-m);font-weight:600;font-family:var(--font-body);cursor:pointer;border:1px solid #0000;border-radius:4px;padding:6px 16px}.demo-form-actions button:active{transform:scale(.97)}.demo-form-actions button:first-child{background:var(--accent);color:var(--bg)}.demo-form-actions button[data-sound-variant=destructive]{background:var(--fg);color:var(--bg);opacity:.7}.demo-form-actions button[data-sound-variant=outline]{color:var(--fg);border-color:var(--border);background:0 0}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.sim-stage{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:120px;position:relative;overflow:hidden}.sim-element{z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sim-cursor{z-index:10;pointer-events:none;filter:drop-shadow(0 1px 2px #0000001f);transition:left .4s cubic-bezier(.4,0,.2,1),top .4s cubic-bezier(.4,0,.2,1);position:absolute}.sim-cursor .cursor-svg{transition:transform .12s;display:block}.sim-cursor.clicking .cursor-svg{transform:scale(.8)}.click-ring{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:.22s ease-out forwards clickPop;position:absolute;top:2px;left:2px}@keyframes clickPop{0%{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(3.5)}}.ripple-group{pointer-events:none;z-index:5;position:absolute}.ripple-ring{border:1.5px solid var(--accent);opacity:0;border-radius:50%;width:12px;height:12px;animation:.7s ease-out forwards rippleExpand;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.ripple-ring:nth-child(2){animation-delay:90ms}.ripple-ring:nth-child(3){animation-delay:.18s}@keyframes rippleExpand{0%{opacity:.5;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(6)}}.sim-overlay{z-index:20;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);cursor:pointer;background:#ffffffa6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (prefers-color-scheme:dark){.sim-overlay{background:#0a0a0aa6}}.sim-play-btn{font-size:var(--fs-body-m);color:var(--fg);background:var(--bg-surface);border:1.5px solid var(--fg-subtle);border-radius:var(--radius-pill);align-items:center;gap:8px;padding:10px 22px;font-weight:600;transition:all .1s;display:inline-flex}.sim-play-btn:hover{border-color:var(--accent);color:var(--accent)}.vis-native{flex-direction:column;align-items:center;gap:6px;display:flex}.vis-native.vis-inline{flex-direction:row;gap:8px}.vis-native.vis-stack{flex-direction:column;align-items:flex-start;gap:10px}.vis-native input[type=text],.vis-native input[type=password],.vis-native textarea{width:240px;font-size:var(--fs-body-s);border:1.5px solid var(--border);background:var(--bg);color:var(--fg);font-family:var(--font-body);border-radius:4px;outline:none;padding:6px 10px;transition:border-color .18s,box-shadow .18s}.vis-native input[type=text].native-focused,.vis-native input[type=text][data-state=focus],.vis-native input[type=text][data-state=typing],.vis-native input[type=password].native-focused,.vis-native input[type=password][data-state=focus],.vis-native input[type=password][data-state=typing],.vis-native textarea.native-focused,.vis-native textarea[data-state=focus],.vis-native textarea[data-state=typing]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.vis-native input[type=text]::placeholder,.vis-native input[type=password]::placeholder,.vis-native textarea::placeholder{color:var(--fg-subtle)}.vis-native textarea{resize:none;min-height:80px}.vis-native[data-vis=error] input,.vis-native[data-vis=error] textarea{border-color:#e53e3e;animation:.28s shake;box-shadow:0 0 0 2px #e53e3e14}.vis-native[data-vis=success] input{border-color:#38a169;box-shadow:0 0 0 2px #38a16914}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.vis-native input[type=checkbox],.vis-native input[type=radio]{width:16px;height:16px;accent-color:var(--accent);cursor:default}.vis-native label{font-size:var(--fs-body-s);color:var(--fg);cursor:default}.vis-radio-row{align-items:center;gap:6px;display:flex}.vis-toggle-track{background:var(--border);cursor:default;border-radius:12px;width:44px;height:24px;transition:background .22s cubic-bezier(.4,0,.2,1);position:relative}.vis-toggle-track.on{background:var(--accent)}.vis-toggle-thumb{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .22s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000026}.vis-toggle-track.on .vis-toggle-thumb{transform:translate(20px)}.vis-toggle-text{font-size:var(--fs-body-s);color:var(--fg-muted)}.vis-btn-group{align-items:center}.native-btn{cursor:default;border:1.5px solid #0000;border-radius:4px;min-width:140px;padding:7px 18px;font-size:13px;font-weight:600;transition:all .12s}.native-btn.primary{background:var(--accent);color:#fff}.native-btn.primary.hover{filter:brightness(1.08)}.native-btn.primary.pressed{filter:brightness(.94);transform:scale(.96)}.native-btn.destructive{color:#fff;background:#e53e3e}.native-btn.destructive.hover{filter:brightness(1.08)}.native-btn.destructive.pressed{filter:brightness(.9);transform:scale(.96)}.native-btn.secondary{background:var(--bg);color:var(--fg);border-color:var(--border)}.native-btn.secondary.hover{border-color:var(--fg-subtle);background:var(--bg-elevated)}.native-btn.secondary.pressed{transform:scale(.96)}.native-btn.file-browse{background:var(--bg-elevated);min-width:auto;color:var(--fg);border-color:var(--border)}.native-btn.file-browse.pressed{transform:scale(.96)}.vis-select-wrapper{width:240px;position:relative;align-items:stretch!important}.vis-select-trigger{font-size:var(--fs-body-s);border:1.5px solid var(--border);background:var(--bg);color:var(--fg);cursor:default;border-radius:4px;justify-content:space-between;align-items:center;padding:6px 10px;transition:border-color .18s;display:flex}.vis-select-trigger.open{border-color:var(--accent);border-radius:4px 4px 0 0}.vis-chevron{color:var(--fg-subtle);font-size:10px}.vis-select-dropdown{border:1.5px solid var(--accent);background:var(--bg);z-index:5;border-top:none;border-radius:0 0 4px 4px;max-height:180px;animation:.12s ease-out slideDown;position:absolute;top:100%;left:0;right:0;overflow-y:auto}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.vis-select-opt{color:var(--fg-muted);padding:5px 10px;font-size:13px;transition:background 50ms,color 50ms}.vis-select-opt.hovered{background:var(--accent-muted);color:var(--accent)}.native-range{width:260px;accent-color:var(--accent);cursor:default}.vis-range-value{font-family:var(--font-mono);color:var(--accent);font-size:12px;font-weight:600}.vis-file-wrapper{align-items:center;gap:10px;display:flex}.vis-file-name{color:var(--fg-muted);font-size:13px}.vis-native details{border:1.5px solid var(--border);background:var(--bg);border-radius:4px;width:280px}.vis-native details summary{font-size:var(--fs-body-s);color:var(--fg);cursor:default;list-style:revert;padding:8px 12px}.vis-native details summary::-webkit-details-marker{color:var(--fg-subtle)}.vis-details-content{border-top:1px solid var(--border);padding:8px 12px}.vis-details-content p{color:var(--fg-muted);margin:0;font-size:13px;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.el-detail{height:100%;display:flex;overflow:hidden}.el-detail-left{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.el-detail-bar{padding:var(--space-lg) var(--space-xl) 0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.el-detail-name{font-size:var(--fs-heading-s);font-weight:600}.el-detail-controls{align-items:center;gap:var(--space-sm);display:flex}.el-detail-segment{border:1.5px solid var(--accent);border-radius:var(--radius-pill);display:flex;overflow:hidden}.el-detail-play-btn{border:1.5px solid var(--fg-subtle);width:30px;height:30px;color:var(--fg);border-radius:50%;justify-content:center;align-items:center;transition:all .1s;display:flex}.el-detail-play-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}.el-detail-play-btn:active{transform:scale(.95)}.el-detail-sim{min-height:120px;padding:var(--space-md) var(--space-xl);flex:1}.el-detail-envelope{border-top:.5px solid var(--border);padding:var(--space-md) var(--space-xl) 0;flex-shrink:0}.el-detail-table-wrap{border-top:.5px solid var(--border);max-height:35%;padding:0px var(--space-xl);flex-shrink:0;overflow-y:auto}.el-states-table{border-collapse:collapse;width:100%;font-size:var(--fs-body-s)}.el-states-table th,.el-states-table td{padding:var(--space-xs) var(--space-sm);text-align:left;white-space:nowrap}.el-states-table th{background:var(--bg);color:var(--fg-subtle);border-bottom:1px solid var(--border);z-index:1;font-weight:500;position:sticky;top:0}.el-states-table td{font-family:var(--font-serif);color:var(--fg-muted);border-bottom:.5px solid var(--color-border-2)}.el-states-table tbody tr{cursor:pointer;transition:background 80ms}.el-states-table tbody tr:hover{background:var(--color-hover)}.el-states-table tbody tr.active{background:var(--accent-subtle)}.el-st-name{font-weight:600;font-family:var(--font-body)!important;color:var(--fg)!important}.el-st-silent{color:var(--fg-subtle)!important}.el-st-play{border:1px solid var(--fg-subtle);width:22px;height:22px;color:var(--fg);border-radius:50%;justify-content:center;align-items:center;transition:all .1s;display:inline-flex}.el-st-play:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}.el-st-play:active{transform:scale(.9)}.el-detail-right{border-left:.5px solid var(--border);flex-shrink:0;width:540px;overflow:hidden}.el-usage-scroll{height:100%;padding:var(--space-lg) var(--space-xl);overflow-y:auto}.el-usage-scroll h3{font-size:var(--fs-body-m);margin-bottom:var(--space-sm);font-weight:600}.el-usage-scroll h3:not(:first-child){margin-top:var(--space-lg)}.el-usage-scroll p{font-size:var(--fs-body-s);color:var(--fg-muted);margin-bottom:var(--space-sm)}.el-usage-tag code{font-family:var(--font-serif);font-size:var(--fs-body-s);color:var(--color-code-fg);background:var(--color-code-bg);border-radius:3px;padding:2px 6px}.el-usage-keys{gap:var(--space-xs);flex-direction:column;display:flex}.el-usage-key-row{padding:var(--space-xs) 0;border-bottom:.5px solid var(--color-border-2);justify-content:space-between;align-items:center;display:flex}.el-usage-key-row code{font-family:var(--font-serif);font-size:var(--fs-body-s);color:var(--fg-muted)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.cat-sim{flex-direction:column;flex:1;min-height:0;display:flex}.cat-sim-stage{border:.5px solid var(--border);border-radius:var(--radius-md);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.cat-sim-center{justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-lg);flex-direction:column;flex:1;display:flex}.cat-sim-hint{font-size:var(--fs-body-m);color:var(--fg-subtle)}.cat-sim-buttons{gap:var(--space-sm);flex-wrap:wrap;display:flex}.cat-btn{font-size:var(--fs-body-m);font-weight:500;font-family:var(--font-body);border:1.5px solid var(--fg-subtle);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);cursor:pointer;padding:8px 16px;transition:all .1s}.cat-btn:hover{border-color:var(--fg)}.cat-btn:active{transform:scale(.97)}.cat-btn:disabled{opacity:.35;cursor:default}.cat-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.cat-btn.success{color:#38a169;border-color:#38a169}.cat-btn.warning{color:#d69e2e;border-color:#d69e2e}.cat-btn.error{color:#e53e3e;border-color:#e53e3e}.cat-btn.info{color:#3182ce;border-color:#3182ce}.sim-toast-area{top:var(--space-sm);right:var(--space-sm);gap:var(--space-xs);z-index:10;pointer-events:none;flex-direction:column;width:280px;display:flex;position:absolute}.sim-toast{align-items:center;gap:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--fs-body-m);pointer-events:auto;padding:10px 14px;animation:.25s forwards toastIn;display:flex}.sim-toast-icon{flex-shrink:0;font-weight:700}.sim-toast-success{color:#276749;background:#f0fff4;border:1px solid #c6f6d5}.sim-toast-warning{color:#975a16;background:ivory;border:1px solid #fefcbf}.sim-toast-error{color:#9b2c2c;background:#fff5f5;border:1px solid #fed7d7}.sim-toast-info{color:#2a4365;background:#ebf8ff;border:1px solid #bee3f8}@media (prefers-color-scheme:dark){.sim-toast-success{color:#9ae6b4;background:#1a332a;border-color:#2f6b4a}.sim-toast-warning{color:#fbd38d;background:#332b1a;border-color:#6b5a2f}.sim-toast-error{color:#feb2b2;background:#331a1a;border-color:#6b2f2f}.sim-toast-info{color:#90cdf4;background:#1a2633;border-color:#2f4a6b}}@keyframes toastIn{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.cat-overlay{z-index:20;background:#0000001a;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:absolute;inset:0}.sim-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xl);width:90%;max-width:320px;animation:.2s scaleIn}.sim-modal h4{font-size:var(--fs-heading-s);margin-bottom:var(--space-xs);font-weight:600}.sim-modal p{font-size:var(--fs-body-m);color:var(--fg-muted);margin-bottom:var(--space-lg);line-height:1.5}.sim-modal-actions{gap:var(--space-sm);justify-content:flex-end;display:flex}.sim-drawer{background:var(--bg-surface);border-right:1px solid var(--border);width:220px;padding:var(--space-lg);gap:var(--space-md);z-index:21;flex-direction:column;animation:.2s slideRight;display:flex;position:absolute;top:0;bottom:0;left:0}.sim-drawer h4{font-size:var(--fs-heading-s);font-weight:600}.sim-drawer-links{gap:var(--space-xs);flex-direction:column;display:flex}.sim-drawer-links span{font-size:var(--fs-body-m);color:var(--fg-muted);border-bottom:.5px solid var(--border);padding:6px 0}.sim-anchor{position:relative}.sim-popover{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--fs-body-m);color:var(--fg-muted);white-space:nowrap;z-index:15;animation:.12s fadeIn;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.sim-tooltip{background:var(--fg);color:var(--bg);font-size:var(--fs-body-s);white-space:nowrap;z-index:15;border-radius:4px;padding:4px 10px;animation:.1s fadeIn;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.sim-nav-bar{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.sim-tab{font-size:var(--fs-body-m);color:var(--fg-subtle);cursor:pointer;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 18px;font-weight:500}.sim-tab:hover{color:var(--fg)}.sim-tab.active{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}.sim-nav-crumbs{padding:var(--space-md) var(--space-lg);flex-shrink:0;align-items:center;display:flex}.sim-crumb{font-size:var(--fs-body-m);color:var(--fg-subtle)}.sim-crumb:hover{color:var(--fg);text-decoration:underline}.sim-crumb-sep{color:var(--border);margin:0 var(--space-sm)}.sim-nav-body{padding:0 var(--space-lg);flex:1}.sim-nav-body p{font-size:var(--fs-body-m);color:var(--fg-muted);margin-bottom:var(--space-xs)}.sim-async-status{align-items:center;gap:var(--space-sm);font-size:var(--fs-body-m);color:var(--fg-muted);min-height:32px;display:flex}.sim-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}.sim-done{color:#38a169;font-weight:600}.sim-idle{color:var(--fg-subtle)}@keyframes spin{to{transform:rotate(360deg)}}.sim-drag-list{gap:var(--space-xs);flex-direction:column;width:200px;display:flex}.sim-drag-item{align-items:center;gap:var(--space-sm);font-size:var(--fs-body-m);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:grab;padding:8px 12px;display:flex}.sim-drag-item:hover{border-color:var(--fg-subtle)}.sim-drag-item:active{cursor:grabbing}.sim-drag-handle{color:var(--fg-subtle);font-size:var(--fs-heading-s);line-height:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideRight{0%{transform:translate(-100%)}to{transform:translate(0)}}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.cat-detail{height:100%;display:flex;overflow:hidden}.cat-detail-left{min-width:0;padding:var(--space-lg) var(--space-xl);gap:var(--space-sm);flex-direction:column;flex:1;display:flex;overflow:hidden}.cat-bar{flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.cat-name{font-size:var(--fs-heading-s);font-weight:600}.cat-segment{border:1.5px solid var(--accent);border-radius:var(--radius-pill);display:flex;overflow:hidden}.cat-table-wrap{border-top:.5px solid var(--border);flex-shrink:0;max-height:35%;overflow-y:auto}.cat-states-table{border-collapse:collapse;width:100%;font-size:var(--fs-body-s)}.cat-states-table th,.cat-states-table td{padding:var(--space-xs) var(--space-sm);text-align:left;white-space:nowrap}.cat-states-table th{background:var(--bg);color:var(--fg-subtle);border-bottom:1px solid var(--border);z-index:1;font-weight:500;position:sticky;top:0}.cat-states-table td{font-family:var(--font-serif);color:var(--fg-muted);border-bottom:.5px solid var(--color-border-2)}.cat-states-table tbody tr{transition:background 80ms}.cat-states-table tbody tr:hover{background:var(--color-hover)}.cat-st-name{font-weight:600;font-family:var(--font-body)!important;color:var(--fg)!important}.cat-st-silent{color:var(--fg-subtle)!important}.cat-st-play{border:1px solid var(--fg-subtle);width:22px;height:22px;color:var(--fg);border-radius:50%;justify-content:center;align-items:center;transition:all .1s;display:inline-flex}.cat-st-play:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}.cat-st-play:active{transform:scale(.9)}.cat-detail-right{border-left:.5px solid var(--border);flex-shrink:0;width:540px;overflow:hidden}.cat-usage-scroll{height:100%;padding:var(--space-lg) var(--space-xl);overflow-y:auto}.cat-usage-scroll h3{font-size:var(--fs-body-m);margin-bottom:var(--space-sm);font-weight:600}.cat-usage-scroll h3:not(:first-child){margin-top:var(--space-lg)}.cat-usage-scroll p{font-size:var(--fs-body-s);color:var(--fg-muted);margin-bottom:var(--space-sm);line-height:1.5}.cat-usage-keys{gap:var(--space-xs);flex-direction:column;display:flex}.cat-usage-key-row{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:.5px solid var(--color-border-2);display:flex}.cat-usage-key-row>div{flex-direction:column;gap:2px;display:flex}.cat-usage-key-row code{font-family:var(--font-serif);font-size:var(--fs-body-s);color:var(--fg);font-weight:500}.cat-usage-key-desc{font-size:var(--fs-body-s);color:var(--fg-subtle);line-height:1.4}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-bg:#fff;--color-fg:#2a2a2a;--color-fg-2:#4a4a4a;--color-fg-3:#777;--color-fg-4:#a0a0a0;--color-fg-5:#ccc;--color-border:#e0e0e0;--color-border-2:#e8e8e8;--color-hover:#f7f7f7;--color-code-bg:#f7f0f0;--color-code-fg:#c1305c;--color-danger:#d44;--font-serif:"Miriam Libre", system-ui, sans-serif;--font-sans:"Miriam Libre", system-ui, sans-serif;--font-mono:"Iosevka", ui-monospace, "Cascadia Code", monospace;--fs-base:16px;--fs-heading-xl:2rem;--lh-heading-xl:1.25;--fs-heading-l:1.5rem;--lh-heading-l:1.25;--fs-heading-m:1.25rem;--lh-heading-m:1.3;--fs-heading-s:1.125rem;--lh-heading-s:1.4;--fs-heading-xs:1rem;--lh-heading-xs:1.5;--fs-body-m:1rem;--lh-body-m:1.55;--fs-body-s:.875rem;--lh-body-s:1.45;--space-xxs:2px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:4px;--radius-md:6px;--radius-pill:100px;--bg:var(--color-bg);--bg-surface:var(--color-bg);--bg-elevated:var(--color-hover);--fg:var(--color-fg);--fg-muted:var(--color-fg-2);--fg-subtle:var(--color-fg-3);--accent:var(--color-fg);--accent-muted:#2a2a2a14;--accent-subtle:#2a2a2a0a;--border:var(--color-border);--border-accent:var(--accent);--font-body:var(--font-sans)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#161c24;--color-fg:#b8c4d0;--color-fg-2:#96a8b8;--color-fg-3:#6a7e90;--color-fg-4:#4a5e70;--color-fg-5:#283848;--color-border:#344858;--color-border-2:#2c3e4e;--color-hover:#1a2430;--color-code-bg:#1a2634;--color-code-fg:#7abfdf;--color-danger:#e06060;--accent-muted:#b8c4d01a;--accent-subtle:#b8c4d00a}}.app-layout{background:var(--bg);grid-template-columns:240px 1fr;height:100vh;display:grid;overflow:hidden}.left-nav{border-right:.5px solid var(--border);padding:var(--space-md) var(--space-sm);flex-direction:column;gap:0;display:flex;overflow-y:auto}.nav-section{flex-direction:column;gap:1px;display:flex}.nav-elements{flex:1}.nav-heading{font-size:var(--fs-body-m);letter-spacing:.03em;color:var(--fg-subtle);padding:4px var(--space-sm);margin-bottom:2px;font-weight:600}.nav-link{padding:var(--space-xs) var(--space-sm);font-size:var(--fs-body-m);color:var(--fg-subtle);text-align:left;border-radius:var(--radius-sm);font-weight:500;text-decoration:none;transition:color .1s;display:block}.nav-link:hover{color:var(--fg)}.nav-link.active{color:var(--fg);font-weight:600}.nav-link.upcoming{color:var(--border);cursor:default}.nav-link.upcoming:hover{color:var(--border)}.nav-divider{border:none;border-top:1px solid var(--color-border-2);height:0;margin:var(--space-md) 0;margin-left:calc(-1 * var(--space-sm));margin-right:calc(-1 * var(--space-sm))}.center-main{font-family:var(--font-sans);height:100%;overflow:hidden}.seg-btn{font-family:var(--font-mono);color:var(--color-fg-2);border-right:1px solid var(--accent);padding:6px 12px;font-size:13px;font-weight:500;transition:all .1s}.seg-btn:last-child{border-right:none}.seg-btn:hover{color:var(--fg);background:var(--bg-elevated)}.seg-btn.active{color:var(--bg);background:var(--accent);font-weight:600}.envelope-canvas{width:100%;height:120px;display:block}.envelope-canvas .env-grid{stroke:var(--border);stroke-width:.3px;opacity:.4}.envelope-canvas .env-line{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.envelope-canvas .env-fill{fill:var(--accent-subtle);stroke:none}.envelope-canvas .env-highlight{fill:var(--accent-muted);opacity:.5}.envelope-canvas .env-step-tick{stroke:var(--border);stroke-width:.5px}.envelope-canvas .env-label{fill:var(--fg-subtle);font-size:10px;font-family:var(--font-body)}.envelope-canvas .env-label.active{fill:var(--accent);font-weight:600}.envelope-canvas .env-playhead{stroke:var(--accent);stroke-width:1.5px;opacity:.95}.envelope-canvas .env-playhead-dot{fill:var(--accent)}