.sim-ps-scene{isolation:isolate;box-sizing:border-box;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-paper);block-size:320px;min-inline-size:0;max-inline-size:100%;color:var(--color-ink);font-family:var(--font-body);position:relative;overflow:hidden}.sim-ps-foreground{z-index:2;align-content:center;justify-items:start;gap:var(--space-3);box-sizing:border-box;block-size:100%;min-inline-size:0;padding:var(--space-6);pointer-events:none;display:grid;position:relative}.sim-ps-foreground>*{pointer-events:auto;overflow-wrap:anywhere;max-inline-size:100%}.sim-ps-foreground :is(h2,h3,p){margin:0}.sim-ps-copy{max-inline-size:28rem;padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-medium);background:var(--color-paper);box-shadow:var(--shadow-card)}.sim-ps-example{gap:var(--space-4);min-inline-size:0;max-inline-size:100%;display:grid}.sim-ps-controls{align-items:end;gap:var(--space-3);flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;display:flex}.sim-ps-controls>.ui-aria-field{flex:9rem;min-inline-size:0;max-inline-size:100%}.sim-ps-controls button{white-space:normal;max-inline-size:100%}.sim-ps-note{font:400 var(--type-caption)/var(--line-body) var(--font-body);color:var(--color-muted);overflow-wrap:anywhere}.sim-ps-fixture{gap:var(--space-8);max-inline-size:72rem;padding:var(--space-4);color:var(--color-ink);font-family:var(--font-body);min-inline-size:0;margin-inline:auto;display:grid}.sim-ps-fixture>header{gap:var(--space-3);display:grid}.sim-ps-fixture :is(h1,h2,p){overflow-wrap:anywhere;margin:0}.sim-ps-fixture h1{font:600 var(--type-heading)/1.2 var(--font-body)}.sim-ps-fixture h2{font:600 var(--type-title)/1.3 var(--font-body)}.sim-ps-fixture>section{gap:var(--space-4);padding-block:var(--space-5);border-block-end:1px solid var(--color-line);min-inline-size:0;display:grid}.sim-ps-fixture>section>header{gap:var(--space-2);display:grid}.sim-ps-state-picker{max-inline-size:22rem}.sim-ps-eyebrow{font:500 var(--type-caption)/1.5 var(--font-body);color:var(--color-muted)}.sim-ps-scope{padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-medium);background:var(--color-raised);font:400 var(--type-caption)/1.6 var(--font-body)}.sim-ps-scope p{margin-block-start:var(--space-3)}.sim-ps-fixture :focus-visible{outline:var(--size-focus-ring) solid var(--color-focus);outline-offset:var(--size-focus-offset)}@media (max-width:400px){.sim-ps-foreground{padding:var(--space-3)}.sim-ps-controls>.ui-aria-field{flex-basis:8rem}.sim-ps-fixture{padding:var(--space-3)}}@media (forced-colors:active){.sim-ps-scene,.sim-ps-copy,.sim-ps-scope{color:canvastext;box-shadow:none;background:canvas;border-color:canvastext}.sim-ps-note{color:canvastext}}
.sim-ps-canvas-scene{isolation:isolate;color:var(--color-ink);font-family:var(--font-body);overflow-wrap:anywhere;min-inline-size:0}.sim-ps-canvas,.sim-ps-canvas-fallback{pointer-events:none;z-index:0;block-size:100%;inline-size:100%;position:absolute;inset:0}.sim-ps-canvas-scene>.sim-ps-foreground{z-index:1;pointer-events:auto;min-inline-size:0;position:relative}.sim-ps-canvas-color-probe{visibility:hidden;pointer-events:none;block-size:0;inline-size:0;position:absolute;overflow:hidden}.sim-ps-canvas-example{gap:var(--space-4);min-inline-size:0;display:grid}.sim-ps-canvas-example .sim-ps-controls{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.sim-ps-canvas-knobs{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));min-inline-size:0;display:grid}.sim-ps-canvas-example .sim-ps-note{font:var(--type-caption)/var(--line-body) var(--font-body);overflow-wrap:anywhere}.sim-ps-canvas-example .sim-ps-foreground{max-inline-size:34rem;padding:clamp(16px,4vw,40px)}.sim-ps-canvas-example h3{font-family:var(--font-body);margin-block:0 var(--space-3)}.sim-ps-canvas-example p{line-height:var(--line-body)}@media (forced-colors:active){.sim-ps-canvas-scene{color:canvastext;background:canvas!important}.sim-ps-canvas-fallback,.sim-ps-canvas-color-probe{color:canvastext!important}}
.sim-ps-ripple-field{pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 16% 65%,#0000 100%);mask-image:linear-gradient(#000 16% 65%,#0000 100%)}.sim-ps-ripple-ring{box-sizing:border-box;background:color-mix(in srgb,currentColor 6%,transparent);transform-origin:50%;box-shadow:0 0 16px color-mix(in srgb,currentColor 4%,transparent);color:var(--color-ink,#24233d);border:1px solid;border-radius:50%;display:block;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.sim-ps-cubes{perspective:900px;isolation:isolate}.sim-ps-cubes-field{perspective:900px;transform-style:preserve-3d;display:grid;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.sim-ps-cubes-cube{width:var(--sim-ps-cube-edge);height:var(--sim-ps-cube-edge);transform-style:preserve-3d;--sim-ps-cube-mix:0;position:relative}.sim-ps-cubes-face{box-sizing:border-box;border:var(--sim-ps-cube-border);background:color-mix(in srgb,var(--sim-ps-cube-ripple) calc(var(--sim-ps-cube-mix)*100%),var(--sim-ps-cube-face));backface-visibility:hidden;position:absolute;inset:0}.sim-ps-cubes-front{transform:translateZ(var(--sim-ps-cube-depth))}.sim-ps-cubes-back{transform:rotateY(180deg) translateZ(var(--sim-ps-cube-depth));filter:brightness(.84)}.sim-ps-cubes-right{transform:rotateY(90deg) translateZ(var(--sim-ps-cube-depth));filter:brightness(.9)}.sim-ps-cubes-left{transform:rotateY(-90deg) translateZ(var(--sim-ps-cube-depth));filter:brightness(.94)}.sim-ps-cubes-top{transform:rotateX(90deg) translateZ(var(--sim-ps-cube-depth));filter:brightness(1.04)}.sim-ps-cubes-bottom{transform:rotateX(-90deg) translateZ(var(--sim-ps-cube-depth));filter:brightness(.8)}.sim-ps-cubes[data-shadow=true] .sim-ps-cubes-front{box-shadow:0 8px 18px color-mix(in srgb,var(--color-ink,#24233d) 13%,transparent)}.sim-ps-grid-motion{isolation:isolate}.sim-ps-grid-motion-field{inset:-180px calc(-1 * (var(--sim-ps-grid-travel) + 180px));transform:rotate(var(--sim-ps-grid-rotation));pointer-events:none;grid-template-rows:repeat(4,minmax(0,1fr));gap:16px;display:grid;position:absolute}.sim-ps-grid-motion-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;min-height:0;display:grid}.sim-ps-grid-motion-tile{border:1px solid var(--color-line,#d1ceda);background:var(--color-raised,#f6f5fa);min-width:0;min-height:0;color:var(--color-ink,#24233d);font:inherit;text-align:center;border-radius:16px;justify-content:center;align-items:center;font-size:clamp(.9rem,2vw,1.5rem);font-weight:600;line-height:1.3;display:flex;overflow:hidden}.sim-ps-grid-motion-tile>span{overflow-wrap:anywhere;max-width:100%;padding:12px}.sim-ps-grid-motion-tile img{object-fit:cover;width:100%;height:100%;display:block}.sim-ps-grid-motion-tile[data-empty=true]{opacity:.35;background:0 0;border-style:dashed}.sim-ps-grid-motion:after{content:"";pointer-events:none;background:linear-gradient(to top,var(--sim-ps-grid-gradient),transparent 35%,transparent 65%,var(--sim-ps-grid-gradient));position:absolute;inset:0}.sim-ps-grid-motion .sim-ps-foreground{z-index:2}@media (forced-colors:active){.sim-ps-ripple-ring{color:canvastext;box-shadow:none;background:0 0}.sim-ps-cubes-face,.sim-ps-grid-motion-tile{color:canvastext;filter:none;background:canvas;border-color:canvastext}.sim-ps-grid-motion:after{display:none}}