.scene.bar-demo{--bd-scale:1;--bd-win-w:min(640px, calc(100% - 40px));--bd-win-top:48px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:0;height:460px}@media (min-width:640px){.scene.bar-demo{border-radius:20px;height:540px}}@media (max-width:519px){.scene.bar-demo{--bd-scale:.8;--bd-win-w:calc(100% - 28px);--bd-win-top:46px}}@media (max-width:399px){.scene.bar-demo{--bd-scale:.72}}.bar-demo .bd-hint{z-index:1;color:#fff;background:#0814284d;border:1px solid #ffffff47;border-radius:999px;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:11.5px;font-weight:600;display:inline-flex;position:absolute;top:12px;left:14px}.bar-demo .bd-window{z-index:1;left:50%;top:var(--bd-win-top);width:var(--bd-win-w);text-align:left;position:absolute;overflow:hidden;transform:translate(-50%)}.bar-demo .bd-window-bar{border-bottom:1px solid color-mix(in srgb, currentColor 10%, transparent);align-items:center;gap:7px;height:34px;padding:0 14px;display:flex}.bar-demo .bd-window-bar i{background:color-mix(in srgb, currentColor 16%, transparent);border-radius:50%;width:10px;height:10px}.bar-demo .bd-window-title{opacity:.55;margin-left:8px;font-size:11.5px;font-weight:500}.bar-demo .bd-doc{min-height:200px;padding:22px 26px 24px}.bar-demo .bd-line{background:color-mix(in srgb, currentColor 9%, transparent);border-radius:99px;height:8px;display:block}.bar-demo .bd-line+.bd-line{margin-top:11px}.bar-demo .bd-line.head{background:color-mix(in srgb, currentColor 15%, transparent);width:34%;height:12px;margin-bottom:20px}.bar-demo .bd-typed{letter-spacing:-.01em;margin:20px 0 0;font-size:15px;font-weight:500;line-height:1.6}.bar-demo .bd-caret{vertical-align:-.2em;background:var(--color-accent);width:2px;height:1.15em;margin-left:1px;animation:1.1s step-end infinite caret-blink;display:inline-block}@media (max-width:519px){.bar-demo .bd-doc{min-height:0;padding:18px 18px 20px}.bar-demo .bd-typed{font-size:14px}}.bar-demo .bd-dock{z-index:2;width:max-content;transform:translateX(-50%) scale(var(--bd-scale));transform-origin:50% 100%;font-family:var(--font-sans);letter-spacing:normal;color:#f5f5f7;-webkit-font-smoothing:antialiased;transition:opacity .3s;position:absolute;bottom:16px;left:50%}.bar-demo .bd-dock.down{transform-origin:50% 0}.bar-demo .bd-dock.dim{opacity:0}.bar-demo .bd-dock.grabbing,.bar-demo .bd-dock.grabbing *{cursor:grabbing!important}.bar-demo .bd-cursor{z-index:4;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px #0000004d);width:24px;height:24px;transition:transform .62s cubic-bezier(.45,.05,.25,1),opacity .25s;position:absolute;top:0;left:0}.bar-demo .bd-cursor.on{opacity:1}.bar-demo .bd-cursor.jump{transition:none}.bar-demo .bd-cursor svg{transform-origin:20% 10%;transition:transform .1s;display:block}.bar-demo .bd-cursor.press svg{transform:scale(.8)}.bar-demo .bd-select{z-index:3;left:calc(50% - var(--bd-win-w) / 2 + 12px);top:calc(var(--bd-win-top) + 44px);width:calc(var(--bd-win-w) - 24px);pointer-events:none;border:1.5px solid #fff;height:140px;animation:.72s cubic-bezier(.3,.7,.2,1) both bd-select;position:absolute;box-shadow:0 0 0 100vmax #080c145c}.bar-demo .bd-flash{z-index:3;opacity:0;pointer-events:none;background:#fff;animation:.45s ease-out .78s forwards bd-flash;position:absolute;inset:0}@keyframes bd-select{0%{width:0;height:0}}@keyframes bd-flash{0%{opacity:.85}to{opacity:0}}@keyframes bd-fade{0%{opacity:0}}.bar-demo .bar-stack{flex-direction:column;align-items:center;gap:8px;display:flex}.bar-demo .bd-dock.down .bar-stack{flex-direction:column-reverse}.bar-demo .bar-row-slot{justify-content:center;display:flex}.bar-demo .bar-surface{color:#f5f5f7;background:#161618f5;border:1px solid #ffffff21;box-shadow:0 12px 30px #0810204d,0 2px 6px #0810202e}.bar-demo .bar-clock{font-variant-numeric:tabular-nums}.bar-demo .bar-muted{color:#f5f5f78c;font-weight:500}.bar-demo .bar-push{margin-left:auto}.bar-demo button{cursor:pointer}.bar-demo button:focus-visible{outline-offset:2px;outline:2px solid #0a84ff}.bar-demo button:disabled{cursor:default}.bar-demo .bar-capsule{all:unset;box-sizing:border-box;color:#f5f5f7;white-space:nowrap;cursor:pointer;background:#161618f5;border:1px solid #ffffff21;border-radius:999px;align-items:center;gap:7px;height:26px;padding:0 11px 0 10px;font-size:12px;font-weight:600;display:inline-flex;box-shadow:0 10px 24px #0810204d,0 2px 6px #0810202e}.bar-demo .bar-capsule:hover{background:#26262afa}.bar-demo .bar-dots{gap:4px;display:inline-flex}.bar-demo .bar-dots i{background:#f5f5f780;border-radius:50%;width:4px;height:4px}.bar-demo .bar-dot{background:#ff453a;border-radius:50%;flex:none;width:8px;height:8px}.bar-demo .bar-dot.off{background:#f5f5f773}.bar-demo .bar-row{box-sizing:border-box;white-space:nowrap;border-radius:999px;align-items:center;gap:2px;height:42px;padding:4px;display:flex}.bar-demo .bar-btn{all:unset;box-sizing:border-box;letter-spacing:-.005em;color:#f5f5f7;cursor:pointer;border-radius:999px;align-items:center;gap:7px;height:32px;padding:0 11px;font-size:13px;font-weight:600;display:inline-flex}.bar-demo .bar-btn:hover{background:#ffffff17}.bar-demo .bar-btn[data-on=true]{background:#ffffff29}.bar-demo .bar-btn svg{flex:none}.bar-demo .bar-mark{padding:0 4px}.bar-demo .bar-icon{padding:0 8px}.bar-demo .bar-sep{background:#ffffff24;width:1px;height:20px;margin:0 3px}.bar-demo .bar-panel{box-sizing:border-box;text-align:left;border-radius:18px;flex-direction:column;gap:10px;width:300px;padding:14px;animation:.12s ease-out both bd-fade;display:flex}.bar-demo .bar-panel-head{align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.bar-demo .bar-text{color:#f5f5f79e;white-space:normal;margin:0;font-size:12px;font-weight:500;line-height:1.45}.bar-demo .bar-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bar-demo .bar-label{color:#f5f5f780;margin-bottom:-4px;font-size:11px;font-weight:600}.bar-demo .bar-chips{flex-wrap:wrap;gap:6px;display:flex}.bar-demo .bar-chip{all:unset;box-sizing:border-box;color:#f5f5f7;cursor:pointer;background:#ffffff12;border-radius:999px;align-items:center;height:28px;padding:0 11px;font-size:12px;font-weight:600;display:inline-flex}.bar-demo .bar-chip:hover{background:#ffffff21}.bar-demo .bar-chips.lengths{grid-template-columns:repeat(4,1fr);display:grid}.bar-demo .bar-chips.lengths .bar-chip{justify-content:center;padding:0}.bar-demo .bar-chip[aria-checked=true]{color:#fff;background:#0a84ff}.bar-demo .bar-chip-task{text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:28px;display:block;overflow:hidden}.bar-demo .bar-primary{all:unset;box-sizing:border-box;color:#fff;cursor:pointer;background:#0a84ff;border-radius:10px;justify-content:center;align-items:center;height:34px;font-size:13px;font-weight:600;display:flex}.bar-demo .bar-primary:hover{background:#0071e3}.bar-demo .bar-actions{gap:6px;display:flex}.bar-demo .bar-action{all:unset;box-sizing:border-box;color:#f5f5f7;cursor:pointer;background:#ffffff14;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:12px;font-weight:600;display:inline-flex}.bar-demo .bar-action:hover{background:#ffffff24}.bar-demo .bar-action.danger{color:#fff;background:#ff453ae6}.bar-demo .bar-action.danger:hover{background:#ff453a}.bar-demo .bar-action:disabled{opacity:.45;cursor:default}.bar-demo .bar-big-clock{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:34px;font-weight:600;line-height:1}.bar-demo .bar-progress{background:#ffffff1f;border-radius:999px;height:4px;overflow:hidden}.bar-demo .bar-progress>span{background:#0a84ff;height:100%;display:block}.bar-demo .bar-menu{border-radius:16px;gap:1px;width:244px;padding:6px}.bar-demo .bar-menu-item{all:unset;box-sizing:border-box;color:#f5f5f7;cursor:pointer;border-radius:10px;align-items:center;gap:10px;height:34px;padding:0 10px;font-size:13px;font-weight:600;display:flex}.bar-demo .bar-menu-item:hover{background:#ffffff17}.bar-demo .bar-menu-icon{color:#f5f5f7c7;flex:none;justify-content:center;align-items:center;width:18px;display:inline-flex}.bar-demo .bar-menu-item kbd{font:inherit;color:#f5f5f780;margin-left:auto;font-size:11px;font-weight:500}.bar-demo .bar-menu-sep{background:#ffffff1a;height:1px;margin:4px 8px}.bar-demo .bar-notice{box-sizing:border-box;white-space:nowrap;border-radius:999px;align-items:center;height:34px;padding:0 16px;font-size:12.5px;font-weight:600;display:inline-flex}.bar-demo .bar-pill-done{all:unset;box-sizing:border-box;color:#fff;cursor:pointer;background:#ffffff24;border-radius:999px;align-items:center;height:30px;margin-left:2px;padding:0 13px;font-size:12px;font-weight:600;display:inline-flex}.bar-demo .bar-pill-done:hover{background:#ffffff38}.bar-demo .bd-pill{box-sizing:border-box;color:#fffdfb;white-space:normal;text-align:center;border-radius:999px;flex-direction:column;gap:6px;max-width:460px;padding:10px 18px;font-size:13px;font-weight:600;line-height:1.3;display:flex;overflow:hidden}.bar-demo .bd-pill.listening{white-space:nowrap;text-align:left;padding:5px 5px 5px 16px}.bar-demo .bd-pill.wide{border-radius:18px;width:430px;max-width:430px;padding:10px 18px 11px}.bar-demo .bd-pill-row{align-items:center;gap:10px;min-width:0;display:flex}.bar-demo .bd-pill-dot{background:#666;border-radius:999px;flex-shrink:0;width:9px;height:9px}.bar-demo .bd-pill-dot.rec{background:#ff453a;animation:1.1s ease-in-out infinite bd-pill-pulse}.bar-demo .bd-pill-dot.busy{background:#febc2e}.bar-demo .bd-meter{background:#ffffff2e;border-radius:999px;flex:none;width:54px;height:4px;overflow:hidden}.bar-demo .bd-meter>span{height:100%;transition:width 90ms linear;display:block}.bar-demo .bd-pill-hint{opacity:.55;font-weight:500}.bar-demo .bd-partial{color:#fffdfbe0;white-space:normal;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:34px;font-size:12.5px;font-weight:500;line-height:1.35;display:-webkit-box;overflow:hidden}@keyframes bd-pill-pulse{0%,to{opacity:1}50%{opacity:.35}}.bar-demo .bd-rec{box-sizing:border-box;color:#fff;white-space:nowrap;background:#1d1d1f;border-radius:10px;align-items:center;gap:4px;width:460px;height:64px;padding:0 12px;animation:.12s ease-out both bd-fade;display:flex;box-shadow:0 14px 34px #08102059,0 2px 6px #08102033}.bar-demo .bd-rec-left{align-items:center;gap:8px;padding-right:8px;display:flex}.bar-demo .bd-rec-dot{background:#ff453a;border-radius:999px;width:10px;height:10px;animation:2s cubic-bezier(.4,0,.6,1) infinite bd-rec-pulse}.bar-demo .bd-rec-dot.off{background:#ffffff59;animation:none}.bar-demo .bd-rec-time{width:54px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:#ff453a;font-size:14px;font-weight:600;line-height:20px}.bar-demo .bd-rec-time.off{color:#ffffff8c}.bar-demo .bd-rec-flag{letter-spacing:.025em;text-transform:uppercase;color:#ffffff80;font-size:10px;font-weight:600}.bar-demo .bd-rec-right{align-items:center;gap:2px;margin-left:auto;display:flex}.bar-demo .bd-rec-btn{all:unset;box-sizing:border-box;color:#ffffffd9;cursor:pointer;border-radius:999px;place-items:center;width:32px;height:32px;transition:background .15s,color .15s;display:grid}.bar-demo .bd-rec-btn:hover{color:#fff;background:#ffffff1a}.bar-demo .bd-rec-btn[data-on=true]{color:#fff;background:#fff3}.bar-demo .bd-rec-stop{all:unset;box-sizing:border-box;color:#fff;cursor:pointer;background:#ff453a;border-radius:999px;align-items:center;gap:6px;height:32px;margin-left:4px;padding:0 12px;font-size:12px;font-weight:600;line-height:16px;display:inline-flex}.bar-demo .bd-rec-stop:hover{filter:brightness(1.1)}@keyframes bd-rec-pulse{50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.bar-demo *,.bar-demo :before,.bar-demo :after{transition:none!important;animation:none!important}}