.logo-playground{--viewer-background:#080808;--viewer-foreground:#f1eee7;--viewer-muted:#a7a49c;--viewer-line:#f1eee733;background:var(--viewer-background);color:var(--viewer-foreground);flex-direction:column;min-height:100svh;padding:20px max(32px,50vw - 660px) 24px;transition:background-color .25s ease-out,color .25s ease-out;display:flex}.logo-playground.backdrop-paper{--viewer-background:#f1eee7;--viewer-foreground:#191815;--viewer-muted:#625e55;--viewer-line:#19181538}.logo-playground.backdrop-clay{--viewer-background:#8e3018;--viewer-foreground:#fff3e4;--viewer-muted:#f1c2aa;--viewer-line:#fff3e44d}.logo-page-header,.logo-playground-controls,.logo-page-footer{justify-content:space-between;align-items:center;gap:24px;display:flex}.logo-page-header{min-height:62px}.logo-page-brand{align-items:center;width:160px;display:flex}.logo-page-brand img{width:100%;height:auto}.logo-back-link{align-items:center;gap:10px;min-height:44px;display:inline-flex}.logo-back-link:hover,.logo-page-footer a:hover{text-underline-offset:5px;text-decoration:underline}.logo-page-intro{padding-top:clamp(32px,6vh,72px)}.logo-page-intro h1{letter-spacing:-.04em;margin:0;font-size:clamp(2.5rem,5.6vw,5rem);font-weight:550;line-height:1.08}.logo-page-intro p{color:var(--viewer-muted);margin:16px 0 0;font-size:1rem}.logo-stage{flex:1;height:max(320px,45svh);min-height:320px;position:relative}.logo-stage-canvas{cursor:grab;opacity:0;touch-action:none;width:100%;height:100%;transition:opacity .25s ease-out;position:absolute;inset:0}.logo-stage.is-ready .logo-stage-canvas{opacity:1}.logo-stage-canvas:active{cursor:grabbing}.logo-stage-canvas:focus-visible{outline-offset:-4px}.logo-stage-status{flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.logo-stage-status p{color:var(--viewer-muted);margin:0}.logo-stage-status img{max-width:75%;height:auto}.logo-stage-status button{cursor:pointer;text-underline-offset:5px;background:0 0;min-height:44px;text-decoration:underline}.logo-zoom-controls{gap:4px;display:flex;position:absolute;bottom:24px;right:0}.logo-zoom-controls button{border:1px solid var(--viewer-line);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.logo-playground-controls{border-top:1px solid var(--viewer-line);padding:24px 0}.logo-action-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.logo-action-controls button{border:1px solid var(--viewer-line);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:10px;min-height:48px;padding:0 18px;font-size:.875rem;display:inline-flex}.logo-action-controls button[aria-pressed=true]{background:var(--viewer-foreground);color:var(--viewer-background)}.logo-action-controls button:hover,.logo-zoom-controls button:hover{border-color:currentColor}.logo-playground button:disabled{cursor:wait;opacity:.4}.logo-backdrop-controls{align-items:center;gap:4px;display:flex}.logo-backdrop-controls>span{color:var(--viewer-muted);margin-right:12px;font-size:.875rem}.logo-backdrop-swatch{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.logo-backdrop-swatch[aria-pressed=true]{border-color:var(--viewer-foreground)}.logo-backdrop-swatch span{border:1px solid var(--viewer-line);border-radius:50%;width:24px;height:24px}.swatch-ink span{background:#080808}.swatch-paper span{background:#f1eee7}.swatch-clay span{background:#8e3018}.logo-page-footer{color:var(--viewer-muted);padding-top:12px;font-size:.875rem}.logo-page-footer p{margin:0}.logo-page-footer a{color:var(--viewer-foreground);align-items:center;gap:10px;min-height:44px;display:inline-flex}@media (max-width:760px){.logo-playground{padding:16px 20px 20px}.logo-page-header{min-height:48px}.logo-page-brand{width:122px}.logo-back-link{gap:8px;font-size:.875rem}.logo-page-intro{padding-top:40px}.logo-stage{height:35svh;min-height:260px}.logo-playground-controls{flex-direction:column;align-items:flex-start;gap:20px;padding:20px 0}.logo-action-controls{gap:6px}.logo-action-controls button{gap:8px;padding:0 12px}.logo-page-footer{flex-direction:column;align-items:flex-start;gap:6px}.logo-zoom-controls{bottom:16px}}@media (max-width:360px){.logo-action-controls button{gap:6px;padding:0 10px;font-size:.8rem}}@media (prefers-reduced-motion:reduce){.logo-playground,.logo-stage-canvas{transition:none}}