.hero-demo .hero-bridge{z-index:2;width:560px;max-width:calc(100% - 80px);height:64px;padding:0 40px;border-radius:0 0 24px 24px}
.hero-demo .hero-bridge>img{width:36px;height:36px}
.hero-demo-action{position:relative;display:grid;place-items:center;flex:none;width:140px;height:36px;color:var(--accent)}
.hero-demo-action-value,.hero-demo-action-arrow{grid-area:1/1;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;transform-origin:center}
.hero-demo-action .hero-demo-bridge-time{font-size:20px;font-weight:500;letter-spacing:0}
.hero-demo-action-arrow{font-size:30px;font-weight:550;opacity:0;transform:scale(.25);filter:blur(4px)}
.hero-demo-bridge-play{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid currentColor;margin-right:5px}
.hero-demo-action strong[hidden],.hero-demo-bridge-play[hidden]{display:none}
.hero-demo.is-hero-hovered .hero-demo-action-value,.hero-demo .hero-bridge:hover .hero-demo-action-value{opacity:0;transform:scale(.25);filter:blur(4px)}
.hero-demo.is-hero-hovered .hero-demo-action-arrow,.hero-demo .hero-bridge:hover .hero-demo-action-arrow{opacity:1;transform:scale(1);filter:blur(0)}
.hero-demo-reveal{position:absolute;z-index:3;top:64px;left:50%;width:min(640px,calc(100% - 36px));height:148px;overflow:hidden;transform:translateX(-50%);pointer-events:none}
.hero-demo-panel{position:relative;top:0;width:100%;height:148px;padding:20px;border-radius:28px;background:linear-gradient(135deg,#ffffff12,#ffffff04),#343735d9;backdrop-filter:blur(30px) saturate(.6);box-shadow:inset 0 1px 1px #ffffff30,inset 0 0 0 1px #ffffff0b}
.hero-demo.is-hero-idle .hero-demo-reveal{height:96px}
.hero-demo.is-hero-idle .hero-demo-panel{height:96px}
.hero-demo-active,.hero-demo-idle{display:flex;align-items:center;gap:16px;height:56px}
.hero-demo-active[hidden],.hero-demo-idle[hidden]{display:none}
.hero-demo-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:24px;font-weight:500;letter-spacing:-.02em}
.hero-demo-clock{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
.hero-demo-control{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:#ffffff14;color:var(--ink)}
.hero-demo-control--pause{background:var(--accent);color:#182019}
.hero-demo-pause{height:17px;width:12px;border-inline:4px solid currentColor}
.hero-demo-stop-symbol{height:15px;width:15px;border-radius:2px;background:currentColor}
.hero-demo-totals{display:flex;align-items:center;justify-content:space-between;gap:24px;height:36px;margin-top:16px;font-size:20px;line-height:1.25;color:#b3b7b5;white-space:nowrap}
.hero-demo-totals[hidden]{display:none}
.hero-demo-totals strong{margin-left:10px;color:var(--accent);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.hero-demo-client{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#151916;color:#e7efdf}
.hero-demo-client svg{width:27px;height:27px;fill:currentColor}
.hero-demo-input{display:flex;align-items:center;flex:1;min-width:0;height:56px;padding:10px 12px;border:1px solid #ffffff24;border-radius:14px;background:#ffffff0f;font-size:22px;line-height:1.3;white-space:nowrap;overflow:hidden}
.hero-demo-input:empty::before{content:"Session title";color:#bec2bf9c}
.hero-demo-input.is-demo-typing::after{content:"";height:25px;width:2px;flex:none;background:var(--accent);margin-left:3px}
.hero-demo-start{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;height:56px;padding:0 20px;border-radius:28px;background:var(--accent);color:#182019;font-size:22px;font-weight:600}
.hero-demo-play{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor}
.hero-demo-number{display:inline-flex;align-items:baseline;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-demo-digit{position:relative;display:inline-block;flex:none;width:1ch;height:1.25em;overflow:hidden;vertical-align:bottom;--digit-offset:.45em}
.hero-demo-character{display:inline-block;flex:none}
.hero-demo-digit-current,.hero-demo-digit-out{display:block;line-height:1.25;text-align:center}
.hero-demo-digit-out{position:absolute;inset:0}
.hero-demo-digit.is-decreasing{--digit-offset:-.45em}
.hero-demo-cursor{position:absolute;z-index:5;top:0;left:0;width:28px;height:34px;color:#f8faf2;filter:drop-shadow(0 2px 2px #00150d55);transform:translate3d(var(--demo-cursor-x,55%),var(--demo-cursor-y,540px),0);opacity:0;pointer-events:none}
.hero-demo-cursor svg{display:block;width:100%;height:100%;fill:currentColor;stroke:#283b2e;stroke-width:1.3;stroke-linejoin:round}
.hero-demo-ready .hero-demo-panel{opacity:0;transform:translateY(-100%)}
.hero-demo-ready.is-hero-expanded .hero-demo-panel{opacity:1;transform:translateY(0)}
.hero-demo-ready.is-hero-cursor-visible .hero-demo-cursor{opacity:1}
.hero-demo-initializing .hero-demo-reveal,.hero-demo-initializing .hero-demo-panel,.hero-demo-initializing .hero-demo-cursor{transition:none!important}
.hero-demo .is-demo-pressed{transform:scale(.96)}
@media(prefers-reduced-motion:no-preference){
  .hero-demo-ready .hero-bridge>img{animation:hero-demo-spin 8s linear infinite;animation-play-state:paused}
  .hero-demo-ready.is-hero-running.is-hero-playing .hero-bridge>img{animation-play-state:running}
  .hero-demo-reveal{transition:height 160ms ease-out}
  .hero-demo-panel{transition:opacity 140ms ease-out,transform 140ms ease-out,height 160ms ease-out}
  .hero-demo-ready.is-hero-expanded .hero-demo-panel{transition-duration:140ms,220ms,160ms;transition-timing-function:ease-out,cubic-bezier(.2,.8,.2,1),ease-out}
  .hero-demo-action-value,.hero-demo-action-arrow{transition:opacity 160ms ease-out,transform 160ms ease-out,filter 160ms ease-out}
  .hero-demo-cursor{transition:transform 700ms cubic-bezier(.22,1,.36,1),opacity 220ms ease-out}
  .hero-demo-control,.hero-demo-start{transition:transform 120ms ease-out}
  .hero-demo-digit.is-changing .hero-demo-digit-current{animation:hero-demo-digit-in 250ms ease-out both}
  .hero-demo-digit.is-changing .hero-demo-digit-out{animation:hero-demo-digit-out 250ms ease-out both}
}
@keyframes hero-demo-spin{to{transform:rotate(360deg)}}
@keyframes hero-demo-digit-in{from{opacity:0;transform:translateY(var(--digit-offset));filter:blur(1.5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-demo-digit-out{from{opacity:1;transform:translateY(0);filter:blur(0)}to{opacity:0;transform:translateY(calc(var(--digit-offset) * -1));filter:blur(1.5px)}}
@media(max-width:680px){.hero-demo .hero-bridge{height:48px;width:280px;max-width:calc(100% - 54px);padding:0 22px;border-radius:0 0 19px 19px}.hero-demo .hero-bridge>img{width:24px;height:24px}.hero-demo-action{width:106px;height:28px}.hero-demo-action .hero-demo-bridge-time{font-size:14px}.hero-demo-action-arrow{font-size:24px}.hero-demo-bridge-play{border-top-width:7px;border-bottom-width:7px;border-left-width:11px}.hero-demo-reveal{top:48px;width:calc(100% - 20px);height:106px}.hero-demo-panel{height:106px;padding:12px;border-radius:19px}.hero-demo.is-hero-idle .hero-demo-reveal,.hero-demo.is-hero-idle .hero-demo-panel{height:64px}.hero-demo-active,.hero-demo-idle{gap:8px;height:40px}.hero-demo-title{font-size:14px}.hero-demo-clock{font-size:15px}.hero-demo-control{width:36px;height:36px}.hero-demo-pause{height:12px;width:8px;border-inline-width:3px}.hero-demo-stop-symbol{width:10px;height:10px}.hero-demo-totals{font-size:11px;gap:8px;height:28px;margin-top:10px}.hero-demo-totals strong{font-size:12px;margin-left:5px}.hero-demo-client{width:28px;height:32px;border-radius:8px}.hero-demo-client svg{width:18px;height:18px}.hero-demo-input{height:40px;padding:6px 8px;font-size:14px}.hero-demo-input.is-demo-typing::after{height:18px;width:1.5px;margin-left:2px}.hero-demo-start{height:40px;padding-inline:13px;font-size:14px;gap:7px}.hero-demo-play{border-top-width:6px;border-bottom-width:6px;border-left-width:9px}.hero-demo-cursor{width:24px;height:29px}}
@media(max-width:380px){.hero-demo-title{font-size:12px}.hero-demo-clock{font-size:13px}.hero-demo-control{width:30px;height:30px}.hero-demo-totals{font-size:10px}.hero-demo-totals strong{font-size:11px;margin-left:4px}.hero-demo-input{font-size:12px}.hero-demo-start{font-size:12px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.hero-demo-cursor{display:none}.hero-demo .hero-demo-reveal{transition:none}.hero-demo .hero-demo-panel{opacity:1;transform:none;transition:none}.hero-demo .hero-bridge>img{animation:none}.hero-demo-control,.hero-demo-start,.hero-demo-action-value,.hero-demo-action-arrow{transition:none}.hero-demo .hero-demo-action-value{opacity:1;transform:none;filter:none}.hero-demo .hero-demo-action-arrow{display:none}.hero-demo-digit-out{display:none}}