#view-guide { --guide-navy:#0e2b42; --guide-ink:#18374b; --guide-line:#cce0eb; --guide-light:#f1f9fc; max-inline-size:86rem; margin-inline:auto; }
.guide-hero { color:#f4fbff; background:linear-gradient(135deg,#0c2639,#123b53); border-radius:1.1rem; padding:clamp(1.25rem,4vw,3.6rem); margin-block-end:1.5rem; }
.guide-hero h1 { color:inherit; font-size:clamp(1.85rem,4vw,3.4rem); line-height:1.2; margin-block:.55rem .8rem; }
.guide-hero p { color:#d8edf5; max-inline-size:52ch; font-size:1.05rem; line-height:1.7; }
.guide-hero > span,.guide-hero a { color:#9be9f5; }
.guide-hero > span { display:flex; align-items:center; gap:.5rem; }
.guide-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:1rem; margin-block:1rem 2rem; }
.guide-card { background:#fff; border:1px solid var(--guide-line); border-radius:1rem; padding:1.2rem; box-shadow:0 .5rem 1.5rem #123b5310; display:grid; gap:.7rem; align-content:start; }
.guide-card h2,.guide-card p { margin:0; }
.guide-card h2 a { color:#123b53; text-decoration-color:#4ca5bd; text-underline-offset:.2em; }
.guide-card .button { justify-self:start; }
.guide-card-icon { display:grid; place-items:center; inline-size:2.75rem; block-size:2.75rem; border-radius:.7rem; color:#07677f; background:#e2f6fb; }
.guide-cover { display:block; max-inline-size:100%; max-block-size:24rem; border-radius:.7rem; object-fit:contain; margin-block:.75rem; }
.guide-search,.guide-filter label,.guide-fields label { display:grid; gap:.35rem; }
.guide-search { max-inline-size:28rem; }
.guide-layout { display:grid; grid-template-columns:minmax(11rem,15rem) minmax(0,1fr); gap:clamp(1rem,3vw,3rem); align-items:start; }
.guide-toc { position:sticky; inset-block-start:4.6rem; max-block-size:calc(100dvh - 6rem); overflow:auto; display:grid; gap:.55rem; padding:1rem; border-inline-start:3px solid #72c7d9; }
.guide-toc a { color:#25536b; line-height:1.4; }
.guide-article { max-inline-size:84ch; color:#19384a; line-height:1.75; overflow-wrap:anywhere; }
.guide-article h2 { color:#123b53; font-size:1.55rem; margin-block:2.4rem .65rem; }
.guide-article h3 { font-size:1.23rem; }
.guide-article [id] { scroll-margin-block-start:5rem; }
.guide-article li + li { margin-block-start:.45rem; }
.guide-article a,.guide-neighbors a { color:#085e79; text-underline-offset:.16em; }
.guide-article [dir="ltr"] { unicode-bidi:isolate; }
.guide-article math { overflow:auto; padding:.85rem; margin-block:.6rem; border-radius:.5rem; background:#edf7fb; color:#153a51; text-align:start; direction:ltr; }
.guide-tip,.guide-warning,.guide-flow { padding:.8rem 1rem; border-radius:.55rem; border-inline-start:.25rem solid #31a3bf; background:#eaf8fc; }
.guide-warning { border-color:#ba792b; background:#fff6e7; }
.guide-flow { font-weight:700; }
.guide-article figure { position:relative; margin:1.4rem 0; border:1px solid #c6dce7; border-radius:.8rem; overflow:hidden; background:#f1f8fb; }
.guide-article img { max-inline-size:100%; block-size:auto; display:block; }
.guide-article figcaption { padding:.6rem .85rem; font-size:.93rem; }
.guide-capture::before { content:attr(data-step); position:absolute; inset-inline-start:.5rem; inset-block-start:.5rem; border:2px solid #fff; border-radius:50%; inline-size:1.9rem; block-size:1.9rem; display:grid; place-items:center; background:#075d76; color:#fff; font-weight:700; }
.guide-capture[data-pin="center"]::before { inset-inline-start:44%; inset-block-start:25%; }
.guide-capture[data-pin="bottom"]::before { inset-block-start:67%; }
.guide-controls,.guide-admin-table table { inline-size:100%; border-collapse:collapse; }
.guide-controls th,.guide-controls td,.guide-admin-table th,.guide-admin-table td { padding:.6rem; border-block-end:1px solid #cce0eb; text-align:start; vertical-align:top; }
.guide-controls [data-icon] { display:inline-flex; vertical-align:middle; color:#08708c; margin-inline-end:.3rem; }
.guide-controls th { inline-size:35%; }
.guide-measure { border:1px solid #cce0eb; border-radius:.6rem; padding:.55rem .8rem; margin-block:.5rem; }
.guide-measure summary { color:#153c55; font-weight:650; cursor:pointer; }
.guide-filter,.guide-fields { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); margin-block:.7rem; }
.guide-neighbors { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; border-block-start:1px solid #cce0eb; margin-block-start:2rem; padding-block:1rem; }
.guide-neighbors small { display:block; }
.guide-manager { padding:1rem; }
.guide-manager header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; }
.guide-admin-table { overflow:auto; }
.guide-editor { margin-block:1.5rem; border-block-start:1px solid #cce0eb; padding-block-start:1rem; display:grid; gap:1rem; }
.guide-editor textarea,#guide-visual { inline-size:100%; min-block-size:14rem; }
.guide-editor textarea { font-family:monospace; }
#guide-visual { background:#fff; }
#guide-visual,.guide-preview { padding:1rem; border:1px solid #cce0eb; border-radius:.65rem; }
.guide-image-list { display:flex; flex-wrap:wrap; gap:.6rem; }
.guide-image-list > div { display:grid; gap:.25rem; border:1px solid #cce0eb; padding:.35rem; max-inline-size:10rem; overflow-wrap:anywhere; }
.guide-image-list img { max-inline-size:100%; max-block-size:5rem; object-fit:contain; }
#view-guide :focus-visible,.guide-manager :focus-visible { outline:2px solid #097fa1; outline-offset:2px; }
#view-guide [hidden],.guide-manager [hidden] { display:none !important; }
@media(max-width:800px) {
  .guide-layout { grid-template-columns:minmax(0,1fr); }
  .guide-toc { position:static; max-block-size:16rem; }
  .guide-article { max-inline-size:100%; }
  .guide-controls th,.guide-controls td { padding:.35rem; }
}

.guide-formula-scroll { max-inline-size:100%; overflow:auto; border:1px solid var(--guide-line); border-radius:.65rem; }
.guide-formula-table { inline-size:100%; min-inline-size:34rem; border-collapse:collapse; background:#fff; }
.guide-formula-table th,.guide-formula-table td { padding:.55rem .7rem; border-block-end:1px solid var(--guide-line); text-align:start; vertical-align:top; }
.guide-formula-table thead { background:var(--guide-light); color:var(--guide-navy); }
.guide-formula-table tbody tr:last-child > * { border-block-end:0; }
.guide-formula-table td > span { display:block; direction:ltr; unicode-bidi:isolate; }
.guide-formula-table code { font-size:.8em; font-weight:normal; }

.guide-formula-scroll:focus-visible { outline: 3px solid #005d89; outline-offset: 3px; }
.guide-formula-table { table-layout: fixed; }
.guide-formula-table caption { padding: .45rem .7rem; text-align: start; font-weight: 650; background: var(--guide-light); }
.guide-formula-table thead th:nth-child(1) { width: 31%; }
.guide-formula-table thead th:nth-child(2) { width: 32%; }
.guide-formula-table td > span, .guide-formula-table code { overflow-wrap: anywhere; }

.guide-manager { --guide-navy:#0e2b42; --guide-line:#cce0eb; --guide-light:#f1f9fc; }
.guide-reading,.guide-editor,.guide-preview { min-inline-size:0; }
.guide-article:has(.guide-formula-table) { max-inline-size:none; }
.guide-article:has(.guide-formula-table) :is(p,ol,ul):not(td *,th *) { max-inline-size:84ch; }
.guide-formula-scroll { margin-block:1rem 1.6rem; }
.guide-formula-table caption { background:#e4f5fa; color:var(--guide-navy); }
.guide-formula-table tbody tr:nth-child(even) { background:#f7fbfd; }
.guide-method-note { margin-block-start:.45rem; color:#254e65; font-size:.9em; }
.guide-method-note summary { cursor:pointer; font-weight:600; }
.guide-method-note p { margin-block:.45rem; }
.guide-references { display:grid; gap:.6rem; padding-inline-start:1.6rem; }
.guide-references li { padding:.65rem .8rem; border:1px solid #cce0eb; border-radius:.5rem; background:#f7fbfd; }
.guide-formula-review { padding:1rem; background:#f1f9fc; border:1px solid #cce0eb; border-radius:.65rem; }
.guide-formula-review section { padding-block:.5rem; overflow-wrap:anywhere; }
.guide-preview .guide-toc { position:static; }
@media(max-width:800px) {
  .guide-layout:has(.guide-formula-table) > .guide-toc { padding:.7rem; gap:.35rem; max-block-size:10rem; }
}