/* User guide of Open Reader, scoped under .ug-root for weebpal.com: style.css. Generated by GUIDE-html/import.py. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/nunito-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-stretch: 75% 125%; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/nunito-sans-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/lora-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/manrope-latin-vietnamese.woff2") format("woff2-variations"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/sites/default/files/userguides/open-reader/assets/fonts/roboto-slab-latin-vietnamese.woff2") format("woff2-variations"); }
.ug-root {
  --c-visitor: #64748b; --c-creator: #2f6b6b; --c-cadmin: #2c4874; --c-admin: #5e4b8b; --c-system: #86652f;
  --r: 14px; --bar-h: 58px;
}
.ug-root, .ug-root.skin-reader { 
  --ink: #16181d; --ink2: #3a3e46; --ink3: #5c6068; --line: #e3ddd2; --line2: #d3cbbd;
  --paper: #fff; --wash: #f5f2ec; --wash2: #ece7de;
  --brand: #86652f; --brand-d: #6b4f22; --brand-dd: #111317; --brand-w: #f7f1e6; --accent: #c9a86f;
  --on-dark: #fff; --on-dark-soft: #e6e1d8; --on-dark-dim: #b9b2a6; --on-brand-dim: #f3e9d6;
  --focus: #86652f; --focus-on-dark: #c9a86f; --device: #16181d; --shade: 17 19 23; --shadow: 40 32 18;
}
.ug-root.skin-evergreen { 
  --ink: #1d2523; --ink2: #4d5753; --ink3: #656c68; --line: #e6e0d5; --line2: #d6cfc2;
  --paper: #fff; --wash: #fbf9f5; --wash2: #f3efe7;
  --brand: #1f7a73; --brand-d: #145e58; --brand-dd: #0b3633; --brand-w: #e8f3f0; --accent: #c8a15a;
  --on-dark: #fff; --on-dark-soft: #d7e7e4; --on-dark-dim: #a9c8c3; --on-brand-dim: #edf6f4;
  --focus: #9a7228; --focus-on-dark: #c8a15a; --device: #1d2523; --shade: 11 30 28; --shadow: 11 54 51;
}
.ug-root.skin-ocean { 
  --ink: #14222a; --ink2: #43535c; --ink3: #58676f; --line: #dce6eb; --line2: #c5d3da;
  --paper: #fff; --wash: #f5f9fb; --wash2: #e8f0f4;
  --brand: #0b6e8c; --brand-d: #095870; --brand-dd: #062f3d; --brand-w: #e4f1f6; --accent: #f2762e;
  --on-dark: #fff; --on-dark-soft: #cfe3ea; --on-dark-dim: #9cc0cc; --on-brand-dim: #e8f4f8;
  --focus: #c66126; --focus-on-dark: #f2762e; --device: #14222a; --shade: 4 24 32; --shadow: 6 47 61;
}
.ug-root.skin-indigo { 
  --ink: #1b1c33; --ink2: #4a4b66; --ink3: #5e5f78; --line: #e2e2ee; --line2: #cbcbdd;
  --paper: #fff; --wash: #f7f7fb; --wash2: #ececf5;
  --brand: #2b2d8f; --brand-d: #25277d; --brand-dd: #15164a; --brand-w: #ebebf8; --accent: #f5b301;
  --on-dark: #fff; --on-dark-soft: #d4d5f0; --on-dark-dim: #a6a8d6; --on-brand-dim: #e3e4f7;
  --focus: #946800; --focus-on-dark: #f5b301; --device: #1b1c33; --shade: 12 12 38; --shadow: 21 22 74;
}
.ug-root.skin-heather { 
  --ink: #251c25; --ink2: #554755; --ink3: #6b5d6b; --line: #e9e0e9; --line2: #d9ccd9;
  --paper: #fff; --wash: #fbf8fb; --wash2: #f2ebf2;
  --brand: #7d4a7d; --brand-d: #653b65; --brand-dd: #371d37; --brand-w: #f5edf5; --accent: #447447;
  --on-dark: #fff; --on-dark-soft: #ecdcec; --on-dark-dim: #c9abc9; --on-brand-dim: #f3e7f3;
  --focus: #447447; --focus-on-dark: #9fd1a2; --device: #251c25; --shade: 30 14 30; --shadow: 55 29 55;
}
.ug-root, .ug-root.typo-reader { 
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --heading-weight: 500; --heading-tracking: -.012em; --body-size: 17px;
}
.ug-root.typo-editorial { --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.01em; --body-size: 17px; }
.ug-root.typo-humanist { --font-display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif; --heading-weight: 800; --heading-tracking: -.015em; --body-size: 16px; }
.ug-root.typo-geometric { --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.02em; --body-size: 16px; }
.ug-root.typo-slab { --font-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif; --heading-weight: 700; --heading-tracking: -.01em; --body-size: 16px; }
.ug-root * { box-sizing: border-box; }
.ug-root { scroll-behavior: smooth; scroll-padding-top: 120px; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
.ug-root { }
}
.ug-root { margin: 0; background: var(--wash); color: var(--ink); font: var(--body-size, 16px)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; }
.ug-root a { color: var(--brand-d); }
.ug-root a:focus-visible, .ug-root button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ug-root .ug-bar :focus-visible, .ug-root .ug-foot :focus-visible, .ug-root .lb :focus-visible { outline-color: var(--focus-on-dark); }
.ug-root img { max-width: 100%; display: block; }
.ug-root kbd { font: 600 .82em/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .15em .4em; border: 1px solid var(--line2);
  border-bottom-width: 2px; border-radius: 5px; background: var(--paper); color: var(--ink); white-space: nowrap; }
.ug-root .ug-ui { font-weight: 600; }
.ug-root .ug-container { width: 100%; margin: 0 auto; padding: 0 .75rem; }
@media (min-width: 576px) {
.ug-root .ug-container { max-width: 540px; }
}
@media (min-width: 768px) {
.ug-root .ug-container { max-width: 720px; }
}
@media (min-width: 992px) {
.ug-root .ug-container { max-width: 960px; }
}
@media (min-width: 1200px) {
.ug-root .ug-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.ug-root .ug-container { max-width: 1320px; }
}
.ug-root main.ug-container { padding-top: 1rem; padding-bottom: 4rem; }
.ug-root .ug-bar { position: sticky; top: 0; z-index: 40; background: var(--brand-dd); color: var(--on-dark); }
.ug-root .ug-bar__in { display: flex; align-items: center; gap: 1.2rem; min-height: var(--bar-h); overflow-x: auto; }
.ug-root .ug-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--on-dark); flex: none; }
.ug-root .ug-mark { width: 32px; height: 32px; flex: none; }
.ug-root .ug-mark svg { width: 100%; height: 100%; display: block; }
.ug-root .ug-brand b { font: var(--heading-weight) 1.12rem/1 var(--font-display); letter-spacing: var(--heading-tracking); }
.ug-root .ug-brand__t { color: var(--on-dark-dim); font-size: .8rem; }
.ug-root .ug-nav { display: flex; gap: .2rem; margin-left: auto; }
.ug-root .ug-nav a { padding: .45rem .75rem; border-radius: 9px; font-size: .88rem; color: var(--on-dark-soft);
  text-decoration: none; white-space: nowrap; }
.ug-root .ug-nav a:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }
.ug-root .ug-nav a.on { background: var(--paper); color: var(--brand-dd); font-weight: 700; }
.ug-root .ug-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem 0 1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line); }
@media (max-width: 767.98px) {
.ug-root .ug-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
.ug-root .ug-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px;
  background: none; border: 1px solid transparent; font-size: .84rem; color: var(--ink2);
  text-decoration: none; white-space: nowrap; }
.ug-root .ug-tabs a:hover { background: var(--wash2); color: var(--ink); }
.ug-root .ug-tabs a.on { background: var(--brand); border-color: var(--brand); color: var(--on-dark); font-weight: 700; }
.ug-root .ug-tabs__n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--wash2); font-size: .68rem; font-weight: 700; color: var(--ink2); }
.ug-root .ug-tabs a.on .ug-tabs__n { background: rgba(255,255,255,.25); color: var(--on-dark); }
.ug-root .ug-tabs a.ug-tabs__sec { background: none; border-color: transparent; font-weight: 700; color: var(--ink); padding-left: 0; }
.ug-root .ug-spine { list-style: none; margin: .4rem 0 1.4rem; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(var(--spine-n, 6), minmax(0, 1fr)); }
.ug-root .ug-spine li { position: relative; display: flex; align-items: stretch; }
.ug-root .ug-spine a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
  padding: .7rem .3rem; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.ug-root .ug-spine a:hover { border-color: var(--brand); background: var(--brand-w); }
.ug-root .ug-spine__i { font-size: 1.5rem; line-height: 1.2; }
.ug-root .ug-spine__n { font-size: .68rem; font-weight: 700; color: var(--ink3); }
.ug-root .ug-spine b { font-size: .9rem; }
.ug-root .ug-spine small { font-size: .74rem; color: var(--ink3); line-height: 1.3; }
.ug-root .ug-spine__arrow { position: absolute; right: -.48rem; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--line2); font-weight: 700; font-size: .85rem; }
.ug-root .ug-spine li.on a { background: var(--brand); border-color: var(--brand); color: var(--on-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
.ug-root .ug-spine li.on .ug-spine__n, .ug-root .ug-spine li.on small { color: var(--on-brand-dim); }
.ug-root .ug-spine--compact li.on a { box-shadow: none; }
.ug-root .ug-spine--compact { margin: 0 0 1.5rem; }
.ug-root .ug-spine--compact a { flex-direction: row; justify-content: center; gap: .35rem; padding: .45rem .3rem; border-top-width: 1px; }
.ug-root .ug-spine--compact .ug-spine__i { font-size: 1rem; }
.ug-root .ug-spine--compact .ug-spine__n, .ug-root .ug-spine--compact small { display: none; }
.ug-root .ug-spine--compact b { font-size: .78rem; }
@media (max-width: 991.98px) {
.ug-root .ug-spine:not(.ug-spine--compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ug-root .ug-spine:not(.ug-spine--compact) li:nth-child(3n) .ug-spine__arrow { display: none; }
.ug-root .ug-spine--compact { display: flex; overflow-x: auto; gap: .3rem; }
.ug-root .ug-spine--compact li { flex: none; }
.ug-root .ug-spine--compact .ug-spine__arrow { display: none; }
}
@media (max-width: 575.98px) {
.ug-root .ug-spine:not(.ug-spine--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .ug-spine:not(.ug-spine--compact) li .ug-spine__arrow { display: none; }
}
.ug-root h1 { font: var(--heading-weight) clamp(1.6rem, 3.8vw, 2.4rem)/1.15 var(--font-display); letter-spacing: var(--heading-tracking); margin: .2rem 0 .8rem; }
.ug-root h1 em, .ug-root .ug-h2 em { font-style: italic; color: var(--brand); }
.ug-root .ug-kicker { font: 500 .82rem/1.4 var(--font-body); color: var(--ink3); margin-left: .5rem; letter-spacing: 0; }
.ug-root .ug-h2 { font: var(--heading-weight) 1.4rem/1.3 var(--font-display); letter-spacing: var(--heading-tracking); margin: 2.4rem 0 .9rem; }
.ug-root .ug-lead { max-width: 52rem; margin: -.2rem 0 1.2rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink2); }
.ug-root .ug-crumb { font-size: .82rem; color: var(--ink3); margin: .6rem 0 0; }
.ug-root .ug-crumb a { color: var(--ink2); text-decoration: none; }
.ug-root h1.ug-h1 { margin: .4rem 0 0; }
.ug-root .ug-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .7rem 0 0; font-size: .9rem; color: var(--ink2); }
.ug-root .ug-meta > span:last-child { margin-left: .35rem; }
.ug-root .ug-why { max-width: 50rem; margin: 1.5rem 0 2.75rem; padding: 1.1rem 1.35rem 1.2rem; background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 0 var(--r) var(--r) 0; }
.ug-root .ug-why__k { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.ug-root .ug-why p:not(.ug-why__k) { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.ug-root .ug-why p + p:not(.ug-why__k) { margin-top: .45rem; }
.ug-root .ug-why__demo { margin-top: .8rem !important; padding-top: .7rem; border-top: 1px dashed var(--line2); font-size: .95rem !important; color: var(--ink2); }
.ug-root .ug-chip { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.ug-root .ug-chip--visitor { background: #f1f5f9; color: #334155; }
.ug-root .ug-chip--creator { background: #e4f0ef; color: #1f5454; }
.ug-root .ug-chip--cadmin { background: #e8eef7; color: #24406a; }
.ug-root .ug-chip--admin { background: #eeeaf6; color: #4a3a78; }
.ug-root .ug-chip--system { background: #f7f1e6; color: #6b4f22; }
.ug-root .ug-bg--visitor { background: var(--c-visitor); }
.ug-root .ug-bg--creator { background: var(--c-creator); }
.ug-root .ug-bg--cadmin { background: var(--c-cadmin); }
.ug-root .ug-bg--admin { background: var(--c-admin); }
.ug-root .ug-bg--system { background: var(--c-system); }
.ug-root .ug-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) {
.ug-root .ug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
.ug-root .ug-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .ug-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .ug-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.ug-root .ug-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgb(var(--shadow) / .10); transform: translateY(-2px); }
.ug-root .ug-card__img { display: block; aspect-ratio: 16 / 10; background: var(--wash2); overflow: hidden; border-bottom: 1px solid var(--line); }
.ug-root .ug-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ug-root .ug-card__t { font-weight: 700; font-size: 1rem; padding: .7rem .85rem 0; line-height: 1.3; }
.ug-root .ug-card__d { font-size: .88rem; color: var(--ink2); padding: .3rem .85rem 0; line-height: 1.45; }
.ug-root .ug-card__m { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .55rem .85rem .8rem; margin-top: auto; }
.ug-root .ug-card__n { font-size: .76rem; color: var(--ink3); margin-left: auto; }
.ug-root .ug-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 576px) {
.ug-root .ug-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.ug-root .ug-who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ug-root .ug-who__card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; }
.ug-root .ug-who__hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.ug-root .ug-who__hd small { margin-left: auto; color: var(--ink3); font-size: .76rem; }
.ug-root .ug-who__i { font-size: 1.2rem; }
.ug-root .ug-who__p { margin: 0 0 .5rem; font-size: .86rem; color: var(--ink3); line-height: 1.45; }
.ug-root .ug-who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ug-root .ug-who li a { display: block; padding: .2rem .3rem; border-radius: 7px; font-size: .9rem; color: var(--ink2); text-decoration: none; }
.ug-root .ug-who li a:hover { background: var(--brand-w); color: var(--brand-d); }
.ug-root .ug-others { display: flex; flex-wrap: wrap; gap: .5rem; }
.ug-root .ug-other { padding: .55rem .9rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.ug-root .ug-other:hover { border-color: var(--brand); }
.ug-root .ug-other small { color: var(--ink3); font-weight: 500; margin-left: .2rem; }
.ug-root .org { display: grid; gap: 0; margin: .4rem 0 1.6rem; }
.ug-root .org__box { display: flex; gap: .85rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: .9rem 1rem; line-height: 1.45; }
.ug-root .org__box b { display: block; font-size: 1.08rem; }
.ug-root .org__box span { color: var(--ink2); font-size: .93rem; }
.ug-root .org__box small { display: block; margin-top: .35rem; color: var(--ink3); font-size: .8rem; }
.ug-root .org__box--run { border-top: 4px solid var(--c-admin); }
.ug-root .org__box--use { flex-direction: column; border-top: 4px solid var(--c-creator); }
.ug-root .org__box--pub { border-top: 4px solid var(--c-visitor); }
.ug-root .org__i { font-size: 1.6rem; line-height: 1; flex: none; }
.ug-root .org__roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.ug-root .org__pair { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: .2rem; }
.ug-root .org__down { width: 2px; height: 18px; background: var(--line2); margin-left: 2.1rem; position: relative; }
.ug-root .org__down::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent;
  border-top-color: var(--line2); border-bottom: 0; }
.ug-root .org__row { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.ug-root .org__f { background: var(--wash); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.ug-root .org__f .org__i { font-size: 1.1rem; }
.ug-root .org__f b { font-size: .9rem; }
.ug-root .org__f small { margin: 0; }
.ug-root .org__f--more { justify-content: center; align-items: center; color: var(--ink3); font-size: .86rem; border-style: dashed; }
.ug-root .org__note { margin: .8rem 0 0; font-size: .86rem; color: var(--ink3); }
@media (max-width: 767.98px) {
.ug-root .org__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .org__pair { grid-template-columns: minmax(0, 1fr); }
}
.ug-root .ug-demo { width: 100%; max-width: 50rem; border-collapse: collapse; margin: .3rem 0 1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: .92rem; }
.ug-root .ug-demo th, .ug-root .ug-demo td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ug-root .ug-demo th { background: var(--wash2); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.ug-root .ug-demo tr:last-child td { border-bottom: 0; }
.ug-root .ug-demo code { font-size: .86rem; }
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root { --bar-h: 88px; }
.ug-root .ug-bar__in { flex-wrap: wrap; align-content: center; gap: .3rem 1rem; overflow: visible; }
.ug-root .ug-nav { flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
}
.ug-root .ug-foot { background: var(--brand-dd); color: var(--on-dark-soft); }
.ug-root .ug-foot__in { display: grid; gap: 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.ug-root .ug-foot__brand { margin: 0 0 .35rem; font: var(--heading-weight) 1.15rem/1.3 var(--font-display); color: var(--on-dark); }
.ug-root .ug-foot p { margin: 0; max-width: 70ch; font-size: .9rem; line-height: 1.6; }
.ug-root .ug-foot__meta { display: flex; flex-direction: column; gap: .3rem; }
.ug-root .ug-foot__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.ug-root .ug-foot__links a + a { padding-left: 1.1rem; border-left: 1px solid rgba(255, 255, 255, .3); }
.ug-root .ug-foot__meta a { color: var(--on-dark); font-weight: 600; padding: .15rem 0; }
.ug-root .ug-foot__meta small { color: var(--on-dark-dim); font-size: .8rem; }
@media (min-width: 768px) {
.ug-root .ug-foot__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
.ug-root .ug-foot__meta { align-items: flex-end; text-align: right; }
.ug-root .ug-foot__links { justify-content: flex-end; }
}
.ug-root .ug-layout { display: block; }
.ug-root .ug-rail { display: none; }
@media (min-width: 992px) {
.ug-root .ug-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.ug-root .ug-rail { display: block; position: sticky; top: calc(var(--bar-h) + 24px); max-height: calc(100vh - var(--bar-h) - 48px);
    overflow-y: auto; }
}
.ug-root .ug-rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.ug-root .ug-rail a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; align-items: start;
  padding: .45rem .5rem .45rem .6rem; margin-left: -2px; border-left: 2px solid transparent;
  text-decoration: none; color: var(--ink2); font-size: .86rem; line-height: 1.45; }
.ug-root .ug-rail a:hover { color: var(--ink); }
.ug-root .ug-rail__n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; color: #fff; opacity: .5; }
.ug-root .ug-rail__t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ug-root .ug-rail a.on { color: var(--ink); font-weight: 600; border-left-color: var(--brand); background: var(--brand-w);
  border-radius: 0 8px 8px 0; }
.ug-root .ug-rail a.on .ug-rail__n, .ug-root .ug-rail a.done .ug-rail__n { opacity: 1; }
.ug-root .ug-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ug-root .ug-steps > li + li { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.ug-root .ug-step { scroll-margin-top: 120px; min-width: 0; }
.ug-root .ug-step__hd { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ug-root .ug-step__hd h2 { margin: 0; font: 650 1.3rem/1.3 var(--font-body); letter-spacing: -.005em; }
.ug-root .ug-num { width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #fff; font-weight: 700; display: grid;
  place-items: center; flex: none; font-variant-numeric: tabular-nums; }
.ug-root .ug-steps > .ug-sys { display: flex; gap: .85rem; align-items: flex-start; max-width: 50rem; margin-top: 1.75rem;
  padding: 1rem 1.2rem; border: 0; border-radius: var(--r); background: var(--brand-w); color: var(--ink); }
.ug-root .ug-steps > .ug-sys:first-child { margin-top: 0; }
.ug-root .ug-steps > .ug-tip { background: var(--paper); border: 1px dashed var(--line2); }
.ug-root .ug-sys__i { font-size: 1.2rem; line-height: 1.5; }
.ug-root .ug-sys b { display: block; margin-bottom: .2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); }
.ug-root .ug-sys ul { margin: 0; padding-left: 1.1rem; }
.ug-root .ug-sys li { margin: .15rem 0; line-height: 1.6; }
.ug-root .ug-step__text { max-width: 68ch; margin: 0 0 1.4rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.ug-root .ug-step__text + .ug-step__text { margin-top: -.8rem; }
.ug-root .ug-step__note { max-width: 68ch; margin: 1rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink2); }
.ug-root .ug-frame { margin: 0; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: var(--paper);
  box-shadow: 0 1px 2px rgb(var(--shadow) / .06), 0 16px 36px -16px rgb(var(--shadow) / .3); }
.ug-root .ug-frame__bar { display: flex; align-items: center; gap: .75rem; padding: .5rem .85rem; background: var(--wash2);
  border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--ink2); }
.ug-root .ug-frame__dots { display: flex; gap: 6px; flex: none; }
.ug-root .ug-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.ug-root .ug-frame__url { flex: 1; min-width: 0; padding: .2rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-root .ug-frame__open { flex: none; font-weight: 600; color: var(--brand-d); text-decoration: none; white-space: nowrap; }
.ug-root .ug-frame__open:hover { text-decoration: underline; }
.ug-root .ug-frame .ug-lock { margin-left: -.4rem; }
.ug-root .ug-frame .ug-shot { border: 0; border-radius: 0; box-shadow: none; }
.ug-root .ug-shot__zoom { position: absolute; top: .65rem; right: .65rem; padding: .25rem .65rem; border-radius: 999px;
  background: rgb(var(--shade) / .8); color: #fff; font-size: .76rem; font-weight: 600; opacity: 0; transition: opacity .15s; pointer-events: none; }
.ug-root .ug-shot:hover .ug-shot__zoom, .ug-root .ug-shot:focus-visible .ug-shot__zoom { opacity: 1; }
@media (hover: none) {
.ug-root .ug-shot__zoom { opacity: 1; }
}
.ug-root .ug-shot { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line2); border-radius: 12px;
  overflow: hidden; background: var(--paper); cursor: zoom-in; box-shadow: 0 6px 18px rgb(var(--shadow) / .08); }
.ug-root .ug-shot img { width: 100%; height: auto; }
.ug-root .ug-shot--phone { max-width: 320px; padding: 7px; background: var(--device); border-color: var(--device); border-radius: 26px; }
.ug-root .ug-shot--phone img { border-radius: 19px; }
.ug-root .ug-open { margin: .55rem 0 0; font-size: .84rem; overflow-wrap: anywhere; }
.ug-root .ug-open a { color: var(--ink3); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ug-root .ug-open a:hover { color: var(--brand-d); text-decoration: underline; }
.ug-root .ug-lock { font-size: .7rem; font-weight: 700; color: var(--ink3); background: var(--wash2); border-radius: 999px;
  padding: .06rem .45rem; margin-left: .4rem; }
.ug-root .ug-pair { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) {
.ug-root .ug-pair { grid-template-columns: minmax(0, 1fr) 260px; }
.ug-root .ug-pair .ug-shot--phone { max-width: 260px; }
}
.ug-root .prog { position: sticky; top: var(--bar-h); z-index: 35; background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgb(var(--shadow) / .06); }
.ug-root .prog__in { display: flex; align-items: center; gap: .8rem; padding-top: .45rem; padding-bottom: .45rem; }
.ug-root .prog__t { font-size: .8rem; color: var(--ink2); white-space: nowrap; }
.ug-root .prog__t b { color: var(--brand-d); }
.ug-root .prog__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--wash2); overflow: hidden; }
.ug-root .prog__bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .18s ease; }
@media (min-width: 992px) {
.ug-root .prog { display: none; }
}
.ug-root .ug-pagers { display: flex; gap: .8rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ug-root .ug-pager { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .95rem;
  text-decoration: none; font-size: .9rem; font-weight: 600; }
.ug-root .ug-pager:hover { border-color: var(--brand); }
.ug-root .ug-pager--n { margin-left: auto; }
.ug-root .lb { position: fixed; inset: 0; z-index: 60; background: rgb(var(--shade) / .96); display: grid; place-items: center; padding: 3.2rem 1rem; }
.ug-root .lb[hidden] { display: none; }
.ug-root .lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.ug-root .lb img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 8px; background: #fff; }
.ug-root .lb figcaption { color: var(--on-dark); font-size: .92rem; text-align: center; }
.ug-root .lb button { position: absolute; background: rgba(255,255,255,.12); color: var(--on-dark); border: 0; border-radius: 999px;
  width: 2.6rem; height: 2.6rem; font-size: 1.2rem; cursor: pointer; }
.ug-root .lb button:hover { background: rgba(255,255,255,.24); }
.ug-root .lb__x { top: 1rem; right: 1rem; }
.ug-root .lb__p { left: 1rem; top: 50%; transform: translateY(-50%); }
.ug-root .lb__nx { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767.98px) {
.ug-root .ug-bar { position: static; }
.ug-root .ug-bar__in { flex-wrap: wrap; gap: .3rem 1rem; padding-top: .55rem; overflow: visible; min-height: 0; }
.ug-root .ug-nav { margin: 0 -.75rem; padding: 0 .75rem .55rem; width: calc(100% + 1.5rem); overflow-x: auto; scrollbar-width: none; }
.ug-root .ug-brand__t { display: none; }
.ug-root .prog { top: 0; }
.ug-root .ug-kicker { display: block; margin: .2rem 0 0; }
}
@media (max-width: 575.98px) {
.ug-root .ug-step__hd h2 { font-size: 1.14rem; }
.ug-root .ug-num { width: 1.9rem; height: 1.9rem; font-size: .85rem; }
.ug-root .ug-step__text, .ug-root .ug-why p:not(.ug-why__k) { font-size: 1rem; }
.ug-root .ug-steps > li + li { margin-top: 2rem; padding-top: 2rem; }
.ug-root .ug-why { margin-bottom: 2rem; padding: 1rem 1.1rem; }
.ug-root .ug-frame__dots { display: none; }
.ug-root .ug-frame__bar { padding: .45rem .6rem; gap: .5rem; }
.ug-root .ug-shot--phone { max-width: 100%; }
.ug-root .lb { padding: 3.6rem .6rem 5rem; }
.ug-root .lb__p, .ug-root .lb__nx { top: auto; bottom: 1rem; transform: none; }
.ug-root .lb__p { left: 1.5rem; }
.ug-root .lb__nx { right: 1.5rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.ug-root .ug-nav a { padding-left: .5rem; padding-right: .5rem; }
}
@media print {
.ug-root .ug-bar, .ug-root .ug-tabs, .ug-root .ug-rail, .ug-root .prog, .ug-root .ug-pagers, .ug-root .ug-open, .ug-root .settingsbar { display: none !important; }
}
.ug-root .settingsbar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 50; width: 44px; height: 96px;
  font-family: var(--font-body); --panel-w: min(500px, calc(100vw - 48px)); }
.ug-root .settingsbar[hidden] { display: none; }
.ug-root .settings__toggle { display: grid; place-items: center; width: 44px; height: 96px; padding: 0; border: 1px solid var(--line);
  border-left: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--paper); color: var(--ink2);
  box-shadow: 0 6px 18px rgb(var(--shadow) / .16); cursor: pointer; transition: color .15s, background .15s; }
.ug-root .settings__toggle:hover { color: var(--brand-d); background: var(--wash2); }
.ug-root .settings__toggle svg { width: 22px; height: 22px; transition: transform .3s ease; }
.ug-root .settings__panel { position: absolute; left: 0; top: 50%; width: var(--panel-w); max-height: calc(100vh - 24px); overflow-y: auto;
  padding: .75rem 1rem 1rem; border: 1px solid var(--line); border-left: 0; border-radius: 0 18px 18px 0;
  background: var(--paper); box-shadow: 0 12px 36px rgb(var(--shadow) / .22);
  translate: calc(var(--panel-w) * -1) -50%; pointer-events: none; opacity: 0; visibility: hidden;
  transition: translate .3s ease, opacity .15s ease, visibility .3s; }
.ug-root .settingsbar[data-open] .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
.ug-root .settingsbar[data-open] .settings__toggle { position: absolute; z-index: 1; left: calc(var(--panel-w) - 34px - .75rem);
  top: calc(50% - var(--panel-h, 560px) / 2 + .75rem); width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; }
.ug-root .settingsbar[data-open] .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 992px) and (hover: hover) {
.ug-root .settingsbar:is(:hover, :focus-within) .settings__panel { translate: 0 -50%; pointer-events: auto; opacity: 1; visibility: visible; }
.ug-root .settingsbar:is(:hover, :focus-within) .settings__toggle { position: absolute; z-index: 1; left: calc(var(--panel-w) - 34px - .75rem);
    top: calc(50% - var(--panel-h, 560px) / 2 + .75rem); width: 34px; height: 34px; border: 0; border-radius: 8px;
    background: transparent; box-shadow: none; }
.ug-root .settingsbar:is(:hover, :focus-within) .settings__toggle svg { width: 18px; height: 18px; transform: rotate(90deg); }
}
.ug-root .settings__title { display: flex; align-items: center; min-height: 34px; margin: 0 0 .5rem; padding-right: 2.6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.ug-root .settings__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.ug-root .settings__group + .settings__group { padding-left: 1rem; border-left: 1px solid var(--line); }
.ug-root .settings__grouphead { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2); }
.ug-root .settings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ug-root .settings__item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 38px; padding: .3rem .55rem;
  border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink);
  font: 500 .9rem/1.3 var(--font-body); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.ug-root .settings__item:hover { background: var(--wash2); }
.ug-root .settings__item[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-w); font-weight: 600; }
.ug-root .settings__item small { margin-left: auto; color: var(--ink3); font-size: .74rem; font-weight: 500; }
.ug-root .settings__dots { display: flex; flex: none; }
.ug-root .settings__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line2); }
.ug-root .settings__dot + .settings__dot { margin-left: -7px; }
.ug-root .settings__aa { display: grid; place-items: center; flex: none; width: 36px; height: 28px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--wash); color: var(--ink); font-size: 16px; line-height: 1; }
.ug-root .settings__reset { width: 100%; margin-top: .75rem; padding: .5rem .6rem; border: 1px solid var(--line2); border-radius: 10px;
  background: none; color: var(--ink2); font: 600 .8rem/1.2 var(--font-body); cursor: pointer; }
.ug-root .settings__reset:hover { background: var(--wash2); color: var(--ink); }
@media (max-width: 991.98px) {
.ug-root .settingsbar { position: absolute; top: .35rem; right: .75rem; left: auto; transform: none; width: 36px; height: 36px;
    --panel-w: min(500px, calc(100vw - 1.5rem)); }
.ug-root .settings__toggle, .ug-root .settingsbar[data-open] .settings__toggle { position: static; width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--on-dark); box-shadow: none; }
.ug-root .settings__toggle:hover, .ug-root .settingsbar[data-open] .settings__toggle { background: rgba(255, 255, 255, .18); color: var(--on-dark); }
.ug-root .settings__toggle svg, .ug-root .settingsbar[data-open] .settings__toggle svg { width: 20px; height: 20px; }
.ug-root .settings__panel { top: calc(100% + .5rem); right: 0; left: auto; max-height: calc(100vh - 5rem);
    border-left: 1px solid var(--line); border-radius: 18px; translate: 0 -.5rem; }
.ug-root .settingsbar[data-open] .settings__panel { translate: 0 0; }
.ug-root .settings__title { padding-right: 0; }
.ug-root .ug-bar__in { padding-right: 3.2rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.ug-root .settingsbar { position: fixed; }
}
@media (max-width: 575.98px) {
.ug-root .settings__cols { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.ug-root .settings__group + .settings__group { padding-left: 0; border-left: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.ug-root .settings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-root .settings__item small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ug-root { scroll-behavior: auto; }
.ug-root .settings__panel, .ug-root .settings__toggle, .ug-root .settings__toggle svg { transition: none; }
}
.ug-root .ug-evidence { padding:.6rem .9rem; margin:0; background:var(--wash2); color:var(--ink3); font-size:.78rem; line-height:1.45; overflow-wrap:anywhere; }
.ug-root .ug-result { border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--r); padding:1.2rem 1.4rem; background:var(--brand-w); list-style:none; }
.ug-root .ug-result>b { display:block; color:var(--brand-d); margin-bottom:.35rem; }
.ug-root .ug-result p { margin:.35rem 0 0; }
.ug-root .ug-search { margin:2rem 0 0; max-width:40rem; }
.ug-root .ug-search label { display:block; margin-bottom:.4rem; font-weight:600; }
.ug-root .ug-search input { width:100%; min-width:0; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line2); border-radius:10px; padding:.65rem .9rem; }
.ug-root .ug-search input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.ug-root .ug-search p { color:var(--ink3); }
.ug-root .ug-who [hidden], .ug-root .ug-search [hidden] { display:none !important; }
@media(max-width:575.98px) {
.ug-root .ug-bar__in { display:block; padding-top:.65rem; }
.ug-root .ug-brand { width:max-content; }
.ug-root .ug-nav { overflow-x:auto; padding:.45rem 0; margin:0; }
.ug-root .ug-nav a { font-size:.79rem; padding:.4rem .6rem; }
.ug-root .ug-brand__t { font-size:.75rem; }
}
@media print {
.ug-root .ug-search { display:none; }
.ug-root .ug-evidence { font-size:9pt; }
.ug-root .ug-result { break-inside:avoid; }
}