@layer tokens{.playground-page{--playground-editor-bg:#fbfcff;--playground-editor-panel:#f1f3f9;--playground-editor-gutter:#f1f3f9;--playground-editor-text:#172036;--playground-editor-line-number:#58647b;--playground-editor-border:#d9deea;--playground-editor-active-line:#3946d612;--playground-editor-selection:#3946d633;--playground-editor-caret:#172036;--playground-syntax-keyword:#5a2ca0;--playground-syntax-name:#0b6480;--playground-syntax-function:#1c4ca1;--playground-syntax-constant:#8b3d00;--playground-syntax-definition:#2037a5;--playground-syntax-type:#7a3c00;--playground-syntax-operator:#8a2755;--playground-syntax-comment:#5c687d;--playground-syntax-heading:#2435a6;--playground-syntax-atom:#8a2755;--playground-syntax-string:#1c6a45;--playground-syntax-invalid:#b42318}:root[data-theme=dark] .playground-page{--playground-editor-bg:#0d1426;--playground-editor-panel:#151e34;--playground-editor-gutter:#111a2f;--playground-editor-text:#e7ecf8;--playground-editor-line-number:#91a0ba;--playground-editor-border:#2b3855;--playground-editor-active-line:#91a0ff1a;--playground-editor-selection:#6fdce83d;--playground-editor-caret:#fff;--playground-syntax-keyword:#c9b3ff;--playground-syntax-name:#8ddfea;--playground-syntax-function:#aeb9ff;--playground-syntax-constant:#ffc887;--playground-syntax-definition:#bac3ff;--playground-syntax-type:#f6c47b;--playground-syntax-operator:#f3a9c6;--playground-syntax-comment:#a8b3c9;--playground-syntax-heading:#bec6ff;--playground-syntax-atom:#f3a9c6;--playground-syntax-string:#91ddb5;--playground-syntax-invalid:#ffaaa5}}@layer pages{.playground-hero{color:var(--color-on-ink);background:linear-gradient(112deg,#0d152efa,#080e20f5),repeating-linear-gradient(90deg,#0000 0 4.95rem,#ffffff0d 5rem);border-bottom:1px solid #2b3859;padding-block:clamp(3.75rem,8vw,7rem);position:relative;overflow:hidden}.playground-hero:after{content:"";background:linear-gradient(90deg,#0000,#586bea,#51cedb,#0000);height:1px;position:absolute;inset:auto 0 0}.playground-hero__content{max-width:62rem}.playground-hero .eyebrow{color:#7fe1eb}.playground-hero h1{color:#fff;max-width:18ch;font-size:var(--step-4);margin-top:.75rem}.playground-hero__content>p:not(.eyebrow){max-width:48rem;color:var(--color-on-ink-soft);font-size:var(--step-1);margin-top:1.15rem}.playground-hero ul{color:#d6dded;flex-wrap:wrap;gap:.75rem 1.35rem;margin-top:1.75rem;font-size:.88rem;list-style:none;display:flex}.playground-hero li{align-items:center;gap:.5rem;display:inline-flex}.playground-hero li:before{content:"";background:#6fe0ea;border-radius:50%;width:.5rem;height:.5rem}.playground-page__workspace{z-index:1;padding-bottom:var(--space-8);margin-top:clamp(-2rem,-3vw,-1rem);position:relative}.playground-guide__steps{counter-reset:playground-step;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem;list-style:none;display:grid}.playground-guide__steps li{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);counter-increment:playground-step;min-width:0;padding:1.4rem}.playground-guide__steps li:before{content:"0" counter(playground-step);color:var(--color-accent);font-family:var(--font-mono);font-size:.78rem;font-weight:800}.playground-guide__steps strong,.playground-guide__steps span{display:block}.playground-guide__steps strong{color:var(--color-heading);margin-top:1rem}.playground-guide__steps span{color:var(--color-text-soft);margin-top:.45rem;font-size:.92rem}.playground-explainer-grid,.playground-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem);display:grid}.playground-explainer-grid h2,.playground-detail-grid h2,.playground-next h2{font-size:var(--step-2);margin-top:.5rem}.playground-explainer-grid div>p:not(.eyebrow),.playground-detail-grid article>p:not(.eyebrow),.playground-next__inner>div>p:not(.eyebrow){color:var(--color-text-soft);margin-top:.9rem}.playground-detail-grid article{border-top:2px solid var(--color-border);padding-top:1.4rem}.playground-detail-grid .text-link{margin-top:1rem;display:inline-flex}.playground-next{padding-top:0}.playground-next__inner{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-sm);padding:clamp(1.5rem,5vw,3rem)}.playground-next ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.5rem;list-style:none;display:grid}.playground-next li a{border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:100%;color:var(--color-heading);justify-content:space-between;gap:1rem;padding:1rem;font-weight:720;text-decoration:none;display:flex}.playground-next li a:hover{border-color:var(--color-accent);color:var(--color-accent)}.playground-fallback{color:var(--color-text-soft);margin-top:1.25rem;font-size:.9rem}}@layer components{.playground-workspace{border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);background:var(--color-surface);min-width:0;box-shadow:var(--shadow-lg);overflow:hidden}.playground-workspace [hidden]{display:none!important}.playground-notices:empty{display:none}.playground-notice{border-bottom:1px solid var(--color-border);background:var(--color-accent-soft);color:var(--color-text);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;font-size:.88rem;display:flex}.playground-notice--warning{border-color:color-mix(in srgb, var(--color-amber) 32%, transparent);background:var(--color-amber-soft)}.playground-notice>div,.playground-notice strong,.playground-notice span{min-width:0}.playground-notice strong,.playground-notice span{display:block}.playground-notice strong{color:var(--color-heading)}.playground-notice span{color:var(--color-text-soft);margin-top:.15rem}.playground-notice button{border:1px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-surface);min-height:2.75rem;color:var(--color-accent);cursor:pointer;flex:none;padding:.55rem .85rem;font-weight:750}.playground-toolbar{border-bottom:1px solid var(--color-border);background:var(--color-surface-raised);grid-template-columns:minmax(15rem,1fr) minmax(18rem,auto);align-items:center;gap:1rem 2rem;padding:1rem;display:grid}.playground-starter-control{grid-template-columns:auto minmax(12rem,20rem) minmax(0,1fr);align-items:center;gap:.45rem .75rem;min-width:0;display:grid}.playground-starter-control label{color:var(--color-heading);font-size:.82rem;font-weight:750}.playground-starter-control select{border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);min-width:0;min-height:2.75rem;color:var(--color-text);font:inherit;padding:.55rem 2.25rem .55rem .75rem;font-size:.88rem}.playground-starter-control p{min-width:0;color:var(--color-text-soft);font-size:.8rem;line-height:1.45}.playground-related-link{grid-column:2/-1;width:fit-content;font-size:.78rem}.playground-actions{flex-wrap:wrap;justify-content:flex-end;gap:.55rem;display:flex}.playground-action,.playground-utility-button,.playground-auto-run{border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);min-height:2.75rem;color:var(--color-text);justify-content:center;align-items:center;gap:.45rem;font-size:.84rem;font-weight:720;display:inline-flex}.playground-workspace :where(.playground-action,.playground-utility-button,.playground-notice button,.playground-mobile-switcher button,.playground-file-tabs button,select,input):focus{outline:3px solid var(--color-focus);outline-offset:3px}.playground-action,.playground-utility-button{cursor:pointer;padding:.55rem .8rem}.playground-action--run{color:#fff;background:#3946d6;border-color:#3946d6}.playground-action--run:hover{background:#2835b9;border-color:#2835b9}:root[data-theme=dark] .playground-action--run{background:#4f5dcc;border-color:#5969dc}:root[data-theme=dark] .playground-action--run:hover{background:#5969dc;border-color:#7080ed}.playground-action:disabled,.playground-utility-button:disabled,.playground-auto-run:has(input:disabled),.playground-notice button:disabled,.playground-mobile-switcher button:disabled,.playground-file-tabs button:disabled{cursor:not-allowed;opacity:.55}.playground-auto-run{cursor:pointer;padding:.4rem .7rem}.playground-auto-run input{width:1.1rem;height:1.1rem;accent-color:var(--color-accent)}.playground-shortcut{color:var(--color-text-faint);text-align:right;grid-column:1/-1;font-size:.76rem}kbd{border:1px solid var(--color-border-strong);background:var(--color-surface-subtle);min-width:1.55rem;color:var(--color-heading);font-family:var(--font-mono);border-bottom-width:2px;border-radius:.3rem;justify-content:center;padding:.1rem .3rem;font-size:.72rem;display:inline-flex}.playground-mobile-switcher{display:none}.playground-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;display:grid}.playground-pane{min-width:0}.playground-output-pane{border-left:1px solid var(--color-border);background:var(--color-surface-subtle)}.playground-pane__header,.playground-console__header{justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem;display:flex}.playground-pane__header{border-bottom:1px solid var(--color-border);min-height:5rem}.playground-pane__header h2,.playground-console__header h3{margin-top:.2rem;font-size:1rem}.playground-utility-button:hover,.playground-action:not(.playground-action--run):hover,.playground-mobile-switcher button:hover,.playground-file-tabs button:hover{border-color:var(--color-accent);color:var(--color-accent)}.playground-file-tabs{border-bottom:1px solid var(--playground-editor-border);background:var(--playground-editor-panel);scrollbar-width:thin;display:flex;overflow-x:auto}.playground-file-tabs button{border:0;border-right:1px solid var(--playground-editor-border);min-width:max-content;min-height:2.9rem;color:var(--playground-editor-line-number);font:inherit;cursor:pointer;background:0 0;padding:.65rem 1rem;font-size:.82rem;font-weight:720;position:relative}.playground-file-tabs button[aria-selected=true]{background:var(--playground-editor-bg);color:var(--playground-editor-text)}.playground-file-tabs button[aria-selected=true]:after{border-radius:var(--radius-pill);background:var(--color-accent);content:"";height:.18rem;position:absolute;bottom:0;left:.75rem;right:.75rem}.playground-editor-panel{background:var(--playground-editor-bg);min-width:0}.playground-editor-label{color:var(--playground-editor-text);letter-spacing:.06em;text-transform:uppercase;padding:.65rem 1rem 0;font-size:.76rem;font-weight:800}.playground-editor-host{background:var(--playground-editor-bg);min-width:0;height:clamp(26rem,54vh,40rem);overflow:hidden}.playground-editor-host:focus-within{z-index:1;outline:3px solid var(--color-focus);outline-offset:-3px;position:relative}.playground-editor-loading{color:var(--playground-editor-line-number);padding:1rem}.playground-editor-help{border-top:1px solid var(--playground-editor-border);background:var(--playground-editor-panel);color:var(--playground-editor-line-number);padding:.7rem 1rem;font-size:.73rem}.playground-preview-frame{border-bottom:1px solid var(--color-border);background:linear-gradient(45deg, var(--color-border) 25%, transparent 25%) 0 0 / 1rem 1rem, linear-gradient(45deg, transparent 75%, var(--color-border) 75%) 0 0 / 1rem 1rem, var(--color-surface);min-height:clamp(25rem,48vh,34rem);position:relative;overflow:hidden}.playground-preview-mount,.playground-preview-mount iframe{width:100%;height:100%;position:absolute;inset:0}.playground-preview-mount iframe{background:#fff;border:0}.playground-preview-placeholder{background:color-mix(in srgb, var(--color-surface) 94%, transparent);color:var(--color-text-soft);text-align:center;place-content:center;gap:.75rem;padding:2rem;display:grid;position:absolute;inset:0}.playground-preview-placeholder svg{color:var(--color-accent);margin-inline:auto}.playground-run-status{border-bottom:1px solid var(--color-border);background:var(--color-surface);min-height:2.8rem;color:var(--color-text-soft);align-items:center;padding:.55rem 1rem;font-size:.78rem;display:flex}.playground-console{background:var(--color-surface)}.playground-console__header{border-bottom:1px solid var(--color-border)}.playground-console__entries{scrollbar-width:thin;max-height:18rem;list-style:none;overflow:auto}.playground-console__entry,.playground-console__empty{border-bottom:1px solid var(--color-border);padding:.75rem 1rem}.playground-console__empty{color:var(--color-text-faint);font-size:.82rem}.playground-console__entry[data-console-level=warn]{border-left:4px solid var(--color-amber);background:var(--color-amber-soft)}.playground-console__entry[data-console-level=error]{background:color-mix(in srgb, #b42318 8%, var(--color-surface));border-left:4px solid #b42318}:root[data-theme=dark] .playground-console__entry[data-console-level=error]{border-left-color:#ffaaa5}.playground-console__meta{color:var(--color-text-faint);justify-content:space-between;align-items:baseline;gap:1rem;font-size:.7rem;display:flex}.playground-console__meta strong{color:var(--color-heading);text-transform:uppercase;font-size:.72rem}.playground-console__entry pre{max-width:100%;color:var(--color-text);font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.35rem;font-size:.78rem;line-height:1.5;overflow-x:auto}.playground-noscript{border:1px solid var(--color-amber);border-radius:var(--radius-md);background:var(--color-amber-soft);margin:1rem;padding:1rem}.playground-noscript h2{font-size:1rem}.playground-noscript p{margin-top:.4rem}}@layer utilities{@media (width<=64rem){.playground-toolbar{grid-template-columns:1fr}.playground-actions{justify-content:flex-start}.playground-shortcut{text-align:left}}@media (width<=52rem){.playground-mobile-switcher{border-bottom:1px solid var(--color-border);background:var(--color-surface-subtle);grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;padding:.5rem;display:grid}.playground-mobile-switcher button{border-radius:var(--radius-sm);min-height:2.75rem;color:var(--color-text-soft);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;padding:.55rem .75rem;font-weight:750}.playground-mobile-switcher button[aria-pressed=true]{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-heading);box-shadow:var(--shadow-sm)}.playground-grid{display:block}.playground-output-pane{border-left:0}.playground-workspace[data-mobile-view=code] [data-workspace-pane=preview],.playground-workspace[data-mobile-view=preview] [data-workspace-pane=code]{display:none}.playground-guide__steps,.playground-next ul{grid-template-columns:repeat(2,minmax(0,1fr))}.playground-explainer-grid,.playground-detail-grid{grid-template-columns:1fr;gap:2.5rem}}@media (width<=43rem){.playground-page__workspace{width:min(calc(100% - 1rem), var(--container))}.playground-workspace{border-radius:var(--radius-lg)}.playground-notice{flex-direction:column;align-items:stretch}.playground-notice button{width:100%}.playground-starter-control{grid-template-columns:1fr}.playground-starter-control select,.playground-starter-control p,.playground-related-link{grid-column:1}.playground-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.playground-action,.playground-auto-run{width:100%}.playground-pane__header,.playground-console__header{flex-direction:column;align-items:flex-start}.playground-pane__header .playground-utility-button,.playground-console__header .playground-utility-button{width:100%}.playground-editor-host{height:min(32rem,58vh);min-height:25rem}.playground-preview-frame{min-height:28rem}.playground-guide__steps,.playground-next ul{grid-template-columns:1fr}}@media (width<=30rem){.playground-toolbar,.playground-pane__header,.playground-console__header,.playground-run-status,.playground-console__entry,.playground-console__empty{padding-inline:.75rem}}@media (prefers-reduced-motion:reduce){.playground-page *{scroll-behavior:auto!important}}}