.top h1 > span { vertical-align: middle; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.playground-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: start; }
.preview-stage { position: sticky; top: 24px; min-width: 0; padding: 14px; }
#preview { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 18px; background: #211b2c; }
.preview-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 4px 10px; }
.reaction-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.reaction-controls button { font-size: 24px; padding: 8px 12px; min-width: 48px; min-height: 48px; }
.reaction-controls button[aria-pressed=true] { background: var(--sel); border-color: var(--brand-2); }
.preview-library { display: grid; gap: 18px; min-width: 0; }
.preview-library .card { padding: 20px; }
.preview-library label { margin-block: 12px; }
.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.character-grid button { flex-direction: column; padding: 12px 5px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.character-grid .character-emoji { font-size: 30px; }
.character-grid button[aria-pressed=true] { background: var(--sel); border-color: var(--brand-2); }
.character-grid .exclusive { font-size: 10px; color: var(--muted); }
.tune-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tune-grid button[aria-pressed=true] { background: var(--sel); border-color: var(--brand-2); }
@media (max-width: 800px) { .playground-layout { grid-template-columns: minmax(0, 1fr); } .preview-stage { position: static; } }

.reaction-controls button { font-size: 13px; } .presence-controls { display:grid; gap:10px; margin:12px 0; padding:14px; border-radius:14px; background:var(--sel); } .presence-controls label { display:grid; gap:6px; } #picture-preview { margin-top:14px; } #picture-image { max-width:100%; max-height:420px; border-radius:16px; object-fit:contain; } .preview-library input[type=range] { width:100%; }

@media (min-width:801px) { .preview-stage { max-height:calc(100vh - 48px); overflow-y:auto; scrollbar-width:thin; } }

.top { flex-wrap:wrap; } .preview-nav { display:flex; flex-wrap:wrap; gap:8px; } .preview-nav a { white-space:nowrap; }

.ownership-links { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; }

/* Theme controls and announcements stay outside the two-column preview grid. */
main.playground-layout{display:block;max-width:1240px;padding:16px 24px 48px}
.playground-panels{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"library preview";gap:24px;align-items:start}
.playground-panels>.preview-stage{grid-area:preview;max-height:none;overflow:visible;position:static}
.playground-panels>.preview-stage[data-sticky="true"]{position:sticky;top:18px}
.playground-panels>.preview-library{grid-area:library}
.playground-layout>.theme-chooser{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 20px;max-width:none;width:100%;padding:0}
.playground-layout>.theme-chooser select{width:auto;min-width:170px}
@media(max-width:960px){.playground-panels{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "library";gap:18px}.playground-panels>.preview-stage[data-sticky="true"]{position:static}main.playground-layout{padding:12px 16px 36px}}
.top{max-width:1240px;margin:0 auto;padding:20px 24px;background:var(--bg);border-bottom:1px solid var(--line)}

.character-size-control{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;gap:12px;align-items:center;margin:12px 0}.character-size-control input{width:100%;min-width:0}.character-size-control output{font-variant-numeric:tabular-nums}