/* Synthetic walkthrough: one type scale, an eight pixel rhythm, and data-led hierarchy. */
.app-frame:has(.demo-banner){
  --canvas:#f3f1eb;--paper:#fffefa;--ink:#202924;--muted:#52615a;
  --line:#d8dfd7;--control-line:#b6c4b9;--green:#205f46;
  --coral:#205f46;--coral-dark:#205f46;--shadow:none;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);background:var(--canvas);
}
.app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .app-main h1,
.app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .app-main h2,
.app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .app-main h3,
.app-frame:has(.demo-banner) .v3-verdict{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:-.035em;
}
.app-frame:has(.demo-banner) .demo-banner{
  position:sticky;padding:6px 16px;background:#e9eee7;border-color:#d8dfd7;
  color:#304d3b;font-size:11px;line-height:16px;font-weight:600;letter-spacing:0;
}
.app-frame:has(.demo-banner) .app-header{
  min-height:72px;padding:12px 24px;background:#fffefa;border-color:#d8dfd7;
}
.app-frame:has(.demo-banner) .viewing-switch{
  min-height:40px;padding:8px 12px;border:1px solid #b6c4b9;border-radius:8px;
  background:#f5f8f3;color:#205f46;font-size:13px;font-weight:700;
}
.app-frame:has(.demo-banner) .tour-launch{
  min-height:40px;padding:8px 12px;margin-left:8px;border-radius:8px;
  border-color:#d8dfd7;color:#52615a;background:transparent;font-size:12px;
}
.app-frame:has(.demo-banner) .language-toggle{margin-left:8px;font-size:11px}
.app-frame:has(.demo-banner) .viewing-rows button small{display:block;margin-top:4px;color:#52615a;font-size:12px;font-weight:400}
.app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .screen{
  padding:32px 24px calc(var(--pill-h) + 80px + env(safe-area-inset-bottom));
}
.app-frame:has(.demo-banner) .page-heading{margin:0 0 32px}
.app-frame:has(.demo-banner) .page-heading h1{font-size:clamp(32px,4vw,48px)!important;line-height:1.08;font-weight:600;margin:8px 0 12px}
.app-frame:has(.demo-banner) .page-heading p:last-child{font-size:15px;line-height:1.5;max-width:56ch}
.app-frame:has(.demo-banner) .eyebrow{font-size:11px;letter-spacing:.1em}
.app-frame:has(.demo-banner) .card,
.app-frame:has(.demo-banner) .form-card,
.app-frame:has(.demo-banner) .v3-data-card,
.app-frame:has(.demo-banner) .trends-card{
  border:1px solid #d8dfd7;border-radius:12px;background:#fffefa;
  box-shadow:none;padding:24px;margin-block:16px;
}
.app-frame:has(.demo-banner) .card p,
.app-frame:has(.demo-banner) .form-card p{font-size:14px;line-height:1.55;color:#52615a}
.app-frame:has(.demo-banner) .badge{border-radius:6px}
.app-frame:has(.demo-banner) .button,
.app-frame:has(.demo-banner) .v3-capture-primary,
.app-frame:has(.demo-banner) .trends-capture-primary{border-radius:8px}
.app-frame:has(.demo-banner) .floating-pill{
  width:min(calc(100% - 32px),600px);height:64px;padding:4px 8px;
  margin-bottom:calc(12px + env(safe-area-inset-bottom));border:1px solid #cdd8ce;
  border-radius:12px;background:#fffefa;box-shadow:0 12px 32px #2135261c;
}
.app-frame:has(.demo-banner) .floating-pill a:not(.pill-sos){
  min-height:48px;min-width:48px;padding:8px 6px;color:#52615a;font-size:11px;
  border-radius:6px;font-weight:600;
}
.app-frame:has(.demo-banner) .floating-pill a[aria-current="page"]{
  color:#205f46;background:#e9f2e9;border:0;border-radius:6px;
}
.app-frame:has(.demo-banner) .floating-pill .pill-sos{
  width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:8px;box-shadow:none;background:#a12f2f;
}
.app-frame:has(.demo-banner) :is(a,button,input,summary):focus-visible{
  outline:3px solid #174e3a;outline-offset:3px;
}
.app-frame:has(.demo-banner) .v3-today{display:flex;flex-direction:column;gap:0}
.app-frame:has(.demo-banner) .v3-today h1{
  font-size:clamp(30px,4vw,42px)!important;font-weight:600!important;
  line-height:1.1!important;color:#202924!important;margin:0 0 16px!important;
}
.app-frame:has(.demo-banner) .v3-today .v3-verdict{
  max-width:62ch;margin:0 0 24px!important;
  font-size:16px;line-height:1.5;font-weight:400;color:#34483a!important;
}
.app-frame:has(.demo-banner) .v3-return{
  padding:12px 16px;margin:0 0 8px;border:0;border-left:3px solid #7ca88b;
  border-radius:0 8px 8px 0;background:#e9f2e9;color:#304d3b;font-size:13px;line-height:1.5;
}
.app-frame:has(.demo-banner) .v3-bp-link .v3-data-card{
  margin:16px 0 24px;padding:24px;background:#fffefa;
  border:1px solid #c6d8ca;border-radius:12px;
}
.app-frame:has(.demo-banner) .v3-data-card h2,
.app-frame:has(.demo-banner) .v3-ledger h2{font-size:16px;font-weight:700;margin-bottom:16px}
.app-frame:has(.demo-banner) .v3-today .v3-reading{
  margin:8px 0 16px;font-size:clamp(34px,5vw,48px)!important;
  line-height:1.1;letter-spacing:-.045em;color:#202924!important;
}
.app-frame:has(.demo-banner) .v3-today .v3-reading>span:first-child{
  font-size:17px;color:#52615a;line-height:1.4;letter-spacing:0;
}
.app-frame:has(.demo-banner) :is(.v3-simulated,.trends-simulated-tag){display:none}
.app-frame:has(.demo-banner) .v3-week-chart{height:auto;aspect-ratio:300/144;margin:0 0 16px}
.app-frame:has(.demo-banner) .v3-chart-band{fill:#dfe4de}
.app-frame:has(.demo-banner) .v3-chart-point{fill:#1d6247;stroke:#fffefa}
.app-frame:has(.demo-banner) .v3-week-chart text{fill:#42564a;font-size:12px}
.app-frame:has(.demo-banner) .v3-data-card p{font-size:13px;line-height:1.5}
.app-frame:has(.demo-banner) .v3-data-card .v3-ritual{
  margin:16px 0 0;padding-top:16px;border-color:#d8dfd7;
}
.app-frame:has(.demo-banner) .v3-bp-link-label{
  margin-top:16px;border-color:#d8dfd7;font-size:14px;font-weight:700;
}
.app-frame:has(.demo-banner) .v3-ledger{
  padding:24px;background:#fffefa;border:1px solid #d8dfd7;border-radius:12px;
}
.app-frame:has(.demo-banner) .v3-ledger-row{padding:12px 0;gap:16px;font-size:13px;line-height:1.4}
.app-frame:has(.demo-banner) .v3-ledger-row strong{font-weight:600;color:#34483a}
.app-frame:has(.demo-banner) .v3-ledger small{font-size:12px;line-height:1.5;margin-top:16px}
.app-frame:has(.demo-banner) .v3-appointment{
  padding:20px 24px 4px;margin:16px 0 0;border:1px solid #d8dfd7;border-bottom:0;
  border-radius:12px 12px 0 0;background:#fffefa;color:#202924;font-size:14px;font-weight:700;
}
.app-frame:has(.demo-banner) .v3-checklist{
  padding:4px 24px 20px;margin:0 0 16px;border:1px solid #d8dfd7;border-top:0;
  border-radius:0 0 12px 12px;background:#fffefa;color:#52615a;font-size:13px;
}
.app-frame:has(.demo-banner) .v3-visit{
  display:grid;grid-template-columns:1fr auto;gap:8px 16px;
  padding:24px;margin:16px 0;background:#fffefa;border:1px solid #d8dfd7;border-radius:12px;
}
.app-frame:has(.demo-banner) .v3-visit-label{
  grid-column:1/-1;color:#205f46;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.app-frame:has(.demo-banner) .v3-visit strong{font-size:20px;line-height:1.25;letter-spacing:-.03em}
.app-frame:has(.demo-banner) .v3-visit>p{grid-column:1;margin:0;color:#52615a;font-size:13px;line-height:1.5}
.app-frame:has(.demo-banner) .v3-visit-status{
  grid-column:2;grid-row:2;align-self:center;color:#205f46;background:#e9f2e9;
  border-radius:6px;padding:6px 8px;font-size:11px;font-weight:700;
}
.app-frame:has(.demo-banner) .v3-visit .v3-checklist{
  grid-column:1/-1;padding:16px 0 0;margin:8px 0 0;border:0;border-top:1px solid #d8dfd7;
  border-radius:0;background:transparent;font-size:13px;
}
.app-frame:has(.demo-banner) .v3-journey-entry{
  margin:24px 0 0;padding:24px;background:#e9eee7;border:1px solid #d8dfd7;
  border-radius:12px;color:#202924;
}
.app-frame:has(.demo-banner) .v3-journey-entry p{color:#205f46}
.app-frame:has(.demo-banner) .v3-journey-entry h2{font-size:20px;line-height:1.3;color:#202924}
.app-frame:has(.demo-banner) .v3-journey-entry>span{color:#52615a;font-size:13px}
.app-frame:has(.demo-banner) .v3-journey-entry a{
  border-color:#cbd9cc;color:#205f46;font-size:14px;
}
.app-frame:has(.demo-banner) .trends-heading h1{font-size:clamp(30px,4vw,42px);font-weight:600}
.app-frame:has(.demo-banner) .trends-screen{background:transparent}
.app-frame:has(.demo-banner) .trends-heading p{font-size:15px;line-height:1.5}
.app-frame:has(.demo-banner) .trends-period{border-radius:8px;overflow:hidden}
.app-frame:has(.demo-banner) .trends-period button{min-height:44px;font-size:13px}
.app-frame:has(.demo-banner) .trends-card h2{font-size:18px}
.app-frame:has(.demo-banner) .trends-card-head p{font-size:13px}
.app-frame:has(.demo-banner) .trends-reading strong{font-size:clamp(36px,5vw,48px);letter-spacing:-.045em}
.app-frame:has(.demo-banner) .trends-reading-time{display:block;margin-top:4px;color:#52615a;font-size:12px;line-height:1.4}
.app-frame:has(.demo-banner) .trends-card svg text{font-size:13px;fill:#42564a}
.app-frame:has(.demo-banner) .trends-bp-svg .trends-band,
.app-frame:has(.demo-banner) .trends-glucose-svg .trends-band,
.app-frame:has(.demo-banner) .labs-v3__band{fill:#dfe4de;fill-opacity:1}
.app-frame:has(.demo-banner) .trends-legend-band{background:#dfe4de}
.app-frame:has(.demo-banner) .trends-card svg{margin-top:24px}
.app-frame:has(.demo-banner) .trends-legend{font-size:12px;line-height:1.4;gap:8px 16px}
.app-frame:has(.demo-banner) .trends-note{font-size:13px;line-height:1.5}
.app-frame:has(.demo-banner) .trends-share-preview{
  margin:0 0 24px;padding:12px 0;font-size:14px;font-weight:700;
}
.app-frame:has(.demo-banner) .trends-glucose-count{font-size:13px}
.app-frame:has(.demo-banner) .labs-v3__title{font-size:clamp(30px,4vw,42px)}
.app-frame:has(.demo-banner) .labs-v3__analyte{border-radius:12px}
.app-frame:has(.demo-banner) .records-lab-card{border-radius:12px}
.app-frame:has(.demo-banner) :is(.trends-empty,.labs-v3__empty,.records-empty){
  padding:24px;border:1px dashed #b6c4b9;border-radius:12px;background:#f7f9f4;
  color:#52615a;font-size:14px;line-height:1.5;
}
.app-frame:has(.demo-banner) :is(.trends-empty,.labs-v3__empty,.records-empty) h2{
  margin:0 0 8px;color:#202924;font-size:18px;
}
.app-frame:has(.demo-banner) .inline-status:not(:empty){
  padding:12px 16px;border:1px solid #b6c4b9;border-left:3px solid #205f46;
  border-radius:8px;background:#f7f9f4;color:#304d3b;font-size:13px;
}
@media(min-width:800px){
  .app-frame:has(.demo-banner){max-width:1120px;min-height:100vh;box-shadow:none}
  .app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .screen{max-width:1040px;margin:auto;padding:48px 40px 144px}
  .app-frame:has(.demo-banner) .v3-today{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:0 24px}
  .app-frame:has(.demo-banner) .v3-today>:not(.v3-bp-link):not(.v3-ledger){grid-column:1/-1}
  .app-frame:has(.demo-banner) .v3-today .v3-bp-link{grid-column:1}
  .app-frame:has(.demo-banner) .v3-today .v3-ledger{grid-column:2;align-self:start;margin-top:16px}
  .app-frame:has(.demo-banner) .trends-page{max-width:900px}
  .app-frame:has(.demo-banner) .floating-pill{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto 24px}
}
@media(max-width:480px){
  .app-frame:has(.demo-banner) .app-header{padding:8px 16px;align-items:flex-start}
  .app-frame:has(.demo-banner) .brand-lockup{align-self:center}
  .app-frame:has(.demo-banner) .brand-lockup img{width:118px}
  .app-frame:has(.demo-banner) .header-actions{gap:2px}
  .app-frame:has(.demo-banner) .viewing-switch{font-size:12px;padding:7px 9px}
  .app-frame:has(.demo-banner) .tour-launch{font-size:11px;margin-left:2px}
  .app-frame:has(.demo-banner):not(:has(.guidance-emergency)) .screen{padding:24px 16px calc(var(--pill-h) + 80px)}
  .app-frame:has(.demo-banner) .v3-data-card,
  .app-frame:has(.demo-banner) .trends-card{padding:20px}
  .app-frame:has(.demo-banner) .floating-pill{width:calc(100% - 24px)}
  .app-frame:has(.demo-banner) .floating-pill a:not(.pill-sos){font-size:10px;padding-inline:3px}
}
@media(prefers-reduced-motion:no-preference){
  .app-frame:has(.demo-banner) .v3-data-card.is-arrived{animation:polish-appear .32s ease-out both}
  .app-frame:has(.demo-banner) .floating-pill a,
  .app-frame:has(.demo-banner) .viewing-switch{transition:background-color .18s ease,color .18s ease}
}
@keyframes polish-appear{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.app-frame:has(.guidance-emergency) .guidance-emergency,
.app-frame:has(.guidance-emergency) .guidance-emergency *{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important}