[data-sketch]{--sk-bezel:#0b0c0a;--sk-bezel-edge:#ffffff14;--sk-notch:#000;--sk-lens:#11131a;--sk-lens-glint:#7896ff59;--sk-wall-1:#eef2ec;--sk-wall-2:#f7f5f0;--sk-wall-3:#dfe8e1;--sk-menubar:#ffffff9e;--sk-os-ink:#1d1d1f;--sk-os-ink-2:#1d1d1f8f;--sk-os-ink-3:#1d1d1f52;--sk-window:#fff;--sk-window-edge:#00000017;--sk-window-bar:#f6f6f4;--sk-win-title-off:#0000004d;--sk-select:#5c2bc71f;--sk-quote:#1d1d1f0d;--sk-bubble:#efefec;--sk-lit:#5c2bc724;--sk-lit-2:#5c2bc73d;--sk-menu:#fafaf9;--sk-on-black:#f5f5f7;--sk-on-black-2:#f5f5f79e;--sk-on-black-3:#f5f5f75c;--sk-on-black-fill:#ffffff1a;--sk-on-black-fill-2:#ffffff2e;--sk-pill:#111113;--sk-accent:#5c2bc7;--sk-accent-2:#7b55e3;--sk-accent-3:#a58cf2;--sk-tl-red:#ff5c60;--sk-tl-amber:#fac800;--sk-tl-green:#35c759;--sk-tl-off:#00000026;--sk-wall-fallback:#2c6fae;--sk-menu-ink:#fff;--sk-settle:var(--pg-settle,cubic-bezier(.2, .7, .3, 1));--sk-sink:cubic-bezier(.4, 0, .8, .4);--sk-os:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif}.sk-wrap{width:100%;max-width:1240px;margin-inline:auto;padding:104px 20px 96px}@media (min-width:768px){.sk-wrap{padding:136px 40px 112px}}.sk-back{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-on-mat-2);transition:color .16s var(--sk-settle);align-self:flex-start;align-items:center;gap:8px;font-size:12px;text-decoration:none;display:inline-flex;position:relative}.sk-back:after{content:"";height:44px;position:absolute;top:50%;left:-8px;right:-8px;translate:0 -50%}.sk-back:hover,.sk-back:focus-visible{color:var(--pg-on-mat)}.sk-eyebrow{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-on-mat-2);font-size:12px}.sk-title{letter-spacing:-.035em;color:var(--pg-on-mat);text-wrap:balance;font-size:clamp(40px,6.4vw,76px);font-weight:500;line-height:.95}.sk-line{max-width:52ch;color:var(--pg-on-mat-2);text-wrap:pretty;font-size:17px;line-height:1.55}@media (min-width:768px){.sk-line{font-size:19px}}.sk-device{background:var(--sk-bezel);box-shadow:0 0 0 1px var(--sk-bezel-edge) inset, 0 22px 48px #06140d73, 0 4px 12px #06140d4d;border-radius:clamp(14px,1.9vw,26px);padding:clamp(6px,.9vw,12px);position:relative}.sk-screen{aspect-ratio:1512/982;--u:calc(100cqw / 1512);border-radius:calc(18.5 * var(--u)) calc(18.5 * var(--u)) 0 0;font-family:var(--sk-os);color:var(--sk-os-ink);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;touch-action:none;cursor:default;background:var(--sk-notch);position:relative;overflow:hidden;container-type:inline-size}.sk-wall{background:var(--sk-wall-fallback) center / cover no-repeat;background-image:image-set("/playground/sketches/os/tahoe-day-1512.webp" 1x,"/playground/sketches/os/tahoe-day-3024.webp" 2x);position:absolute;inset:0}.sk-menubar{height:calc(32 * var(--u));padding:0 calc(21 * var(--u)) 0 calc(21 * var(--u));font-size:calc(13 * var(--u));letter-spacing:-.006em;z-index:30;color:var(--sk-menu-ink);justify-content:space-between;align-items:center;display:flex;position:absolute;inset:0 0 auto}.sk-menubar[data-ink=dark]{color:var(--sk-os-ink)}.sk-menus{align-items:center;gap:calc(20 * var(--u));display:flex}.sk-menus b{font-weight:700}.sk-apple{margin-right:calc(0 * var(--u))}.sk-status{align-items:center;gap:calc(18 * var(--u));display:flex}.sk-clock{font-variant-numeric:tabular-nums}.sk-sym{background-color:currentColor;flex:none;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sk-ms{flex:none;display:inline-block}.sk-file-icon{-webkit-user-drag:none;display:block}.sk-hw-notch{top:calc(-1 * var(--u));left:calc(661 * var(--u));width:calc(193 * var(--u));height:calc(33 * var(--u));z-index:60;pointer-events:none;position:absolute}.sk-hw-notch svg{width:100%;height:100%;fill:var(--sk-notch);display:block}.sk-lens{left:calc(92.5 * var(--u));top:calc(8 * var(--u));width:calc(8 * var(--u));height:calc(8 * var(--u));background:radial-gradient(circle at 38% 36%, var(--sk-lens-glint), var(--sk-lens) 62%);border-radius:50%;position:absolute}.sk-win{background:var(--sk-window);box-shadow:0 0 0 calc(.5 * var(--u)) var(--sk-window-edge), 0 calc(22 * var(--u)) calc(48 * var(--u)) #00000047;position:absolute;overflow:hidden}.sk-win-title{font-size:calc(13 * var(--u));letter-spacing:-.006em;color:var(--sk-os-ink);pointer-events:none;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset:0 0 auto}.sk-lights{gap:calc(9 * var(--u));z-index:2;display:flex;position:absolute}.sk-lights i{width:calc(14 * var(--u));height:calc(14 * var(--u));box-shadow:0 0 0 calc(.5 * var(--u)) #0000001f inset;border-radius:50%}.sk-lights i:first-child{background:var(--sk-tl-red)}.sk-lights i:nth-child(2){background:var(--sk-tl-amber)}.sk-lights i:nth-child(3){background:var(--sk-tl-green)}.sk-lights[data-inactive] i{background:var(--sk-tl-off)}.sk-win[data-inactive] .sk-win-title{color:var(--sk-win-title-off)}.sk-cursor{width:calc(28 * var(--u));height:calc(40 * var(--u));z-index:90;pointer-events:none;will-change:transform;transition:background-size .12s var(--sk-settle), background-position .12s var(--sk-settle);background:url(/playground/sketches/os/cursor-arrow.png) 0 0/100% 100% no-repeat;position:absolute;top:0;left:0}.sk-cursor[data-press]{background-size:88% 88%;background-position:calc(.6 * var(--u)) calc(.6 * var(--u))}.sk-strip{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sk-chip{min-height:36px;color:var(--pg-on-mat-2);cursor:pointer;transition:background-color .16s var(--sk-settle), color .16s var(--sk-settle), border-color .16s var(--sk-settle);background:#eaf1ec12;border:1px solid #eaf1ec24;border-radius:999px;align-items:center;gap:8px;padding:0 14px 0 12px;font-size:13px;line-height:1;display:inline-flex}.sk-chip:hover{color:var(--pg-on-mat);background:#eaf1ec21}.sk-chip[aria-current=step]{background:var(--pg-paper);border-color:var(--pg-paper);color:var(--pg-text)}.sk-chip-n{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.08em;opacity:.6;font-size:10.5px}.sk-play{background:var(--pg-ink);min-height:40px;color:var(--pg-text);cursor:pointer;transition:transform .16s var(--sk-settle), box-shadow .16s var(--sk-settle);border-radius:999px;align-items:center;gap:10px;padding:0 18px 0 14px;font-size:14px;font-weight:500;display:inline-flex;box-shadow:0 6px 16px #06140d59}.sk-play:hover{transform:translateY(1px);box-shadow:0 3px 10px #06140d4d}.sk-play svg{width:14px;height:14px}.sk-note{min-height:1.55em;color:var(--pg-on-mat-2);font-size:15px;line-height:1.55}.sk-note b{color:var(--pg-on-mat);font-weight:500}.sk-card-grid{grid-template-columns:1fr;gap:28px 40px;display:grid}@media (min-width:768px){.sk-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.sk-label{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-muted);font-size:11px}.sk-body{color:var(--pg-text);text-wrap:pretty;font-size:16px;line-height:1.55}.sk-credit{color:var(--pg-muted);max-width:70ch;font-size:13px;line-height:1.5}.sk-credit a{color:inherit;text-underline-offset:3px}html[data-sketch-frame] body>footer,html[data-sketch-frame] body>[data-cursor-visible],html[data-sketch-frame] [data-sketch-chrome],html[data-sketch-frame] .pg-rule,html[data-sketch-frame] nextjs-portal{display:none!important}html[data-sketch-frame] body>header:has(>nav[aria-label=Main]){display:none!important}html[data-sketch-frame] body{background:var(--sk-bezel,#0b0c0a)}html[data-sketch-frame] [data-sketch]{background:var(--sk-bezel)}html[data-sketch-frame] .sk-wrap{max-width:none;padding:0}html[data-sketch-frame] .sk-stage-slot{margin:0}html[data-sketch-frame] .sk-stage-slot .sk-device{max-width:none}html[data-sketch-frame] .sk-device{box-shadow:none;border-radius:0;padding:0}html[data-sketch-frame] .sk-screen{width:100vw}@media (prefers-reduced-motion:reduce){.sk-back,.sk-chip,.sk-play,.sk-cursor{transition:none}}.sk-list{gap:56px;padding:0;list-style:none;display:grid}@media (min-width:900px){.sk-list{gap:72px}}.sk-entry{color:inherit;border-radius:18px;gap:22px;text-decoration:none;display:grid}@media (min-width:900px){.sk-entry{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:48px}}.sk-entry .sk-device{transition:translate .24s var(--sk-settle), box-shadow .24s var(--sk-settle)}.sk-entry:hover .sk-device{translate:0 -3px}.sk-entry:focus-visible{outline:2px solid var(--pg-ink);outline-offset:8px}.sk-thumb{border-radius:clamp(8px,1.1vw,15px);line-height:0;overflow:hidden}.sk-entry-name{letter-spacing:-.028em;color:var(--pg-on-mat);text-wrap:balance;font-size:clamp(28px,3.4vw,42px);font-weight:500;line-height:1.02}.sk-entry-go{font-family:var(--font-mono), ui-monospace, monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-on-mat-2);transition:color .16s var(--sk-settle);margin-top:6px;font-size:12px}.sk-entry:hover .sk-entry-go{color:var(--pg-on-mat)}@media (prefers-reduced-motion:reduce){.sk-entry .sk-device{transition:none}.sk-entry:hover .sk-device{translate:none}}.sk-stage-slot .sk-device{max-width:calc(153.972svh - 354.134px);margin-inline:auto}.sk-cue{flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:6px;display:flex}.sk-try{color:var(--pg-on-mat-2);text-wrap:pretty;max-width:60ch;font-size:15px;line-height:1.5}