[data-playground]{--pg-mat:#1e4d36;--pg-mat-deep:#163b29;--pg-line:#ffffff1a;--pg-line-strong:#ffffff38;--pg-ink:#ffe100;--pg-paper:#fbfaf8;--pg-paper-edge:#0f201824;--pg-text:#12140f;--pg-muted:#5c6560;--pg-tick:#ffffff80;--pg-on-mat:#f4f7f4;--pg-on-mat-2:#eaf1ecd1;--pg-on-mat-3:#eaf1ec8c;--pg-on-mat-ghost:#f4f7f49e;--pg-hair-ink:#12140f1f;--pg-hair-mat:#eaf1ec59;--pg-settle:cubic-bezier(.2, .7, .3, 1)}.pg-mat{background-color:var(--pg-mat);background-image:linear-gradient(var(--pg-line) 1px, transparent 1px), linear-gradient(90deg, var(--pg-line) 1px, transparent 1px), linear-gradient(var(--pg-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--pg-line-strong) 1px, transparent 1px), radial-gradient(120% 80% at 50% 0%, #ffffff0d, transparent 60%);color:#eaf1ec;isolation:isolate;background-size:24px 24px,24px 24px,120px 120px,120px 120px,100% 100%;position:relative;overflow:clip}.pg-rule{background-image:repeating-linear-gradient(90deg, var(--pg-tick) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #ffffffd9 0 1px, transparent 1px 120px);opacity:.55;pointer-events:none;background-position:0 0,0 0;background-repeat:no-repeat;background-size:100% 6px,100% 11px;height:26px;position:absolute;inset:0 0 auto}.pg-rule:after{content:"";background:var(--pg-line-strong);height:1px;position:absolute;inset:25px 0 auto}.pg-canvas{z-index:0;will-change:transform;width:100%;height:100vh;display:block;position:absolute;top:0;left:0}.pg-mat>.pg-rule,.pg-mat>div{z-index:2;position:relative}[data-playground] :focus-visible{outline-color:var(--pg-paper)}[data-playground] .pg-card :focus-visible{outline-color:var(--accent)}.pg-mat>.pg-ground{z-index:0;position:absolute}.pg-ground{z-index:0;will-change:transform;background-color:#1a4431;background-image:radial-gradient(80% 100%,#0000 34%,#0000000f 68%,#0000002c 100%),linear-gradient(#fff0 38%,#ffffff12 100%);width:100%;height:100vh;position:absolute;top:0;left:0;overflow:hidden}.pg-ground-drift{background-image:radial-gradient(46% 56% at 32% 34%,#21533b9e,#21533b00 72%),radial-gradient(52% 62% at 74% 70%,#1337269e,#13372600 74%);animation:63s ease-in-out infinite alternate pg-ground-drift;position:absolute;inset:-12%}@keyframes pg-ground-drift{0%{transform:translate(-1.8%,-1.4%)}to{transform:translate(1.8%,1.4%)}}.pg-ground-warm{pointer-events:none;opacity:0;will-change:transform, opacity;mix-blend-mode:plus-lighter;width:1600px;height:1600px;transition:opacity .22s var(--pg-settle);background-image:radial-gradient(closest-side,#0e1310 0%,#0e13109f 12.5%,#0e131063 25%,#0e13103e 37.5%,#0e131026 50%,#0e131018 62.5%,#0e13100f 75%,#0e131009 87.5%,#0e131000 100%);margin:-800px 0 0 -800px;position:absolute;top:0;left:0}@media (prefers-reduced-motion:reduce){.pg-ground-drift{animation:none}.pg-ground-warm{display:none}}.pg-grid{z-index:1;pointer-events:none;background-image:linear-gradient(var(--pg-line) 1px, transparent 1px), linear-gradient(90deg, var(--pg-line) 1px, transparent 1px), linear-gradient(var(--pg-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--pg-line-strong) 1px, transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px;position:absolute;inset:0}.pg-grain{z-index:1;pointer-events:none;opacity:.32;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");position:absolute;inset:0}.pg-index{border-top:1px solid var(--pg-line-strong);padding-top:14px}.pg-index-head{margin-bottom:10px}.pg-flapboard{background:var(--pg-text);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--pg-on-mat) 7%, transparent), 0 24px 48px -26px color-mix(in oklab, var(--pg-text) 85%, transparent);border-radius:12px;flex-direction:column;gap:6px;padding:8px;display:flex}.pg-flap-row{transition:background-color .18s var(--pg-settle);border-radius:7px;padding:3px;text-decoration:none;display:block}.pg-flap-row:hover{background:color-mix(in oklab, var(--pg-on-mat) 6%, transparent)}.pg-flap-row:focus-visible{outline:2px solid var(--pg-ink);outline-offset:2px}.pg-flap-cells{pointer-events:none;--pg-n:var(--pg-cols);grid-template-columns:repeat(var(--pg-n), minmax(0, 1fr));gap:2px;display:grid;container-type:inline-size}.pg-flap-slot{min-width:0;display:block}.pg-flap-slot--wide{display:none}@media (min-width:768px){.pg-flapboard{border-radius:14px;gap:8px;padding:12px}.pg-flap-cells{--pg-n:var(--pg-cols-wide);gap:3px}.pg-flap-slot--wide{display:block}}.pg-flap{aspect-ratio:5/8;perspective:280px;display:block;position:relative}.pg-flap-half{background:color-mix(in oklab, var(--pg-text) 84%, var(--pg-on-mat));height:calc(50% - .5px);color:var(--pg-on-mat);position:absolute;inset-inline:0;overflow:hidden}.pg-flap-top{border-radius:2px 2px 0 0;top:0}.pg-flap-bottom{background:color-mix(in oklab, var(--pg-text) 89%, var(--pg-on-mat));border-radius:0 0 2px 2px;bottom:0}.pg-flap-ch{height:200%;font-family:var(--font-mono), ui-monospace, monospace;font-weight:600;font-size:calc(100cqw / var(--pg-n) * .74);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset-inline:0}.pg-flap-ch:before{content:attr(data-ch)}.pg-flap-top .pg-flap-ch{top:0}.pg-flap-bottom .pg-flap-ch{bottom:0}.pg-flap-split{inset-inline:0;z-index:3;background:var(--pg-text);height:1px;position:absolute;top:50%;transform:translateY(-.5px)}.pg-flap--status{color:var(--pg-ink)}.pg-flap--ink{background:var(--pg-ink);color:var(--pg-text)}.pg-flap--mat{background:var(--pg-mat);color:var(--pg-on-mat)}.pg-flap--paper{background:var(--pg-paper);color:var(--pg-text)}.pg-flap--accent{background:var(--accent);color:var(--pg-paper)}.pg-flap-fall{z-index:2;transform-origin:50% 100%;backface-visibility:hidden;animation:pg-flap-fall var(--pg-flip) cubic-bezier(.55, .055, .675, .19) both}.pg-flap-rise{z-index:2;transform-origin:50% 0;backface-visibility:hidden;animation:pg-flap-rise calc(var(--pg-flip) * .85) cubic-bezier(.33, 1.55, .64, 1) calc(var(--pg-flip) * .5) both}@keyframes pg-flap-fall{0%{transform:rotateX(0)}99%{visibility:visible;transform:rotateX(-100deg)}to{visibility:hidden;transform:rotateX(-100deg)}}@keyframes pg-flap-rise{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@media (prefers-reduced-motion:reduce){.pg-flap-fall,.pg-flap-rise{animation:none}.pg-flap-row{transition:none}}@property --near{syntax:"<number>";inherits:true;initial-value:0}.pg-foils{perspective:800px;flex-wrap:wrap;gap:14px 12px;display:flex}.pg-foils--small{gap:8px}.pg-foil{--near:0;isolation:isolate;box-shadow:inset 0 1px 0 #fffffff2, inset 0 -1px 0 #12140f24, 0 0 0 3px #fbfaf8, 0 10px 18px rgba(6, 20, 13, calc(.34 - var(--near) * .12)), 0 1px 2px #06140d4d;transform:rotate(var(--frot,0deg)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0);transition:transform .3s var(--pg-settle), box-shadow .3s var(--pg-settle);background:linear-gradient(168deg,#fff 0%,#f4f5f2 46%,#e9ebe6 100%);border-radius:12px;flex-direction:column;gap:1px;padding:11px 16px 12px;display:flex;position:relative}.pg-foils--small .pg-foil{border-radius:9px;padding:7px 12px 8px;box-shadow:inset 0 1px #fffffff2,inset 0 -1px #12140f24,0 0 0 2px #fbfaf8,0 6px 12px #06140d42}.pg-foil-sheen{z-index:1;border-radius:inherit;pointer-events:none;opacity:calc(var(--near) * .92);mix-blend-mode:overlay;background-image:radial-gradient(120% 130% at var(--mx,50%) var(--my,50%), hsl(calc(var(--ftone) + 0deg) 95% 58% / .95) 0%, hsl(calc(var(--ftone) + 80deg) 95% 52% / .78) 32%, hsl(calc(var(--ftone) + 170deg) 92% 50% / .56) 60%, hsl(calc(var(--ftone) + 250deg) 90% 56% / .32) 82%, transparent 96%), repeating-linear-gradient(112deg, #fff0 0 5px, #ffffff80 5px 7px, #fff0 7px 13px);background-position:calc(var(--mx,50%) * -.18) calc(var(--my,50%) * -.18), calc(var(--mx,50%) * .6) 0;background-blend-mode:overlay;filter:contrast(1.15)saturate(1.5);background-size:140% 140%,200% 200%;position:absolute;inset:0}.pg-foil-rim{z-index:2;border-radius:inherit;pointer-events:none;background:conic-gradient(from calc(var(--ftone) - 40deg), hsl(var(--ftone) 95% 70%), hsl(calc(var(--ftone) + 90deg) 95% 66%), hsl(calc(var(--ftone) + 190deg) 92% 68%), hsl(calc(var(--ftone) + 300deg) 95% 70%), hsl(var(--ftone) 95% 70%));opacity:calc(.22 + var(--near) * .68);-webkit-mask-composite:xor;animation:pg-rim 9s var(--fdelay,0s) ease-in-out infinite;padding:1.5px;animation-play-state:paused;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.pg-foils[data-lit] .pg-foil-rim{animation-play-state:running}@keyframes pg-rim{0%,62%{filter:hue-rotate()brightness()}74%{filter:hue-rotate(40deg)brightness(1.35)}to{filter:hue-rotate()brightness()}}.pg-foil-name{z-index:3;color:#12140f;letter-spacing:-.01em;font-size:15px;font-weight:500;position:relative}.pg-foils--small .pg-foil-name{font-size:12.5px}.pg-foil-kind{z-index:3;font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.12em;text-transform:uppercase;color:#12140f8c;font-size:9.5px;position:relative}.pg-hatch{border:1px solid var(--pg-line-strong);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0818106b;border-radius:10px;padding:18px 20px 20px}.pg-hatch-cell{flex:none;width:84px;height:84px}.pg-hatch-box{fill:#fbfaf8f0;stroke:#12140f40;stroke-width:1px}.pg-hatch-line{stroke:#2347c5;stroke-width:3.4px;stroke-linecap:round}.pg-range{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px}.pg-range::-webkit-slider-runnable-track{background:#ffffff4d;border-radius:2px;height:3px}.pg-range::-moz-range-track{background:#ffffff4d;border-radius:2px;height:3px}.pg-range::-webkit-slider-thumb{appearance:none;background:var(--pg-ink);width:20px;height:20px;transition:transform .16s var(--pg-settle);border:0;border-radius:50%;margin-top:-8.5px;box-shadow:0 2px 6px #06140d80}.pg-range::-moz-range-thumb{background:var(--pg-ink);border:0;border-radius:50%;width:20px;height:20px}.pg-range:active::-webkit-slider-thumb{transform:scale(.92)}.pg-range:focus-visible{outline:2px solid var(--pg-ink);outline-offset:6px;border-radius:4px}.pg-go{color:#fbfaf8;transition:background-color .18s var(--pg-settle), box-shadow .18s var(--pg-settle);background:#12140f;border-radius:999px;align-items:center;gap:10px;padding:14px 22px;font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;box-shadow:0 8px 18px #06140d57}.pg-go:hover{background:#23291f;box-shadow:0 4px 10px #06140d52}.pg-go:focus-visible{outline-offset:3px;outline:2px solid #2347c5}@media (prefers-reduced-motion:reduce){.pg-canvas{opacity:1}}.pg-card{background:var(--pg-paper);color:var(--pg-text);transition:box-shadow .24s var(--pg-settle), transform .24s var(--pg-settle);border-radius:4px;position:relative;box-shadow:inset 0 1px #ffffff80,0 10px 22px #06140d52,0 2px 6px #06140d3d}.pg-card:hover,.pg-card:focus-within{transform:scale(.997);box-shadow:inset 0 1px #ffffff80,0 6px 14px #06140d4d,0 1px 4px #06140d38}.pg-tape{width:92px;height:22px;transform:translateX(-50%) rotate(var(--pg-tape,-2deg));pointer-events:none;background:#ffffff6b;border-left:1px solid #ffffff80;border-right:1px solid #ffffff80;position:absolute;top:-11px;left:50%;box-shadow:0 1px 2px #06140d40}.pg-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px 20px;display:flex}.pg-mark{border-radius:11px;flex:none;width:46px;height:46px}@media (min-width:768px){.pg-mark{border-radius:13px;width:54px;height:54px}}.pg-go--head{padding:11px 18px;font-size:14px}.pg-hand{color:var(--pg-ink);transform:rotate(var(--pg-rot,-2deg));font-family:Caveat,Bradley Hand,Segoe Print,cursive;font-size:22px;line-height:1.25}.pg-pin{align-items:center;gap:10px;display:inline-flex}.pg-pin:before{content:"";background:var(--pg-ink);border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 0 4px #ffe1002e}.pg-screen{background:#f7f3ec;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px #06140d57,0 0 0 1px #06140d2e}.pg-screen--desk{background:#fff;border-radius:10px;box-shadow:0 14px 30px #06140d4d,0 0 0 1px #06140d29}.pg-strip{scroll-snap-type:x mandatory;scrollbar-width:thin;grid-auto-columns:minmax(184px,1fr);grid-auto-flow:column;gap:18px;padding-bottom:6px;display:grid;overflow-x:auto}.pg-strip>*{scroll-snap-align:start}.pg-chip{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted);border:1px solid #12140f29;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:10.5px;display:inline-flex}.pg-chip[data-live]:before{content:"";background:#2347c5;border-radius:50%;width:6px;height:6px}.pg-num{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.1em;color:#eaf1ec99;font-size:11px}body:has([data-playground]) nav[aria-label=Main]{--nav-ink:#eaf1ec;box-shadow:inset 0 0 0 1px #ffffff24;background:#0a1c1394!important}:is(body:has([data-playground]) nav[aria-label=Main] a,body:has([data-playground]) nav[aria-label=Main] button){color:#eaf1ec}body:has([data-playground]) [data-cursor-visible]>div{background:var(--pg-ink)!important}.pg-props{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;display:grid}@media (min-width:640px){.pg-props{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px}}.pg-props>li:first-child{--pg-drop:0px}.pg-props>li:nth-child(2){--pg-drop:34px}.pg-props>li:nth-child(3){--pg-drop:12px}.pg-props>li:nth-child(4){--pg-drop:46px}@media (min-width:640px){.pg-props>li{transform:translateY(var(--pg-drop,0))}}@media (max-width:767px){.pg-hand{font-size:19px}.pg-note-mobile{padding-left:52px}.pg-card{--pg-rot:0deg}}@media (prefers-reduced-motion:reduce){.pg-card,.pg-prop{transition:none;--pg-rot:0deg!important}.pg-card:hover,.pg-card:focus-within,.pg-prop:hover,.pg-prop:focus-visible{transform:none}.pg-prop-label,.pg-switch-track,.pg-switch-track:after{transition:none}}