/* StampName landing page: scripted UI scenes (motion.js). Rebuilds the real app UI in HTML/CSS.
   Colours mirror Sources/StampUI FieldPalette (light/dark) and DesignTokens. Scenes are drawn at a fixed
   design size and scaled with a transform, so they stay vector-crisp at any width. */
.scene{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--shadow);min-height:220px;isolation:isolate;background:transparent}
.scene noscript{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--ink2);font-size:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.hero .scene{margin-top:48px;text-align:left}
.scene.tall{margin-top:36px}

.stage{position:absolute;left:0;top:0;transform-origin:0 0;text-align:left;
  --w-bg:#fff;--w-chrome:#f2f2f4;--w-line:#e3e3e6;--w-fill:#ececef;--w-ink:#1d1d1f;--w-ink2:#6e6e73;--w-sel:#e6effd;--w-grey:#d4d4d8;
  --acc:#0a63e0;--acc-ink:#fff;--ok:#1e7b34;--amber:#b86b00;--amber-fill:rgba(255,149,0,.14);--ok-fill:rgba(30,123,52,.1);
  --fd:#0f7b8a;--fv:#b0337a;--fn:#6a4cc4;--fa:#2e7d32;--fp:#8b5a2b;--fg:#8e2da0;--lt-ink:#fff;
  --pl-d:#0f7b8a;--pl-v:#b0337a;--pl-n:#6a4cc4;--pl-a:#2e7d32;
  font:13px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;color:var(--w-ink);-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){.stage{
  --w-bg:#1e1e1e;--w-chrome:#2a2a2a;--w-line:#3a3a3d;--w-fill:#3a3a3d;--w-ink:#f2f2f4;--w-ink2:#a1a1a8;--w-sel:#1d3350;--w-grey:#58585e;
  --acc:#3d8bff;--ok:#4cc46a;--amber:#ffb340;--amber-fill:rgba(255,179,64,.16);--ok-fill:rgba(76,196,106,.14);
  --fd:#4fc3d1;--fv:#e57bb8;--fn:#a894f0;--fa:#6bc170;--fp:#c99466;--fg:#d58ae3;--lt-ink:#12161a}}
.stage *{box-sizing:border-box;margin:0;padding:0}
.stage.ff *{transition:none!important;animation:none!important}
.mono,.tk,.sp,.ext{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mut{color:var(--w-ink2)}

.f-d{--fc:var(--fd)}.f-v{--fc:var(--fv)}.f-n{--fc:var(--fn)}.f-a{--fc:var(--fa)}.f-p{--fc:var(--fp)}.f-g{--fc:var(--fg)}
.lt{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;background:var(--fc);color:var(--lt-ink);font:700 11px/1 -apple-system,sans-serif;font-style:normal}
.tk{display:inline-block;font-size:12.5px;font-weight:500;border-bottom:2px solid var(--fc);padding:1px 0;transition:color .3s,border-color .3s,background .3s}
.tk.empty{color:transparent;border-bottom-color:var(--w-grey);border-bottom-style:dashed}
.tk.amber{background:var(--amber-fill);border-bottom-color:var(--amber)}
.tk.pop{animation:pop .4s ease-out}
.tk.enter{animation:tkin .45s ease-out}
.tk.leave{opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.sp,.ext{font-size:12.5px;color:var(--w-ink2)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes tkin{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}

.win{position:absolute;inset:0;background:var(--w-bg);border:1px solid var(--w-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.bar{height:36px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--w-chrome);border-bottom:1px solid var(--w-line)}
.bar i{width:11px;height:11px;border-radius:50%}
.bar i:nth-child(1){background:#ff5f57}.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar b{margin-left:8px;font-weight:600;font-size:13px}
.btn-a,.btn-g{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 -apple-system,sans-serif;padding:7px 12px;border-radius:7px;white-space:nowrap}
.btn-a{background:var(--acc);color:var(--acc-ink)}.btn-g{background:var(--w-fill);color:var(--w-ink)}
.btn-a.dis,.btn-g.dis{opacity:.45}
.kbd{font-size:10px;color:var(--w-ink2);background:var(--w-line);padding:1px 5px;border-radius:4px}
.btn-a .kbd{background:rgba(255,255,255,.25);color:#fff}
.pressed{transform:scale(.95)}
.btn-a,.btn-g,.cnd,.tg,.seg-o{transition:transform .12s,opacity .3s,background .2s,box-shadow .2s}
.pulsing{animation:btnpulse 1.4s ease-out 2}
@keyframes btnpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}

.cursor{position:absolute;left:0;top:0;width:22px;height:22px;margin:-2px 0 0 -2px;z-index:40;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));opacity:0}
.cursor.on{opacity:1}
.ripple{position:absolute;z-index:39;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--acc);pointer-events:none}
.fly{position:absolute;z-index:35;font:600 12px ui-monospace,Menlo,monospace;padding:2px 6px;border-radius:5px;background:var(--fc);color:var(--lt-ink);white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* hero ---------------------------------------------------------------- */
.tb{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--w-line);flex:none}
.tb .pick{background:var(--w-fill);padding:6px 11px;border-radius:7px;font-weight:500}
.legend{display:flex;gap:12px;margin-left:6px}.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--w-ink2);font-size:12px}
.count{margin-left:auto;color:var(--w-ink2);font-size:12.5px}.count b{color:var(--ok);font-variant-numeric:tabular-nums}
.rows{flex:1;padding:6px 0}
.row{display:grid;grid-template-columns:250px 1fr;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--w-line);transition:background .4s}
.row.stamped{background:var(--ok-fill)}
.old{display:flex;align-items:center;gap:9px;transition:opacity .4s}.old svg{width:16px;height:16px;flex:none;color:var(--w-ink2)}
.row.stamped .old{opacity:.5}.row.stamped .old span{text-decoration:line-through}
.new{display:flex;align-items:center;gap:10px;min-height:22px;position:relative}
.new .ph{position:absolute;color:var(--w-ink2);font-size:12px;font-style:italic;transition:opacity .2s}
.row.stamped .ph{opacity:0}
.nm{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:3px}
.row .nm>*{opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s}
.row.stamped .nm>*{opacity:1;transform:none}
.okc{margin-left:auto;width:18px;height:18px;border-radius:50%;flex:none;position:relative;opacity:0;transition:opacity .3s .5s;background:var(--ok)}
.okc::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--w-bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.row.stamped .okc{opacity:1}
.note{padding:12px 20px;color:var(--w-ink2);font-size:12px;border-top:1px solid var(--w-line);flex:none}
.stamp{position:absolute;left:0;top:0;width:40px;height:44px;z-index:30;color:var(--acc);opacity:0;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.stamp.on{opacity:1}
.ink{position:absolute;z-index:29;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--acc);pointer-events:none}
.stage.compact .row{grid-template-columns:1fr;gap:6px;padding:12px 16px}
.stage.compact .tb{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}.stage.compact .legend{display:none}
.stage.compact .nm{max-width:96%}

/* review -------------------------------------------------------------- */
.rtop{padding:11px 18px 10px;border-bottom:1px solid var(--w-line);flex:none;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.rtop h5{font-size:14px;font-weight:600}.rtop h5 small{display:block;font-size:11px;font-weight:400;color:var(--w-ink2)}
.rtop .btns{display:flex;gap:7px;align-items:center}
.prog{grid-column:1/-1;display:flex;gap:4px;align-items:center}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--w-grey);opacity:.6;transition:background .4s,opacity .4s}
.prog i.on{background:var(--ok);opacity:1}.prog i.cur{background:var(--acc);opacity:1}
.flags{font-size:11px;color:var(--w-ink2);white-space:nowrap;margin-left:10px;transition:color .3s}
.flags.amber{color:var(--amber)}.flags.ok{color:var(--ok)}
.cols{flex:1;min-height:0;display:grid;grid-template-columns:270px 1fr 1.05fr;grid-template-rows:auto 1fr;grid-template-areas:"A C D" "B C D"}
.cA{grid-area:A;padding:10px 12px;border-right:1px solid var(--w-line);border-bottom:1px solid var(--w-line)}
.cB{grid-area:B;padding:12px;border-right:1px solid var(--w-line);min-height:0}
.cC{grid-area:C;padding:14px;border-right:1px solid var(--w-line);display:flex;flex-direction:column;gap:12px}
.cD{grid-area:D;padding:14px;background:var(--w-fill);display:flex;flex-direction:column;min-width:0;min-height:0}
.cap{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--w-ink2);margin-bottom:6px}
.fl{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:12px}
.fl.sel{background:var(--w-sel);outline:1.5px solid var(--acc)}
.fl .rd{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--w-grey);flex:none}.fl.sel .rd{background:var(--acc);border-color:var(--acc)}
.pn{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px;padding:2px 0 10px}
.fr{display:flex;align-items:center;gap:9px;padding:7px 8px;border-left:3px solid var(--fc);margin-bottom:4px;border-radius:0 6px 6px 0;transition:background .3s}
.fr>div{flex:1;min-width:0}.fr small{display:block;font-size:10px;color:var(--w-ink2)}
.fr .val{font-size:12.5px;transition:color .3s}.fr .val.empty{color:transparent}
.fr.amber{background:var(--amber-fill)}
.st{width:14px;height:14px;flex:none;position:relative;opacity:0;transition:opacity .3s}
.st.okc::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.st.flag::after{content:"";position:absolute;left:2px;top:0;width:11px;height:9px;background:var(--amber);clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%)}
.st.ok,.st.flag{opacity:1}
.dcd{border:2px solid var(--acc);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--w-bg)}
.dcd .hd{display:flex;align-items:center;gap:8px;font-weight:600}.dcd .hd small{font-weight:400;color:var(--w-ink2);font-size:11px}
.big{font-size:19px;font-weight:500;min-height:26px;transition:color .3s}.big.empty{color:var(--w-ink2)}
.cnd{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1.5px solid var(--w-line);border-radius:8px;font-size:12.5px}
.cnd .n{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;background:var(--w-grey);color:var(--w-bg);font-size:10.5px;font-style:normal;font-weight:700}
.cnd.sel{border-color:var(--acc)}.cnd.sel .n{background:var(--acc)}
.cbtns{display:flex;gap:7px}
.stat{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--w-ink2)}
.page{background:#fff;color:#14171a;border-radius:2px;box-shadow:0 1px 8px rgba(0,0,0,.28);padding:20px 18px 24px;font-size:10.5px;line-height:1.55;flex:1;min-height:0;overflow:hidden}
.page h4{font-size:15px;font-weight:700;display:inline-block}
.page .addr{font-size:7.5px;color:#4b5258;margin:1px 0 0}
.page .inv{font-size:16px;font-weight:700;margin:15px 0 8px}
.page .ln{display:flex;justify-content:space-between;padding:1px 0}
.page .tot{font-weight:700;border-top:1px solid #dfe3e6;margin-top:6px;padding-top:6px}
.page .gap{height:9px}
.pv{position:relative;display:inline-block;padding:0 2px;margin:0 -2px;border-radius:2px;transition:outline-color .3s,background .3s}
.pv[data-k=D]{--pc:var(--pl-d)}.pv[data-k=V]{--pc:var(--pl-v)}.pv[data-k=N]{--pc:var(--pl-n)}.pv[data-k=A]{--pc:var(--pl-a)}
.pv.hl{outline:2px solid var(--pc);background:color-mix(in srgb,var(--pc) 20%,transparent)}
.pv.hl::before{content:attr(data-l);position:absolute;left:-3px;top:-13px;min-width:12px;height:12px;border-radius:3px;background:var(--pc);color:#fff;font:700 8.5px/12px -apple-system,sans-serif;text-align:center}
.pv.cand{outline:1.5px dashed color-mix(in srgb,var(--pc) 70%,transparent);background:transparent}
.pv.cand::before{opacity:.55}
.pv.pulse{animation:boxpulse .8s ease-out}
@keyframes boxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pc) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.stage.compact .cols{grid-template-columns:1fr 1fr;grid-template-areas:"B D" "C D"}
.stage.compact .cA{display:none}
.stage.compact .cB{border-bottom:1px solid var(--w-line);padding:10px}.stage.compact .cC{padding:10px;gap:9px}.stage.compact .cD{padding:10px}
.stage.compact .btns .btn-g,.stage.compact .flags{display:none}
.stage.compact .page{font-size:9.5px;padding:14px 12px}
.stage.compact .big{font-size:16px}

/* privacy ------------------------------------------------------------- */
.pvs{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:30px 28px 70px;background:var(--w-bg);border:1px solid var(--w-line);border-radius:14px}
.dcard{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--w-line);border-radius:10px;background:var(--w-chrome);font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}
.dcard svg{width:20px;height:20px;color:var(--w-ink2)}
.node{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.node .lab{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--w-ink2)}
.mini{position:relative;inset:auto;width:216px;height:172px;border-radius:12px}
.mini .in{padding:14px;display:flex;flex-direction:column;gap:8px}.mini .in small{color:var(--w-ink2);font-size:11px}
.cloud{color:var(--w-grey);transition:opacity .4s}.cloud svg{width:76px;height:52px}
.link{position:relative;flex:1;display:flex;align-items:center;min-width:60px}
.link .s1,.link .s2{flex:1;height:2px}.link .s1{background:var(--ok)}
.link .s2{background:repeating-linear-gradient(90deg,var(--w-grey) 0 6px,transparent 6px 12px)}
.cutm{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--w-grey);background:var(--w-bg);color:var(--w-ink2);font-size:13px;font-weight:700;margin:0 4px;transition:border-color .2s,color .2s,transform .2s}
.cutm.hit{border-color:var(--amber);color:var(--amber);transform:scale(1.25)}
.pkt{position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:4px;background:var(--fd);opacity:0}
.pill{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);opacity:0;transition:opacity .5s,transform .5s;background:var(--ok-fill);color:var(--ok);font-weight:600;font-size:13px;padding:8px 14px;border-radius:99px;white-space:nowrap}
.pill.on{opacity:1;transform:translateX(-50%)}
.meter{position:absolute;left:16px;bottom:12px;font-size:11px;color:var(--w-ink2)}.meter b{color:var(--w-ink);font-variant-numeric:tabular-nums}
.stage.compact .pvs{flex-direction:column;padding:16px 20px 76px}
.stage.compact .link{flex-direction:column;min-height:78px;min-width:0}
.stage.compact .link .s1,.stage.compact .link .s2{width:2px;height:auto}
.stage.compact .link .s2{background:repeating-linear-gradient(180deg,var(--w-grey) 0 6px,transparent 6px 12px)}
.stage.compact .pkt{left:50%;top:0;margin:0 0 0 -7px}
.stage.compact .mini{width:250px;height:150px}.stage.compact .mini .tk,.stage.compact .mini .sp,.stage.compact .mini .ext{font-size:11.5px}

/* undo ---------------------------------------------------------------- */
.ubody{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px}
.disk{border:1px solid var(--w-line);border-radius:12px;padding:14px;background:var(--w-chrome);display:flex;flex-direction:column;gap:12px}
.file{display:flex;align-items:flex-start;gap:12px}.file svg{width:30px;height:30px;flex:none;color:var(--w-ink2)}
.fn{font-size:13px;word-break:break-all;transition:opacity .2s;font-family:ui-monospace,Menlo,monospace}
.fn.swap{opacity:0}
.steps2{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:2px}
.steps2 li{display:flex;gap:8px;font-size:12px;color:var(--w-ink2);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.steps2 li.on{opacity:1;transform:none}.steps2 li::before{content:"";width:5px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 5px 0 3px;flex:none}
.hist{display:flex;flex-direction:column;gap:12px}
.hist h6{font-size:13px;font-weight:600}
.hrow{border:1px solid var(--w-line);border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:8px;opacity:.25;transition:opacity .4s}
.hrow.on{opacity:1}
.hrow .arrow{color:var(--w-ink2);font-size:11px}
.hrow .l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cst{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--ok-fill);color:var(--ok)}
.cst.rest{background:var(--w-fill);color:var(--w-ink2)}
.free{font-size:11px;color:var(--w-ink2)}
.stage.compact .ubody{grid-template-columns:1fr;gap:12px;padding:14px}

/* focus --------------------------------------------------------------- */
.frow{display:grid;grid-template-columns:22px 130px 1fr auto;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--w-line);transition:background .3s}
.frow.look{background:var(--amber-fill)}.frow.focus{background:var(--w-sel);outline:2px solid var(--acc);outline-offset:-2px}
.ind{width:18px;height:18px;border-radius:50%;position:relative;border:2px solid var(--amber);transition:all .3s}
.frow.rdy .ind{background:var(--ok);border-color:var(--ok)}
.frow.rdy .ind::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--w-bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fval{display:flex;align-items:center;gap:8px;font-size:12.5px}
.facc{opacity:0;transition:opacity .25s,transform .12s}.frow.focus .facc{opacity:1}
.fhead{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--w-line);flex:none}
.fhead h5{font-size:14px;font-weight:600}.fhead .c{font-size:12px;color:var(--w-ink2);margin-left:6px}
.fhead .c b{font-variant-numeric:tabular-nums}
.fhead .sp2{flex:1}
.ffoot{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--w-line);flex:none}
.ffoot .prog{flex:1}
.stage.compact .frow{grid-template-columns:22px 1fr auto}.stage.compact .frow .old2{display:none}

/* format -------------------------------------------------------------- */
.fbody{flex:1;padding:18px;display:flex;flex-direction:column;gap:16px}
.prev{border:1px solid var(--w-line);border-radius:12px;padding:14px;background:var(--w-chrome)}
.prev .pn{padding:0;font-size:14px;min-height:30px;align-items:center}.prev .tk,.prev .sp,.prev .ext{font-size:14px}
.tgs{display:flex;flex-wrap:wrap;gap:8px}
.tg{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1.5px solid var(--w-line);font-size:12.5px;color:var(--w-ink2)}
.tg.on{border-color:var(--fc);color:var(--w-ink);background:color-mix(in srgb,var(--fc) 12%,transparent)}
.sgm{display:inline-flex;border:1px solid var(--w-line);border-radius:8px;overflow:hidden}
.seg-o{padding:7px 14px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace;color:var(--w-ink2)}
.seg-o+.seg-o{border-left:1px solid var(--w-line)}.seg-o.on{background:var(--acc);color:var(--acc-ink)}
.lbl{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--w-ink2)}
.smp{display:flex;flex-direction:column;gap:7px}.smp .pn{padding:3px 0;font-size:12.5px}
.stage.compact .tgs{gap:6px}.stage.compact .tg{padding:6px 9px}
.stage.compact .smp .tk,.stage.compact .smp .sp,.stage.compact .smp .ext{font-size:11px}

/* feature layout: the review scene is full width so all three columns stay readable */
.feature.stack{grid-template-columns:1fr;gap:28px}
.feature.stack .top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.feature.stack .top{grid-template-columns:1fr;gap:16px}}
@media (prefers-reduced-motion:reduce){.scene .stage *{transition:none!important;animation:none!important}}