@layer components{.hw{--hw-bg:#08101f;--hw-cyan:#00a2ff;--hw-ink:#7fd0ff;--hw-amber:#ffb020;--hw-green:#3ddc97;background:radial-gradient(70% 60% at 42% 62%,#13254a 0%,#13254a00 70%),linear-gradient(#08101f,#070d1a)}.hw-step{text-align:left;color:var(--fg-3);transition:color var(--dur-state) var(--ease-out);gap:.25rem;padding:1.1rem 1rem .25rem 0;display:grid;position:relative}.hw-step:before{content:"";background:#ffffff1f;border-radius:2px;height:2px;position:absolute;inset:0 .75rem auto 0}.hw-step:after{content:"";background:var(--hw-cyan);transform-origin:0;height:2px;transition:transform var(--dur-transition) var(--ease-out);border-radius:2px;position:absolute;inset:0 .75rem auto 0;transform:scaleX(0)}.hw-step[data-state=done]:after{opacity:.45;transform:scaleX(1)}.hw-step[aria-current=step]:after{transform:scaleX(1)}.hw-step:hover,.hw-step[data-state=done]{color:var(--fg-2)}.hw-step[aria-current=step]{color:var(--fg)}.hw-step:focus-visible{outline-offset:4px;border-radius:4px;outline:2px solid #5cc2ff}.hw-pin{--lift:8px;will-change:transform;position:absolute;top:0;left:0}.hw-pin>button{cursor:pointer;outline:none;flex-direction:column;align-items:center;display:flex;position:absolute;bottom:0;transform:translate(-50%)translateY(4px)}.hw-pin>button:before{content:"";position:absolute;inset:-4px -6px}.hw-chip{margin-bottom:calc(var(--lift) + 6px);white-space:nowrap;letter-spacing:-.005em;color:#eef1f7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out);background:#080e1edb;border:1px solid #7fd0ff52;border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .65rem .3rem .35rem;font-size:.8125rem;font-weight:500;line-height:1.2;display:inline-flex;box-shadow:0 4px 16px -6px #0009}.hw-n{width:1.3rem;height:1.3rem;font-family:var(--font-plex-mono), ui-monospace, monospace;font-variant-numeric:tabular-nums;background:#ffffff1a;border-radius:999px;place-items:center;font-size:.6875rem;display:inline-grid}.hw-stem{width:1px;height:calc(var(--lift) + 2px);transition:height var(--dur-state) var(--ease-out);background:linear-gradient(#ffffff8c,#ffffff26);position:absolute;bottom:4px}.hw-dot{width:9px;height:9px;transition:box-shadow var(--dur-state) var(--ease-out);background:#fff;border-radius:999px;position:absolute;bottom:-4px;box-shadow:0 0 0 1.5px #7fd0ffe6}.hw-pin[data-state=rest] .hw-chip{opacity:.92}.hw-pin:hover,.hw-pin:focus-within{z-index:5}.hw-pin[data-state=focus] .hw-chip{color:#fff;background:#0a1e3aeb;border-color:#7fd0ffd9}.hw-pin[data-state=focus] .hw-dot{box-shadow:0 0 0 2px var(--hw-cyan), 0 0 0 6px #00a2ff33}.hw-pin[data-tone=amber][data-state=focus] .hw-chip{border-color:#ffb02099}.hw-pin[data-tone=amber][data-state=focus] .hw-dot,.hw-pin[data-tone=amber][data-state=selected] .hw-dot{box-shadow:0 0 0 2px var(--hw-amber)}.hw-pin>button:hover .hw-chip,.hw-pin>button:focus-visible .hw-chip{opacity:1;color:#04101f;background:#fff;border-color:#fff;transform:translateY(-2px)}.hw-pin>button:hover .hw-n,.hw-pin>button:focus-visible .hw-n{background:#04101f1a}.hw-pin>button:focus-visible .hw-chip{outline-offset:3px;outline:2px solid #5cc2ff}.hw-pin>button:hover .hw-stem{height:calc(var(--lift) + 6px)}.hw-pin[data-state=selected] .hw-chip{opacity:1;color:#fff;border:1.5px solid var(--hw-cyan);background:#06162cf0;box-shadow:0 0 0 4px #00a2ff29,0 6px 20px -6px #0009}.hw-pin[data-state=selected][data-tone=amber] .hw-chip{background:var(--hw-amber);border-color:var(--hw-amber)}.hw-pin[data-state=selected][data-tone=green] .hw-chip{background:var(--hw-green);border-color:var(--hw-green)}.hw-pin[data-state=selected] .hw-n{background:var(--hw-cyan);color:#04101f}.hw-pin[data-state=selected] .hw-dot{box-shadow:0 0 0 2px var(--hw-cyan), 0 0 0 7px #00a2ff38}.hw-pin[data-dim=true]{opacity:.9}.hw-pin[data-dim=true] .hw-name{display:none}.hw-pin[data-dim=true] .hw-chip{border-color:#ffffff80;padding:.2rem}.hw-pin[data-dim=true]>button:hover .hw-name,.hw-pin[data-dim=true]>button:focus-visible .hw-name{display:inline}.hw-pin[data-dim=true]>button:hover .hw-chip,.hw-pin[data-dim=true]>button:focus-visible .hw-chip{padding:.3rem .65rem .3rem .35rem}.hw-pin[data-dim=true]:hover{opacity:1}.hw-invite{white-space:nowrap;color:#fff;pointer-events:none;animation:hw-invite 2.4s var(--ease-in-out) infinite;background:#080e1eb3;border-radius:6px;padding:.2rem .55rem;font-size:.8125rem;position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%)}@keyframes hw-invite{50%{opacity:.75;transform:translate(-50%,3px)}}.hw-panel>*{animation:hw-in var(--dur-transition) var(--ease-out) both}.hw-panel>:nth-child(2){animation-delay:60ms}.hw-panel>:nth-child(3){animation-delay:.12s}.hw-panel>:nth-child(n+4){animation-delay:.18s}@keyframes hw-in{0%{opacity:0;transform:translateY(8px)}}@media (min-width:1024px){.hw-still-layout{max-width:1320px;padding-inline:var(--gutter);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:2.5rem;margin-inline:auto;display:grid}.hw-still-layout .hw-still-img{-webkit-mask-image:radial-gradient(85% 80% at 50% 55%,#000 62%,#0000 100%);mask-image:radial-gradient(85% 80% at 50% 55%,#000 62%,#0000 100%)}.hw-still-layout .hw-still-panel{max-width:440px;padding:0}}.hw-stepper{min-height:3rem;transition:background-color var(--dur-state) var(--ease-out);background:#ffffff0a;border-radius:10px;padding:.45rem .75rem;box-shadow:inset 0 0 0 1px #ffffff1a}.hw-stepper:hover{background:#ffffff17}.hw-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#03060ec7}.hw-example{letter-spacing:.01em;color:#aeb4c0;vertical-align:.1em;border:1px solid #ffffff29;border-radius:4px;margin-left:.25rem;padding:.05rem .4rem;font-size:.6875rem;font-weight:500;display:inline-block}.hw-more summary{cursor:pointer;list-style:none}.hw-more summary::-webkit-details-marker{display:none}.hw-more[open] .hw-more-icon{transform:rotate(45deg)}.hw-tag{--lift:26px;--tag:var(--hw-ink);pointer-events:none;will-change:transform;transition:opacity var(--dur-state) var(--ease-out);position:absolute;top:0;left:0}.hw-tag[data-off="1"]{opacity:0}.hw-tag[data-tone=amber]{--tag:var(--hw-amber)}.hw-tag[data-tone=green]{--tag:var(--hw-green)}.hw-tag-chip{left:0;bottom:calc(var(--lift) + 2px);white-space:nowrap;font-family:var(--font-plex-mono), ui-monospace, monospace;letter-spacing:.04em;text-transform:uppercase;color:#f2f6fb;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tag) 70%, transparent), 0 4px 14px -6px #000000b3;background:#050c1aeb;border-radius:3px;padding:.2rem .45rem;font-size:.6875rem;font-weight:500;line-height:1.25;position:absolute;transform:translate(-50%)}.hw-tag-stem{width:1px;height:calc(var(--lift) - 1px);background:var(--tag);opacity:.85;position:absolute;bottom:3px;left:-.5px}.hw-tag-dot{background:var(--tag);width:6px;height:6px;position:absolute;top:-3px;left:-3px;box-shadow:0 0 0 1.5px #050c1ae6}.hw-tag-still{will-change:auto}.hw-tag-still .hw-tag-chip{padding:.15rem .35rem;font-size:.625rem}.hw-chain{--on:var(--hw-ink);color:var(--fg-3);flex-wrap:wrap;align-items:center;gap:.35rem 0;font-size:.8125rem;line-height:1.3;display:flex}.hw-chain[data-tone=amber]{--on:var(--hw-amber)}.hw-chain[data-tone=green]{--on:var(--hw-green)}.hw-chain li{white-space:nowrap;transition:color var(--dur-state) var(--ease-out);align-items:center;gap:.4rem;display:inline-flex}.hw-chain li+li:before{content:"";width:.8rem;height:1px;transition:background-color var(--dur-state) var(--ease-out);background:#ffffff38;margin:0 .4rem}.hw-chain li[data-on=true]+li[data-on=true]:before{background:var(--on)}.hw-chain-dot{width:7px;height:7px;transition:background-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);border-radius:999px;box-shadow:inset 0 0 0 1px #fff6}.hw-chain li[data-on=true]{color:#fff}.hw-chain li[data-on=true] .hw-chain-dot{background:var(--on);box-shadow:0 0 0 3px color-mix(in srgb, var(--on) 22%, transparent)}.hw-pause{min-height:2rem;color:var(--fg-2);transition:color var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);border-radius:999px;align-items:center;gap:.5rem;padding:.25rem .75rem .25rem .6rem;font-size:.8125rem;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff2e}.hw-pause:hover{color:#fff;background:#ffffff14}.hw-pause:focus-visible{outline-offset:3px;outline:2px solid #5cc2ff}.hw-pause-icon{border-inline:2.5px solid;width:8px;height:10px}.hw-pause-icon[data-paused=true]{border:5px solid #0000;border-left:8px solid;border-right:0;width:0;height:0}}@media (prefers-reduced-motion:reduce){.hw-invite,.hw-panel>*{animation:none}}