.cm-panel,.os-panel{background:var(--surface);color:var(--fg);border:3px solid var(--fg);box-shadow:4px 4px 0 var(--fg);border-radius:1rem}.cm-icon,.os-svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}.cm-f,.os-f{fill:var(--accent)}.cm-ink,.os-ink{fill:currentColor;stroke:none}.cm{position:relative}.cm-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem .875rem;margin:0;padding:1.25rem 0 .5rem;list-style:none;display:grid}@media (min-width:40rem){.cm-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem 1.25rem}}@media (min-width:64rem){.cm-list{grid-template-columns:repeat(7,minmax(0,1fr))}}.cm-panel{isolation:isolate;text-align:center;min-width:0;transition:background-color var(--dur-quick,.2s) var(--ease-out), color var(--dur-quick,.2s) var(--ease-out), translate .4s var(--ease-pop);flex-direction:column;align-items:center;gap:.5rem;padding:1rem .375rem .75rem;display:flex;position:relative;rotate:-1.5deg}.cm-panel:nth-child(2n){rotate:1.5deg}.cm-panel:before{content:"";z-index:-1;border-radius:inherit;background-image:radial-gradient(circle, color-mix(in oklab, currentColor 22%, transparent) 1.2px, transparent 1.7px);pointer-events:none;background-size:8px 8px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(200deg,#000 0%,#0000 52%);mask-image:linear-gradient(200deg,#000 0%,#0000 52%)}.cm-panel:after{content:"";border-block-start:2.5px solid var(--fg);border-inline-end:2.5px solid var(--fg);pointer-events:none;block-size:.375rem;inline-size:.375rem;margin-block-start:-.25rem;position:absolute;inset-block-start:50%;inset-inline-end:-.7rem;rotate:45deg}:where([dir=rtl]) .cm-panel:after{rotate:-45deg}.cm-panel:last-child:after{display:none}@media (max-width:39.99rem){.cm-panel:nth-child(3n):after{display:none}}@media (min-width:40rem){.cm-panel:after{inset-inline-end:-.9rem}}@media (min-width:40rem) and (max-width:63.99rem){.cm-panel:nth-child(4n):after{display:none}}.cm-art{isolation:isolate;place-items:center;display:grid;position:relative}.cm-burst{z-index:-1;background:var(--surface);clip-path:polygon(50% 0%,59.6% 14.3%,75% 6.7%,76.2% 23.8%,93.3% 25%,85.7% 40.4%,100% 50%,85.7% 59.6%,93.3% 75%,76.2% 76.2%,75% 93.3%,59.6% 85.7%,50% 100%,40.4% 85.7%,25% 93.3%,23.8% 76.2%,6.7% 75%,14.3% 59.6%,0% 50%,14.3% 40.4%,6.7% 25%,23.8% 23.8%,25% 6.7%,40.4% 14.3%);transition:scale .4s var(--ease-pop);position:absolute;inset:-22%;scale:0}.cm-panel[data-on] .cm-burst{scale:1}.cm-icon{aspect-ratio:1;width:clamp(2.75rem,2rem + 3vw,4rem);height:auto}.cm-label{overflow-wrap:anywhere;max-width:100%;font-size:clamp(.8125rem,.72rem + .5vw,1.1875rem);font-weight:800;line-height:1.3}.cm-panel[data-on]{background:var(--accent);color:var(--accent-fg);translate:0 -4px}.cm-panel[data-on] .cm-f{fill:var(--accent)}.cm-a{transform-box:fill-box;transform-origin:50%}.cm-a-clap{transform-box:view-box;transform-origin:7px 22px}.cm-a-write{stroke-dasharray:1;stroke-dashoffset:0}.cm-marker{pointer-events:none;visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}.cm-marker[data-ready]{visibility:visible}.cm-marker[data-hop]{transition:transform .42s var(--ease-pop)}.cm-marker-dot{background:var(--accent);border:3px solid var(--fg);box-sizing:border-box;border-radius:50% 50% 50% 0;width:1.375rem;height:1.375rem;position:absolute;top:-.875rem;left:-.6875rem;rotate:-45deg}@keyframes cm-pop{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes cm-hop{0%{translate:0}45%{translate:0 -1.125rem}to{translate:0}}@keyframes cm-wiggle{0%{rotate:0deg}30%{rotate:-9deg}65%{rotate:7deg}to{rotate:0deg}}@keyframes cm-scan{0%,to{translate:0}25%{translate:3px -2px}50%{translate:0 -4px}75%{translate:-3px -2px}}@keyframes cm-spark{0%{scale:0}60%{scale:1.5}to{scale:1}}@keyframes cm-write{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes cm-scribble{0%,to{translate:0}25%{translate:3px -3px}50%{translate:-2px 2px}75%{translate:2px -2px}}@keyframes cm-clap{0%,55%,to{rotate:0deg}30%{rotate:-24deg}75%{rotate:-11deg}}@keyframes cm-blink{0%,30%,50%,70%,to{scale:1}40%,60%{scale:1 .12}}@keyframes cm-fly{0%,to{translate:0}45%{translate:20px -20px}46%{translate:-20px 20px}}@media (prefers-reduced-motion:no-preference){.cm[data-armed]:not([data-play]) .cm-panel{opacity:0;scale:.4}.cm[data-armed]:not([data-play]) .cm-marker{visibility:hidden}.cm[data-play] .cm-panel{animation:cm-pop .4s var(--ease-pop) calc(var(--i,0) * .11s) both}.cm-marker[data-hop] .cm-marker-dot{animation:cm-hop .42s var(--ease-out)}.cm-panel[data-on] .cm-icon{animation:cm-wiggle .5s var(--ease-out)}.cm-panel[data-on] .cm-a-scan{animation:cm-scan .95s var(--ease-in-out) .12s}.cm-panel[data-on] .cm-a-spark{animation:cm-spark .42s var(--ease-pop) .2s both}.cm-panel[data-on] .cm-a-write{animation:cm-write .7s var(--ease-out) .2s both}.cm-panel[data-on] .cm-a-scribble{animation:cm-scribble .8s var(--ease-in-out) .15s}.cm-panel[data-on] .cm-a-clap{animation:cm-clap .8s var(--ease-out) .15s}.cm-panel[data-on] .cm-a-blink{animation:cm-blink .9s var(--ease-in-out) .15s}.cm-panel[data-on] .cm-a-fly{animation:cm-fly 1.3s var(--ease-in-out) .2s}}@media (prefers-reduced-motion:reduce){.cm-panel,.cm-marker,.cm-burst{transition:none}}.os{justify-content:center;align-items:center;gap:clamp(.25rem,1.5vw,1rem);max-width:44rem;margin-inline:auto;padding-block:.75rem;display:flex}.os-panel{flex:1 1 0;min-width:0;max-width:12.5rem;padding:clamp(.375rem,1.5vw,.875rem);rotate:-2deg}.os-panel[data-beat="2"]{rotate:1.5deg}.os-panel[data-beat="3"]{rotate:-1deg}.os-svg{width:100%;height:auto}.os-year{fill:currentColor;stroke:none;font-variant-numeric:tabular-nums;font-size:17px;font-weight:800}.os-soft{fill:var(--surface)}.os-arrow{fill:none;width:clamp(1rem,4vw,2rem);height:auto;stroke:var(--fg);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;flex:none}:where([dir=rtl]) .os-arrow{scale:-1 1}.os-pop,.os-spin{transform-box:fill-box;transform-origin:50%}.os-orbit{transform-box:view-box;transform-origin:60px 60px}.os-draw{stroke-dasharray:1;stroke-dashoffset:0}.os-panel[data-beat="1"]{--t:0s}.os-panel[data-beat="2"]{--t:-6s}.os-panel[data-beat="3"]{--t:-3s}@keyframes os-turn{0%,30%{box-shadow:6px 9px 0 var(--fg);background-color:color-mix(in oklab, var(--accent) 22%, var(--surface));translate:0 -6px}35%,to{box-shadow:4px 4px 0 var(--fg);background-color:var(--surface);translate:0}}@keyframes os-pop{0%{scale:1}1.5%{scale:0}6%{scale:1.2}9%,to{scale:1}}@keyframes os-draw{0%{stroke-dashoffset:0}1.5%{stroke-dashoffset:1px}11%,to{stroke-dashoffset:0}}@keyframes os-spin{0%{scale:1}to{scale:-1 1}}@keyframes os-orbit{to{rotate:360deg}}@media (prefers-reduced-motion:no-preference){.os-panel{animation:os-turn 9s var(--ease-in-out) var(--t,0s) infinite}.os-pop{animation:os-pop 9s var(--ease-pop) calc(var(--t,0s) + var(--d,0s)) infinite}.os-draw{animation:os-draw 9s var(--ease-out) calc(var(--t,0s) + var(--d,0s)) infinite}.os-spin{animation:os-spin 2.25s var(--ease-in-out) infinite alternate}.os-orbit{animation:4.5s linear infinite os-orbit}.os-wrap:not([data-onscreen]) :is(.os-panel,.os-pop,.os-draw,.os-spin,.os-orbit){animation-play-state:paused}}.cp{aspect-ratio:1/1.12;place-items:center;inline-size:min(100%,19rem);margin-inline:auto;display:grid;position:relative}.cp-phone{z-index:1;aspect-ratio:9/17;border:4px solid var(--fg);background:var(--fg);block-size:92%;box-shadow:8px 8px 0 var(--accent);border-radius:1.75rem;position:relative;rotate:-5deg}.cp-screen{background:var(--ground-deep);border-radius:1.375rem;position:absolute;inset:.25rem;overflow:clip}.cp-shot{position:absolute;inset:0}.cp-shot :is(picture,img){object-fit:cover;block-size:100%;inline-size:100%;display:block}.cp-bars{z-index:2;gap:3px;display:flex;position:absolute;inset-block-start:.625rem;inset-inline:.75rem}.cp-bars>span{background:#ffffff61;background:lab(100% -.0000298023 .0000119209/.38);border-radius:2px;flex:1;block-size:3px;overflow:clip}.cp-bars i{transform-origin:0;background:#fff;block-size:100%;display:block}:where([dir=rtl]) .cp-bars i{transform-origin:100%}.cp-sticker{z-index:2;block-size:auto;inline-size:34%;fill:var(--accent);stroke:var(--fg);stroke-width:3.5px;stroke-linejoin:round;position:absolute;inset-block-start:3%;inset-inline-end:4%;overflow:visible}.cp-sticker .cp-ink{fill:var(--fg);stroke:none}.cp-zip{fill:none;block-size:auto;inline-size:24%;stroke:var(--fg);stroke-width:4px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;position:absolute;inset-block-end:9%;inset-inline-start:2%;overflow:visible}:where([dir=rtl]) .cp-zip{scale:-1 1}@keyframes cp-swipe{0%,21%{translate:0}25%{translate:0 -100%}25.01%,96%{translate:0 100%}to{translate:0}}@keyframes cp-bar-0{0%{scale:0 1}25%,to{scale:1}}@keyframes cp-bar-1{0%,25%{scale:0 1}50%,to{scale:1}}@keyframes cp-bar-2{0%,50%{scale:0 1}75%,to{scale:1}}@keyframes cp-bar-3{0%,75%{scale:0 1}to{scale:1}}@keyframes cp-bob{0%{translate:0 3px}to{translate:0 -6px}}@keyframes cp-wobble{0%{rotate:-9deg;scale:1}to{rotate:8deg;scale:1.08}}@keyframes cp-zip{0%,to{stroke-dashoffset:0}50%{stroke-dashoffset:.7px}}@media (prefers-reduced-motion:no-preference){.cp[data-reel] .cp-shot{animation:cp-swipe 12s var(--ease-in-out) calc(var(--i,0) * 3s - 12s) infinite}.cp[data-reel] .cp-bars>span:first-child i{animation:12s linear infinite cp-bar-0}.cp[data-reel] .cp-bars>span:nth-child(2) i{animation:12s linear infinite cp-bar-1}.cp[data-reel] .cp-bars>span:nth-child(3) i{animation:12s linear infinite cp-bar-2}.cp[data-reel] .cp-bars>span:nth-child(4) i{animation:12s linear infinite cp-bar-3}.cp-phone{animation:cp-bob 2.8s var(--ease-in-out) infinite alternate}.cp-sticker{animation:cp-wobble 1.6s var(--ease-in-out) infinite alternate}.cp-zip{animation:cp-zip 1.4s var(--ease-in-out) infinite}.cp-wrap:not([data-onscreen]) :is(.cp-shot,.cp-bars i,.cp-phone,.cp-sticker,.cp-zip){animation-play-state:paused}}.cpl{fill:none;block-size:auto;inline-size:clamp(4.5rem,20vw,10rem);stroke:var(--fg);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}:where([dir=rtl]) .cpl{scale:-1 1}.cpl-trail{stroke-dasharray:2 9}.cpl-plane{transform-box:fill-box;transform-origin:50%}.cpl-fill{fill:var(--accent)}@keyframes cpl-trail{to{stroke-dashoffset:-22px}}@keyframes cpl-bob{0%{translate:-3px 3px;rotate:-4deg}to{translate:3px -3px;rotate:3deg}}@media (prefers-reduced-motion:no-preference){.cpl-trail{animation:.9s linear infinite cpl-trail}.cpl-plane{animation:cpl-bob 1.3s var(--ease-in-out) infinite alternate}.cpl-wrap:not([data-onscreen]) :is(.cpl-trail,.cpl-plane){animation-play-state:paused}}