/* FariDocs 1.21.1 — readable Inter UI and complete 19-generator Guide */
:root {
    --ui-font: Inter, "Aptos", "Segoe UI Variable", "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html, body, button, input, textarea, select { font-family: var(--ui-font); }
body { font-size: 15.5px; line-height: 1.62; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ui-font); line-height: 1.18; letter-spacing: -.025em; }
.document-preview { text-rendering: geometricPrecision; }
body[data-page="home"] p, body[data-page="guide"] p, body[data-page="blog"] p,
body[data-page="terms"] p, body[data-page="privacy"] p { line-height: 1.72; }
.field > span, .generator-toolbar label > span, .section-title p { line-height: 1.45; }

.guide-main { background: linear-gradient(180deg,#f5f9fa 0,#fff 30%); }
.guide-hero { padding-block: 78px 92px; background: radial-gradient(circle at 84% 18%,rgba(84,214,197,.18),transparent 28%),linear-gradient(135deg,#09283c,#0e3d58); }
.guide-hero-inner { max-width: 860px; }
.guide-hero h1 { max-width: 820px; font-size: clamp(38px,5vw,58px); line-height: 1.07; letter-spacing: -.05em; }
.guide-hero p { max-width: 760px; font-size: 16px; }
.guide-hero-meta span { font-size: 10px; line-height: 1.35; }
.guide-layout { grid-template-columns: 270px minmax(0,1fr); gap: 24px; padding-bottom: 100px; }
.guide-sidebar { top: 96px; max-height: calc(100vh - 120px); padding: 22px 18px; overflow-y: auto; scrollbar-width: thin; }
.guide-sidebar strong { font-size: 13px; }
.guide-sidebar a { padding: 7px 0; font-size: 10.5px; line-height: 1.4; }
.guide-content { padding: 10px 34px 30px; }
.guide-content section { grid-template-columns: 54px minmax(0,1fr); gap: 20px; padding: 32px 0; }
.guide-content h2 { font-size: clamp(20px,2vw,25px); }
.guide-content p { max-width: 760px; margin-bottom: 0; color: #596f7d; font-size: 14px; }
.guide-step { width: 42px; height: 42px; font-size: 11px; }
.guide-tip { max-width: 760px; padding: 13px 15px; font-size: 11px; line-height: 1.6; }
.guide-privacy p { font-size: 12px; }

.guide-chooser, .guide-workspace-section, .guide-pro-section, .guide-faq-section {
    width: min(1180px,calc(100% - 48px)); margin: 0 auto 86px; scroll-margin-top: 100px;
}
.guide-section-heading { max-width: 760px; }
.guide-section-heading h2 { font-size: clamp(30px,3.6vw,43px); line-height: 1.12; }
.guide-section-heading p { font-size: 14px; }
.guide-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.guide-choice-grid article { min-width: 0; min-height: 305px; display: flex; flex-direction: column; padding: 24px; border-radius: 15px; box-shadow: 0 12px 34px rgba(11,44,66,.055); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.guide-choice-grid article:hover { transform: translateY(-4px); border-color: #8bcfc7; box-shadow: 0 20px 44px rgba(11,44,66,.1); }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-card-top > span { overflow-wrap: anywhere; color: #138c80; font-size: 9px; line-height: 1.4; letter-spacing: .08em; }
.guide-card-top > b { flex: 0 0 auto; color: #d5e2e6; font-size: 25px; letter-spacing: -.04em; }
.guide-choice-grid h3 { margin: 23px 0 10px; font-size: 21px; }
.guide-choice-grid p { min-height: 70px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.65; }
.guide-choice-grid small { display: block; color: #70838e; font-size: 10.5px; line-height: 1.6; }
.guide-choice-grid a { margin-top: auto; padding-top: 18px; font-size: 11px; }

.guide-workspace-section { padding: 48px; border: 1px solid #b9ddd9; border-radius: 22px; background: radial-gradient(circle at 92% 8%,rgba(84,218,201,.18),transparent 26%),linear-gradient(135deg,#f6fbfb,#eef8f6); }
.guide-workspace-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.guide-workspace-grid article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid #d4e7e6; border-radius: 12px; background: rgba(255,255,255,.78); }
.guide-workspace-grid article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #0e8177; color: #fff; font-size: 9px; font-weight: 900; }
.guide-workspace-grid h3 { margin: 0 0 6px; color: #153c56; font-size: 15px; }
.guide-workspace-grid p { margin: 0; color: #627985; font-size: 11px; line-height: 1.65; }
.guide-workspace-link { display: inline-flex; margin-top: 20px; padding: 10px 14px; border-radius: 8px; background: #123b5d; color: #fff; font-size: 11px; font-weight: 850; }
.guide-pro-grid h3 { font-size: 15px; }
.guide-pro-grid p { font-size: 11px; line-height: 1.65; }
.guide-faq-list details { padding: 19px 20px; }
.guide-faq-list summary { font-size: 12px; line-height: 1.5; }
.guide-faq-list p { font-size: 11px; line-height: 1.65; }

html[data-theme="dark"] .guide-main { background: linear-gradient(180deg,#071a25,#09222e); }
html[data-theme="dark"] .guide-choice-grid article { border-color: #2c4b59; background: #0d2835; box-shadow: none; }
html[data-theme="dark"] .guide-card-top > b { color: #355866; }
html[data-theme="dark"] .guide-choice-grid h3 { color: #edf7fa; }
html[data-theme="dark"] .guide-choice-grid small { color: #98b0bb; }
html[data-theme="dark"] .guide-workspace-section { border-color: #2c625d; background: radial-gradient(circle at 92% 8%,rgba(47,175,159,.16),transparent 28%),linear-gradient(135deg,#0d2a37,#103b3d); }
html[data-theme="dark"] .guide-workspace-grid article { border-color: #31525d; background: rgba(8,31,42,.72); }
html[data-theme="dark"] .guide-workspace-grid h3 { color: #edf7fa; }
html[data-theme="dark"] .guide-workspace-grid p { color: #a8bec7; }
html[data-theme="dark"] .guide-workspace-link { background: #55d5c5; color: #082c38; }

@media (max-width: 1000px) {
    .guide-layout { grid-template-columns: 1fr; }
    .guide-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    body { font-size: 15px; }
    .guide-hero { padding: 52px 20px 70px; }
    .guide-layout { width: calc(100% - 24px); }
    .guide-content { padding: 8px 20px 24px; }
    .guide-content section { grid-template-columns: 1fr; gap: 10px; }
    .guide-choice-grid, .guide-workspace-grid { grid-template-columns: 1fr; }
    .guide-choice-grid article { min-height: 0; }
    .guide-choice-grid p { min-height: 0; }
    .guide-chooser, .guide-workspace-section, .guide-pro-section, .guide-faq-section { width: calc(100% - 24px); }
    .guide-workspace-section { padding: 28px 20px; }
}