.alk-playground{--play-rule:var(--alk-rule,#ccc);--play-paper:var(--alk-paper,#fff);--play-ink:var(--alk-ink,#111);--play-muted:var(--alk-muted,#5e5e5e);color:var(--play-ink);border:1px solid var(--play-rule);background:var(--play-paper);font-family:var(--alk-sans,system-ui, sans-serif);container-type:inline-size}.alk-playground__header,.alk-playground__parameters-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.alk-playground__header{border-bottom:1px solid var(--play-rule);padding:.5rem .7rem}.alk-playground h2,.alk-playground .alk-playground__parameters-head h3{margin:0}.alk-playground .alk-playground__header h2{font-size:.95rem}.alk-playground .alk-playground__parameters-head h3{font:.72rem/1 var(--alk-mono,ui-monospace, monospace);letter-spacing:.06em;text-transform:uppercase}.alk-playground button,.alk-playground input,.alk-playground textarea,.alk-playground select{font:inherit;color:inherit}.alk-playground button{border:1px solid var(--play-rule);cursor:pointer;background:0 0;min-height:2rem;padding:.25rem .45rem}.alk-playground button:hover{background:var(--play-ink);color:var(--play-paper)}.alk-playground button:focus-visible,.alk-playground input:focus-visible,.alk-playground textarea:focus-visible,.alk-playground select:focus-visible,.alk-playground pre:focus-visible{outline:2px solid var(--alk-ink-cobalt,#1982f2);outline-offset:2px}.alk-playground__grid{grid-template-columns:minmax(0,1fr) minmax(13rem,16rem);grid-template-areas:"preview parameters""source parameters";display:grid}.alk-playground__preview{grid-area:preview}.alk-playground__parameters{border-left:1px solid var(--play-rule);grid-area:parameters;max-height:38rem;overflow:auto}.alk-playground__source{border-top:1px solid var(--play-rule);grid-area:source;min-width:0}.alk-playground__parameters-head{border-bottom:1px solid var(--play-rule);padding:.45rem .55rem}.alk-playground iframe{background:color-mix(in srgb, var(--play-paper) 92%, var(--play-ink));border:0;width:100%;min-height:17rem;display:block}.alk-playground__presets{flex-wrap:wrap;gap:.3rem;padding:.45rem .55rem 0;display:flex}.alk-playground__controls{gap:.35rem;padding:.5rem .55rem .6rem;display:grid}.alk-playground__control{font:.72rem/1.25 var(--alk-mono,ui-monospace, monospace);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:.35rem .45rem;display:grid}.alk-playground__control-label{overflow-wrap:anywhere;min-width:0}.alk-playground__control--multiline{grid-template-columns:1fr;align-items:start;gap:.25rem}.alk-playground__control input:not([type=checkbox]),.alk-playground__control textarea,.alk-playground__control select{box-sizing:border-box;border:1px solid var(--play-rule);background:var(--play-paper);border-radius:0;width:100%;min-height:2rem;padding:.28rem .35rem}.alk-playground__control input[type=checkbox]{justify-self:start;block-size:1.1rem;inline-size:1.1rem;margin:0}.alk-playground__control textarea{resize:vertical;min-height:2rem;max-height:7rem;line-height:1.35}.alk-playground__control--multiline textarea,.alk-playground__control textarea:focus{min-height:4.5rem}.alk-playground__control-help{color:var(--play-muted);grid-column:1/-1;display:none}.alk-playground__control:hover .alk-playground__control-help,.alk-playground__control:focus-within .alk-playground__control-help{display:block}.alk-playground__control [data-control-error]{color:var(--alk-ink-vermilion,#e25312);grid-column:1/-1}.alk-playground .alk-playground__source .alk-code{margin:0}.alk-playground .alk-playground__source .alk-code-caption{padding:.4rem .55rem}.alk-playground .alk-playground__source .alk-code-pre{max-height:13rem;margin:0;padding:.55rem;overflow:auto}.alk-playground__status{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.alk-playground__status[data-state=error]{clip:auto;white-space:normal;border-bottom:1px solid var(--play-rule);block-size:auto;inline-size:auto;color:var(--alk-ink-vermilion,#e25312);font:.72rem/1.35 var(--alk-mono,ui-monospace, monospace);margin:0;padding:.4rem .55rem;display:block;position:static;overflow:visible}.alk-playground__nojs{border-top:1px solid var(--play-rule);color:var(--play-muted);font:.72rem/1.35 var(--alk-mono,ui-monospace, monospace);margin:0;padding:.45rem .55rem}@container (width<=640px){.alk-playground__grid{grid-template-columns:1fr;grid-template-areas:"preview""parameters""source"}.alk-playground__parameters{border-left:0;border-top:1px solid var(--play-rule);max-height:none}.alk-playground iframe{min-height:15rem}}@media (pointer:coarse){.alk-playground button,.alk-playground input:not([type=checkbox]),.alk-playground select{min-height:2.75rem}.alk-playground__control textarea{min-height:4.5rem}}.alk-playground--focus .alk-playground__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview""source""parameters"}.alk-playground--focus .alk-playground__parameters{border-left:0;border-top:1px solid var(--play-rule)}.alk-playground--focus .alk-playground__grid>details>summary{cursor:pointer;font:.75rem/1.4 var(--alk-sans,system-ui, sans-serif);color:var(--play-muted);padding:.55rem .7rem}.alk-playground--focus .alk-playground__grid>details>summary:focus-visible{outline:2px solid var(--alk-ink-cobalt,#1982f2);outline-offset:-2px}.alk-playground--focus .alk-playground__grid>details{border-radius:0;margin:0;padding:0}.alk-playground--focus iframe{min-height:0}@container (width>=540px){.alk-playground--focus .alk-playground__controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}.alk-playground--focus .alk-playground__control--multiline{grid-column:1/-1}}.alk-playground--focus .alk-playground__presets{margin:0}.alk-playground--focus [data-playground-reset]{margin-left:auto}