@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:.92;--stage-lift:calc(var(--wm-w) / 3 * .16);--hair:1px;--mark-text:clamp(.875rem, calc(var(--wm-w) * .0155), 1.25rem);min-height:max(34rem, calc(100svh - var(--nav-height) - var(--space-16) * 2));align-items:center;gap:var(--space-6);flex-direction:column;display:flex}.stage__canvas{justify-content:center;align-items:center;gap:var(--space-8);flex-direction:column;flex:1;width:100%;padding-block-start:calc(var(--wm-w) / 3 * var(--portal-band));padding-block-end:calc(var(--stage-lift) * 2);display:flex;position:relative}.stage__object{font:inherit;letter-spacing:normal;--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);margin:0;position:relative}.stage-wm{transform:scale(var(--type-scale,1));transform-origin:bottom;width:var(--wm-w);height:auto;display:block;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: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 (prefers-reduced-motion:reduce),(hover:none){.stage-wm__goo{display:none}}.stage__lede{max-inline-size:var(--wm-w);text-align:center;color:var(--colour-void-70);z-index:1;opacity:1;visibility:visible;margin:0;position:relative}.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{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) * .55);--open-beat-3:calc(var(--duration-enter) * 1.25);justify-content:center;align-items:center;width:100%;min-height:4.5rem;display:flex;position:relative}.stage:not([data-tool=none]) .stage__bar{--rig-shift:calc((var(--code-w) + var(--lead-w)) / 2)}.stage__rig{transform:translateX(var(--rig-shift));transition:transform calc(var(--duration-enter) * 1.15) var(--ease-card);align-items:center;display:flex;position:relative}.stage__callout{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:.4356;justify-content:flex-end;align-items:center;display:flex;position:absolute;inset-inline-end:100%}.stage__lead{width:var(--lead-w);height:var(--rule-w);border-radius:var(--radius-full);background:var(--tool-hue,var(--interactive-default));transform-origin:100%;transition:transform calc(var(--duration-enter) * 1.1) var(--ease-card) calc(var(--duration-base) * .5), background-color var(--duration-base) var(--ease-smooth);flex:none;transform:scaleX(1)}.stage[data-tool=none] .stage__lead{transition-delay:0s;transform:scaleX(0)}.stage__code{width:var(--code-w);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);opacity:1;transform-origin:100%;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);flex:none;margin:0;overflow:hidden;transform:scale(1)}.stage[data-tool=none] .stage__code{opacity:0;transition-delay:0s;transform:scale(.92)}.stage__note{inline-size:var(--note-w);align-items:flex-end;gap:var(--space-2);color:var(--tool-hue,var(--accent));pointer-events:none;opacity:1;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;flex-direction:column;display:flex;position:absolute;inset-block-start:calc(50% - (var(--arrow-w) * var(--arrow-ratio)) + var(--note-y));inset-inline-end:calc(100% + var(--note-x));transform:translate(0)}.stage[data-tool=none] .stage__note{opacity:0;transition-delay:0s;transform:translate(1rem)}.stage__note-text{font-family:var(--font-annotation);transition:color var(--duration-slow) var(--ease-smooth);text-transform:lowercase;text-align:center;text-wrap:balance;inline-size:100%;font-size:1.25rem;line-height:1.15}.stage__note-arrow{width:var(--arrow-w);height:auto;translate:0 calc(var(--arrow-lift,.75rem) * -1);flex:none;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{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-detail);color:var(--ink-primary);white-space:pre;margin:0;line-height:1.7;overflow:hidden}.stage__codeline{display:block}@media (prefers-reduced-motion:reduce){.stage__rig,.stage__lead,.stage__code,.stage__note{transition-duration:.01ms;transition-delay:0s}}.stage__toolbar{--caption-w:4.5rem;align-items:center;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-full);background:var(--surface-raised);flex:none;display:flex}.stage__tool{border-radius:var(--radius-full);min-width:2.5rem;height:2.5rem;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);justify-content:center;align-items:center;gap:0;padding-inline:0;font-size:.9375rem;display:inline-flex}.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{border-radius:var(--radius-full);width:2.5rem;height:2.5rem;color:var(--tool-hue);background:color-mix(in oklch, var(--tool-hue) 16%, transparent);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);flex:none;justify-content:center;align-items:center;margin-inline-end:var(--space-2);padding:0;font-size:.9375rem;display:inline-flex;overflow:hidden}.stage__clear:hover{background:color-mix(in oklch, var(--tool-hue) 30%, transparent);transform:translateY(-2px)}.stage[data-tool=none] .stage__clear{opacity:0;width:0;pointer-events:none;margin-inline-end:calc(var(--space-1) * -1)}.stage__caption{transition:grid-template-columns var(--duration-slow) var(--ease-card);grid-template-columns:0fr;display:grid}.stage__tool[aria-pressed=true] .stage__caption{grid-template-columns:var(--caption-w)}.stage__caption-text{white-space:nowrap;text-align:center;opacity:0;transition:opacity var(--duration-base) var(--ease-smooth);overflow:hidden}.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__held{max-inline-size:var(--wm-w);text-align:center;font-size:var(--text-p-sm);color:var(--ink-tertiary);margin:0;display:none}.stage__loop{min-height:1.6em;color:var(--ink-tertiary);font-size:var(--text-detail);text-align:center;transition:color var(--duration-base) var(--ease-smooth);margin:0;display:none}@media (max-width:64rem){.stage__held{display:block}.stage__loop{order:-1;margin-block-end:var(--space-2);display:block}}@media (max-width:64rem) and (min-height:34rem){.page.home{height:calc(100dvh - var(--nav-height) - var(--contact-bar-h));padding-block:0;overflow:hidden}.stage{height:100%;min-height:0}.stage .stage__canvas{--stage-lift:calc(var(--wm-w) / 3 * .26);justify-content:center;gap:var(--space-5);padding-block-start:0}}.stage-wm__node{fill:var(--surface-page);stroke:var(--interactive-default);stroke-width:.35px;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50%;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:1px;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__rule-label,.stage-wm__gap-label{font-family:var(--font-annotation-sc);letter-spacing:.04em;fill:var(--interactive-default);animation:stage-rule-in .5s var(--ease-decelerate) backwards;animation-delay:calc(var(--i,0) * 70ms + 90ms);font-size:2.4px}.stage-wm__gap-label{text-anchor:middle;font-family:var(--font-mono);fill:var(--ink-tertiary);font-size:2px}.stage-wm__gap{stroke:var(--ink-tertiary);stroke-width:1px;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{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);position:absolute}.stage__box .specimen{inset:var(--type-pad)}[data-tool=type] .stage__box{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.stage__handle{background:var(--surface-page);border:2px solid var(--interactive-default);touch-action:none;width:11px;height:11px;transition:transform var(--duration-base) var(--ease-card);border-radius:1px;padding:0;position:absolute}.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:hover,.stage__handle:focus-visible{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--t,.stage__handle--b{left:50%;translate:-50%}.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.5px;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{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;position:absolute;inset-block-start:100%;inset-inline-start:50%}
