.hero-figure{max-width:680px;margin:0 auto;container:hero-visual/inline-size}.hero-scene{perspective:1300px;perspective-origin:50% 35%;height:540px;position:relative}.hero-rig{--ry:-15deg;--rx:9deg;--order-top:31%;--field-h:28px;--field-gap:7px;transform-style:preserve-3d;transform:rotateY(calc(var(--ry) + var(--tx,0deg))) rotateX(calc(var(--rx) + var(--ty,0deg)));transition:transform .7s var(--ease-out-quint);position:absolute;inset:0}.hero-item{transform-style:preserve-3d;transform:translateZ(var(--z));position:absolute}.hero-fly,.hero-pop{transform-style:preserve-3d}.hero-fly{animation:hero-fly-in var(--fly,1.15s) var(--ease-out-quint) backwards;animation-delay:var(--d)}@keyframes hero-fly-in{0%{opacity:0;transform:translate3d(0,50px,-520px)}}@media (prefers-reduced-motion:reduce){.hero-fly{animation:none}}.no-motion .hero-fly{animation:none}.hero-item--message{width:52%;top:2%;left:0}.hero-item--order{left:15%;top:var(--order-top);width:72%}.hero-item--invoice{right:2%;top:calc(var(--order-top) + 66px + 5 * var(--field-h) + 4 * var(--field-gap));width:40%}.hero-item--chip{width:min(35ch + 42px,100%);font:500 13px/1.45 var(--font-mono);top:11%;right:4%}.hero-card{position:relative}.hero-panel{background:var(--color-night-2);border:1px solid #ffffff24;border-radius:16px;box-shadow:0 50px 80px -40px #000000f2,0 20px 40px -24px #000c}.hero-label{color:#ffffffb3;font-size:12px;line-height:1.4}.hero-value{color:#fff;font-size:13px;line-height:1.45}.hero-fade{transition:opacity .34s}.hero-root[data-hero-state=live][data-step=reset] .hero-fade{opacity:0}.hero-msg{padding:12px 14px 14px}.hero-msg-head{letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;font-weight:500}.hero-bubble{background:#ffffff0a;border:1px solid #ffffff1f;border-radius:12px 12px 12px 4px;padding:9px 11px}.hero-msg-from{white-space:nowrap;margin-bottom:2px;font-weight:600;display:block}.hero-msg-text{color:#ffffffd9;height:2.9em;font-size:14px;display:block;overflow:hidden}.hero-pop[data-on]{animation:.9s ease-in-out hero-pop}@keyframes hero-pop{40%{transform:translateZ(80px)}}.hero-card[data-card=order]:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,25%) var(--my,0%), #ffffff12, transparent 60%);position:absolute;inset:0}.hero-titlebar{border-bottom:1px solid var(--color-night-line);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.hero-crumbs{min-width:0;font-family:var(--font-mono);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hero-order-body{flex-direction:column;gap:12px;padding:14px 16px 16px;display:flex}.hero-fields{gap:var(--field-gap) 10px;grid-template-columns:72px minmax(0,1fr);margin:0;display:grid}.hero-fields dt{align-self:center}.hero-fields dd{height:var(--field-h);line-height:calc(var(--field-h) - 2px);white-space:nowrap;text-overflow:ellipsis;border:1px solid #ffffff29;border-radius:7px;margin:0;padding:0 8px;transition:border-color .4s,background-color .8s;overflow:hidden}.hero-fields dd:empty{border-style:dashed}.hero-fields dd[data-on]{background-color:color-mix(in srgb, var(--color-cyan) 14%, transparent);border-color:color-mix(in srgb, var(--color-cyan) 40%, transparent)}.hero-approve-row{align-items:center;gap:10px;min-height:34px;display:flex}.hero-approve{color:#ffffffb3;background:#ffffff0a;border:1px solid #ffffff29;border-radius:8px;flex:none;padding:5px 14px;font-weight:600;transition:color .3s,border-color .3s,background-color .3s,transform .15s;position:relative}.hero-approve .hero-value{color:inherit}.hero-approve:is([data-on=ask],[data-on=press]){color:var(--color-ivory);border-color:color-mix(in srgb, var(--color-ivory) 60%, transparent)}.hero-approve[data-on=press]{background:color-mix(in srgb, var(--color-ivory) 10%, transparent);transform:translateY(1px)}.hero-approve[data-on=done]{color:var(--color-cyan);border-color:color-mix(in srgb, var(--color-cyan) 40%, transparent);background:color-mix(in srgb, var(--color-cyan) 8%, transparent)}.hero-ripple{border:2px solid var(--color-cyan);opacity:0;pointer-events:none;border-radius:10px;position:absolute;inset:-2px}.hero-ripple[data-on]{animation:.7s ease-out forwards hero-ripple}@keyframes hero-ripple{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}.hero-note{color:#ffffffd9;white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.hero-flip{--flip-time:.9s;height:98px;transform-style:preserve-3d;transition:transform var(--flip-time) var(--ease-out-quint)}.hero-flip[data-on]{transform:rotateY(180deg)}.hero-face{backface-visibility:hidden;flex-direction:column;justify-content:center;gap:6px;padding:12px 14px;transition:opacity 1ms linear;display:flex;position:absolute;inset:0;transform:translateZ(.1px)}.hero-face--back{border-color:color-mix(in srgb, var(--color-cyan) 40%, transparent);transform:rotateY(180deg)translateZ(.1px)}.hero-flip[data-on] .hero-face--front{opacity:0;transition-delay:calc(var(--flip-time) * .1237)}.hero-flip[data-on] .hero-face--back{transition-delay:calc(var(--flip-time) * .1589)}.hero-flip:not([data-on]) .hero-face--back{opacity:0;transition-delay:calc(var(--flip-time) * .1063)}.hero-flip:not([data-on]) .hero-face--front{transition-delay:calc(var(--flip-time) * .1386)}.hero-face .hero-label{letter-spacing:.08em;text-transform:uppercase}.hero-face--back .hero-label{color:var(--color-cyan)}.hero-face-value{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;overflow:hidden}.hero-chip{background:var(--color-cyan);white-space:nowrap;border-radius:9999px;align-items:center;gap:8px;padding:7px 13px;display:flex;box-shadow:0 18px 30px -16px #000000e6}.hero-chip .hero-value{min-width:0;color:var(--color-night);text-overflow:ellipsis;font-weight:500;overflow:hidden}.hero-chip-dot{background:var(--color-night);border-radius:9999px;flex:none;width:7px;height:7px}@media (max-width:1280px){.hero-rig{--ry:-10deg;--rx:6deg}}@container hero-visual (max-width:619px){.hero-scene{height:530px}.hero-rig{--ry:-10deg;--rx:6deg}}@container hero-visual (max-width:479px){.hero-scene{height:580px}.hero-rig{--ry:-7deg;--rx:6deg}.hero-item--message{width:74%;top:5%}.hero-rig{--order-top:34%}.hero-item--order{width:92%;left:4%}.hero-item--invoice{width:62%;top:auto;bottom:4%}.hero-item--chip{top:0;right:0}.hero-chip{padding:6px 11px}}@container hero-visual (max-width:340px){.hero-item--chip{width:88%;right:4%}}.hero-root[data-paused] .hero-visual :not(.hero-fly){animation-play-state:paused}.hero-root:is([data-hero-state=idle],[data-hero-state=replay]) *{transition:none}.hero-root:is([data-hero-state=idle],[data-hero-state=replay]) :is(.hero-pop,.hero-ripple){animation:none}.hero-root:is([data-hero-state=idle],[data-hero-state=replay]) .hero-flip{transform:none}.hero-root:is([data-hero-state=idle],[data-hero-state=replay]) .hero-face{backface-visibility:visible;transform:none}.hero-control-row{z-index:1;justify-content:flex-end;align-items:center;min-height:44px;margin:8px 0;display:flex;position:relative}.hero-control{white-space:nowrap;text-align:center;color:#fff;background:color-mix(in srgb, var(--color-night-2) 85%, transparent);border:1px solid #ffffff40;border-radius:9999px;min-width:14rem;min-height:44px;padding:0 18px;font-size:14px;font-weight:600;transition:opacity .25s .4s,background-color .15s}.hero-control:hover{background:#ffffff1a}.hero-root[data-hero-state=static] .hero-control{visibility:hidden;opacity:0}.hero-root[data-hero-state=live] .hero-control{opacity:0}.hero-root[data-hero-state=live] :is(.hero-scene:hover+.hero-control-row,.hero-control-row:hover) .hero-control,.hero-root[data-hero-state=live] .hero-control:focus-visible,.hero-root[data-hero-state=live][data-paused] .hero-control{opacity:1;transition-delay:0s}@media (hover:none),(any-pointer:coarse){.hero-root[data-hero-state=live] .hero-control{opacity:1;transition-delay:0s}}