.feature-controls{--control-border:var(--line);--control-muted:var(--muted);--control-fill:var(--subtle);padding-top:16px;border-bottom:1px solid var(--control-border);color:var(--ink)}
.feature-controls button,.feature-controls select{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.feature-controls button:focus-visible,.feature-controls select:focus-visible,.demo-gesture-pad:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.feature-controls [hidden]{display:none!important}
.demo-controls-primary{display:flex;align-items:center;gap:12px;min-width:0;padding-bottom:13px}
.demo-project-scroll{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c6c6c6 transparent;flex:0 1 auto}
.demo-segmented{position:relative;isolation:isolate;display:flex;align-items:center;gap:0;width:max-content;max-width:none;padding:3px;background:var(--control-fill);border:1px solid var(--control-border);border-radius:9px}
.demo-control-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-size:11px!important;white-space:nowrap;cursor:pointer;transition:background .16s,color .16s,transform .16s}
.demo-control-button:hover{background:var(--hover)}.demo-control-button:active{transform:scale(.97)}.demo-control-button:disabled{cursor:default;color:var(--muted);opacity:.7;transform:none}.demo-control-button:disabled:hover{background:transparent}
.demo-segmented>.demo-control-button{position:relative;z-index:1;color:var(--control-muted);padding:0 13px;border:0}
.demo-segmented>.demo-control-button[aria-pressed=true]{color:var(--ink)}.demo-segmented>.demo-control-button:hover{background:transparent;color:var(--ink)}
.demo-selection-indicator{position:absolute;top:3px;left:3px;z-index:0;border-radius:6px;background:var(--surface);box-shadow:0 1px 3px #00000016;pointer-events:none;transition:transform .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1)}
.demo-controls-primary>.demo-control-button{margin-left:auto}.demo-controls-primary>[data-open-board][aria-expanded=true]{background:var(--hover)}
.demo-tour-bar{display:flex;align-items:center;gap:12px;border-top:1px solid var(--control-border);padding:9px 0;min-height:63px}
.demo-feature-picker-wrap{position:relative;display:block;min-width:155px;max-width:235px}
.demo-feature-picker-wrap::after{content:"";position:absolute;top:50%;right:14px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-75%) rotate(45deg);pointer-events:none}
.demo-feature-picker{appearance:none;display:block;width:100%;min-height:44px;padding:0 28px 0 12px;border:1px solid var(--control-border);border-radius:7px;background:var(--surface);color:var(--ink);font-size:11px!important;cursor:pointer}
.demo-playback{display:flex;align-items:center;gap:3px}.demo-play{min-width:67px;background:var(--emphasis);color:var(--emphasis-text);border-color:var(--emphasis)}.demo-play:hover{background:var(--link)}.demo-icon-button{font-size:20px!important;padding:0 9px}
.demo-current-feature{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0;font-size:10px;color:var(--muted)}.demo-current-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}.demo-feature-progress{appearance:none;width:54px;height:3px;border:0;border-radius:4px;overflow:hidden;background:var(--line)}.demo-feature-progress::-webkit-progress-bar{background:var(--line)}.demo-feature-progress::-webkit-progress-value{background:var(--muted);border-radius:4px;transition:width .2s}.demo-feature-progress::-moz-progress-bar{background:var(--muted);border-radius:4px}
.demo-contextual{display:flex;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--control-border);padding:9px 0;min-height:62px}.demo-shortcut-tools,.demo-gesture-tools,.demo-gesture-directions{display:flex;align-items:center;gap:5px}.demo-shortcut-tools>.demo-control-button,.demo-gesture-directions>.demo-control-button{border-color:var(--control-border);background:var(--surface)}.feature-controls kbd{font:10px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;min-width:16px;min-height:18px;display:inline-flex;align-items:center;justify-content:center;padding:2px 3px;border:1px solid var(--key-border);border-bottom-color:var(--key-border);border-radius:3px;background:var(--key-bg);color:var(--ink);box-shadow:0 1px 0 #00000007}.demo-shortcut-tools kbd{border:0;background:transparent;box-shadow:none;padding:0;min-width:10px;font-size:12px}
.demo-gesture-tools{gap:9px;flex-wrap:wrap}.demo-gesture-directions>.demo-control-button{font-size:18px!important;padding:0 8px}.demo-gesture-tools>[data-enable-gestures]{padding:0 9px;min-width:101px;text-align:left;justify-content:flex-start}.demo-gesture-tools>[data-enable-gestures][aria-pressed=true]{color:var(--positive)}.demo-gesture-pad{display:flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px;padding:5px 10px;border:1px dashed var(--key-border);border-radius:6px;font-size:10px;color:var(--muted);touch-action:none;user-select:none}.demo-gesture-pad[aria-disabled=true]{opacity:.45;pointer-events:none}
.demo-input{display:flex;align-items:center;gap:4px;min-height:35px;margin-left:auto;font-size:10px;color:var(--muted)}.demo-input-gesture{font-size:17px;padding:0 5px}.demo-input-label{padding-left:5px;max-width:220px;line-height:1.5}
@media(max-width:1150px){.demo-controls-primary{flex-wrap:wrap;gap:10px}.demo-project-scroll{flex:1 1 auto}.demo-controls-primary>.demo-segmented{order:3;margin:auto}.demo-controls-primary>[data-open-board]{order:2}.demo-controls-primary>.demo-segmented>.demo-control-button{padding:0 20px}}
@media(max-width:700px){.demo-current-feature{gap:7px}.demo-current-label{max-width:100px}.demo-feature-progress{width:35px}.demo-controls-primary>.demo-segmented>.demo-control-button{padding:0 13px}.demo-project-scroll .demo-control-button{padding:0 13px}}
@media(max-width:600px){.feature-controls{padding-top:12px}.demo-controls-primary{gap:8px;padding-bottom:10px}.demo-project-scroll{width:calc(100% - 70px)}.demo-controls-primary>.demo-segmented{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.demo-controls-primary>.demo-segmented>.demo-control-button{padding:0 4px;font-size:9px!important;white-space:normal;line-height:1.3}.demo-controls-primary>[data-open-board]{font-size:10px!important;padding:0 7px;min-width:62px}.demo-project-scroll .demo-control-button{font-size:10px!important;padding:0 11px}.demo-tour-bar{gap:7px;flex-wrap:wrap;padding:8px 0}.demo-feature-picker-wrap{flex:1;min-width:128px;max-width:none}.demo-feature-picker{padding-left:9px;font-size:10px!important}.demo-playback{gap:0}.demo-playback>.demo-control-button{font-size:10px!important;padding:0 8px;min-width:44px}.demo-playback>.demo-play{min-width:56px}.demo-playback>.demo-icon-button{font-size:19px!important}.demo-current-feature{flex-basis:100%;margin:0;font-size:9px;justify-content:space-between;padding:2px 3px 5px}.demo-current-label{max-width:none}.demo-feature-progress{width:72px}.demo-contextual{gap:7px;padding:8px 0}.demo-gesture-tools{width:100%;gap:5px;justify-content:space-between}.demo-gesture-tools>[data-enable-gestures]{font-size:9px!important;min-width:86px;padding:0 3px}.demo-gesture-directions{gap:3px}.demo-gesture-directions>.demo-control-button{min-width:39px;padding:0 5px}.demo-gesture-pad{min-width:74px;padding:5px 7px}.demo-input{margin-left:0;min-height:28px;font-size:9px}.demo-input-label{max-width:240px}.demo-shortcut-tools{gap:6px}.demo-shortcut-tools>.demo-control-button{min-width:68px}.demo-contextual .demo-gesture-directions>.demo-control-button{min-width:44px}}
@media(max-width:360px){.demo-playback>.demo-control-button{padding:0 6px}.demo-playback>.demo-play{min-width:52px}.demo-feature-picker-wrap{min-width:115px}.demo-gesture-pad{width:100%}.demo-gesture-tools>[data-enable-gestures]{min-width:90px}.demo-gesture-directions{gap:2px}.demo-project-scroll .demo-control-button{padding:0 10px}}
@media(prefers-reduced-motion:reduce){.feature-controls *{transition-duration:.001ms!important}.demo-control-button:active{transform:none}}

.demo-input{min-width:0;max-width:100%}.demo-input-label{overflow-wrap:anywhere}
.demo-feature-tools{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.demo-feature-tools>.demo-control-button{background:var(--surface);border-color:var(--control-border)}.demo-feature-tools>.demo-control-button[aria-pressed=true]{background:var(--hover);border-color:var(--key-border)}