:root {
  --bg: #FBFAF6;
  --cream: #F5EFE3;
  --ink: #1E1C19;
  --muted: #6B655C;
  --line: #E7E1D5;
  --brand: #EE5A24;
  --brand-d: #D24A17;
  --peach: #F8DCCB;
  --peach-ink: #5A2A14;
  --pine: #183F3B;
  --pine-ink: #F2EBDD;
  --pine-muted: #A9BDB7;
  --pine-line: #2E5752;
  --hero-ink: #F7F1E6;
  --white: #FFFFFF;
  --tool-paper: #FFFDF9;
  --input-paper: #F8F4EC;
  --hover-paper: #FDF1EA;
  --comparison-paper: #FFF7F1;
  --comparison-line: #F1CDB8;
  --comparison-muted: #A88676;
  --placeholder: #9A9286;
  --rule: #DED6C6;
  --illustration-line: #D9D1C2;
  --success-paper: #E3EEEA;
  --live: #2F8F6B;
  --slot-line: #3E6A64;
  --hero-copy: rgba(247, 241, 230, .86);
  --tool-shadow: rgba(10, 6, 3, .75);
  --overlay: rgba(18, 12, 8, .55);
  --photo-shade: rgba(18, 12, 8, .6);
  --pine-hover: rgba(242, 235, 221, .08);
  --ebay-red: #E53238;
  --ebay-blue: #0064D2;
  --ebay-yellow: #F5AF02;
  --ebay-green: #86B817;
  --reddit: #FF5414;
  --wrap: 1120px;
  --header-h: 112px;
  --h1: 64px;
  --h2: 40px;
  --h3: 24px;
  --body: 15px;
  --small: 13px;
  --caption: 12px;
  --lead: 18px;
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-small: 4px;
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 128px;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body { font-family: var(--sans); font-size: var(--body); line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
img, svg { vertical-align: middle; }
input, textarea { min-width: 0; font-size: 14px; color: var(--ink); background: var(--input-paper); border: 1px solid var(--line); border-radius: var(--radius-control); }
input { min-height: 48px; padding: 0 var(--s3); }
textarea { padding: var(--s2) var(--s3); }
input::placeholder, textarea::placeholder { color: var(--placeholder); font-size: 14px; }
input:focus, textarea:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0; box-shadow: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: var(--s2); left: var(--s3); z-index: 150; padding: var(--s2) var(--s3); background: var(--white); color: var(--ink); transform: translateY(-160%); border-radius: var(--radius-control); }
.skip-link:focus { transform: translateY(0); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: 10px var(--s4); border-radius: var(--radius-control); font-size: var(--body); font-weight: 500; line-height: 1.35; text-align: center; max-width: 100%; transition: background .2s, color .2s, border-color .2s; }
.btn-solid { background: var(--brand); color: var(--white); border: 2px solid var(--brand); }
.btn-solid:hover { background: var(--brand-d); color: var(--white); border-color: var(--brand-d); }
.btn-line { background: var(--white); color: var(--brand); border: 2px solid var(--brand); }
.btn-line:hover { background: var(--hover-paper); color: var(--brand-d); }
.btn-sm { min-height: 40px; padding: 8px var(--s3); font-size: var(--small); }
.eyebrow { margin: 0 0 20px; font-size: var(--caption); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
h2 { font-size: var(--h2); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: var(--h3); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
h1 em { font-style: normal; }
.lead { font-size: var(--lead); line-height: 1.75; color: var(--muted); }
.section-intro { margin-top: 20px; }
.mono { font-family: var(--mono); letter-spacing: 0; }

.site-header { position: sticky; top: 0; z-index: 60; background: var(--white); color: var(--ink); }
.topbar { height: 40px; font-size: var(--small); color: var(--ink); background: var(--white); }
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.topbar .l, .topbar .r { display: flex; align-items: center; gap: 32px; }
.topbar a { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 500; }
.topbar a:hover { color: var(--brand); }
.topbar svg { flex: none; }
.nav { height: 72px; background: var(--white); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--h3); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.brand img { width: 28px; height: 28px; flex: none; }
.menu { display: flex; gap: 32px; margin-left: 48px; font-size: var(--body); font-weight: 500; }
.menu a { padding: 8px 0; white-space: nowrap; }
.menu a:hover { color: var(--brand); }
.menu a[aria-current="page"], [data-site-nav] a[aria-current="page"] { padding: 8px 12px; border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.nav .act { margin-left: auto; display: flex; gap: var(--s3); }
.lang { position: relative; }
.lang-trigger { position: relative; display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: 0 23px 0 0; background: var(--white); color: var(--ink); font-size: var(--small); }
.chevron { display: inline-block; width: 7px; height: 7px; flex: none; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.lang-trigger .chevron { position: absolute; right: 3px; top: 50%; transform: translateY(-65%) rotate(45deg); }
.lang-menu, .filter-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: 180px; padding: var(--s1); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); color: var(--ink); }
.lang-menu a { display: flex; padding: 8px 12px; border-radius: var(--radius-small); font-size: var(--small); }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--cream); color: var(--ink); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-drawer { position: fixed; top: var(--header-h); left: 16px; right: auto; z-index: 80; width: min(320px, calc(100% - 32px)); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); color: var(--ink); text-align: left; }
.nav-drawer a { display: block; padding: 12px; font-size: var(--body); border-radius: var(--radius-small); }
.nav-drawer a:hover, .nav-drawer a[aria-current="page"] { background: var(--cream); color: var(--ink); }
.x-short { display: none; }

.hero { position: relative; overflow: hidden; background: var(--pine); color: var(--hero-ink); text-align: center; padding: 48px 0 96px; }
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art svg { width: 100%; height: 100%; display: block; animation: drift 28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.hero-inner { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--hero-ink); opacity: .9; margin-bottom: 20px; }
.hero h1 { margin-top: 20px; font-size: var(--h1); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--hero-ink); }
.hero h1 .dot, .cta h2 .dot { color: var(--brand); }
.hero-sub { margin-top: 16px; font-size: var(--lead); line-height: 1.6; color: var(--hero-copy); }
.switch { margin-top: 32px; display: flex; justify-content: center; gap: var(--s3); }
.switch .mode { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 52px; padding: 12px 32px; border-radius: var(--radius-control); font-size: var(--body); font-weight: 500; cursor: pointer; background: var(--white); color: var(--brand); border: 2px solid var(--brand); line-height: 1.4; }
.switch .mode:hover { background: var(--hover-paper); color: var(--brand-d); }
.switch .mode.is-active { background: var(--brand); color: var(--white); }
.switch .mode:focus-visible { outline-color: var(--white); }
.tool { margin: 40px auto 0; width: min(var(--wrap), calc(100% - 48px)); height: 640px; min-height: 600px; background: var(--tool-paper); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 40px 80px -30px var(--tool-shadow); text-align: left; color: var(--ink); display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 24px); }
.bar { min-height: 72px; flex: none; display: flex; align-items: center; gap: var(--s4); padding: 12px 24px; border-bottom: 1px solid var(--line); }
.addr-box { display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 4px 0 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--input-paper); color: var(--ink); min-width: 0; }
.addr-box .cap { font-size: var(--caption); color: var(--muted); white-space: nowrap; }
.addr { font-family: var(--mono); font-size: var(--lead); letter-spacing: 0; white-space: nowrap; font-weight: 500; overflow-x: auto; }
.addr i { font-style: normal; color: var(--muted); font-weight: 400; }
.copy { height: 40px; padding: 0 16px; border-radius: var(--radius-control); background: var(--ink); color: var(--white); font-size: var(--small); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); flex: none; }
.copy:hover { background: var(--pine); color: var(--white); }
.exp { display: flex; align-items: center; gap: var(--s2); }
.exp > svg { flex: none; }
.exp .t { font-family: var(--mono); font-size: var(--body); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.exp .s { font-size: var(--caption); color: var(--muted); line-height: 1.4; white-space: nowrap; }
.meter { width: 72px; height: 4px; border-radius: var(--radius-small); background: var(--line); overflow: hidden; }
.meter b { display: block; width: 98%; height: 100%; background: var(--pine); }
.renew { font-size: var(--small); font-weight: 500; color: var(--brand); white-space: nowrap; }
.renew:hover { text-decoration: underline; }
.bar .rt { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.ghost { min-height: 40px; padding: 8px 16px; border-radius: var(--radius-control); border: 1px solid var(--line); font-size: var(--small); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); background: var(--white); color: var(--ink); line-height: 1.35; }
.ghost:hover { border-color: var(--ink); background: var(--cream); color: var(--ink); }
.icon-btn { width: 40px; padding: 0; flex: none; }
.tbody { flex: 1; display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; }
.list { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--tool-paper); min-height: 0; }
.list-h { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); font-size: var(--small); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); font-weight: 400; font-size: var(--caption); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.mail-rows { overflow-y: auto; flex: none; max-height: calc(100% - 48px); }
.row { width: 100%; height: 76px; flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); position: relative; cursor: pointer; text-align: left; color: var(--ink); background: var(--tool-paper); }
.row:hover { background: var(--input-paper); color: var(--ink); }
.row.on, .row.is-active { background: var(--cream); color: var(--ink); }
.row.on::before, .row.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.av { width: 40px; height: 40px; border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--cream); color: var(--ink); }
.av-ebay { background: var(--white); color: var(--ink); border: 1px solid var(--line); font: 600 13px/1 var(--sans); letter-spacing: -.04em; }
.ebay-e { color: var(--ebay-red); }
.ebay-b { color: var(--ebay-blue); }
.ebay-a { color: var(--ebay-yellow); }
.ebay-y { color: var(--ebay-green); }
.av-red { background: var(--reddit); color: var(--white); }
.row-copy { min-width: 0; }
.row .top { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); }
.row .n { font-size: var(--body); font-weight: 500; line-height: 1.3; }
.row .tm { font-size: var(--caption); color: var(--muted); white-space: nowrap; }
.row .sj { display: block; font-size: var(--small); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.row .pv { display: block; font-size: var(--caption); color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--small); color: var(--muted); padding: 20px; }
.read { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--white); color: var(--ink); overflow-y: auto; }
.rh { padding: 20px 32px 16px; border-bottom: 1px solid var(--line); flex: none; }
.rh .sub { display: flex; align-items: center; gap: var(--s2); }
.rh .sub h3 { font-size: var(--h3); }
.badge, .status-pill { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 2px 8px; border-radius: var(--radius-small); background: var(--peach); color: var(--peach-ink); font-size: var(--caption); font-weight: 500; letter-spacing: .04em; flex: none; }
.rh .meta { margin-top: 12px; display: flex; align-items: center; gap: var(--s2); font-size: var(--small); color: var(--muted); }
.rh .meta .av { width: 40px; height: 40px; font-size: var(--small); }
.rh .meta b { color: var(--ink); font-weight: 500; }
.rh .meta .when { margin-left: auto; white-space: nowrap; }
.reader-address { min-width: 0; overflow-wrap: anywhere; }
.rc { flex: 1; min-height: 0; padding: 20px 32px; overflow: auto; font-size: var(--body); }
.ebay-w { font: 600 24px/1 var(--sans); letter-spacing: -.05em; }
.rc p { margin-top: 8px; }
.code { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 16px 24px; background: var(--cream); color: var(--ink); border-radius: var(--radius-control); }
.code .v { font-family: var(--mono); font-size: var(--h2); line-height: 1.2; font-weight: 500; letter-spacing: .18em; color: var(--ink); }
.code .h { font-size: var(--small); color: var(--muted); text-align: right; line-height: 1.5; }
.dev { margin-top: 16px; display: flex; gap: 32px; font-size: var(--small); color: var(--muted); }
.dev b { color: var(--ink); font-weight: 500; margin-left: 8px; }
.rc .disc { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--caption); color: var(--muted); }
.ra { min-height: 64px; flex: none; border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s1); padding: 12px 32px; }
.ra .note { margin-left: auto; font-size: var(--caption); color: var(--muted); }
.reader-close { display: none; }
.reader:not(.mobile-reader) [data-reader-close], .read:not(.mobile-reader) [data-reader-close] { display: none; }
.mail-frame { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 300px; border: 0; background: var(--white); color: var(--ink); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--body)/1.7 var(--mono); }
.is-real .demo-pill, .is-real [data-demo-brand], .is-real [data-demo-badge] { display: none; }
.empty-host { display: grid; place-items: center; min-height: 0; }
.empty-state { width: min(420px, calc(100% - 32px)); min-height: 0; height: auto; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.empty-state h3 { font-size: var(--lead); }
.empty-state p { margin-top: 8px; color: var(--muted); font-size: var(--small); }

.fwd { flex: 1; display: grid; grid-template-columns: 440px minmax(0, 1fr); min-height: 0; }
.fwd-l { padding: 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.fwd-l p { margin-top: 8px; color: var(--muted); }
.field { margin-top: 24px; font-size: var(--small); font-weight: 500; }
.input { margin-top: 8px; height: 48px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--input-paper); display: flex; align-items: center; padding: 0 16px; font-family: var(--mono); font-size: var(--body); color: var(--placeholder); letter-spacing: 0; }
.fwd-l .btn { margin-top: 16px; width: 100%; }
.facts { margin-top: auto; list-style: none; border-top: 1px solid var(--line); padding-top: 16px; }
.facts li { display: flex; gap: var(--s2); align-items: center; font-size: var(--small); padding: 6px 0; }
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); flex: none; }
.fwd-r { padding: 32px 40px; background: var(--tool-paper); color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
.fwd-r .hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.fwd-r .hd b { font-size: var(--body); font-weight: 500; }
.tbl { margin-top: 16px; width: 100%; border-collapse: collapse; font-size: var(--small); }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--caption); padding: 8px 0; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl .mono { font-size: var(--small); }
.pill { display: inline-flex; width: fit-content; min-height: 22px; align-items: center; padding: 2px 8px; border-radius: var(--radius-small); font-size: var(--caption); }
.p-ok { background: var(--success-paper); color: var(--pine); }
.p-blk { background: var(--peach); color: var(--peach-ink); }
.arch { margin-top: 24px; }
.arch .t { font-size: var(--caption); color: var(--muted); letter-spacing: .08em; }
.arow { display: flex; align-items: center; gap: var(--s2); height: 44px; border-bottom: 1px solid var(--line); font-size: var(--small); }
.arow .x { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .d { color: var(--muted); font-size: var(--caption); }

.sec { padding: 128px 0; }
.sec-cream { background: var(--cream); color: var(--ink); }
.head-c { text-align: center; max-width: 760px; margin: 0 auto; }
.head-c h2 { margin-top: 20px; }
.head-c .lead { margin-top: 20px; }
.grid12 { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.card { border-radius: var(--radius-card); padding: 48px; }
.c-cream { grid-column: span 7; background: var(--cream); color: var(--ink); }
.c-pine { grid-column: span 5; background: var(--pine); color: var(--pine-ink); }
.c-pine p { color: var(--pine-muted); }
.c-peach { grid-column: span 12; background: var(--peach); color: var(--peach-ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.c-peach .k { color: var(--peach-ink); opacity: .75; }
.card .k { font-size: var(--caption); font-weight: 500; letter-spacing: .14em; }
.card h3 { margin-top: 12px; }
.card p { margin-top: 12px; }
.card .k { margin-top: 0; }
.c-cream p { color: var(--muted); }
.c-pine .k { color: var(--pine-muted); }
.mock { margin-top: 32px; background: var(--tool-paper); color: var(--ink); border-radius: var(--radius-control); padding: 8px 24px; }
.mrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px; gap: var(--s3); align-items: center; height: 52px; border-bottom: 1px solid var(--line); font-size: var(--small); }
.mrow:last-child { border-bottom: 0; }
.mrow .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .d { text-align: right; color: var(--muted); font-size: var(--caption); }
.slots { margin-top: 32px; }
.slots .cap { margin-top: 16px; font-size: var(--small); color: var(--pine-muted); display: flex; justify-content: space-between; }
.slots .cap b { color: var(--pine-ink); font-weight: 500; }
.cmp { background: var(--comparison-paper); color: var(--peach-ink); border-radius: var(--radius-control); padding: 8px 24px; min-width: 0; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 64px; border-bottom: 1px solid var(--comparison-line); }
.crow:last-child { border-bottom: 0; }
.crow .a { font-family: var(--mono); font-size: var(--lead); letter-spacing: 0; white-space: nowrap; }
.crow .bad { color: var(--comparison-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.crow .tag { font-size: var(--caption); flex: none; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); align-items: center; }
.split h2 { margin-top: 20px; }
.split .lead { margin-top: 20px; }
.steps { margin-top: 40px; list-style: none; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 20px 0; border-bottom: 1px solid var(--rule); }
.steps .n { font-family: var(--mono); font-size: var(--small); color: var(--brand); font-weight: 500; padding-top: 2px; }
.steps b { font-size: var(--body); font-weight: 600; display: block; }
.steps span { display: block; margin-top: 4px; color: var(--muted); }
.split .btns { margin-top: 40px; display: flex; gap: var(--s3); }
.ph { border-radius: var(--radius-card); overflow: hidden; height: 600px; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band { position: relative; height: 420px; border-radius: var(--radius-card); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band::after { content: ""; position: absolute; inset: 0; background: var(--photo-shade); }
.band .cap { position: absolute; left: 64px; right: 32px; bottom: 56px; z-index: 1; color: var(--hero-ink); }
.band .cap .eyebrow { color: var(--hero-ink); opacity: .85; }
.band .cap h2 { margin-top: 20px; color: var(--hero-ink); }
.scenes { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.scene h3 { font-size: var(--h3); margin-top: 16px; }
.scene p { margin-top: 8px; color: var(--muted); }
.scene .ad { margin-top: 16px; font-family: var(--mono); font-size: var(--small); letter-spacing: 0; color: var(--ink); background: var(--cream); border-radius: var(--radius-small); display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 4px 8px; }
.trace { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 32px 48px; background: var(--cream); color: var(--ink); border-radius: var(--radius-card); }
.trace b { font-size: var(--lead); font-weight: 600; }
.trace p { color: var(--muted); margin-top: 4px; }
.tlink { font-weight: 500; color: var(--brand); display: inline-flex; align-items: center; gap: var(--s1); flex: none; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 96px; }
.faq h2 { margin-top: 20px; }
.faq .lead { margin-top: 20px; }
.faq .lead a { color: var(--brand); font-weight: 500; overflow-wrap: anywhere; }
details { border-bottom: 1px solid var(--rule); }
details:first-child { border-top: 1px solid var(--rule); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 24px 0; font-size: var(--lead); font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s; margin: 0 4px 4px 0; }
details[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }
details p { padding: 0 48px 24px 0; color: var(--muted); }
.cta { background: var(--pine); color: var(--pine-ink); text-align: center; padding: 128px 0; }
.cta .eyebrow { color: var(--pine-muted); }
.cta h2 { margin-top: 20px; color: var(--pine-ink); }
.cta .lead { margin-top: 20px; color: var(--pine-muted); }
.cta .btns { margin-top: 40px; display: flex; justify-content: center; gap: var(--s3); }
.cta .btn-line { background: transparent; color: var(--pine-ink); border-color: var(--pine-ink); }
.cta .btn-line:hover { background: var(--pine-hover); color: var(--pine-ink); }

footer { background: var(--bg); color: var(--ink); padding: 96px 0 48px; font-size: var(--small); }
.fgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.fgrid > div { min-width: 0; }
.fgrid p { margin-top: 16px; color: var(--muted); }
.fgrid h4 { font-size: var(--caption); font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.fgrid ul { list-style: none; margin-top: 16px; }
.fgrid li { padding: 4px 0; }
.fgrid li a { overflow-wrap: anywhere; }
.fgrid li a:hover { color: var(--brand); }
.footer-support { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.footer-support p { margin-top: 0; }
.footer-support .btn { white-space: normal; height: auto; }
.fbot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s4); color: var(--muted); }
.fbot a { color: var(--ink); font-weight: 500; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 150; transform: translate(-50%, 12px); width: max-content; max-width: min(430px, calc(100% - 32px)); padding: 14px 20px; border-radius: var(--radius-control); background: var(--ink); color: var(--white); font-size: var(--small); line-height: 1.5; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--s3); background: var(--overlay); color: var(--ink); }
.modal { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.modal h2 { font-size: var(--h3); line-height: 1.4; margin: 12px 0; }
.modal p { color: var(--muted); }
.modal .actions { justify-content: flex-end; margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.page-hero { padding: 64px 0; text-align: center; }
.page-hero h1 { font-size: var(--h1); line-height: 1.22; letter-spacing: -.02em; }
.page-hero .section-intro { max-width: 760px; margin: 20px auto 0; color: var(--muted); }
.login-card { padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); min-width: 0; }
.login-card h2, .auth-card h2 { font-size: 24px; line-height: 1.4; }
.login-card form, .login-pane { display: grid; gap: var(--s3); }
.login-card label, .auth-card label, [data-login] label { display: block; margin-bottom: 8px; font-size: var(--small); }
.login-card input { width: 100%; background: var(--input-paper); color: var(--ink); border-color: var(--line); font-size: 14px; }
.login-notice { padding: 12px 0; margin: 16px 0; color: var(--muted); font-size: var(--small); }
.auth-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); max-width: var(--wrap); margin: 0 auto; padding: 64px 24px; }
.auth-layout h1 { font-size: var(--h2); line-height: 1.3; }
.auth-layout > * { min-width: 0; }
.desk { padding: 48px 0 96px; }
.desk-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: 40px; }
.session-email { font-family: var(--mono); overflow-wrap: anywhere; font-size: 14px; }
.alias-panel { padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.alias-panel h2, .archive-panel h2, .surface-safety h2 { font-size: var(--h3); }
.alias-compose { display: flex; align-items: center; gap: var(--s2); margin-top: 24px; }
.alias-compose input { flex: 1; width: 0; min-width: 0; font-size: 14px; border-radius: var(--radius-control); }
.alias-compose .btn, .alias-compose .ghost { min-height: 48px; font-size: var(--small); }
.alias-list { margin-top: 24px; }
.alias-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: 16px 0; border-bottom: 1px solid var(--line); }
.alias-address { flex: 1; font-family: var(--mono); overflow-wrap: anywhere; min-width: 0; }
.alias-operations { display: flex; gap: var(--s1); flex-wrap: wrap; }
.archive-panel { margin-top: 40px; padding: 40px; border-radius: var(--radius-card); background: var(--cream); color: var(--ink); }
.archive-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: 24px; }
.archive-list { border-top: 0; }
.archive-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-size: var(--small); }
.archive-row-main { min-width: 0; flex: 1; }
.archive-row-main strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.archive-row-meta { display: flex; align-items: center; gap: var(--s3); flex: none; }
.archive-panel .empty-state { margin: 24px auto 0; }
.archive-wait { margin-top: 16px; }
.filter { position: relative; display: inline-block; }
.filter-trigger { position: relative; display: inline-flex; align-items: center; gap: var(--s2); width: auto; margin-block: 16px; padding: 10px 16px; min-height: 40px; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font-size: var(--small); }
.filter-trigger .chevron { transform: translateY(-2px) rotate(45deg); }
.filter-menu { left: 0; right: auto; min-width: 160px; background: var(--white); color: var(--ink); border-color: var(--rule); }
.filter > .filter-menu { width: max-content; min-width: max(100%, 12em); max-width: min(360px, calc(100vw - 32px)); }
.filter-menu button, .filter-menu [role="option"] { display: flex; align-items: center; width: auto; min-width: 100%; height: auto; text-align: left; padding: 8px 12px; background: var(--white); color: var(--ink); font-size: var(--small); border-radius: var(--radius-small); white-space: nowrap; }
.filter-menu button:hover, .filter-menu button[aria-selected="true"] { background: var(--cream); color: var(--ink); }
.surface-safety { margin-top: 40px; padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.twofa-idle { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.twofa-idle .btn { align-self: center; flex: none; }
.twofa-status { display: flex; align-items: center; gap: var(--s3); margin-bottom: 20px; }
.twofa-status [data-2fa-badge] { margin: 0; background: var(--peach); color: var(--peach-ink); }
.twofa-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: 24px; list-style: none; font-size: var(--small); }
.step-number { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin-right: 8px; border-radius: 50%; background: var(--cream); color: var(--ink); font-family: var(--mono); }
.twofa-setup, [data-twofa-setup] { margin: 0 0 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink); }
.setup-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.twofa-qr { width: 180px; height: 180px; aspect-ratio: 1; object-fit: contain; background: var(--white); color: var(--ink); }
.twofa-secret { color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; }
.secret-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 16px 0; }
.secret-line button { width: auto; flex: none; }
.twofa-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: 16px; }
.twofa-actions input { width: 150px; }
.archive-detail { min-width: 0; max-width: 100%; margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); overflow-wrap: anywhere; }
.archive-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.archive-detail-header h2 { font-size: var(--h3); }
.archive-detail-header button { align-self: flex-start; flex: none; }
.archive-detail .mail-frame { margin-top: 24px; }

.article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 280px); gap: var(--s6); width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 96px; align-items: start; }
.prose { min-width: 0; font-size: var(--body); line-height: 1.85; }
.prose h2 { font-size: var(--h3); line-height: 1.45; margin: 40px 0 20px; }
.prose h3 { font-size: var(--lead); line-height: 1.5; margin: 32px 0 16px; }
.prose p { margin: 16px 0; }
.prose ul, .prose ol { padding-left: 24px; margin: 24px 0; }
.prose a:not(.btn) { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.prose .btn-solid { color: var(--white); }
.prose table, .prose .card { margin: 24px 0 32px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.prose th, .prose td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.toc { position: sticky; top: calc(var(--header-h) + 16px); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 24px; background: var(--cream); color: var(--ink); }
.toc h2 { font-size: var(--lead); }
.toc ol { padding-left: 20px; margin-top: 16px; font-size: var(--small); }
.toc .count { margin-top: 16px; }
.recommend-float { position: fixed; bottom: 24px; right: 24px; z-index: 50; width: min(320px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); overflow: hidden; }
.recommend-float .float-body { padding: 24px; }
.recommend-float h2 { font-size: var(--lead); }
.recommend-float p { color: var(--muted); font-size: var(--small); margin: 12px 0 24px; }
.recommend-float .btn { height: auto; white-space: normal; max-width: 100%; }
.float-close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.post-card { display: block; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); height: 100%; }
.post-card:hover { background: var(--cream); color: var(--ink); }
.post-card time { display: block; margin-top: 16px; color: var(--muted); font-size: var(--small); }
body.sheet-open { overflow: hidden; }

@media (max-width: 1100px) {
  :root { --h1: 52px; --h2: 36px; }
  .menu { margin-left: 24px; gap: 20px; }
  .nav .act { gap: 8px; }
  .nav .act .btn { padding-left: 12px; padding-right: 12px; }
  .bar { gap: 12px; flex-wrap: wrap; }
  .bar .rt { margin-left: auto; }
  .addr { font-size: var(--body); }
  .meter { display: none; }
  .tbody { grid-template-columns: 32% minmax(0, 1fr); }
  .row { padding: 0 16px; gap: 8px; }
  .row .top { flex-wrap: wrap; gap: 0 8px; }
  .card { padding: 32px; }
  .c-cream, .c-pine { grid-column: span 6; }
  .c-peach { gap: 24px; }
  .crow .a { font-size: 14px; }
  .split { gap: 40px; }
  .faq { grid-template-columns: 30% minmax(0, 1fr); gap: 48px; }
  .fgrid { gap: 24px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}

@media (max-width: 860px) {
  :root { --header-h: 104px; --h1: 44px; --h2: 32px; }
  .topbar { height: 40px; }
  .topbar .l { gap: 16px; }
  .topbar .l .support-top { display: none; }
  .topbar .r { gap: 16px; }
  .nav { height: 64px; }
  .nav .wrap { gap: 16px; }
  .nav-toggle { display: inline-flex; order: -1; }
  .menu { display: none; }
  .nav .act .product-cta { display: none; }
  .brand { font-size: 22px; }
  .hero { padding-top: 40px; padding-bottom: 64px; }
  .hero h1, .hero-sub, .hero .eyebrow { margin-left: 24px; margin-right: 24px; }
  .tool { height: auto; min-height: 0; }
  .bar { padding: 16px; gap: 16px; }
  .addr-box { width: 100%; justify-content: flex-start; }
  .addr-box .addr { flex: 1; }
  .bar .exp { margin-right: auto; }
  .bar .rt { margin-left: 0; }
  .tbody { display: block; min-height: 0; }
  .list { border-right: 0; min-height: 340px; }
  .mail-rows { max-height: 380px; }
  .list-empty { min-height: 140px; }
  .read { display: none; }
  .mobile-reader { display: flex; position: fixed; inset: var(--header-h) 0 0; width: 100%; height: calc(100dvh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); z-index: 100; border-radius: 0; background: var(--white); color: var(--ink); text-align: left; }
  .mobile-reader .ra { order: -1; position: sticky; top: 0; z-index: 2; background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); padding: 12px 16px; flex-wrap: wrap; }
  .mobile-reader .reader-close { display: inline-flex; }
  .mobile-reader .rh { padding: 20px 16px; }
  .mobile-reader .rc { padding: 20px 16px; overflow: auto; }
  .mobile-reader .ra .note { display: none; }
  .mobile-reader .meta { flex-wrap: wrap; }
  .mobile-reader .reader-address { flex: 1; }
  .hero-inner, .panels, .tool, .tbody { transform: none; animation: none; }
  .sheet-open .hero-art { visibility: hidden; }
  .grid12 { margin-top: 40px; }
  .c-cream, .c-pine, .c-peach { grid-column: span 12; }
  .c-peach { grid-template-columns: minmax(0, 1fr); }
  .slots svg { max-height: 160px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ph { height: 420px; }
  .sec { padding: 80px 0; }
  .band { height: 360px; }
  .band .cap { left: 32px; bottom: 32px; }
  .scenes { gap: 24px; }
  .trace { gap: 24px; padding: 24px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cta { padding: 80px 0; }
  footer { padding-top: 64px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .twofa-idle { align-items: flex-start; }
  .twofa-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; order: -1; }
  .alias-compose { flex-wrap: wrap; }
  .alias-compose input { flex-basis: 60%; }
}

@media (max-width: 560px) {
  :root { --h1: 34px; --h2: 28px; --h3: 22px; }
  .wrap { width: calc(100% - 32px); }
  .topbar .l { gap: 12px; }
  .topbar .l a { font-size: var(--caption); }
  .topbar .r > a { display: none; }
  .topbar .wrap { position: relative; justify-content: center; }
  .topbar .l { position: absolute; left: 0; }
  .topbar .lang { margin-left: auto; }
  .lang .lang-trigger { width: 40px; height: 32px; padding: 0; justify-content: center; border: 0; background: var(--white); color: var(--ink); font-size: 0; overflow: hidden; }
  .lang-trigger .lang-text { display: none; }
  .lang-trigger .chevron { right: 0; }
  .lang-trigger > svg { margin-right: 10px; }
  .nav .wrap { gap: 10px; }
  .brand { gap: 8px; font-size: 20px; }
  .brand img { width: 26px; height: 26px; }
  .nav .act { margin-left: auto; }
  .nav .act .btn { font-size: var(--caption); padding: 8px 12px; }
  .x-full { display: none; }
  .x-short { display: inline; }
  .hero { padding-top: 36px; }
  .hero h1 { margin-left: 16px; margin-right: 16px; line-height: 1.3; }
  .hero-sub { margin-left: 24px; margin-right: 24px; font-size: var(--body); }
  .hero .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .switch { margin-top: 24px; gap: 12px; padding: 0 16px; flex-wrap: wrap; }
  .switch .mode { padding: 12px 18px; min-height: 48px; font-size: var(--small); }
  .tool { width: calc(100% - 24px); margin-top: 32px; }
  .bar { padding: 12px; gap: 12px; }
  .addr-box { gap: 8px; padding-left: 10px; }
  .addr-box .cap { display: none; }
  .addr { font-size: var(--small); }
  .copy { padding: 0 10px; }
  .bar .exp { gap: 8px; }
  .exp .t { font-size: var(--small); }
  .exp .s { font-size: 11px; }
  .bar .rt { width: 100%; justify-content: space-between; }
  .list-h { padding: 0 16px; }
  .list { min-height: 320px; }
  .row { padding: 0 16px; }
  .row .top { flex-wrap: nowrap; }
  .rh .sub { align-items: flex-start; }
  .rh .sub h3 { font-size: var(--lead); }
  .rh .meta .when { margin-left: 52px; }
  .code { padding: 16px; gap: 12px; }
  .code .v { font-size: 30px; letter-spacing: .12em; }
  .code .h { font-size: var(--caption); }
  .ra { gap: 8px; }
  .ra .btn, .ra .ghost { padding-left: 12px; padding-right: 12px; }
  .card { padding: 24px; }
  .mock { padding: 8px 12px; }
  .mrow { grid-template-columns: 64px minmax(0, 1fr) 66px; gap: 8px; }
  .mrow .d { font-size: 11px; }
  .cmp { padding: 8px 12px; }
  .crow { flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; padding: 12px 0; }
  .crow .a { font-size: var(--small); max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .split .btns, .cta .btns { flex-wrap: wrap; }
  .ph { height: 360px; }
  .sec, .cta { padding: 64px 0; }
  .band { height: 320px; }
  .band .cap { left: 24px; right: 24px; bottom: 24px; }
  .scenes { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .trace { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .faq summary { font-size: var(--body); }
  .faq details p { padding-right: 16px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-brand, .footer-support { grid-column: 1 / -1; }
  .fbot { margin-top: 40px; flex-direction: column; gap: 12px; }
  .desk-heading { align-items: flex-start; flex-wrap: wrap; }
  .alias-panel, .archive-panel, .surface-safety, .login-card { padding: 24px; }
  .alias-compose { display: grid; grid-template-columns: minmax(0, 1fr); }
  .alias-compose input { width: 100%; }
  .alias-row { align-items: flex-start; }
  .alias-address { flex-basis: 100%; }
  .archive-heading { align-items: flex-start; flex-wrap: wrap; }
  .archive-row { flex-wrap: wrap; gap: 8px; }
  .archive-row-main { flex-basis: 100%; }
  .archive-row-meta { justify-content: flex-start; flex-wrap: wrap; }
  .twofa-idle { flex-direction: column; align-items: flex-start; }
  .twofa-idle .btn { align-self: flex-start; }
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .twofa-actions { align-items: center; }
  .twofa-actions input { flex: 1; width: 0; min-width: 90px; }
  .twofa-actions .btn { padding-left: 12px; padding-right: 12px; }
  .auth-layout { padding: 40px 16px; gap: 32px; }
  .article-layout { width: calc(100% - 32px); }
  .recommend-float { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.access-scene { background: var(--cream); color: var(--ink); }
.access-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s6); padding-top: var(--s6); padding-bottom: var(--s6); }
.access-story { min-width: 0; padding: var(--s4) 0 var(--s6); }
.access-story h1 { margin-top: 20px; font-size: var(--h2); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.access-dot { color: var(--brand); }
.access-story .section-intro { margin-top: 24px; }
.access-postcard { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: var(--s4); margin-top: var(--s5); padding: var(--s4); border-radius: var(--radius-control); background: var(--peach); color: var(--peach-ink); }
.access-postcard h2 { font-size: var(--lead); line-height: 1.5; }
.access-postcard p { margin-top: var(--s2); font-size: var(--small); color: var(--peach-ink); }
.pigeonhole-symbol { flex: none; color: var(--brand); max-width: 100%; }
.access-postcard .pigeonhole-symbol { color: var(--peach-ink); }
.access-footnote { margin-top: var(--s4); color: var(--muted); font-size: var(--small); }
.access-footnote a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.access-panel { display: grid; gap: var(--s4); }
.access-card-heading .eyebrow { margin-bottom: 20px; }
.access-card-heading p:not(.eyebrow) { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.access-panel form { gap: var(--s2); }
.access-panel form .btn { margin-top: var(--s2); }
.access-secondary { gap: var(--s2); }
.access-secondary .ghost { min-height: 44px; color: var(--ink); background: var(--white); }
.field-hint { font-size: var(--small); line-height: 1.65; color: var(--muted); }
.access-consent { padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--caption); color: var(--muted); }
.access-consent a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.access-panel .login-notice { margin: 0; padding: var(--s2) var(--s3); background: var(--success-paper); color: var(--pine); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.inline-feedback { margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--comparison-line); border-radius: var(--radius-control); background: var(--comparison-paper); color: var(--peach-ink); font-size: var(--small); overflow-wrap: anywhere; }
.access-panel .inline-feedback { margin-top: 0; }
.digits-input { font-family: var(--mono); letter-spacing: .12em; }

.session-mast { align-items: center; padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.session-copy { min-width: 0; }
.session-mast h1 { font-size: var(--h2); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s3); }
.session-mast .field-hint { margin-top: var(--s1); }
.session-mast > button { flex: none; align-self: center; }
.session-email { font-weight: 500; }
.issue-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); }
.issue-copy { max-width: 760px; min-width: 0; }
.issue-heading .eyebrow { margin-bottom: 20px; }
.address-issue .section-intro { color: var(--muted); font-size: var(--body); }
.alias-domain { font-size: var(--small); color: var(--muted); white-space: nowrap; flex: none; }
.alias-compose:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius-control);
}
.alias-compose input:focus-visible {
  outline: none;
  box-shadow: none;
}
.random-prefix { border-radius: var(--radius-control); background: var(--white); color: var(--ink); }
.compose-help { margin-top: var(--s2); }
.alias-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); }
.alias-list-head h3 { font-size: var(--lead); }
.alias-list-head .status-pill { background: var(--cream); color: var(--muted); letter-spacing: 0; }
.address-issue .alias-list { margin-top: var(--s3); }
.address-issue .alias-row { gap: var(--s3); }
.alias-operations .ghost { font-size: var(--small); min-height: 36px; padding: 7px var(--s2); }
.alias-empty { margin: var(--s4) 0 0; width: 100%; }
.alias-stats { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.stats-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.stats-heading h3 { font-size: var(--lead); }
.stats-address { margin-top: var(--s2); overflow-wrap: anywhere; font-size: var(--small); }
.stats-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.stat-item { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.stat-item dt { color: var(--muted); font-size: var(--small); }
.stat-item dd { margin-top: var(--s1); font-family: var(--mono); font-size: var(--h3); }
.stats-senders { margin-top: var(--s4); padding: 0; list-style: none; font-size: var(--small); }
.stats-senders li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.stats-note { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }

.record-spread { padding: var(--s5); }
.record-intro { display: flex; justify-content: space-between; align-items: start; gap: var(--s5); }
.record-intro > div:first-child { max-width: 760px; min-width: 0; }
.record-intro .section-intro { color: var(--muted); }
.retention-stamp { flex: none; display: flex; align-items: center; flex-direction: column; padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--pine); }
.retention-stamp strong { font: 500 var(--h2)/1.2 var(--mono); }
.retention-stamp span { margin-top: var(--s1); color: var(--muted); font-size: var(--caption); }
.record-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 var(--s3); overflow: visible; }
.record-controls .filter, .record-controls .custom-choice { position: relative; z-index: 4; }
.record-controls > .ghost { margin-left: auto; }
.alias-filter-label { font-size: var(--small); margin-left: var(--s2); color: var(--muted); }
.alias-filter { min-height: 40px; min-width: 0; max-width: 300px; padding: 8px 12px; font-family: var(--sans); font-size: var(--small); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--white); color: var(--ink); }
.record-spread .archive-list { border-top: none; }
.archive-row:disabled { cursor: progress; }
.archive-row:hover { background: var(--input-paper); color: var(--ink); }
.archive-sender { display: block; margin-top: 4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-row-meta time { font-family: var(--mono); font-size: var(--caption); color: var(--muted); white-space: nowrap; }
.record-spread .record-empty { width: 100%; margin: var(--s4) 0 0; background: var(--tool-paper); color: var(--ink); }
.record-more { display: flex; justify-content: center; }
.record-more:has(button:not([hidden])) { margin-top: var(--s4); }
.archive-detail { scroll-margin-top: calc(var(--header-h) + 24px); }
.archive-detail-title { min-width: 0; overflow-wrap: anywhere; }
.archive-detail-from { font-size: var(--small); color: var(--muted); margin-top: var(--s3); }
.archive-detail-time { display: block; margin-top: var(--s1); font-size: var(--caption); color: var(--muted); }
.detail-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); flex: none; }
.detail-side .actions { flex-wrap: nowrap; }
.detail-side button { align-self: center; }
.archive-message-body { margin-top: var(--s4); min-height: 180px; max-height: 680px; overflow: auto; color: var(--ink); background: var(--white); padding: var(--s3); border-radius: var(--radius-control); }
.archive-message-body .mail-frame { margin-top: 0; }
.archive-attachments { margin-top: var(--s4); }
.attachment-note { font-size: var(--small); color: var(--muted); }
.attachment-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--small); }
.attachment-row > span { overflow-wrap: anywhere; min-width: 0; }
.attachment-row button { flex: none; }

.access-safety { background: var(--bg); color: var(--ink); }
.safety-copy { min-width: 0; max-width: 820px; }
.safety-copy .section-intro { color: var(--muted); }
.safety-copy .twofa-status { margin-top: var(--s3); color: var(--muted); font-size: var(--small); }
.access-safety .twofa-status [data-2fa-badge] { margin: 0; }
.access-safety .twofa-status .p-ok { background: var(--success-paper); color: var(--pine); }
.access-safety .twofa-idle > button { align-self: center; }
.access-safety .twofa-steps { display: flex; flex-wrap: wrap; gap: var(--s4); }
.access-safety .twofa-steps li { display: flex; align-items: center; color: var(--muted); }
.setup-instructions { min-width: 0; }
.setup-instructions h3 { font-size: var(--lead); }
.setup-instructions p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.setup-instructions .secret-line { align-items: center; }
.setup-instructions .twofa-secret { font-size: 14px; }
.setup-instructions .twofa-actions > input { min-height: 48px; }
.setup-instructions .twofa-actions > button { min-height: 48px; }
.disable-twofa { margin-top: var(--s4); }
.disable-twofa label { font-size: var(--small); color: var(--muted); }
.disable-twofa input { min-height: 48px; }
.disable-twofa button { min-height: 48px; }

.mail-image-notice { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-control); background: var(--cream); color: var(--muted); font-size: var(--small); }
.unread-dot { position: absolute; top: -2px; right: -2px; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); border: 1px solid var(--tool-paper); }
.row .av { position: relative; }
.row .top { flex-wrap: nowrap; }
.row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .tm { align-self: center; }
.confirm-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--peach); color: var(--peach-ink); font-size: var(--lead); font-weight: 600; }
.dialog-open { overflow: hidden; }
.empty-host { flex: 1; }
.read > .empty-host { min-height: 200px; }
.list > .empty-host { min-height: 160px; }
.empty-state { align-self: center; }
.nav-drawer { z-index: 85; }
.modal-backdrop { z-index: 130; }
.modal .actions .ghost { min-height: 48px; }
.alias-row .pill { align-self: center; }
.alias-row .pill.is-active { background: var(--success-paper); color: var(--pine); }
.alias-row .pill.is-paused { background: var(--peach); color: var(--peach-ink); }

@media (max-width: 1100px) {
  .access-layout { gap: var(--s5); }
  .address-issue .alias-compose { flex-wrap: wrap; }
  .address-issue .alias-compose input { flex-basis: 45%; }
  .address-issue .alias-operations { flex-basis: 100%; }
}

@media (max-width: 960px) {
  .access-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--wrap); gap: var(--s5); }
  .access-panel { grid-row: 1; }
  .access-story { padding: 0 0 var(--s6); }
  .access-story h1 { font-size: var(--h2); line-height: 1.35; }
  .access-story h1 br { display: none; }
  .access-postcard { margin-top: var(--s4); }
}

@media (max-width: 860px) {
  .mobile-reader { top: var(--header-h); bottom: auto; height: 100dvh; max-height: none; padding-bottom: var(--header-h); }
  .mobile-reader .ra { flex: none; }
  .mobile-reader .rh { flex: none; }
  .mobile-reader .rc { flex: 1; min-height: 0; }
  .mobile-reader > .empty-host { padding-bottom: var(--s4); }
  .addr-box .addr { min-width: 0; overflow-x: auto; text-overflow: clip; }
  .access-safety .twofa-steps { gap: var(--s3); }
}

@media (max-width: 720px) {
  .address-issue .alias-row { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); margin-bottom: var(--s2); }
  .address-issue .alias-address { flex: 0 0 100%; overflow-wrap: anywhere; }
  .address-issue .alias-operations { flex-basis: 100%; }
  .issue-heading { gap: var(--s4); }
  .issue-heading > svg { width: 60px; height: 48px; }
  .record-intro { gap: var(--s4); }
  .retention-stamp { padding: var(--s2); }
  .record-controls { align-items: center; }
  .alias-filter { max-width: 100%; flex: 1; }
  .record-controls > .ghost { margin-left: 0; }
  .record-spread .archive-row-main { flex-basis: 100%; }
  .record-spread .archive-row { flex-wrap: wrap; }
  .archive-detail-header { flex-direction: column; }
  .detail-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .access-safety .twofa-idle { flex-direction: column; align-items: flex-start; }
  .access-safety .twofa-idle > button { align-self: flex-start; }
  .access-safety .setup-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .access-layout { padding-top: var(--s5); padding-bottom: var(--s5); }
  .access-panel { padding: var(--s4); gap: var(--s4); }
  .access-postcard { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .access-secondary .ghost { flex: 1 1 auto; }
  .session-mast { align-items: flex-start; gap: var(--s4); }
  .session-mast h1 { font-size: var(--h2); }
  .session-mast > button { align-self: flex-start; }
  .issue-heading > svg { display: none; }
  .address-issue .alias-compose { display: grid; grid-template-columns: minmax(0, 1fr); }
  .address-issue .alias-compose input { width: 100%; }
  .alias-domain { white-space: normal; font-size: var(--small); }
  .address-issue .alias-compose button { width: 100%; }
  .alias-list-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .stats-figures { gap: var(--s1); }
  .stat-item { padding: var(--s2); }
  .stat-item dt { font-size: var(--caption); }
  .stats-heading { align-items: flex-start; }
  .record-spread { padding: var(--s4); }
  .record-intro { flex-direction: column; }
  .retention-stamp { flex-direction: row; gap: var(--s2); padding: var(--s2) var(--s3); }
  .retention-stamp strong { font-size: var(--h3); }
  .retention-stamp span { margin-top: 0; }
  .record-controls { gap: var(--s2); }
  .record-controls .filter { flex: 0 0 100%; }
  .alias-filter-label { margin-left: 0; }
  .alias-filter { width: 100%; flex: 1 1 65%; }
  .archive-detail { padding: var(--s3); }
  .archive-message-body { padding: var(--s2); }
  .archive-row-meta { width: 100%; justify-content: space-between; }
  .access-safety .twofa-steps { flex-direction: column; }
  .access-safety .twofa-actions { gap: var(--s2); }
  .access-safety .twofa-actions input { width: 100%; flex: 1 1 100%; }
  .access-safety .twofa-actions button { flex: 0 1 auto; }
  .disable-twofa label { flex-basis: 100%; }
  .stats-senders li { align-items: flex-start; }
  .stats-senders li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-detail, .alias-stats { scroll-behavior: auto; }
}


.brand-name { display: inline-block; flex: none; white-space: nowrap; line-height: 1.2; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s3); margin-top: 32px; }
.p-temp, .p-fwd { min-width: 0; }
.reader-letterhead { min-width: 0; }
[data-demo-brand] .av, [data-demo-brand] [data-reader-mark] { display: flex; align-items: center; justify-content: center; }
[data-demo-brand] > span:first-child { display: flex; align-items: center; justify-content: center; }
[data-site-nav] a, [data-nav-drawer] a { white-space: nowrap; }
html:lang(zh) h1, html:lang(zh) h2 { text-wrap: balance; }
.archive-filter, [data-filter-trigger] { display: inline-flex; align-items: center; gap: var(--s2); }
.filter-chevron { display: inline-block; flex: none; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
[data-2fa-disable] { margin-top: 24px; }
.archive-detail iframe { min-width: 0; max-width: 100%; }
.home-source-note .actions { margin-top: var(--s4); }

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

@media (max-width: 860px) {
  [data-reader].mobile-reader [data-reader-close] { display: inline-flex; }
}


.privacy-hero { padding: var(--s6) 0; background: var(--cream); color: var(--ink); }
.privacy-heading { max-width: 820px; margin: 0 auto; text-align: center; }
.privacy-heading .eyebrow { color: var(--muted); margin-bottom: 20px; }
.privacy-heading h1 { font-size: var(--h2); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.privacy-heading .section-intro { margin-top: var(--s4); font-size: var(--lead); color: var(--muted); }
.privacy-date { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); font-size: var(--small); color: var(--muted); }
.privacy-glance.legal-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.privacy-glance-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); min-width: 0; }
.privacy-glance-number { font-family: var(--mono); font-size: var(--caption); letter-spacing: 0; color: var(--muted); }
.privacy-glance-card h2 { margin-top: 20px; font-size: var(--lead); line-height: 1.5; font-weight: 600; letter-spacing: 0; }
.privacy-glance-card p { margin-top: var(--s2); font-size: var(--small); color: var(--muted); }
.privacy-glance-card a { display: inline-block; margin-top: var(--s4); font-size: var(--small); font-weight: 500; color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.privacy-glance-card a:hover { color: var(--ink); }
.privacy-layout { padding-top: var(--s6); padding-bottom: var(--s6); }
.privacy-prose { overflow-wrap: anywhere; }
.privacy-prose h2 { font-size: var(--h3); line-height: 1.45; font-weight: 600; margin: 0 0 20px; }
.privacy-prose h3 { font-size: var(--lead); line-height: 1.5; font-weight: 600; margin: 32px 0 16px; }
.privacy-section { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.privacy-section + .privacy-section { margin-top: var(--s6); }
.privacy-prose .eyebrow { margin: 0 0 20px; font-size: var(--caption); color: var(--muted); }
.privacy-table-scroll { max-width: 100%; overflow-x: auto; margin: var(--s4) 0 32px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.privacy-prose .privacy-table { width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; font-size: var(--small); line-height: 1.75; }
.privacy-table caption { padding: var(--s3); text-align: left; font-weight: 500; color: var(--ink); background: var(--input-paper); border-bottom: 1px solid var(--line); }
.privacy-table thead th { background: var(--cream); color: var(--ink); font-weight: 500; }
.privacy-table th, .privacy-table td { padding: var(--s3); vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.privacy-table th:first-child { width: 24%; }
.privacy-table tbody th { font-weight: 500; }
.privacy-table tbody tr:last-child th, .privacy-table tbody tr:last-child td { border-bottom: 0; }
.privacy-note { margin: var(--s4) 0 32px; padding: var(--s4); border-radius: var(--radius-control); background: var(--peach); color: var(--peach-ink); }
.privacy-prose .privacy-note h3 { margin: 0 0 var(--s2); font-size: var(--lead); color: var(--peach-ink); }
.privacy-prose .privacy-note p { margin: 0; color: var(--peach-ink); }
.privacy-contact { margin: var(--s4) 0 32px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.privacy-prose .privacy-contact h3 { margin: 0 0 var(--s2); font-size: var(--lead); }
.privacy-prose .privacy-contact p { margin: 0; color: var(--muted); }
.privacy-contact .actions { margin-top: var(--s4); }
.privacy-prose .privacy-contact .btn-solid { background: var(--brand); color: var(--white); text-decoration: none; }
.privacy-prose .privacy-contact .btn-solid:hover { background: var(--brand-d); color: var(--white); }
.privacy-prose .privacy-contact .btn-line { background: var(--white); color: var(--brand); text-decoration: none; }
.privacy-prose .privacy-contact .btn-line:hover { background: var(--hover-paper); color: var(--brand-d); }
.privacy-toc { background: var(--bg); color: var(--ink); }
.privacy-toc h2 { font-size: var(--lead); line-height: 1.5; }
.privacy-toc li + li { margin-top: var(--s2); }
.privacy-toc a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.privacy-toc-note { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--small); color: var(--muted); }
.privacy-top-link { display: inline-block; margin-top: var(--s3); font-size: var(--small); color: var(--brand-d); }

@media (max-width: 860px) {
  .privacy-hero { padding: var(--s5) 0; }
  .privacy-heading { text-align: left; margin: 0; }
  .privacy-heading h1 { font-size: var(--h2); line-height: 1.35; }
  .privacy-heading h1 br { display: none; }
  .privacy-date { justify-content: flex-start; }
  .privacy-glance.legal-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s5); }
  .privacy-glance-card { padding: var(--s4); }
  .privacy-layout { padding-top: var(--s5); padding-bottom: var(--s5); gap: var(--s5); }
  .privacy-toc { padding: var(--s4); }
  .privacy-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); row-gap: var(--s2); }
  .privacy-toc li + li { margin-top: 0; }
  .privacy-section + .privacy-section { margin-top: var(--s5); }
  .privacy-prose h2 { font-size: var(--h3); line-height: 1.45; }
  .privacy-prose h3 { font-size: var(--lead); line-height: 1.5; }
  .privacy-table-scroll { margin-top: var(--s4); }
}

@media (max-width: 560px) {
  .privacy-date { display: block; font-size: var(--caption); }
  .privacy-date > span { display: none; }
  .privacy-date time { display: block; margin-top: var(--s1); }
  .privacy-heading .section-intro { font-size: var(--body); }
  .privacy-toc ol { grid-template-columns: minmax(0, 1fr); }
  .privacy-contact, .privacy-note { padding: var(--s3); }
  .privacy-contact .actions { align-items: stretch; flex-direction: column; }
  .privacy-contact .btn { width: 100%; white-space: normal; height: auto; }
}

.source-hero { background: var(--cream); color: var(--ink); padding-bottom: var(--s6); }
.source-hero h1 { font-weight: 600; }
.source-hero .eyebrow { margin-bottom: 20px; }
.source-hero .section-intro { max-width: 860px; }
.source-answer { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); max-width: 960px; margin: var(--s5) auto 0; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); text-align: left; }
.source-answer > svg { color: var(--brand-d); margin-top: var(--s1); }
.source-answer h2 { font-size: var(--lead); line-height: 1.5; letter-spacing: 0; }
.source-answer p { margin-top: var(--s2); color: var(--muted); }
.source-answer .tlink { margin-top: var(--s3); }
.source-workbench-section { padding: var(--s6) 0 0; scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.source-workbench { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.source-workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); }
.source-workbench-head > div { min-width: 0; max-width: 760px; }
.source-workbench-head h2 { font-size: var(--h3); }
.source-workbench-head .section-intro { color: var(--muted); }
.source-workbench-head > .status-pill { margin-top: var(--s1); white-space: nowrap; background: var(--success-paper); color: var(--pine); }
.source-workbench-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.source-form { min-width: 0; padding: var(--s5); border-right: 1px solid var(--line); }
.source-field { margin-bottom: var(--s4); }
.source-field label { display: block; margin-bottom: var(--s1); font-size: var(--small); font-weight: 500; }
.source-field input { width: 100%; font-size: 14px; background: var(--input-paper); color: var(--ink); }
.source-field input[aria-invalid="true"] { border-color: var(--brand-d); }
.source-field .field-hint { margin-top: var(--s1); }
.source-reuse { min-width: 0; padding: 0; margin: 0; border: 0; }
.source-reuse legend { float: none; width: 100%; margin-bottom: var(--s2); font-size: var(--small); font-weight: 500; }
.source-options { display: grid; gap: var(--s1); }
.source-options label { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font-size: var(--small); cursor: pointer; }
.source-options label:has(input:checked) { border-color: var(--pine); background: var(--success-paper); color: var(--pine); }
.source-options input { width: 16px; height: 16px; min-height: 0; padding: 0; flex: none; accent-color: var(--pine); }
.source-local-note { margin-top: var(--s4); font-size: var(--caption); line-height: 1.7; color: var(--muted); }
.source-form-actions { margin-top: var(--s4); }
.source-form-actions .ghost { min-height: 48px; }
.source-noscript { margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); font-size: var(--small); }
.source-result { min-width: 0; display: flex; flex-direction: column; padding: var(--s5); background: var(--cream); color: var(--ink); border-radius: 0 0 var(--radius-card) 0; }
.source-result-content { scroll-margin-top: calc(var(--header-h) + var(--s4)); border-radius: var(--radius-control); }
.source-result-content .eyebrow { color: var(--pine); }
.source-result-content h3 { font-size: var(--h3); line-height: 1.45; }
.source-result-content > p:not(.eyebrow) { margin-top: var(--s3); color: var(--muted); }
.source-next { margin-top: var(--s4); padding: var(--s4); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.source-next strong { font-size: var(--body); font-weight: 500; }
.source-next p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.source-result-content > .source-result-limit { margin-top: var(--s4); font-size: var(--caption); }
.source-result-link { margin-top: auto; padding-top: var(--s5); font-size: var(--small); }
.source-evidence-section { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.source-section-heading { max-width: 860px; }
.source-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s5); align-items: start; }
.source-case { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); overflow: hidden; }
.source-case-heading { display: flex; align-items: flex-start; flex-direction: column; gap: var(--s2); padding: var(--s4); background: var(--cream); color: var(--ink); }
.source-case-heading strong { font-size: var(--body); font-weight: 500; margin-top: var(--s1); }
.source-case-heading > .mono { font-size: 14px; overflow-wrap: anywhere; max-width: 100%; }
.source-case-heading > span:last-child { color: var(--muted); font-size: var(--caption); }
.source-case-mail { padding: var(--s4); border-bottom: 1px solid var(--line); }
.source-case-subject { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.source-case-subject h3 { font-size: var(--body); font-weight: 500; }
.source-case-mail p { margin-top: var(--s2); font-size: var(--small); overflow-wrap: anywhere; }
.source-case-mail time { display: block; margin-top: var(--s1); font-size: var(--caption); color: var(--muted); }
.source-case-note { padding: var(--s4); color: var(--muted); font-size: var(--small); }
.source-reading { min-width: 0; }
.source-reading h3 { font-size: var(--lead); }
.source-reading > p { margin-top: var(--s3); color: var(--muted); }
.source-evidence-note { margin-top: var(--s4); padding: var(--s4); border-radius: var(--radius-control); background: var(--peach); color: var(--peach-ink); }
.source-evidence-note strong { font-weight: 500; }
.source-evidence-note p { margin-top: var(--s2); font-size: var(--small); color: var(--peach-ink); }
.source-reading-actions { margin-top: var(--s5); }
.source-reading-actions .tlink { font-size: var(--small); }
.source-action-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); align-items: start; }
.source-action-footnote { margin-top: var(--s4); font-size: var(--small); color: var(--muted); }
.source-action-footnote a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.source-action-path { list-style: none; min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.source-action-path li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: start; }
.source-action-path li:first-child { padding-top: 0; }
.source-action-path li:last-child { padding-bottom: 0; border-bottom: 0; }
.source-action-path .step-number { margin: 0; }
.source-action-path h3 { font-size: var(--lead); line-height: 1.5; }
.source-action-path p { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.source-register-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.source-register-copy { min-width: 0; }
.source-register-copy > p:not(.eyebrow):not(.section-intro) { margin-top: var(--s4); color: var(--muted); }
.source-register-copy .tlink { display: inline; }
.source-register-slip { min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--cream); color: var(--ink); }
.source-register-slip h3 { font-size: var(--lead); margin-top: var(--s4); }
.source-register-slip dl { margin-top: var(--s4); }
.source-register-slip dl > div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.source-register-slip dl > div:first-child { padding-top: 0; }
.source-register-slip dt { font-size: var(--caption); color: var(--muted); }
.source-register-slip dd { font-size: var(--small); margin-top: var(--s1); overflow-wrap: anywhere; }
.source-register-slip > p { font-size: var(--caption); color: var(--muted); margin-top: var(--s4); }
.source-final .section-intro { max-width: 860px; margin-left: auto; margin-right: auto; }
.source-closing { padding: var(--s5) 0; background: var(--cream); color: var(--muted); text-align: center; font-size: var(--small); }
.source-closing p { max-width: 860px; margin: 0 auto; }
.source-closing a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .source-hero { padding-top: var(--s5); padding-bottom: var(--s5); }
  .source-hero .section-intro br { display: none; }
  .source-answer { padding: var(--s4); }
  .source-workbench-section { padding-top: var(--s5); }
  .source-workbench-head { padding: var(--s4); flex-wrap: wrap; }
  .source-workbench-grid { grid-template-columns: minmax(0, 1fr); }
  .source-form { padding: var(--s4); border-right: 0; border-bottom: 1px solid var(--line); }
  .source-result { padding: var(--s4); border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .source-result-link { margin-top: 0; padding-top: var(--s4); }
  .source-evidence-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .source-action-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .source-register-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .source-register-slip { padding: var(--s4); }
  .source-final .section-intro br { display: none; }
}

@media (max-width: 560px) {
  .source-hero h1 br { display: none; }
  .source-answer { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .source-answer > svg { width: 42px; height: 36px; }
  .source-workbench-head > .status-pill { margin-top: 0; }
  .source-case-subject { align-items: flex-start; flex-wrap: wrap; gap: var(--s2); }
  .source-case-heading > .mono { font-size: var(--small); }
  .source-reading-actions { align-items: flex-start; flex-direction: column; gap: var(--s3); }
  .source-form-actions { align-items: stretch; }
  .source-form-actions .btn { flex: 1; }
  .source-next { padding: var(--s3); }
  .source-action-path { padding: var(--s3); }
  .source-action-path li { gap: var(--s2); }
  .source-final .btn { white-space: normal; height: auto; }
}


.terms-hero { padding: var(--s6) 0; background: var(--cream); color: var(--ink); }
.terms-hero .eyebrow { margin-bottom: var(--s4); }
.terms-hero h1 { max-width: 920px; margin: 0 auto; font-size: min(var(--h1), 52px); line-height: 1.3; font-weight: 600; }
.terms-hero .section-intro { margin-top: var(--s4); }
.terms-version { margin-top: var(--s4); font-size: var(--small); color: var(--muted); }
.legal-glance.terms-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s6); text-align: left; }
.terms-glance-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); min-width: 0; }
.terms-glance-card > svg { color: var(--brand-d); flex: none; }
.terms-glance-card h2 { margin-top: var(--s4); font-size: var(--lead); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.terms-glance-card p { margin-top: var(--s2); margin-bottom: var(--s4); font-size: var(--small); color: var(--muted); }
.terms-glance-card > a { margin-top: auto; color: var(--brand-d); font-size: var(--small); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.terms-glance-card > a:hover { color: var(--ink); }
.terms-layout { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--s6); align-items: start; padding-top: var(--s6); padding-bottom: var(--s6); }
.terms-index { position: sticky; top: calc(var(--header-h) + var(--s4)); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); min-width: 0; }
.terms-index .eyebrow { margin-bottom: 20px; }
.terms-index h2 { font-size: var(--lead); line-height: 1.5; letter-spacing: 0; }
.terms-index ol { margin-top: var(--s4); padding-left: 20px; font-size: var(--small); color: var(--muted); }
.terms-index li { padding: 5px 0; }
.terms-index li a { color: var(--ink); text-underline-offset: 4px; }
.terms-index li a:hover { color: var(--brand-d); text-decoration: underline; }
.terms-index-note { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--small); color: var(--muted); }
.terms-index-note a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.terms-prose { min-width: 0; }
.terms-topic { scroll-margin-top: calc(var(--header-h) + var(--s5)); }
.terms-topic + .terms-topic { margin-top: var(--s6); }
.terms-prose .terms-section-number { margin: 0 0 20px; font-size: var(--caption); font-weight: 500; letter-spacing: .1em; color: var(--brand-d); }
.terms-prose h2 { margin: 0 0 var(--s4); font-size: var(--h3); font-weight: 600; line-height: 1.45; }
.terms-prose h3 { margin: 0 0 var(--s3); font-size: var(--lead); font-weight: 600; line-height: 1.5; }
.terms-prose p { overflow-wrap: anywhere; }
.terms-table-wrap { margin: var(--s4) 0 var(--s5); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.terms-prose .terms-boundary-table { width: 100%; min-width: 580px; margin: 0; border-collapse: collapse; font-size: var(--small); line-height: 1.7; }
.terms-boundary-table caption { padding: var(--s4); text-align: left; font-size: var(--body); font-weight: 500; color: var(--ink); background: var(--tool-paper); }
.terms-prose .terms-boundary-table thead th { background: var(--cream); color: var(--ink); font-weight: 500; }
.terms-prose .terms-boundary-table th, .terms-prose .terms-boundary-table td { padding: var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.terms-boundary-table th:first-child { width: 21%; }
.terms-boundary-table th:nth-child(2) { width: 31%; }
.terms-prose .terms-boundary-table tbody th { font-weight: 500; }
.terms-prose .terms-boundary-table tbody tr:last-child > * { border-bottom: 0; }
.terms-prose .terms-rule-list { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; background: var(--tool-paper); color: var(--ink); }
.terms-rule-list li { position: relative; display: grid; gap: var(--s1); padding: var(--s4) var(--s4) var(--s4) 48px; }
.terms-rule-list li + li { border-top: 1px solid var(--line); }
.terms-rule-list li::before { content: ""; position: absolute; top: 32px; left: var(--s4); width: 7px; height: 7px; border-radius: var(--radius-small); background: var(--pine); }
.terms-rule-list strong { font-size: var(--body); font-weight: 500; line-height: 1.6; }
.terms-rule-list span { font-size: var(--small); line-height: 1.8; color: var(--muted); }
.terms-prose .terms-rule-list-closed { background: var(--comparison-paper); color: var(--ink); border-color: var(--comparison-line); }
.terms-rule-list-closed li + li { border-top-color: var(--comparison-line); }
.terms-rule-list-closed li::before { background: var(--brand-d); }
.terms-note { padding: var(--s4); margin: var(--s4) 0 var(--s5); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.terms-prose .terms-note p { margin: 0; color: var(--muted); font-size: var(--small); }
.terms-contact { padding: var(--s5); border-radius: var(--radius-card); background: var(--cream); color: var(--ink); }
.terms-contact-actions { margin-top: var(--s4); }
.terms-contact-actions .btn { height: auto; white-space: normal; }
.terms-prose .terms-contact-actions .btn-solid { background: var(--brand); color: var(--white); }
.terms-prose .terms-contact-actions .btn-solid:hover { background: var(--brand-d); color: var(--white); }

@media (max-width: 860px) {
  .terms-hero { padding: var(--s5) 0; }
  .legal-glance.terms-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s5); }
  .terms-glance-card { padding: var(--s4); }
  .terms-glance-card h2 { margin-top: var(--s3); }
  .terms-glance-card > a { margin-top: 0; }
  .terms-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s5); }
  .terms-index { position: static; padding: var(--s4); }
  .terms-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s4); }
  .terms-index-note { margin-top: var(--s3); }
  .terms-topic + .terms-topic { margin-top: var(--s5); }
  .terms-contact { padding: var(--s4); }
  .terms-contact-actions { align-items: stretch; }
  .terms-contact-actions .btn { flex: 1 1 180px; }
}

@media (max-width: 560px) {
  .terms-hero h1 { max-width: 12em; }
  .terms-index ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .terms-rule-list li { padding: var(--s3) var(--s3) var(--s3) var(--s5); }
  .terms-rule-list li::before { top: 24px; left: var(--s3); }
  .terms-boundary-table caption { padding: var(--s3); }
  .terms-note { padding: var(--s3); }
}


.section-head, .content-head { margin-bottom: var(--s5); }
.custom-choice { position: relative; display: inline-block; min-width: 0; max-width: 300px; overflow: visible; }
.custom-choice > .alias-filter { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; margin: 0; text-align: left; }
.custom-choice-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-choice .filter-menu { left: 0; right: auto; z-index: 120; width: max-content; min-width: max(100%, 280px); max-width: min(520px, calc(100vw - 32px)); max-height: 280px; overflow: auto; }
.custom-choice .filter-menu button { width: auto; min-width: 100%; max-width: none; height: auto; white-space: nowrap; overflow-wrap: normal; align-items: center; }
.custom-choice-source { display: none; }
.custom-choice .filter-menu button:disabled { cursor: default; }

@media (max-width: 720px) {
  .custom-choice { max-width: 100%; flex: 1; }
}

@media (max-width: 560px) {
  .custom-choice { width: 100%; flex: 1 1 65%; }
}


.notes-index-hero { padding: var(--s6) 0 var(--s5); background: var(--cream); color: var(--ink); }
.notes-index-heading { max-width: 860px; margin: 0 auto; text-align: center; }
.notes-index-heading .eyebrow { margin-bottom: var(--s4); }
.notes-index-heading h1 { font-size: var(--h1); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.notes-dot { color: var(--brand); }
.notes-index-heading .section-intro { margin-top: var(--s4); color: var(--muted); }
.notes-index-heading .notes-count { display: flex; width: fit-content; margin: var(--s4) auto 0; background: var(--tool-paper); color: var(--muted); border: 1px solid var(--line); letter-spacing: 0; }
.notes-count:empty { display: none; }
.notes-index-posts { padding: var(--s6) 0 var(--s7); background: var(--bg); color: var(--ink); }
.notes-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.notes-post-grid > * { min-width: 0; }
.notes-post-card { display: flex; flex-direction: column; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); transition: background .2s, border-color .2s; }
.notes-post-card:hover { background: var(--cream); color: var(--ink); border-color: var(--rule); }
.notes-post-card:focus-visible { outline-color: var(--brand-d); }
.notes-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: var(--caption); }
.notes-tag { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 3px var(--s1); border-radius: var(--radius-small); background: var(--cream); color: var(--pine); font-size: var(--caption); font-weight: 500; line-height: 1.5; }
.notes-post-card:hover .notes-tag { background: var(--tool-paper); color: var(--pine); }
.notes-read-time { color: var(--muted); font-size: var(--small); }
.notes-card-title { margin-top: var(--s4); font-size: var(--h3); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.notes-post-card .notes-card-date { margin-top: var(--s3); font-size: var(--small); color: var(--muted); }
.notes-card-description { margin-top: var(--s4); margin-bottom: var(--s5); font-size: var(--body); line-height: 1.8; color: var(--muted); }
.notes-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--brand-d); }
.notes-card-cta { font-size: var(--small); font-weight: 500; }
.notes-card-arrow { position: relative; display: inline-block; width: 24px; height: 16px; flex: none; color: var(--brand-d); }
.notes-card-arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; border-top: 1px solid currentColor; }
.notes-card-arrow::after { content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.notes-noscript { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--muted); }
.notes-noscript a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }

.notes-article-hero { padding: var(--s6) 0; background: var(--cream); color: var(--ink); }
.notes-article-hero .wrap { min-width: 0; }
.notes-breadcrumb { margin-bottom: var(--s5); color: var(--muted); font-size: var(--small); }
.notes-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: 0; list-style: none; }
.notes-breadcrumb li { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; overflow-wrap: anywhere; }
.notes-breadcrumb li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; flex: none; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.notes-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.notes-breadcrumb a:hover { color: var(--brand-d); }
.notes-article-heading { max-width: 920px; }
.notes-article-heading .eyebrow { margin: 0 0 var(--s4); color: var(--muted); }
.notes-article-heading h1 { font-size: var(--h2); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.notes-article-heading .section-intro { max-width: 820px; margin-top: var(--s4); font-size: var(--lead); color: var(--muted); }
.notes-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); color: var(--muted); font-size: var(--small); }
.notes-meta-pill { display: inline-flex; align-items: center; width: fit-content; padding: 4px var(--s2); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--tool-paper); color: var(--muted); font-size: var(--caption); }
.notes-article-meta time { white-space: nowrap; }
.notes-article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 280px); align-items: start; gap: var(--s6); width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; padding: var(--s6) 0 var(--s7); }
.notes-prose { min-width: 0; font-size: var(--body); line-height: 1.9; overflow-wrap: anywhere; }
.notes-prose > :first-child { margin-top: 0; }
.notes-prose h2 { margin: var(--s6) 0 var(--s4); font-size: clamp(23px, var(--h3), 30px); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.notes-prose h3 { margin: var(--s5) 0 var(--s3); font-size: var(--lead); font-weight: 600; line-height: 1.55; scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.notes-prose p { margin: var(--s3) 0; }
.notes-prose ul, .notes-prose ol { margin: var(--s4) 0 var(--s5); padding-left: var(--s4); }
.notes-prose li + li { margin-top: var(--s2); }
.notes-prose a:not(.btn) { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.notes-prose a:not(.btn):hover { color: var(--ink); }
.notes-prose strong { font-weight: 600; }
.notes-prose code { padding: 2px 6px; border-radius: var(--radius-small); background: var(--cream); color: var(--ink); font-family: var(--mono); font-size: var(--small); letter-spacing: 0; overflow-wrap: anywhere; }
.notes-prose pre { margin: var(--s4) 0 var(--s5); padding: var(--s4); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); font-family: var(--mono); font-size: var(--small); line-height: 1.8; }
.notes-prose pre code { padding: 0; background: transparent; color: var(--ink); }
.notes-prose blockquote { margin: var(--s4) 0 var(--s5); padding: var(--s4); border-left: 3px solid var(--brand); border-radius: var(--radius-small); background: var(--cream); color: var(--ink); }
.notes-prose blockquote p { margin: 0; }
.notes-prose blockquote cite { display: block; margin-top: var(--s3); color: var(--muted); font-size: var(--small); font-style: normal; }
.notes-prose figure { margin: var(--s4) 0 var(--s5); }
.notes-prose figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-control); }
.notes-prose figcaption { margin-top: var(--s2); color: var(--muted); font-size: var(--small); }
.notes-table-scroll { max-width: 100%; margin: var(--s4) 0 var(--s5); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.notes-prose .notes-table-scroll table { width: 100%; min-width: 580px; margin: 0; border-collapse: collapse; font-size: var(--small); }
.notes-prose .notes-table-scroll caption { padding: var(--s3); text-align: left; background: var(--input-paper); color: var(--ink); font-weight: 500; }
.notes-prose .notes-table-scroll th, .notes-prose .notes-table-scroll td { padding: var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.notes-prose .notes-table-scroll thead th { background: var(--cream); color: var(--ink); font-weight: 500; }
.notes-prose .notes-table-scroll tbody th { font-weight: 500; }
.notes-prose .notes-table-scroll tbody tr:last-child > * { border-bottom: 0; }
.notes-callout { margin: var(--s4) 0 var(--s5); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.notes-callout h3 { margin: 0 0 var(--s2); font-size: var(--lead); }
.notes-callout p { margin: 0; }
.notes-callout p + p { margin-top: var(--s2); }
.notes-callout-warn { background: var(--peach); color: var(--peach-ink); border-color: var(--comparison-line); }
.notes-callout-warn h3, .notes-callout-warn p { color: var(--peach-ink); }
.notes-example { margin: var(--s4) 0 var(--s5); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.notes-example h3 { margin: var(--s3) 0 var(--s2); font-size: var(--lead); }
.notes-example > .status-pill { margin-bottom: var(--s1); background: var(--cream); color: var(--muted); }
.notes-example dl { margin-top: var(--s4); }
.notes-example dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--small); }
.notes-example dl > div:last-child { border-bottom: 0; }
.notes-example dt { color: var(--muted); }
.notes-example dd { min-width: 0; overflow-wrap: anywhere; }
.notes-example > p:last-child { margin-bottom: 0; }
.notes-toc { position: sticky; top: calc(var(--header-h) + var(--s3)); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.notes-toc h2 { margin: 0; font-size: var(--lead); line-height: 1.5; letter-spacing: 0; }
.notes-toc ol { margin-top: var(--s3); padding-left: 20px; color: var(--muted); font-size: var(--small); }
.notes-toc li + li { margin-top: var(--s2); }
.notes-toc a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.notes-toc .notes-toc-count { display: block; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--caption); }
.notes-toc-note { margin-top: var(--s3); color: var(--muted); font-size: var(--caption); }
.notes-toc details { border: 0; }
.notes-toc summary { display: none; padding: 0; font-size: var(--lead); }
.notes-toc-mobile { display: none; }

.notes-article-cta { margin: var(--s6) 0 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--cream); color: var(--ink); }
.notes-prose .notes-article-cta h2 { margin: 0; font-size: var(--h3); line-height: 1.5; }
.notes-article-cta .section-intro { margin: var(--s4) 0 0; color: var(--muted); }
.notes-article-cta .actions { margin-top: var(--s5); align-items: center; }
.notes-prose .notes-article-cta .btn-solid { background: var(--brand); color: var(--white); text-decoration: none; }
.notes-prose .notes-article-cta .btn-solid:hover { background: var(--brand-d); color: var(--white); }
.notes-prose .notes-article-cta .btn-line { background: var(--white); color: var(--brand); text-decoration: none; border-color: var(--brand); }
.notes-prose .notes-article-cta .btn-line:hover { background: var(--hover-paper); color: var(--brand-d); }
.notes-article-cta .btn { height: auto; white-space: normal; }
.notes-article-cta.is-centered { text-align: center; }
.notes-article-cta.is-centered .actions { justify-content: center; }
.notes-article-endnote { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--small); }

.notes-recommend { background: var(--tool-paper); color: var(--ink); }
.notes-recommend-visual { display: grid; place-items: center; min-height: 96px; padding: var(--s4); background: var(--peach); color: var(--peach-ink); }
.notes-recommend-visual img { display: block; width: 100%; height: 112px; object-fit: cover; }
.notes-recommend-visual svg { width: 72px; height: 48px; max-width: 100%; color: var(--peach-ink); }
.notes-recommend .float-body { padding: var(--s4); }
.notes-recommend .eyebrow { margin-bottom: var(--s4); font-size: var(--caption); color: var(--muted); }
.notes-recommend h2 { font-size: var(--lead); line-height: 1.5; }
.notes-recommend .section-intro { margin: var(--s4) 0 var(--s4); }
.notes-recommend .btn { width: auto; max-width: 100%; min-height: 40px; height: auto; white-space: normal; font-size: var(--small); line-height: 1.35; }
.notes-recommend .float-close { background: var(--tool-paper); color: var(--ink); border-color: var(--rule); }
.notes-recommend .float-close:hover { background: var(--cream); color: var(--ink); }
.notes-recommend .float-close svg { width: 14px; height: 14px; }
.notes-recommend .btn-solid { background: var(--brand); color: var(--white); }
.notes-recommend .btn-solid:hover { background: var(--brand-d); color: var(--white); }

@media (max-width: 860px) {
  .notes-index-hero { padding-top: var(--s5); }
  .notes-index-heading h1 { font-size: var(--h1); line-height: 1.3; }
  .notes-index-posts { padding: var(--s5) 0 var(--s6); }
  .notes-post-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .notes-post-card { padding: var(--s5); }
  .notes-article-hero { padding: var(--s5) 0; }
  .notes-breadcrumb { margin-bottom: var(--s4); }
  .notes-article-heading h1 { font-size: var(--h2); }
  .notes-article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0 var(--s6); }
  .notes-toc { position: static; order: -1; padding: var(--s3) var(--s4); }
  .notes-toc-desktop { display: none; }
  .notes-toc-mobile { display: block; }
  .notes-toc summary { display: flex; }
  .notes-toc details[open] summary { padding-bottom: var(--s3); }
  .notes-toc details:not([open]) > :not(summary) { display: none; }
  .notes-toc ol { margin-top: var(--s2); margin-bottom: var(--s3); }
  .notes-toc .notes-toc-count { margin-bottom: var(--s2); }
  .notes-prose h2 { margin-top: var(--s5); }
  .notes-prose h3 { margin-top: var(--s4); }
  .notes-article-cta { margin-top: var(--s5); padding: var(--s4); }
  .notes-recommend { max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto; }
}

@media (max-width: 560px) {
  .notes-index-heading h1 br, .notes-index-heading .section-intro br { display: none; }
  .notes-index-heading .section-intro { font-size: var(--body); }
  .notes-post-card { padding: var(--s4); }
  .notes-card-top { align-items: center; gap: var(--s2); }
  .notes-card-title { font-size: var(--h3); }
  .notes-card-description { margin-bottom: var(--s4); }
  .notes-article-layout { width: calc(100% - 32px); }
  .notes-article-heading .section-intro { font-size: var(--body); }
  .notes-article-meta { gap: var(--s2); }
  .notes-article-meta time { white-space: normal; }
  .notes-toc { padding: var(--s3) var(--s3); }
  .notes-example, .notes-callout { padding: var(--s3); }
  .notes-example dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .notes-article-cta .actions { flex-direction: column; align-items: stretch; margin-top: var(--s4); }
  .notes-article-cta .btn { width: 100%; }
  .notes-recommend-visual { min-height: 72px; padding: var(--s3); }
  .notes-recommend-visual img { height: 80px; }
  .notes-recommend .float-body { padding: var(--s3) var(--s4); }
}


.dp-hero { padding: 96px 0 var(--s6); background: var(--cream); color: var(--ink); }
.dp-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); font-size: var(--small); color: var(--muted); }
.dp-crumb a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.dp-hero-copy { max-width: 760px; text-align: left; }
.dp-hero-copy .eyebrow { margin: 0 0 var(--s4); color: var(--muted); }
.dp-hero h1 { font-size: var(--h2); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.dp-dot { color: var(--brand); }
.dp-hero .section-intro { margin-top: var(--s4); color: var(--muted); }
.dp-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s4); padding: var(--s1) var(--s3); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--muted); font-size: var(--caption); }
.dp-meta > * { display: inline-flex; align-items: center; }
.dp-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: var(--s3); border-radius: 50%; background: var(--muted); }
.dp-layout { padding-top: var(--s6); padding-bottom: var(--s6); }
.dp-prose { overflow-wrap: anywhere; }
.dp-prose .dp-section { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.dp-section + .dp-section { margin-top: var(--s6); }
.dp-prose h2 { margin: 0 0 var(--s4); font-size: var(--h3); line-height: 1.45; font-weight: 600; }
.dp-prose h3 { margin: var(--s4) 0 var(--s3); font-size: var(--lead); line-height: 1.5; font-weight: 600; }
.dp-prose li { margin: 6px 0; }
.dp-prose strong { font-weight: 600; }
.dp-address { font-family: var(--mono); font-size: 14px; letter-spacing: 0; overflow-wrap: anywhere; }
.dp-callout { margin: var(--s4) 0 32px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--cream); color: var(--ink); }
.dp-callout > strong { display: block; font-weight: 500; }
.dp-prose .dp-callout p { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--small); }
.dp-callout-warm { border-color: var(--comparison-line); background: var(--comparison-paper); color: var(--peach-ink); }
.dp-prose .dp-callout-warm p { color: var(--peach-ink); }
.dp-table-scroll { max-width: 100%; overflow-x: auto; margin: var(--s4) 0 32px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.dp-prose .dp-table-scroll table { width: 100%; min-width: 620px; margin: 0; font-size: var(--small); line-height: 1.75; }
.dp-table-scroll caption { padding: var(--s3); text-align: left; font-weight: 500; background: var(--input-paper); color: var(--ink); }
.dp-prose .dp-table-scroll th, .dp-prose .dp-table-scroll td { padding: var(--s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dp-prose .dp-table-scroll thead th { background: var(--cream); color: var(--ink); font-weight: 500; }
.dp-prose .dp-table-scroll tbody th { width: 27%; font-weight: 500; }
.dp-prose .dp-table-scroll tbody tr:last-child > * { border-bottom: 0; }
.dp-case { margin: var(--s4) 0 32px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); overflow: hidden; }
.dp-case-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--s3); padding: var(--s4); background: var(--cream); color: var(--ink); }
.dp-case-head > svg { color: var(--brand-d); }
.dp-prose .dp-case-head h3 { margin: 0; font-size: var(--lead); line-height: 1.5; }
.dp-prose .dp-case-head p { margin: var(--s1) 0 0; font-size: var(--caption); color: var(--muted); }
.dp-case .dp-table-scroll { margin: 0; border: 0; border-radius: 0; }
.dp-prose .dp-case-note { margin: 0; padding: var(--s4); border-top: 1px solid var(--line); background: var(--input-paper); color: var(--muted); font-size: var(--small); }
.dp-toc { z-index: 3; background: var(--tool-paper); color: var(--ink); }
.dp-toc-details, .dp-toc-details:first-child { border: 0; }
.dp-toc-details > summary { padding: 0; font-size: var(--lead); font-weight: 500; }
.dp-toc ol { margin-top: var(--s4); padding-left: 20px; }
.dp-toc li { margin: 6px 0; padding-left: 2px; }
.dp-toc a:not(.dp-count):hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.dp-toc .dp-count { margin-top: var(--s4); background: var(--cream); color: var(--muted); letter-spacing: 0; }
.dp-count:empty { display: none; }
.dp-final-card { margin: var(--s5) 0 0; padding: var(--s5); border-radius: var(--radius-card); background: var(--pine); color: var(--pine-ink); text-align: left; }
.dp-final-icon { display: block; color: var(--pine-ink); }
.dp-prose .dp-final-card h3 { margin: var(--s4) 0 0; font-size: var(--h3); color: var(--pine-ink); }
.dp-prose .dp-final-card p { margin: var(--s3) 0 0; color: var(--pine-muted); }
.dp-final-card .actions { margin-top: var(--s4); align-items: center; }
.dp-prose .dp-final-card .btn-solid { background: var(--brand); color: var(--white); border-color: var(--brand); text-decoration: none; }
.dp-prose .dp-final-card .btn-solid:hover { background: var(--brand-d); color: var(--white); border-color: var(--brand-d); }
.dp-prose .dp-final-card .btn-line { background: var(--white); color: var(--brand-d); border-color: var(--brand); text-decoration: none; }
.dp-prose .dp-final-card .btn-line:hover { background: var(--hover-paper); color: var(--brand-d); border-color: var(--brand-d); }
.dp-recommend { z-index: 45; }
.dp-recommend-head { display: flex; align-items: center; gap: var(--s2); min-height: 72px; padding: var(--s3) 52px var(--s3) var(--s4); background: var(--cream); color: var(--pine); font-size: var(--caption); }
.dp-recommend-head > svg { flex: none; }
.dp-recommend .float-close { position: absolute; top: var(--s2); right: var(--s2); background: var(--white); color: var(--ink); }
.dp-recommend .float-close:hover { background: var(--peach); color: var(--peach-ink); }
.dp-recommend-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dp-recommend-actions .btn { flex: 1 1 100px; max-width: 100%; min-height: 40px; height: auto; white-space: normal; line-height: 1.35; }

@media (max-width: 860px) {
  .dp-hero { padding-top: 96px; padding-bottom: var(--s5); }
  .dp-hero h1 br { display: none; }
  .dp-layout { padding-top: var(--s5); gap: var(--s5); }
  .dp-section + .dp-section { margin-top: var(--s5); }
  .dp-toc { position: static; z-index: 3; order: -1; }
  .dp-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s4); }
  .dp-toc li { margin: 0; }
}

@media (max-width: 560px) {
  .dp-crumb { gap: var(--s1); margin-bottom: var(--s5); font-size: var(--caption); }
  .dp-hero .section-intro { font-size: var(--body); }
  .dp-meta { gap: var(--s1); padding: var(--s1) var(--s2); font-size: var(--caption); }
  .dp-meta > * + *::before { margin-right: var(--s1); }
  .dp-callout { padding: var(--s3); }
  .dp-case-head { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .dp-prose .dp-case-note { padding: var(--s3); }
  .dp-toc { padding: var(--s4); }
  .dp-toc ol { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .dp-final-card { padding: var(--s4); }
  .dp-final-card .actions { align-items: stretch; flex-direction: column; }
  .dp-final-card .btn { width: 100%; height: auto; white-space: normal; }
  .dp-recommend .float-body { padding: var(--s3); }
  .dp-recommend-head { min-height: 64px; padding-left: var(--s3); }
  .dp-recommend p { margin-bottom: var(--s3); }
}


.exit-hero { padding: 96px 0 var(--s6); background: var(--cream); color: var(--ink); }
.exit-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); font-size: var(--small); color: var(--muted); }
.exit-crumbs a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 4px; }
.exit-hero-copy { max-width: 760px; text-align: left; }
.exit-hero-copy .eyebrow { margin: 0 0 var(--s4); }
.exit-hero h1 { font-size: var(--h2); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.exit-dot { color: var(--brand); }
.exit-hero .section-intro { margin-top: var(--s4); }
.exit-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s5); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--muted); font-size: var(--small); }
.exit-meta > span { display: inline-flex; align-items: center; gap: var(--s3); }
.exit-meta > span::before { content: ""; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex: none; }
.exit-layout { padding-top: var(--s6); padding-bottom: var(--s6); }
.exit-prose { overflow-wrap: anywhere; }
.exit-prose .eyebrow { margin: 0 0 var(--s4); font-size: var(--caption); color: var(--muted); }
.exit-topic { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.exit-topic + .exit-topic { margin-top: var(--s6); }
.exit-prose h2 { margin: 0 0 20px; font-size: var(--h3); line-height: 1.45; font-weight: 600; }
.exit-prose h3 { font-size: var(--lead); font-weight: 600; line-height: 1.5; }
.exit-prose li { margin: 8px 0; }
.exit-prose .mono { font-size: .93em; overflow-wrap: anywhere; }
.exit-quick-answer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); margin-bottom: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.exit-quick-answer > svg { color: var(--pine); }
.exit-prose .exit-quick-answer h2 { margin: 0; font-size: var(--lead); }
.exit-prose .exit-quick-answer p { margin: var(--s2) 0 0; font-size: var(--small); color: var(--muted); }
.exit-table-scroll { max-width: 100%; overflow-x: auto; margin: var(--s4) 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.exit-prose .exit-table { min-width: 580px; width: 100%; margin: 0; border-collapse: collapse; font-size: var(--small); }
.exit-table caption { padding: var(--s3); background: var(--input-paper); color: var(--ink); text-align: left; font-weight: 500; }
.exit-table thead th { background: var(--cream); color: var(--ink); font-weight: 500; }
.exit-prose .exit-table th, .exit-prose .exit-table td { padding: var(--s3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.exit-table th:first-child { width: 24%; }
.exit-table tbody th { font-weight: 500; }
.exit-prose .exit-table tbody tr:last-child > * { border-bottom: 0; }
.exit-case { margin: var(--s4) 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--tool-paper); color: var(--ink); }
.exit-case-heading { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--cream); color: var(--ink); }
.exit-case-heading > svg { flex: none; color: var(--pine); }
.exit-case-heading > div { min-width: 0; }
.exit-case-label { display: block; margin-bottom: var(--s1); font-size: var(--caption); color: var(--muted); }
.exit-case-heading .mono { display: block; }
.exit-case-events { padding: 0 var(--s4); }
.exit-case-events > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--small); }
.exit-case-events dt { font-weight: 500; }
.exit-case-events dd { color: var(--muted); }
.exit-prose .exit-case-note { padding: var(--s3) var(--s4); margin: 0; color: var(--muted); font-size: var(--caption); }
.exit-prose .exit-sequence { margin: var(--s4) 0 var(--s5); padding-left: var(--s4); }
.exit-sequence > li { padding: var(--s2) 0 var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.exit-sequence > li::marker { color: var(--brand-d); font-family: var(--mono); font-size: var(--small); }
.exit-prose .exit-sequence h3 { margin: 0 0 var(--s2); }
.exit-prose .exit-sequence p { margin: 0; color: var(--muted); }
.exit-action-definitions { margin: var(--s4) 0 var(--s5); padding: var(--s4); border: 1px solid var(--comparison-line); border-radius: var(--radius-control); background: var(--comparison-paper); color: var(--ink); }
.exit-action-definitions > div + div { margin-top: var(--s4); }
.exit-action-definitions dt { font-weight: 500; }
.exit-action-definitions dd { margin-top: var(--s1); font-size: var(--small); color: var(--muted); }
.exit-prose .exit-final-checks { margin: var(--s4) 0 var(--s5); padding: var(--s4) var(--s4) var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--tool-paper); color: var(--ink); }
.exit-final-checks li::marker { color: var(--pine); }
.exit-final-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); margin-top: var(--s5); border-radius: var(--radius-card); background: var(--pine); color: var(--pine-ink); }
.exit-final-icon { color: var(--pine-ink); }
.exit-prose .exit-final-card h3 { margin: 0; color: var(--pine-ink); }
.exit-prose .exit-final-card p { margin: var(--s2) 0 0; color: var(--pine-muted); }
.exit-final-card .actions { margin-top: 28px; align-items: stretch; }
.exit-prose .exit-final-card .btn-solid { background: var(--brand); color: var(--white); border-color: var(--brand); text-decoration: none; }
.exit-prose .exit-final-card .btn-solid:hover { background: var(--brand-d); color: var(--white); border-color: var(--brand-d); }
.exit-prose .exit-final-card .exit-secondary { border: 1px solid var(--pine-line); background: transparent; color: var(--pine-ink); text-decoration: none; }
.exit-prose .exit-final-card .exit-secondary:hover { background: var(--pine-hover); color: var(--pine-ink); border-color: var(--pine-muted); }
.exit-final-card .btn { white-space: normal; height: auto; }
.exit-toc { z-index: 2; padding: var(--s4); background: var(--tool-paper); color: var(--ink); }
.exit-toc details, .exit-toc details:first-child { border: 0; }
.exit-toc summary { padding: 0; font-size: var(--lead); font-weight: 500; }
.exit-toc ol { margin: var(--s4) 0 0; padding-left: 20px; }
.exit-toc li { margin: 0; padding: 0; line-height: 1.7; }
.exit-toc li + li { margin-top: var(--s2); }
.exit-toc a:hover { color: var(--brand-d); text-decoration: underline; text-underline-offset: 3px; }
.exit-catalog-count { margin-top: var(--s4); background: var(--cream); color: var(--muted); letter-spacing: 0; }
.exit-catalog-count:empty { display: none; }
.exit-recommend { z-index: 45; }
.exit-recommend-mast { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 48px var(--s3) var(--s4); background: var(--cream); color: var(--pine); font-size: var(--caption); }
.exit-recommend-mast > svg { flex: none; }
.exit-recommend .float-close { position: absolute; top: 8px; right: 8px; background: var(--tool-paper); color: var(--ink); border-color: var(--line); }
.exit-recommend .float-close:hover { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }
.exit-recommend .float-body { padding: var(--s4); }
.exit-recommend .actions { align-items: stretch; }
.exit-recommend .btn { flex: 1 1 100px; max-width: 100%; white-space: normal; height: auto; line-height: 1.35; }

@media (max-width: 860px) {
  .exit-hero { padding-top: 96px; padding-bottom: var(--s5); }
  .exit-hero-copy .section-intro br { display: none; }
  .exit-layout { padding-top: var(--s5); padding-bottom: var(--s5); gap: var(--s5); }
  .exit-toc { position: static; order: -1; }
  .exit-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
  .exit-toc li + li { margin-top: 0; }
  .exit-quick-answer { margin-bottom: var(--s5); }
  .exit-topic + .exit-topic { margin-top: var(--s5); }
}

@media (max-width: 560px) {
  .exit-crumbs { gap: var(--s1); margin-bottom: var(--s5); font-size: var(--caption); }
  .exit-hero h1 br { display: none; }
  .exit-hero .section-intro { font-size: var(--body); }
  .exit-meta { gap: var(--s1) var(--s2); padding: var(--s2); font-size: var(--caption); }
  .exit-meta > span { gap: var(--s2); }
  .exit-quick-answer { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .exit-toc ol { grid-template-columns: minmax(0, 1fr); }
  .exit-case-heading { padding: var(--s3); gap: var(--s2); }
  .exit-case-events { padding: 0 var(--s3); }
  .exit-case-events > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .exit-prose .exit-case-note { padding: var(--s3); }
  .exit-action-definitions { padding: var(--s3); }
  .exit-final-card { grid-template-columns: minmax(0, 1fr); padding: var(--s4); gap: var(--s3); }
  .exit-final-card .actions { flex-direction: column; }
  .exit-recommend { width: min(300px, calc(100% - 32px)); }
  .exit-recommend .float-body { padding: var(--s3); }
  .exit-recommend p { margin-bottom: var(--s3); }
}