.demo-page{background:#efeae1;flex-direction:column;min-height:100dvh;display:flex}.playground{color:#f0e6d6;background:#241c16;border-bottom:1px solid #3a2f26;padding:1.1rem 0 1.25rem}.playground-title{letter-spacing:.22em;text-transform:uppercase;color:#d8b96a;font-family:Georgia,serif;font-size:.95rem}.playground-note{color:#b9a897;max-width:72ch;margin-top:.35rem;font-size:.78rem;line-height:1.5}.playground-controls{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;margin-top:.9rem;display:flex}.playground-field{flex-direction:column;gap:.3rem;display:flex}.playground-field>span{letter-spacing:.14em;text-transform:uppercase;color:#b9a897;font-size:.66rem}.playground-field select,.playground-field input[type=text]{color:#f0e6d6;background:#2f2620;border:1px solid #463a2f;border-radius:8px;min-width:130px;padding:.4rem .6rem}.playground-field input[type=text]{min-width:165px}.playground-field input[type=color]{cursor:pointer;background:#2f2620;border:1px solid #463a2f;border-radius:8px;width:46px;height:36px;padding:2px}.playground-features{border:1px solid #463a2f;border-radius:10px;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:0;padding:.55rem .8rem;display:flex}.playground-features legend{letter-spacing:.14em;text-transform:uppercase;color:#b9a897;padding-inline:.35rem;font-size:.66rem}.playground-toggle{color:#e5d9c6;cursor:pointer;align-items:center;gap:.4rem;font-size:.8rem;display:inline-flex}.playground-toggle input{accent-color:#c6a15b;width:15px;height:15px}.playground-actions{flex-wrap:wrap;gap:.6rem;display:flex}.playground-button{color:#241c16;cursor:pointer;background:#c6a15b;border:1px solid #c6a15b;border-radius:999px;padding:.45rem 1rem;font-size:.78rem;transition:background .2s}.playground-button:hover{background:#d8b96a}.playground-button--ghost{color:#e5d9c6;background:0 0;border-color:#463a2f}.playground-button--ghost:hover{background:#2f2620}.engine-diagnostics{border-top:1px solid var(--color-border);background:var(--color-surface);padding-block:1rem;font-size:.85rem}.diagnostics-details summary{cursor:pointer;color:var(--color-text-muted);letter-spacing:.06em;text-align:center;font-size:.78rem}.diagnostics-details summary:hover{color:var(--color-text)}.diagnostics-body{text-align:left;flex-direction:column;gap:1rem;max-width:860px;margin:1rem auto .5rem;display:flex}.diagnostics-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem 1.4rem;margin:0;display:grid}.diagnostics-grid dt{letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted);font-size:.64rem}.diagnostics-grid dd{color:var(--color-text);font-family:var(--font-display);margin:0;font-size:1rem}.diagnostics-swatches{color:var(--color-text-muted);align-items:center;gap:1.2rem;font-size:.75rem;display:flex}.diagnostics-swatch{align-items:center;gap:.4rem;display:inline-flex}.diagnostics-swatch span{border:1px solid var(--color-border);border-radius:50%;width:18px;height:18px;display:inline-block}.diagnostics-features{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.chip{border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:999px;align-items:center;gap:.35rem;padding:.22rem .7rem;font-size:.72rem;display:inline-flex}.chip:before{content:"";opacity:.7;background:currentColor;border-radius:50%;width:6px;height:6px}.chip--on{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);background:color-mix(in srgb, var(--color-primary) 10%, transparent);color:var(--color-primary)}.chip--off{opacity:.65}.diagnostics-note{color:var(--color-text-muted);font-size:.75rem;font-style:italic}