@media (min-width:64.0625rem) and (min-height:44rem){:root:has(.stage),:root:has(.stage) body{overflow:hidden}}.stage{--stage-ink:var(--colour-void-50);--wm-w:min(70vw,78svh);--portal-band:0.92;--stage-lift:calc(var(--wm-w) / 3 * 0.16);--hair:1px;--mark-text:clamp(0.875rem,calc(var(--wm-w) * 0.0155),1.25rem);min-height:max(34rem,calc(100svh - var(--nav-height) - var(--space-16) * 2));flex-direction:column;gap:var(--space-6)}.stage,.stage__canvas{display:flex;align-items:center}.stage__canvas{position:relative;flex:1 1;-webkit-padding-before:calc(var(--wm-w) / 3 * var(--portal-band));padding-block-start:calc(var(--wm-w) / 3 * var(--portal-band));-webkit-padding-after:calc(var(--stage-lift) * 2);padding-block-end:calc(var(--stage-lift) * 2);flex-direction:column;justify-content:center;gap:var(--space-8);width:100%}.stage__object{position:relative;--type-scale:1;--type-pad:var(--space-4);z-index:1;--wm-a:var(--colour-quasar-dark);--wm-b:var(--colour-quasar);--wm-c:var(--colour-quasar-light)}.stage-wm{display:block;transform:scale(var(--type-scale,1));transform-origin:bottom center;width:var(--wm-w);height:auto;overflow:visible}.stage-wm.is-held .stage-wm__group{filter:url(#stage-goo)}@media (scripting:none){.stage-wm.is-held .stage-wm__group{filter:none}}.stage-wm__letter{transform-box:fill-box;transform-origin:center bottom;fill:var(--colour-quasar)}.stage-wm__letter--p{fill:var(--colour-corona-dark)}.stage-wm__letter--u1{fill:var(--colour-flare)}.stage-wm__letter--k{fill:var(--colour-solstice)}.stage-wm__letter--u2{fill:var(--colour-pulsar)}.stage-wm__goo{opacity:0;visibility:hidden;pointer-events:none}@media (hover:none),(prefers-reduced-motion:reduce){.stage-wm__goo{display:none}}.stage__lede{max-inline-size:var(--wm-w);margin:0;text-align:center;color:var(--colour-void-70);position:relative;z-index:1;opacity:1;visibility:visible}.stage[data-intro=done] .stage__lede{transition:opacity var(--duration-enter) var(--ease-decelerate) var(--duration-base),visibility 0s linear 0s}@media (min-width:100rem){.stage .stage__lede{font-size:var(--text-h3);font-weight:500}}.stage:not([data-tool=none]) .stage__lede{opacity:0;visibility:hidden;transition:opacity var(--duration-base) var(--ease-accelerate),visibility 0s linear var(--duration-base)}.stage__bar{position:relative;z-index:1;--lead-w:clamp(1.5rem,5vw,3.5rem);--code-w:clamp(15rem,26vw,21rem);--rule-w:var(--hair);--rig-shift:0px;--open-beat-2:calc(var(--duration-enter) * 0.55);--open-beat-3:calc(var(--duration-enter) * 1.25);display:flex;align-items:center;justify-content:center;width:100%;min-height:4.5rem}.stage:not([data-tool=none]) .stage__bar{--rig-shift:calc((var(--code-w) + var(--lead-w)) / 2)}.stage__rig{position:relative;transform:translateX(var(--rig-shift));transition:transform calc(var(--duration-enter) * 1.15) var(--ease-card)}.stage__callout,.stage__rig{display:flex;align-items:center}.stage__callout{position:absolute;inset-inline-end:100%;justify-content:flex-end;width:calc(var(--code-w) + var(--lead-w));--note-x:var(--space-5);--note-y:0rem;--note-w:11.5rem;--arrow-w:8.25rem;--arrow-ratio:0.4356}.stage__lead{flex:none;width:var(--lead-w);height:var(--rule-w);border-radius:var(--radius-full);background:var(--tool-hue,var(--interactive-default));transform:scaleX(1);transform-origin:right center;transition:transform calc(var(--duration-enter) * 1.1) var(--ease-card) calc(var(--duration-base) * .5),background-color var(--duration-base) var(--ease-smooth)}.stage[data-tool=none] .stage__lead{transform:scaleX(0);transition-delay:0s}.stage__code{flex:none;width:var(--code-w);margin:0;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);overflow:hidden;opacity:1;transform-origin:right center;transform:scale(1);transition:transform calc(var(--duration-enter) * 1.2) var(--ease-card) var(--open-beat-3),opacity calc(var(--duration-enter) * .9) var(--ease-smooth) var(--open-beat-3)}.stage[data-tool=none] .stage__code{opacity:0;transform:scale(.92);transition-delay:0s}.stage__note{position:absolute;inset-inline-end:calc(100% + var(--note-x));inset-block-start:calc(50% - (var(--arrow-w) * var(--arrow-ratio)) + var(--note-y));inline-size:var(--note-w);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);color:var(--tool-hue,var(--accent));pointer-events:none;opacity:1;transform:translateX(0);transition:opacity calc(var(--duration-enter) * .9) var(--ease-smooth) calc(var(--open-beat-3) + var(--duration-base)),transform calc(var(--duration-enter) * 1.1) var(--ease-card) calc(var(--open-beat-3) + var(--duration-base)),color var(--duration-slow) var(--ease-smooth) 0s}.stage[data-tool=none] .stage__note{opacity:0;transform:translateX(1rem);transition-delay:0s}.stage__note-text{font-family:var(--font-annotation);transition:color var(--duration-slow) var(--ease-smooth);text-transform:lowercase;font-size:1.25rem;line-height:1.15;inline-size:100%;text-align:center;text-wrap:balance}.stage__note-arrow{flex:none;width:var(--arrow-w);height:auto;translate:0 calc(var(--arrow-lift, .75rem) * -1);overflow:visible}.stage__note-arrow path{fill:var(--tool-hue,var(--accent));stroke:var(--tool-hue,var(--accent));stroke-width:0;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:fill var(--duration-slow) var(--ease-smooth),stroke var(--duration-slow) var(--ease-smooth)}.stage__code .win-dots>span{transition:background-color var(--duration-slow) var(--ease-smooth)}.stage__codeline{animation:stage-code-in var(--duration-card) var(--ease-card) backwards;animation-delay:calc(var(--i, 0) * 55ms)}@keyframes stage-code-in{0%{opacity:0;transform:translateY(.3rem)}}.stage__note-text{animation:stage-code-in var(--duration-slow) var(--ease-card) backwards}@media (prefers-reduced-motion:reduce){.stage__codeline,.stage__note-text{animation:none}}.stage__code .win-bar{padding:var(--space-2) var(--space-3);background:var(--surface-overlay);border-block-end-color:var(--border-default)}.stage__code .win-dots>span{width:.45rem;height:.45rem}.stage__pre{margin:0;padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-detail);line-height:1.7;color:var(--ink-primary);white-space:pre;overflow:hidden}.stage__codeline{display:block}@media (prefers-reduced-motion:reduce){.stage__code,.stage__lead,.stage__note,.stage__rig{transition-duration:.01ms;transition-delay:0s}}.stage__toolbar{--caption-w:4.5rem;flex:none;display:flex;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--border-default);background:var(--surface-raised)}.stage__tool,.stage__toolbar{align-items:center;border-radius:var(--radius-full)}.stage__tool{display:inline-flex;justify-content:center;gap:0;min-width:2.5rem;height:2.5rem;padding-inline:0;font-size:.9375rem;color:var(--tool-hue,var(--ink-secondary));transition:background-color var(--duration-base) var(--ease-smooth),color var(--duration-base) var(--ease-smooth),padding-inline var(--duration-slow) var(--ease-card),gap var(--duration-slow) var(--ease-card),transform var(--duration-card) var(--ease-card)}.stage__tool[aria-pressed=true]:hover{transform:none}.stage__tool:hover{color:var(--tool-hue-light,var(--ink-primary));background:var(--surface-overlay);transform:translateY(-2px)}.stage__tool[aria-pressed=true]{color:var(--ink-on-colour);background:var(--tool-hue,var(--interactive-default));gap:var(--space-2);padding-inline:var(--space-4)}.stage__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;padding:0;overflow:hidden;font-size:.9375rem;border-radius:var(--radius-full);color:var(--tool-hue);background:color-mix(in oklch,var(--tool-hue) 16%,transparent);-webkit-margin-end:var(--space-2);margin-inline-end:var(--space-2);transition:width var(--duration-slow) var(--ease-card),opacity var(--duration-base) var(--ease-smooth),background-color var(--duration-base) var(--ease-smooth),transform var(--duration-card) var(--ease-card),-webkit-margin-end var(--duration-slow) var(--ease-card);transition:width var(--duration-slow) var(--ease-card),margin-inline-end var(--duration-slow) var(--ease-card),opacity var(--duration-base) var(--ease-smooth),background-color var(--duration-base) var(--ease-smooth),transform var(--duration-card) var(--ease-card);transition:width var(--duration-slow) var(--ease-card),margin-inline-end var(--duration-slow) var(--ease-card),opacity var(--duration-base) var(--ease-smooth),background-color var(--duration-base) var(--ease-smooth),transform var(--duration-card) var(--ease-card),-webkit-margin-end var(--duration-slow) var(--ease-card)}.stage__clear:hover{background:color-mix(in oklch,var(--tool-hue) 30%,transparent);transform:translateY(-2px)}.stage[data-tool=none] .stage__clear{width:0;opacity:0;-webkit-margin-end:calc(var(--space-1) * -1);margin-inline-end:calc(var(--space-1) * -1);pointer-events:none}.stage__caption{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--duration-slow) var(--ease-card)}.stage__tool[aria-pressed=true] .stage__caption{grid-template-columns:var(--caption-w)}.stage__caption-text{overflow:hidden;white-space:nowrap;text-align:center;opacity:0;transition:opacity var(--duration-base) var(--ease-smooth)}.stage__tool[aria-pressed=true] .stage__caption-text{opacity:1;transition-delay:var(--duration-base)}@media (max-width:64rem){.stage__bar{display:none}}@media (max-width:60rem){.stage__callout{display:none}.stage__bar{--lead-w:0px;--code-w:0px;min-height:0}}@media (max-width:40rem){.stage-wm{width:84vw}}.stage-wm__node{fill:var(--surface-page);stroke:var(--interactive-default);stroke-width:.35;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:stage-node-in .32s var(--ease-card) backwards;animation-delay:calc(var(--i, 0) * 22ms)}@keyframes stage-node-in{0%{opacity:0;transform:scale(.2)}}.stage-wm__metrics{--dash:2 1.6}.stage-wm__rule{stroke:var(--interactive-default);stroke-width:1;stroke-dasharray:var(--dash);vector-effect:non-scaling-stroke;opacity:.7;animation:stage-rule-in .5s var(--ease-decelerate) backwards;animation-delay:calc(var(--i, 0) * 70ms)}.stage-wm__gap-label,.stage-wm__rule-label{font-family:var(--font-annotation-sc);font-size:2.4px;letter-spacing:.04em;fill:var(--interactive-default);animation:stage-rule-in .5s var(--ease-decelerate) backwards;animation-delay:calc(var(--i, 0) * 70ms + 90ms)}.stage-wm__gap-label{text-anchor:middle;font-family:var(--font-mono);font-size:2px;fill:var(--ink-tertiary)}.stage-wm__gap{stroke:var(--ink-tertiary);stroke-width:1;vector-effect:non-scaling-stroke;animation:stage-rule-in .5s var(--ease-decelerate) backwards;animation-delay:calc(var(--i, 0) * 70ms)}@keyframes stage-rule-in{0%{opacity:0}}.stage__box{position:absolute;left:calc((100% - 100% * var(--type-scale, 1)) / 2 - var(--type-pad));width:calc(100% * var(--type-scale, 1) + var(--type-pad) * 2);top:calc(100% - 100% * var(--type-scale, 1) - var(--type-pad));height:calc(100% * var(--type-scale, 1) + var(--type-pad) * 2);border:2px solid var(--interactive-default);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-smooth),visibility 0s linear var(--duration-slow)}.stage__box .specimen{inset:var(--type-pad)}[data-tool=type] .stage__box{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.stage__handle{position:absolute;width:11px;height:11px;padding:0;background:var(--surface-page);border:2px solid var(--interactive-default);border-radius:1px;touch-action:none;transition:transform var(--duration-base) var(--ease-card)}.stage__handle[data-cursor=nwse]{cursor:nwse-resize}.stage__handle[data-cursor=nesw]{cursor:nesw-resize}.stage__handle[data-cursor=ns]{cursor:ns-resize}.stage__handle[data-cursor=ew]{cursor:ew-resize}.stage__handle:focus-visible,.stage__handle:hover{transform:scale(1.25)}.stage__handle--tl{top:-6px;left:-6px}.stage__handle--tr{top:-6px;right:-6px}.stage__handle--bl{bottom:-6px;left:-6px}.stage__handle--br{bottom:-6px;right:-6px}.stage__handle--l,.stage__handle--r{top:50%;translate:0 -50%}.stage__handle--l{left:-6px}.stage__handle--r{right:-6px}.stage__handle--b,.stage__handle--t{left:50%;translate:-50% 0}.stage__handle--t{top:-6px}.stage__handle--b{bottom:-6px}[data-tool=opacity] .stage-wm__group{-webkit-mask:url(#stage-dim-mask);mask:url(#stage-dim-mask)}[data-tool=opacity] .stage__object{cursor:none}.stage-wm__lens{stroke:var(--accent,var(--interactive-default));stroke-width:1.5;opacity:0;transition:opacity var(--duration-base) var(--ease-smooth)}[data-tool=opacity] .stage-wm__lens{opacity:.9}@media (prefers-reduced-motion:reduce){.stage-wm__lens{transition:none}}.stage__dims{position:absolute;inset-block-start:100%;inset-inline-start:50%;transform:translate(-50%,var(--space-3));font-size:var(--text-p-sm);padding:.2rem var(--space-3);border-radius:var(--radius-sm);background:var(--interactive-default);color:var(--ink-on-colour);white-space:nowrap;pointer-events:none}