.sl-demo-shell{--bg:#faf9f7;--fg:#1a1a1a;--muted:#8a8580;--stage-bg:#f7f6f2;--stage-border:#e8e4dc;--key-bg:#ffffff;--key-bg-bottom:#efece5;--key-border:#d3cfc5;--key-shadow:0 1px 0 rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);--key-fg:#2a2a2a;--key-eligible-bg:#fff4c4;--key-eligible-border:#e6c25a;--key-eligible-fg:#6b4f12;--key-pressed-bg:#ffd450;--key-pressed-border:#c89e25;--key-error-bg:#fbdada;--key-error-border:#d97474;--key-error-fg:#8a1f1f;--theater-bg:#ffffff;--theater-border:#e0ddd2;--chip-bg:#2a2a2a;--chip-fg:#ffffff;--chip-error:#c83a3a;--accent:#2563eb;--finder-sidebar:#f4f2ec;--idle-blur:rgba(245, 243, 237, 0.55);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,sf pro display,segoe ui,system-ui,sans-serif;margin:0 auto;padding:0 0 8px}@media(prefers-color-scheme:dark){.sl-demo-shell{--bg:#161616;--fg:#f0efed;--muted:#8c8a86;--stage-bg:#1f1f1f;--stage-border:#2e2e2e;--key-bg:#3a3a3a;--key-bg-bottom:#2c2c2c;--key-border:#4a4a4a;--key-shadow:0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);--key-fg:#f0efed;--key-eligible-bg:#4d3f1a;--key-eligible-border:#8a6f30;--key-eligible-fg:#ffe28a;--key-pressed-bg:#b89240;--key-pressed-border:#d6b260;--key-error-bg:#4a2222;--key-error-border:#8a3a3a;--key-error-fg:#ffb0b0;--theater-bg:#2a2a2a;--theater-border:#3a3a3a;--finder-sidebar:#2e2e2e;--idle-blur:rgba(31,31,31,0.55)}}.sl-demo-shell,.sl-demo-shell *{box-sizing:border-box}.sl-demo{max-width:720px;margin:0 auto;position:relative;outline:none;cursor:pointer}.sl-demo:focus-visible .sl-stage,.sl-demo.armed .sl-stage{box-shadow:0 0 0 3px rgba(37,99,235,.22)}.sl-demo.armed{cursor:default}.sl-demo:not(.armed):hover .sl-stage{box-shadow:0 8px 28px rgba(0,0,0,8%),0 0 0 1px rgba(37,99,235,.12)}.sl-stage{background:var(--stage-bg);border:1px solid var(--stage-border);border-radius:14px;padding:20px 22px 22px;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;position:relative;min-height:230px;transition:box-shadow 160ms}.sl-keyboard{display:flex;flex-direction:column;gap:5px;align-items:center;user-select:none}.sl-row{display:flex;flex-shrink:0;gap:4px}.sl-row.rs{width:100%;justify-content:center}.sl-key{width:30px;height:32px;border-radius:5px;background:linear-gradient(to bottom,var(--key-bg) 0%,var(--key-bg-bottom) 100%);border:1px solid var(--key-border);box-shadow:var(--key-shadow);color:var(--key-fg);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:background 140ms,border-color 140ms,transform 80ms,box-shadow 80ms,opacity 200ms,color 140ms}.sl-key.pressed{background:var(--key-pressed-bg);border-color:var(--key-pressed-border);color:#2a2010;transform:translateY(1px);box-shadow:0 0 0 1px var(--key-pressed-border)inset}.sl-key.error{background:var(--key-error-bg);border-color:var(--key-error-border);color:var(--key-error-fg);animation:sl-shake .4s}.sl-key.space{width:200px;font-size:10px;color:var(--muted);position:relative}.sl-demo.awaiting-space .sl-key.space{color:var(--fg);animation:sl-space-pulse 1500ms ease-in-out infinite}.sl-demo.awaiting-space .sl-key.space::after{content:"Hold Spacebar";position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:4px 8px;border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.sl-demo.awaiting-space .sl-key.space::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--chip-bg);pointer-events:none}@keyframes sl-space-pulse{0%,100%{box-shadow:0 0 0 2px rgba(37,99,235,.14),var(--key-shadow)}50%{box-shadow:0 0 0 5px rgba(37,99,235,8%),var(--key-shadow)}}@keyframes sl-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}.sl-theater{display:flex;justify-content:center}.sl-window{width:260px;height:180px;background:var(--theater-bg);border:1px solid var(--theater-border);border-radius:9px;overflow:hidden;box-shadow:none;display:flex;flex-direction:column;transition:opacity 160ms ease-out}.sl-window-flying{position:relative;z-index:10;will-change:transform,opacity}.sl-window-bar{height:22px;border-bottom:1px solid var(--theater-border);display:flex;align-items:center;padding:0 9px;gap:6px;flex-shrink:0}.sl-dot{width:9px;height:9px;border-radius:50%}.sl-dot.red{background:#ff5f57}.sl-dot.yellow{background:#ffbd2e}.sl-dot.green{background:#28c940}.sl-window-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.sl-idle-label{color:var(--muted);font-size:11px;letter-spacing:.04em}.sl-app,.sl-browser,.sl-finder{width:100%;height:100%;display:flex}.sl-app{flex-direction:column;align-items:center;justify-content:center;gap:8px}.sl-app-name{font-size:12px;font-weight:500}.sl-browser{flex-direction:column}.sl-browser-addr{height:22px;background:var(--stage-bg);border-bottom:1px solid var(--theater-border);display:flex;align-items:center;padding:0 10px;font-size:10px;color:var(--muted);font-family:-apple-system,sf mono,ui-monospace,monospace}.sl-browser-body{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}.sl-finder{flex-direction:row}.sl-finder-sidebar{width:78px;background:var(--finder-sidebar);border-right:1px solid var(--theater-border);padding:8px 6px;font-size:9.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px}.sl-finder-side-item{padding:2px 5px;border-radius:3px}.sl-finder-side-item.active{background:var(--accent);color:#fff}.sl-finder-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.sl-finder-name{font-size:11px;font-weight:500}.sl-action-icon{display:inline-flex;align-items:center;justify-content:center}.sl-window-old{position:absolute;pointer-events:none;z-index:8;box-shadow:none;transition:opacity 220ms ease-out}@keyframes sl-chrome-in{from{opacity:0}to{opacity:1}}.sl-chip{position:absolute;top:14px;right:14px;z-index:20;background:var(--chip-bg);color:var(--chip-fg);padding:5px 11px;border-radius:999px;font-size:11px;font-weight:500;font-family:-apple-system,sf mono,ui-monospace,monospace;letter-spacing:.02em;opacity:0;transition:opacity 200ms,background 200ms;pointer-events:none}.sl-chip.visible{opacity:1}.sl-chip.error{background:var(--chip-error)}.sl-try-status{position:absolute;left:18px;bottom:14px;z-index:22;padding:5px 10px;border-radius:999px;background:var(--theater-bg);border:1px solid var(--theater-border);color:var(--muted);font:inherit;font-size:11px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,6%);transition:color 160ms,border-color 160ms,transform 160ms;cursor:pointer}.sl-demo:not(.armed):hover .sl-try-status{transform:scale(1.14)}.sl-try-status:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sl-demo.armed .sl-try-status{cursor:default;pointer-events:none}.sl-hint-window{position:absolute;left:50%;bottom:84px;z-index:12;width:min(300px,calc(100% - 32px));padding:8px;border:1px solid var(--theater-border);border-radius:9px;background:var(--theater-bg);color:var(--fg);opacity:0;pointer-events:none;transform:translate(-50%,4px)scale(.98);transition:opacity 140ms ease-out,transform 140ms ease-out}.sl-hint-window.visible{opacity:1;transform:translate(-50%,0)scale(1)}.sl-hint-window-static{margin:18px auto 0;max-width:340px}.sl-hint-window-static .sl-hint-window{position:static;width:100%;transform:none;box-shadow:0 10px 28px rgba(0,0,0,8%)}.sl-hint-window-static .sl-hint-window.visible{transform:none}.sl-hint-window-static .sl-hint-row.less-prominent{color:var(--muted)}.sl-hint-window-static .sl-hint-row.less-prominent .sl-hint-key{opacity:.58}.sl-hint-title{padding:2px 6px 7px;color:var(--muted);font-size:10px;line-height:1}.sl-hint-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;font-size:11px}.sl-hint-row+.sl-hint-row{margin-top:2px}.sl-hint-row.active{background:var(--stage-bg)}.sl-hint-row.coach{background:var(--key-eligible-bg);color:var(--key-eligible-fg);animation:sl-hint-row-pulse 1500ms ease-in-out infinite}.sl-hint-row.coach .sl-hint-key{border-color:var(--key-eligible-border);color:var(--key-eligible-fg)}.sl-hint-key{justify-self:start;min-width:22px;padding:1px 7px;border:1px solid var(--key-border);border-radius:4px;background:var(--key-bg);color:var(--key-fg);text-align:center;font-size:10px}.sl-hint-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes sl-hint-row-pulse{0%,100%{box-shadow:0 0 0 1px var(--key-eligible-border)inset}50%{box-shadow:0 0 0 3px rgba(230,194,90,.35)inset}}@media(max-width:640px){.sl-stage{padding:18px}.sl-try-status{display:none}.sl-hint-window{display:none}.sl-hint-window-static .sl-hint-window{display:block}.sl-keyboard{align-self:center;align-items:center}}