.spk,.jlt,.rxn,.sla,.tgi,.bil,.cwh,.dyn,.tkt,.cmp,.tms,.asp{--fill-on:#17181a;--fill-slab:#fff;--signal:#2231dd}.asp{--ink:#17181a;--ink-rgb:23, 24, 26;--ink-3:#868788;--wash:.06;--card:#fff;--surface-2:#f1f1f1}
.dyn{box-sizing:border-box;width:300px;height:182px;font-family:var(--font-ui);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:flex-start;align-items:center;padding:16px 0;display:flex}.dyn-top{justify-content:center;align-items:center;height:150px;display:flex}.dyn-pill{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#000;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative;overflow:hidden}.dyn-in{display:flex;position:absolute;inset:0}.dyn-compact,.dyn-open{align-items:center;gap:12px;display:flex;position:absolute;inset:0}.dyn-compact{justify-content:space-between;padding:0 12px}.dyn-open{gap:12px;padding:0 16px}.dyn-open[data-kind=Music]{align-items:stretch;padding:16px 20px}.dyn-num{font-variant-numeric:tabular-nums;letter-spacing:0;font-size:13px;font-weight:500}.dyn-amber{color:#e09a12}.dyn-green{color:#30d158}.dyn-amber-bg{color:#e09a12;background:#ff9f0a3d}.dyn-red-bg{color:#fff;background:#e5484d}.dyn-round{border-radius:50%;flex:none;place-items:center;width:46px;height:46px;transition:scale .16s;display:grid}.dyn-round:active{scale:.96}.dyn-grow{flex:1}.dyn-label{color:#ffffff8c;letter-spacing:0;font-size:12px;font-weight:400}.dyn-big{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:30px;font-weight:500;line-height:1}.dyn-open[data-kind=Timer] .dyn-label{align-self:center;margin-right:-4px}.dyn-face{object-fit:cover;border-radius:50%;flex:none;width:46px;height:46px}.dyn-who{text-align:left;flex-direction:column;gap:2px;min-width:0;display:flex}.dyn-name{color:#fff;letter-spacing:-.01em;font-size:16px;font-weight:500}.dyn-open[data-kind=Call] .dyn-label{letter-spacing:-.01em;font-size:14px}.dyn-open[data-kind=Call] .dyn-name{letter-spacing:-.01em;font-size:16px}.dyn-open[data-kind=Music] .dyn-label{letter-spacing:-.01em;font-size:14px}.dyn-open[data-kind=Music] .dyn-name{letter-spacing:-.01em;font-size:16px}.dyn-open[data-kind=Music] .dyn-t{letter-spacing:0;width:38px;font-size:13px}.dyn-open[data-kind=Flight] .dyn-label{letter-spacing:-.01em;font-size:14px}.dyn-open[data-kind=Flight] .dyn-code{letter-spacing:-.03em;font-size:30px}.dyn-open[data-kind=Flight] .dyn-t{letter-spacing:0;width:auto;font-size:13px}.dyn-open[data-kind=Flight] .dyn-eta{letter-spacing:-.01em;font-size:14px}.dyn-art{object-fit:cover;border-radius:10px;flex:none;width:46px;height:46px}.dyn-art-s{border-radius:6px;width:22px;height:22px}.dyn-music{flex-direction:column;justify-content:space-between;width:100%;display:flex}.dyn-row{align-items:center;gap:12px;display:flex}.dyn-track{gap:12px}.dyn-t{color:#ffffff80;font-variant-numeric:tabular-nums;letter-spacing:0;width:34px;font-size:11px}.dyn-t:last-child{text-align:right}.dyn-rail{background:#ffffff38;border-radius:3px;flex:1;height:5px;overflow:hidden}.dyn-rail>span{background:var(--fill-slab,var(--card));border-radius:inherit;height:100%;transition:width 1s linear;display:block}.dyn-ctl{justify-content:center;gap:32px}.dyn-play{place-items:center;display:grid}.dyn-bars{align-items:center;gap:2px;height:16px;display:inline-flex}.dyn-bars i{background:#ff6fa0;border-radius:2px;width:3px;height:4px;transition:height .22s}.dyn-bars[data-on] i{animation:.9s ease-in-out infinite alternate dyn-bar}.dyn-bars[data-on] i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}.dyn-bars[data-on] i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}.dyn-bars[data-on] i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}.dyn-open[data-kind=Flight]{align-items:stretch;padding:16px 20px}.dyn-cyan{color:#64d2ff}.dyn-plane{rotate:45deg}.dyn-flight{flex-direction:column;justify-content:space-between;width:100%;display:flex}.dyn-flight .dyn-ends{justify-content:space-between}.dyn-flight .dyn-t{letter-spacing:0;width:auto;font-size:11px}.dyn-code{letter-spacing:-.03em;color:#fff;font-size:30px;font-weight:500;line-height:1.1}.dyn-fly{flex:1;height:22px;margin:0 4px;position:relative}.dyn-fly:before,.dyn-fly>i{content:"";border-radius:3px;height:6px;position:absolute;top:50%;left:0;translate:0 -50%}.dyn-fly:before{background:#ffffff2e;right:0}.dyn-fly>i{width:calc(var(--p) * (100% - 18px) + 9px);background:#64d2ff;transition:width 1s linear}.dyn-fly .dyn-plane{top:50%;left:calc(var(--p) * (100% - 18px));color:#fff;transition:left 1s linear;position:absolute;translate:0 -50%}.dyn-eta{letter-spacing:0;font-size:12px;font-weight:400}.dyn-pill[data-tone=white]{background:var(--fill-slab,var(--card));color:var(--fill-on,var(--ink));box-shadow:0 0 0 1px #0000000f}.dyn-pill[data-tone=white] .dyn-label,.dyn-pill[data-tone=white] .dyn-t{color:#00000080}.dyn-pill[data-tone=white] .dyn-name{color:var(--fill-on,var(--ink))}.dyn-pill[data-tone=white] .dyn-amber{color:#e09a12}.dyn-pill[data-tone=white] .dyn-amber-bg{color:#e09a12;background:#ff950029}.dyn-pill[data-tone=white] .dyn-green{color:#1f9d55}.dyn-pill[data-tone=white] .dyn-cyan{color:#0a84ff}.dyn-pill[data-tone=white] .dyn-code{color:#111}.dyn-pill[data-tone=white] .dyn-fly:before{background:#0000001a}.dyn-pill[data-tone=white] .dyn-fly>i{background:#0a84ff}.dyn-pill[data-tone=white] .dyn-fly .dyn-plane{color:var(--fill-on,var(--ink))}.dyn-pill[data-tone=white] .dyn-rail{background:#0000001a}.dyn-pill[data-tone=white] .dyn-rail>span{background:#111}@media (prefers-reduced-motion:reduce){.dyn-bars[data-on] i{height:10px;animation:none}}@keyframes dyn-bar{0%{height:4px}to{height:16px}}
.rxn{width:300px;font-family:var(--font-ui);color:var(--fill-on,var(--ink));padding:8px 0 0;position:relative}.rxn-msg{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.rxn-morph{background:var(--fill-slab,var(--card));border-radius:var(--rxn-r);justify-content:center;align-items:center;display:flex;position:relative}[data-stroke=on] .rxn-morph{box-shadow:0 0 0 1px var(--pane-edge)}.rxn-text{white-space:nowrap;transform-origin:50%;letter-spacing:-.01em;width:max-content;padding:0 20px;font-size:16px;line-height:22px;display:block}.rxn-row{flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;margin-top:8px;display:flex;position:relative}.rxn-chip{background:var(--fill-slab,var(--card));height:36px;color:inherit;font:inherit;cursor:pointer;letter-spacing:-.01em;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 16px 0 12px;font-size:14px;font-weight:500;transition:background-color .16s,box-shadow .16s;display:flex}.rxn-chip[data-mine]{background:var(--fill-slab,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--signal,#2231dd) 35%, transparent);color:var(--signal,#2231dd)}[data-theme=dark] .rxn-chip[data-mine],[data-fill=dark] .rxn-chip[data-mine]{color:#8c9bff;box-shadow:inset 0 0 0 1px #8c9bff66}[data-theme=dark] [data-fill=light] .rxn-chip[data-mine]{color:var(--signal,#2231dd);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--signal,#2231dd) 35%, transparent)}.rxn-chip-e{letter-spacing:-.02em;font-size:20px;line-height:1;transition:opacity .16s}.rxn-chip-e[data-landing]{opacity:0}.rxn-p{font-style:normal;line-height:1;display:inline-block;position:relative}.rxn-p[data-play][data-k=launch]{animation:.64s cubic-bezier(.3,1.2,.4,1) rxn-launch}.rxn-p[data-play][data-k=launch]:after{content:"";background:color-mix(in srgb, var(--fill-on,#17181a) 20%, transparent);border-radius:50%;width:7px;height:7px;animation:.52s ease-out forwards rxn-puff;position:absolute;top:70%;left:20%}.rxn-p[data-play][data-k=flicker]{animation:.62s ease-out rxn-flicker}.rxn-p[data-play][data-k=confetti]{animation:.42s cubic-bezier(.3,1.6,.4,1) rxn-pop}.rxn-bits{pointer-events:none;position:absolute;top:50%;left:50%}.rxn-bits b{background:var(--c);border-radius:1px;width:3px;height:3px;margin:-1.5px;animation:.56s cubic-bezier(.2,.8,.3,1) forwards rxn-bit;position:absolute}.rxn-p[data-play][data-k=glance]{animation:.7s ease-in-out rxn-glance}.rxn-p[data-play][data-k=tick]{animation:.46s cubic-bezier(.3,1.6,.4,1) rxn-tick}.rxn-p[data-play][data-k=beat]{animation:.62s ease-in-out rxn-beat}.rxn-p[data-play][data-k=nod]{transform-origin:50% 90%;animation:.52s cubic-bezier(.3,1.4,.4,1) rxn-nod}.rxn-p[data-play][data-k=laugh]{animation:.56s ease-in-out rxn-laugh}.rxn-p[data-play][data-k=wow]{transform-origin:50% 100%;animation:.52s cubic-bezier(.3,1.5,.4,1) rxn-wow}.rxn-p[data-play][data-k=droop]{transform-origin:50% 100%;animation:.7s ease-in-out rxn-droop}.rxn-p[data-play][data-k=bow]{transform-origin:50% 100%;animation:.62s ease-in-out rxn-bow}@media (prefers-reduced-motion:reduce){.rxn-p[data-play],.rxn-p[data-play]:after,.rxn-bits b{animation:none}}.rxn-count{font-variant-numeric:tabular-nums;display:inline-flex}.rxn-col{height:1.4em;line-height:1.4em;display:inline-block;overflow:hidden}.rxn-strip{flex-direction:column;transition:transform .22s cubic-bezier(.24,1.34,.38,1);display:flex}.rxn-strip>span{height:1.4em}.rxn-add-wrap{display:flex}.rxn-add{background:var(--fill-slab,var(--card));width:36px;height:36px;color:color-mix(in srgb, var(--fill-on,#17181a) 52%, var(--fill-slab,#fff));cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:0;border-radius:999px;place-items:center;padding:0;transition:color .16s,scale .16s cubic-bezier(.24,1.34,.38,1);display:grid}.rxn-add[aria-expanded=true]{color:var(--fill-on,var(--ink));scale:1.06}@media (hover:hover){.rxn-add:hover{color:var(--fill-on,var(--ink));scale:1.06}}.rxn-pill{z-index:5;align-items:center;padding:8px;display:flex;position:absolute;top:0;left:0}.rxn-emo{cursor:pointer;background:0 0;border:0;place-items:center;width:34px;height:30px;padding:0;display:grid}.rxn-emo span{transform:scale(var(--s,1));transform-origin:50% 90%;letter-spacing:-.02em;font-size:20px;line-height:1;transition:transform .22s cubic-bezier(.24,1.34,.38,1);display:block}.rxn-tip{background:var(--slab,#17181a);color:var(--on-slab,#fff);white-space:nowrap;pointer-events:none;letter-spacing:0;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:400;position:absolute;bottom:calc(100% + 10px);translate:-50%}.rxn-fly{z-index:6;pointer-events:none;letter-spacing:-.01em;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;font-size:16px;display:grid;position:absolute;top:0;left:0}@keyframes rxn-launch{0%{transform:translate(0)rotate(0)}30%{transform:translate(2px,-7px)rotate(-12deg)}60%{transform:translate(-1px,1px)rotate(4deg)}to{transform:translate(0)rotate(0)}}@keyframes rxn-puff{0%{opacity:0;transform:scale(.4)}25%{opacity:1}to{opacity:0;transform:translate(-5px,6px)scale(1.6)}}@keyframes rxn-flicker{0%{filter:brightness();transform:scale(1)}15%{filter:brightness(1.35);transform:scale(1.18,1.1)}30%{filter:brightness();transform:scale(.94,1.08)}48%{filter:brightness(1.25);transform:scale(1.1,.96)}66%{transform:scale(.98,1.04)}to{filter:brightness();transform:scale(1)}}@keyframes rxn-pop{0%{transform:scale(.7)rotate(-12deg)}50%{transform:scale(1.18)rotate(6deg)}to{transform:none}}@keyframes rxn-bit{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateY(-16px) scale(.6);opacity:0}}@keyframes rxn-glance{0%,to{transform:translate(0)}25%{transform:translate(-2.5px)}60%{transform:translate(2.5px)}}@keyframes rxn-tick{0%{transform:scale(.6)rotate(-14deg)}55%{transform:scale(1.2)rotate(4deg)}to{transform:none}}@keyframes rxn-beat{0%,to{transform:scale(1)}15%{transform:scale(1.26)}30%{transform:scale(1)}45%{transform:scale(1.18)}60%{transform:scale(1)}}@keyframes rxn-nod{0%{transform:rotate(0)}35%{transform:rotate(-16deg)translateY(-2px)}to{transform:rotate(0)}}@keyframes rxn-laugh{0%,to{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}@keyframes rxn-wow{0%{transform:scale(1)}35%{transform:scale(.92,1.22)}to{transform:scale(1)}}@keyframes rxn-droop{0%,to{transform:none}40%{transform:translateY(2px)rotate(-8deg)scale(.96)}}@keyframes rxn-bow{0%,to{transform:none}40%{transform:translateY(2px)scaleY(.9)}60%{transform:translateY(1px)scaleY(.95)}}
.cwh-frame{width:290px;height:290px;position:relative}.cwh{--o:0;background:var(--fill-slab,var(--card));width:196px;height:48px;color:var(--fill-on,var(--ink));touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;font-family:var(--font-ui);border-radius:14px;outline:none;position:absolute;top:50%;left:50%;overflow:hidden;translate:-50% -50%}.cwh:active{cursor:grabbing}.cwh:focus-visible{box-shadow:0 0 0 2px var(--signal,#2231dd)}[data-stroke=on] .cwh{box-shadow:0 0 0 1px var(--pane-edge)}.cwh-slot{background:color-mix(in srgb, var(--fill-on,#17181a) 6%, transparent);border-radius:14px;height:42px;position:absolute;top:50%;left:70px;right:14px;translate:0 -50%}.cwh-ruler{left:calc(16px + 20px * var(--o));position:absolute;top:50%}.cwh-tick{background:var(--fill-on,var(--ink));transform-origin:0;border-radius:1px;width:7px;height:1.5px;position:absolute;top:0;left:0;translate:0 -50%}.cwh-drum{left:calc(48px + 34px * var(--o));position:absolute;top:50%}.cwh-row{height:42px;font:inherit;white-space:nowrap;color:color-mix(in srgb, var(--fill-on,#17181a) 52%, var(--fill-slab,#fff));cursor:inherit;transform-origin:0;will-change:transform, opacity;letter-spacing:-.01em;background:0 0;border:0;align-items:center;gap:12px;padding:0;font-size:16px;font-weight:400;transition:color .16s;display:flex;position:absolute;top:-21px;left:0}.cwh-row[data-on=true]{color:var(--fill-on,var(--ink));font-weight:500}.cwh-flag{clip-path:inset(0 round 4px);flex:none;width:24px;height:16px}.cwh-sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.cwh-tile{fill:color-mix(in srgb, currentColor 12%, transparent)}.cwh-flag text{font-family:var(--font-ui)}.cwh[data-ruler=off] .cwh-ruler{display:none}.cwh[data-ruler=off] .cwh-drum{left:calc(28px + 22px * var(--o))}.cwh[data-ruler=off] .cwh-slot{left:38px}
.tkt{font-family:var(--font-ui);color:var(--fill-on,var(--ink));-webkit-user-select:none;user-select:none;--tkt-mute:color-mix(in srgb, var(--fill-on,#17181a) 52%, var(--fill-slab,#fff));position:relative}.tkt-defs{width:0;height:0;position:absolute}.tkt-shapes{pointer-events:none;will-change:transform;position:absolute;inset:0}.tkt-slab{background:var(--fill-slab,var(--card));border-radius:var(--tkt-r);position:absolute}.tkt-body{transform-origin:100%;border-radius:var(--tkt-r) min(var(--tkt-r), 6px) min(var(--tkt-r), 6px) var(--tkt-r)}.tkt-stub{border-radius:min(var(--tkt-r), 6px) var(--tkt-r) var(--tkt-r) min(var(--tkt-r), 6px)}.tkt-stub,.tkt-stubprint{transform-origin:50%}.tkt-joint{background:var(--fill-slab,var(--card));transform-origin:0;opacity:0;border-radius:999px;position:absolute;top:0;left:0}.tkt-print{box-sizing:border-box;position:absolute}.tkt-main{transform-origin:100%;pointer-events:none;border-radius:var(--tkt-r) min(var(--tkt-r), 6px) min(var(--tkt-r), 6px) var(--tkt-r);background:url(/images/playground/ticket-map.svg) 0 0/100% 100% no-repeat;flex-direction:column;padding:18px 18px 16px;display:flex}.tkt-stubprint{touch-action:none;cursor:grab;justify-content:center;align-items:center;display:flex}.tkt[data-held=true] .tkt-stubprint{cursor:grabbing}.tkt-route{letter-spacing:-.03em;flex-direction:column;font-size:26px;font-weight:700;line-height:28px;display:flex}.tkt-from{color:color-mix(in srgb, var(--fill-on,#17181a) 24%, var(--fill-slab,#fff))}.tkt-row{font-variant-numeric:tabular-nums;align-items:center;gap:8px;margin-top:auto;font-size:12px;font-weight:500;line-height:16px;display:flex}.tkt-row svg{color:var(--tkt-mute);flex-shrink:0}.tkt-seat{font-family:var(--font-mono,monospace);color:var(--tkt-mute);margin-left:auto}.tkt-code{flex-direction:column;gap:2px;width:40px;display:flex}.tkt-code i{background:var(--fill-on,#17181a);border-radius:.5px;width:100%;display:block}.tkt-perf{background:radial-gradient(circle, color-mix(in srgb, var(--fill-on,#17181a) 20%, var(--fill-slab,#fff)) 1.4px, transparent 1.9px) center top / 4px 7px repeat-y;pointer-events:none;width:4px;margin-left:-1.5px;transition:opacity .16s;position:absolute}.tkt[data-torn] .tkt-perf{opacity:0}