body{margin:0;background:#eee;color:#2a2a2a}.study.study[data-treatment]{max-width:1200px;margin:auto;padding:30px 32px 36px}.study-header{display:flex;justify-content:space-between;align-items:center;color:#737373;font:500 10px var(--font-mono);letter-spacing:.12em}.study-header a{color:#333;font:600 15px var(--font-sans);letter-spacing:0;text-decoration:none}.study-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:38px 0 26px}.study-heading h1{font-size:clamp(30px,4vw,49px);letter-spacing:-.055em;line-height:1;margin:0;font-weight:550}.study-heading p{margin:0;color:#6e6e6e;font-size:13px;line-height:1.7}.treatment-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.treatment-picker>button{display:flex;align-items:center;gap:18px;text-align:left;padding:20px;border:1px solid #d3d3d3;border-radius:14px;background:#e7e7e7;color:#2c2c2c;cursor:pointer;transition:background .2s,box-shadow .2s}.treatment-picker>button[aria-pressed=true]{background:#f9f9f9;border-color:#8e8e8e;box-shadow:0 4px 12px #35353510}.treatment-picker>button:focus-visible{outline:2px solid #cf8248;outline-offset:3px}.treatment-label{display:grid;grid-template-columns:auto 1fr;gap:5px 9px}.treatment-number{font:500 10px var(--font-mono);color:#8e8e8e;align-self:center}.treatment-label strong{font-size:15px;font-weight:600}.treatment-label small{grid-column:1/-1;font-size:11px;line-height:1.5;color:#737373}.sample-key{flex:none;display:grid;place-items:center;position:relative;width:49px;height:48px;border:1px solid #bababa;border-bottom:7px solid #b7b7b7;border-radius:10px 10px 12px 12px;background:radial-gradient(ellipse at 50% 20%,#dcdcdc,#fafafa 90%);box-shadow:0 3px 3px #0003,inset 0 1px 2px #fff;font:500 24px -apple-system,BlinkMacSystemFont,sans-serif}.sample-key[data-sample=rounded]{border-radius:16px;border-bottom-width:9px;background:radial-gradient(ellipse at 50% 15%,#d3d3d3 15%,#f6f6f6 70%)}.sample-key[data-sample=precise]{border-radius:6px;border-color:#9a9a9a;border-bottom-width:4px;background:linear-gradient(#e9e9e9,#fafafa);box-shadow:0 3px #494949,0 5px 5px #0003,inset 0 1px #fff}.study.study[data-treatment] .desktop{width:100%;aspect-ratio:auto;height:235px;min-height:0}.study.study[data-treatment] .demo{background:#333;border-color:#3f3f3f;box-shadow:0 24px 45px #37373722}.study.study.study[data-treatment=rounded] .guide-keyboard{background:linear-gradient(#c9c9c9,#b6b6b6);border-radius:23px;border-bottom-width:10px}.study.study.study[data-treatment=rounded] .guide-keyboard button{--cap-radius:16px 16px 14px 14px;--face-radius:13px 13px 11px 11px;border-bottom-width:9px;background:linear-gradient(110deg,#f0f0f0,#c8c8c8)}.study.study.study[data-treatment=rounded] .guide-keyboard button:before{inset:2px 4px 3px;background:radial-gradient(ellipse at 50% 20%,#ccc,#e0e0e0 45%,#f6f6f6 82%);box-shadow:inset 0 2px 4px #7d7d7d4d,0 1px 1px #fff}.study.study.study[data-treatment=rounded] .arrow-pad button{border-bottom-width:5px;border-radius:9px}.study.study.study[data-treatment=rounded] .arrow-pad button:before{inset:1px 2px;border-radius:7px}.study.study.study[data-treatment=rounded] .keyboard-letter-row>span{border-radius:11px}.study.study.study[data-treatment=precise] .guide-keyboard{background:linear-gradient(#848484,#717171);border-color:#666;border-bottom-color:#575757;border-radius:12px;box-shadow:inset 0 1px 1px #bfbfbf,0 3px #454545,0 14px 14px #38383838}.study.study.study[data-treatment=precise] .keyboard-topline{color:#e5e5e5;text-shadow:none}.study.study.study[data-treatment=precise] .guide-keyboard button{--cap-radius:6px;--face-radius:4px;border-color:#a2a2a2;border-bottom-width:5px;background:#c6c6c6;box-shadow:0 2px 1px #383838aa,0 4px 4px #20202066,inset 0 1px 1px #fff}.study.study.study[data-treatment=precise] .guide-keyboard button:before{background:linear-gradient(#dedede,#f1f1f1);box-shadow:inset 0 1px 2px #9c9c9c44}.study.study.study[data-treatment=precise] .keyboard-letter-row>span,.study.study.study[data-treatment=precise] .spacebar{border-radius:5px}.study.study[data-treatment] .guide-keyboard button:is(:active,.is-keydown,[aria-pressed=true]){border-bottom-width:2px}.study-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 2px;color:#7a7a7a;font-size:11px}@media(max-width:900px){.treatment-picker>button{padding:12px;gap:10px}.treatment-label small{display:none}.sample-key{width:38px;height:40px}.study-heading{align-items:start}.study-heading p{max-width:240px}}@media(max-width:620px){.study.study[data-treatment]{padding:20px 14px}.study-heading{display:block;margin:30px 0 22px}.study-heading p{margin-top:16px;max-width:none}.treatment-picker{gap:6px}.treatment-picker>button{flex-direction:column;align-items:start;gap:14px}.treatment-label{gap:5px}.treatment-label strong{font-size:12px}.study.study[data-treatment] .keyboard-stage{height:205px}.study.study[data-treatment] .desktop{height:190px}.study-footer{flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){.study.study[data-treatment] .demo-guide button:after{animation:none!important}}.inspect-keyboard{display:block;margin:0 0 16px auto;padding:9px 14px;border:1px solid #aaa;border-radius:8px;color:#555;background:#f5f5f5;font:500 12px var(--font-sans);cursor:pointer}.study.inspect-full .desktop,.study.inspect-full .guide-intro,.study.inspect-full .demo-status{display:none}.study.inspect-full .demo.demo.demo .guide-card{display:block;padding:0}.study.inspect-full .demo.demo.demo .keyboard-stage{height:400px;margin:0;mask-image:none;-webkit-mask-image:none}.study.inspect-full .demo.demo.demo .keyboard-scene{left:50%;bottom:25px;transform:translate(-50%) scale(.95);transform-origin:center bottom;animation:none}@media(max-width:1000px){.study.inspect-full .demo.demo.demo .keyboard-stage{height:310px}.study.inspect-full .demo.demo.demo .keyboard-scene{transform:translate(-50%) scale(.7)}}@media(max-width:700px){.study.inspect-full .demo.demo.demo .keyboard-stage{height:200px}.study.inspect-full .demo.demo.demo .keyboard-scene{transform:translate(-50%) scale(.45)}}@media(max-width:460px){.study.inspect-full .demo.demo.demo .keyboard-stage{height:160px}.study.inspect-full .demo.demo.demo .keyboard-scene{transform:translate(-50%) scale(.31)}}.study.inspect-full .demo.demo.demo .context-key,.study.inspect-full .demo.demo.demo .guide-keyboard button:disabled{filter:none;color:#666}.study.inspect-full .demo.demo.demo .demo-guide .context-key,.study.inspect-full .demo.demo.demo .demo-guide button{animation:none;filter:none}