:root {
  --paper: #ffffff;
  --wash: #f4effe;
  --wash-2: #f8f6fe;
  --ink: #130a50;
  --ink-2: #2d2566;
  --muted: #6b6a79;
  --mist: #9a90c4;
  --line: #e7e2f2;
  --line-strong: #d6cdf0;
  --brand: #7146e4;
  --brand-deep: #5326c9;
  --brand-tint: #e9e0fd;
  --accent: #f264f8;
  --accent-deep: #e04ae8;
  --on-brand: #ffffff;

  --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --h1: clamp(34px, 4.2vw, 48px);
  --h2: clamp(28px, 3.2vw, 40px);
  --code: 28px;
  --h3: 20px;
  --lede: 18px;
  --body: 16px;
  --small: 14px;
  --micro: 12px;

  --r-card: 20px;
  --r-control: 12px;
  --pill: 999px;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;

  --wrap: 1230px;
  --bar-h: 40px;
  --nav-h: 96px;
  --header-h: 136px;
  --shadow-soft: 0 24px 64px -24px rgba(83, 38, 201, 0.28);
  --shadow-pop: 0 16px 40px -16px rgba(19, 10, 80, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s2)); }
html.cloak-lock, html.nav-open { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font); font-size: var(--body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: var(--s2); top: -60px; z-index: 100; background: var(--ink); color: var(--on-brand); padding: var(--s1) var(--s2); border-radius: var(--pill); }
.skip:focus { top: var(--s1); }

h1 { font-size: var(--h1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); font-synthesis: none; }
h1 .h1-tone { display: block; color: var(--brand); font-weight: 600; }
h2, h3 { color: var(--ink); font-weight: 600; font-size: var(--h3); line-height: 1.35; }
.section-title { font-size: var(--h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; }
.section-title em { font-style: normal; color: var(--brand); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s3); font-size: var(--small); font-weight: 600; color: var(--brand); }
.eyebrow svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); letter-spacing: 0; }
.prose h2 { font-size: 24px; font-weight: 600; margin: var(--s4) 0 var(--s2); }
.prose h3 { font-size: var(--lede); font-weight: 600; margin: var(--s3) 0 var(--s1); }
.prose p { margin: 0 0 var(--s2); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); height: 48px; padding: 0 var(--s3); border-radius: var(--pill); border: 1px solid transparent; font-size: var(--body); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-cta { background: var(--accent); color: var(--ink); }
.btn-cta:hover { background: var(--accent-deep); color: var(--ink); }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-deep); color: var(--on-brand); }
.btn-line { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { background: var(--wash); color: var(--ink); border-color: var(--brand); }
.btn-on-brand { background: transparent; color: var(--on-brand); border-color: rgba(255, 255, 255, .6); }
.btn-on-brand:hover { background: var(--on-brand); color: var(--brand-deep); }
.btn-sm { height: 36px; padding: 0 var(--s2); font-size: var(--small); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-2); background: transparent; flex: none; transition: background-color .2s, color .2s; }
.icon-btn:hover { background: var(--brand-tint); color: var(--brand-deep); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.is-spinning svg { animation: spin .8s linear infinite; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--pill); font-size: var(--micro); font-weight: 600; white-space: nowrap; }
.pill-brand { background: var(--brand-tint); color: var(--brand-deep); }
.pill-quiet { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }

/* notice + header */
.notice { background: var(--brand-deep); color: var(--on-brand); font-size: var(--small); }
.notice-in { display: flex; align-items: center; gap: var(--s2); min-height: var(--bar-h); }
.notice-in svg { width: 16px; height: 16px; fill: var(--accent); flex: none; }
.notice-in p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-in a { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--on-brand); }
.notice-in a:hover { text-decoration: underline; }
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.head-in { display: flex; align-items: center; gap: var(--s4); height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: var(--lede); font-weight: 600; letter-spacing: -0.01em; flex: none; }
.brand img { width: 28px; height: 28px; }
.site-nav { display: flex; gap: var(--s4); flex: 1; }
.site-nav a { font-size: var(--body); font-weight: 500; color: var(--ink-2); text-decoration: none; padding: var(--s1) 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand); }
.head-tools { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.lang { position: relative; }
.lang-trigger { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; padding: 0 12px; border-radius: var(--pill); color: var(--ink-2); font-size: var(--small); font-weight: 500; }
.lang-trigger:hover { background: var(--wash); color: var(--ink); }
.lang-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; flex: none; }
.chev { display: inline-block; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: none; transition: transform .2s; }
[aria-expanded="true"] > .chev { transform: translateY(1px) rotate(-135deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + var(--s1)); min-width: 168px; padding: var(--s1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-pop); z-index: 60; }
.lang-menu a { display: block; padding: var(--s1) 12px; border-radius: var(--s1); text-decoration: none; font-size: var(--small); color: var(--ink-2); }
.lang-menu a:hover { background: var(--wash); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--brand); font-weight: 600; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-drawer { background: var(--paper); border-top: 1px solid var(--line); padding: var(--s2) 0 var(--s3); }
.nav-drawer a { display: block; padding: 12px 0; font-size: var(--lede); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav-drawer .btn { margin-top: var(--s3); width: 100%; border-bottom: 0; }

/* hero */
.hero { position: relative; padding: var(--s4) 0 var(--s4); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.hero-copy .lede { margin: var(--s3) 0 var(--s4); max-width: 30em; font-size: var(--lede); line-height: 1.75; color: var(--muted); }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--pill); background: var(--wash); border: 1px solid var(--line); }
.seg > a { display: inline-flex; align-items: center; gap: var(--s1); height: 48px; padding: 0 var(--s3); border-radius: var(--pill); font-size: var(--body); font-weight: 600; background: transparent; color: var(--ink-2); transition: background-color .2s, color .2s; }
.seg > a:hover { background: var(--paper); color: var(--ink); }
.seg > a[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.seg > a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s3); font-size: var(--small); color: var(--muted); }
.hero-facts li { display: inline-flex; align-items: center; gap: var(--s1); }
.hero-facts svg { width: 16px; height: 16px; fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hero-visual { position: relative; width: 100%; animation: none; }
.halo { position: absolute; inset: -6% 0 auto; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side at 58% 36%, rgba(113, 70, 228, .22), rgba(113, 70, 228, 0)),
              radial-gradient(closest-side at 86% 78%, rgba(242, 100, 248, .14), rgba(242, 100, 248, 0));
  animation: pulse 9s ease-in-out infinite; }
.hero-star { display: none; }
.rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }

/* mail window */
.mail-window { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 600px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.mw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--wash-2); border-bottom: 1px solid var(--line); }
.mw-label { display: block; font-size: var(--micro); font-weight: 500; color: var(--muted); }
.mw-addr { min-width: 0; }
.mw-addr-line { display: flex; align-items: center; gap: 4px; }
.mw-address { display: block; min-width: 0; font-family: var(--mono); font-size: var(--lede); font-weight: 500; letter-spacing: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--s1); }
.mw-address.is-pending { color: var(--muted); font-family: var(--font); font-size: var(--body); }
.mw-tools { display: flex; align-items: center; gap: var(--s1); }
.timer { display: inline-flex; align-items: center; gap: var(--s1); height: 36px; padding: 0 var(--s2); border-radius: var(--pill); background: var(--paper); border: 1px solid var(--line); color: var(--brand-deep); font-family: var(--mono); font-size: var(--small); letter-spacing: 0; }
.timer i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.timer.is-low { color: var(--ink); border-color: var(--accent); }
.timer.is-low i { background: var(--accent); }
.mw-body { flex: 1; display: grid; grid-template-columns: minmax(260px, 32%) minmax(0, 1fr); min-height: 0; }
.mw-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.mw-list-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px 0 var(--s3); border-bottom: 1px solid var(--line); flex: none; }
.mw-title { font-size: var(--small); font-weight: 600; color: var(--ink); }
.mw-count { margin-left: var(--s1); font-weight: 400; color: var(--muted); }
.mw-rows { flex: 1; overflow-y: auto; align-content: start; }
.mw-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; height: 76px; padding: 0 var(--s3) 0 var(--s3); text-align: left; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink-2); }
.mw-row:hover { background: var(--wash-2); color: var(--ink-2); }
.mw-row.is-active { background: var(--wash); color: var(--ink-2); box-shadow: inset 2px 0 0 var(--brand); }
.mw-row-main { min-width: 0; display: grid; gap: 2px; }
.mw-row-top { display: flex; justify-content: space-between; gap: var(--s1); font-size: var(--small); }
.mw-row-top strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-row-top time { flex: none; font-size: var(--micro); color: var(--muted); }
.mw-row-subject { font-size: var(--small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-row.is-unread .mw-row-subject { color: var(--ink-2); font-weight: 500; }
.unread-dot { position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand); }
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--on-brand); font-weight: 600; flex: none; }
.badge svg { width: 18px; height: 18px; max-width: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.badge-sm { width: 36px; height: 36px; font-size: var(--small); }
.badge-md { width: 40px; height: 40px; font-size: var(--body); }
.badge-initial { background: var(--brand-tint); color: var(--brand-deep); }
.mw-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rd-head { padding: var(--s2) var(--s4) var(--s3); border-bottom: 1px solid var(--line); flex: none; }
.rd-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-bottom: var(--s1); }
.rd-actions { display: flex; gap: 4px; margin-left: auto; }
.rd-close { display: none; }
.rd-subject { font-size: var(--h3); font-weight: 600; color: var(--ink); line-height: 1.4; }
.rd-from { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: var(--s2); }
.rd-from strong { display: block; font-size: var(--small); font-weight: 600; color: var(--ink); }
.rd-from span { display: block; font-size: var(--micro); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-from time { font-size: var(--micro); color: var(--muted); white-space: nowrap; }
.rd-body { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4); font-size: var(--small); line-height: 1.8; color: var(--ink-2); }
.rd-body p + p, .rd-body p + div, .rd-body div + p, .rd-body dl + p, .rd-body p + dl { margin-top: 12px; }
.rd-frame { width: 100%; height: 100%; min-height: 360px; border: 0; }
.rd-text { white-space: pre-wrap; word-break: break-word; }
.rd-foot { display: flex; gap: var(--s1); padding: var(--s2) var(--s4); border-top: 1px solid var(--line); flex: none; }
.is-real [data-demo-pill] { display: none; }
.mail-lead { font-size: var(--body); font-weight: 600; color: var(--ink); }
.mail-code { margin: var(--s2) 0; padding: var(--s2) var(--s3); background: var(--wash); border-radius: var(--r-control); font-family: var(--mono); font-size: var(--code); font-weight: 600; letter-spacing: .12em; color: var(--ink); }
.mail-receipt { margin: var(--s2) 0; border-top: 1px solid var(--line); }
.mail-receipt div { display: flex; justify-content: space-between; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mail-receipt dt { color: var(--muted); }
.mail-receipt dd { color: var(--ink); font-weight: 500; }
.mail-disclaimer { margin-top: var(--s3) !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--micro); color: var(--muted); }
.mw-empty { display: grid; place-items: center; height: 100%; padding: var(--s4) var(--s2); }
.empty-card { width: min(420px, 100% - 32px); padding: var(--s2) var(--s3); text-align: center; }
.empty-card svg { width: 40px; height: 40px; margin: 0 auto var(--s1); fill: var(--brand-tint); }
.empty-card strong { display: block; color: var(--ink); font-size: var(--small); }
.empty-card span { font-size: var(--micro); color: var(--muted); }

/* sections */
.section { padding: var(--s6) 0; }
.section-wash { background: var(--wash); }
.section-head { max-width: 760px; margin: 0 auto var(--s5); text-align: center; }
.section-head p { margin-top: var(--s3); color: var(--muted); }
.trust { padding: var(--s3) 0 var(--s6); text-align: center; }
.trust > .wrap > p { font-size: var(--small); font-weight: 600; color: var(--brand); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.trust-row li { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--lede); font-weight: 600; color: var(--mist); }
.trust-row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.equation { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: var(--s3); }
.eq-card { display: grid; place-content: center; gap: var(--s1); min-height: 152px; padding: var(--s4) var(--s3); border-radius: var(--r-card); background: var(--wash); text-align: center; }
.eq-card h3 { font-size: var(--h3); color: var(--ink); }
.eq-card p { font-size: var(--small); color: var(--muted); }
.eq-card-solid { background: var(--brand); color: var(--on-brand); }
.eq-card-solid h3 { color: var(--on-brand); }
.eq-card-solid p { color: rgba(255, 255, 255, .82); }
.eq-op { text-align: center; font-size: var(--h3); font-weight: 600; color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: center; }
.split-copy > p { margin-top: var(--s2); color: var(--muted); }
.tip { margin-top: var(--s4); padding-left: var(--s3); border-left: 2px solid var(--brand); color: var(--ink); font-weight: 500; }
.stat { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--wash-2); }
.stat strong { font-size: var(--h2); font-weight: 600; color: var(--ink); line-height: 1; white-space: nowrap; letter-spacing: -0.02em; }
.stat span { font-size: var(--small); color: var(--ink-2); }
.feed { padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--wash); }
.feed-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s2); border-bottom: 1px solid var(--line-strong); font-size: var(--small); font-weight: 600; color: var(--ink); }
.feed-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); min-height: 72px; border-bottom: 1px solid var(--line-strong); }
.feed-row:last-child { border-bottom: 0; }
.feed-row strong { display: block; font-size: var(--small); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row span { display: block; font-size: var(--micro); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row time { font-size: var(--micro); color: var(--muted); white-space: nowrap; }
.feed-star { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); }
.feed-star svg { width: 18px; height: 18px; fill: var(--brand); }
.statement { background: var(--wash); clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); padding: var(--s7) 0; }
.statement p { max-width: 960px; margin: 0 auto; text-align: center; font-size: var(--body); font-weight: 400; line-height: 1.8; letter-spacing: -0.02em; color: var(--brand); }
.statement svg { display: inline-block; width: .8em; height: .8em; fill: var(--accent); vertical-align: -0.05em; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.duo-card { padding: var(--s4); border-radius: var(--r-card); background: var(--wash); display: grid; gap: var(--s2); align-content: start; }
.duo-card-line { background: var(--paper); border: 1px solid var(--line); }
.duo-card > p { color: var(--muted); }
.duo-card .btn { justify-self: start; margin-top: var(--s1); }
.center-link { margin-top: var(--s4); text-align: center; }
.center-link a { color: var(--brand); font-weight: 600; text-decoration: none; }
.center-link a:hover { text-decoration: underline; }
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-right: var(--s1); }
.faq details[open] summary .chev { transform: translateY(1px) rotate(-135deg); }
.faq details p { padding: 0 0 var(--s3); max-width: 46em; color: var(--ink-2); }
.faq a { color: var(--brand); font-weight: 500; }
.closer { padding: var(--s5); border-radius: var(--r-card); background: var(--brand); color: var(--on-brand); text-align: center; }
.closer h2 { font-size: var(--h2); font-weight: 500; letter-spacing: -0.02em; color: var(--on-brand); }
.closer p { margin: var(--s2) auto 0; max-width: 34em; color: rgba(255, 255, 255, .86); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.closer .actions { justify-content: center; }

/* footer */
.site-foot { background: var(--wash-2); border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s4); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.foot-brand p { margin: var(--s2) 0 var(--s3); max-width: 26em; font-size: var(--small); color: var(--muted); }
.support { display: grid; gap: 12px; padding: var(--s3); border-radius: var(--r-card); background: var(--paper); max-width: 360px; }
.support strong { color: var(--ink); font-size: var(--small); }
.support span { font-size: var(--small); color: var(--muted); }
.support .btn { justify-self: start; }
.foot-col h3, .foot-col > strong { display: block; font-size: var(--small); font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }
.foot-col li + li { margin-top: 12px; }
.foot-col a { font-size: var(--small); color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--brand); }
.foot-base { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--micro); color: var(--muted); }

/* toast */
.toast { position: fixed; left: 50%; bottom: var(--s4); z-index: 90; padding: 12px var(--s3); border-radius: var(--pill); background: var(--ink); color: var(--on-brand); font-size: var(--small); box-shadow: var(--shadow-pop); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); }
 to { opacity: 1; transform: none; }
 }
@keyframes drift { 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-8px); }
 }
@keyframes pulse { 0%, 100% { opacity: .85; }
 50% { opacity: 1; }
 }
@keyframes spin { to { transform: rotate(360deg); }
 }

@media (max-width: 1100px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .hero-star { display: none; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --nav-h: 72px; }
  .site-nav, .lang-label, .head-tools > .btn-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .head-in { gap: var(--s2); }
  .hero-visual, .mail-window { animation: none; transform: none; }
  .equation { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .eq-card { min-height: 0; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .section { padding: var(--s5) 0; }
  .statement { padding: var(--s6) 0; }
  .closer { padding: var(--s4) var(--s3); }
}
@media (max-width: 760px) {
  .mail-window { min-height: 0; }
  .mw-bar { padding: var(--s2); }
  .mw-address { font-size: var(--body); }
  .mw-tools { width: 100%; }
  .mw-body { grid-template-columns: minmax(0, 1fr); }
  .mw-list { border-right: 0; }
  .mw-rows { overflow: visible; }
  .mw-reader { display: none; }
  .is-reading .mw-reader { display: flex; position: fixed; top: var(--sheet-top, var(--nav-h)); left: 0; right: 0; bottom: 0; z-index: 70; background: var(--paper); color: var(--ink-2); overflow-y: auto; }
  .is-reading .rd-head { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: var(--s1) var(--s2) var(--s2); }
  .rd-close { display: inline-flex; }
  .rd-body { overflow: visible; padding: var(--s3) var(--s2); }
  .rd-foot { padding: var(--s2); }
  .rd-frame { min-height: 60vh; }
  .feed { padding: var(--s2); }
  .feed-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .feed-row time { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .notice-in p { white-space: normal; }
  .seg { display: flex; }
  .seg > a { flex: 1; padding: 0 var(--s2); font-size: var(--small); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* Shared surfaces and interaction states */
[hidden] { display: none !important; }
:root {
  --field-h: 48px;
  --ink-soft: rgba(19, 10, 80, .12);
  --scrim: rgba(19, 10, 80, .36);
  --brand-glow: rgba(113, 70, 228, .16);
}
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
input, textarea, button { -webkit-tap-highlight-color: transparent; }
input, textarea { font-family: var(--font); }
input, textarea, fieldset { min-width: 0; }
h1 em { font-style: normal; font-weight: inherit; }
.section-intro { margin-top: var(--s3); color: var(--muted); max-width: 44em; }
.section-head .section-intro { margin-inline: auto; }
.actions > .btn, .duo-card .btn, .support .btn, .notice-in a {
  max-width: 100%;
  white-space: normal;
  min-height: 48px;
  height: auto;
  padding-block: 12px;
  line-height: 1.35;
}
.support .btn-sm { min-height: 36px; padding-block: var(--s1); }
.seg > a { text-decoration: none; justify-content: center; }
.mw-row-top { align-items: center; }
.mw-body { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.mw-reader { max-height: 640px; overflow: auto; }
.rd-body { overscroll-behavior: auto; }
.rd-from { grid-template-columns: 36px minmax(0, 1fr) auto; }
.badge-md { width: 36px; height: 36px; font-size: var(--small); }
.reader-letterhead { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); color: var(--ink); font-weight: 600; }
.reader-letterhead .badge { flex: none; }
.reader-letterhead svg { width: 18px; height: 18px; max-width: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.is-real .reader-letterhead[data-demo-letterhead] { display: none; }
.is-empty .rd-head, .is-empty .rd-foot { display: none; }
.is-empty .rd-body, .mw-rows:has(> .mw-empty) { display: grid; place-items: center; padding: var(--s2); }
.mw-empty { padding: var(--s2); min-height: 0; }
.empty-card { min-height: 0; height: auto; background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-control); }
.empty-card p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.empty-card span { display: block; margin-top: var(--s1); }
.halo {
  background: radial-gradient(ellipse at 65% 45%, var(--brand-glow), transparent 68%);
}
.split-copy > .eyebrow { margin-top: 0; margin-bottom: var(--s3); }
.split-copy > .section-intro { margin-top: var(--s3); }
.duo-card > .pill { justify-self: start; }
.duo-card > .btn { margin-top: var(--s2); }
.foot-col a { overflow-wrap: anywhere; }
.foot-brand { min-width: 0; }
.support { max-width: 100%; }
.support .btn { overflow-wrap: anywhere; }
.chev {
  position: static;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  transform: rotate(45deg);
}
[aria-expanded="true"] > .chev, .faq details[open] summary .chev {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.lang-trigger { position: relative; padding-right: 32px; }
.lang-trigger > .chev {
  position: absolute;
  right: 12px;
  top: 50%;
  margin: 0;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
.lang-trigger[aria-expanded="true"] > .chev {
  transform: translateY(calc(-50% + 2px)) rotate(-135deg);
}
.lang-menu a[aria-current] { background: var(--wash); color: var(--brand-deep); }
.x-short { display: none; }
.nav-drawer { position: absolute; left: 24px; right: auto; top: 100%; width: min(360px, calc(100% - 48px)); z-index: 80; border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-pop); text-align: left; padding: var(--s2); }
.nav-drawer .wrap { width: 100%; }
.nav-drawer a { text-align: left; font-size: var(--body); }
.nav-drawer a[aria-current="page"] { padding-inline: var(--s2); background: var(--wash); color: var(--brand-deep); border-radius: var(--r-control); }
.toast { display: block; width: max-content; max-width: min(430px, calc(100% - 32px)); text-align: center; border-radius: var(--r-control); overflow-wrap: anywhere; visibility: hidden; }
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--brand-deep); color: var(--on-brand); }

/* Fields */
.form-stack { display: grid; gap: var(--s3); }
.field { display: grid; gap: var(--s1); min-width: 0; }
.field label, .field-label { color: var(--ink); font-size: var(--small); font-weight: 500; }
.field input, .field textarea, .text-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--field-h);
  padding: 12px var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .2s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, .text-input::placeholder { color: var(--muted); opacity: 1; font-size: var(--small); }
.field input:focus, .field textarea:focus, .text-input:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.field input[aria-invalid="true"], .text-input[aria-invalid="true"] { border-color: var(--brand-deep); }
.field-hint { color: var(--muted); font-size: var(--micro); }
.field-error, .form-error { color: var(--brand-deep); font-size: var(--small); }
.form-error { background: var(--wash); padding: 12px var(--s2); border-radius: var(--r-control); }
.form-note { font-size: var(--small); color: var(--muted); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.form-row > .field { flex: 1 1 200px; }
.code-input { font-family: var(--mono); letter-spacing: .12em; font-size: var(--lede); }
.check-row { display: flex; align-items: flex-start; gap: 12px; font-size: var(--small); color: var(--ink-2); }
.check-row input { margin: 6px 0 0; width: 16px; height: 16px; accent-color: var(--brand-deep); }
fieldset { margin: 0; padding: var(--s3); border: 0; border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.fieldset-title { margin-bottom: var(--s2); color: var(--ink); font-weight: 600; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.choice-card { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); text-align: left; }
.choice-card[aria-pressed="true"] { background: var(--brand-tint); color: var(--ink); outline: 1px solid var(--brand); outline-offset: -1px; }
.choice-card svg, .feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.choice-card p { font-size: var(--small); font-weight: 400; color: var(--muted); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-control); background: var(--brand-tint); color: var(--brand-deep); }
.result-panel { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.result-panel .status-pill { margin-top: var(--s3); }

/* Status and menus */
.status-pill { display: inline-flex; align-items: center; gap: var(--s1); width: fit-content; max-width: 100%; padding: 4px 12px; border-radius: var(--pill); font-size: var(--micro); line-height: 1.5; font-weight: 500; background: var(--brand-tint); color: var(--brand-deep); }
.status-pill.is-muted, [data-2fa-badge] { background: var(--brand-tint); color: var(--ink); }
.status-pill.is-solid { background: var(--brand-deep); color: var(--on-brand); }
.status-pill.is-attention { background: var(--accent); color: var(--ink); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.filter { position: relative; display: inline-flex; width: fit-content; max-width: 100%; }
.filter-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; min-height: 40px; padding: var(--s1) var(--s2); border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--paper); color: var(--ink); font-size: var(--small); line-height: 1.4; }
.filter-trigger:hover { background: var(--brand-tint); color: var(--ink); }
.filter-menu { position: absolute; top: calc(100% + var(--s1)); left: 0; z-index: 35; width: max-content; min-width: 160px; max-width: min(280px, calc(100vw - 48px)); padding: var(--s1); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); }
.filter-menu button, .filter-menu [role="option"] { display: flex; align-items: center; width: 100%; padding: 12px; border-radius: var(--r-control); background: var(--paper); color: var(--ink-2); font-size: var(--small); text-align: left; }
.filter-menu button:hover, .filter-menu [aria-selected="true"] { background: var(--wash); color: var(--brand-deep); }
.compact-details { padding: var(--s2); border-radius: var(--r-control); background: var(--wash-2); color: var(--ink-2); }
.compact-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); list-style: none; cursor: pointer; color: var(--ink); font-weight: 500; }
.compact-details > summary::-webkit-details-marker { display: none; }
.compact-details[open] > summary { margin-bottom: var(--s3); }

/* Tables and cards */
.table-scroll { margin: var(--s3) 0 var(--s4); overflow-x: auto; border-radius: var(--r-card); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--paper); color: var(--ink-2); font-size: var(--small); }
.data-table th { background: var(--wash); color: var(--ink); font-weight: 500; }
.data-table th, .data-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td .btn { vertical-align: middle; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.surface-card { padding: var(--s4); background: var(--wash); color: var(--ink-2); border-radius: var(--r-card); }
.surface-card > p { margin-top: var(--s2); color: var(--muted); }
.surface-card .feature-icon { margin-bottom: var(--s3); }
.surface-card .actions { margin-top: var(--s3); }
.use-case-card { padding: var(--s4); background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-card); }
.use-case-card h3 + p { margin-top: var(--s2); }
.surface-solid { background: var(--brand); color: var(--on-brand); }
.surface-solid h2, .surface-solid h3 { color: var(--on-brand); }
.surface-solid p, .surface-solid .section-intro { color: rgba(255, 255, 255, .86); }
.surface-solid .eyebrow { color: var(--on-brand); }
.surface-solid .btn-line { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.surface-solid .btn-line:hover { background: var(--brand-tint); color: var(--ink); border-color: var(--brand-tint); }

/* Independent access pages */
.page-hero { padding: var(--s5) 0; }
.page-hero .section-intro { max-width: 44em; }
.page-hero .actions { margin-top: var(--s4); }
.page-hero.is-centered { text-align: center; }
.page-hero.is-centered .eyebrow, .page-hero.is-centered .section-intro { margin-inline: auto; }
.page-hero.is-centered .actions { justify-content: center; }
.auth-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--wrap), 100% - 48px); max-width: var(--wrap); margin-inline: auto; padding: var(--s5) 0 var(--s6); gap: var(--s5); align-items: start; }
.auth-story { min-width: 0; padding: var(--s4) 0 var(--s5); }
.auth-story h1 { line-height: 1.24; }
.auth-story .section-intro { margin-bottom: var(--s4); }
.auth-story .feature-icon { margin-bottom: var(--s3); }
.auth-panel { min-width: 0; padding: var(--s4); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.auth-panel h2 { margin-bottom: var(--s2); font-size: var(--code); font-weight: 500; }
.auth-panel > p { margin-bottom: var(--s3); color: var(--muted); }
.auth-panel input { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.auth-pane { display: grid; gap: var(--s3); }
.auth-pane .form-stack { gap: var(--s3); }
.auth-notice { padding: 12px var(--s2); margin-block: var(--s2); border-radius: var(--r-control); background: var(--paper); color: var(--ink-2); font-size: var(--small); overflow-wrap: anywhere; }
.auth-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.auth-secondary .btn { height: 48px; background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.auth-secondary .btn:hover { background: var(--brand-tint); color: var(--ink); }
.auth-session { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--wash-2); color: var(--ink); }
.auth-session p { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: var(--small); }

/* Alias workspace */
.desk { padding: var(--s5) 0 var(--s6); }
.desk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.desk-head h1 { font-size: var(--h2); line-height: 1.24; }
.desk-head .eyebrow { margin-bottom: var(--s3); }
.desk-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
[data-session-email] { overflow-wrap: anywhere; font-size: var(--small); color: var(--muted); }
.desk-sections { display: grid; gap: var(--s5); }
.alias-surface { padding: var(--s4); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.module-head h2 { font-size: var(--code); font-weight: 500; }
.module-head p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.alias-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: end; }
.alias-address-input { display: flex; align-items: center; gap: var(--s1); min-width: 0; padding-right: var(--s2); border-radius: var(--pill); background: var(--paper); color: var(--ink); }
.alias-address-input:focus-within { outline: 1px solid var(--ink); outline-offset: 2px; }
.alias-address-input .text-input { min-width: 0; border: 0; border-radius: var(--pill); }
.alias-address-input .text-input:focus { border: 0; outline: none; }
.alias-suffix { color: var(--muted); font-family: var(--mono); font-size: var(--small); white-space: nowrap; }
.alias-compose .btn { height: var(--field-h); font-size: var(--small); }
.alias-compose [data-random-prefix] { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.alias-compose [data-random-prefix]:hover { background: var(--brand-tint); color: var(--ink); border-color: var(--brand); }
.alias-list, .alias-empty { margin-top: var(--s3); }
.alias-list { display: grid; gap: var(--s1); }
.alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--paper); color: var(--ink-2); }
.alias-row .alias-address { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--small); letter-spacing: 0; color: var(--ink); }
.alias-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); }
.alias-empty { padding: var(--s3); background: var(--paper); color: var(--ink-2); border-radius: var(--r-control); }
.alias-empty h3 { margin-bottom: var(--s1); }
.alias-empty p { color: var(--muted); font-size: var(--small); }
.alias-detail { margin-top: var(--s2); padding: var(--s3); background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-control); }

/* Forwarding archive */
.archive-surface { min-width: 0; padding: var(--s4) 0; color: var(--ink-2); }
.archive-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.archive-tools .field { flex: 1 1 240px; }
.archive-list { display: grid; gap: var(--s1); border-top: 0; }
.archive-row { min-width: 0; }
.archive-row > button, button.archive-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; margin: 0; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-control); background: var(--wash-2); color: var(--ink-2); text-align: left; font: inherit; }
.archive-row > button:hover, button.archive-row:hover { background: var(--wash); color: var(--ink); }
.archive-row-copy { min-width: 0; }
.archive-row-copy strong { display: block; font-size: var(--small); font-weight: 500; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.archive-row-copy > span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-row-meta { display: flex; align-items: center; justify-content: end; gap: var(--s2); }
.archive-row-meta time { font-size: var(--micro); color: var(--muted); white-space: nowrap; }
.archive-empty { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-control); background: var(--wash-2); color: var(--ink-2); }
.archive-empty p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.archive-detail { margin-top: var(--s3); padding: var(--s4); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.archive-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); }
.archive-detail-head > div { min-width: 0; }
.archive-detail-head h3 { overflow-wrap: anywhere; }
.archive-detail-head .btn, .archive-detail-head .icon-btn { align-self: flex-start; flex: none; height: 36px; }
.archive-detail-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); font-size: var(--small); color: var(--muted); }
.archive-detail-body { background: var(--paper); color: var(--ink-2); border-radius: var(--r-control); padding: var(--s3); overflow: auto; }
.archive-detail-body iframe { display: block; width: 100%; min-height: 400px; border: 0; background: var(--paper); }
.archive-detail-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--small); font-family: var(--mono); }
.archive-wait .status-pill { margin-top: var(--s2); }

/* Authenticator */
.surface-safety { padding: var(--s4); background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-card); }
.twofa-idle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.twofa-idle > div:first-child { flex: 1 1 320px; }
.twofa-idle h2 { font-size: var(--code); font-weight: 500; }
.twofa-idle p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.twofa-status { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: var(--small); }
.twofa-status [data-2fa-badge] { margin: 0; }
.twofa-idle > .btn { align-self: center; flex: none; width: auto; }
.twofa-short-steps { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.twofa-short-steps li, .twofa-step { display: flex; align-items: flex-start; gap: 12px; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); font-size: var(--small); font-family: var(--mono); flex: none; }
.twofa-setup { margin-top: var(--s3); margin-bottom: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); background: var(--wash-2); color: var(--ink-2); }
.setup-grid { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.twofa-qr { display: block; width: 184px; height: 184px; aspect-ratio: 1; padding: var(--s1); background: var(--paper); border-radius: var(--r-control); object-fit: contain; }
.twofa-steps { display: grid; gap: var(--s3); }
.twofa-step > div { min-width: 0; flex: 1; }
.twofa-step h3 { font-size: var(--body); }
.twofa-step p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.secret-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.secret-row code { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--small); color: var(--ink); background: var(--paper); padding: 12px var(--s2); border-radius: var(--r-control); }
.secret-row .btn { width: auto; flex: none; }
.twofa-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.twofa-actions input { flex: 0 1 184px; height: 48px; }
.twofa-actions .btn { height: 48px; margin: 0; }
.twofa-actions [data-twofa-confirm] { background: var(--brand); color: var(--on-brand); }
.twofa-actions [data-twofa-confirm]:hover { background: var(--brand-deep); color: var(--on-brand); }
.twofa-actions [data-2fa-disable] { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.twofa-actions [data-2fa-disable]:hover { background: var(--brand-tint); color: var(--ink); }

/* Dialogs */
.modal-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; align-items: center; justify-items: center; padding: var(--s3); background: var(--scrim); }
.modal { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: var(--s4); border: 0; border-radius: var(--r-card); background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow-soft); }
.modal > .icon-btn { position: absolute; top: var(--s2); right: var(--s2); }
.modal h2 { padding-right: var(--s4); font-size: var(--code); font-weight: 500; }
.modal p { margin-top: var(--s2); color: var(--muted); }
.modal .actions { justify-content: flex-end; margin-top: var(--s3); }
.modal-confirm { width: min(420px, 100%); }
.modal-confirm .feature-icon { margin-bottom: var(--s2); }
dialog.modal::backdrop { background: var(--scrim); }
dialog.modal { margin: auto; }
.modal-reader { width: min(900px, 100%); }
.modal-reader .rd-body { min-height: 320px; }

/* Editorial pages */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-bottom: var(--s3); font-size: var(--small); color: var(--muted); }
.breadcrumb a { text-decoration: none; color: var(--brand); }
.breadcrumb a:hover { text-decoration: underline; }
.article-wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.article-hero { padding: var(--s5) 0; }
.article-hero h1 { max-width: 19em; line-height: 1.24; }
.article-hero .section-intro { max-width: 44em; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.article-meta time { white-space: nowrap; }
.article-layout { display: grid; width: min(1120px, 100% - 48px); margin-inline: auto; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--s5); align-items: start; padding-bottom: var(--s6); }
.prose { min-width: 0; color: var(--ink-2); font-size: var(--body); line-height: 1.9; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--s5); line-height: 1.35; }
.prose a:not(.btn) { color: var(--brand-deep); text-underline-offset: 4px; }
.prose ul, .prose ol { padding-left: var(--s3); margin: var(--s3) 0 var(--s4); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s1); }
.prose blockquote { margin: var(--s4) 0; padding: var(--s3); border-left: 2px solid var(--brand); border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--wash); color: var(--ink); }
.prose figure, .prose .surface-card, .prose .use-case-card { margin-block: var(--s3) var(--s4); }
.prose pre { padding: var(--s3); margin-block: var(--s3) var(--s4); background: var(--wash); color: var(--ink); border-radius: var(--r-control); overflow-x: auto; font-size: var(--small); }
.prose code { font-family: var(--mono); letter-spacing: 0; }
.prose figcaption { margin-top: var(--s1); color: var(--muted); font-size: var(--micro); }
.prose .btn-cta { background: var(--accent); color: var(--ink); text-decoration: none; }
.prose .btn-brand { background: var(--brand); color: var(--on-brand); text-decoration: none; }
.article-toc { position: sticky; top: calc(var(--nav-h) + var(--s2)); padding: var(--s3); border-radius: var(--r-card); background: var(--wash-2); color: var(--ink-2); font-size: var(--small); }
.article-toc h2 { margin: 0 0 var(--s2); font-size: var(--body); }
.article-toc ol { display: grid; gap: 12px; }
.article-toc a { color: var(--muted); text-decoration: none; }
.article-toc a:hover, .article-toc a[aria-current] { color: var(--brand-deep); }
.article-toc .toc-count { display: inline-flex; margin-top: var(--s2); }
.article-cta { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-card); background: var(--brand-deep); color: var(--on-brand); }
.article-cta h2 { margin: 0; color: var(--on-brand); }
.article-cta p { margin: var(--s2) 0 0; color: rgba(255, 255, 255, .86); }
.article-cta .actions { margin-top: var(--s3); }
.article-cta .btn-cta { background: var(--accent); color: var(--ink); border-color: transparent; }
.article-cta .btn-cta:hover { background: var(--accent-deep); color: var(--ink); }
.notes-count { display: inline-flex; margin-top: var(--s3); }
.notes-hero { text-align: center; }
.notes-hero .notes-count, .notes-hero .section-intro { margin-inline: auto; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.post-card { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--wash-2); color: var(--ink-2); text-decoration: none; transition: background-color .2s, border-color .2s; }
.post-card:hover { background: var(--brand-tint); color: var(--ink); border-color: var(--line-strong); }
.post-card .pill { align-self: flex-start; }
.post-card p { color: var(--muted); font-weight: 400; }
.post-card time { display: block; margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.post-card .post-read { margin-top: auto; padding-top: var(--s3); color: var(--brand-deep); font-size: var(--small); font-weight: 500; }
.recommend-float { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 65; width: min(340px, calc(100% - 32px)); border-radius: var(--r-card); background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow-pop); border: 1px solid var(--line); overflow: hidden; }
.recommend-float-media { padding: var(--s3); background: var(--wash); color: var(--brand-deep); }
.recommend-float-media img { width: 100%; height: auto; border-radius: var(--r-control); }
.recommend-float-copy { padding: var(--s3); }
.recommend-float-copy p { margin-top: var(--s1); font-size: var(--small); color: var(--muted); }
.recommend-float-copy .btn { margin-top: var(--s3); max-width: 100%; min-height: 48px; height: auto; padding-block: 12px; white-space: normal; line-height: 1.35; }
.float-close { position: absolute; top: var(--s1); right: var(--s1); background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.float-close:hover { background: var(--brand-tint); color: var(--ink); }
.legal-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--s5); padding-bottom: var(--s6); align-items: start; }
.legal-layout .article-toc { grid-column: 1; grid-row: 1; }
.legal-layout .prose { grid-column: 2; }
.legal-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-block: var(--s3) var(--s4); }
.legal-stat { padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.legal-stat strong { display: block; color: var(--ink); font-size: var(--code); font-weight: 500; }
.legal-stat span { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--small); }

/* Shared responsive ledger */
@media (max-width: 1100px) {
  .head-in { gap: var(--s3); }
  .site-nav { gap: var(--s3); }
  .head-tools { gap: var(--s1); }
  .hero-grid { gap: var(--s4); }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: 100%; }
  .mw-reader { max-height: 680px; }
  .auth-layout { gap: var(--s4); }
  .auth-panel { padding: var(--s3); }
  .article-layout { gap: var(--s4); grid-template-columns: minmax(0, 1fr) 224px; }
  .legal-layout { gap: var(--s4); grid-template-columns: 224px minmax(0, 1fr); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--wrap); }
  .auth-story { padding: 0 0 var(--s5); }
  .auth-story h1 { max-width: 16em; }
}
@media (max-width: 860px) {
  .head-in { gap: var(--s2); }
  .head-in > .brand { margin-inline: auto; }
  .head-tools { display: contents; }
  .nav-toggle { order: -1; flex: none; }
  .head-tools > .lang { flex: none; }
  .site-head,
  .site-header { z-index: 50; }
  .nav-drawer { z-index: 110; }
  .lang-trigger .lang-label { display: none; }
  .lang-trigger { padding-left: 12px; padding-right: 32px; }
  .x-full { display: none; }
  .x-short { display: inline; }
  .hero-visual, .hero, .hero-grid, .rise { transform: none; animation: none; }
  .card-grid, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .article-layout, .legal-layout { display: flex; flex-direction: column; gap: var(--s4); }
  .article-layout .prose, .legal-layout .prose { width: 100%; }
  .article-toc { position: static; width: 100%; order: -1; }
  .article-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk-head { align-items: flex-start; flex-direction: column; }
  .alias-compose { grid-template-columns: minmax(0, 1fr) auto; }
  .alias-compose > .field, .alias-compose > .alias-address-input { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mail-window { min-height: 600px; }
  .mw-body { grid-template-columns: minmax(0, 1fr); }
  .mw-reader.mobile-reader, .mobile-reader {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding-top: var(--sheet-top, var(--nav-h));
    z-index: 100;
    overflow: auto;
    overscroll-behavior: auto;
    background: var(--paper);
    color: var(--ink-2);
    transform: none;
    animation: none;
  }
  .mobile-reader .rd-head { position: sticky; top: 0; z-index: 2; background: var(--paper); color: var(--ink); padding: var(--s2); }
  .mobile-reader .rd-close { display: inline-flex; }
  .mobile-reader .rd-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s2); }
  .mobile-reader .rd-foot { flex: none; }
  .cloak-lock .hero-star { display: none; }
  .is-reading .mw-reader { z-index: 100; max-height: calc(100dvh - var(--sheet-top, var(--nav-h))); }
  .alias-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s2); }
  .alias-row .alias-address { grid-column: 1 / -1; }
  .alias-row-actions { justify-content: flex-end; }
  .setup-grid { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s3); }
  .twofa-qr { width: 160px; height: 160px; }
}
@media (max-width: 560px) {
  .wrap, .article-wrap { width: min(var(--wrap), 100% - 32px); }
  .notice-in { flex-wrap: wrap; justify-content: flex-start; gap: var(--s1) 12px; padding-block: 12px; }
  .notice-in > svg { align-self: flex-start; margin-top: 4px; }
  .notice-in > p { flex: 1 1 calc(100% - 32px); white-space: normal; overflow: visible; }
  .notice-in > a { margin-left: 28px; min-height: 0; padding-block: 0; }
  .brand { font-size: var(--body); gap: var(--s1); }
  .brand img { width: 28px; height: 28px; }
  .head-in { gap: var(--s1); }
  .nav-drawer { left: var(--s2); width: min(340px, calc(100% - 32px)); }
  .hero { padding-top: var(--s4); }
  .hero-copy .lede { font-size: var(--body); }
  .hero-facts { gap: var(--s1) var(--s2); }
  .seg { width: 100%; max-width: 100%; border-radius: var(--r-control); }
  .seg > a { min-width: 0; flex: 1 1 0; height: auto; min-height: 48px; padding: 12px var(--s1); border-radius: var(--r-control); white-space: normal; line-height: 1.4; }
  .seg > a svg { display: none; }
  .mw-addr { width: 100%; }
  .mw-address { font-size: var(--small); }
  .mw-addr-line { justify-content: space-between; gap: var(--s1); }
  .mw-tools { flex-wrap: wrap; gap: var(--s1); }
  .mw-tools .btn-sm { padding-inline: 12px; }
  .timer { padding-inline: 12px; }
  .rd-from { grid-template-columns: 36px minmax(0, 1fr); }
  .rd-from time { grid-column: 2; }
  .rd-foot { flex-wrap: wrap; }
  .hero-facts li { max-width: 100%; }
  .trust-row { gap: var(--s2) var(--s3); }
  .trust-row li { font-size: var(--small); }
  .section-head { margin-bottom: var(--s4); }
  .split { gap: var(--s4); }
  .statement { clip-path: none; padding-block: var(--s5); }
  .statement p { font-size: var(--body); }
  .duo-card, .surface-card, .use-case-card { padding: var(--s3); }
  .feed-row { gap: 12px; }
  .feed-row > .pill { display: none; }
  .feed-row { grid-template-columns: 36px minmax(0, 1fr); }
  .stat { align-items: flex-start; }
  .faq summary { font-size: var(--body); }
  .closer h2 { line-height: 1.3; }
  .closer .actions { flex-direction: column; align-items: center; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .support { padding: var(--s2); }
  .support .btn { font-size: var(--micro); }
  .toast { bottom: var(--s2); padding: 12px var(--s2); }
  .page-hero, .article-hero { padding-top: var(--s4); padding-bottom: var(--s4); }
  .auth-layout { width: min(var(--wrap), 100% - 32px); padding: var(--s4) 0 var(--s5); gap: var(--s4); }
  .auth-panel { padding: var(--s3); }
  .auth-secondary > .btn { flex: 1 1 120px; }
  .auth-session { padding: var(--s2); flex-wrap: wrap; }
  .desk { padding-top: var(--s4); }
  .desk-sections { gap: var(--s4); }
  .alias-surface, .surface-safety { padding: var(--s3); }
  .module-head { flex-wrap: wrap; align-items: flex-start; }
  .alias-compose { grid-template-columns: minmax(0, 1fr); }
  .alias-compose > * { grid-column: 1; }
  .alias-address-input { flex-direction: column; align-items: stretch; }
  .alias-suffix { padding-left: var(--s2); }
  .alias-compose .btn { width: 100%; }
  .alias-row { grid-template-columns: minmax(0, 1fr); }
  .alias-row-actions { justify-content: flex-start; }
  .archive-row > button, button.archive-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s2); }
  .archive-row-meta { justify-content: flex-start; flex-wrap: wrap; }
  .archive-detail { padding: var(--s3); }
  .archive-detail-head { gap: var(--s2); }
  .archive-detail-body { padding: var(--s2); }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .twofa-qr { width: 184px; height: 184px; }
  .twofa-idle { gap: var(--s3); }
  .twofa-status { flex-wrap: wrap; }
  .twofa-short-steps { flex-direction: column; }
  .twofa-actions input { flex: 1 1 120px; }
  .twofa-actions .btn { flex: 0 1 auto; padding-inline: var(--s2); }
  .secret-row code { width: 100%; }
  .modal { padding: var(--s3); }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card { padding: var(--s3); }
  .article-toc ol { grid-template-columns: minmax(0, 1fr); }
  .article-cta { padding: var(--s3); }
  .article-cta .actions { flex-direction: column; align-items: flex-start; }
  .recommend-float { right: var(--s2); bottom: var(--s2); }
  .legal-stats { grid-template-columns: minmax(0, 1fr); }
  .table-scroll { margin-block: var(--s3) var(--s4); }
  .data-table th, .data-table td { padding: var(--s2); }
}


/* Access and address management */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cloak-access { padding-top: var(--s5); padding-bottom: var(--s6); }
.cloak-access .auth-story { padding-top: var(--s3); }
.cloak-access .auth-story h1 { line-height: 1.24; }
.cloak-access .auth-story .section-intro { max-width: 30em; }
.cloak-fold { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s3); background: var(--wash-2); color: var(--ink); border-radius: var(--r-card); }
.cloak-fold-mark { width: 96px; height: 96px; color: var(--brand); flex: none; }
.cloak-fold > div { min-width: 0; }
.cloak-fold strong { display: block; font-size: var(--small); font-weight: 500; overflow-wrap: anywhere; }
.cloak-fold-caption { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.access-alternative { margin-top: var(--s4); max-width: 32em; font-size: var(--small); color: var(--muted); }
.access-alternative a, .access-policy a { color: var(--brand-deep); text-underline-offset: 4px; }
.access-panel { position: relative; background: var(--wash); color: var(--ink-2); box-shadow: var(--shadow-soft); }
.access-heading { margin-bottom: var(--s3); }
.access-heading h2 { margin-top: var(--s3); line-height: 1.35; }
.access-heading > p { font-size: var(--small); color: var(--muted); }
.access-submit { width: 100%; }
.access-error { margin-top: var(--s3); }
.access-policy { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-strong); color: var(--muted); font-size: var(--micro); }
.access-panel .auth-pane > .auth-notice { margin: 0 0 var(--s2); }
.access-panel .auth-notice strong { font-weight: 500; }
.access-panel .code-input { letter-spacing: .12em; }
.cloak-workspace { padding-top: var(--s4); }
.cloak-session { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.cloak-session h1 { font-size: var(--code); font-weight: 600; line-height: 1.35; }
.cloak-session p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.cloak-session strong { font-weight: 500; }
.cloak-session .btn { flex: none; }
.cloak-workspace > .wrap > .form-error { margin-bottom: var(--s3); }
.cloak-aliases { margin-bottom: var(--s6); }
.cloak-aliases .module-head { align-items: flex-start; }
.cloak-aliases .module-head h2 { max-width: 24em; }
.cloak-prefix-hint { margin-top: var(--s2); }
.cloak-aliases .alias-list, .cloak-aliases .alias-empty { margin-top: var(--s3); }
.cloak-aliases .alias-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3); }
.cloak-aliases .alias-row-actions { grid-column: 1 / -1; }
.cloak-aliases .alias-detail { grid-column: 1 / -1; margin-top: 0; }
.cloak-aliases .alias-detail h3 { margin-bottom: var(--s2); font-size: var(--body); }
.cloak-aliases .alias-detail p { color: var(--muted); font-size: var(--small); }
.cloak-aliases .alias-detail p + p { margin-top: var(--s1); }
.cloak-aliases .status-pill.is-muted { background: var(--wash); color: var(--muted); }
.cloak-records { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s5); align-items: start; margin-bottom: var(--s6); }
.cloak-records-intro { min-width: 0; }
.cloak-records-intro h2 { font-size: var(--h2); }
.cloak-records-intro .section-intro { font-size: var(--small); margin-top: var(--s3); }
.cloak-records-intro > .status-pill { margin-top: var(--s3); }
.cloak-records-main { min-width: 0; }
.cloak-records-main .archive-tools { align-items: center; }
.cloak-records-main .archive-tools > .field { flex: 1 1 200px; }
.cloak-records-main .archive-tools > .btn { min-height: 40px; height: auto; padding-block: var(--s1); }
.cloak-records-main .filter-trigger { background: var(--paper); color: var(--ink); border-color: var(--line-strong); font-size: var(--small); }
.cloak-records-main .filter-menu { max-height: 360px; overflow-y: auto; }
.cloak-records-main .archive-empty { margin-top: 0; }
.cloak-records-main .archive-row-copy > span { max-width: 100%; }
.archive-detail-head [data-archive-status] { margin-bottom: var(--s2); }
.archive-detail-actions { margin-top: var(--s3); }
.archive-detail-actions .btn { height: 36px; align-self: flex-start; }
.archive-attachments { gap: var(--s1); }
.archive-attachments .btn { max-width: 100%; height: auto; min-height: 36px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; padding-block: var(--s1); }
.cloak-security { background: var(--wash-2); color: var(--ink-2); }
.cloak-security .twofa-idle { align-items: center; }
.cloak-security .twofa-idle > div:first-child { flex: 1 1 400px; }
.cloak-security .twofa-idle h2 { line-height: 1.35; }
.cloak-security .twofa-status { align-items: center; }
.cloak-security [data-2fa-badge] { background: var(--brand-tint); color: var(--ink); margin: 0; }
.cloak-security [data-2fa-badge].is-solid { background: var(--brand-deep); color: var(--on-brand); }
.cloak-security [data-twofa-start] { width: auto; min-height: 48px; height: auto; padding-block: 12px; align-self: center; white-space: normal; line-height: 1.35; }
.cloak-security .twofa-short-steps { padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--line); }
.cloak-security .twofa-short-steps li { align-items: center; }
.twofa-maintenance { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.twofa-maintenance .form-note { max-width: 58em; }
.cloak-security .twofa-setup { margin-top: var(--s3); margin-bottom: var(--s3); }
.cloak-security .setup-grid { grid-template-columns: 184px minmax(0, 1fr); }
.cloak-security .twofa-actions { align-items: center; gap: var(--s2); margin-top: var(--s2); }
.cloak-security .twofa-actions .text-input { width: 184px; flex: 0 1 184px; min-width: 0; }
.cloak-security .secret-row code { color: var(--ink); background: var(--paper); }
.cloak-security .secret-row .btn { width: auto; white-space: nowrap; }
.cloak-security .twofa-steps { max-width: 800px; }
.modal-confirm { width: min(420px, calc(100% - 32px)); }
.modal-confirm .feature-icon { margin-bottom: var(--s2); }
.modal-confirm h2 { padding-right: 0; }
.modal-confirm .actions { align-items: center; justify-content: flex-end; }
.modal-confirm .actions .btn { min-width: 88px; }

/* Mail engine surfaces */
.badge.mail-brand-x, .badge.mail-brand-spotify { background: var(--paper); border: 1px solid var(--line-strong); }
.badge.mail-brand-x { color: #0f1419; }
.badge.mail-brand-spotify { color: #1db954; }
.mw-row .badge,
.rd-from .badge,
.feed-row .badge,
.reader-letterhead .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: 0;
  overflow: visible;
  line-height: 1;
  text-align: center;
  white-space: normal;
  text-overflow: clip;
}
.rd-from > [data-reader-badge] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: visible;
}
.rd-from .badge.badge-initial,
.feed-row .badge.badge-initial {
  background: var(--brand-tint);
  color: var(--brand-deep);
}
.badge.mail-brand-x svg,
.badge.mail-brand-spotify svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mail-cid-note { padding: var(--s2); margin-bottom: var(--s3); border-radius: var(--r-control); background: var(--wash); color: var(--ink-2); font-size: var(--small); line-height: 1.7; }
.rd-text { margin: 0; font-family: var(--font); font-size: var(--small); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.mw-reader.is-empty .rd-head, .mw-reader.is-empty .rd-foot { display: none; }
.mw-reader.is-empty .rd-body { display: grid; place-items: center; }
.mw-reader.is-empty .mw-empty { width: 100%; }
.mw-rows > .mw-empty { flex: 1; }
.mw-empty > .empty-card { padding: var(--s2); width: min(420px, 100% - 32px); height: auto; min-height: 0; }
.rd-body > .rd-frame { display: block; height: auto; min-height: 240px; flex: none; }
.mw-address { letter-spacing: 0; }
.mail-sheet-open { overflow: hidden; }
.toast.is-on { visibility: visible; }

@media (min-width: 1440px) {
  .cloak-aliases .alias-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cloak-aliases .alias-row-actions { grid-column: auto; }
}
@media (max-width: 1100px) {
  .cloak-records { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .cloak-records-intro { max-width: 760px; }
  .cloak-records-intro .section-title br { display: none; }
}
@media (max-width: 960px) {
  .cloak-access { max-width: var(--wrap); grid-template-columns: minmax(0, 1fr); }
  .cloak-access .auth-story { padding-top: 0; }
}
@media (max-width: 760px) {
  .mobile-reader.mw-reader { top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; max-height: 100dvh; width: 100%; border: 0; border-radius: 0; padding-top: var(--sheet-top, var(--nav-h)); transform: none; animation: none; }
  .mobile-reader .rd-head { position: sticky; top: 0; flex: none; }
  .mobile-reader .rd-close { display: inline-flex; }
  .mobile-reader .rd-body { overflow-y: auto; min-height: 0; }
  .mobile-reader .rd-foot { padding-bottom: max(var(--s2), env(safe-area-inset-bottom)); }
  .mobile-reader.is-empty .rd-head { display: block; }
  .mobile-reader.is-empty .rd-head > .rd-subject, .mobile-reader.is-empty .rd-from, .mobile-reader.is-empty [data-demo-pill] { display: none; }
  .mw-address { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .mw-addr-line { align-items: center; }
  .cloak-aliases .alias-row .alias-address { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cloak-access { padding-top: var(--s4); padding-bottom: var(--s5); }
  .cloak-access .auth-story h1 { font-size: var(--h1); }
  .cloak-fold { gap: var(--s2); padding: var(--s2); }
  .cloak-fold-mark { width: 64px; height: 64px; }
  .access-panel { padding: var(--s3); }
  .access-heading h2 { font-size: var(--code); }
  .cloak-session { flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--s4); }
  .cloak-session > div { min-width: 0; width: 100%; }
  .cloak-session h1 { font-size: var(--code); }
  .cloak-session p { overflow-wrap: anywhere; }
  .cloak-aliases { margin-bottom: var(--s5); }
  .cloak-aliases .alias-row { grid-template-columns: minmax(0, 1fr); padding: var(--s2); }
  .cloak-aliases .alias-row-actions { grid-column: 1; gap: var(--s1); }
  .cloak-aliases .alias-row-actions .btn { padding-inline: 12px; }
  .cloak-aliases .alias-detail { grid-column: 1; }
  .cloak-records { margin-bottom: var(--s5); }
  .cloak-records-main .archive-tools .field { flex-basis: 100%; }
  .cloak-security .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .cloak-security .twofa-actions { flex-wrap: wrap; }
  .cloak-security .twofa-actions .text-input { flex: 1 1 120px; width: 120px; }
  .cloak-security .twofa-actions .btn { flex: 0 1 auto; max-width: 100%; min-height: 48px; height: auto; padding-block: 12px; white-space: normal; line-height: 1.35; }
  .cloak-security .twofa-status { flex-wrap: nowrap; }
}


/* Targeted quality corrections. */
html[lang="zh"] .statement p {
  font-size: 16px;
  line-height: 1.8;
}

html[lang="zh"] h1,
html[lang="zh"] h2 {
  text-wrap: balance;
}

.site-head,
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}

[data-site-nav] a {
  white-space: nowrap;
}

.brand .brand-name {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}

.archive-detail {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.archive-detail-body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.archive-detail iframe {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.archive-detail pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.alias-row .status-pill.is-active {
  background: var(--brand-tint, #e9e0fd);
  color: var(--brand-deep, #5326c9);
}

.alias-row .status-pill.is-paused {
  background: var(--wash-2, #f8f6fe);
  color: var(--muted, #6b6a79);
}

[data-reader]:not(.mobile-reader) [data-reader-close] {
  display: none;
}

[data-reader].is-empty .rd-head,
[data-reader].is-empty .rd-foot {
  display: none;
}

[data-reader].is-empty .rd-body {
  display: grid;
  place-items: center;
}

[data-inbox-empty],
[data-reader-empty] {
  width: min(420px, calc(100% - 32px));
  min-height: 0;
  height: auto;
  padding: 16px;
  box-sizing: border-box;
  background: var(--wash-2, #f8f6fe);
  color: var(--ink-2, #2d2566);
}

[data-login] label {
  display: block;
  margin-bottom: 8px;
}

.auth-card h2 {
  font-size: 24px;
  line-height: 1.3;
}

.auth-card .twofa-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}

.twofa-status [data-2fa-badge] {
  margin: 0;
}

[data-twofa-confirm] {
  margin-top: 24px;
}

[data-2fa-disable] {
  margin-top: 24px;
}

.custom-select,
.filter-trigger {
  margin-block: 16px;
}

[data-filter-trigger] {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  width: auto;
  margin-block: 16px;
  padding: 8px 40px 8px 16px;
  border: 1px solid var(--line-strong, #d6cdf0);
  border-radius: 999px;
  background: var(--paper, #ffffff);
  color: var(--ink, #130a50);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

[data-filter-trigger]::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

[data-filter-trigger] > .chev,
[data-filter-trigger] > .chevron {
  display: none;
}

section .eyebrow + h1,
section .eyebrow + h2 {
  margin-top: 24px;
}

section h1 + .section-intro,
section h2 + .section-intro {
  margin-top: 24px;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.mw-address.is-address-highlighted {
  outline: 2px solid var(--brand, #7146e4);
  outline-offset: 4px;
}

@media (min-width: 761px) {
  [data-reader] [data-reader-close] {
    display: none;
  }
}


.site-head,
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}

.statement p {
  font-size: 16px;
  line-height: 1.8;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
}

.footer-brand {
  min-width: 0;
}

.footer-col {
  min-width: 0;
  text-align: left;
}

.footer-col a {
  overflow-wrap: anywhere;
}

[data-twofa-confirm-form],
[data-twofa-disable-form] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 0;
}

[data-twofa-maintenance] {
  margin-top: 0;
}

[data-twofa-confirm],
[data-2fa-disable] {
  align-self: center;
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

@media (min-width: 761px) {
  [data-reader-close] {
    display: none;
  }
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}


/* Privacy policy */
.privacy-hero { padding-bottom: var(--s5); }
.privacy-hero h1 { max-width: 19em; }
.privacy-hero > .wrap > .section-intro { max-width: 48em; }
.privacy-effective { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.privacy-glance.legal-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.privacy-glance-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); min-width: 0; }
.privacy-glance-value { display: block; margin-bottom: var(--s3); color: var(--brand-deep); font-size: var(--code); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; }
.privacy-glance-value.mono { letter-spacing: 0; }
.privacy-glance-card h2 { margin: 0; color: var(--ink); font-size: var(--lede); font-weight: 600; line-height: 1.5; }
.privacy-glance-card p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.privacy-glance-card a { display: inline-flex; align-items: center; gap: var(--s1); margin-top: auto; padding-top: var(--s3); color: var(--brand-deep); font-size: var(--small); font-weight: 500; text-decoration: none; text-underline-offset: 4px; }
.privacy-glance-card a:hover { text-decoration: underline; }
.privacy-glance-card-solid { background: var(--brand); color: var(--on-brand); }
.privacy-glance-card-solid .privacy-glance-value, .privacy-glance-card-solid h2, .privacy-glance-card-solid a { color: var(--on-brand); }
.privacy-glance-card-solid p { color: var(--on-brand); }
.privacy-layout { padding-bottom: var(--s6); }
.privacy-prose > section { scroll-margin-top: calc(var(--nav-h) + var(--s3)); }
.privacy-prose > section + section { margin-top: var(--s5); }
.privacy-prose h2 { margin: 0 0 var(--s3); font-size: var(--code); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; }
.privacy-prose h3 { margin: var(--s4) 0 var(--s2); font-size: var(--lede); font-weight: 600; line-height: 1.5; }
.privacy-prose p { margin-bottom: var(--s2); font-size: var(--body); font-weight: 400; }
.privacy-boundary { margin-block: var(--s3) var(--s4); padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.privacy-boundary h3 { margin-top: 0; }
.privacy-boundary p { margin-bottom: 0; }
.privacy-table { min-width: 600px; }
.privacy-table caption { padding: 0 0 var(--s2); color: var(--muted); font-size: var(--small); text-align: left; caption-side: top; }
.privacy-table th, .privacy-table td { padding: var(--s2); line-height: 1.8; }
.privacy-table thead th { background: var(--wash); color: var(--ink); }
.privacy-table tbody th { width: 24%; background: var(--wash-2); color: var(--ink); font-weight: 500; }
.privacy-table tbody td { width: 38%; }
.privacy-local-list { display: grid; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.privacy-local-list > div { padding: var(--s3); border-radius: var(--r-control); background: var(--wash-2); color: var(--ink-2); }
.privacy-local-list dt { color: var(--ink); font-size: var(--body); font-weight: 500; }
.privacy-local-list dd { margin-top: var(--s1); color: var(--muted); font-size: var(--small); font-weight: 400; }
.privacy-prose .privacy-delete-list { margin-block: var(--s3) var(--s4); padding-left: var(--s3); }
.privacy-prose .privacy-delete-list li + li { margin-top: var(--s2); }
.privacy-delete-list strong { color: var(--ink); font-weight: 600; }
.privacy-contact { margin-block: var(--s4); padding: var(--s4); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.privacy-contact .eyebrow { margin-bottom: var(--s3); color: var(--brand); font-size: var(--small); }
.privacy-contact h3 { margin: 0 0 var(--s2); }
.privacy-contact p:not(.eyebrow) { font-size: var(--small); }
.privacy-contact .actions { margin-top: var(--s3); }
.privacy-contact .btn-brand { background: var(--brand); color: var(--on-brand); }
.privacy-contact .btn-brand:hover { background: var(--brand-deep); color: var(--on-brand); }
.privacy-contact .btn-line { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.privacy-contact .btn-line:hover { background: var(--brand-tint); color: var(--ink); border-color: var(--brand); }

@media (max-width: 860px) {
  .privacy-hero { padding-bottom: var(--s4); }
  .privacy-glance.legal-glance { grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); gap: var(--s2); }
  .privacy-glance-card { padding: var(--s3); }
  .privacy-glance-value { margin-bottom: var(--s2); }
  .privacy-glance-card a { margin-top: 0; padding-top: var(--s3); }
  .privacy-layout { gap: var(--s4); padding-bottom: var(--s5); }
  .privacy-prose > section + section { margin-top: var(--s4); }
  .privacy-prose h2 { font-size: var(--code); line-height: 1.4; }
  .privacy-prose h3 { font-size: var(--lede); line-height: 1.5; }
  .privacy-contact { padding: var(--s3); }
}

@media (max-width: 560px) {
  .privacy-glance-card h2 { font-size: var(--lede); }
  .privacy-prose h2 { font-size: var(--h3); }
  .privacy-local-list > div, .privacy-boundary { padding: var(--s2); }
  .privacy-contact .actions { flex-direction: column; align-items: stretch; }
}


/* Terms: scope, permitted uses, and retention boundaries. */
.terms-page { min-width: 0; }
.terms-hero { padding-bottom: var(--s5); background: var(--paper); color: var(--ink-2); }
.terms-hero h1 { max-width: 18em; }
.terms-hero .section-intro { max-width: 44em; }
.terms-glance.legal-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.terms-glance-card { min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.terms-glance-label { display: block; margin-bottom: var(--s2); color: var(--brand-deep); font-size: var(--micro); font-weight: 500; }
.terms-glance-card h2 { font-size: var(--lede); line-height: 1.4; font-weight: 600; }
.terms-glance-card p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); font-weight: 400; }
.terms-glance-solid { background: var(--brand); color: var(--on-brand); }
.terms-glance-solid h2, .terms-glance-solid .terms-glance-label { color: var(--on-brand); }
.terms-glance-solid p { color: var(--on-brand); }
.terms-layout { padding-top: var(--s3); }
.terms-prose { min-width: 0; }
.terms-prose.prose h2 { margin: var(--s2) 0 var(--s3); font-size: var(--code); line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; }
.terms-prose.prose h3 { margin: var(--s4) 0 var(--s2); font-size: var(--lede); line-height: 1.5; font-weight: 600; }
.terms-prose strong { font-weight: 600; }
.terms-section { scroll-margin-top: calc(var(--nav-h) + var(--s3)); }
.terms-section + .terms-section { margin-top: var(--s5); }
.terms-section-label { display: block; color: var(--brand-deep); font-size: var(--micro); font-weight: 500; }
.terms-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.terms-use-card { min-width: 0; padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.terms-use-caution { background: var(--wash-2); color: var(--ink-2); }
.terms-use-heading { display: flex; align-items: flex-start; gap: var(--s1); }
.terms-use-heading svg { width: 24px; height: 24px; flex: none; margin-top: 2px; fill: none; stroke: var(--brand-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.terms-prose.prose .terms-use-heading h3 { margin: 0; font-size: var(--body); line-height: 1.7; }
.terms-prose.prose .terms-use-list { display: grid; align-content: start; gap: var(--s3); padding: 0; margin: var(--s3) 0 0; list-style: none; }
.terms-prose.prose .terms-use-list li { margin: 0; }
.terms-use-list strong { display: block; font-size: var(--small); color: var(--ink); }
.terms-use-list span { display: block; margin-top: var(--s1); font-size: var(--small); color: var(--muted); font-weight: 400; }
.terms-reading-note { padding-left: var(--s3); border-left: 2px solid var(--brand); }
.terms-reading-note > strong { display: block; margin-bottom: var(--s1); color: var(--ink); font-size: var(--small); }
.terms-prose .terms-reading-note p { margin: 0; font-size: var(--small); }
.terms-boundary-table { margin-top: var(--s3); margin-bottom: var(--s4); }
.terms-boundary-table caption { padding: var(--s2) var(--s3); background: var(--wash); color: var(--ink); text-align: left; font-size: var(--small); font-weight: 600; }
.terms-boundary-table .data-table thead th { background: var(--wash); color: var(--ink); }
.terms-boundary-table .data-table tbody th { width: 24%; min-width: 128px; background: var(--wash-2); color: var(--ink); }
.terms-boundary-table .data-table td { min-width: 184px; background: var(--wash-2); color: var(--ink-2); }
.terms-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.terms-prose.prose .terms-contact h3 { margin: 0 0 var(--s1); font-size: var(--body); }
.terms-prose.prose .terms-contact p { margin: 0; color: var(--muted); font-size: var(--small); }
.terms-contact .btn { justify-self: start; align-self: center; }
.terms-contact-address { grid-column: 1 / -1; overflow-wrap: anywhere; font-size: var(--small); }
.terms-ending { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-card); background: var(--wash-2); color: var(--ink); text-align: center; }
.terms-prose.prose .terms-ending > p { margin: 0; font-size: 16px; font-weight: 500; }
.terms-ending .actions { justify-content: center; margin-top: var(--s3); }
.terms-top-link { display: inline-block; margin-top: var(--s3); font-size: var(--small); }
@media (max-width: 860px) {
  .terms-glance.legal-glance { grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); gap: var(--s2); }
  .terms-hero { padding-bottom: var(--s4); }
  .terms-layout { padding-top: 0; }
  .terms-use-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .terms-section + .terms-section { margin-top: var(--s4); }
  .terms-prose.prose h2 { font-size: var(--h3); line-height: 1.5; }
  .terms-contact { grid-template-columns: minmax(0, 1fr); }
  .terms-contact-address { grid-column: 1; }
  .terms-ending { padding: var(--s3); }
  .terms-ending .actions { flex-direction: column; align-items: center; }
}


/* Address choice page */
.choice-hero { padding-bottom: var(--s6); }
.choice-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s5); }
.choice-hero-grid h1 { line-height: 1.24; }
.choice-hero-grid .section-intro { max-width: 36em; }
.choice-fold { display: grid; justify-items: start; gap: var(--s2); padding: var(--s4); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.choice-fold-icon { width: 96px; height: 96px; color: var(--brand); }
.choice-fold h2 { font-size: var(--h3); font-weight: 600; }
.choice-fold p { color: var(--muted); font-size: var(--body); }
.choice-fold > a { margin-top: var(--s1); color: var(--brand-deep); font-size: var(--small); font-weight: 500; text-decoration: none; text-underline-offset: 4px; }
.choice-fold > a:hover { text-decoration: underline; }
.choice-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.choice-task { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s4) var(--s3); border-radius: var(--r-card); background: var(--paper); color: var(--ink-2); }
.choice-task-number { color: var(--mist); font-size: var(--code); font-weight: 500; line-height: 1.2; }
.choice-task h3 { font-size: var(--lede); font-weight: 600; }
.choice-task > p { font-size: var(--small); font-weight: 400; color: var(--muted); }
.choice-task-answer { width: 100%; padding-block: var(--s2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.choice-task-answer strong { color: var(--ink); font-size: var(--small); font-weight: 600; }
.choice-task-answer p { margin-top: var(--s1); font-size: var(--small); font-weight: 400; color: var(--ink-2); }
.choice-task .choice-boundary { margin-bottom: var(--s1); }
.choice-boundary strong { font-weight: 500; }
.choice-task > a { margin-top: auto; padding-top: var(--s2); color: var(--brand-deep); font-size: var(--small); font-weight: 600; text-decoration: none; text-underline-offset: 4px; }
.choice-task > a:hover { text-decoration: underline; }
.choice-task-solid { background: var(--brand); color: var(--on-brand); }
.choice-task-solid h3, .choice-task-solid .choice-task-answer strong { color: var(--on-brand); }
.choice-task-solid > p, .choice-task-solid .choice-task-answer p { color: var(--on-brand); }
.choice-task-solid .choice-task-number { color: var(--brand-tint); }
.choice-task-solid .status-pill { background: var(--paper); color: var(--brand-deep); }
.choice-task-solid .choice-task-answer { border-color: var(--brand-tint); }
.choice-task-solid > a { color: var(--on-brand); }
.choice-table-scroll { margin-top: var(--s4); margin-bottom: var(--s4); border: 1px solid var(--line); }
.choice-table { min-width: 720px; table-layout: fixed; }
.choice-table caption { padding: var(--s2) var(--s3); background: var(--wash-2); color: var(--muted); font-size: var(--small); text-align: left; }
.choice-table thead th:first-child { width: 18%; }
.choice-table tbody th { background: var(--wash-2); color: var(--ink); font-weight: 500; }
.choice-table td { line-height: 1.8; }
.choice-table-note { max-width: 60em; font-size: var(--small); color: var(--muted); }
.choice-table-note a { color: var(--brand-deep); text-underline-offset: 4px; }
.choice-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.choice-path { padding: var(--s4); border-radius: var(--r-card); background: var(--paper); color: var(--ink-2); }
.choice-path-heading { display: flex; align-items: center; gap: var(--s2); }
.choice-path-heading .feature-icon { flex: none; }
.choice-path-heading h3 { font-size: var(--lede); font-weight: 600; }
.choice-path-heading p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.choice-path-steps { display: grid; gap: var(--s3); margin-top: var(--s4); }
.choice-path-steps li { display: flex; gap: var(--s2); align-items: flex-start; }
.choice-path-steps strong { display: block; color: var(--ink); font-size: var(--small); font-weight: 500; }
.choice-path-steps p { margin-top: var(--s1); font-size: var(--small); color: var(--muted); }
.choice-mail-slice { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: var(--s2); margin-top: var(--s4); border-radius: var(--r-control); background: var(--wash); color: var(--ink-2); }
.choice-mail-slice > div { min-width: 0; }
.choice-mail-slice strong { display: block; color: var(--ink); font-size: var(--small); font-weight: 500; }
.choice-mail-slice > div > span { display: block; margin-top: 4px; font-size: var(--micro); color: var(--muted); }
.choice-path-note { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.choice-scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.choice-scenario { display: grid; align-content: start; justify-items: start; gap: var(--s2); }
.choice-scenario h3 { font-size: var(--lede); }
.choice-scenario p { color: var(--muted); font-size: var(--small); font-weight: 400; }
.choice-scenario h3 + p { margin-top: 0; }
.choice-check-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s5); align-items: start; }
.choice-text-link { display: inline-block; margin-top: var(--s3); color: var(--brand-deep); font-size: var(--small); font-weight: 500; text-underline-offset: 4px; }
.choice-checklist { display: grid; gap: var(--s3); }
.choice-checklist li { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3); border-radius: var(--r-card); background: var(--paper); color: var(--ink-2); }
.choice-checklist h3 { font-size: var(--lede); font-weight: 600; }
.choice-checklist p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.choice-consequences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.choice-consequences > div { padding-left: var(--s2); border-left: 1px solid var(--line-strong); }
.choice-consequences h3 { font-size: var(--body); font-weight: 600; }
.choice-consequences p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.choice-end { display: flex; flex-direction: column; align-items: center; }
.choice-end > .eyebrow { color: var(--on-brand); margin-bottom: var(--s3); }
.choice-entry-group { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: var(--s4); padding: 4px; max-width: 100%; border-radius: var(--pill); background: var(--paper); color: var(--ink); }
.choice-entry-group a { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 12px var(--s3); max-width: 100%; border-radius: var(--pill); background: var(--paper); color: var(--ink); font-size: var(--body); font-weight: 600; line-height: 1.35; text-decoration: none; white-space: normal; text-align: center; }
.choice-entry-group a:first-child { background: var(--accent); color: var(--ink); }
.choice-entry-group a:hover { background: var(--brand-tint); color: var(--ink); }
.choice-entry-group a:first-child:hover { background: var(--accent-deep); color: var(--ink); }
.choice-end > .choice-end-note { margin-top: var(--s3); color: var(--on-brand); font-size: var(--micro); }

@media (max-width: 860px) {
  .choice-hero { padding-bottom: var(--s5); }
  .choice-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .choice-fold { padding: var(--s3); }
  .choice-task-grid { grid-template-columns: minmax(0, 1fr); }
  .choice-task { padding: var(--s3); }
  .choice-task > a { margin-top: var(--s1); }
  .choice-path-grid { grid-template-columns: minmax(0, 1fr); }
  .choice-path { padding: var(--s3); }
  .choice-scenarios { grid-template-columns: minmax(0, 1fr); }
  .choice-check-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .choice-check-grid .section-title br { display: none; }
  .choice-mail-slice { gap: var(--s1); }
  .choice-mail-slice > .pill { display: none; }
  .choice-mail-slice { grid-template-columns: 36px minmax(0, 1fr); }
  .choice-consequences { grid-template-columns: minmax(0, 1fr); }
  .choice-entry-group { border-radius: var(--r-control); }
  .choice-entry-group a { flex: 1 1 200px; border-radius: var(--r-control); }
}


/* Verification delivery diagnosis */
.arrival-hero { padding-block: var(--s5) var(--s6); }
.arrival-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s5); }
.arrival-hero-copy { min-width: 0; }
.arrival-hero-copy h1 { line-height: 1.24; }
.arrival-hero-copy .section-intro { max-width: 32em; }
.arrival-hero-answer { margin-top: var(--s3); color: var(--muted); font-size: var(--small); max-width: 36em; }
.arrival-route { position: relative; min-width: 0; padding: var(--s4); background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.arrival-route-head { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s3); color: var(--ink); font-size: var(--small); font-weight: 500; }
.arrival-route-head img { flex: none; }
.arrival-route-list { display: grid; }
.arrival-route-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding-block: var(--s3); }
.arrival-route-list li + li { border-top: 1px solid var(--line); }
.arrival-route-list strong { display: block; color: var(--ink); font-size: var(--body); font-weight: 600; }
.arrival-route-list p { color: var(--muted); font-size: var(--small); margin-top: var(--s1); }
.arrival-route-tag { font-size: var(--micro); color: var(--brand-deep); background: var(--brand-tint); padding: 4px var(--s1); border-radius: var(--pill); white-space: nowrap; }
.arrival-route-note { margin-top: var(--s2); color: var(--muted); font-size: var(--micro); }
.arrival-judgement { padding-top: 0; }
.arrival-judge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.arrival-judge-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s3); background: var(--wash-2); color: var(--ink-2); border-radius: var(--r-card); }
.arrival-card-number { display: block; margin-bottom: var(--s3); color: var(--brand); font-family: var(--mono); font-size: var(--micro); letter-spacing: 0; }
.arrival-judge-card h3 { font-size: var(--lede); font-weight: 600; }
.arrival-judge-card > p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.arrival-branches { display: grid; gap: var(--s2); margin-top: var(--s3); margin-bottom: var(--s3); }
.arrival-branches dt { color: var(--ink); font-weight: 500; font-size: var(--small); }
.arrival-branches dd { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.arrival-judge-card > .btn { margin-top: auto; max-width: 100%; white-space: normal; min-height: 36px; height: auto; line-height: 1.4; padding-block: var(--s1); }
.arrival-tool { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--paper); color: var(--ink-2); border-radius: var(--r-card); overflow: hidden; }
.arrival-questions { min-width: 0; padding: var(--s4); }
.arrival-tool-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.arrival-local-note { color: var(--muted); font-size: var(--micro); }
.arrival-question { min-width: 0; padding: 0; border: 0; border-radius: 0; background: var(--paper); color: var(--ink-2); }
.arrival-question h3 { font-size: var(--h3); line-height: 1.5; font-weight: 600; }
.arrival-question h3:focus { outline: none; }
.arrival-question > p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.arrival-options { display: grid; gap: var(--s2); margin-top: var(--s3); }
.arrival-options > button { width: 100%; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); text-align: left; font-size: var(--small); line-height: 1.6; transition: background-color .2s, border-color .2s; }
.arrival-options > button:hover { background: var(--wash-2); color: var(--ink); border-color: var(--brand); }
.arrival-options > button[aria-pressed="true"] { background: var(--brand-tint); color: var(--ink); border-color: var(--brand); }
.arrival-tool-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.arrival-verdict { min-width: 0; padding: var(--s4); background: var(--brand-tint); color: var(--ink-2); }
.arrival-verdict-kicker { color: var(--brand-deep); font-size: var(--small); font-weight: 500; margin-bottom: var(--s3); }
.arrival-verdict [data-arrival-result-tag] { margin-bottom: var(--s2); }
.arrival-verdict h3 { color: var(--ink); font-size: var(--h3); line-height: 1.5; }
.arrival-verdict [data-arrival-result-body] { margin-top: var(--s2); color: var(--ink-2); font-size: var(--small); }
.arrival-verdict-step { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-strong); color: var(--ink); font-size: var(--small); }
.arrival-verdict .actions { align-items: center; margin-top: var(--s3); }
.arrival-text-link { display: inline-block; color: var(--brand-deep); font-size: var(--small); text-underline-offset: 4px; }
.arrival-tool-disclaimer { margin-top: var(--s3); max-width: 60em; color: var(--muted); font-size: var(--small); }
.arrival-noscript { padding: var(--s3); margin-top: var(--s3); border-radius: var(--r-control); background: var(--paper); color: var(--ink); }
.arrival-wait-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.arrival-wait-card { margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-card); background: var(--wash); color: var(--ink-2); }
.arrival-wait-card-head { display: flex; align-items: center; gap: var(--s2); }
.arrival-wait-card-head svg { width: 24px; height: 24px; fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.arrival-wait-card h3 { font-size: var(--lede); line-height: 1.5; font-weight: 600; }
.arrival-wait-card > p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--small); }
.arrival-wait-card .actions { margin-top: var(--s3); }
.arrival-wait-list { display: grid; gap: var(--s4); padding-top: var(--s1); }
.arrival-wait-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.arrival-wait-list h3 { font-size: var(--lede); font-weight: 600; line-height: 1.5; }
.arrival-wait-list p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.arrival-checklist { display: grid; gap: var(--s1); }
.arrival-check-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--r-control); background: var(--paper); color: var(--ink-2); }
.arrival-check-number { align-self: start; color: var(--brand); font-family: var(--mono); font-size: var(--lede); letter-spacing: 0; }
.arrival-check-row h3 { font-size: var(--lede); font-weight: 600; line-height: 1.5; }
.arrival-check-row p { margin-top: var(--s1); max-width: 52em; color: var(--muted); font-size: var(--small); }
.arrival-check-row .btn { max-width: 100%; white-space: normal; height: auto; min-height: 36px; padding-block: var(--s1); line-height: 1.4; }
.arrival-check-note { color: var(--muted); font-size: var(--small); }
.arrival-safety-note { margin-top: var(--s4); max-width: 56em; padding-left: var(--s3); border-left: 2px solid var(--brand); }
.arrival-safety-note strong { color: var(--ink); font-weight: 500; }
.arrival-safety-note p { margin-top: var(--s1); color: var(--muted); font-size: var(--small); }
.arrival-finish { padding-top: 0; }
.arrival-finish .closer { background: var(--brand-deep); color: var(--on-brand); }
.arrival-finish .closer .actions { align-items: center; justify-content: center; }

@media (max-width: 1100px) {
  .arrival-hero-grid { gap: var(--s4); }
  .arrival-route { padding: var(--s3); }
  .arrival-route-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .arrival-route-tag { grid-column: 2; justify-self: start; }
  .arrival-judge-grid { gap: var(--s2); }
  .arrival-wait-grid { gap: var(--s4); }
}

@media (max-width: 860px) {
  .arrival-hero { padding-top: var(--s4); padding-bottom: var(--s5); }
  .arrival-hero-grid, .arrival-judge-grid, .arrival-tool, .arrival-wait-grid { grid-template-columns: minmax(0, 1fr); }
  .arrival-hero-copy { max-width: 760px; }
  .arrival-route-list li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .arrival-route-tag { grid-column: auto; }
  .arrival-judge-grid { gap: var(--s3); }
  .arrival-judge-card > .btn { margin-top: var(--s1); }
  .arrival-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrival-questions, .arrival-verdict { padding: var(--s3); }
  .arrival-verdict .actions { justify-content: flex-start; }
  .arrival-check-row { grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); }
  .arrival-check-row > .btn, .arrival-check-note { grid-column: 2; justify-self: start; }
  .arrival-judgement, .arrival-finish { padding-top: 0; }
}

@media (max-width: 560px) {
  .arrival-route-list li { grid-template-columns: 28px minmax(0, 1fr); padding-block: var(--s2); }
  .arrival-route-tag { grid-column: 2; }
  .arrival-route-head { align-items: flex-start; }
  .arrival-branches { grid-template-columns: minmax(0, 1fr); }
  .arrival-tool-top { margin-bottom: var(--s3); }
  .arrival-options > button { padding: var(--s2); }
  .arrival-tool-controls { margin-top: var(--s3); }
  .arrival-check-row { padding: var(--s2); }
  .arrival-wait-card-head { align-items: flex-start; }
  .arrival-finish .closer .actions > .btn { width: 100%; }
}


/* Notes collection and long-form reading. */
.notes-page {
  background: var(--paper);
  color: var(--ink-2);
}
.notes-page .cloak-notes-hero {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
  text-align: center;
}
.cloak-notes-hero > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cloak-notes-hero .eyebrow {
  margin: 0 0 var(--s3);
}
.cloak-notes-hero h1 {
  max-width: 20em;
  line-height: 1.24;
}
.cloak-notes-hero .notes-count {
  align-self: center;
  margin: var(--s3) auto 0;
}
.cloak-notes-hero .section-intro {
  max-width: 38em;
  margin: var(--s3) auto 0;
}
.cloak-notes-list {
  padding: 0 0 var(--s6);
}
.cloak-notes-list .post-grid {
  align-items: stretch;
}
.cloak-note-card {
  position: relative;
  min-width: 0;
  padding: var(--s4);
  gap: var(--s2);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--wash-2);
  color: var(--ink-2);
}
.cloak-note-card:nth-child(even) {
  background: var(--wash);
  color: var(--ink-2);
}
.cloak-note-card:hover,
.cloak-note-card:nth-child(even):hover {
  border-color: var(--line-strong);
  background: var(--brand-tint);
  color: var(--ink);
}
.cloak-note-card:focus-visible {
  outline-offset: 4px;
}
.cloak-note-card > .pill {
  max-width: calc(100% - 48px);
  height: auto;
  min-height: 24px;
  padding-block: 4px;
  white-space: normal;
  line-height: 1.5;
}
.cloak-note-title {
  max-width: 28em;
  margin-top: var(--s1);
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.6;
  text-wrap: pretty;
}
.cloak-note-card .cloak-note-description {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.85;
}
.cloak-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.6;
}
.cloak-note-meta time {
  display: inline;
  margin: 0;
  font-size: inherit;
}
.cloak-note-card .post-read {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s4);
  color: var(--brand-deep);
  font-size: var(--small);
  line-height: 1.5;
}
.cloak-note-arrow {
  display: inline-block;
  transition: transform .2s;
}
.cloak-note-card:hover .cloak-note-arrow {
  transform: translateX(4px);
}
.cloak-note-fold {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  display: grid;
  align-content: center;
  gap: var(--s1);
  width: 32px;
  height: 40px;
  padding: var(--s1);
  border-radius: 0 0 var(--r-control) var(--r-control);
  background: var(--brand-tint);
  color: var(--brand);
}
.cloak-note-fold-line {
  width: 100%;
  height: 1px;
  background: currentColor;
}
.cloak-note-card:nth-child(even) .cloak-note-fold {
  background: var(--paper);
  color: var(--brand);
}
.notes-noscript {
  padding: var(--s3);
  border-radius: var(--r-control);
  background: var(--wash);
  color: var(--ink-2);
}

/* Apply cloak-article to the article main element. */
.cloak-article {
  background: var(--paper);
  color: var(--ink-2);
}
.cloak-article .article-wrap {
  width: min(1120px, calc(100% - 48px));
}
.cloak-article .article-hero {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}
.cloak-article .breadcrumb {
  margin-bottom: var(--s4);
  line-height: 1.6;
}
.cloak-article .breadcrumb > span[aria-hidden] {
  color: var(--mist);
}
.cloak-article .article-hero .eyebrow {
  margin: 0 0 var(--s3);
}
.cloak-article .article-hero h1 {
  max-width: 20em;
  margin-top: 0;
  font-weight: 600;
  line-height: 1.24;
}
.cloak-article .article-hero .section-intro {
  max-width: 45em;
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.85;
}
.cloak-article .article-meta {
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s3);
  font-size: var(--small);
}
.cloak-article .article-meta .pill {
  height: auto;
  min-height: 24px;
  padding-block: 4px;
  line-height: 1.5;
  white-space: normal;
}
.cloak-article .article-layout {
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: var(--s5);
  padding-bottom: var(--s6);
  overflow: visible;
}
.cloak-article .prose {
  min-width: 0;
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.9;
}
.cloak-article .prose > section {
  scroll-margin-top: calc(var(--nav-h) + var(--s3));
}
.cloak-article .prose > section + section {
  margin-top: var(--s5);
}
.cloak-article .prose h2 {
  margin: var(--s5) 0 var(--s3);
  color: var(--ink);
  font-size: var(--code);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.cloak-article .prose > section > h2:first-child {
  margin-top: 0;
}
.cloak-article .prose h3 {
  margin: var(--s4) 0 var(--s2);
  color: var(--ink);
  font-size: var(--lede);
  font-weight: 600;
  line-height: 1.6;
}
.cloak-article .prose p {
  margin: 0 0 var(--s2);
  font-weight: 400;
}
.cloak-article .prose strong {
  font-weight: 600;
}
.cloak-article .prose ul,
.cloak-article .prose ol {
  margin: var(--s3) 0 var(--s4);
  padding-left: var(--s3);
}
.cloak-article .prose li + li {
  margin-top: var(--s2);
}
.cloak-article .prose a:not(.btn) {
  color: var(--brand-deep);
  text-underline-offset: 4px;
}
.cloak-article .prose .table-scroll {
  margin: var(--s3) 0 var(--s4);
}
.cloak-article .prose .data-table {
  font-size: var(--small);
  line-height: 1.8;
}
.cloak-article .prose .data-table caption {
  padding: 0 0 var(--s2);
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
}
.cloak-article .article-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--s2));
  padding: var(--s3);
  background: var(--wash-2);
  color: var(--ink-2);
}
.cloak-article .article-toc h2 {
  margin: 0 0 var(--s2);
  font-size: var(--body);
  font-weight: 600;
}
.cloak-article .article-toc ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cloak-article .article-toc li {
  margin: 0;
}
.cloak-article .article-toc a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
.cloak-article .article-toc a:hover,
.cloak-article .article-toc a[aria-current] {
  color: var(--brand-deep);
}
.cloak-article .article-toc .toc-count {
  margin-top: var(--s2);
  height: auto;
  min-height: 24px;
  white-space: normal;
}
.cloak-article .toc-mobile {
  display: none;
}
.note-callout,
.note-record,
.note-checklist {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--wash);
  color: var(--ink-2);
}
.cloak-article .prose .note-callout h3,
.cloak-article .prose .note-record h3,
.cloak-article .prose .note-checklist h3 {
  margin: 0 0 var(--s2);
  font-size: var(--lede);
}
.cloak-article .prose .note-callout > :last-child,
.cloak-article .prose .note-record > :last-child,
.cloak-article .prose .note-checklist > :last-child {
  margin-bottom: 0;
}
.note-record dl {
  display: grid;
  gap: var(--s2);
}
.note-record dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s2);
}
.note-record dt {
  color: var(--muted);
  font-size: var(--small);
}
.note-record dd {
  min-width: 0;
  color: var(--ink);
  font-size: var(--small);
  overflow-wrap: anywhere;
}
.note-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s3) 0 var(--s4);
}
.note-comparison > section {
  min-width: 0;
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--wash-2);
  color: var(--ink-2);
}
.cloak-article .prose .note-comparison h3 {
  margin: 0 0 var(--s2);
}
.cloak-article .prose .note-comparison ul {
  margin-bottom: 0;
}
.cloak-article .article-cta {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--brand-deep);
  color: var(--on-brand);
  text-align: left;
}
.cloak-article .prose .article-cta h2 {
  margin: 0;
  color: var(--on-brand);
  font-size: var(--code);
  line-height: 1.45;
}
.cloak-article .prose .article-cta p {
  margin: var(--s2) 0 0;
  color: var(--on-brand);
  font-size: var(--body);
}
.cloak-article .article-cta .actions {
  align-items: center;
  margin-top: var(--s3);
}
.cloak-article .prose .article-cta .btn-cta {
  border-color: transparent;
  background: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
.cloak-article .prose .article-cta .btn-cta:hover {
  background: var(--accent-deep);
  color: var(--ink);
}
.cloak-article .prose .article-cta .btn-line {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.cloak-article .prose .article-cta .btn-line:hover {
  border-color: var(--brand-tint);
  background: var(--brand-tint);
  color: var(--ink);
}
.cloak-article .article-related {
  margin-top: var(--s4);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--wash-2);
  color: var(--ink-2);
}
.cloak-article .article-related h2 {
  margin: 0 0 var(--s2);
  font-size: var(--lede);
}
.cloak-article .article-related a {
  display: inline-block;
  color: var(--brand-deep);
  overflow-wrap: anywhere;
}

/* Recommendation panels belong on article details only. */
.cloak-note-recommend {
  width: min(320px, calc(100% - 32px));
  max-height: calc(100dvh - var(--nav-h) - 48px);
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
}
.cloak-note-recommend .recommend-float-media {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 96px;
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  background: var(--wash);
  color: var(--brand-deep);
}
.cloak-note-recommend .recommend-float-media > svg {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cloak-note-recommend .recommend-float-media > span {
  color: var(--brand-deep);
  font-size: var(--small);
  font-weight: 500;
}
.cloak-note-recommend .recommend-float-copy {
  padding: var(--s3);
}
.cloak-note-recommend .recommend-float-copy h2,
.cloak-note-recommend .recommend-float-copy h3 {
  color: var(--ink);
  font-size: var(--lede);
  font-weight: 600;
  line-height: 1.5;
}
.cloak-note-recommend .recommend-float-copy p {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: var(--small);
}
.cloak-note-recommend .recommend-float-copy .btn {
  max-width: 100%;
  min-height: 48px;
  height: auto;
  margin-top: var(--s3);
  padding-block: 12px;
  white-space: normal;
  line-height: 1.35;
}
.cloak-note-recommend .float-close {
  z-index: 1;
  top: var(--s1);
  right: var(--s1);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}
.cloak-note-recommend .float-close:hover {
  background: var(--brand-tint);
  color: var(--ink);
}

@media (max-width: 860px) {
  .notes-page .cloak-notes-hero {
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }
  .cloak-notes-list {
    padding-bottom: var(--s5);
  }
  .cloak-note-card {
    padding: var(--s3);
  }
  .cloak-note-card .cloak-note-description {
    font-size: var(--small);
  }
  .cloak-article .article-hero {
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }
  .cloak-article .article-layout {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding-bottom: var(--s5);
  }
  .cloak-article .article-layout > .prose {
    width: 100%;
  }
  .cloak-article .article-layout > .article-toc {
    display: none;
  }
  .cloak-article .toc-mobile {
    display: block;
    width: 100%;
    margin: 0 0 var(--s4);
    padding: var(--s2);
    border-radius: var(--r-control);
    background: var(--wash-2);
    color: var(--ink-2);
  }
  .cloak-article .toc-mobile > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-size: var(--small);
    font-weight: 500;
  }
  .cloak-article .toc-mobile > summary::-webkit-details-marker {
    display: none;
  }
  .cloak-article .toc-mobile[open] > summary {
    margin-bottom: var(--s3);
  }
  .cloak-article .toc-mobile ol {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cloak-article .toc-mobile li {
    margin: 0;
  }
  .cloak-article .toc-mobile a {
    color: var(--brand-deep);
    font-size: var(--small);
    text-decoration: none;
  }
  .cloak-article .toc-mobile .toc-count {
    display: inline-flex;
    margin-top: var(--s2);
  }
  .cloak-article .toc-mobile[open] .chev {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  .cloak-article .prose > section + section {
    margin-top: var(--s4);
  }
  .cloak-article .prose h2 {
    margin-top: var(--s4);
    font-size: 24px;
    line-height: 1.5;
  }
  .cloak-article .article-cta {
    padding: var(--s3);
  }
  .note-comparison {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .cloak-notes-list .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cloak-notes-hero h1 {
    font-size: var(--h1);
  }
  .cloak-note-title {
    font-size: var(--lede);
  }
  .cloak-note-meta {
    gap: var(--s1) var(--s2);
  }
  .cloak-article .article-wrap {
    width: min(1120px, calc(100% - 32px));
  }
  .cloak-article .breadcrumb {
    margin-bottom: var(--s3);
    font-size: var(--small);
  }
  .cloak-article .article-hero h1 {
    font-size: var(--h1);
    line-height: 1.3;
  }
  .cloak-article .prose h3 {
    font-size: var(--lede);
  }
  .note-record dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }
  .note-callout,
  .note-record,
  .note-checklist {
    padding: var(--s2);
  }
  .cloak-article .article-cta .actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .cloak-note-recommend {
    right: var(--s2);
    bottom: var(--s2);
    width: min(320px, calc(100% - 32px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloak-note-card:hover .cloak-note-arrow {
    transform: none;
  }
}


/* Alias migration article */
.exit-hero {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
  background: var(--paper);
  color: var(--ink-2);
}
.exit-hero .breadcrumb {
  margin-bottom: var(--s4);
}
.exit-hero h1 {
  max-width: 19em;
  line-height: 1.24;
}
.exit-hero .section-intro {
  max-width: 42em;
  margin-top: var(--s3);
}
.exit-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  max-width: 100%;
  margin-top: var(--s3);
  padding: var(--s1) var(--s2);
  border-radius: var(--pill);
  background: var(--wash);
  color: var(--ink-2);
  font-size: var(--small);
  line-height: 1.5;
}
.exit-meta time {
  white-space: nowrap;
}
.exit-meta-separator {
  width: 1px;
  height: 12px;
  background: var(--line-strong);
  flex: none;
}
.exit-layout {
  align-items: start;
}
.exit-prose > section {
  scroll-margin-top: calc(var(--nav-h) + var(--s3));
}
.exit-prose > section + section {
  margin-top: var(--s5);
}
.exit-prose > section > h2 {
  margin: 0 0 var(--s3);
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.exit-prose > section > h3 {
  margin: var(--s3) 0 var(--s2);
  font-size: var(--lede);
  font-weight: 600;
}
.exit-prose strong {
  font-weight: 600;
}
.exit-prose li + li {
  margin-top: var(--s1);
}
.exit-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--wash);
  color: var(--ink-2);
}
.exit-summary > svg {
  width: 48px;
  height: 48px;
  color: var(--brand);
  flex: none;
}
.exit-summary > div {
  min-width: 0;
}
.exit-summary strong {
  display: block;
  color: var(--ink);
  font-size: var(--body);
  font-weight: 600;
}
.exit-summary p {
  margin: var(--s1) 0 0;
  color: var(--ink-2);
  font-size: var(--small);
}
.exit-table-scroll {
  margin-block: var(--s3) var(--s4);
}
.exit-table {
  min-width: 520px;
}
.exit-table caption {
  padding: 0 0 var(--s2);
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
  caption-side: top;
}
.exit-table th,
.exit-table td {
  padding: var(--s2);
  line-height: 1.75;
}
.exit-table tbody th {
  width: 24%;
  background: var(--wash-2);
  color: var(--ink);
  font-weight: 500;
}
.exit-operation-list {
  display: grid;
  gap: var(--s1);
  margin-block: var(--s3) var(--s4);
}
.exit-operation-list > div {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  background: var(--wash-2);
  color: var(--ink-2);
}
.exit-operation-list dt {
  color: var(--ink);
  font-size: var(--body);
  font-weight: 500;
}
.exit-operation-list dd {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--small);
}
.exit-prose .exit-final-list {
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  margin-block: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: var(--wash);
  color: var(--ink-2);
  list-style: disc;
}
.exit-final-list li::marker {
  color: var(--brand);
}
.exit-toc {
  z-index: 3;
  max-height: calc(100dvh - var(--nav-h) - var(--s4));
  overflow-y: auto;
  overscroll-behavior: auto;
}
.exit-toc ol {
  padding: 0;
  margin: 0;
  list-style: none;
  gap: var(--s1);
}
.exit-toc a {
  display: inline-block;
  line-height: 1.6;
  font-weight: 400;
}
.exit-toc .exit-count {
  display: inline-flex;
  margin-top: var(--s2);
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: none;
}
.exit-toc .exit-count:hover {
  background: var(--brand);
  color: var(--on-brand);
}
.exit-cta {
  margin-top: var(--s5);
  background: var(--brand-deep);
  color: var(--on-brand);
}
.exit-cta-mark {
  width: 48px;
  height: 48px;
  margin-bottom: var(--s3);
  color: var(--accent);
}
.exit-prose .exit-cta h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
}
.exit-prose .exit-cta p {
  margin: var(--s2) 0 0;
  color: var(--on-brand);
}
.exit-prose .exit-cta .btn-cta {
  border-color: transparent;
  background: var(--accent);
  color: var(--ink);
}
.exit-prose .exit-cta .btn-cta:hover {
  background: var(--accent-deep);
  color: var(--ink);
}
.exit-prose .exit-cta .btn-on-brand {
  border-color: transparent;
  background: var(--brand);
  color: var(--on-brand);
}
.exit-prose .exit-cta .btn-on-brand:hover {
  border-color: transparent;
  background: var(--brand-tint);
  color: var(--ink);
}
.exit-recommend {
  z-index: 65;
  width: min(304px, calc(100% - 32px));
}
.exit-recommend-media {
  padding: var(--s2) var(--s3);
  background: var(--wash);
  color: var(--brand);
}
.exit-recommend-media > svg {
  width: 100%;
  height: 64px;
}
.exit-recommend .float-close {
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  background: var(--paper);
  color: var(--ink);
}
.exit-recommend .float-close:hover {
  background: var(--brand-tint);
  color: var(--ink);
}
.exit-recommend .recommend-float-copy {
  padding: var(--s2) var(--s3) var(--s3);
}
.exit-recommend h2 {
  color: var(--ink);
  font-size: var(--body);
  font-weight: 600;
  line-height: 1.5;
}
.exit-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s2);
}
.exit-recommend .exit-recommend-actions .btn {
  flex: 1 1 100px;
  max-width: 100%;
  min-height: 40px;
  height: auto;
  margin: 0;
  padding: var(--s1) var(--s2);
  font-size: var(--small);
  line-height: 1.35;
  white-space: normal;
}
@media (max-width: 860px) {
  .exit-hero {
    padding-top: var(--s6);
    padding-bottom: var(--s4);
  }
  .exit-toc {
    max-height: none;
    overflow: visible;
  }
  .exit-toc ol {
    gap: var(--s1) var(--s2);
  }
  .exit-summary {
    margin-bottom: var(--s4);
  }
  .exit-prose > section + section {
    margin-top: var(--s4);
  }
}
@media (max-width: 560px) {
  .exit-hero .breadcrumb {
    margin-bottom: var(--s3);
  }
  .exit-hero h1 {
    font-size: var(--h1);
  }
  .exit-meta {
    gap: var(--s1);
    font-size: var(--micro);
  }
  .exit-summary {
    padding: var(--s2);
  }
  .exit-summary > svg {
    width: 40px;
    height: 40px;
  }
  .exit-prose > section > h2,
  .exit-prose .exit-cta h2 {
    font-size: var(--h3);
    line-height: 1.5;
  }
  .exit-operation-list > div {
    padding: var(--s2);
  }
  .exit-recommend .recommend-float-copy {
    padding: var(--s2);
  }
  .exit-recommend-media {
    padding: var(--s1) var(--s2);
  }
  .exit-recommend-media > svg {
    height: 40px;
  }
}


/* Verification request notebook article. */
.notebook-hero {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
  background: var(--paper);
  color: var(--ink-2);
}
.notebook-hero .breadcrumb {
  margin-bottom: var(--s4);
}
.notebook-hero h1 {
  max-width: 20em;
  line-height: 1.24;
}
.notebook-hero .section-intro {
  max-width: 43em;
  margin-top: var(--s3);
  font-size: var(--body);
  font-weight: 400;
}
.notebook-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  max-width: 100%;
  margin-top: var(--s3);
  padding: var(--s1) var(--s2);
  border-radius: var(--pill);
  background: var(--wash);
  color: var(--ink-2);
  font-size: var(--small);
}
.notebook-meta > span {
  color: var(--muted);
}
.notebook-layout {
  align-items: start;
}
.notebook-prose > section {
  scroll-margin-top: calc(var(--nav-h) + var(--s3));
}
.notebook-prose > section + section {
  margin-top: var(--s5);
}
.notebook-prose > section > h2 {
  margin: 0 0 var(--s3);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.notebook-prose h3 {
  margin: var(--s3) 0 var(--s2);
  font-size: var(--lede);
  font-weight: 600;
  line-height: 1.5;
}
.notebook-prose p {
  font-size: var(--body);
  font-weight: 400;
}
.notebook-prose strong {
  font-weight: 600;
}
.notebook-prose li,
.notebook-prose li + li {
  margin-top: var(--s1);
  margin-bottom: 0;
}
.notebook-prose .notebook-table-scroll {
  margin: var(--s3) 0 var(--s4);
}
.notebook-table {
  min-width: 560px;
  line-height: 1.8;
}
.notebook-table caption {
  padding: var(--s2) var(--s3);
  background: var(--wash-2);
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
}
.notebook-table tbody th {
  width: 24%;
  background: var(--wash-2);
  color: var(--ink);
  font-weight: 500;
}
.notebook-table th,
.notebook-table td {
  padding: var(--s2);
}
.notebook-prose .notebook-record {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--wash);
  color: var(--ink-2);
}
.notebook-record-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.notebook-record-head > svg {
  width: 40px;
  height: 40px;
  flex: none;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notebook-record-head > div {
  min-width: 0;
}
.notebook-record-head strong {
  display: block;
  color: var(--ink);
  font-size: var(--body);
}
.notebook-record-head span {
  display: block;
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--micro);
}
.notebook-prose .notebook-events {
  display: grid;
  gap: var(--s3);
  margin: var(--s3) 0;
  padding: 0;
  list-style: none;
}
.notebook-prose .notebook-events > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s2);
  margin: 0;
}
.notebook-events time {
  padding-top: 2px;
  color: var(--brand-deep);
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0;
}
.notebook-events strong {
  display: block;
  color: var(--ink);
  font-size: var(--small);
}
.notebook-prose .notebook-events p {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--small);
}
.notebook-record figcaption {
  padding-top: var(--s2);
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--micro);
}
.notebook-toc {
  z-index: 3;
}
.notebook-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--ink);
  font-size: var(--body);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.notebook-toc summary::-webkit-details-marker {
  display: none;
}
.notebook-toc details[open] > summary {
  margin-bottom: var(--s3);
}
.notebook-toc details[open] > summary .chev {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.notebook-toc ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s1);
  padding: 0;
  list-style: none;
}
.notebook-toc li {
  margin: 0;
}
.notebook-toc li a {
  display: block;
  padding-block: 4px;
  font-size: var(--small);
  font-weight: 400;
  line-height: 1.6;
}
.notebook-toc .notebook-count {
  display: inline-flex;
  margin-top: var(--s2);
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: none;
}
.notebook-prose > .notebook-cta {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
  background: var(--brand-deep);
  color: var(--on-brand);
}
.notebook-cta-icon {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notebook-cta h2 {
  margin: 0;
  color: var(--on-brand);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}
.notebook-cta p {
  margin: var(--s2) 0 0;
  color: var(--on-brand);
}
.notebook-cta .actions {
  margin-top: var(--s3);
}
.notebook-cta .btn-cta {
  border-color: transparent;
  background: var(--accent);
  color: var(--ink);
}
.notebook-cta .btn-cta:hover {
  border-color: transparent;
  background: var(--accent-deep);
  color: var(--ink);
}
.notebook-cta .btn-on-brand {
  background: transparent;
  color: var(--on-brand);
  text-decoration: none;
}
.notebook-cta .btn-on-brand:hover {
  background: var(--paper);
  color: var(--brand-deep);
}
.notebook-recommend {
  z-index: 65;
  width: min(320px, calc(100% - 32px));
}
.notebook-recommend-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 48px var(--s2) var(--s2);
  background: var(--wash);
  color: var(--ink);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.5;
}
.notebook-recommend-head svg {
  width: 32px;
  height: 32px;
  flex: none;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notebook-recommend .float-close {
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  width: 32px;
  height: 32px;
  background: var(--paper);
  color: var(--ink);
}
.notebook-recommend-copy {
  padding: var(--s2);
}
.notebook-recommend-copy p {
  margin: 0;
  font-size: var(--small);
  line-height: 1.6;
}
.notebook-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
}
.notebook-recommend-copy .btn {
  flex: 1 1 112px;
  max-width: 100%;
  min-height: 40px;
  height: auto;
  margin-top: 0;
  padding: var(--s1) var(--s2);
  font-size: var(--small);
  line-height: 1.35;
  white-space: normal;
}
@media (max-width: 860px) {
  .notebook-hero {
    padding-top: var(--s6);
    padding-bottom: var(--s4);
  }
  .notebook-layout {
    gap: var(--s4);
  }
  .notebook-toc {
    position: static;
    padding: var(--s2) var(--s3);
  }
  .notebook-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s2);
  }
  .notebook-prose > section + section {
    margin-top: var(--s4);
  }
}
@media (max-width: 560px) {
  .notebook-hero h1 {
    font-size: 34px;
    line-height: 1.3;
  }
  .notebook-hero .breadcrumb {
    margin-bottom: var(--s3);
  }
  .notebook-meta {
    gap: var(--s1) var(--s2);
    border-radius: var(--r-control);
  }
  .notebook-prose > section > h2,
  .notebook-cta h2 {
    font-size: var(--h3);
    line-height: 1.5;
  }
  .notebook-toc ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .notebook-prose .notebook-record {
    padding: var(--s2);
  }
  .notebook-prose .notebook-events > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }
  .notebook-prose > .notebook-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s3);
  }
  .notebook-cta .actions {
    align-items: stretch;
  }
  .notebook-recommend {
    width: min(300px, calc(100% - 32px));
  }
}


/* Article roots retain the shared reading layout. */
.exit-article,
.notebook-page {
  min-width: 0;
}