.codej-studio .studio-bp{--bp-gap:clamp(12px, 1.6vw, 24px);--bp-pad-inline:max(var(--studio-gutter), calc((100% - (1600px - 2 * var(--studio-inset))) / 2 + var(--studio-gutter)))}.codej-studio .studio-bp-stage{isolation:isolate;column-gap:var(--bp-gap);padding:clamp(48px, 8vw, 112px) var(--bp-pad-inline) clamp(32px, 4vw, 56px);grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;row-gap:clamp(24px,3vw,40px);display:grid;position:relative}.codej-studio .studio-bp-stage>:not(.studio-bp-field){grid-column:1/-1;min-width:0}.codej-studio .studio-bp-field{z-index:-1;pointer-events:none;position:absolute;inset:0}@supports (top:mod(3px, 2px)){@media (width>=768px){.codej-studio .studio-bp-field{background-position:-1px calc(-1px + var(--studio-grid-cell) - mod(100svh - var(--studio-inset), var(--studio-grid-cell)))}}}.codej-studio .studio-bp-title{color:var(--studio-fg);font-size:var(--studio-fs-h2);line-height:var(--studio-lh-h2);letter-spacing:var(--studio-ls-h2);font-weight:var(--studio-fw-h2)}.codej-studio .studio-bp-title .studio-period{color:var(--studio-signal)}.codej-studio .studio-bp-project{flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:clamp(16px,2vw,24px);display:flex}.codej-studio .studio-bp-project-name{color:var(--studio-fg);font-family:var(--studio-font-display);font-size:var(--studio-fs-h3);line-height:var(--studio-lh-h3);letter-spacing:var(--studio-ls-h3);font-weight:var(--studio-fw-h3)}.codej-studio .studio-bp-project-category{color:var(--studio-fg-muted)}.codej-studio .studio-bp-stages{border:0;flex-wrap:wrap;gap:8px;min-inline-size:0;margin:0;padding:0;display:flex}.codej-studio .studio-bp-stage-option{border:1px solid var(--studio-line);border-radius:var(--studio-r-card);min-height:44px;color:var(--studio-fg-muted);cursor:pointer;align-items:center;gap:10px;padding:0 16px 0 14px;display:inline-flex}.codej-studio .studio-bp-radio{appearance:none;background:0 0;border:1px solid;border-radius:0;flex:none;width:10px;height:10px;margin:0}.codej-studio .studio-bp-radio:checked{border-color:var(--studio-signal);background-color:var(--studio-signal)}.codej-studio .studio-bp-stage-option:has(.studio-bp-radio:checked){border-color:var(--studio-line-draft);background-color:var(--studio-ink-2);color:var(--studio-fg)}@media (hover:hover) and (pointer:fine){.codej-studio .studio-bp-stage-option:hover{background-color:var(--studio-ink-3);color:var(--studio-fg)}}@supports selector(:has(*)){.codej-studio .studio-bp-radio:focus-visible{outline:none}.codej-studio .studio-bp-stage-option:has(.studio-bp-radio:focus-visible){outline:2px solid var(--studio-focus);outline-offset:3px}}.codej-studio .studio-bp-steps{gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none;display:grid}.codej-studio .studio-bp-steps>li{border-top:1px solid var(--studio-line);color:var(--studio-fg-muted);gap:6px;padding-top:12px;display:grid}.codej-studio .studio-bp-steps h3{color:inherit;font-size:var(--studio-fs-lede);letter-spacing:var(--studio-ls-h3);line-height:1.2;font-weight:var(--studio-fw-h3)}.codej-studio .studio-bp-steps p{max-width:40ch;font-size:.875rem;line-height:1.5}.codej-studio .studio-bp-steps>li[aria-current=step]{border-top-color:var(--studio-signal);color:var(--studio-fg)}.codej-studio .studio-bp:has([data-bp-stage=scope]:checked) [data-bp-step=scope]{border-top-color:var(--studio-signal);color:var(--studio-fg)}.codej-studio .studio-bp:has([data-bp-stage=build]:checked) [data-bp-step=build]{border-top-color:var(--studio-signal);color:var(--studio-fg)}.codej-studio .studio-bp:has([data-bp-stage=live]:checked) [data-bp-step=live]{border-top-color:var(--studio-signal);color:var(--studio-fg)}:is(.codej-studio .studio-bp:has([data-bp-stage=scope]:checked) [data-bp-step]:not([data-bp-step=scope]),.codej-studio .studio-bp:has([data-bp-stage=build]:checked) [data-bp-step]:not([data-bp-step=build]),.codej-studio .studio-bp:has([data-bp-stage=live]:checked) [data-bp-step]:not([data-bp-step=live])){border-top-color:var(--studio-line);color:var(--studio-fg-muted)}@media (width>=768px) and (width<=1023.98px){.codej-studio .studio-bp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}.codej-studio .studio-bp-figure{justify-items:start;gap:12px;display:grid}.codej-studio .studio-bp-frame{width:100%;aspect-ratio:var(--bp-ratio,16 / 10);background-color:var(--studio-ink-0);transform-origin:50%;position:relative;overflow:clip}.codej-studio .studio-bp-frame:after{z-index:5}.codej-studio .studio-bp-frame[data-bp-frame=mobile]{display:none}@media (width<=767.98px){.codej-studio .studio-bp-frame[data-bp-frame=desktop]{display:none}.codej-studio .studio-bp-frame[data-bp-frame=mobile]{width:min(100%,32.346svh);display:block}}.codej-studio .studio-bp-fills,.codej-studio .studio-bp-live,.codej-studio .studio-bp-l1,.codej-studio .studio-bp-l4{position:absolute;inset:0}.codej-studio .studio-bp-fills,.codej-studio .studio-bp-draw{width:100%;height:100%;display:block;overflow:visible}.codej-studio .studio-bp-fill{fill:var(--studio-ink-2)}.codej-studio .studio-bp-live{z-index:1}.codej-studio .studio-bp-capture{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.codej-studio .studio-bp-dim{background-color:var(--studio-ink-0);opacity:0;position:absolute;inset:0}.codej-studio .studio-bp-l1{z-index:2;color:var(--studio-line-draft);pointer-events:none}.codej-studio .studio-bp-ghost{font-family:ui-serif,Georgia,Times New Roman,serif;font-weight:400}.codej-studio .studio-bp-label{left:var(--bp-x);top:var(--bp-y);max-width:var(--bp-room);color:var(--studio-on-ink-muted);white-space:normal;line-height:1.3;display:grid;position:absolute}.codej-studio .studio-bp-label[data-end]{text-align:end;justify-items:end;translate:-100% -100%}.codej-studio .studio-bp-label[data-corner]{top:auto;left:auto;right:calc(var(--studio-mark-offset) + var(--studio-mark) + 8px);bottom:clamp(2px, calc(100% - var(--bp-y) - 2.3em - 4px), var(--studio-mark-offset));line-height:1.15;translate:none}.codej-studio .studio-bp-dims{white-space:nowrap}.codej-studio .studio-bp-l4{z-index:3;opacity:0;visibility:hidden}.codej-studio .studio-bp[data-running] .studio-bp-l4{opacity:1;visibility:visible}@media (prefers-reduced-motion:no-preference){.codej-studio .studio-bp-l4{transition:opacity var(--studio-dur-2) var(--studio-ease), visibility 0s linear var(--studio-dur-2)}.codej-studio .studio-bp[data-running] .studio-bp-l4{transition:opacity var(--studio-dur-2) var(--studio-ease), visibility 0s}}.codej-studio .studio-bp:not([data-scene=scrub]) .studio-bp-l1{opacity:.1}.codej-studio .studio-bp:not([data-scene=scrub]) .studio-bp-label,.codej-studio .studio-bp:not([data-scene=scrub]) .studio-bp-fills{opacity:0}.codej-studio .studio-bp:not([data-scene=scrub]) .studio-bp-live{opacity:1;clip-path:inset(0)}:is(.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=scope]:checked) .studio-bp-l1,.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=scope]:checked) .studio-bp-label){opacity:1}.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=scope]:checked) .studio-bp-live{opacity:0}:is(.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=build]:checked) .studio-bp-l1,.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=build]:checked) .studio-bp-label,.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=build]:checked) .studio-bp-fills){opacity:1}.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=build]:checked) .studio-bp-live{clip-path:var(--bp-window)}.codej-studio .studio-bp:not([data-scene=scrub]):has([data-bp-stage=build]:checked) .studio-bp-dim{opacity:.65}@media (prefers-reduced-motion:no-preference){.codej-studio .studio-bp:not([data-scene=scrub]) :is(.studio-bp-l1,.studio-bp-label,.studio-bp-fills,.studio-bp-dim){transition:opacity var(--studio-dur-1) var(--studio-ease)}.codej-studio .studio-bp:not([data-scene=scrub]) .studio-bp-live{transition:opacity var(--studio-dur-1) var(--studio-ease), clip-path var(--studio-dur-1) var(--studio-ease)}.codej-studio .studio-bp-stage-option{transition:background-color var(--studio-dur-1) var(--studio-ease), border-color var(--studio-dur-1) var(--studio-ease), color var(--studio-dur-1) var(--studio-ease)}.codej-studio .studio-bp-steps>li{transition:color var(--studio-dur-1) var(--studio-ease), border-color var(--studio-dur-1) var(--studio-ease)}}@media (width>=1024px){.codej-studio .studio-bp-stage{grid-template-rows:auto auto 1fr;align-items:start}.codej-studio .studio-bp-stage>.studio-bp-head,.codej-studio .studio-bp-stage>.studio-bp-stages,.codej-studio .studio-bp-stage>.studio-bp-steps{grid-column:1/5}.codej-studio .studio-bp-stage>.studio-bp-head{grid-row:1}.codej-studio .studio-bp-stage>.studio-bp-stages{grid-row:2}.codej-studio .studio-bp-stage>.studio-bp-steps{grid-row:3}.codej-studio .studio-bp-stage>.studio-bp-figure{grid-area:1/5/span 3/-1;align-self:center}.codej-studio .studio-bp-steps>li{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:14px}.codej-studio .studio-bp-steps>li>:not(.studio-mono){grid-column:2}}.codej-studio .studio-bp[data-scene=scrub]{background-image:none}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-runway{height:400svh}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage{--bp-header:72px;--bp-pad-block:clamp(12px, 2.4svh, 32px);--bp-rhythm:clamp(8px, 1.6svh, 24px);height:100svh;padding-top:calc(var(--bp-header) + var(--bp-pad-block));padding-bottom:var(--bp-pad-block);background-image:var(--studio-lamp);grid-template-rows:auto auto auto;align-content:center;row-gap:clamp(12px,2.6svh,40px);position:sticky;top:0;overflow:clip}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-title{font-size:min(var(--studio-fs-h2), 7svh)}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-project{margin-top:var(--bp-rhythm)}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-steps{gap:var(--bp-rhythm)}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-steps>li{padding-top:clamp(8px,1.3svh,12px)}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage-option{padding-inline:10px 12px}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage>.studio-bp-figure{width:min(100%, calc((100svh - var(--bp-header) - 2 * var(--bp-pad-block) - 40px) * 1.6));justify-self:end}@media (width>=1024px) and (width<=1279.98px){.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage>:is(.studio-bp-head,.studio-bp-stages,.studio-bp-steps){grid-column:1/6}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage>.studio-bp-figure{grid-column:6/-1}}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-fills{opacity:1}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stroke{stroke-dasharray:1}.codej-studio .studio-bp[data-awaiting-input] .studio-bp-live{opacity:1!important;clip-path:inset(0)!important}.codej-studio .studio-bp[data-awaiting-input] .studio-bp-dim{opacity:0!important}@media print{.codej-studio .studio-bp .studio-bp-live{opacity:1!important;clip-path:inset(0)!important}.codej-studio .studio-bp .studio-bp-dim,.codej-studio .studio-bp .studio-bp-fills,.codej-studio .studio-bp .studio-bp-label{opacity:0!important}.codej-studio .studio-bp .studio-bp-l1{opacity:.1!important}.codej-studio .studio-bp .studio-bp-l4{visibility:hidden!important}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-runway{height:auto}.codej-studio .studio-bp[data-scene=scrub] .studio-bp-stage{height:auto;position:static}}.codej-studio .studio-bp-foot{padding:clamp(28px, 4vw, 56px) var(--bp-pad-inline) clamp(40px, 6vw, 96px);gap:20px;display:grid}.codej-studio .studio-bp-actions{border-top:1px solid var(--studio-line);flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:clamp(20px,2.4vw,32px);display:flex}.codej-studio .studio-bp-note{color:var(--studio-fg-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:.875rem;display:flex}.codej-studio .studio-bp-actions .studio-text-link,.codej-studio .studio-bp-note .studio-text-link{color:var(--studio-link)}.codej-studio .studio-skip-demo{z-index:6;height:0;position:relative}.codej-studio .studio-skip-demo>a{top:calc(var(--studio-inset) + 16px);left:calc(var(--studio-inset) + var(--studio-gutter));border:1px solid var(--studio-line-draft);border-radius:var(--studio-r-card);background-color:var(--studio-ink-2);min-height:44px;color:var(--studio-on-ink);white-space:nowrap;align-items:center;padding:0 18px;display:inline-flex;position:absolute}.codej-studio .studio-skip-demo>a:not(:focus){clip-path:inset(50%);border:0;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden}