.pg-header-actions{align-items:center;gap:8px;display:flex}.pg-menu-head{justify-content:space-between;align-items:center;display:flex}.menu-panel .label{color:var(--sb-color-mist)}.pg{padding-top:calc(var(--header-h) + clamp(24px, 4vw, 48px));padding-bottom:48px}.pg-intro{max-width:var(--maxw);padding-inline:var(--gutter);margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,32ch);align-items:end;gap:12px 32px;margin-bottom:clamp(24px,3vw,40px);display:grid}.pg-intro .label{grid-column:1/-1}.pg-title{font:400 clamp(2.5rem, 6vw, 5rem) / .95 var(--font-display);letter-spacing:-.02em}.pg-title em{color:var(--fg-muted);font-style:italic}.pg-sub{font-size:.9375rem}.pg-layout{max-width:var(--maxw);padding-inline:var(--gutter);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);grid-template-columns:212px minmax(0,1fr) 340px;margin-inline:auto;display:grid}.pg-layout>*{min-width:0}.pg-col-label{padding:16px 0 12px}.pg-nav{border-right:1px solid var(--line);padding-right:16px}.pg-tabs{gap:2px;padding-bottom:24px;display:grid}.pg-tab{border-radius:var(--sb-radius-sm);text-align:left;width:100%;color:var(--fg-muted);cursor:pointer;transition:background-color var(--sb-motion-duration-quick) var(--ease-ui), color var(--sb-motion-duration-quick) var(--ease-ui);background:0 0;border:0;grid-template-columns:2.25em 1fr;align-items:baseline;padding:9px 10px;font-size:.9375rem;display:grid}.pg-tab-num{font:500 .6875rem / 1 var(--font-mono);color:var(--fg-muted);font-variant-numeric:tabular-nums}.pg-tab:hover{color:var(--fg);background:color-mix(in oklab, var(--fg) 5%, transparent)}.pg-tab[aria-selected=true]{color:var(--fg);background:color-mix(in oklab, var(--fg) 7%, transparent);box-shadow:inset 2px 0 0 var(--accent)}.pg-tab[aria-selected=true] .pg-tab-num{color:var(--fg)}.pg-stage-col{min-height:min(760px, calc(100svh - var(--header-h) - 48px));grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);padding-inline:clamp(16px,2vw,28px);display:grid}.pg-stage-head{justify-content:space-between;align-items:end;gap:24px;padding:16px 0 14px;display:flex}.pg-stage-head .label{font-variant-numeric:tabular-nums}.pg-pattern-title{font:400 clamp(1.75rem, 2.6vw, 2.25rem) / 1 var(--font-display);margin-top:6px}.pg-pattern-summary{text-align:right;max-width:44ch;font-size:.875rem}.pg-stage{border:1px solid var(--line);border-radius:var(--sb-radius-md);background-color:var(--bg-raised);background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-position:-1px -1px;background-size:48px 48px;min-height:420px;position:relative;overflow:clip}.pg-stage:focus-visible{outline-offset:-2px}.pg-stage-body{position:absolute;inset:0}.pg-banner{z-index:5;border:1px solid var(--line-strong);border-radius:var(--sb-radius-sm);background:var(--bg);align-items:baseline;gap:12px;padding:10px 12px;font-size:.8125rem;display:flex;position:absolute;top:12px;left:12px;right:12px}.pg-banner[hidden]{display:none}.pg-banner .label{color:var(--accent-ink);flex:none}.pg-stage-foot{justify-content:space-between;align-items:center;gap:16px;padding:12px 0 20px;display:flex}.pg-stage-foot .label{text-transform:none;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.pg-panel{border-left:1px solid var(--line);grid-template-columns:minmax(0,1fr);align-content:start;padding-left:20px;display:grid}.pg-panel>*{min-width:0}.pg-control{border-top:1px solid var(--line);gap:6px;padding:10px 0;display:grid}.pg-control-row{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.pg-control label,.pg-control .pg-control-name{font-size:.8125rem;font-weight:500}.pg-control output{font:500 .75rem / 1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-muted)}.pg-control input[type=range]{width:100%;accent-color:var(--fg);margin:2px 0}.pg-control select,.pg-control input[type=text]{border:1px solid var(--line-strong);border-radius:var(--sb-radius-sm);background:var(--bg-raised);width:100%;min-height:36px;padding:0 10px}.pg-control input[type=color]{border:1px solid var(--line-strong);border-radius:var(--sb-radius-sm);background:0 0;width:44px;height:28px;padding:0}.pg-control-check{border-top:1px solid var(--line);align-items:center;gap:10px;padding:10px 0;font-size:.8125rem;font-weight:500;display:flex}.pg-control-check input{width:16px;height:16px;accent-color:var(--fg)}.pg-hint{color:var(--fg-muted);font-size:.75rem}.pg-code{border-top:1px solid var(--line-strong);padding:14px 0 24px}.pg-code-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.pg-code pre{border-radius:var(--sb-radius-md);background:var(--sb-color-ink);max-height:320px;color:var(--sb-color-snow);font:400 .75rem / 1.6 var(--font-mono);tab-size:2;margin:0;padding:14px;overflow:auto}.pg-copy-note{min-height:1.2em;color:var(--accent-ink);margin-top:8px}.pg-center{place-items:center;padding:32px;display:grid;position:absolute;inset:0}.pg-readouts{font:500 .75rem / 1.3 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-muted);flex-wrap:wrap;gap:6px 16px;display:flex;position:absolute;bottom:12px;left:14px}.pg-readouts b{color:var(--fg);font-weight:500}.pg-ease{grid-template-rows:1fr auto;gap:20px;padding:28px 28px 52px;display:grid;position:absolute;inset:0}.pg-ease svg{width:100%;height:100%;max-height:340px;overflow:visible}.pg-ease .curve{fill:none;stroke:var(--fg);stroke-width:2px;vector-effect:non-scaling-stroke}.pg-ease .axis{stroke:var(--line-strong);stroke-width:1px;vector-effect:non-scaling-stroke}.pg-ease .guide{stroke:var(--line-strong);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}.pg-ease .head{fill:var(--accent)}.pg-track{border-bottom:1px solid var(--line-strong);height:28px;position:relative}.pg-ball{background:var(--fg);border-radius:50%;width:24px;height:24px;position:absolute;top:2px;left:0}.pg-css-out{font:400 .6875rem / 1.4 var(--font-mono);color:var(--fg-muted);word-break:break-all;max-height:3.2em;overflow:hidden}.pg-reveal-text{font:400 clamp(2.25rem, 5.5vw, 4.75rem) / .98 var(--font-display);letter-spacing:-.02em;text-align:center;text-wrap:balance;max-width:14ch}.pg-grid{cursor:crosshair;grid-template-columns:repeat(12,1fr);gap:clamp(10px,2.2vw,22px);display:grid}.pg-grid span{aspect-ratio:1;background:var(--fg);border-radius:50%;width:clamp(10px,1.6vw,16px)}.pg-grid span[data-origin]{background:var(--accent)}.pg-follow{cursor:none;touch-action:none;position:absolute;inset:0}.pg-follow:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}.pg-follow-dot,.pg-follow-target{pointer-events:none;position:absolute;top:0;left:0}.pg-follow-dot{background:var(--fg);border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px}.pg-follow-target{background:linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat, linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;width:21px;height:21px;margin:-10px 0 0 -10px}.pg-magnets{flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;display:flex}.pg-magnet{border:1px solid var(--fg);cursor:pointer;background:0 0;border-radius:50%;width:132px;height:132px;font-weight:500}.pg-magnet span{display:inline-block}.pg-magnet.is-solid{background:var(--fg);color:var(--bg)}.pg-tilt-card{aspect-ratio:4/5;border-radius:var(--sb-radius-lg);background:var(--sb-color-ink);width:220px;color:var(--sb-color-snow);align-content:space-between;padding:18px;display:grid}.pg-tilt-card .label{color:var(--sb-color-mist)}.pg-tilt-card strong{font:400 2.25rem / 1 var(--font-display)}.pg-scramble{font:500 clamp(1.5rem, 4vw, 3.25rem) / 1.1 var(--font-mono);letter-spacing:-.02em;text-align:center;overflow-wrap:anywhere;max-width:18ch}.pg-canvas{width:100%;height:100%;position:absolute;inset:0}.pg-draw svg{width:min(560px,100%);height:auto;overflow:visible}.pg-draw path,.pg-draw line,.pg-draw polyline{fill:none;stroke:var(--fg);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.pg-draw .accent{stroke:var(--accent)}.pg-three{position:absolute;inset:0}.pg-three canvas{outline:none;width:100%;height:100%}.pg-three[data-sb-render="3d"]{background:var(--sb-color-ink)}.pg-three:focus-within canvas:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}.pg-fallback{text-align:center;align-content:center;place-items:center;gap:16px;padding:32px;display:grid;position:absolute;inset:0}.pg-fallback svg{width:160px;height:160px}.pg-fallback p{max-width:40ch;font-size:.875rem}.pg-three .pg-readouts{color:var(--sb-color-mist);z-index:2}.pg-three[data-sb-render="3d"] .pg-readouts b{color:var(--sb-color-snow)}.pg-scrub{grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid;position:absolute;inset:0}.pg-scroller{border-right:1px solid var(--line);overscroll-behavior:contain;position:relative;overflow:auto}.pg-scroller-track{align-content:space-between;height:400%;padding:24px;display:grid}.pg-scroller-track p{font:500 .75rem / 1 var(--font-mono);color:var(--fg-muted)}.pg-scrub-visual{align-content:center;place-items:center;gap:24px;padding:24px;display:grid}.pg-scrub-num{font:400 clamp(3rem, 7vw, 5.5rem) / 1 var(--font-display);font-variant-numeric:tabular-nums}.pg-scrub-bar{background:var(--line-strong);width:min(240px,100%);height:2px}.pg-scrub-bar i{background:var(--accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.pg-scrub-shape{border:1.5px solid var(--fg);width:72px;height:72px}@media (max-width:1180px){.pg-layout{grid-template-columns:196px minmax(0,1fr)}.pg-panel{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding-left:0}}@media (max-width:860px){.pg-intro{grid-template-columns:1fr}.pg-layout{grid-template-columns:minmax(0,1fr)}.pg-nav{border-right:0;padding-right:0}.pg-tabs{scrollbar-width:thin;gap:4px;padding-bottom:12px;display:flex;overflow-x:auto}.pg-tab{white-space:nowrap;flex:none;width:auto}.pg-tab[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--accent)}.pg-stage-col{border-top:1px solid var(--line);min-height:0;padding-inline:0}.pg-stage-head{flex-direction:column;align-items:start;gap:6px}.pg-pattern-summary{text-align:left}.pg-stage{min-height:380px}.pg-panel{grid-template-columns:minmax(0,1fr);gap:0}.pg-scrub{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.pg-scroller{border-right:0;border-bottom:1px solid var(--line)}}