.app-guide{--guide-blue: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}.app-guide-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:48px;margin-bottom:30px}.app-guide h2{max-width:650px;margin:0 0 18px;font-size:calc((clamp(25px,2.6vw,32px)) * var(--site-heading-scale));font-weight:700;line-height:1.3;letter-spacing:-.5px}.app-guide p{margin:0;color:var(--guide-copy);line-height:1.8;overflow-wrap:anywhere}.app-guide-intro p{max-width:68ch}.app-guide-audience{margin-block:4px 36px}.app-guide .app-guide-audience>h3,.app-guide .app-guide-feature-section>h3{margin-bottom:18px;font-size:clamp(20px,2vw,23px);font-weight:700}.app-guide-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.app-guide-use-case{min-width:0;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--accent-soft) 30%,var(--surface))}.app-guide-use-case-label{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--guide-copy);font-size:12px;line-height:1.6}.app-guide-use-case h4{margin:0 0 10px;color:var(--ink);font-size:17px;font-weight:650;line-height:1.5}.app-guide-audience-help{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding-top:14px}.app-guide-audience-help p,.app-guide-audience-help a{font-size:14px}.app-guide-audience-help a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--guide-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}.app-guide-audience-help a:hover{text-decoration-thickness:2px}.app-guide-audience-help a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.app-guide-audience-help .icon{width:17px;height:17px}[dir=rtl] .app-guide-audience-help .icon{transform:rotate(180deg)}@media(max-width:850px){.app-guide-audience-grid{grid-template-columns:1fr}.app-guide-use-case{padding:20px}.app-guide-use-case-label{margin-bottom:12px}}.app-guide-art{margin:0;color:var(--guide-blue);min-width:0;text-align:center}.app-guide-art svg{display:block;width:100%;height:auto;max-height:244px}.app-guide-art figcaption{color:var(--muted);font-size:12px;line-height:1.7;margin-top:8px}.guide-art-paper{fill:var(--surface);stroke:var(--guide-line);stroke-width:1.6}.guide-art-soft{fill:var(--accent-soft)}.guide-art-ink{fill:currentColor}.guide-art-lines{stroke:var(--muted);stroke-width:3;stroke-linecap:round;opacity:.42}.guide-art-stroke{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.app-guide-art text{font:600 15px sans-serif;fill:currentColor;text-anchor:middle}.app-guide-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.app-guide-feature{min-width:0;padding:24px 26px 10px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.app-guide-feature-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}.app-guide-icon{flex:0 0 36px;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--guide-blue);background:var(--accent-soft)}.app-guide-icon .icon{width:19px;height:19px}.app-guide h3,.app-guide-feature-heading h4{margin:0;font-size:17px;font-weight:650;line-height:1.5}.app-guide-details{margin-top:15px;border-top:1px solid var(--line)}.app-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-blue);font-size:13px;font-weight:550;cursor:pointer}.app-guide-details>summary::-webkit-details-marker{display:none}.app-guide-details>summary .icon{flex:0 0 16px;width:16px;height:16px}.app-guide-details[open]>summary .icon{transform:rotate(180deg)}.app-guide-details>summary:hover,.app-guide-related a:hover{text-decoration:underline;text-underline-offset:3px}.app-guide-details>summary:focus-visible,.app-guide-related a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.app-guide-details>div{padding:4px 0 15px}.app-guide-details p+p{margin-top:12px}.app-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)}.app-guide-note>.app-guide-icon{background:var(--surface)}.app-guide-note h3{margin-bottom:10px}.app-guide-related{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:8px}.app-guide-related a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--guide-blue)}.app-guide-related .icon{width:17px;height:17px}[dir=rtl] .app-guide-related .icon{transform:rotate(180deg)}.app-guide-files{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:30px;align-items:start;padding-top:28px}.app-guide-files p+p{margin-top:12px}.app-guide-specs{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0 0 14px}.app-guide-specs>div{min-width:0;max-width:100%}.app-guide-specs dt{color:var(--muted);font-size:12px;margin-bottom:4px}.app-guide-specs dd{margin:0;font-size:14px;overflow-wrap:anywhere}:root[data-font=noto-kufi-arabic] .app-guide p{font-size:14px;line-height:2.2;color:var(--guide-copy)}[dir=rtl] .app-guide h2{letter-spacing:0;line-height:1.7}@media(max-width:850px){.app-guide-intro{gap:24px}.app-guide-feature{padding-inline:20px}}@media(max-width:600px){.app-guide{padding-block:30px}.app-guide-intro,.app-guide-features,.app-guide-files{grid-template-columns:1fr}.app-guide-art{width:min(360px,100%);margin-inline:auto}.app-guide-note{gap:12px;padding:20px 16px}.app-guide-note>.app-guide-icon{display:none}.app-guide-files{gap:14px}}
