body:has(.keyring-studio){--accent: #c8b7e7}.keyring-studio{max-width:720px;margin:auto}.layout-controls{display:flex;justify-content:center;gap:8px}.layout-controls button{min-width:85px}.keyring-studio button[aria-pressed=true]:not(.keycap){background:#d7c5ed;color:#302b3b;border-color:#d7c5ed}.toy{--cap:#f0e7d4;--edge:#b5a68c;--ink:#4c463e;--second:#c8bbdf;width:100%;position:relative;padding:92px 0 28px}.toy[data-color=lavender]{--cap:#dacdeb;--edge:#a595bd;--ink:#4a3c62;--second:#f1d7d5}.toy[data-color=mint]{--cap:#c8e2d7;--edge:#84b0a0;--ink:#2c5248;--second:#eee3bb}.toy[data-color=night]{--cap:#48515e;--edge:#252d37;--ink:#f2eee5;--second:#a4b8c5}.hardware{position:absolute;top:12px;left:50%;width:140px;height:80px;transform:translate(-50%)}.ring{position:absolute;left:20px;top:0;width:58px;height:58px;border:6px solid #a6adb5;border-radius:50%;box-shadow:inset 1px 1px 2px #fff,1px 2px 2px #0008;background:transparent}.ring:after{content:"";position:absolute;inset:-3px;border:1px solid #e5e6ea;border-radius:50%}.chain{position:absolute;top:44px;left:42px;width:16px;height:40px;border:4px double #c9cbd1;border-radius:9px;transform:rotate(-12deg)}.tag{position:absolute;top:31px;left:77px;padding:8px 7px;background:#857690;color:#f6effb;border-radius:4px 10px 10px 4px;font-size:8px;white-space:nowrap;transform:rotate(12deg)}.keycaps{display:grid;gap:12px;width:100%;margin:auto;padding:12px;background:linear-gradient(135deg,#ffffff19,#c9bfdd12);border:1px solid #e0d8ef36;border-radius:24px;box-shadow:0 18px 32px #0004,inset 0 1px 1px #ffffff38}[data-layout=square] .keycaps{grid-template-columns:repeat(2,1fr);max-width:360px}[data-layout=row] .keycaps{grid-template-columns:repeat(4,1fr);max-width:680px;gap:8px;padding:8px}[data-layout=arrows] .keycaps{grid-template-columns:repeat(3,1fr);max-width:480px}[data-layout=arrows] .key-0{grid-column:2}[data-layout=arrows] .key-1{grid-column:1}.keycap{display:block;position:relative;padding:9% 9% 15%;aspect-ratio:1;min-width:0;border:0;border-radius:17%;background:linear-gradient(135deg,#ffffff80,var(--cap) 32%,var(--edge) 80%);color:var(--ink);box-shadow:0 8px 0 var(--edge),0 14px 12px #0006;transition:transform 70ms,box-shadow 70ms}.toy[data-color=night] .keycap:nth-child(2n){color:#243443}.keycap:nth-child(2n){background:linear-gradient(135deg,#ffffff90,var(--second) 40%,var(--edge))}.dish{height:100%;display:flex;align-items:center;justify-content:center;border-radius:15%;position:relative;background:radial-gradient(ellipse at 50% 45%,#0000000c,transparent 60%),linear-gradient(145deg,#ffffff50,var(--cap) 55%,#ffffff60);box-shadow:inset 0 2px 4px #0002,0 1px 1px #fff9;font-size:clamp(22px,6vw,44px);font-weight:600}.keycap:nth-child(2n) .dish{background:radial-gradient(ellipse at 50% 45%,#00000012,transparent 65%),linear-gradient(145deg,#ffffff60,var(--second) 55%,#ffffff50)}.dish small{position:absolute;right:12%;bottom:9%;font-size:10px;opacity:.55}.keycap.pressed{transform:translateY(6px);box-shadow:0 2px 0 var(--edge),0 4px 4px #0005}.toy,.toy *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;touch-action:none}.toy-status{display:flex;justify-content:space-between;gap:12px;color:#b9b3c3;font-size:12px;margin:12px 0 24px}#count{color:#e9d7fa;font-variant-numeric:tabular-nums}.customize{border-top:1px solid #ffffff19;padding-top:18px}.color-controls,.switch-controls{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.color-controls button,.switch-controls button{font-size:12px;padding:10px 12px}.color-controls button:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#f0e7d4}.color-controls [data-color=lavender]:before{background:#c3a6e0}.color-controls [data-color=mint]:before{background:#91cab6}.color-controls [data-color=night]:before{background:#48515e}.hint{font-size:12px;color:#a6a2ae;line-height:1.7}#share-status{overflow-wrap:anywhere}@media(max-width:650px){body:has(.keyring-studio) header{padding:14px 16px}body:has(.keyring-studio) .play{padding:20px 12px 28px}body:has(.keyring-studio) h1{font-size:29px;margin-bottom:18px}.layout-controls button{padding:8px 12px;font-size:12px}.keycaps{gap:10px;padding:10px;border-radius:20px}[data-layout=square] .keycaps{max-width:100%;width:84%}[data-layout=row] .keycaps{gap:6px;padding:6px}[data-layout=arrows] .keycaps{width:94%;gap:8px;padding:8px}.toy{padding-top:86px;padding-bottom:20px}.toy-status{font-size:11px;margin-top:6px}}