.brand-playground{padding-block:clamp(56px,7vw,112px);border-block:1px solid rgb(var(--c-line));background:rgb(var(--c-ink));scroll-margin-top:100px}.brand-playground-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:end;margin-bottom:40px}.brand-playground-intro h2{margin-top:18px;font:500 clamp(32px,4.2vw,62px)/1.07 var(--font-display);letter-spacing:-.045em}.brand-playground-intro>p{max-width:48ch;font:400 16px/1.7 var(--font-body);color:rgb(var(--c-muted))}.brand-playground-stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:stretch}.brand-playground-sample{padding:clamp(28px,4vw,60px);border:1px solid rgb(var(--c-line));border-radius:12px;background:rgb(var(--c-surface-2));display:flex;flex-direction:column;align-items:flex-start;min-width:0}.brand-playground-sample-label{font:500 11px/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.13em;color:rgb(var(--c-periwinkle))}.brand-playground-sample-title{margin-top:32px;font:500 clamp(32px,3.6vw,54px)/1.1 var(--font-display);letter-spacing:-.04em}.brand-playground-sample-copy{max-width:34ch;margin:24px 0 30px;font:400 15px/1.7 var(--font-body);color:rgb(var(--c-muted))}.brand-playground-sample .btn-primary{max-width:100%}.brand-playground-specimen{display:flex;align-items:center;gap:8px;width:100%;margin-top:auto;padding-top:42px}.brand-playground-specimen>span{margin-right:auto;font:400 52px/1 var(--font-display);color:rgb(var(--c-paper))}.brand-playground-specimen>i{width:24px;height:24px;border-radius:50%;background:rgb(var(--c-accent))}.brand-playground-specimen>i:nth-of-type(2){background:rgb(var(--c-paper))}.brand-playground-specimen>i:nth-of-type(3){background:rgb(var(--c-ink));border:1px solid rgb(var(--c-line))}.brand-playground-controls{min-width:0}.brand-playground fieldset{border:0;padding:0 0 28px;margin:0;min-width:0}.brand-playground legend{display:flex;gap:16px;padding:0;margin-bottom:14px;font:400 11px/1.5 var(--font-body);color:rgb(var(--c-muted))}.brand-playground legend>span{font-size:14px;color:rgb(var(--c-paper))}.brand-playground-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.brand-playground-options label{position:relative;min-width:0;cursor:pointer}.brand-playground-options input{position:absolute;width:1px;height:1px;opacity:0}.brand-playground-options label>span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:82px;gap:10px;padding:14px;border:1px solid rgb(var(--c-line));border-radius:7px;font:500 12px/1.4 var(--font-body);overflow-wrap:anywhere}.brand-playground-options input:checked+span{border-color:rgb(var(--c-accent));box-shadow:inset 0 0 0 1px rgb(var(--c-accent))}.brand-playground-options input:focus-visible+span{outline:2px solid rgb(var(--c-periwinkle));outline-offset:4px}.brand-playground-options input:disabled+span{cursor:default;opacity:.55}.brand-playground-swatch{width:22px;height:22px;border-radius:50%}.brand-playground-swatch-violet{background:rgb(var(--brand-choice-violet))}.brand-playground-swatch-red{background:rgb(var(--brand-choice-red))}.brand-playground-swatch-neutral{background:rgb(var(--brand-choice-neutral))}.brand-playground-fonts strong{font-weight:500;font-size:22px}.brand-playground-fonts small{font:400 10px/1.5 var(--font-body);color:rgb(var(--c-muted))}.brand-playground-font-sans{font-family:General Sans,sans-serif}.brand-playground-font-serif{font-family:Georgia,Times New Roman,serif}.brand-playground-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.brand-playground-shape{display:block;width:38px;height:20px;background:rgb(var(--c-paper))}.brand-playground-shape-pill{border-radius:99px}.brand-playground-shape-rounded{border-radius:5px}.brand-playground-shape-square{border-radius:0}.brand-playground-session{display:flex;align-items:start;gap:24px;padding-top:24px;border-top:1px solid rgb(var(--c-line))}.brand-playground-session>p{max-width:39ch;font:400 12px/1.6 var(--font-body);color:rgb(var(--c-muted))}.brand-playground-session>button{flex-shrink:0}.brand-playground-status{min-height:2.8em;margin-top:15px;font:400 12px/1.5 var(--font-body);color:rgb(var(--c-muted))}@media (max-width: 1000px){.brand-playground-intro,.brand-playground-stage{grid-template-columns:minmax(0,1fr);gap:28px}.brand-playground-sample-title{font-size:clamp(32px,6vw,48px)}.brand-playground-specimen{padding-top:26px}.brand-playground-controls{max-width:760px;width:100%}.brand-playground-sample-copy{max-width:46ch}}@media (max-width: 540px){.brand-playground-options label>span{padding:10px;font-size:11px}.brand-playground-session{flex-direction:column;gap:16px}.brand-playground-fonts small{font-size:9px}.brand-playground-sample{padding:24px}.brand-playground-sample-title{font-size:31px}.brand-playground-sample-copy{font-size:14px}.brand-playground-options{gap:7px}}.js .brand-playground-nojs{display:none}