@layer components{.cp-stage{--u:calc(100cqw / 784);background:#040818b8;border:1px solid #ffffff1a;border-radius:20px;position:relative;overflow:clip;container-type:inline-size}.cp-svg{width:100%;height:auto;display:block}.cp-chip{align-items:center;gap:max(4px, calc(var(--u) * 6));padding:max(3px, calc(var(--u) * 6)) max(6px, calc(var(--u) * 10));border-radius:max(4px, calc(var(--u) * 6));background:var(--color-brand-navy);white-space:nowrap;display:flex;position:absolute}.cp-title{top:calc(var(--u) * 16);left:calc(var(--u) * 16);color:var(--color-text-on-dark-muted);font-size:max(7px, calc(var(--u) * 10));letter-spacing:.14em;font-weight:600;line-height:1.2}.cp-label{font-size:max(8.5px, calc(var(--u) * 12));white-space:nowrap;line-height:1.33;position:absolute}.cp-label-ring{top:calc(var(--u) * 60);left:calc(var(--u) * 236);color:var(--color-alert-warning)}.cp-label-crane{top:calc(var(--u) * 258);left:calc(var(--u) * 360);color:var(--color-neutral-0);font-weight:600}.cp-label-muster{top:calc(var(--u) * 356);left:calc(var(--u) * 664);color:var(--color-alert-clear)}@container not (min-width:560px){.cp-label-muster{left:auto;right:calc(var(--u) * 150)}}.cp-footnote{right:calc(var(--u) * 16);bottom:calc(var(--u) * 16);color:var(--color-text-subtle);font-size:max(7.5px, calc(var(--u) * 11));white-space:nowrap;line-height:1.27;position:absolute}.cp-status{bottom:calc(var(--u) * 16);left:calc(var(--u) * 16);color:var(--color-neutral-0);font-size:max(8.5px, calc(var(--u) * 12));opacity:0;font-weight:600;line-height:1.33}.cp-status-dot{width:max(5px, calc(var(--u) * 7));height:max(5px, calc(var(--u) * 7));border-radius:9999px}.cp-status-cease{box-shadow:inset 0 0 0 1px #c22e22b3}.cp-status-cease .cp-status-dot{background:var(--color-alert-warning)}.cp-status-clear{box-shadow:inset 0 0 0 1px #128a5eb3}.cp-status-clear .cp-status-dot{background:var(--color-alert-clear)}.cp-strike-area,.cp-halo{opacity:0}.cp-layer,.cp-strike{opacity:calc(var(--cp-on,1) * var(--cp-dim,1));transition:opacity .3s}:is(.cp:has(.cp-check[data-layer=cell]:not(:checked)) .cp-layer[data-layer=cell],.cp:has(.cp-check[data-layer=ring]:not(:checked)) .cp-layer[data-layer=ring],.cp:has(.cp-check[data-layer=crane]:not(:checked)) .cp-layer[data-layer=crane],.cp:has(.cp-check[data-layer=muster]:not(:checked)) .cp-layer[data-layer=muster]){--cp-on:0}@media (hover:hover){:is(.cp:has(.cp-key[data-layer=cell]:hover) :is(.cp-layer:not([data-layer=cell]),.cp-strike),.cp:has(.cp-key[data-layer=ring]:hover) :is(.cp-layer:not([data-layer=ring]),.cp-strike),.cp:has(.cp-key[data-layer=crane]:hover) :is(.cp-layer:not([data-layer=crane]),.cp-strike),.cp:has(.cp-key[data-layer=muster]:hover) :is(.cp-layer:not([data-layer=muster]),.cp-strike)){--cp-dim:.18}}:is(.cp:has(.cp-key[data-layer=cell] :focus-visible) :is(.cp-layer:not([data-layer=cell]),.cp-strike),.cp:has(.cp-key[data-layer=ring] :focus-visible) :is(.cp-layer:not([data-layer=ring]),.cp-strike),.cp:has(.cp-key[data-layer=crane] :focus-visible) :is(.cp-layer:not([data-layer=crane]),.cp-strike),.cp:has(.cp-key[data-layer=muster] :focus-visible) :is(.cp-layer:not([data-layer=muster]),.cp-strike)){--cp-dim:.18}@media (hover:hover){.cp:has(.cp-key[data-layer=crane]:hover) .cp-radius-dim{opacity:1!important}}.cp:has(.cp-key[data-layer=crane] :focus-visible) .cp-radius-dim{opacity:1!important}.cp-keys{flex-direction:column;display:flex}.cp-key{--cp-tone:var(--color-neutral-600);cursor:pointer;border-radius:8px;align-items:center;gap:10px;margin-inline:-10px;padding:6px 10px;transition:background-color .2s;display:flex}.cp-key[data-tone=advisory]{--cp-tone:var(--color-viz-gold)}.cp-key[data-tone=warning]{--cp-tone:var(--color-alert-warning)}.cp-key[data-tone=watch]{--cp-tone:var(--color-alert-watch)}.cp-key[data-tone=clear]{--cp-tone:var(--color-alert-clear)}.cp-key[data-tone=info]{--cp-tone:var(--color-alert-info)}.cp-key[data-tone=brand]{--cp-tone:var(--color-brand-blue)}@media (hover:hover){.cp-key:hover{background-color:#ffffff0f}}.cp-key:has(:focus-visible){outline:2px solid var(--color-alert-info);outline-offset:0}.cp-key>:last-child{transition:opacity .2s}.cp-key:has(.cp-check:not(:checked))>:last-child{opacity:.5}.cp-swatch{flex-shrink:0;width:14px;height:14px;transition:background-color .2s}.cp-swatch[data-shape=square]{background-color:var(--cp-tone);box-shadow:inset 0 0 0 1.5px var(--cp-tone);border-radius:3px}.cp-swatch[data-shape=ring],.cp-swatch[data-shape=ring-dashed]{border:2px solid var(--cp-tone);border-radius:9999px}.cp-swatch[data-shape=ring-dashed]{border-style:dashed}.cp-key:has(.cp-check:not(:checked)) .cp-swatch[data-shape=square]{background-color:#0000}.cp-key:has(.cp-check:not(:checked)) .cp-swatch:not([data-shape=square]){opacity:.45}@media (prefers-reduced-motion:reduce){.cp-layer,.cp-strike,.cp-key,.cp-key>:last-child,.cp-swatch{transition:none}}.cp-mast,.cp-muster{transform-box:fill-box;transform-origin:50%}.cp-jib{transform-box:view-box;transform-origin:340px 250px}.cp-cell{transform-box:fill-box;transform-origin:bottom}.cp-plan[data-anim]:not([data-anim=reset]) .cp-reveal,.cp-plan[data-anim]:not([data-anim=reset]) .cp-ring{stroke-dasharray:1 1}.cp-plan[data-anim]:not([data-anim=reset]) .cp-boundary-reveal{animation:motion-draw .7s var(--motion-ease) both}.cp-plan[data-anim]:not([data-anim=reset]) .cp-mast{animation:motion-pop-in .35s var(--motion-ease) .45s both}.cp-plan[data-anim]:not([data-anim=reset]) .cp-jib{animation:.85s cubic-bezier(.45,0,.3,1) .6s both cp-sweep}.cp-plan[data-anim]:not([data-anim=reset]) .cp-radius-reveal{animation:.85s cubic-bezier(.45,0,.3,1) .6s both motion-draw}.cp-plan[data-anim]:not([data-anim=reset]) .cp-label-crane{animation:.4s 1.3s both motion-fade}.cp-plan[data-anim]:not([data-anim=reset]) .cp-ring{animation:motion-draw .65s var(--motion-ease) 1.25s both}.cp-plan[data-anim]:not([data-anim=reset]) .cp-label-ring{animation:.4s 1.65s both motion-fade}.cp-plan[data-anim]:not([data-anim=reset]) .cp-cell{animation:motion-grow-y .5s var(--motion-ease) 1.85s both}.cp-plan[data-anim]:not([data-anim=reset]) .cp-muster{animation:motion-pop-in .35s var(--motion-ease) 2.2s both}.cp-plan[data-anim]:not([data-anim=reset]) .cp-label-muster{animation:.35s 2.3s both motion-fade}.cp-plan[data-anim]:not([data-anim=reset]) .cp-strike-area{animation:14s ease-in-out 3s infinite both cp-strike}.cp-plan[data-anim]:not([data-anim=reset]) .cp-ring-pulse{animation:14s linear 3s infinite both cp-ring-pulse}.cp-plan[data-anim]:not([data-anim=reset]) .cp-halo{transform-box:fill-box;transform-origin:50%;animation:14s ease-out 3s infinite both cp-halo}.cp-plan[data-anim]:not([data-anim=reset]) .cp-radius-dim{animation:14s 3s infinite both cp-radius-dim}.cp-plan[data-anim]:not([data-anim=reset]) .cp-status-cease{animation:14s 3s infinite both cp-status-cease}.cp-plan[data-anim]:not([data-anim=reset]) .cp-status-clear{animation:14s 3s infinite both cp-status-clear}.cp:has(.cp-plan[data-anim=run]) .cp-key{animation:.9s both cp-key-flash}.cp:has(.cp-plan[data-anim=run]) .cp-key .cp-swatch{animation:motion-pop .6s var(--motion-ease) both}.cp:has(.cp-plan[data-anim=run]) :is(.cp-key[data-layer=crane],.cp-key[data-layer=crane] .cp-swatch){animation-delay:.6s}.cp:has(.cp-plan[data-anim=run]) :is(.cp-key[data-layer=ring],.cp-key[data-layer=ring] .cp-swatch){animation-delay:1.25s}.cp:has(.cp-plan[data-anim=run]) :is(.cp-key[data-layer=cell],.cp-key[data-layer=cell] .cp-swatch){animation-delay:1.85s}.cp:has(.cp-plan[data-anim=run]) :is(.cp-key[data-layer=muster],.cp-key[data-layer=muster] .cp-swatch){animation-delay:2.2s}}@keyframes cp-sweep{0%{transform:rotate(-360deg)}to{transform:rotate(0)}}@keyframes cp-key-flash{0%,to{background-color:#0000}30%{background-color:color-mix(in oklab, var(--cp-tone) 22%, transparent)}}@keyframes cp-strike{0%{opacity:0;transform:translate(330px,-90px)}8%{opacity:.9;transform:translate(262px,-72px)}34%{transform:translate(0)}58%{opacity:.9;transform:translate(-8px,6px)}80%,to{opacity:0;transform:translate(300px,230px)}}@keyframes cp-ring-pulse{0%,34%,61%,to{stroke-width:1.5px;stroke:var(--color-alert-warning)}37%,45%,53%{stroke-width:4px;stroke:#e0564b}41%,49%,57%{stroke-width:2.5px;stroke:var(--color-alert-warning)}}@keyframes cp-halo{0%,35%{opacity:0;transform:scale(1)}35.1%{opacity:.6;transform:scale(1)}44%{opacity:0;transform:scale(1.14)}44.1%{opacity:.6;transform:scale(1)}53%,to{opacity:0;transform:scale(1.14)}}@keyframes cp-radius-dim{0%,34%,62%,to{opacity:1}37%,59%{opacity:.22}}@keyframes cp-status-cease{0%,34%,61%,to{opacity:0;transform:translateY(4px)}36%,59%{opacity:1;transform:translateY(0)}}@keyframes cp-status-clear{0%,63%,88%,to{opacity:0;transform:translateY(4px)}65%,86%{opacity:1;transform:translateY(0)}}
