.logo-playground { padding: 1.5rem var(--pad) 3rem; width: 100%; max-width: 1280px; margin-inline: auto; }
.logo-playground .intro { margin-bottom: 1.75rem; }
.logo-playground h1 { font: 300 28px/1.2 var(--display); margin: 0 0 .5rem; }
.logo-playground .intro p, .logo-playground .caveat { opacity: .6; font-size: 12px; }
.logo-playground .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 365px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.logo-playground .stage { position: sticky; top: calc(var(--bar) + 1rem); min-width: 0; display: grid; gap: 14px; }
.logo-playground .sheet { position: relative; width: min(100%, max(320px, calc(100dvh - 230px))); margin-inline: auto; aspect-ratio: 1; background: #f2ede3; }
.logo-playground canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo-playground .transport, .logo-playground .toggles, .logo-playground .presets, .logo-playground .saved, .logo-playground .line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.logo-playground .transport .scrub { flex: 1; min-width: 80px; width: auto; }
.logo-playground .time { font-size: 11px; white-space: nowrap; }
.logo-playground button { font: inherit; font-size: 11px; padding: 10px 8px; min-height: 44px; background: none; color: inherit; border: 1px solid #ddd; cursor: pointer; }
.logo-playground button:hover { border-color: #555; }
.logo-playground button[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.logo-playground .play { width: 44px; display: grid; place-items: center; }
.logo-playground .play svg { width: 14px; height: 14px; fill: currentColor; }
.logo-playground .formula { font-size: 10px; opacity: .55; overflow-wrap: anywhere; }
.logo-playground .panel { min-width: 0; }
.logo-playground .presets { padding-bottom: 18px; }
.logo-playground .presets .label { width: 100%; opacity: .5; font-size: 11px; }
.logo-playground details { border-top: 1px solid #ddd; padding: 14px 0; }
.logo-playground summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; }
.logo-playground summary::-webkit-details-marker { display: none; }
.logo-playground summary::after { content: '+'; opacity: .5; }
.logo-playground details[open] summary::after { content: '−'; }
.logo-playground h2 { margin: 0; font: 300 19px/1.2 var(--display); }
.logo-playground .about, .logo-playground .note { opacity: .6; font-size: 11px; line-height: 1.65; }
.logo-playground .row { display: grid; grid-template-columns: minmax(0,1fr) 64px; gap: 3px 10px; align-items: center; padding-block: 7px; }
.logo-playground .row label { font-size: 11px; }
.logo-playground .row output { font-size: 10px; text-align: right; opacity: .6; }
.logo-playground .row input[type="range"] { grid-column: 1 / -1; }
.logo-playground .row.off { opacity: .4; }
.logo-playground input[type="range"] { accent-color: #000; width: 100%; min-height: 44px; margin: 0; cursor: pointer; }
.logo-playground input[type="color"] { width: 64px; height: 44px; border: 1px solid #ddd; padding: 4px; background: none; cursor: pointer; }
.logo-playground .save { border-top: 1px solid #ddd; padding-top: 20px; display: grid; gap: 12px; }
.logo-playground input[type="text"] { min-height: 44px; min-width: 0; width: 100%; font: inherit; font-size: 12px; background: none; border: 1px solid #ddd; padding: 10px; }
.logo-playground textarea { width: 100%; min-height: 140px; border: 1px solid #ddd; font: 11px/1.6 var(--mono); padding: 10px; resize: vertical; }
.logo-playground [hidden] { display: none !important; }
.logo-playground .err { color: #b3261e; background: #fff; padding: 12px; font-size: 12px; }
.logo-playground .caveat { max-width: 85ch; line-height: 1.7; margin-top: 2rem; }
@media (max-width: 820px) { .logo-playground .wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .logo-playground .stage { position: static; } .logo-playground .sheet { width: 100%; max-width: 680px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .logo-playground * { scroll-behavior: auto; } }