/* SealNest live demo — styles (SPEC.md section 6; redrawn 2026-10-02 from the real app's screens,
   build of 2026-10-01, Vault Nest Notes/build-2026-10-01/integration-review-screens/).
   Every class here starts with sn-.

   INSIDE THE PHONE IT IS THE APP, NOT THE WEBSITE.
     - Every size inside the phone is written in iPhone points: calc(N * var(--pt)), where one point
       is the phone screen's width divided by 402 (an iPhone 17 Pro is 402 points wide). So the
       drawing is the app's own layout at any size, as a screenshot would be. The numbers were
       measured off the app's screenshots (lock, home, list, item, editor, banner).
     - Colours come only from the --app-* tokens in tokens.css. With the default palette those are
       the app's own colours; with another palette, the same roles in that palette.
     - Type is the system font (SF Pro on Apple devices), as in the app.
   Under the phone it is the website again (the caption, the four moments, the switch).

   Motion: default styles are finished states. Every animation is switched on by a class that
   demo/demo.js adds, and tokens.css switches them all off under prefers-reduced-motion.
   No colour is written here: light, dark and every palette come from tokens.css. */

/* ============================ the box ============================ */
.sn-demo{
  --sn-vh:100vh;
  --sn-h:clamp(560px,calc(var(--sn-vh) - 170px),700px);   /* the phone's height */
  --sn-ar:.5;                                       /* the phone's width as a share of its height: near a real iPhone's */
  --sn-bz:9px;                                      /* bezel */
  --sn-ctl:232px;                                   /* caption + the four moments + switch + foot, at their smallest */
  position:relative;width:100%;max-width:340px;margin-inline:auto;
  min-height:calc(var(--sn-h) + var(--sn-ctl));text-align:center   /* a minimum: larger text makes the box taller, never clipped */
}
@supports (height:100svh){ .sn-demo{--sn-vh:100svh} }
.sn-demo[data-variant="inline"]{--sn-ctl:254px}   /* its foot is two short rows, so it fits a 320 px column in any font */
.sn-demo[data-variant="full"]{--sn-h:clamp(600px,calc(var(--sn-vh) - 190px),760px);max-width:380px}
@media (min-width:900px){
  .sn-demo{--sn-h:clamp(580px,calc(var(--sn-vh) - 150px),700px)}
  .sn-demo[data-variant="full"]{--sn-h:clamp(600px,calc(var(--sn-vh) - 200px),780px)}
}
@media (max-width:399px){ .sn-demo{--sn-bz:7px} }

/* Scripts on, before mounting: a still of the phone and the lock screen's icon, exactly the
   size of the mounted demo, so the page never jumps. */
html.js .sn-demo:not(.is-mounted)::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(100%,calc(var(--sn-h)*var(--sn-ar)));height:var(--sn-h);border-radius:48px;background:var(--phone-body);
  box-shadow:inset 0 0 0 var(--sn-bz) var(--phone-body),inset 0 0 0 999px var(--app-ground),var(--shadow-lg)}
html.js .sn-demo:not(.is-mounted)::after{content:"";position:absolute;left:50%;top:calc(var(--sn-bz) + (var(--sn-h) - 2*var(--sn-bz))*.29);
  width:70px;height:70px;margin-left:-35px;border-radius:16px;background:var(--seal)}

/* Scripts off: the <noscript> inside the box holds a drawn phone (the made-up vault's home
   screen) and the demo's four moments in words. No room is kept for controls that will never arrive. */
html:not(.js) .sn-demo{min-height:0}
.sn-demo noscript{display:block}
.sn-phone--still .sn-row,.sn-phone--still .sn-cat{cursor:default}
.sn-still-say{margin:18px 0 0;font-size:16px;line-height:1.45;color:var(--ink);text-wrap:balance}
.sn-still-list{list-style:none;display:inline-grid;gap:7px;margin:12px 0 0;padding:0;text-align:left;font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.sn-still-list li{position:relative;padding-left:24px}
.sn-still-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:5px;
  border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg)}

/* ============================ the phone ============================ */
.sn-phone{position:relative;width:min(100%,calc(var(--sn-h)*var(--sn-ar)));height:var(--sn-h);margin-inline:auto;padding:var(--sn-bz);border-radius:48px;background:var(--phone-body);
  box-shadow:inset 0 0 0 1px var(--phone-edge),var(--shadow-lg);text-align:left;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* The screen. Inside it, .sn-canvas is the app at an iPhone's own size, 402 points wide.
   Scripts on (the live demo): one point is one pixel, and demo/demo.js scales the canvas down to
   the screen (--sn-s), as a screenshot is scaled, so the type keeps its real sizes and its real cut.
   Scripts off (the drawn still): the canvas fills the screen and one point is the screen's width
   / 402 (container units). */
.sn-screen{position:relative;height:100%;overflow:hidden;isolation:isolate;border-radius:calc(48px - var(--sn-bz));
  container-type:inline-size;background:var(--app-ground);color:var(--app-ink)}
.sn-demo{--pt:.8px}
@supports (width:1cqw){ .sn-demo{--pt:calc(100cqw / 402)} }
.sn-canvas{position:relative;width:100%;height:100%;font:400 calc(17 * var(--pt))/1.29 var(--font-sans);letter-spacing:-.01em}
.sn-demo.is-mounted .sn-canvas{--pt:1px;width:402px;height:calc(100% / var(--sn-s,1));transform:scale(var(--sn-s,1));transform-origin:0 0}
.sn-phone :where(p){margin:0}
.sn-phone button{font-family:inherit;letter-spacing:inherit;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.sn-i{flex:0 0 auto;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sn-i .f{fill:currentColor;stroke:none}            /* the filled parts of a symbol (a pupil, a head) */
.sn-i .k{fill:var(--app-surface);stroke:none}      /* a hole cut in a filled symbol */
.sn-i .ks{stroke:var(--app-surface)}                /* a line cut through a filled symbol (the + on a badge) */
.sn-dots{stroke-width:3.4}
.sn-mark{flex:0 0 auto;display:block;width:calc(38 * var(--pt));height:calc(38 * var(--pt));border-radius:calc(9 * var(--pt))}
.sn-accent{color:var(--app-glyph)}

/* status bar: the time, the island, signal, Wi-Fi and battery (an iPhone 17 Pro's, in points) */
.sn-status{position:absolute;z-index:46;left:0;right:0;top:0;height:calc(54 * var(--pt));pointer-events:none;color:var(--app-ink)}
.sn-canvas.is-dark .sn-status{color:var(--cam-guide-ink)}
.sn-time{position:absolute;left:calc(53 * var(--pt));top:calc(21 * var(--pt));font-size:calc(17 * var(--pt));font-weight:600;letter-spacing:-.02em;line-height:1}
.sn-sys{position:absolute;right:calc(34 * var(--pt));top:calc(22 * var(--pt));display:flex;align-items:center;gap:calc(6 * var(--pt))}
.sn-sig{display:flex;align-items:flex-end;gap:calc(1.6 * var(--pt));height:calc(11 * var(--pt))}
.sn-sig i{width:calc(3 * var(--pt));border-radius:calc(1 * var(--pt));background:currentColor}
.sn-sig i:nth-child(1){height:35%}.sn-sig i:nth-child(2){height:55%}.sn-sig i:nth-child(3){height:78%}.sn-sig i:nth-child(4){height:100%}
.sn-wifi{width:calc(17 * var(--pt));height:calc(12 * var(--pt));fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.sn-batt{position:relative;width:calc(25 * var(--pt));height:calc(12 * var(--pt));border-radius:calc(4 * var(--pt));box-shadow:inset 0 0 0 calc(1 * var(--pt)) color-mix(in srgb,currentColor 45%,transparent)}
.sn-batt::before{content:"";position:absolute;inset:calc(2 * var(--pt));border-radius:calc(2.2 * var(--pt));background:currentColor}
.sn-batt::after{content:"";position:absolute;right:calc(-2.6 * var(--pt));top:calc(4 * var(--pt));width:calc(1.6 * var(--pt));height:calc(4 * var(--pt));border-radius:0 1px 1px 0;background:currentColor;opacity:.45}
.sn-notch{position:absolute;z-index:46;left:50%;top:calc(14 * var(--pt));width:calc(126 * var(--pt));height:calc(37 * var(--pt));margin-left:calc(-63 * var(--pt));border-radius:calc(19 * var(--pt));background:var(--island)}

.sn-scene{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(62 * var(--pt)) calc(16 * var(--pt)) calc(16 * var(--pt));overflow:hidden;background:var(--app-ground)}

/* ---- the app's own pieces ---- */
/* a large title (34 pt bold), a section heading over a panel (22 pt, grey), a panel */
.sn-title{margin:calc(20 * var(--pt)) calc(1 * var(--pt)) 0;font-size:calc(34 * var(--pt));font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--app-title)}
.sn-sec{font-size:calc(22 * var(--pt));font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--app-ink-2)}
.sn-card{border-radius:calc(26 * var(--pt));background:var(--app-surface)}
/* the filled button: 54 pt tall, moss, white words */
.sn-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--pt));width:100%;height:calc(54 * var(--pt));padding:0 calc(16 * var(--pt));
  border:0;border-radius:calc(17 * var(--pt));background:var(--app-btn);color:var(--app-on-btn);font-size:calc(20 * var(--pt));font-weight:600;cursor:pointer}
.sn-btn .sn-i{font-size:calc(30 * var(--pt));stroke-width:1.6}
.sn-btn:active{opacity:.85}
.sn-k{font-size:calc(15 * var(--pt));line-height:1.3;color:var(--app-ink-2);transition:opacity var(--dur-2) var(--ease)}
.sn-rt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:calc(2 * var(--pt))}
.sn-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(17 * var(--pt));font-weight:500;line-height:1.25}
.sn-meta{display:flex;align-items:center;gap:calc(6 * var(--pt));min-width:0;overflow:hidden;white-space:nowrap;font-size:calc(17 * var(--pt));line-height:1.25;color:var(--app-ink-2)}
.sn-meta .sn-i{font-size:calc(19 * var(--pt))}
.sn-warn{color:var(--app-warn)}
.sn-danger{color:var(--app-danger)}
/* an icon tile: the symbol in moss, inside a rounded outline in moss (no fill) */
.sn-ico{flex:0 0 auto;display:grid;place-items:center;width:calc(47 * var(--pt));height:calc(47 * var(--pt));border:calc(1.5 * var(--pt)) solid var(--app-tile-line);border-radius:calc(13 * var(--pt));
  color:var(--app-glyph);font-size:calc(29 * var(--pt))}
.sn-ico--xl{width:calc(73 * var(--pt));height:calc(73 * var(--pt));border-radius:calc(20 * var(--pt));font-size:calc(44 * var(--pt))}
.sn-ico--bare{width:auto;height:auto;border:0;font-size:calc(25 * var(--pt))}
.sn-ico .sn-i{transition:opacity var(--dur-2) var(--ease)}
/* the floating controls: a round button, a pill of words, a pill of two things */
.sn-gl{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:calc(14 * var(--pt));height:calc(44 * var(--pt));min-width:calc(44 * var(--pt));padding:0 calc(16 * var(--pt));
  border:0;border-radius:calc(22 * var(--pt));background:var(--app-surface);box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),0 calc(6 * var(--pt)) calc(16 * var(--pt)) calc(-6 * var(--pt)) var(--app-dim);
  color:var(--app-ink);font-size:calc(17 * var(--pt));font-weight:400;white-space:nowrap}
button.sn-gl{cursor:pointer}
button.sn-gl::after,.sn-eye::after,.sn-mini::after,.sn-link::after,.sn-chip::after,.sn-row-x::after{content:"";position:absolute;inset:-5px -4px}   /* a 44 px place to tap */
.sn-gl--round{padding:0;font-size:calc(22 * var(--pt))}
.sn-gl--pair{gap:calc(22 * var(--pt));padding:0 calc(18 * var(--pt));font-size:calc(22 * var(--pt))}
.sn-gl--pair .sn-accent{font-size:calc(17 * var(--pt))}
.sn-gl .sn-strong{font-weight:600}
.sn-gl.sn-accent,.sn-gl .sn-accent,.sn-acct{color:var(--app-glyph)}
.sn-gl:active{opacity:.7}
.sn-bar{position:relative;z-index:4;flex:0 0 calc(44 * var(--pt));display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--pt))}
.sn-bar--end{justify-content:flex-end}
.sn-bar--float{position:absolute;left:calc(16 * var(--pt));right:calc(16 * var(--pt));top:calc(62 * var(--pt))}
.sn-bar-end{display:flex;gap:calc(8 * var(--pt))}
.sn-bar-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.sn-bar-t{font-size:calc(17 * var(--pt));font-weight:600;line-height:1.2;white-space:nowrap}
.sn-bar-s{font-size:calc(13 * var(--pt));line-height:1.3;color:var(--app-ink-2);white-space:nowrap}
.sn-link{position:relative;padding:0;border:0;background:none;color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer}
.sn-link:active,.sn-eye:active,.sn-mini:active{opacity:.6}
.sn-chev{font-size:calc(17 * var(--pt));color:var(--app-chev);stroke-width:2.2}
.sn-pill{flex:0 0 auto;margin-left:calc(10 * var(--pt));padding:calc(4 * var(--pt)) calc(14 * var(--pt));border-radius:var(--radius-pill);background:var(--app-soft);color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600;line-height:1.2}
/* a switch: on, in moss, with the wide knob of iOS 26 */
.sn-toggle{position:relative;flex:0 0 auto;width:calc(63 * var(--pt));height:calc(28 * var(--pt));border-radius:calc(14 * var(--pt));background:var(--app-glyph)}   /* the app's tint: moss in light, sage in dark */
.sn-toggle::after{content:"";position:absolute;right:calc(2 * var(--pt));top:calc(2 * var(--pt));width:calc(39 * var(--pt));height:calc(24 * var(--pt));border-radius:calc(12 * var(--pt));background:var(--app-on-btn)}

/* rows: an icon tile, a name, a line under it, a chevron */
.sn-rows{display:flex;flex-direction:column}
.sn-row{position:relative;z-index:0;display:flex;align-items:center;gap:calc(15 * var(--pt));width:100%;min-height:calc(70 * var(--pt));padding:0 calc(18 * var(--pt)) 0 calc(16 * var(--pt));
  border:0;border-radius:0;background:none;color:inherit;font-size:inherit;text-align:left;cursor:pointer}
.sn-row + .sn-row::before{content:"";position:absolute;left:calc(78 * var(--pt));right:0;top:0;border-top:calc(1 * var(--pt)) solid var(--app-line)}
.sn-row:active{background:var(--app-surface-2)}
@media (hover:hover){ .sn-card .sn-row:hover,.sn-cat:hover{background:color-mix(in srgb,var(--app-surface) 70%,var(--app-surface-2))} .sn-rows--open .sn-row:hover{background:var(--app-surface)} }
.sn-card.sn-rows{overflow:hidden}
.sn-rows--open{margin:calc(14 * var(--pt)) calc(-16 * var(--pt)) 0}
.sn-rows--open .sn-row{padding-left:calc(16 * var(--pt));padding-right:calc(16 * var(--pt))}
.sn-rows--open .sn-row + .sn-row::before{left:calc(74 * var(--pt));right:calc(16 * var(--pt))}
.sn-rows--open .sn-ico{width:calc(46 * var(--pt));height:calc(46 * var(--pt))}
.sn-rows--open .sn-name{font-weight:600}
.sn-flag{flex:0 0 auto;font-size:calc(21 * var(--pt));color:var(--app-warn)}
.sn-none{padding:calc(36 * var(--pt)) 0;text-align:center;color:var(--app-ink-2)}

/* ---- lock ---- */
.sn-lock{position:absolute;left:calc(24 * var(--pt));right:calc(24 * var(--pt));top:28%;display:flex;flex-direction:column;align-items:center;text-align:center}
.sn-appicon{display:block;width:calc(87 * var(--pt));height:calc(87 * var(--pt));border-radius:calc(20 * var(--pt))}
.sn-lock .sn-h{margin-top:calc(26 * var(--pt))}
.sn-h{font-size:calc(34 * var(--pt));font-weight:700;line-height:1.2;letter-spacing:-.025em;color:var(--app-title);white-space:nowrap}
.sn-sub{margin:calc(10 * var(--pt)) auto 0;max-width:calc(282 * var(--pt));font-size:calc(17 * var(--pt));line-height:1.35;color:var(--app-ink-2)}
.sn-lock .sn-btn{margin-top:calc(30 * var(--pt))}
.sn-plain{display:block;margin-top:calc(30 * var(--pt));font-size:calc(17 * var(--pt));font-weight:500;color:var(--app-ink)}
.sn-locknote{position:absolute;left:calc(20 * var(--pt));right:calc(20 * var(--pt));bottom:calc(58 * var(--pt));text-align:center;font-size:calc(13.5 * var(--pt));line-height:1.35;letter-spacing:0;color:var(--app-ink-2)}
@media (max-height:700px){ .sn-lock{top:24%} }   /* a short window (an iPhone with Safari's bars showing): the Unlock button sits a little higher */

/* ---- home: "Passwords" ---- */
.sn-body{flex:1 1 auto;min-height:0}
.sn-banner:not([hidden]) ~ .sn-scene--home .sn-bar{visibility:hidden}   /* the banner covers where the round button is */
.sn-exp{margin-top:calc(14 * var(--pt))}
.sn-exp-head{display:flex;align-items:baseline;gap:calc(16 * var(--pt));padding:0 calc(4 * var(--pt)) calc(10 * var(--pt)) calc(4 * var(--pt))}
.sn-exp-head .sn-sec{flex:1 1 auto;min-width:0;white-space:nowrap}
.sn-exp .sn-row{min-height:calc(70 * var(--pt))}
.sn-showall{display:block;width:100%;padding:calc(14 * var(--pt)) calc(16 * var(--pt)) calc(18 * var(--pt));border:0;border-top:calc(1 * var(--pt)) solid var(--app-line);background:none;
  color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600;text-align:left}
.sn-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(13 * var(--pt)) calc(9 * var(--pt));margin-top:calc(21 * var(--pt))}
.sn-cat{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-items:start;min-height:calc(111 * var(--pt));padding:calc(15 * var(--pt)) calc(16 * var(--pt)) calc(17 * var(--pt));
  border:0;border-radius:calc(24 * var(--pt));background:var(--app-surface);color:inherit;font-size:inherit;text-align:left;cursor:pointer}
.sn-cat .sn-ico{width:calc(43 * var(--pt));height:calc(43 * var(--pt));border-radius:calc(12 * var(--pt));font-size:calc(28 * var(--pt))}
.sn-cat-n{justify-self:end;align-self:center;font-size:calc(25 * var(--pt));line-height:1;color:var(--app-ink-2);font-variant-numeric:tabular-nums}
.sn-cat-t{grid-column:1 / -1;align-self:end;margin-top:calc(12 * var(--pt));font-size:calc(20 * var(--pt));font-weight:500;line-height:1.15;letter-spacing:-.015em;white-space:nowrap}
.sn-cat:active{background:var(--app-surface-2)}
/* Security: the app's red tile for passwords that need attention (build 20). Drawn, not a control. */
.sn-cat--warn{cursor:default}
.sn-cat--warn:active{background:var(--app-surface)}
.sn-cat--warn .sn-ico{border-color:var(--app-danger);color:var(--app-danger)}
/* the search bar and the two round buttons float over whatever is under them, as in the app */
.sn-dock{position:absolute;z-index:4;left:calc(12 * var(--pt));right:calc(12 * var(--pt));bottom:calc(38 * var(--pt));display:flex;align-items:center;gap:calc(10 * var(--pt))}
.sn-dock::before{content:"";position:absolute;z-index:-1;left:calc(-12 * var(--pt));right:calc(-12 * var(--pt));top:calc(-28 * var(--pt));bottom:calc(-38 * var(--pt));
  background:linear-gradient(to bottom,transparent,var(--app-ground) 62%);opacity:.85;pointer-events:none}
.sn-dock .sn-gl--round{width:calc(49 * var(--pt));height:calc(49 * var(--pt));border-radius:50%;background:var(--app-glass);font-size:calc(25 * var(--pt));color:var(--app-glyph)}
.sn-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:calc(10 * var(--pt));height:calc(49 * var(--pt));padding:0 calc(16 * var(--pt));border-radius:calc(25 * var(--pt));background:var(--app-glass);
  box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),0 calc(6 * var(--pt)) calc(16 * var(--pt)) calc(-6 * var(--pt)) var(--app-dim);color:var(--app-ink);font-size:calc(22 * var(--pt))}
.sn-search-t{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:calc(17 * var(--pt));color:color-mix(in srgb,var(--app-ink-2) 70%,var(--app-glass))}
/* the "..." menu */
.sn-menu{position:absolute;z-index:8;right:calc(16 * var(--pt));top:calc(112 * var(--pt));min-width:calc(210 * var(--pt));padding:calc(6 * var(--pt));border-radius:calc(22 * var(--pt));background:var(--app-surface);box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),var(--shadow-lg)}
.sn-menu-i{display:flex;align-items:center;gap:calc(12 * var(--pt));width:100%;min-height:calc(48 * var(--pt));padding:0 calc(14 * var(--pt));border:0;border-radius:calc(16 * var(--pt));background:none;color:var(--app-ink);font-size:calc(17 * var(--pt));cursor:pointer}
.sn-menu-i .sn-i{font-size:calc(21 * var(--pt));color:var(--app-glyph)}
.sn-menu-i:active{background:var(--app-surface-2)}
span.sn-menu-i{cursor:default}
.sn-menu:not([hidden]){animation:sn-pop-in 180ms var(--ease) backwards}

/* ---- list: one category ---- */
.sn-bar .sn-gl--pair{min-width:calc(100 * var(--pt))}
.sn-chips{flex:0 0 auto;margin:calc(18 * var(--pt)) calc(-16 * var(--pt)) 0;padding:calc(1 * var(--pt)) calc(16 * var(--pt));overflow:hidden}
.sn-chipstrip{display:flex;gap:calc(8 * var(--pt));width:max-content;transition:transform 320ms var(--ease)}
.sn-chip{position:relative;flex:0 0 auto;height:calc(35 * var(--pt));padding:0 calc(15 * var(--pt));border:calc(1.3 * var(--pt)) solid var(--app-line);border-radius:calc(18 * var(--pt));background:none;color:var(--app-ink-2);
  font-size:calc(17 * var(--pt));font-weight:600;white-space:nowrap;cursor:pointer}
.sn-chip.is-on{border-color:var(--app-tile-line);background:var(--app-soft);color:var(--app-glyph)}
.sn-codeval{font-size:calc(22 * var(--pt));font-weight:400;letter-spacing:.03em;color:var(--app-ink-2);font-variant-numeric:tabular-nums}
.sn-ringbox{position:relative;flex:0 0 auto;display:grid;place-items:center;width:calc(30 * var(--pt));height:calc(30 * var(--pt))}
.sn-ring{grid-area:1/1;width:calc(30 * var(--pt));height:calc(30 * var(--pt));transform:rotate(-90deg);fill:none;stroke:var(--app-line);stroke-width:2.6}
.sn-ring-fg{stroke:var(--app-glyph);stroke-dasharray:30;stroke-linecap:round}
.sn-ring-n{grid-area:1/1;font-size:calc(11 * var(--pt));font-weight:700;color:var(--app-glyph);font-variant-numeric:tabular-nums}
.sn-demo.is-visible .sn-ring-fg{transition:stroke-dashoffset 1s linear}   /* it only moves while it can be seen */

/* ---- item ---- */
.sn-scene--item,.sn-scene--editor{padding:0}
.sn-scroll{position:relative;padding:calc(122 * var(--pt)) calc(16 * var(--pt)) calc(40 * var(--pt));display:flex;flex-direction:column;gap:calc(16 * var(--pt))}
.sn-scroll.is-gliding{transition:transform 480ms var(--ease)}
/* an item, like the editor, is a sheet over the app (the app behind it is dimmed); the sheet
   fades out under its floating buttons, as it does in the app */
.sn-scene--item,.sn-scene--editor{background:var(--app-dim)}
.sn-sheet{position:absolute;inset:calc(60 * var(--pt)) 0 0;overflow:hidden;border-radius:calc(38 * var(--pt)) calc(38 * var(--pt)) 0 0;background:var(--app-ground)}
.sn-sheet::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:calc(84 * var(--pt));
  background:linear-gradient(to bottom,var(--app-ground) 70%,transparent);pointer-events:none}
.sn-sheet .sn-bar--float{top:calc(16 * var(--pt))}
.sn-sheet .sn-scroll{padding-top:calc(78 * var(--pt))}
.sn-gl--words{gap:calc(22 * var(--pt))}
.sn-gl--words .sn-link{font-weight:400}
.sn-head{padding:calc(18 * var(--pt)) calc(20 * var(--pt)) calc(4 * var(--pt));text-align:center}
.sn-head .sn-ico{margin:0 auto}
.sn-h--item{margin:calc(14 * var(--pt)) 0 calc(14 * var(--pt));font-size:calc(34 * var(--pt));white-space:normal;text-wrap:balance}
.sn-frow{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-height:calc(54 * var(--pt));padding:calc(8 * var(--pt)) 0;border-bottom:calc(1 * var(--pt)) solid var(--app-line);text-align:left}
.sn-fk{flex:0 0 auto;margin-right:calc(12 * var(--pt));font-size:calc(17 * var(--pt));line-height:1.25}
.sn-fv{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right;font-size:calc(17 * var(--pt));color:var(--app-ink-2)}
.sn-fv [data-secret]{vertical-align:top}
.sn-fv--dots{letter-spacing:.14em;font-size:calc(15 * var(--pt))}
.sn-frow.is-shown .sn-fv--dots{letter-spacing:0;font-size:calc(17 * var(--pt));color:var(--app-ink)}
.sn-frow.is-shown .sn-fv,.sn-frow.is-shown .sn-fv [data-secret]{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}   /* a long value shown in full wraps: a card number, a name */
.sn-fv--tel{overflow:visible}                                                           /* the ring on the number to tap is not clipped */
.sn-eye,.sn-mini{position:relative;flex:0 0 auto;display:grid;place-items:center;width:calc(34 * var(--pt));height:calc(34 * var(--pt));margin-left:calc(10 * var(--pt));padding:0;border:0;border-radius:50%;background:none;color:var(--app-glyph);font-size:calc(22 * var(--pt))}
.sn-mini{width:calc(30 * var(--pt));margin-left:calc(8 * var(--pt));font-size:calc(25 * var(--pt))}
button.sn-eye,button.sn-mini{cursor:pointer}
.sn-eye{background:var(--app-soft)}
.sn-eye .sn-i,.sn-mini .sn-i{grid-area:1/1}
.sn-eye-b,.sn-frow.is-shown .sn-eye-a,.sn-copy-b,.sn-mini.is-copied .sn-copy-a{opacity:0}
.sn-frow.is-shown .sn-eye-b,.sn-mini.is-copied .sn-copy-b{opacity:1}
.sn-priv{padding:calc(22 * var(--pt)) calc(20 * var(--pt)) calc(6 * var(--pt))}
.sn-priv-h,.sn-priv-t,.sn-notes-h{font-size:calc(17 * var(--pt));font-weight:700;color:var(--app-title)}
.sn-priv-t{margin-top:calc(22 * var(--pt))}
.sn-frow--p{min-height:calc(60 * var(--pt))}
.sn-priv .sn-frow:last-child,.sn-head .sn-frow:last-child{border-bottom-color:transparent}
.sn-expline{position:relative;flex:0 0 100%;display:flex;align-items:center;gap:calc(7 * var(--pt));margin:calc(2 * var(--pt)) 0 0;padding-bottom:calc(2 * var(--pt));font-size:calc(15.5 * var(--pt));line-height:1.3;color:var(--app-ink-2)}
.sn-expline.sn-warn{color:var(--app-warn)}
.sn-expline .sn-i{font-size:calc(18 * var(--pt))}
.sn-clearrem{flex:0 0 auto;margin:calc(6 * var(--pt)) 0 calc(4 * var(--pt));font-size:calc(15.5 * var(--pt));font-weight:600}
.sn-notes{padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(26 * var(--pt))}
.sn-notes-h{display:flex;align-items:center;gap:calc(14 * var(--pt));font-size:calc(17 * var(--pt));font-weight:700}
.sn-notes-t{margin-top:calc(14 * var(--pt));min-height:2.6em;font-size:calc(16 * var(--pt));line-height:1.4;color:var(--app-ink)}
.sn-notes-t.is-empty{color:var(--app-ink-2)}
.sn-health{padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(22 * var(--pt))}
.sn-health-h{display:flex;align-items:center;gap:calc(10 * var(--pt));padding-bottom:calc(14 * var(--pt));border-bottom:calc(1 * var(--pt)) solid var(--app-line);font-size:calc(20 * var(--pt));font-weight:700}
.sn-health-h .sn-i{font-size:calc(24 * var(--pt))}
.sn-good{color:var(--app-strong)}
.sn-health-r{display:flex;align-items:center;gap:calc(8 * var(--pt));margin-top:calc(12 * var(--pt));font-size:calc(15 * var(--pt))}
.sn-health-r .sn-i{font-size:calc(17 * var(--pt))}
.sn-health-l{display:block;margin-top:calc(14 * var(--pt));color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600}

/* ---- sign-in: a plain web page in Safari, with the iPhone's AutoFill suggestion from SealNest ---- */
.sn-scene--signin{padding:calc(60 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt));background:var(--app-surface)}
.sn-addr{display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--pt));flex:0 0 calc(44 * var(--pt));border-radius:calc(22 * var(--pt));background:var(--app-glass);font-size:calc(17 * var(--pt))}
.sn-addr .sn-i{font-size:calc(15 * var(--pt));color:var(--app-ink-2)}
.sn-web{padding:calc(22 * var(--pt)) calc(6 * var(--pt)) 0}
.sn-webh{font-size:calc(30 * var(--pt));font-weight:700;line-height:1.15;letter-spacing:-.02em}
.sn-webf{margin-top:calc(14 * var(--pt))}
.sn-webf .sn-k{display:block}
.sn-in{display:flex;align-items:center;height:calc(50 * var(--pt));margin-top:calc(5 * var(--pt));padding:0 calc(14 * var(--pt));overflow:hidden;white-space:nowrap;
  border:calc(1 * var(--pt)) solid var(--app-line);border-radius:calc(12 * var(--pt));background:var(--app-ground);font-size:calc(17 * var(--pt))}
.sn-in--dots{font-size:calc(19 * var(--pt));letter-spacing:.1em}
.sn-boxes{display:flex;gap:calc(8 * var(--pt));margin-top:calc(5 * var(--pt))}
.sn-box{flex:1 1 0;display:grid;place-items:center;height:calc(50 * var(--pt));border:calc(1 * var(--pt)) solid var(--app-line);border-radius:calc(12 * var(--pt));background:var(--app-ground);font-size:calc(21 * var(--pt));font-weight:600}
.sn-webcode{visibility:hidden}
.sn-webcode.is-on{visibility:visible;animation:sn-fade 260ms var(--ease) backwards}
.sn-fillbar{--rx:1.02;--ry:1.12;position:absolute;z-index:2;left:calc(10 * var(--pt));right:calc(10 * var(--pt));bottom:calc(30 * var(--pt));display:flex;align-items:center;gap:calc(14 * var(--pt));min-height:calc(72 * var(--pt));padding:calc(10 * var(--pt)) calc(18 * var(--pt)) calc(10 * var(--pt)) calc(14 * var(--pt));
  border:0;border-radius:calc(26 * var(--pt));background:var(--app-glass);box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),var(--shadow);color:var(--app-ink);font-size:inherit;text-align:left;cursor:pointer}
.sn-fillbar .sn-name{font-weight:600}
.sn-fillbar .sn-meta{font-size:calc(15 * var(--pt))}
.sn-fillbar .sn-i{font-size:calc(30 * var(--pt));stroke-width:1.6;color:var(--app-ink-2);transition:opacity 120ms}
.sn-fillbar .sn-tick{--d:22;position:absolute;right:calc(18 * var(--pt));opacity:0;color:var(--app-glyph);stroke-width:2.4}
.sn-fillbar.is-ok .sn-fid{opacity:0}
.sn-fillbar.is-ok .sn-tick{opacity:1;stroke-dasharray:22;animation:sn-draw 260ms var(--ease) backwards}
.sn-fillbar.is-up{animation:sn-up 320ms var(--ease) backwards}
.sn-fillbar.is-gone{opacity:0;transform:translateY(16px);transition:opacity 200ms var(--ease-in),transform 200ms var(--ease-in)}
.sn-fillbar--code .sn-name{font-size:calc(21 * var(--pt));font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.sn-signed{position:absolute;left:calc(18 * var(--pt));right:calc(18 * var(--pt));bottom:calc(30 * var(--pt))}
.sn-signed.is-in{animation:sn-rise 300ms var(--ease) backwards}
.sn-signed-t{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--pt));margin-bottom:calc(14 * var(--pt));font-size:calc(19 * var(--pt));font-weight:700}
.sn-ok{display:grid;place-items:center;width:calc(28 * var(--pt));height:calc(28 * var(--pt));border-radius:50%;background:var(--app-btn);color:var(--app-on-btn);font-size:calc(17 * var(--pt))}
.sn-ok .sn-i{stroke-width:3}

/* ---- the + button: Add, then "Choose ID, Card or Other Details" (the scan-first design, build 14) ----
   Two sheets over whichever screen is showing: the first has Password as the main button and "ID, Card or
   Document" as a clear second one; the second is a grid of what to scan. The camera opens next. */
.sn-ov{position:absolute;z-index:30;inset:0}
.sn-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--island) 34%,transparent)}   /* a see-through dim: the screen stays visible under the sheet */
.sn-ov:not([hidden]) .sn-backdrop{animation:sn-fade 200ms var(--ease) backwards}
.sn-sheetb{position:absolute;left:0;right:0;bottom:0;max-height:94%;display:flex;flex-direction:column;overflow:hidden;border-radius:calc(34 * var(--pt)) calc(34 * var(--pt)) 0 0;background:var(--app-ground)}
.sn-ov:not([hidden]) .sn-sheetb{animation:sn-up 300ms var(--ease) backwards}
.sn-sheetb--full{top:calc(54 * var(--pt));max-height:none}
.sn-grab{flex:0 0 auto;width:calc(36 * var(--pt));height:calc(5 * var(--pt));margin:calc(8 * var(--pt)) auto 0;border-radius:3px;background:var(--app-line)}
.sn-sheet-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--pt));padding:calc(10 * var(--pt)) calc(14 * var(--pt)) 0}
.sn-sheet-pad{flex:0 0 calc(80 * var(--pt))}
.sn-sheet-h .sn-bar-t{flex:1 1 auto;text-align:center}
.sn-sheet-body{padding:calc(14 * var(--pt)) calc(16 * var(--pt)) calc(34 * var(--pt))}
.sn-fill{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--pt));width:100%;min-height:calc(54 * var(--pt));padding:calc(10 * var(--pt)) calc(18 * var(--pt));
  border:0;border-radius:calc(16 * var(--pt));background:var(--app-btn);color:var(--app-on-btn);font-size:calc(17 * var(--pt));font-weight:600;cursor:pointer}
.sn-fill .sn-i{font-size:calc(24 * var(--pt))}
.sn-two{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}
.sn-two small{font-size:calc(14 * var(--pt));font-weight:400}
.sn-fill .sn-two small{opacity:.9}
.sn-outline{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--pt));min-height:calc(50 * var(--pt));padding:0 calc(14 * var(--pt));
  border:calc(1.3 * var(--pt)) solid var(--app-glyph);border-radius:calc(15 * var(--pt));background:var(--app-surface);color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600;cursor:pointer}
.sn-outline .sn-i{font-size:calc(21 * var(--pt))}
.sn-outline--tall{width:100%;justify-content:flex-start;gap:calc(12 * var(--pt));min-height:calc(58 * var(--pt));margin-top:calc(10 * var(--pt));padding:calc(8 * var(--pt)) calc(18 * var(--pt))}
.sn-outline--tall .sn-i{font-size:calc(24 * var(--pt))}
.sn-outline .sn-two small{color:var(--app-ink-2)}
.sn-softbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--pt));width:100%;min-height:calc(50 * var(--pt));border:0;border-radius:calc(15 * var(--pt));background:var(--app-soft);color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600;cursor:pointer}
.sn-softbtn .sn-i{font-size:calc(21 * var(--pt))}
.sn-addrows{margin-top:calc(14 * var(--pt))}
.sn-addrows .sn-row{min-height:calc(62 * var(--pt))}
.sn-h2{font-size:calc(28 * var(--pt));font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--app-title)}
.sn-helpline{margin-top:calc(6 * var(--pt));font-size:calc(14.5 * var(--pt));line-height:1.3;color:var(--app-ink-2)}
.sn-types{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--pt));margin-top:calc(14 * var(--pt))}
.sn-type{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:calc(14 * var(--pt));min-height:calc(96 * var(--pt));padding:calc(14 * var(--pt));
  border:calc(1.3 * var(--pt)) solid var(--app-line);border-radius:calc(20 * var(--pt));background:var(--app-surface);color:inherit;font-size:calc(17 * var(--pt));font-weight:600;line-height:1.15;text-align:left;cursor:pointer}
.sn-type .sn-ico{width:calc(38 * var(--pt));height:calc(38 * var(--pt));font-size:calc(24 * var(--pt))}
.sn-type--wide{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;min-height:calc(60 * var(--pt))}
.sn-type:active,.sn-addrows .sn-row:active{background:var(--app-surface-2)}

/* ---- the camera: dark, whatever the phone's colours. The document in view is drawn (never the visitor's
   camera); it reads itself after a moment, or the shutter at the bottom takes the picture. ---- */
.sn-scene--camera{padding:0;background:var(--island)}
.sn-cam{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--island);color:var(--cam-guide-ink)}
.sn-cam-vp{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,var(--photo-1),var(--photo-2))}
.sn-cam-vp.is-dim{filter:brightness(.55)}
.sn-cam-top{position:absolute;z-index:3;left:calc(14 * var(--pt));right:calc(14 * var(--pt));top:calc(62 * var(--pt));display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--pt))}
.sn-cam-title{flex:1 1 auto;min-width:0;text-align:center;font-size:calc(17 * var(--pt));font-weight:600;line-height:1.15;color:var(--cam-guide-ink)}
.sn-cam-title small{display:block;font-size:calc(13 * var(--pt));font-weight:400;opacity:.85}
.sn-dglass{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--pt));height:calc(44 * var(--pt));min-width:calc(44 * var(--pt));padding:0 calc(16 * var(--pt));border:0;border-radius:calc(22 * var(--pt));
  background:color-mix(in srgb,var(--island) 42%,transparent);color:var(--cam-guide-ink);font-size:calc(17 * var(--pt));white-space:nowrap;cursor:pointer}
.sn-dglass .sn-i{font-size:calc(20 * var(--pt))}
.sn-cam-frame{position:absolute;left:50%;top:54%;width:calc(318 * var(--pt));height:calc(200 * var(--pt));transform:translate(-50%,-50%)}
.sn-cam-doc{position:absolute;left:calc(9 * var(--pt));top:calc(5.5 * var(--pt));transform:rotate(-2deg)}
.sn-corner{position:absolute;width:calc(30 * var(--pt));height:calc(30 * var(--pt));border:calc(4 * var(--pt)) solid var(--cam-guide-ink)}
.sn-corner--tl{left:calc(-8 * var(--pt));top:calc(-8 * var(--pt));border-right:0;border-bottom:0;border-radius:calc(12 * var(--pt)) 0 0 0}
.sn-corner--tr{right:calc(-8 * var(--pt));top:calc(-8 * var(--pt));border-left:0;border-bottom:0;border-radius:0 calc(12 * var(--pt)) 0 0}
.sn-corner--bl{left:calc(-8 * var(--pt));bottom:calc(-8 * var(--pt));border-right:0;border-top:0;border-radius:0 0 0 calc(12 * var(--pt))}
.sn-corner--br{right:calc(-8 * var(--pt));bottom:calc(-8 * var(--pt));border-left:0;border-top:0;border-radius:0 0 calc(12 * var(--pt)) 0}
.sn-cam-frame.is-found .sn-corner{border-color:var(--cam-found)}
.sn-scanline{position:absolute;left:0;right:0;top:6%;height:calc(2 * var(--pt));background:var(--cam-found);box-shadow:0 0 calc(10 * var(--pt)) var(--cam-found);opacity:.85}
html.motion .sn-demo.is-visible .sn-scanline{animation:sn-scan 1.6s ease-in-out 3 alternate}
@keyframes sn-scan{from{top:6%}to{top:94%}}
.sn-hint{position:absolute;left:50%;bottom:calc(14 * var(--pt));max-width:88%;transform:translateX(-50%);padding:calc(8 * var(--pt)) calc(14 * var(--pt));border-radius:calc(14 * var(--pt));background:var(--cam-guide);color:var(--cam-guide-ink);font-size:calc(15 * var(--pt));text-align:center;white-space:nowrap}
.sn-cam-bottom{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(10 * var(--pt));padding:calc(14 * var(--pt)) calc(16 * var(--pt)) calc(24 * var(--pt));background:var(--island)}
.sn-cam-note{text-align:center;font-size:calc(14 * var(--pt));color:color-mix(in srgb,var(--cam-guide-ink) 72%,transparent)}
.sn-cam-pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--pt))}
.sn-cam-bottom .sn-outline{background:color-mix(in srgb,var(--cam-guide-ink) 8%,transparent);border-color:color-mix(in srgb,var(--cam-guide-ink) 32%,transparent);color:var(--cam-guide-ink);white-space:nowrap;font-size:calc(15.5 * var(--pt));padding:0 calc(10 * var(--pt));gap:calc(6 * var(--pt))}
.sn-cam-bottom .sn-softbtn{background:color-mix(in srgb,var(--cam-guide-ink) 15%,transparent);color:var(--cam-guide-ink)}
.sn-shutter-row{display:flex;justify-content:center;padding-top:calc(4 * var(--pt))}
.sn-shutter{position:relative;display:block;width:calc(72 * var(--pt));height:calc(72 * var(--pt));padding:0;border-radius:50%;border:calc(4 * var(--pt)) solid var(--cam-guide-ink);background:var(--cam-guide-ink);box-shadow:inset 0 0 0 calc(4 * var(--pt)) var(--island);cursor:pointer}
.sn-shutter:active{transform:scale(.94)}
.sn-camflash{position:absolute;z-index:40;inset:0;background:var(--cam-guide-ink);opacity:0;pointer-events:none}
.sn-camflash.is-on{animation:sn-flash 350ms ease-out}

/* ---- the drawn documents: a license and a payment card, front and back. Physical objects: the same in
   light and dark. 300 by 189 points; the review screen shows them smaller (scaled). ---- */
.sn-dd{position:relative;display:block;width:calc(300 * var(--pt));height:calc(189 * var(--pt));overflow:hidden;border-radius:calc(12 * var(--pt));background:var(--doc-paper);color:var(--doc-ink);
  font-size:calc(9.6 * var(--pt));line-height:1.25;letter-spacing:0;box-shadow:0 calc(8 * var(--pt)) calc(22 * var(--pt)) var(--cam-guide)}
.sn-dd-top{display:flex;justify-content:space-between;align-items:baseline;padding:calc(7 * var(--pt)) calc(12 * var(--pt));background:var(--doc-band);color:var(--cam-guide-ink);font-weight:800;letter-spacing:.06em}
.sn-dd-st{font-size:calc(12.5 * var(--pt))}
.sn-dd-body{display:flex;gap:calc(10 * var(--pt));padding:calc(8 * var(--pt)) calc(12 * var(--pt))}
.sn-dd-photo{flex:0 0 calc(64 * var(--pt));height:calc(82 * var(--pt));border-radius:calc(6 * var(--pt));background:linear-gradient(var(--doc-photo-a),var(--doc-photo-b))}
.sn-dd-f{display:grid;grid-template-columns:1fr 1fr;gap:calc(3 * var(--pt)) calc(10 * var(--pt));font-weight:700}
.sn-dd-f span{display:block;white-space:nowrap}
.sn-dd-f b{margin-right:calc(3 * var(--pt));color:var(--doc-label);font-weight:700}
.sn-dd-f .wide{grid-column:1 / -1}
.sn-dd-spec{position:absolute;right:calc(10 * var(--pt));bottom:calc(6 * var(--pt));font-size:calc(9 * var(--pt));font-weight:800;letter-spacing:.18em;color:var(--doc-2)}
.sn-dd--licb{background:var(--doc-paper)}
.sn-dd-bar{position:absolute;left:8%;right:8%;top:20%;bottom:28%;background:repeating-linear-gradient(90deg,var(--doc-bar) 0 calc(2 * var(--pt)),transparent calc(2 * var(--pt)) calc(3.5 * var(--pt)),var(--doc-bar) calc(3.5 * var(--pt)) calc(4.5 * var(--pt)),transparent calc(4.5 * var(--pt)) calc(7 * var(--pt)))}
.sn-dd--card,.sn-dd--cardb{background:linear-gradient(135deg,var(--stone-1),var(--stone-2));color:var(--oat-light);font-weight:600;border-radius:calc(14 * var(--pt))}
.sn-dd--card{padding:calc(14 * var(--pt)) calc(16 * var(--pt))}
.sn-dd-bank{font-size:calc(13 * var(--pt));letter-spacing:.04em}
.sn-dd-chip{width:calc(40 * var(--pt));height:calc(30 * var(--pt));margin-top:calc(18 * var(--pt));border-radius:calc(6 * var(--pt));background:linear-gradient(135deg,var(--doc-chip-a),var(--doc-chip-b))}
.sn-dd-num{margin-top:calc(14 * var(--pt));font:600 calc(19 * var(--pt))/1 var(--font-mono);letter-spacing:.06em}
.sn-dd-row{display:flex;justify-content:space-between;margin-top:calc(14 * var(--pt));font-size:calc(11.5 * var(--pt));letter-spacing:.05em}
.sn-dd-stripe{height:calc(34 * var(--pt));margin-top:calc(16 * var(--pt));background:var(--doc-bar)}
.sn-dd-sig{display:flex;align-items:center;justify-content:flex-end;height:calc(26 * var(--pt));margin:calc(12 * var(--pt)) calc(16 * var(--pt)) 0;padding-right:calc(10 * var(--pt));background:var(--doc-sig);color:var(--doc-ink);font:700 calc(13 * var(--pt))/1 var(--font-mono)}
.sn-dd-tel{margin:calc(12 * var(--pt)) calc(16 * var(--pt)) 0;font-size:calc(11 * var(--pt))}

/* ---- review: the photo stays pinned at the top; only "Found N details" and the list move.
   Keep what is right (a tick), leave out what is wrong (a cross). Save at the top and at the bottom. ---- */
.sn-scene--review{padding:0}
.sn-scene--review::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:calc(112 * var(--pt));background:linear-gradient(to bottom,var(--app-ground) 72%,transparent);pointer-events:none}
.sn-rv{position:absolute;inset:0;display:flex;flex-direction:column}
.sn-rv-pinned{flex:0 0 auto;padding:calc(112 * var(--pt)) calc(16 * var(--pt)) calc(10 * var(--pt));background:var(--app-ground);border-bottom:calc(1 * var(--pt)) solid var(--app-line);text-align:center}
.sn-photos{display:flex;gap:calc(10 * var(--pt));justify-content:center}
.sn-pbox{position:relative;margin:0 auto;width:calc(300 * var(--k) * var(--pt));height:calc(189 * var(--k) * var(--pt))}
.sn-pbox > .sn-dd{position:absolute;left:0;top:0;transform:scale(var(--k));transform-origin:0 0}
.sn-photo1{--k:.62}
.sn-photo2{--k:.4}
.sn-pcap{margin-top:calc(10 * var(--pt));text-align:center;font-size:calc(13.5 * var(--pt));line-height:1.3;color:var(--app-ink-2)}
.sn-pcap--ok{color:var(--app-glyph)}
.sn-miniB{position:relative;display:inline-flex;align-items:center;gap:calc(6 * var(--pt));min-height:calc(36 * var(--pt));margin-top:calc(8 * var(--pt));padding:0 calc(14 * var(--pt));border:0;border-radius:calc(18 * var(--pt));background:var(--app-soft);color:var(--app-glyph);font-size:calc(15 * var(--pt));font-weight:600;cursor:pointer}
.sn-miniB .sn-i{font-size:calc(18 * var(--pt))}
.sn-rv-list{flex:1 1 auto;min-height:0;overflow:hidden}
.sn-rv-in{position:relative;padding:calc(4 * var(--pt)) calc(16 * var(--pt)) calc(40 * var(--pt))}
.sn-rv-in.is-gliding{transition:transform 520ms var(--ease)}
.sn-found{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--pt));margin:calc(20 * var(--pt)) calc(4 * var(--pt)) calc(4 * var(--pt))}
.sn-found h2{font-size:calc(20 * var(--pt));font-weight:700;color:var(--app-title)}
.sn-found span{font-size:calc(14 * var(--pt));color:var(--app-ink-2)}
.sn-rvhelp{margin:0 calc(4 * var(--pt)) calc(10 * var(--pt));font-size:calc(14.5 * var(--pt));line-height:1.3;color:var(--app-ink-2)}
.sn-field{display:flex;align-items:center;gap:calc(10 * var(--pt));min-height:calc(64 * var(--pt));padding:calc(10 * var(--pt)) calc(14 * var(--pt))}
.sn-field + .sn-field{border-top:calc(1 * var(--pt)) solid var(--app-line)}
.sn-field .sn-grow{flex:1 1 auto;min-width:0}
.sn-field .sn-fl{display:block;font-size:calc(13.5 * var(--pt));color:var(--app-ink-2)}
.sn-field .sn-fval{display:block;min-height:calc(24 * var(--pt));padding-top:calc(2 * var(--pt));font-size:calc(17 * var(--pt));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-field .sn-fval.is-empty{color:var(--app-ink-2);opacity:.75}
.sn-field.is-off .sn-fval{text-decoration:line-through;color:var(--app-ink-2)}
.sn-field .sn-flagline{display:flex;align-items:flex-start;gap:calc(6 * var(--pt));margin-top:calc(4 * var(--pt));font-size:calc(14.5 * var(--pt));line-height:1.3;color:var(--app-warn)}
.sn-field .sn-flagline .sn-i{flex:0 0 auto;margin-top:calc(1 * var(--pt));font-size:calc(18 * var(--pt))}
.sn-from{display:block;margin-top:calc(2 * var(--pt));font-size:calc(13 * var(--pt));color:var(--app-ink-2)}
.sn-acc{display:flex;gap:calc(6 * var(--pt));flex:0 0 auto}
.sn-acc button{position:relative;display:grid;place-items:center;width:calc(34 * var(--pt));height:calc(34 * var(--pt));padding:0;border-radius:50%;border:calc(1.4 * var(--pt)) solid color-mix(in srgb,var(--app-ink-2) 60%,transparent);background:none;color:var(--app-ink);font-size:calc(17 * var(--pt));cursor:pointer}
.sn-acc button::after{content:"";position:absolute;inset:-6px -3px}
.sn-acc .sn-yes[aria-pressed="true"]{background:var(--app-btn);border-color:var(--app-btn);color:var(--app-on-btn)}
.sn-acc .sn-no[aria-pressed="true"]{background:var(--app-danger);border-color:var(--app-danger);color:var(--app-ground)}
.sn-rvswitch{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--pt));padding:calc(12 * var(--pt)) calc(16 * var(--pt));margin-top:calc(14 * var(--pt));font-size:calc(17 * var(--pt))}
.sn-rvsave{margin-top:calc(16 * var(--pt))}
.sn-rv-empty{padding:calc(12 * var(--pt)) calc(4 * var(--pt)) 0}

/* ---- a call sheet (tapping a saved customer-service number), a toast, and "Reading your photo..." ---- */
.sn-callsheet{position:absolute;left:calc(10 * var(--pt));right:calc(10 * var(--pt));bottom:calc(20 * var(--pt));display:grid;gap:calc(8 * var(--pt))}
.sn-ov:not([hidden]) .sn-callsheet{animation:sn-up 250ms var(--ease) backwards}
.sn-callgrp{overflow:hidden;border-radius:calc(16 * var(--pt));background:var(--app-surface)}
.sn-callgrp p{padding:calc(12 * var(--pt));text-align:center;font-size:calc(13.5 * var(--pt));color:var(--app-ink-2);border-bottom:calc(1 * var(--pt)) solid var(--app-line)}
.sn-callbtn{position:relative;display:block;width:100%;min-height:calc(56 * var(--pt));border:0;background:var(--app-surface);color:var(--app-glyph);font-size:calc(19 * var(--pt));cursor:pointer}
.sn-callbtn--cancel{border-radius:calc(16 * var(--pt));font-weight:600}
.sn-toast{position:absolute;z-index:45;left:50%;bottom:calc(30 * var(--pt));width:max-content;max-width:calc(100% - 32 * var(--pt));transform:translateX(-50%);display:flex;align-items:center;gap:calc(8 * var(--pt));padding:calc(10 * var(--pt)) calc(16 * var(--pt));border-radius:calc(22 * var(--pt));
  background:var(--app-glass);box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),var(--shadow);font-size:calc(15 * var(--pt));font-weight:600;line-height:1.25;color:var(--app-ink)}
.sn-toast:not([hidden]){animation:sn-fade 200ms var(--ease) backwards}
.sn-canvas.has-dock .sn-toast{bottom:calc(104 * var(--pt))}      /* above the floating search bar, where there is one */
.sn-toast .sn-i{color:var(--app-glyph)}
.sn-reading{position:absolute;z-index:44;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--island) 38%,transparent);color:var(--cam-guide-ink);font-size:calc(17 * var(--pt));font-weight:600}
.sn-reading span{padding:calc(12 * var(--pt)) calc(18 * var(--pt));border-radius:calc(16 * var(--pt));background:var(--cam-guide)}
.sn-tel{position:relative;border-radius:calc(8 * var(--pt));display:inline-flex;align-items:center;gap:calc(6 * var(--pt));padding:0;border:0;background:none;color:var(--app-glyph);font-size:calc(17 * var(--pt));font-weight:600;cursor:pointer}
.sn-tel .sn-i{font-size:calc(19 * var(--pt))}
.sn-tel::after{content:"";position:absolute;inset:-10px -6px}

/* ---- the reminder banner, the Face ID island, the fingertip, the ring on the thing to tap ---- */
.sn-banner{--rx:1.02;--ry:1.12;position:absolute;z-index:7;left:calc(9 * var(--pt));right:calc(9 * var(--pt));top:calc(59 * var(--pt));display:flex;align-items:center;gap:calc(14 * var(--pt));min-height:calc(66 * var(--pt));padding:calc(12 * var(--pt)) calc(18 * var(--pt)) calc(12 * var(--pt)) calc(14 * var(--pt));
  border:0;border-radius:calc(26 * var(--pt));background:var(--app-glass);box-shadow:0 0 0 calc(.5 * var(--pt)) var(--app-line),var(--shadow-lg);color:var(--app-ink);font-size:inherit;text-align:left;cursor:pointer}
.sn-banner .sn-rt{gap:0}
.sn-banner .sn-name{display:flex;justify-content:space-between;gap:calc(8 * var(--pt));font-size:calc(15 * var(--pt));font-weight:600;white-space:nowrap}
.sn-now{font-weight:400;color:var(--app-ink-2)}
.sn-banner .sn-meta{font-size:calc(15 * var(--pt));color:var(--app-ink);white-space:normal}
.sn-banner.is-drop{animation:sn-drop 350ms var(--ease-spring) backwards}
.sn-island{position:absolute;z-index:47;left:50%;top:calc(14 * var(--pt));display:grid;place-items:center;width:calc(126 * var(--pt));height:calc(126 * var(--pt));margin-left:calc(-63 * var(--pt));border-radius:calc(19 * var(--pt)) calc(19 * var(--pt)) calc(40 * var(--pt)) calc(40 * var(--pt));
  background:var(--island);color:var(--l-surface);font-size:calc(56 * var(--pt));opacity:0;transform:scaleY(.294);transform-origin:50% 0;
  transition:opacity 180ms var(--ease),transform 260ms var(--ease);pointer-events:none}
.sn-island.is-on{opacity:1;transform:none}
.sn-island .sn-i{grid-area:1/1;stroke-width:1.6;transition:opacity 120ms var(--ease)}
.sn-island .sn-tick{--d:22;opacity:0;stroke-width:2}
.sn-island.is-on .sn-fid path{stroke-dasharray:14;animation:sn-draw 250ms var(--ease) backwards}
.sn-island.is-on .sn-fid-f path{animation-delay:250ms}
.sn-island.is-ok .sn-fid{opacity:0}
.sn-island.is-ok .sn-tick{opacity:1;stroke-dasharray:22;animation:sn-draw 200ms var(--ease) backwards}
/* the fingertip is a RING, so the word it presses can still be read through it */
.sn-finger{position:absolute;z-index:9;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:3px solid var(--app-ink);box-shadow:0 0 0 2px var(--app-ground),inset 0 0 0 2px var(--app-ground);
  opacity:0;transform:scale(1.3);transition:opacity 180ms var(--ease),transform 160ms var(--ease);pointer-events:none}
.sn-finger.is-on{opacity:.55;transform:none}
.sn-finger.is-down{opacity:.8;transform:scale(.86)}
.sn-target::before{content:"";position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:inherit;opacity:0;pointer-events:none}
/* the ring on the thing to tap pulses twice (under five seconds) each time the target changes, then rests */
html.motion .sn-demo.is-visible .sn-target::before{animation:sn-ring 2.4s var(--ease) 2}

/* ---- scenes arriving and leaving ---- */
.sn-scene.is-fading{z-index:3;animation:sn-fade 230ms var(--ease) backwards}
.sn-scene.is-in-right{z-index:3;animation:sn-in-right 320ms var(--ease) backwards}
.sn-scene.is-out-right{z-index:3;animation:sn-out-right 290ms var(--ease-in) forwards}
.sn-scene.is-leaving{z-index:3;animation:sn-leave 320ms var(--ease-in) forwards}
.sn-scene.is-dropping{z-index:3;animation:sn-dropin 320ms var(--ease) backwards}
.sn-scene.is-sheet{z-index:3;animation:sn-dim 240ms var(--ease) backwards}
.sn-scene.is-sheet .sn-sheet{animation:sn-up 360ms var(--ease) backwards}
.sn-scene.is-sheet-out{z-index:3;animation:sn-undim 300ms var(--ease-in) forwards}
.sn-scene.is-sheet-out .sn-sheet{animation:sn-down 300ms var(--ease-in) forwards}
.sn-scene.is-rising .sn-exp,.sn-scene.is-rising .sn-cat,.sn-scene.is-rising .sn-title{animation:sn-rise 320ms var(--ease) backwards}
.sn-scene.is-rising .sn-cat:nth-child(1){animation-delay:60ms}
.sn-scene.is-rising .sn-cat:nth-child(2){animation-delay:100ms}
.sn-scene.is-rising .sn-cat:nth-child(3){animation-delay:140ms}
.sn-scene.is-rising .sn-cat:nth-child(4){animation-delay:180ms}
.sn-scene.is-rising .sn-cat:nth-child(5){animation-delay:220ms}
.sn-scene.is-rising .sn-cat:nth-child(6){animation-delay:260ms}
.sn-appicon.is-open{animation:sn-pop 320ms var(--ease-spring)}
.sn-row.is-new{animation:sn-new 420ms var(--ease-spring) 200ms backwards}
.sn-row.is-new::after{content:"";position:absolute;z-index:-1;inset:2px;border-radius:calc(14 * var(--pt));background:var(--app-soft);opacity:0;animation:sn-pulse 1200ms var(--ease) 500ms}
.sn-expline.is-hot::after{content:"";position:absolute;inset:-4px -8px 2px;border-radius:9px;background:var(--app-tile-line);opacity:0;animation:sn-pulse 1100ms var(--ease) 900ms 2;pointer-events:none}

@keyframes sn-fade{from{opacity:0}}
@keyframes sn-in-right{from{transform:translateX(100%)}}
@keyframes sn-out-right{to{transform:translateX(100%)}}
@keyframes sn-leave{to{transform:translateY(-10%);opacity:0}}
@keyframes sn-dropin{from{transform:translateY(-10%);opacity:0}}
@keyframes sn-rise{from{transform:translateY(14px);opacity:0}}
@keyframes sn-up{from{transform:translateY(102%)}}
@keyframes sn-down{to{transform:translateY(102%)}}
@keyframes sn-dim{from{background-color:transparent}}
@keyframes sn-undim{to{background-color:transparent}}
@keyframes sn-drop{from{transform:translateY(-130%)}}
@keyframes sn-new{from{transform:translateY(-14px);opacity:0}}
@keyframes sn-pulse{0%{opacity:0}30%{opacity:.45}100%{opacity:0}}
@keyframes sn-draw{from{stroke-dashoffset:var(--d,14)}}
@keyframes sn-ring{0%{opacity:.8;transform:none}60%,100%{opacity:0;transform:scale(var(--rx,1.035),var(--ry,1.16))}}
@keyframes sn-pop{40%{transform:scale(.92)}}
@keyframes sn-pop-in{from{opacity:0;transform:scale(.6)}}
@keyframes sn-flash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}

/* ---- "What we see" ---- */
.sn-demo .is-noise{color:var(--app-ink-2);font-size:.92em}
.sn-demo[data-view="we"] .sn-fk,.sn-demo[data-view="we"] .sn-k{opacity:.6}        /* field names step back, still readable (about 3:1) */
.sn-demo[data-view="we"] .sn-fv--dots{letter-spacing:0}
.sn-demo[data-view="we"] .sn-warn,.sn-demo[data-view="we"] .sn-danger{color:var(--app-ink-2)}
/* a count is something we cannot see at all: a blank, never a stray character that could pass for a number */
.sn-demo[data-view="we"] .sn-cat-n{min-width:calc(26 * var(--pt));min-height:calc(26 * var(--pt));border-radius:calc(7 * var(--pt));background:var(--app-surface-2)}
.sn-demo[data-view="we"] .sn-cat-n .is-noise{color:transparent}
.sn-demo[data-view="we"] .sn-meta .sn-i,.sn-demo[data-view="we"] .sn-tel .sn-i{display:none}
.sn-demo[data-view="we"] .sn-tel{font-weight:400}
.sn-demo[data-view="we"] .sn-expline,.sn-demo[data-view="we"] .sn-clearrem,.sn-demo[data-view="we"] .sn-flag,.sn-demo[data-view="we"] .sn-showall,
.sn-demo[data-view="we"] .sn-health > *,.sn-demo[data-view="we"] .sn-cat--warn{visibility:hidden}   /* what the app works out from the contents: we cannot */
.sn-nokinds[data-view="we"] .sn-row .sn-ico,.sn-nokinds[data-view="we"] .sn-head .sn-ico{border-color:transparent;background:var(--app-surface-2)}
.sn-nokinds[data-view="we"] .sn-row .sn-ico .sn-i,.sn-nokinds[data-view="we"] .sn-head .sn-ico .sn-i{opacity:0}

/* ============================ under the phone (the website's look) ============================ */
.sn-caption{display:flex;align-items:center;justify-content:center;min-height:48px;margin:16px 0 0;font-size:17px;line-height:1.4;color:var(--ink)}
.sn-cap{display:block;text-wrap:balance}
/* the paid plan's name, after the caption of a moment that shows a paid feature */
.sn-cap-tag{display:inline-block;margin-left:2px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);
  font-size:12px;font-weight:650;line-height:1.2;letter-spacing:0;white-space:nowrap;vertical-align:2px}
/* The four moments, drawn the way the app draws its own bar of categories (the chips over a
   list: a pill outline, and the chosen one filled soft with a moss edge and moss words).
   Tapping one goes straight there. Everything else is done by tapping the phone, as in the app. */
.sn-moments{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px auto 0}
.sn-moment{position:relative;min-width:0;height:36px;padding:0 15px;border:1.3px solid var(--line-2);border-radius:var(--radius-pill);background:transparent;
  color:var(--muted);font:600 15px/1 var(--font-sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.sn-moment::after{content:"";position:absolute;inset:-5px -4px}          /* a 46 px place to tap */
.sn-moment[aria-pressed="true"]{border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink)}
@media (hover:hover){ .sn-moment:hover{color:var(--ink);border-color:var(--ink-2)} .sn-moment[aria-pressed="true"]:hover{color:var(--accent-ink);border-color:var(--accent-ink)} }
@media (max-width:359px){ .sn-moments{gap:6px} .sn-moment{padding:0 12px;font-size:14.5px} }
.sn-view{min-height:50px;margin-top:16px}
.sn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;min-height:44px;margin-top:4px}
.sn-label{font-size:14px;color:var(--muted);white-space:nowrap}
.sn-pause,.sn-full{display:inline-flex;align-items:center;min-height:44px;padding:0 3px;border:0;background:none;color:var(--ink-2);
  font:600 14px/1 var(--font-sans);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;cursor:pointer}
.sn-pause:hover,.sn-full:hover{color:var(--ink);text-decoration-color:currentColor}
html:not(.motion) .sn-pause{display:none}
.sn-demo[data-variant="inline"] .sn-label{flex:0 0 100%;line-height:22px}
@media (max-width:899.98px){ .sn-full{display:none} }   /* on a phone the demo's own page is no bigger, so the link is not offered */

/* ============================ demo.html ============================ */
.demo-page{padding:32px 0 64px}
.demo-page h1{font-size:clamp(32px,5vw,54px)}
.demo-page .sn-demo{margin-top:28px}
.demo-page .store-row{margin-top:12px}