.keys-page .availability{background:#763728}.keys-page h1{font-size:clamp(74px,8.5vw,128px)}.keys-demo-section{background:radial-gradient(ellipse at 70% 50%,#98453244,transparent 65%),#171311;padding:80px 0}.keys-stage{position:relative;aspect-ratio:1.7;min-height:360px;container-type:inline-size;background:radial-gradient(ellipse at bottom left,#7b4b3b,#382b27);overflow:hidden}.keys-macbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#e9ded7;color:#2c2521;font-size:12px}.tutorial-document{position:absolute;top:14%;left:12%;right:12%;height:53%;background:#f4f2ec;padding:4%;color:#272421;box-shadow:0 8px 30px #0004}.document-title{font:600 3cqw 'Barlow Condensed',Impact,sans-serif}.copy-source{display:table;font-size:2.1cqw;margin:5% 0;padding:1%;animation:source-selected 12s infinite}.document-divider{height:1px;background:#d5d0c6;margin:5% 0}.tutorial-document small{font:1cqw 'IBM Plex Mono',monospace;letter-spacing:1px;color:#787167}.paste-result{font-size:2.1cqw;animation:paste-visible 12s infinite;margin:3% 0}.example-save{position:absolute;right:5%;bottom:8%;font-size:1.7cqw;background:#51443e;color:#fff;padding:1% 4%;border-radius:3px}.keyboard-overlay{position:absolute;left:19%;right:19%;bottom:9%;height:22%;display:flex;align-items:center;gap:3%;animation:overlay-visible 12s infinite}.keyboard-illustration{flex:1;padding:2%;border:1px solid #a7978a;border-radius:7px;background:#141211de;box-shadow:0 5px 15px #0004}.keyboard-row{display:flex;gap:.6cqw;margin-bottom:.5cqw}.keyboard-row:last-child{margin:0}.key{flex:1;min-width:0;text-align:center;border:1px solid #8d8177;border-radius:2px;padding:.45cqw 0;color:#d5cbbf;font:1.15cqw Barlow,Arial,sans-serif}.key.space{flex:4}.key-command{animation:cmd-lit 12s infinite}.key-c{animation:c-lit 12s infinite}.key-v{animation:v-lit 12s infinite}.mouse-illustration{position:relative;width:7%;height:55%;border:1px solid #b4a99c;border-radius:2cqw;background:#141211de;overflow:hidden}.mouse-illustration:after{content:'';position:absolute;top:0;bottom:40%;left:50%;width:1px;background:#8d8177}.mouse-illustration i{position:absolute;left:0;top:0;width:50%;height:60%;animation:mouse-lit 12s infinite;border-bottom:1px solid #8d8177}.keys-click-ring{position:absolute;right:8%;bottom:7%;width:4.5cqw;height:4.5cqw;border:3px solid var(--amber);border-radius:50%;animation:keys-click 12s infinite}.keys-pointer{position:absolute;width:2cqw;height:3cqw;right:11%;bottom:10%;animation:pointer-arrival 12s infinite}.flow-caption{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font:1.4cqw 'IBM Plex Mono',monospace;color:#e1d8ce;white-space:nowrap;animation:flow-copy 12s infinite}.flow-paste{animation-name:flow-paste}.flow-click{animation-name:flow-click}.balloon-overlay{display:none;position:absolute;left:50%;bottom:12%;transform:translateX(-50%);background:#141211eF;border:1px solid #a7978a;border-radius:8px;padding:2% 4%;min-width:16%;height:12%;text-align:center}.balloon-overlay>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:4cqw 'IBM Plex Mono',monospace;animation:copy-bubble 12s infinite}.balloon-overlay .balloon-paste{animation-name:paste-bubble}.bubble-style .keyboard-overlay{display:none}.bubble-style .balloon-overlay{display:block}.keys-caption{display:block;font:13px Barlow,Arial,sans-serif;letter-spacing:0;padding:17px;background:#241d19;color:#d6c9be}.keys-style-picker{display:flex;gap:12px;margin-top:24px}.keys-style-picker button{border:1px solid #9d8070;background:none;color:#d6c9be;padding:12px 18px;cursor:pointer;font:14px Barlow,Arial,sans-serif}.keys-style-picker button[aria-pressed=true]{background:#984532;border-color:#bf8a70;color:#fff}.keys-style-picker button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}.demo-note{font-size:13px;color:#b3a298;line-height:1.6}.keys-controls{padding-top:0;padding-bottom:45px}.keys-controls h2{margin:24px 0 35px}.shortcut-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;color:#b9bcb4;font-size:16px}.shortcut-panel strong{font:34px 'IBM Plex Mono',monospace;color:var(--amber);white-space:nowrap}.keys-controls>p{font-size:16px;color:#b9bcb4;line-height:1.6;max-width:750px}@keyframes source-selected{0%,9%,90%,100%{background:transparent;color:#272421}12%,87%{background:#b3cde1;color:#172c3f}}@keyframes paste-visible{0%,43%{opacity:0}47%,87%{opacity:1}94%,100%{opacity:0}}@keyframes overlay-visible{0%,14%{opacity:0}18%,84%{opacity:1}90%,100%{opacity:0}}@keyframes cmd-lit{0%,18%,32%,43%,57%,100%{background:transparent;color:#d5cbbf}20%,29%,45%,54%{background:#ffb52a;color:#17110b}}@keyframes c-lit{0%,18%,32%,100%{background:transparent;color:#d5cbbf}20%,29%{background:#ffb52a;color:#17110b}}@keyframes v-lit{0%,43%,57%,100%{background:transparent;color:#d5cbbf}45%,54%{background:#ffb52a;color:#17110b}}@keyframes mouse-lit{0%,69%,81%,100%{background:transparent}72%,78%{background:#ffb52a}}@keyframes keys-click{0%,69%{opacity:0;transform:scale(.6)}72%,76%{opacity:1;transform:scale(1)}82%,100%{opacity:0;transform:scale(1.7)}}@keyframes pointer-arrival{0%,57%{opacity:0;transform:translate(-60px,-20px)}66%,84%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0;transform:translate(0,0)}}@keyframes flow-copy{0%,40%{opacity:1}44%,100%{opacity:0}}@keyframes flow-paste{0%,42%{opacity:0}45%,64%{opacity:1}68%,100%{opacity:0}}@keyframes flow-click{0%,66%{opacity:0}69%,92%{opacity:1}100%{opacity:0}}@keyframes copy-bubble{0%,18%{opacity:0}20%,31%{opacity:1}38%,100%{opacity:0}}@keyframes paste-bubble{0%,43%{opacity:0}45%,56%{opacity:1}63%,100%{opacity:0}}@media(max-width:800px){.keys-page h1{font-size:clamp(67px,13vw,105px)}.keys-demo-section{padding:55px 0}.keys-stage{min-height:360px;aspect-ratio:1.2}.tutorial-document{left:7%;right:7%;top:17%;height:48%;padding:5%}.document-title{font-size:4.2cqw}.copy-source,.paste-result{font-size:2.9cqw}.tutorial-document small{font-size:1.6cqw}.example-save{font-size:2.5cqw}.keyboard-overlay{left:7%;right:7%;bottom:10%;height:19%}.key{font-size:1.7cqw;padding:.8cqw 0}.flow-caption{font-size:2cqw}.balloon-overlay{height:13%;min-width:24%}.balloon-overlay>span{font-size:6cqw}.keys-style-picker button{font-size:12px;padding:11px 13px}.shortcut-panel{flex-direction:column;align-items:start;gap:18px}.shortcut-panel strong{font-size:30px}.keys-controls{padding-bottom:20px}.use-grid h2 br:last-child{display:initial}}
.balloon-overlay{background:none;border:0}.balloon-overlay>span{background:#141211ef;border:1px solid #a7978a;border-radius:8px}