:root { color-scheme: light; --ink:#051c23; --link:#064d90; }
* { box-sizing:border-box; }
body { margin:0; height:100dvh; display:flex; flex-direction:column; background:#eef0ef; color:var(--ink); font:14px/1.5 var(--font-sans); }
#preview-loading { display:none; position:fixed; inset:0; align-items:center; justify-content:center; font-size:18px; }
.preview-restoring #preview, .preview-restoring footer { visibility:hidden; }
.preview-restoring #preview-loading { display:flex; }
#preview { flex:1; min-height:0; position:relative; cursor:pointer; overflow:hidden; }
#preview picture, #preview img, #preview-animation { display:block; width:100%; height:100%; object-fit:fill; }
#preview-animation { position:absolute; inset:0; }
[hidden], #preview img[hidden] { display:none !important; }
#preview-unavailable { position:absolute; inset:40% 20px auto; margin:0; text-align:center; }
/* The bar floats over the recording in the map's own button style, so the
   page reads as the app and not as a web page with a footer. */
footer { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; max-width:calc(100% - 24px); }
footer nav { display:flex; align-items:center; gap:8px; white-space:nowrap; }
button { cursor:pointer; font:inherit; }
.pbar-group { display:flex; align-items:center; height:38px; padding:0 6px; border-radius:999px; background:#fff; box-shadow:0 3px 14px rgba(5,28,35,.18); }
.pbar-group button { height:38px; padding:0 12px; border:0; background:none; color:#37494f; font:600 13.5px/1 var(--font-sans); }
.pbar-group button:hover { color:var(--ink); }
.pbar-icon { width:38px; display:grid; place-items:center; padding:0 !important; }
#preview-motion { border-right:1px solid #dfe5e7; border-radius:0; margin-right:4px; }
#preview-motion .pbar-play, #preview-motion.paused .pbar-pause, .pbar-label { display:none; }
#preview-motion.paused .pbar-play { display:block; }
#preview-signin { height:38px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 13.5px/1 var(--font-sans); box-shadow:0 3px 14px rgba(5,28,35,.22); }
#preview-signin:hover { background:#0b2f3a; }
@media(max-width:640px) { footer { bottom:16px; } footer nav { gap:6px; } .pbar-group button { padding:0 10px; } #preview-signin { padding:0 16px; } }
:focus-visible { outline:3px solid var(--link); outline-offset:-3px; }
dialog { box-sizing:border-box; width:min(440px, calc(100% - 40px)); border:0; border-radius:14px; padding:26px 26px 22px; color:var(--ink); box-shadow:0 24px 60px -12px rgba(2,14,18,.45); }
dialog::backdrop { background:rgba(5,28,35,.58); }
dialog h1 { margin:0 0 8px; padding-right:36px; font-family:var(--font-display); font-size:19px; line-height:1.25; }
dialog p { margin:0 0 18px; font-size:14.5px; line-height:1.55; color:#37494f; }
dialog .dialog-x { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:999px; background:#f1f4f5; color:#37494f; display:grid; place-items:center; }
dialog .dialog-close { height:38px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 13.5px/1 var(--font-sans); }

#preview-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; box-sizing:border-box; width:min(480px, calc(100% - 32px)); text-align:center; pointer-events:none; background:rgba(5,28,35,.9); color:#fff; padding:22px 26px 24px; border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.45); }
#preview-card-when { margin:0 0 10px; font-family:var(--display, inherit); font-size:22px; line-height:1.2; letter-spacing:-.01em; }
#preview-card-now { margin:-4px 0 12px; font-size:15px; line-height:1.3; color:#9edfff; font-variant-numeric:tabular-nums; }
#preview-card p { margin:0 auto 18px; max-width:34ch; font-size:17px; line-height:1.5; text-wrap:balance; }
#preview-card .preview-card-note { box-sizing:border-box; max-width:42.8ch; padding:10px 12px; background:rgba(158,223,255,.10); border:1px solid rgba(158,223,255,.24); border-radius:8px; font-size:13.5px; }
#preview-card-cta { display:inline-block; background:#9edfff; color:#051c23; border-radius:999px; padding:9px 18px; font-weight:600; font-size:13.5px; line-height:1; }
#preview:hover #preview-card-cta { background:#c4ebff; }
@media(max-width:640px) { #preview-card { display:none; } }
#preview-card ul { list-style:none; margin:0 auto 16px; padding:0; max-width:40ch; text-align:left; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.4; }
#preview-card li { display:flex; gap:9px; align-items:flex-start; }
#preview-card li svg { flex:none; margin-top:2px; color:#9edfff; }
#preview-card { width:min(520px, calc(100% - 32px)); }
@media(max-height:760px) { #preview-card { padding:16px 20px 18px; } #preview-card p { font-size:15px; margin-bottom:12px; } #preview-card ul { gap:5px; font-size:13px; margin-bottom:12px; } }