/* Shared i2PDF app-guide composition, adapted to direct keyboard mappings. */
.keyboard-guide { --guide-accent:var(--accent-readable,var(--accent-hover)); --guide-copy:color-mix(in srgb,var(--muted) 90%,var(--ink)); --guide-line:color-mix(in srgb,var(--accent) 20%,var(--line)); padding-block:44px 46px; }
.keyboard-guide[lang="en"] { --font-body:"Google Sans Flex",sans-serif; font-family:var(--font-body); line-height:1.55; }
.keyboard-guide-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:48px; margin-bottom:30px; }
.keyboard-guide h2 { max-width:650px; margin:0 0 18px; font-size:clamp(25px,2.6vw,32px); font-weight:700; line-height:1.3; letter-spacing:-.5px; }
.keyboard-guide p { margin:0; color:var(--guide-copy); font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.keyboard-guide-intro p { max-width:68ch; font-size:16px; }
.keyboard-guide-art { margin:0; min-width:0; text-align:center; color:var(--guide-accent); }
.keyboard-guide-art svg { display:block; width:100%; height:auto; max-height:260px; }
.keyboard-guide-art figcaption { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.7; }
.keyboard-guide-art-paper { fill:var(--surface); stroke:var(--guide-line); stroke-width:1.5; }
.keyboard-guide-art-soft { fill:var(--accent-soft); }
.keyboard-guide-art-shadow { fill:var(--guide-line); }
.keyboard-guide-art-lines { stroke:var(--line); stroke-width:1; }
.keyboard-guide-art-stroke { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.keyboard-guide-art text { fill:currentColor; text-anchor:middle; font-family:var(--font-body); }
.keyboard-guide-art-label { font-size:11px; font-weight:550; }
.keyboard-guide-art-modifier { font-size:10px; }
.keyboard-guide-art-key { font-size:18px; font-weight:600; }
.keyboard-guide-art .keyboard-guide-art-output { fill:var(--ink); font-size:28px; font-family:"Google Sans Flex","Nirmala UI","Microsoft JhengHei","Malgun Gothic",sans-serif; }
.keyboard-guide-art .keyboard-guide-art-footer { fill:var(--muted); font-size:11px; }
.keyboard-guide-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.keyboard-guide-feature { min-width:0; padding:24px 26px 10px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.keyboard-guide-feature-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.keyboard-guide-icon { flex:0 0 36px; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--guide-accent); background:var(--accent-soft); }
.keyboard-guide-icon .icon { width:19px; height:19px; }
.keyboard-guide h3 { margin:0; color:var(--ink); font-size:17px; font-weight:650; line-height:1.5; }
.keyboard-guide-details { margin-top:15px; border-top:1px solid var(--line); }
.keyboard-guide-details>summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding-block:10px; list-style:none; color:var(--guide-accent); font-size:13px; font-weight:550; cursor:pointer; }
.keyboard-guide-details>summary::-webkit-details-marker { display:none; }
.keyboard-guide-details>summary .icon { flex:0 0 16px; width:16px; height:16px; color:inherit; }
.keyboard-guide-details[open]>summary .icon { transform:rotate(180deg); }
.keyboard-guide-details>summary:hover,.keyboard-guide-related a:hover { text-decoration:underline; text-underline-offset:3px; }
.keyboard-guide-details>summary:focus-visible,.keyboard-guide a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.keyboard-guide-details>div { padding:4px 0 15px; }
.keyboard-guide-details p+p { margin-top:12px; }
.keyboard-guide-key-examples { border-collapse:collapse; table-layout:fixed; width:100%; margin-top:20px; font-size:13px; text-align:start; }
.keyboard-guide-key-examples caption { padding-bottom:10px; text-align:start; font-size:13px; font-weight:600; color:var(--ink); }
.keyboard-guide-key-examples th { color:var(--muted); font-size:12px; font-weight:500; }
.keyboard-guide-key-examples th,.keyboard-guide-key-examples td { padding:8px; border-bottom:1px solid var(--line); text-align:start; overflow-wrap:anywhere; }
.keyboard-guide-key-examples kbd { display:inline-block; padding:2px 5px; margin-block:2px; font:inherit; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; background:var(--canvas); }
.keyboard-guide-glyph { font-family:"Google Sans Flex","Nirmala UI","Microsoft JhengHei","Malgun Gothic",sans-serif; font-size:23px; }
.keyboard-guide-note { display:flex; align-items:start; gap:18px; margin-top:24px; padding:26px; border-inline-start:3px solid var(--accent); border-radius:16px; background:var(--accent-soft); }
.keyboard-guide-note>.keyboard-guide-icon { background:var(--surface); }
.keyboard-guide-note h3 { margin-bottom:10px; }
.keyboard-guide-files { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:30px; align-items:start; padding-top:28px; }
.keyboard-guide-files p+p { margin-top:12px; }
.keyboard-guide-files a { color:var(--guide-accent); text-decoration:underline; text-underline-offset:3px; }
.keyboard-guide-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; margin:0 0 14px; }
.keyboard-guide-specs>div { min-width:0; }
.keyboard-guide-specs dt { color:var(--muted); font-size:12px; margin-bottom:4px; }
.keyboard-guide-specs dd { margin:0; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.keyboard-guide-related { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.keyboard-guide-related>span { color:var(--muted); font-size:13px; }
.keyboard-guide-related a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:600; color:var(--guide-accent); }
.keyboard-guide-related .icon { width:17px; height:17px; }
.keyboard-guide[dir="rtl"] h2 { letter-spacing:0; }
.keyboard-guide[dir="rtl"] .keyboard-guide-related .icon { transform:rotate(180deg); }
@media(max-width:850px) { .keyboard-guide-intro { gap:24px; } .keyboard-guide-feature { padding-inline:20px; } }
@media(max-width:600px) { .keyboard-guide { padding-block:30px; } .keyboard-guide-intro,.keyboard-guide-features,.keyboard-guide-files { grid-template-columns:1fr; } .keyboard-guide-art { width:min(360px,100%); margin-inline:auto; } .keyboard-guide-note { gap:12px; padding:20px 16px; } .keyboard-guide-note>.keyboard-guide-icon { display:none; } .keyboard-guide-files { gap:14px; } .keyboard-guide-specs { grid-template-columns:1fr; } }