/* Guides: long-form pages on the shared night-sea theme */
.guide .display { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 6px 0 18px; }
.guide h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 40px 0 12px; }
.guide p, .guide li { color: var(--text-2); }
.guide .lede { margin-bottom: 8px; color: var(--text); }
.guide code { font: 500 0.9em/1.4 var(--mono); background: rgba(130, 190, 215, .1); padding: 1px 6px; border-radius: 4px; color: var(--text); }
.code { background: rgba(6, 16, 29, .85); border: 1px solid var(--line-2); color: #e7eef6; padding: 18px 20px; border-radius: 12px; overflow-x: auto; max-width: 100%; box-shadow: 0 0 40px rgba(79, 214, 207, .06); }
.code code { background: none; color: inherit; padding: 0; font-size: 0.9rem; line-height: 1.7; }
.guide .weights { border-collapse: collapse; width: 100%; margin: 12px 0 8px; }
.guide .weights th { text-align: left; font-weight: 600; font-size: 0.82rem; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-2); }
.guide .weights td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.guide .weights td:first-child { white-space: nowrap; font-weight: 600; color: var(--text); }
.guide .check { margin-top: 12px; display: flex; gap: 10px; max-width: 560px; flex-wrap: wrap; }
.guide .check label { flex: 1 1 260px; display: block; }
.guide .check input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(6, 16, 29, .75); color: var(--text); font: 500 1rem var(--mono); }
.guide .check input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px rgba(79,214,207,.15); }
@media (max-width: 720px) { .guide .weights td:first-child { white-space: normal; } }