/* Same local webfonts as index.html (Orvia Mail/fonts/*.woff2) */
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Runde";src:url("../fonts/OpenRunde-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url("../fonts/FragmentMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-600.woff2") format("woff2");font-weight:650;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("../fonts/NotoSansSC-600.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url("../fonts/NotoSerifSC-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url("../fonts/NotoSerifSC-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url("../fonts/NotoSerifSC-500.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Page + reading */
  --ink:#f5f5f5;--ink2:rgba(255,255,255,.82);--mute:rgba(255,255,255,.55);--mute2:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.1);
  --soft:#161618;--paper:#0a0a0b;
  /* Unified demo / diagram palette (all interactive cards share these) */
  --demo-bg:#161618;
  --demo-bg-elevated:#1c1c1e;
  --demo-fg:rgba(255,255,255,.82);
  --demo-fg-strong:#f5f5f5;
  --demo-fg-title:rgba(255,255,255,.9);
  --demo-fg-body:rgba(255,255,255,.62);
  --demo-fg-mute:rgba(255,255,255,.55);
  --demo-fg-faint:rgba(255,255,255,.4);
  --demo-fg-hint:rgba(255,255,255,.45);
  --demo-border:rgba(255,255,255,.08);
  --demo-rule:rgba(255,255,255,.1);
  --demo-control:rgba(255,255,255,.06);
  --demo-control-hover:rgba(255,255,255,.1);
  --demo-btn:#fff;
  --demo-btn-fg:#0a0a0b;
  --demo-shadow:0 12px 36px rgba(0,0,0,.35);
  --demo-radius:24px;
  --demo-pad:30pt;
  --demo-surface:var(--demo-bg); /* alias */
  --r-pill:999px;
  --font:"Open Runde","Noto Sans SC","PingFang SC","Hiragino Sans GB",-apple-system,sans-serif;
  --display:"Open Runde","Noto Serif SC","Songti SC","STSong",ui-serif,Georgia,serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:#0a0a0b;color:var(--ink);font:15px/1.65 var(--font);-webkit-font-smoothing:antialiased}
body.orvia-blog-page{background:#0a0a0b!important}

/* The shared homepage header is reused on the dark blog surface. Keep the
   header tokens scoped so article typography and metadata remain untouched. */
html.orvia-blog-header,
body.orvia-blog-page{
  --orvia-page:#0a0a0b;
  --orvia-text:rgba(255,255,255,.9);
  --orvia-text-secondary:rgba(255,255,255,.68);
  --orvia-text-muted:rgba(255,255,255,.46);
  --orvia-accent:#ff7e3e;
}
html.orvia-shared-header-pending .nav-shell{visibility:hidden}
body.orvia-blog-page .nav-shell{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer}

html[lang="en"] [data-zh],
html[lang="en"] [data-ja],
html[lang="ja"] [data-zh],
html[lang="ja"] [data-en],
html[lang="zh-CN"] [data-en],
html[lang="zh-CN"] [data-ja],
html:not([lang="en"]):not([lang="ja"]):not([lang="zh-CN"]) [data-zh],
html:not([lang="en"]):not([lang="ja"]):not([lang="zh-CN"]) [data-ja]{display:none!important}

.nav-shell{position:fixed;top:22px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 22px;pointer-events:none}
.nav{
  pointer-events:auto;width:100%;max-width:1080px;height:52px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:0 8px 0 14px;border-radius:var(--r-pill);
  background:rgba(22,22,24,.92);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:blur(22px) saturate(1.2);
}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.02em;color:#fff}
.brand-mark{width:24px;height:24px;border-radius:7px;flex:0 0 auto;background:url("../uploads/Icon-iOS-Default-1024@1x.png") center/cover;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:28px;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-right{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;padding:2px;border-radius:999px;background:rgba(255,255,255,.08)}
.lang a,.lang button{min-width:36px;height:30px;border-radius:999px;color:rgba(255,255,255,.55);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.lang a[aria-current="true"],.lang button[aria-pressed="true"]{background:#fff;color:#0a0a0b}
.btn-nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;color:#0a0a0b;font-size:13px;font-weight:600}
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr auto;gap:10px}
  .nav-links{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:14px;
    font-size:12.5px;
    min-width:0;
  }
  .nav-links a{display:none}
  .nav-links a.nav-keep{display:inline}
}

/* Article reading column — measure, leading, and quiet hierarchy */
.blog-main{
  --article-w:min(44rem,calc(100% - 48px));
  --body-size:1rem;   /* 16px */
  --body-lead:1.78;
  --body-gap:1.15em;
  width:var(--article-w);
  margin:0 auto;
  padding:7.5rem 0 5rem;
}
.blog-main.blog-list-page{
  width:min(1080px,calc(100% - 44px));
  --article-w:min(1080px,calc(100% - 44px));
}
.blog-kicker{
  margin:0 0 .75rem;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--mute2);
  line-height:1.4;
}
.blog-kicker a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;color:rgba(255,255,255,.55)}
.blog-kicker a:hover{color:#fff}

/* Display titles: same craft stack as index; CJK needs open tracking */
.blog-list-title,.article-title{
  margin:0 0 .85rem;
  font-family:var(--display);
  font-size:clamp(2.125rem,5vw,2.875rem);
  line-height:1.2;
  letter-spacing:0;
  font-weight:500;
  color:#fff;
  text-wrap:balance;
}
html[lang="en"] .blog-list-title,
html[lang="en"] .article-title{
  font-family:"Open Runde",var(--font);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.12;
  text-wrap:balance;
}
html[lang="ja"] .blog-list-title,
html[lang="ja"] .article-title{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.35;
  text-wrap:balance;
}
.blog-list-lead,.article-dek{
  margin:0 0 1.25rem;
  max-width:40em;
  font-size:1rem;
  line-height:1.65;
  color:var(--mute);
  font-weight:400;
}
.blog-list-page .blog-list-lead{max-width:36rem;margin-bottom:2.25rem}
.article-meta{
  margin:0 0 1.75rem;
  font-size:.8125rem;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--mute2);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.article-version{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  margin:-1rem 0 1.75rem;
  padding:.4rem .65rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--mute);
  font-size:.8125rem;
  line-height:1.45;
}
.article-version strong{color:rgba(255,255,255,.88);font-weight:600}
.article-cover{
  width:125%;
  max-width:min(125%,calc(100vw - 24px));
  margin:0 0 2.75rem;
  margin-left:-12.5%;
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  background:#161618;
  box-shadow:0 12px 36px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06) inset;
}
.article-cover img{
  display:block;width:100%;height:100%;object-fit:cover;
  margin:0;border-radius:0;max-width:none;
}
@media (max-width:560px){
  .article-cover{width:100%;max-width:100%;margin-left:0}
}

/* Body: continuous reading, not dashboard density */
.article-body{
  font-size:var(--body-size);
  line-height:var(--body-lead);
  color:var(--ink2);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
html[lang="zh-CN"] .article-body,
html[lang="ja"] .article-body{
  line-height:1.85;
  letter-spacing:.01em;
}
.article-body > *:first-child{margin-top:0}
.article-body h2{
  margin:2.75rem 0 .95rem;
  padding-top:.35rem;
  font-family:var(--display);
  font-size:clamp(1.55rem,2.6vw,1.9rem);
  line-height:1.28;
  letter-spacing:0;
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
}
html[lang="en"] .article-body h2{
  font-family:"Open Runde",var(--font);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.22;
}
html[lang="ja"] .article-body h2{
  letter-spacing:.03em;
  line-height:1.4;
}
.article-body h2:first-child{margin-top:0;padding-top:0}
.article-body h3{
  margin:2rem 0 .7rem;
  font-family:var(--font);
  font-size:1.2rem;
  line-height:1.38;
  letter-spacing:0;
  font-weight:600;
  color:var(--ink);
}
html[lang="en"] .article-body h3{letter-spacing:-.015em}
.article-body p{
  margin:0 0 var(--body-gap);
  max-width:none;
  text-wrap:pretty;
}
.article-body p:last-child{margin-bottom:0}
.article-body strong{
  font-weight:600;
  color:var(--ink);
}
.article-body ul,
.article-body ol{
  margin:0 0 calc(var(--body-gap) + .15em);
  padding:0 0 0 1.35em;
  max-width:none;
  color:var(--ink2);
}
.article-body li{
  margin:0 0 .55em;
  padding-left:.15em;
  line-height:inherit;
}
.article-body li:last-child{margin-bottom:0}
.article-body li::marker{color:var(--mute2)}
.article-table-wrap{
  width:125%;
  max-width:min(125%,calc(100vw - 24px));
  margin:1.25rem 0 2.25rem;
  margin-left:-12.5%;
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#141416;
}
.article-body table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.92rem;
  line-height:1.55;
}
.article-body th,
.article-body td{
  padding:.85rem 1rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
}
.article-body thead th{
  color:#fff;
  font-weight:600;
  background:rgba(255,255,255,.06);
}
.article-body tbody th{
  width:18%;
  color:rgba(255,255,255,.9);
  font-weight:600;
}
.article-body tbody tr:last-child th,
.article-body tbody tr:last-child td{border-bottom:0}
@media (max-width:560px){
  .article-table-wrap{
    width:100%;
    max-width:100%;
    margin-left:0;
    border-radius:10px;
  }
}
.article-body a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35);
  transition:text-decoration-color .15s ease;
}
.article-body a:hover{text-decoration-color:rgba(255,255,255,.8)}
.article-body code{
  font-family:var(--mono);
  font-size:.88em;
  font-weight:500;
  letter-spacing:0;
  padding:.12em .35em;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.article-body img,
.article-body figure:not(.article-cover){
  display:block;
  width:125%;
  max-width:min(125%,calc(100vw - 24px));
  margin:2rem 0 2.5rem;
  margin-left:-12.5%;
  border-radius:8px;
}
.article-body .article-video{
  aspect-ratio:16/9;
  padding:0;
  overflow:hidden;
  background:#161618;
}
.article-body .article-video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.article-body figure.article-image{
  overflow:hidden;
  background:#161618;
}
.article-body figure.article-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2248 / 1492;
  object-fit:contain;
  max-width:none;
  margin:0;
  border-radius:0;
}
.article-body figure.article-image figcaption{
  margin:0;
  padding:.75rem 1rem .85rem;
  color:var(--mute2);
  font-size:.8125rem;
  line-height:1.5;
  text-align:left;
}
.article-sources{
  font-size:.875rem;
  line-height:1.65;
}
.article-sources li{padding-left:.15em}
@media (max-width:560px){
  .article-body .article-video,
  .article-body figure.article-image{
    width:100%;
    max-width:100%;
    margin-left:0;
  }
}
.article-footer{
  margin-top:3.25rem;
  padding-top:1.35rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1.25rem;
  font-size:.875rem;
  font-weight:500;
  line-height:1.45;
  color:var(--mute);
}
.article-footer a{
  color:rgba(255,255,255,.82);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.28);
}
.article-footer a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7)}

/* Checklist: same measure as body, quieter markers */
.checklist{
  margin:0 0 1.35em;
  padding:0;
  list-style:none;
  max-width:none;
}
.checklist li{
  position:relative;
  padding:.85rem 0 .85rem 1.65rem;
  border-bottom:1px solid var(--line);
  font-size:var(--body-size);
  line-height:var(--body-lead);
  color:var(--ink2);
}
html[lang="zh-CN"] .checklist li,
html[lang="ja"] .checklist li{line-height:1.85}
.checklist li:first-child{padding-top:.35rem}
.checklist li:last-child{border-bottom:0;padding-bottom:.25rem}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:1.15em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mute2);
  opacity:.7;
}
.checklist li strong{
  font-weight:600;
  color:var(--ink);
  margin-right:.2em;
}

/* —— Shared demo card shell: one bg / one fg system for all demos & diagrams —— */
.article-body .demo,
.demo,
.flow,
.compare,
.layers,
.win-frame,
.article-body .pipe{
  --ink:var(--demo-fg-strong);
  --ink2:var(--demo-fg);
  --mute:var(--demo-fg-mute);
  --mute2:var(--demo-fg-faint);
  --line:var(--demo-rule);
  width:125%;
  max-width:min(125%,calc(100vw - 24px));
  margin:1.75rem 0 2rem;
  margin-left:-12.5%;
  padding:var(--demo-pad);
  background:var(--demo-bg);
  border:1px solid var(--demo-border);
  border-radius:var(--demo-radius);
  box-sizing:border-box;
  box-shadow:var(--demo-shadow);
  color:var(--demo-fg);
}
.article-body .demo,
.demo{
  /* Keep horizontal breakout so 125% width stays centered in the column */
  margin:1.75rem 0 2.25rem;
  margin-left:-12.5%;
  overflow:hidden;
}
.demo{
  margin-top:28px;
  margin-bottom:36px;
  margin-left:-12.5%;
}
@media (max-width:720px){
  .compare,
  .article-body .pipe{
    width:100%;
    max-width:100%;
    margin-left:0;
  }
}
@media (max-width:560px){
  .demo,
  .flow,
  .layers,
  .win-frame,
  .compare,
  .article-body .pipe,
  .article-body img,
  .article-body figure{
    width:100%;
    max-width:100%;
    margin-left:0;
  }
}
.demo-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  padding:0 0 16px;
  border-bottom:1px solid var(--demo-rule);
  margin-bottom:0;
}
.demo-label{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--demo-fg-faint);
}
.demo-tabs,
.island-switch{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:3px;
  background:var(--demo-control);
  border:1px solid var(--demo-border);
  border-radius:10px;
}
.demo-tabs button,
.island-switch button{
  position:relative;
  min-height:32px;padding:0 13px;
  border-radius:8px;
  font-size:12.5px;font-weight:550;letter-spacing:-.01em;
  color:var(--demo-fg-mute);
  background:transparent;border:0;cursor:pointer;
  transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.island-switch button{min-height:30px;padding:0 12px;pointer-events:auto}
.demo-tabs button:hover,
.island-switch button:hover{
  color:var(--demo-fg);
  background:var(--demo-control);
}
.demo-tabs button[aria-pressed="true"],
.island-switch button[aria-pressed="true"]{
  color:var(--demo-btn-fg);
  background:var(--demo-btn);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.demo-tabs button:focus-visible,
.island-switch button:focus-visible{
  outline:2px solid var(--demo-fg-faint);
  outline-offset:2px;
}
.demo-stage{padding:18px 0;min-height:220px}
.demo-note,
.island-hint,
.redact-step-label{
  margin:0;padding-top:14px;font-size:13px;line-height:1.5;
  color:var(--demo-fg-hint);font-weight:500;
}
.island-hint{padding-top:0;font-size:12.5px;text-align:center;min-height:1.4em}
.redact-step-label{padding-top:0;font-size:12.5px;margin-left:4px}
.demo-log{
  margin:0;margin-top:12px;padding:12px 0 0;
  background:transparent;border:0;border-top:1px solid var(--demo-rule);
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--demo-fg);white-space:pre-wrap;min-height:4.5em;
  border-radius:0;
}
.demo-log .hit{color:#ff6b6b;font-weight:650}
.demo-log .ok{color:#34c759;font-weight:650}

/* Nested product mocks: light paper cards inside dark demo shells */
.nl,
.nl-safe{
  --ink:#070709;
  --ink2:#1c1c21;
  --mute:#60606c;
  --mute2:#8b8b97;
  --line:rgba(7,7,9,.08);
  --demo-rule:rgba(7,7,9,.08);
  color:#1c1c21;
}
/* Fake newsletter — marketing HTML: uneven type, a bit busy (not a circus) */
.nl{
  max-width:100%;margin:0 auto;background:#fff;color:#222;
  font:13px/1.4 Arial,"Helvetica Neue",sans-serif;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
}
.nl-ticker{
  display:block;padding:6px 12px;text-align:center;
  font:700 10px/1.3 Verdana,Geneva,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  color:#6b3a00;background:#fff4d6;border-bottom:1px solid #f0e0a8;
}
.nl-hero{
  height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  background:linear-gradient(120deg,#4f6bed 0%,#7aa2ff 55%,#b8d0ff 100%);
  color:#fff;
  font:700 20px/1.1 "Arial Narrow",Arial,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
}
.nl-hero small{
  font:600 10px/1.2 Georgia,serif;letter-spacing:.08em;opacity:.88;text-transform:none;
}
/* Blocked remote: classic broken image */
.nl-hero.is-missing,
.nl-thumb.is-missing{
  position:relative;
  background:#f3f3f5;
  color:transparent;font-size:0;line-height:0;text-shadow:none;
  box-shadow:inset 0 0 0 1px #d8d8de;
}
.nl-hero.is-missing::before,
.nl-thumb.is-missing::before{
  content:"";
  display:block;
  width:40px;height:40px;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Crect x='6' y='10' width='36' height='28' rx='2' stroke='%23999' stroke-width='1.75'/%3E%3Ccircle cx='16' cy='20' r='3' stroke='%23999' stroke-width='1.5'/%3E%3Cpath d='M10 34l10-9 6 5 6-7 10 11' stroke='%23999' stroke-width='1.75' stroke-linejoin='round'/%3E%3Cpath d='M30 8l10 10M40 8L30 18' stroke='%23b0b0b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nl-hero.is-missing small{display:none}
.nl-thumb.is-missing::before{width:28px;height:28px}
.nl-body{padding:12px 14px 16px}
.nl-shout{
  margin:0 0 8px!important;
  font:700 11px/1.2 Verdana,sans-serif!important;
  color:#c2410c!important;letter-spacing:.04em;text-transform:uppercase;
}
.nl-body h3,.nl-title-mkt{
  margin:0 0 10px;
  font:700 19px/1.2 Georgia,"Times New Roman",serif!important;
  color:#1e3a8a!important;
  letter-spacing:0;text-align:left;
}
.nl-body p{margin:0 0 10px;color:#333}
.nl-lede-weird{
  font:400 14px/1.35 "Trebuchet MS",Arial,sans-serif!important;
  color:#444!important;
  border-left:3px solid #f59e0b;
  padding:4px 0 4px 10px;
  background:#fffbeb;
}
.nl-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.nl-chip{
  display:inline-block;padding:2px 7px;
  font:600 9px/1.3 Verdana,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  border-radius:3px;color:#fff;
}
.nl-chip.c1{background:#dc2626}
.nl-chip.c2{background:#16a34a}
.nl-chip.c3{background:#2563eb;font-weight:500}
.nl-tiny{
  font:400 10px/1.35 Arial,sans-serif!important;
  color:#9ca3af!important;margin:12px 0 4px!important;
}
.nl-rainbow{
  margin:8px 0 0!important;
  font:700 11px/1.3 Arial,sans-serif!important;
  text-align:center;text-transform:uppercase;letter-spacing:.06em;
  color:#7c3aed!important;
}
.nl-cta{
  display:inline-block;margin-top:8px;padding:9px 16px;
  background:#f59e0b;color:#1c1917!important;
  font:700 12px/1 Arial,sans-serif!important;
  text-transform:uppercase;letter-spacing:.04em;
  border:0;border-radius:3px;
  text-decoration:none!important;
}
.nl-extra{
  margin:12px 0 0!important;
  padding-top:10px;border-top:1px dotted #ddd;
  font:400 12px/1.4 "Courier New",monospace!important;
  color:#666!important;
}
.nl-pixel{width:1px;height:1px;opacity:0;position:absolute}
.nl-row{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.nl-row p{
  font:400 12px/1.4 Arial,sans-serif!important;
  color:#555!important;margin:0!important;
}
.nl-thumb{
  width:56px;height:56px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#fdba74,#fb923c);
  border-radius:2px;
}

/* Safe Reader: deliberate reading layout — light paper on dark demo */
.nl-safe{
  --sr-pad-x:48px;
  --sr-pad-y:44px;
  --sr-measure:32em;
  max-width:38em;
  margin:0 auto;
  background:#fafaf9;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  font-family:"Open Runde",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans SC",sans-serif;
  color:var(--ink);
}
@media (max-width:560px){
  .nl-safe{--sr-pad-x:28px;--sr-pad-y:28px}
}
.nl-safe .nl-ticker,
.nl-safe .nl-hero,
.nl-safe .nl-thumb,
.nl-safe .nl-shout,
.nl-safe .nl-chip-row,
.nl-safe .nl-rainbow,
.nl-safe .nl-tiny,
.nl-safe .nl-extra{display:none!important}
.nl-safe .nl-body{
  padding:var(--sr-pad-y) var(--sr-pad-x) calc(var(--sr-pad-y) + 8px);
  background:none;
  text-align:left;
}
.nl-safe .nl-banner{
  margin:0;
  padding:14px var(--sr-pad-x);
  background:rgba(7,7,9,.035);
  border-bottom:1px solid var(--line);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--mute);
  font-weight:500;
  font-family:inherit;
  text-align:left;
}
.nl-safe .nl-banner strong{
  color:var(--ink2);
  font-weight:600;
}
.nl-safe h3,
.nl-safe .nl-title-mkt{
  margin:0 0 18px;
  padding:0;
  max-width:var(--sr-measure);
  font-family:var(--display)!important;
  font-size:24px!important;
  font-weight:500!important;
  line-height:1.3!important;
  letter-spacing:-.02em!important;
  color:var(--ink)!important;
  text-align:left!important;
  transform:none;
}
/* EN / JA Safe Reader demo titles: true serif (not Open Runde) */
html[lang="en"] .nl-safe h3,
html[lang="en"] .nl-safe .nl-title-mkt{
  font-family:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
  line-height:1.28!important;
}
html[lang="ja"] .nl-safe h3,
html[lang="ja"] .nl-safe .nl-title-mkt{
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","YuMincho","Yu Mincho","Noto Serif SC","Songti SC",serif!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  line-height:1.4!important;
}
.nl-safe .nl-lede-weird,
.nl-safe .nl-row p,
.nl-safe p,
.nl-safe #mode-p2,
.nl-safe #mode-lead{
  margin:0 0 1.15em!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  max-width:var(--sr-measure);
  font-family:inherit!important;
  font-size:15.5px!important;
  font-weight:400!important;
  font-style:normal!important;
  line-height:1.75!important;
  letter-spacing:.005em!important;
  color:var(--ink2)!important;
  text-align:left!important;
}
/* Quotes / callouts keep the same measure + horizontal rhythm */
.nl-safe blockquote,
.nl-safe .nl-quote,
.nl-safe .nl-callout{
  margin:0 0 1.2em!important;
  padding:14px 0 14px 18px!important;
  max-width:var(--sr-measure);
  border:0!important;
  border-left:2px solid rgba(7,7,9,.14)!important;
  background:none!important;
  font-family:inherit!important;
  font-size:15.5px!important;
  font-weight:400!important;
  font-style:normal!important;
  line-height:1.75!important;
  letter-spacing:.005em!important;
  color:var(--ink2)!important;
  text-align:left!important;
}
.nl-safe blockquote p,
.nl-safe .nl-quote p,
.nl-safe .nl-callout p{
  margin:0 0 .65em!important;
  max-width:none;
}
.nl-safe blockquote p:last-child,
.nl-safe .nl-quote p:last-child,
.nl-safe .nl-callout p:last-child{margin-bottom:0!important}
.nl-safe ul,
.nl-safe ol{
  margin:0 0 1.15em!important;
  padding:0 0 0 1.2em!important;
  max-width:var(--sr-measure);
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink2);
}
.nl-safe li{margin:0 0 .4em}
.nl-safe li:last-child{margin-bottom:0}
.nl-safe pre,
.nl-safe code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;
  line-height:1.55;
}
.nl-safe pre{
  margin:0 0 1.15em;
  padding:16px 18px;
  max-width:var(--sr-measure);
  background:rgba(7,7,9,.04);
  border-radius:6px;
  overflow-x:auto;
  color:var(--ink2);
}
.nl-safe .nl-row{
  display:block;
  margin:0 0 1.15em;
}
.nl-safe .nl-row p{margin:0!important}
.nl-safe .nl-cta{
  display:inline-block;
  margin:10px 0 0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--ink)!important;
  font-family:inherit!important;
  font-size:14.5px!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.nl-banner{
  margin:0 0 12px;padding:8px 10px;background:#f7f7f8;font-size:12px;color:var(--mute);font-weight:500;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  border:0;box-shadow:none;letter-spacing:0;text-transform:none;
}
.nl-banner strong{color:var(--ink);font-weight:650}

/* —— Diagram interiors (shell bg/fg from shared .demo / .flow / … rules) —— */
.flow{display:flex;flex-direction:column;gap:0}
.flow-row{
  display:grid;grid-template-columns:28px 1fr;gap:12px 14px;align-items:start;
}
.flow-rail{
  display:flex;flex-direction:column;align-items:center;height:100%;
  padding-top:4px;
}
.flow-dot{
  width:10px;height:10px;border-radius:50%;background:var(--demo-fg-title);flex:0 0 auto;
}
.flow-line{
  width:1px;flex:1 1 auto;min-height:20px;background:var(--demo-rule);margin:4px 0;
}
.flow-row:last-child .flow-line{display:none}
.flow-card{
  padding:14px 4px 16px;margin-bottom:0;
  background:transparent;border:0;border-radius:0;
}
.flow-card b{
  display:block;margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--demo-fg-title);letter-spacing:-.01em;
}
.flow-card span{display:block;font-size:12.5px;line-height:1.5;color:var(--demo-fg-mute);font-weight:400}

.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
@media (max-width:720px){
  .compare{grid-template-columns:1fr;margin-left:0;width:100%;max-width:100%}
  .compare-vs{display:none}
  .compare-col + .compare-col{
    border-top:1px solid var(--demo-rule);
    margin-top:4px;padding-top:18px;
  }
}
.compare-col{
  background:transparent;border:0;border-radius:0;padding:4px 18px 4px 0;
}
.compare-col:last-child{padding:4px 0 4px 18px}
.compare-col h4{
  margin:0 0 12px;font-size:12px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--demo-fg-faint);
}
.compare-col ol{
  margin:0;padding:0 0 0 1.15em;font-size:13.5px;line-height:1.55;
  color:var(--demo-fg-body);
}
.compare-col li{margin:0 0 8px;color:var(--demo-fg-body)}
.compare-col li:last-child{margin-bottom:0}
.compare-vs{
  display:flex;align-items:center;justify-content:center;
  width:1px;padding:0;margin:0 4px;
  font-size:0;color:transparent;letter-spacing:0;
  background:var(--demo-rule);
  align-self:stretch;
}
.compare-col.is-good{
  background:var(--demo-bg-elevated);color:var(--demo-fg-strong);
  border-radius:14px;padding:16px 16px 14px;margin-left:8px;
  border:1px solid var(--demo-border);
}
.compare-col.is-good h4{color:var(--demo-fg-mute)}
.compare-col.is-good ol{color:var(--demo-fg-strong);padding-left:0;list-style:none}
.compare-col.is-good li{padding-left:0;color:var(--demo-fg-strong)}
@media (max-width:720px){
  .compare-col{padding:4px 0}
  .compare-col:last-child{padding:4px 0}
  .compare-col.is-good{margin-left:0;margin-top:8px}
}

.layers{display:flex;flex-direction:column;gap:0}
.layer{
  display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;
  padding:16px 2px;
  background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--demo-rule);
}
.layer:last-child{border-bottom:0}
.layer-tag{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--demo-fg-faint);
}
.layer-body{min-width:0}
.layer-body b{display:block;font-size:13.5px;font-weight:600;color:var(--demo-fg-title);margin:0 0 3px}
.layer-body span{display:block;font-size:12.5px;line-height:1.45;color:var(--demo-fg-mute)}
.layer.tier0,.layer.tier1,.layer.tier2{box-shadow:none}
.layer.final{
  background:var(--demo-bg-elevated);color:var(--demo-fg-strong);
  border-bottom:0;border-radius:14px;
  margin:10px 0 8px;padding:16px 16px;
  border:1px solid var(--demo-border);
}
.layer.final .layer-tag{color:var(--demo-fg-mute)}
.layer.final .layer-body b{color:#fff}
.layer.final .layer-body span{color:var(--demo-fg)}

/* AI redaction — inherits demo shell tokens */
.redact-demo .redact-panels{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
@media (max-width:720px){
  .redact-demo .redact-panels{grid-template-columns:1fr}
  .redact-panel + .redact-panel{
    border-left:0;border-top:1px solid var(--demo-rule);
    margin-top:4px;padding-top:16px;padding-left:0;
  }
}
.redact-panel{
  background:transparent;border-radius:0;padding:4px 0 4px;
  border:0;min-height:140px;
}
.redact-panel + .redact-panel{
  border-left:1px solid var(--demo-rule);
  padding-left:18px;margin-left:18px;
}
.redact-panel h4{
  margin:0 0 10px;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--demo-fg-faint);
}
.redact-text{
  font-size:13.5px;line-height:1.65;color:var(--demo-fg);word-break:break-word;
}
.redact-text mark.phi{
  background:rgba(255,69,58,.22);color:#ff8a80;border-radius:3px;
  padding:0 3px;font-weight:600;
}
.redact-text mark.tok{
  background:var(--demo-control-hover);color:var(--demo-fg-strong);
  font-family:var(--mono);font-size:12px;font-weight:600;
  border-radius:3px;padding:0 4px;
}
.redact-map{
  margin-top:12px;padding:10px 12px;background:var(--demo-control);border-radius:8px;
  font:12px/1.5 var(--mono);color:var(--demo-fg-mute);
}
.redact-map div{margin:0 0 4px}
.redact-map div:last-child{margin:0}
.redact-controls{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center;
}
.redact-controls button{
  min-height:34px;padding:0 14px;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;border:0;
  background:var(--demo-btn);color:var(--demo-btn-fg);
}
.redact-controls button.secondary{
  background:var(--demo-control-hover);color:var(--demo-fg);
}

.win-chrome{
  display:flex;gap:6px;padding:4px 6px 10px;
}
.win-chrome i{
  width:10px;height:10px;border-radius:50%;background:var(--demo-fg-faint);display:block;
}
.win-body{
  position:relative;background:transparent;border:0;border-radius:0;min-height:160px;
  padding:48px 8px 12px;overflow:hidden;
}
.win-body .fake-list{opacity:.45;font-size:12px;line-height:1.8;color:var(--demo-fg-faint);padding:0 8px}
.win-body .island{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:min(400px,calc(100% - 24px));
}

/* Insight Island capsule (product UI chip — elevated dark) */
.island-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:14px;min-height:120px;padding:8px 0 4px;
}
.island-switch{position:relative;z-index:2}
.island{
  width:min(438px,100%);
  height:48px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:0 8px 0 10px;
  border-radius:999px;
  background:var(--demo-bg-elevated);
  color:var(--demo-fg-strong);
  border:1px solid var(--demo-border);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  font-family:var(--font);
  user-select:none;
}
.island-av{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:650;letter-spacing:0;
  background:#2a2a2e;color:#e8e8ed;
  flex:0 0 auto;
}
.island-av.tone-l{background:#2c2c30}
.island-av.tone-d{background:#c084fc;color:#1a1024}
.island-main{min-width:0;display:flex;flex-direction:column;gap:1px;padding-right:4px}
.island-sub{
  font-size:10px;font-weight:500;line-height:1.2;
  color:var(--demo-fg-mute);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.island-val{
  font-size:14px;font-weight:500;line-height:1.2;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.island-val.mono{
  font-family:var(--mono);font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.island-act{
  min-height:32px;padding:0 14px;border-radius:999px;
  background:var(--demo-btn);color:var(--demo-btn-fg);font-size:13px;font-weight:600;
  border:0;cursor:pointer;flex:0 0 auto;
  transition:opacity .15s ease,transform .15s ease;
}
.island-act:hover{opacity:.92;transform:scale(1.015)}
.island-act.is-ok{background:#34c759;color:#fff}
.island-act.is-warn{background:#ff9f0a;color:#1c1200}
.island-x{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:var(--demo-fg-mute);font-size:16px;line-height:1;
  background:transparent;border:0;cursor:pointer;flex:0 0 auto;
}
.island-x:hover{background:var(--demo-control-hover);color:#fff}
.post-cover[data-theme="island"]{
  --c1:rgba(255,255,255,.5);--c2:rgba(40,40,48,.25);--c3:rgba(0,0,0,.08);
  --c4:#2a2a30;--c5:#111214;
}
.post-cover[data-theme="island"] .post-cover-label{color:rgba(255,255,255,.72);text-shadow:none}
.post-cover[data-theme="privacy"]{
  --c1:rgba(255,255,255,.5);--c2:rgba(120,120,140,.28);--c3:rgba(40,40,50,.12);
  --c4:#ececf0;--c5:#c8c8d0;
}

/* Pipeline steps */
.article-body .pipe{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
@media (max-width:720px){
  .article-body .pipe{
    grid-template-columns:1fr 1fr;
    width:100%;
    max-width:100%;
    margin-left:0;
  }
  .pipe-step{border-right:1px solid var(--demo-rule);border-bottom:1px solid var(--demo-rule)}
  .pipe-step:nth-child(2n){border-right:0}
  .pipe-step:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:420px){
  .article-body .pipe{grid-template-columns:1fr}
  .pipe-step{
    border-right:0;
    border-bottom:1px solid var(--demo-rule);
  }
  .pipe-step:last-child{border-bottom:0}
}
.pipe-step{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
  padding:1.05rem 1rem 1.1rem;
  background:transparent;
  border:0;
  border-right:1px solid var(--demo-rule);
  border-radius:0;
  box-shadow:none;
}
.pipe-step:last-child{border-right:0}
.pipe-step b{
  margin:0;
  font-family:var(--font);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
  color:var(--demo-fg-title);
}
html[lang="en"] .pipe-step b{letter-spacing:-.01em}
.pipe-step span{
  display:block;
  margin:0;
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:0;
  color:var(--demo-fg-mute);
  font-weight:400;
}

/* Post grid on dark paper */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px 22px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}
@media (max-width:560px){.post-grid{grid-template-columns:1fr;gap:28px}}

.post-card{display:block;color:inherit}
.post-cover{
  position:relative;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--soft);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.post-card:hover .post-cover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.post-cover-art{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 12% 18%,var(--c1) 0%,transparent 55%),
    radial-gradient(100% 80% at 88% 22%,var(--c2) 0%,transparent 50%),
    radial-gradient(90% 100% at 50% 100%,var(--c3) 0%,transparent 55%),
    linear-gradient(145deg,var(--c4),var(--c5));
}
.post-cover-art::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 70%,rgba(255,255,255,.22),transparent 42%),
    radial-gradient(circle at 72% 28%,rgba(255,255,255,.12),transparent 36%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.post-cover[data-theme="classic"]{
  --c1:rgba(255,255,255,.55);--c2:rgba(120,160,255,.45);--c3:rgba(40,60,120,.2);
  --c4:#dce7ff;--c5:#8fa8d8;
}
.post-cover[data-theme="reader"]{
  --c1:rgba(255,255,255,.5);--c2:rgba(120,210,180,.4);--c3:rgba(30,90,70,.18);
  --c4:#ddf5ec;--c5:#7fbfa8;
}
.post-cover[data-theme="judgment"]{
  --c1:rgba(255,255,255,.7);--c2:rgba(255,217,92,.45);--c3:rgba(30,65,100,.2);
  --c4:#c7d9ec;--c5:#567698;
}
/* Photo covers: 1:1 art from covers/{slug}.jpg */
.post-cover.has-photo .post-cover-art,
.post-cover.has-photo .post-cover-label{display:none}
.post-cover.has-photo[data-theme="island"]{
  background:#2c2c30 url("covers/insight-island-codes.jpg") center/cover no-repeat;
}
.post-cover.has-photo[data-theme="privacy"]{
  background:#ececee url("covers/ai-privacy-by-architecture.jpg") center/cover no-repeat;
}
.post-cover.has-photo[data-theme="classic"]{
  background:#e2dfe6 url("covers/classic-vs-app-store.jpg") center/cover no-repeat;
}
.post-cover.has-photo[data-theme="reader"]{
  background:#f2f2f4 url("covers/safe-reader.jpg") center/cover no-repeat;
}
.post-cover.has-photo[data-theme="snooze"]{
  background:#f0eeea url("covers/mail-can-wait.jpg") center/cover no-repeat;
}
.post-cover.has-photo[data-theme="judgment"]{
  background:#1a1b1f url("covers/i-deleted-both.jpg") center/cover no-repeat;
}
.post-cover-label{
  position:absolute;left:18px;bottom:16px;
  font-size:13px;font-weight:650;letter-spacing:-.01em;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.post-body{padding:14px 4px 0}
.post-title{
  display:block;
  margin:0 0 8px;
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.35;
  letter-spacing:-.02em;
  font-weight:650;
  color:#fff;
}
html[lang="zh-CN"] .post-title,
html[lang="zh-CN"] .blog-list-title,
html[lang="zh-CN"] .article-title{
  font-family:"Noto Serif SC","Songti SC","STSong",var(--display);
  font-weight:500;
  letter-spacing:0;
}
.post-card:hover .post-title{color:rgba(255,255,255,.88)}
.post-meta{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  font-size:13px;
  line-height:1.4;
  color:var(--mute2);
  font-weight:500;
}
.post-meta time{color:var(--mute2);font-weight:500}

/* —— Snooze demo (simple card, shared demo tokens) —— */
.snooze-demo .demo-stage{
  padding:20px 0 4px;
  min-height:0;
}
.sz-card{
  box-sizing:border-box;
  max-width:520px;
  border-radius:18px;
  background:var(--demo-bg-elevated);
  border:1px solid var(--demo-border);
  padding:24px 26px 22px;
}
.sz-banner{
  margin:0 0 16px;
  padding:10px 14px;
  border-radius:12px;
  font-size:12.5px;font-weight:650;line-height:1.45;
  color:var(--demo-fg-mute);
  background:var(--demo-control);
}
.sz-banner.is-back{
  color:#d8f5e0;
  background:rgba(52,199,89,.12);
}
.sz-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.sz-av{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#0a0a0b;background:#e8e8ec;
  flex:0 0 auto;
}
.sz-main{min-width:0}
.sz-from{font-size:14px;font-weight:700;color:var(--demo-fg-title);margin:0 0 4px}
.sz-sub{font-size:13.5px;font-weight:600;color:var(--demo-fg-strong);line-height:1.4;margin:0 0 6px}
.sz-prev,.sz-meta{font-size:12.5px;line-height:1.5;color:var(--demo-fg-mute)}
.sz-meta{font-weight:650;color:var(--demo-fg-hint);margin-top:4px}
.sz-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sz-tags span{
  display:inline-flex;align-items:center;min-height:22px;padding:0 10px;
  border-radius:999px;font-size:11px;font-weight:700;
  color:var(--demo-fg-mute);background:var(--demo-control);
}
.sz-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sz-primary,.sz-ghost{
  min-height:36px;padding:0 16px;border-radius:999px;
  font-size:13px;font-weight:650;
}
.sz-primary{background:var(--demo-btn);color:var(--demo-btn-fg)}
.sz-ghost{
  color:var(--demo-fg-strong);
  background:var(--demo-control);
  border:1px solid var(--demo-border);
}
.sz-ghost:hover{background:var(--demo-control-hover)}
.sz-hint{
  margin:16px 0 0;
  font-size:12.5px;line-height:1.55;color:var(--demo-fg-hint);
}
.snooze-demo .demo-note{
  padding-top:18px;
}