:root{color-scheme:light;--ink:#20304a;--muted:#61718a;--blue:#3266dc;--blue-dark:#2452ba;--blue-light:#edf3ff;--line:#e0e7f1;--surface:#fff;--bg:#f5f8fd;--green:#14734c;--radius:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.65}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1e58d9;outline-offset:4px}button{color:inherit}h1,h2,h3,p{margin:0}kbd{font-family:inherit}.shell{max-width:1240px;margin:0 auto;padding:0 32px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;height:86px;border-bottom:1px solid var(--line);font-size:13px}.home-link{color:var(--muted);display:flex;align-items:center;gap:9px}.header-name{font-weight:650;display:flex;align-items:center;gap:9px}.brand-key{font-size:23px;line-height:1.2;color:var(--blue)}.header-tag{font-size:11px;color:var(--muted);border:1px solid #d9e2f1;border-radius:100px;padding:3px 11px}.hero{padding:61px 0 54px;display:grid;grid-template-columns:1.15fr 1fr;gap:55px;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--blue);margin-bottom:13px}.hero h1{font-size:clamp(37px,4.5vw,58px);line-height:1.22;letter-spacing:-1.8px;font-weight:750;margin-bottom:22px}.hero-description{font-size:15px;color:var(--muted);line-height:1.9}.hero-actions{display:flex;gap:25px;align-items:center;margin-top:25px}.button{min-height:45px;padding:10px 20px;border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:22px;font-size:14px;font-weight:650;transition:background .15s,transform .15s}.button:hover{text-decoration:none}.primary{background:var(--blue);color:#fff}.primary:hover{background:var(--blue-dark)}.primary:disabled{background:#e9eef7;color:#74829a}.text-link{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center}.hero-note{font-size:11px;color:#728198;margin-top:18px}.hero-visual{padding:28px 35px 17px;border:1px solid #dee7f5;border-radius:26px;background:radial-gradient(ellipse at 90% 0%,#edf2ff,transparent 65%),#fff;box-shadow:0 18px 50px -35px #8caddf;transform:rotate(-1deg)}.conversion-line{display:grid;grid-template-columns:78px 1fr;column-gap:12px;align-items:center}.platform-label{font-size:12px;letter-spacing:.3px;color:var(--muted)}.hero-keys{display:flex;align-items:center;gap:15px;color:#9aa7bc}.hero-keys kbd{height:72px;min-width:75px;padding:8px 13px;background:#f7f9fc;border:1px solid #e0e6f0;border-bottom:4px solid #d8e0ec;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px;font-weight:600;color:#71829c}.hero-keys kbd small{font-size:8px;line-height:1;font-weight:500}.conversion-meaning{grid-column:2;font-size:11px;color:var(--muted);margin-top:8px}.conversion-arrow{color:#9cafd0;font-size:23px;margin:5px 0 4px 157px}.mac .platform-label{color:var(--blue);font-weight:700}.mac kbd{background:#edf3ff;border-color:#cfddff;border-bottom-color:#b6cbfa;color:var(--blue)}.mac kbd:first-child{font-size:32px;gap:3px}.hero-tip{font-size:11px;border-top:1px solid var(--line);padding-top:16px;margin-top:21px;display:flex;align-items:center;gap:8px;color:#5e7190}.tip-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}.section-nav{position:sticky;top:0;z-index:5;display:flex;gap:28px;align-items:center;padding:19px 0;background:rgba(245,248,253,.97);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-nav a{color:#4f607b;font-size:13px;font-weight:600;white-space:nowrap}.section-nav a span{color:#8d9bb1;font-size:10px;margin-right:6px;font-weight:400}.nav-progress{margin-left:auto;font-size:11px;color:var(--blue);white-space:nowrap}.section{padding-top:54px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:23px}.section-heading .eyebrow{margin-bottom:7px;font-size:10px;letter-spacing:1.7px}h2{font-size:24px;line-height:1.4;letter-spacing:-.5px;font-weight:700}.section-heading>p{color:var(--muted);font-size:12px;padding-bottom:3px}.basics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.basic-card{padding:23px 21px;background:#fff;border:1px solid var(--line);border-radius:15px}.basic-symbol{height:40px;display:flex;align-items:center;color:var(--blue);font-size:28px;letter-spacing:-1px;margin-bottom:12px}.basic-card:last-child .basic-symbol{font-size:23px}.basic-card h3{font-size:14px;margin-bottom:10px;font-weight:650}.basic-card p{color:var(--muted);font-size:12px;line-height:1.9}.basic-card p strong{font-weight:600;color:#425a7f}.basic-example{display:block;font-size:11px;color:var(--blue);padding-top:17px;line-height:1.6}.basic-example span{color:var(--muted)}.context-note{color:var(--muted);font-size:11px;margin:14px 2px 0}.panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff}.explorer{padding:23px}.explorer-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.modifier-bar{display:flex;flex-wrap:wrap;gap:8px}.modifier-button{border:1px solid #dce4ef;border-radius:8px;background:#fff;padding:7px 11px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#546680;transition:background .15s}.modifier-button .symbol{font-size:17px;line-height:1}.modifier-button[aria-pressed=true]{color:#214eb4;background:#eaf1ff;border-color:#9fbaf7;box-shadow:inset 0 0 0 1px #b5cbff}.subtle-button{background:none;border:none;color:#637590;padding:6px 3px;font-size:12px;line-height:1.5;border-radius:4px}.subtle-button:hover{color:var(--blue)}.keyboard-help{font-size:11px;color:#6c7d97;margin:15px 0 14px}.keyboard-scroll{overflow-x:auto;padding:4px 3px 9px;border-radius:12px;scrollbar-width:thin;scrollbar-color:#bacbe6 transparent}.keyboard{padding:13px;background:#edf1f7;border:1px solid #dce3ee;border-radius:13px;min-width:790px;display:flex;flex-direction:column;gap:7px}.key-row{display:flex;gap:6px}.key{flex:var(--size,1) 1 0;min-width:0;min-height:63px;border:1px solid #d4dce9;border-bottom:3px solid #ccd6e5;border-radius:7px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 2px;line-height:1.15;gap:7px;position:relative;font-size:13px;transition:background .12s,border-color .12s}.key:hover{background:#f4f7ff;border-color:#9fb7e8}.key .key-note{font-size:8px;color:#6b7b93;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.key.is-modifier{background:#f6f8fc}.key.is-active{border-color:#8cadf2;border-bottom-color:#789deb;background:#e3edff;color:#2856bd}.key.is-active .key-note{color:#3e62a7}.key.is-inspected{outline:2px solid var(--blue);outline-offset:1px}.key-row:first-child .key{min-height:40px;font-size:10px;gap:4px}.key-row:first-child .key-note{font-size:7px}.key-row:last-child .key{min-height:56px;font-size:11px}.arrow-cluster{flex:3 1 0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:3px}.arrow-cluster .key{min-height:25px!important;font-size:12px!important;padding:1px;gap:0;border-radius:5px}.arrow-cluster .key:first-child{grid-column:2}.arrow-cluster .key:nth-child(2){grid-column:1;grid-row:2}.arrow-cluster .key-note{display:none}.scroll-hint{display:none;font-size:10px;color:var(--muted);margin-top:6px}.key-detail{margin-top:16px;padding:20px;background:#f6f9ff;border:1px solid #e0e9fa;border-radius:12px;display:grid;grid-template-columns:75px 1fr;gap:17px;min-height:125px;align-items:start}.detail-key{background:#fff;border:1px solid #d9e4f7;border-bottom:3px solid #ccd9ef;border-radius:10px;min-height:60px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:26px;padding:6px}.detail-content h3{font-size:15px;margin:1px 0 6px}.detail-content p{font-size:12px;color:var(--muted);line-height:1.8}.detail-shortcuts{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.detail-chip{background:#fff;border:1px solid #d9e3f6;border-radius:6px;font-size:11px;padding:4px 9px;color:#41628f}.detail-chip:hover{border-color:var(--blue);color:var(--blue)}.keyboard-footnote{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#77869a;margin-top:14px}.practice-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:20px;align-items:start}.lesson-sidebar{padding:22px 17px}.progress-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:0 4px}.progress-heading h3{font-size:14px}.progress-heading span{font-size:11px;color:var(--blue)}progress{width:100%;height:5px;appearance:none;border:0;background:#edf1f8;border-radius:5px;display:block}progress::-webkit-progress-bar{background:#edf1f8;border-radius:5px}progress::-webkit-progress-value{background:var(--blue);border-radius:5px}progress::-moz-progress-bar{background:var(--blue);border-radius:5px}.lesson-list{display:flex;flex-direction:column;gap:4px;margin-top:17px}.lesson-button{background:transparent;border:1px solid transparent;display:flex;align-items:center;text-align:left;gap:10px;padding:10px 8px;border-radius:8px;line-height:1.4;font-size:12px;width:100%;color:#586a83}.lesson-button:hover{background:#f5f8fd}.lesson-button[aria-current=step]{background:var(--blue-light);color:var(--blue);font-weight:600}.lesson-number{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;border:1px solid #dbe3ee;border-radius:7px;font-size:10px;color:#78869a;background:#fff}.lesson-button.is-complete .lesson-number{background:#e9f6ef;border-color:#cce8db;color:var(--green)}.lesson-button[aria-current=step] .lesson-number{color:var(--blue);border-color:#bbcefa}.storage-note{border-top:1px solid var(--line);padding:15px 4px 0;margin-top:15px;color:#7a879b;font-size:10px}.reset-button{font-size:10px;margin:5px 0 0 4px}.practice-card{padding:27px 30px}.practice-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.pill{border-radius:5px;background:#f0f4fb;color:#59749d;font-size:10px;padding:4px 8px;letter-spacing:.2px}.practice-card h3{font-size:22px;letter-spacing:-.4px}.lesson-description{font-size:13px;color:var(--muted);margin-top:8px}.windows-reminder{font-size:11px;display:flex;gap:9px;align-items:center;margin-top:12px;color:#718097}.windows-reminder kbd{font-weight:600;color:#4d6386;background:#f2f5fa;padding:2px 7px;border-radius:4px}.simulation{height:163px;border:1px solid #e1e7f0;border-radius:10px;overflow:hidden;margin:21px 0;background:#f3f6fc;position:relative}.sim-titlebar{height:30px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #e4e9f2;background:#fafbfd;padding:0 12px}.sim-dot{width:7px;height:7px;border-radius:50%;background:#e2a6a6}.sim-dot:nth-child(2){background:#e4d296}.sim-dot:nth-child(3){background:#abd3b6}.sim-title{font-size:9px;color:#7b8ba3;flex:1;text-align:center;padding-right:26px}.sim-content{height:132px;display:flex;align-items:center;justify-content:center;gap:21px;padding:16px;text-align:center;font-size:12px;color:#63758f;position:relative}.sim-document{background:#fff;padding:14px 21px;border:1px solid #e0e6f0;border-radius:7px;min-width:165px;box-shadow:0 4px 12px -9px #8399bd}.sim-document strong{display:block;font-weight:550;color:#466183;font-size:13px}.sim-selected{background:#dce8ff;padding:2px 5px;border-radius:3px;color:#2d5bb9}.sim-label{font-size:9px;margin-top:6px;display:block;color:#7a8ca8}.sim-arrow{color:#9bb0d1;font-size:20px}.sim-clipboard{border:1px dashed #bed0ec;border-radius:7px;padding:13px;font-size:10px;min-width:100px}.simulation.is-success .sim-clipboard{border-style:solid;border-color:#bbdfce;background:#eff9f4;color:#27734f}.sim-app{width:61px;height:61px;border-radius:13px;background:#e7eeff;color:#4371c8;display:flex;align-items:center;justify-content:center;font-size:26px;border:2px solid transparent}.sim-app.active{border-color:#729ae9;box-shadow:0 0 0 4px #e5edff;background:#f8faff}.sim-app.quit{opacity:.35}.sim-small-window{width:104px;height:69px;background:#fff;border:1px solid #d8e2f1;border-radius:6px;padding-top:8px;font-size:11px;color:#6c83a5;box-shadow:0 3px 7px -5px #667b9e}.sim-small-window.closed{border-style:dashed;background:transparent;color:#7d8da4}.sim-screenshot{width:165px;height:84px;background:linear-gradient(135deg,#e1eaff,#e7f4f6);border-radius:5px;position:relative}.sim-screenshot:after{content:"";position:absolute;inset:14px 25px;border:1px dashed #90a7d2;border-radius:2px}.is-success .sim-screenshot:after{border:2px dashed #3266dc;background:#ffffff66}.sim-search{width:80%;max-width:320px;padding:15px;border:1px solid #d9e4f5;border-radius:10px;background:#fff;box-shadow:0 7px 22px -15px #607dba;text-align:left;font-size:13px;color:#5576a9}.sim-status{position:absolute;right:9px;bottom:7px;font-size:9px;color:var(--green);background:#edf8f1;padding:2px 6px;border-radius:4px}.practice-hint{padding:11px 14px;background:#f0f5ff;border-left:3px solid #90afea;border-radius:0 6px 6px 0;font-size:12px;color:#48668f;margin-bottom:18px}.practice-hint[hidden]{display:none}.input-instruction{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:10px}.input-instruction strong{font-weight:600}.input-instruction>span{font-size:10px;color:#7a8ba3}.practice-modifiers{margin-bottom:17px}.practice-modifiers .modifier-button{min-height:40px;flex:1;padding:7px 9px}.practice-keypad{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.practice-key{min-height:40px;background:#fff;border:1px solid #d9e2ef;border-bottom:3px solid #d6dfec;border-radius:7px;font-size:13px;line-height:1.2;padding:7px 3px}.practice-key:hover{color:var(--blue);background:#edf3ff;border-color:#acc3f1}.practice-key.is-last{color:var(--blue);background:#eaf1ff;border-color:#b4c9f4}.practice-key.wide-label{font-size:10px}.physical-input{margin-top:16px;font-size:10px;color:#71829b}.physical-input summary{cursor:pointer;width:fit-content}.physical-input p{margin:8px 0}.physical-input input{width:100%;border:1px solid #dbe3ef;border-radius:6px;padding:9px 11px;font-size:12px;background:#f9fbff;color:var(--ink)}.practice-feedback{margin-top:16px;min-height:47px;background:#f7f9fc;color:#62738b;border-radius:8px;padding:12px 14px;font-size:12px}.practice-feedback.success{color:#19633f;background:#edf8f1}.practice-feedback.error{background:#fff6e8;color:#86571a}.practice-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:18px;border-top:1px solid var(--line);margin-top:17px}.practice-bottom>span{font-size:11px;color:var(--muted)}.practice-bottom .button{min-height:39px;padding:8px 15px;font-size:12px}.reference-controls{display:flex;align-items:center;justify-content:space-between;gap:18px}.search-wrap{min-width:0;flex:1;max-width:420px;position:relative;display:flex;align-items:center}.search-wrap>span{position:absolute;left:14px;font-size:23px;color:#8597b1;pointer-events:none}.search-wrap input{width:100%;background:#fff;border:1px solid #dae3ef;border-radius:10px;color:var(--ink);min-height:45px;padding:10px 13px 10px 42px;font-size:12px}.search-wrap input::placeholder{color:#8593a8}.category-filters{display:flex;flex-wrap:wrap;gap:5px}.filter-button{background:none;border:1px solid transparent;border-radius:7px;color:#61738f;padding:7px 11px;font-size:12px}.filter-button[aria-pressed=true]{background:#e7efff;color:#2d5dc6;border-color:#d8e5ff}.result-count{margin:17px 0 13px;color:#7a8aa0;font-size:11px}.shortcut-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.shortcut-card{background:#fff;border:1px solid var(--line);padding:18px;border-radius:12px;min-width:0;display:flex;flex-direction:column}.shortcut-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.shortcut-card h3{font-size:14px;font-weight:600}.shortcut-context{font-size:9px;color:#7b89a1;background:#f3f6fb;border-radius:4px;padding:2px 6px;white-space:nowrap}.shortcut-combo{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 9px}.shortcut-combo kbd{font-size:12px;padding:3px 7px;min-width:28px;text-align:center;border:1px solid #dce5f2;border-bottom:2px solid #ccd8ea;background:#f9fbff;border-radius:5px;color:#365b94}.shortcut-card .windows{font-size:10px;color:#8290a6;margin-bottom:9px}.shortcut-card p{color:#64758c;font-size:11px;line-height:1.75}.shortcut-card .preview-button{border:0;border-top:1px solid #edf1f7;background:none;color:#416fc8;font-size:11px;padding:11px 0 0;margin-top:auto;text-align:left;display:flex;justify-content:space-between;gap:8px}.shortcut-card p:last-of-type{margin-bottom:14px}.empty-state{grid-column:1/-1;text-align:center;border:1px dashed #cad8ee;border-radius:12px;padding:40px 20px;font-size:13px;color:var(--muted)}.empty-state p{margin-bottom:10px}.tips-section{margin-top:52px;padding:28px;border:1px solid #dee7f4;background:#eef3fc;border-radius:16px}.tips-section h2{font-size:18px;margin-bottom:19px}.tips-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.tips-grid h3{font-size:12px;margin-bottom:8px}.tips-grid p{font-size:11px;color:#657791;line-height:1.9}.site-footer{margin-top:39px;border-top:1px solid var(--line);padding:26px 0 35px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:10px;color:#7d8ba1}.site-footer a{color:#657fa8}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:#fff;padding:12px 18px;border:2px solid var(--blue);border-radius:6px}.skip-link:focus{top:10px}.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}.noscript{position:fixed;bottom:10px;left:10px;right:10px;padding:16px;background:#fff0cf;border:1px solid #ddbd76;border-radius:10px;color:#644717;z-index:8}
@media(min-width:1450px){.hero{gap:95px}.hero-visual{margin-left:15px}}
@media(max-width:1050px){.hero{gap:30px}.hero-visual{padding:25px}.hero-keys kbd{min-width:62px;height:65px}.conversion-line{grid-template-columns:68px 1fr}.conversion-arrow{margin-left:140px}.basics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.basic-card{padding:20px}.basic-symbol{float:left;margin:0 15px 8px 0;width:43px;height:40px}.basic-card h3{padding-top:7px}.basic-card p{clear:both}.reference-controls{align-items:flex-start;flex-direction:column}.search-wrap{max-width:none;width:100%}.practice-layout{grid-template-columns:210px minmax(0,1fr)}.practice-card{padding:24px}.section-heading>p{max-width:250px}.section-nav{gap:20px}.nav-progress{font-size:10px}.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.shell{padding:0 24px}.site-header{height:72px}.hero{grid-template-columns:1fr 1fr;gap:25px;padding-top:42px}.hero h1{font-size:40px}.hero-description{font-size:13px}.desktop-break{display:none}.hero-visual{padding:23px 18px 17px}.conversion-line{grid-template-columns:55px 1fr;gap:7px}.platform-label{font-size:10px}.hero-keys{gap:9px}.hero-keys kbd{min-width:53px;height:58px;font-size:21px;padding:7px}.conversion-arrow{margin-left:119px}.hero-tip{font-size:9px}.hero-actions{gap:15px}.hero-actions .button{font-size:12px;padding:10px 15px;gap:12px}.text-link{font-size:11px}.hero-note{font-size:9px}.section-nav{gap:18px}.section-nav a{font-size:12px}.section-nav a span{display:none}.practice-layout{grid-template-columns:1fr}.lesson-sidebar{padding:18px}.lesson-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:13px}.lesson-button{padding:7px 5px;font-size:11px;gap:6px}.lesson-number{width:19px;height:19px;font-size:9px}.storage-note{display:inline-block;border:0;margin:10px 0 0;padding:0 4px}.reset-button{margin-left:12px}.practice-card{padding:26px}.section-heading>p{font-size:11px;max-width:220px}.keyboard-footnote{flex-direction:column;gap:3px}.scroll-hint{display:block}.tips-grid{gap:20px}.site-footer>p:first-child{width:100%}}
@media(max-width:600px){html{scroll-padding-top:77px}.shell{padding:0 18px}.site-header{height:65px;font-size:11px}.header-name{font-size:12px}.header-tag{display:none}.hero{grid-template-columns:1fr;padding:34px 0 30px;gap:30px}.hero h1{font-size:42px;margin-bottom:16px}.hero h1 br{display:none}.hero-description{font-size:13px;max-width:370px}.hero-actions{margin-top:20px;gap:24px}.hero-note{font-size:10px}.hero-visual{transform:none;padding:18px 16px 13px;display:grid;grid-template-columns:1fr 25px 1fr;column-gap:5px;border-radius:17px}.conversion-line{grid-template-columns:1fr;gap:0;text-align:center}.platform-label{margin-bottom:9px;font-size:10px}.hero-keys{justify-content:center;gap:8px}.hero-keys kbd{height:56px;min-width:52px;font-size:21px;border-radius:8px}.mac kbd:first-child{font-size:26px}.hero-keys kbd small{font-size:7px}.conversion-meaning{grid-column:1;font-size:9px;margin-top:8px}.conversion-arrow{margin:36px 0 0;transform:rotate(-90deg);height:40px;text-align:center;font-size:19px}.hero-tip{grid-column:1/-1;justify-content:center;margin-top:16px;padding-top:12px;font-size:10px}.section-nav{gap:0;justify-content:space-between;padding:16px 0}.section-nav a{font-size:11px}.nav-progress{display:none}.section{padding-top:36px}.section-heading{display:block;margin-bottom:18px}.section-heading>p{max-width:none;margin-top:8px;font-size:11px}.section-heading .eyebrow{font-size:9px}h2{font-size:22px}.basics-grid{gap:10px}.basic-card{padding:16px 13px;border-radius:12px}.basic-symbol{float:none;width:auto;font-size:25px;height:30px;margin-bottom:9px}.basic-card:last-child .basic-symbol{font-size:20px}.basic-card h3{font-size:12px;padding-top:0;margin-bottom:7px}.basic-card p{font-size:11px}.basic-example{font-size:10px;padding-top:11px}.context-note{font-size:10px;line-height:1.85;margin-top:12px}.explorer{padding:15px;border-radius:15px}.explorer-top{align-items:flex-start}.modifier-bar{gap:5px}.modifier-button{font-size:9px;gap:4px;min-height:35px;padding:6px 8px}.modifier-button .symbol{font-size:15px}.explorer-top>.subtle-button{font-size:10px;white-space:nowrap}.keyboard-help{font-size:10px;line-height:1.8;margin:12px 0 9px}.keyboard-scroll{margin:0 -4px}.key-detail{grid-template-columns:48px 1fr;gap:11px;padding:13px;margin-top:12px}.detail-key{font-size:21px;min-height:47px;border-radius:8px}.detail-content h3{font-size:13px}.detail-content p{font-size:11px}.detail-chip{font-size:10px;padding:5px 7px}.keyboard-footnote{font-size:9px}.lesson-sidebar{border-radius:15px;padding:16px 13px}.lesson-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.lesson-button{font-size:10px;padding:7px 4px;gap:5px}.lesson-number{width:18px;height:18px;font-size:8px;border-radius:5px}.practice-layout{gap:13px}.practice-card{padding:20px 16px;border-radius:15px}.practice-card h3{font-size:20px}.lesson-description{font-size:12px}.practice-card-top .subtle-button{font-size:11px}.windows-reminder{font-size:10px}.simulation{height:151px;margin:17px 0}.sim-content{height:120px;gap:11px;padding:12px}.sim-document{min-width:0;padding:14px 12px}.sim-document strong{font-size:11px}.sim-clipboard{min-width:80px;padding:10px 7px;font-size:9px}.sim-app{width:49px;height:49px;border-radius:10px;font-size:23px}.sim-small-window{width:78px;font-size:10px}.sim-screenshot{width:135px;height:73px}.input-instruction{font-size:11px}.input-instruction>span{font-size:9px}.practice-modifiers .modifier-button{font-size:9px;padding:6px;gap:4px}.practice-keypad{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.practice-key{min-height:43px}.practice-feedback{font-size:11px;padding:11px 12px}.practice-bottom{align-items:flex-start}.practice-bottom>span{font-size:10px;padding-top:8px}.practice-bottom .button{font-size:11px;white-space:nowrap;padding:8px 11px;gap:12px}.category-filters{gap:2px}.filter-button{font-size:11px;padding:7px 10px}.shortcut-grid{gap:10px}.shortcut-card{padding:14px 12px;border-radius:10px}.shortcut-card-top{align-items:flex-start;flex-direction:column;gap:6px}.shortcut-card h3{font-size:12px}.shortcut-card p{font-size:10px}.shortcut-combo{gap:3px;margin:11px 0 8px}.shortcut-combo kbd{font-size:11px;padding:3px 5px;min-width:24px}.shortcut-card .windows{font-size:9px}.shortcut-card .preview-button{font-size:10px}.tips-section{margin-top:35px;padding:21px;border-radius:14px}.tips-grid{grid-template-columns:1fr;gap:17px}.tips-section h2{font-size:17px;margin-bottom:17px}.tips-grid h3{font-size:12px;margin-bottom:5px}.tips-grid p{font-size:11px}.site-footer{margin-top:27px;padding:20px 0 25px;font-size:9px;gap:8px}.site-footer>p:nth-child(2){width:100%}}
@media(max-width:360px){.shell{padding:0 14px}.hero h1{font-size:37px}.hero-visual{padding-left:10px;padding-right:10px}.hero-keys kbd{min-width:45px}.hero-keys{gap:5px}.basic-card{padding:14px 11px}.modifier-button{padding:6px}.practice-modifiers{gap:4px}.practice-modifiers .modifier-button{font-size:8px}.practice-modifiers .modifier-button .symbol{font-size:13px}.lesson-button{font-size:9px}.input-instruction>span{font-size:8px}.shortcut-grid{grid-template-columns:1fr}.shortcut-card-top{flex-direction:row;align-items:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{body{background:#fff}.site-header,.hero-actions,.section-nav,.practice-layout,.reference-controls,.preview-button,.reset-button{display:none!important}.hero{padding:20px 0}.section{padding-top:20px}.basic-card,.shortcut-card{break-inside:avoid}.shell{max-width:none;padding:0 15px}.hero-visual{box-shadow:none}.shortcut-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.keyboard{min-width:0}.key{min-height:40px}.key-note{display:none}.tips-section{break-inside:avoid}.site-footer{padding-bottom:0}}

/* Workbench: one active panel, with scrolling contained in that panel. */
html:has(.keyboard-workbench){height:100%;scroll-behavior:auto;scroll-padding-top:0}
.keyboard-workbench{height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:68px minmax(0,1fr) auto;background:#f4f7fc}
.workbench-header.shell{width:100%;max-width:1480px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:0 28px}
.workbench-header .home-link{font-size:12px;flex:1}
.workbench-brand{display:flex;align-items:center;gap:11px;flex:1;justify-content:center;white-space:nowrap}
.workbench-brand .brand-key{font-size:29px}
.workbench-brand h1{font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1.4}
.workbench-brand p{font-size:10px;letter-spacing:1.3px;color:var(--muted)}
.workbench-header .nav-progress{flex:1;text-align:right;margin:0;display:block;font-size:11px}
.workbench.shell{width:100%;max-width:1480px;min-width:0;min-height:0;display:flex;flex-direction:column;padding:0 28px}
.workspace-tabs{display:flex;align-items:stretch;gap:26px;min-height:60px;flex-shrink:0;border-bottom:1px solid var(--line)}
.workspace-tabs button{position:relative;min-height:58px;padding:0 6px;background:transparent;border:0;font-size:13px;font-weight:600;color:#66758c;white-space:nowrap;display:flex;gap:8px;align-items:center;justify-content:center}
.workspace-tabs button>span{font-size:19px;font-weight:400}
.workspace-tabs button:hover{color:var(--blue)}
.workspace-tabs button[aria-selected=true]{color:var(--blue)}
.workspace-tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--blue);left:0;right:0}
.workspace-tabs button:focus-visible{outline-offset:-4px;border-radius:6px}
.workbench-main{min-width:0;min-height:0;flex:1;overflow:hidden;outline-offset:-3px}
.workspace-panel{height:100%;min-width:0;min-height:0;overflow:auto;padding:20px 0;scrollbar-width:thin;scrollbar-color:#c6d2e3 transparent}
.workspace-panel[hidden]{display:none!important}
.workspace-panel .section-heading{margin-bottom:15px;flex-shrink:0}
.workspace-panel .section-heading .eyebrow{display:none}
.workspace-panel h2{font-size:20px}
.workspace-panel .section-heading>p{max-width:none;font-size:12px}
#explore,#practice,#shortcuts{display:flex;flex-direction:column}
#explore .explorer{min-height:0;flex:1;overflow:auto;padding:18px 20px;border-radius:16px;scrollbar-width:thin;scrollbar-color:#c6d2e3 transparent}
.live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
#keyboard-capture{display:flex;align-items:center;gap:13px;padding:10px 16px;border:1px dashed #b7c8e7;border-radius:10px;background:#f6f9ff;flex:1;cursor:text;min-width:0;transition:border-color .12s,background .12s}
#keyboard-capture:focus{border-style:solid;border-color:var(--blue);background:#edf3ff;outline-offset:2px}
#keyboard-capture strong{display:block;font-size:13px;font-weight:600;color:#36577f}
#keyboard-capture div>span{display:block;font-size:10px;color:#7889a3;margin-top:2px}
#keyboard-capture>kbd{margin-left:auto;background:#fff;border:1px solid #d9e2f1;border-bottom-width:3px;border-radius:6px;width:28px;height:29px;text-align:center;font-size:12px;color:#8294af;flex-shrink:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:#9aaecb;flex-shrink:0}
#keyboard-capture:focus .live-dot{background:#3266dc;box-shadow:0 0 0 4px #dae6ff}
.live-toolbar>.subtle-button{font-size:11px;white-space:nowrap}
.live-readout{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:10px;min-height:24px;font-size:12px}
#live-key-status{color:#405d85;font-weight:600}
.live-readout>span{font-size:10px;color:var(--muted);display:flex;gap:7px;align-items:center;white-space:nowrap}
.pressed-swatch,.selected-swatch{display:inline-block;width:8px;height:8px;border-radius:3px;background:#ffc366;border:1px solid #e8ac4f}
.selected-swatch{background:#d9e6ff;border-color:#8cadf2;margin-left:9px}
#explore .keyboard-help{margin:5px 0 10px;font-size:10px;line-height:1.6}
#explore .keyboard{min-width:790px;padding:11px;gap:6px}
#explore .key{min-height:52px;gap:5px}
#explore .key-row:first-child .key{min-height:36px}
#explore .key-row:last-child .key{min-height:48px}
.key.is-pressed{background:#ffe2ac!important;color:#6e4208!important;border-color:#e4a33d!important;border-bottom-color:#cc8a27!important;box-shadow:0 0 0 2px #f8c77855,inset 0 -2px 0 #edb653;transform:translateY(1px)}
.key.is-pressed .key-note{color:#81551e!important}
.key.is-pressed .key-main{font-weight:700}
.arrow-cluster.arrow-keys{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-width:0}
.arrow-keys [data-key=Up]{grid-column:2;grid-row:1}
.arrow-keys [data-key=Left]{grid-column:1;grid-row:2}
.arrow-keys [data-key=Down]{grid-column:2;grid-row:2}
.arrow-keys [data-key=Right]{grid-column:3;grid-row:2}
#explore .explorer-top{margin-top:12px;gap:10px}
.explorer-label{font-size:11px;color:var(--muted);white-space:nowrap}
#explore .explorer-top .modifier-bar{flex:1}
#explore .modifier-button{min-height:32px;padding:5px 10px}
#explore .key-detail{margin-top:12px;padding:13px 16px;min-height:100px;grid-template-columns:55px minmax(0,1fr);gap:14px}
#explore .detail-key{min-height:48px;font-size:23px}
#explore .detail-shortcuts{margin-top:8px}
#explore .keyboard-footnote{margin-top:10px}
#practice .practice-layout{flex:1;min-height:0;grid-template-columns:225px minmax(0,1fr);align-items:stretch;overflow:hidden;gap:18px}
#practice .lesson-sidebar{overflow:auto;padding:17px 14px;scrollbar-width:thin;border-radius:16px}
#practice .lesson-list{margin-top:13px;gap:2px}
#practice .lesson-button{padding:8px 7px}
#practice .practice-card{min-height:0;overflow:auto;padding:20px 25px;border-radius:16px;scrollbar-width:thin}
#practice .practice-card-top{margin-bottom:10px}
#practice .simulation{height:145px;margin:15px 0}
#practice .sim-content{height:114px}
#practice .practice-card h3{font-size:21px}
#practice .practice-bottom{margin-top:13px;padding-top:12px}
#practice .storage-note{margin-top:10px;padding-top:10px}
#shortcuts .reference-controls{flex-shrink:0}
#shortcuts .result-count{flex-shrink:0;margin:12px 0}
#shortcuts .shortcut-grid{min-height:0;flex:1;overflow:auto;align-content:start;scrollbar-width:thin;padding:0 3px 12px 0}
#basics .basics-grid{margin-top:20px}
#basics .basic-card{padding:26px 23px}
#basics .basic-card p{font-size:13px}
#basics .tips-section{margin-top:22px}
.basics-practice{margin-top:20px}
.workbench-footer.shell{display:flex;width:100%;max-width:1480px;margin:0 auto;gap:16px;align-items:center;justify-content:space-between;padding:9px 28px;border-top:1px solid var(--line);font-size:10px;line-height:1.4;min-height:36px}
.workbench-footer p{width:auto!important}
.workbench-footer .visitor-stats{width:auto;margin:0;padding:0;border:0;gap:10px;font-size:9px;justify-content:flex-end}
.workbench-footer .visitor-stats small{display:none}
@media(max-height:850px) and (min-width:821px){
  .keyboard-workbench{grid-template-rows:58px minmax(0,1fr) auto}
  .workspace-tabs{min-height:50px}.workspace-tabs button{min-height:49px}
  .workspace-panel{padding:14px 0}.workspace-panel .section-heading{margin-bottom:11px}
  #explore .explorer{padding:13px 16px}#explore .key{min-height:43px}#explore .key-row:first-child .key{min-height:31px}#explore .key-row:last-child .key{min-height:43px}
  #explore .key-detail{padding:10px 13px;min-height:88px;margin-top:9px}#explore .detail-shortcuts{margin-top:6px}
  #practice .practice-card{padding:17px 23px}#practice .simulation{height:125px;margin:12px 0}#practice .sim-content{height:94px}#practice .lesson-button{padding:6px 7px}
}
@media(max-width:820px){
  .keyboard-workbench{grid-template-rows:60px minmax(0,1fr) auto}
  .workbench-header.shell,.workbench.shell{padding-left:18px;padding-right:18px}
  .workbench-header{gap:14px}.workbench-brand{justify-content:flex-start}.workbench-header .home-link{flex:0 0 auto}.workbench-header .nav-progress{font-size:10px}
  .workspace-tabs{gap:19px;min-height:55px}.workspace-tabs button{font-size:12px;min-height:54px;gap:6px}
  .workspace-panel{padding-top:17px}.workspace-panel .section-heading>p{font-size:11px}
  #practice .practice-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px}
  #practice .lesson-sidebar{padding:11px 13px;overflow:hidden}#practice .progress-heading{margin-bottom:7px}
  #practice .lesson-list{display:flex;flex-direction:row;overflow-x:auto;margin-top:9px;padding-bottom:4px;gap:5px;scrollbar-width:thin}
  #practice .lesson-button{width:auto;flex:0 0 auto;font-size:11px;padding:7px;gap:6px}
  #practice .storage-note{display:inline-block;border:0;margin:6px 0 0;padding:0 4px;font-size:9px}#practice .reset-button{display:inline-block;margin:5px 0 0 10px;font-size:9px}
  #practice .practice-card{padding:20px}.workbench-footer.shell{padding:8px 18px}
  #explore .explorer{padding:15px}#explore .explorer-label{display:none}
}
@media(max-width:600px){
  .keyboard-workbench{grid-template-rows:58px minmax(0,1fr) auto}
  .workbench-header.shell,.workbench.shell{padding-left:14px;padding-right:14px}
  .workbench-header .home-link{font-size:10px}.workbench-brand{gap:7px;flex:1;justify-content:flex-end}.workbench-brand h1{font-size:15px}.workbench-brand .brand-key{font-size:24px}.workbench-brand p{font-size:8px}.workbench-header .nav-progress{display:none}
  .workspace-tabs{justify-content:space-between;gap:0;min-height:50px}.workspace-tabs button{font-size:11px;min-height:49px;padding:0 3px;gap:4px}.workspace-tabs button>span{display:none}
  .workspace-panel{padding:14px 0}.workspace-panel h2{font-size:18px}.workspace-panel .section-heading{margin-bottom:12px}.workspace-panel .section-heading>p{margin-top:5px;font-size:10px}
  #explore .explorer{padding:12px;border-radius:12px}.live-toolbar{align-items:stretch;gap:8px}#keyboard-capture{padding:9px 10px;gap:9px}#keyboard-capture strong{font-size:11px}#keyboard-capture div>span{font-size:9px}#keyboard-capture>kbd{display:none}
  .live-toolbar>.subtle-button{font-size:10px;max-width:40px;white-space:normal}.live-readout{display:block;margin-top:8px}.live-readout>span{margin-top:5px;font-size:9px}#live-key-status{font-size:11px}
  #explore .keyboard-help{font-size:9px;margin-top:7px}#explore .key-detail{padding:12px;grid-template-columns:44px minmax(0,1fr);gap:10px}#explore .detail-key{font-size:20px;min-height:43px}
  #explore .explorer-top{flex-wrap:wrap;gap:7px}#explore .explorer-top .modifier-bar{flex:1 0 100%}#explore .explorer-top>.subtle-button{margin-left:auto;padding:0;font-size:10px}#explore .modifier-button{font-size:9px;padding:5px 7px}
  #practice .progress-heading h3{font-size:12px}#practice .practice-card{padding:17px 13px}#practice .practice-card h3{font-size:18px}#practice .lesson-description{font-size:11px}
  #shortcuts .reference-controls{gap:9px}#shortcuts .search-wrap{font-size:11px}#shortcuts .category-filters{gap:0}#shortcuts .filter-button{font-size:10px;padding:6px 8px}
  #basics .basic-card{padding:15px 13px}#basics .basic-card p{font-size:11px}.workbench-footer.shell{font-size:9px;padding:7px 14px;gap:8px}.workbench-footer.shell{flex-wrap:wrap}.workbench-footer .visitor-stats{display:flex;width:100%;justify-content:flex-start;font-size:8px}
}
@media(prefers-reduced-motion:reduce){#keyboard-capture,.key.is-pressed{transition:none;transform:none}}