:root { --surface-solid: var(--surface); --surface-tint: #edf2fb; --primary-bg: var(--brand); --danger-text: #a4463d; --success: #39755e; }
:root[data-theme="dark"] { --surface-tint: #29354a; --danger-text: #ef9a92; --success: #83c3a5; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { --surface-tint: #29354a; --danger-text: #ef9a92; --success: #83c3a5; } }
.guide-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto 64px; }
.guide-language { display: grid; gap: 18px; }
.guide-language[hidden] { display: none; }
.guide-hero { margin-bottom: 0; }
.guide-language-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.guide-language-control select { min-height: 38px; padding: 7px 32px 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-solid); color: var(--text); font: inherit; }
.guide-jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.guide-jump-links a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.guide-section { scroll-margin-top: 84px; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); box-shadow: var(--shadow); }
.guide-section > h2 { margin: 4px 0 22px; color: var(--brand-dark); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.guide-step-grid, .guide-principles, .guide-type-grid, .example-grid { display: grid; gap: 14px; }
.guide-step-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guide-principles, .guide-type-grid, .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-step-grid article, .guide-principles article, .guide-type-grid article, .example-card { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.guide-step-grid b { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; border-radius: 50%; background: var(--primary-bg); color: var(--primary-text); }
.guide-section h3 { margin: 0 0 8px; color: var(--brand-dark); font-size: 1rem; }
.guide-section p { margin: 0; color: var(--muted); line-height: 1.55; }
.example-card span { display: block; margin-bottom: 10px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.example-card blockquote { margin: 0 0 12px; color: var(--text); font-weight: 650; line-height: 1.55; }
.example-weak { border-left: 4px solid var(--danger-text); }
.example-strong { border-left: 4px solid var(--success, #39755e); }
.guide-review ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0 0 22px; padding-left: 22px; color: var(--text); line-height: 1.5; }
.guide-boundary { padding: 16px 18px; border-left: 4px solid var(--brand); background: var(--surface-tint); color: var(--text) !important; }
@media (max-width: 900px) { .guide-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-nav { align-items: flex-start; } .nav-links { flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 620px) { .guide-main { width: min(100% - 20px, 1180px); } .guide-step-grid, .guide-principles, .guide-type-grid, .example-grid, .guide-review ul { grid-template-columns: 1fr; } .site-nav { display: grid; gap: 12px; } .nav-links { justify-content: flex-start; } .guide-language-control { width: 100%; } }