.playground-page{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start;padding-block:0}.playground-intro h2{font-size:clamp(60px,6.2vw,92px)}.playground-intro .lede{font-size:21px;line-height:1.6}.play-instructions{list-style:none;padding:0;margin:32px 0}.play-instructions li{padding:12px 0;border-bottom:1px solid var(--line);line-height:1.5;font-size:15px}.play-instructions span{font-size:11px;letter-spacing:.06em;margin-right:15px;color:var(--muted)}.play-disclaimer{font-size:13px;max-width:390px;color:var(--muted)}.playground-device{--surface:#e5e5e7;--key:white;--text:#252525;--subtle:#606068;--key-alt:#c4c5ca;min-width:0;border:1px solid var(--line);border-radius:32px;background:#fffcf7;padding:24px;box-shadow:0 22px 70px #403d2410}.sample-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.quiet-button{border:0;background:none;font-size:13px;letter-spacing:0;text-transform:none;min-height:44px;padding:0 10px;cursor:pointer}#sample{width:100%;resize:none;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:30px/1.5 var(--serif);padding:12px 0;margin-bottom:16px;height:115px;outline-offset:4px}#sample:focus-visible{outline:2px solid var(--category-arrows)}.demo-switches{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;align-items:center}.mode-picker,.font-picker{display:flex;border-radius:30px;background:#eae7df;padding:4px;gap:4px}.mode-picker button,.font-picker button{border:0;min-height:38px;padding:8px 18px;background:transparent;border-radius:24px;cursor:pointer;font-size:13px}.mode-picker button[aria-pressed=true],.font-picker button[aria-pressed=true]{background:var(--ink);color:white}.keyboard-surface{background:var(--surface);color:var(--text);border-radius:22px;overflow:hidden;user-select:none;-webkit-user-select:none}.demo-toolbar{height:54px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:0 8px;gap:4px}.demo-toolbar>span{text-align:center;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool-button{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:25px;cursor:pointer}.tool-button:disabled{opacity:.25;cursor:default}#stage{height:320px;position:relative;overflow:hidden;touch-action:none;cursor:grab;isolation:isolate}#stage:active{cursor:grabbing}#world{position:absolute;left:50%;top:50%;will-change:transform}.circle{position:absolute;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:var(--fill);color:var(--circle-ink);font-family:var(--serif);font-size:28px;cursor:pointer;touch-action:none;box-shadow:inset 0 0 0 1px #ffffff0a;transition:filter .15s,box-shadow .15s}.circle:active{filter:brightness(.88);box-shadow:inset 0 0 0 3px #ffffff55}.circle:focus-visible{outline:3px solid var(--text);outline-offset:4px;z-index:2}.circle.category{font-size:34px}.circle small{font:600 11px/1.25 var(--sans);max-width:90px}.circle.pulse{animation:tap-pop .32s ease-out}@keyframes tap-pop{50%{filter:brightness(1.15);box-shadow:inset 0 0 0 5px #ffffff80}}.honey-controls{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;gap:4px}.honey-controls>span{font-size:11px;color:var(--subtle)}.honey-controls>div{display:flex}.honey-controls button{border:0;background:transparent;color:var(--text);width:40px;height:44px;cursor:pointer;font-size:22px}#letter-panel{height:368px;padding:8px}.font-picker{justify-content:center;margin:0 auto 18px;width:max-content;background:var(--key-alt)}.font-picker button{min-width:96px}.key-row{display:flex;justify-content:center;gap:5px;margin-bottom:9px}.letter-key{flex:1;min-width:0;max-width:46px;height:47px;border:0;border-radius:7px;background:var(--key);color:var(--text);box-shadow:0 1px 0 #0003;font:22px/1 system-ui;cursor:pointer;touch-action:manipulation}.letter-key:active{background:var(--category-arrows);transform:translateY(1px)}.letter-key.wide{max-width:64px;font-size:18px;background:var(--key-alt)}.letter-key.space{max-width:none;flex:5;font-size:16px}.key-row:nth-child(2){padding-inline:18px}.typing-note{text-align:center;font-size:11px;color:var(--subtle);margin-top:15px}.demo-caption{display:flex;gap:9px;justify-content:center;align-items:center;margin-top:20px;color:var(--muted);font-size:11px}.demo-caption>span:first-child{font-size:22px}.playground-device.dark{--surface:#202021;--key:#474749;--text:#f5f5f5;--subtle:#b3b3bb;--key-alt:#646467}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:900px){.playground-page{gap:32px;grid-template-columns:.85fr 1.15fr}.playground-device{padding:16px}}@media(max-width:700px){.playground-page{grid-template-columns:1fr;padding-block:0;gap:32px}.playground-intro h2{font-size:64px}.play-instructions{margin:20px 0}.playground-device{border-radius:24px;padding:14px}.playground-intro .lede{font-size:19px}.playground-intro .play-disclaimer{max-width:none}.letter-key{font-size:19px;height:45px}.key-row{gap:4px}#stage{height:300px}.honey-controls{padding-left:10px}.honey-controls>span{font-size:10px}#letter-panel{height:348px}}@media(prefers-reduced-motion:reduce){.circle{transition:none}.circle.pulse{animation:none}}

/* All rows share the letter grid's width, including the flexible space bar. */
#keys { max-width: 505px; margin-inline: auto; }
.bottom-row { display: grid; grid-template-columns: 1.25fr 1.25fr 5fr 1.25fr; }
.bottom-row .letter-key { width: 100%; max-width: none; }
#sample { -webkit-touch-callout: none; }

#sample { display:block; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.shift-row { display:grid; grid-template-columns:1.4fr repeat(7, 1fr) 1.4fr; }
.shift-row .letter-key { width:100%; max-width:none; }
.playground-intro h2 { line-height:1.03; letter-spacing:-.055em; font-weight:400; }

.keyboard-surface { container-type:inline-size; }
.circle { overflow:hidden; padding:0; }
.circle-content { width:70%; height:70%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.circle-content>span { max-width:100%; line-height:1; }
.circle.category .circle-content { width:100%; }
.circle.category .circle-content>span { font-size:min(26px, calc(var(--diameter) * .3)); }
.circle.category small { flex-shrink:0; font-size:13px; line-height:1.15; max-width:70%; overflow-wrap:anywhere; text-wrap:balance; }
.circle.category small.single-word { font-size:min(13px, calc(var(--diameter) * .15)); max-width:85%; white-space:nowrap; }
@container (max-width:419px) {
  #stage { height:420px; }
}
@container (max-width:299px) {
  #stage { height:450px; }
  .circle.category small { font-size:12px; }
}