@font-face{font-family:"Demo Entry SF";src:url("./route-assets/sf-pro-text-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Demo Entry SF";src:url("./route-assets/sf-pro-display-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
html[data-demo-entry-pending],html[data-demo-entry-pending] body{background:#666}
html[data-demo-entry-pending] [data-demo-content]{visibility:hidden}
.demo-entry,.demo-entry *{box-sizing:border-box}
.demo-entry{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;background:#666;color:#333;font-family:"Demo Entry SF",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
.demo-entry-card{width:min(375px,100%);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;padding:20px;border-radius:24px;background:#fff}
.demo-entry-card h1{margin:0 0 12px;color:#333;font:700 20px/24px "Demo Entry SF",-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0}
.demo-entry-card p{margin:0 0 20px;color:#333;font:400 15px/20px "Demo Entry SF",-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;text-wrap:pretty}
.demo-entry-confirm{display:block;width:100%;height:48px;margin:0;padding:0 20px;border:0;border-radius:12px;background:#000;color:#fff;font:400 15px/20px "Demo Entry SF",-apple-system,BlinkMacSystemFont,sans-serif;text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.demo-entry-confirm:active{background:#222}
.demo-entry-confirm:focus-visible{outline:2px solid #333;outline-offset:3px}

/* Only these pre-blurred pixels are used before acknowledgement. */
.demo-entry{background-position:center;background-size:cover;background-repeat:no-repeat}
.demo-entry[data-demo-preview="glucose"]{background-image:linear-gradient(#0003,#0003),url("./demo-entry-glucose-blurred.webp")}
.demo-entry[data-demo-preview="trip"]{background-image:linear-gradient(#0003,#0003),url("./demo-entry-trip-blurred.webp")}

/* Match the reference's four text lines at handset widths of 375px and up. */
.demo-entry-card p{text-wrap:wrap}
.demo-entry-line{display:block}
@media(min-width:375px){.demo-entry-line{white-space:nowrap}}