/* TapToOpenInvites invite engine. Every color comes from the --t-* variables a theme sets on .tto-screen. */
.tto-screen{position:relative;overflow:hidden;background:var(--t-bg);color:var(--t-ink);font-family:var(--t-body);font-size:18px;line-height:1.5;-webkit-text-size-adjust:100%}
.tto-screen *{box-sizing:border-box}
.tto-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.tto-scr{position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tto-scr::-webkit-scrollbar{display:none}
.tto-col{max-width:460px;margin:0 auto}

.tto-sec{padding:36px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.tto-hero{padding-top:62px}
.tto-script{font-family:var(--t-script);font-size:36px;line-height:1.15;margin:0;color:var(--t-ink);text-wrap:balance;max-width:100%;overflow-wrap:anywhere}
.tto-sub{font-family:var(--t-script);font-size:25px;margin:-4px 0 0;color:var(--t-ink)}
.tto-big{font-family:var(--t-display);font-weight:var(--t-dw);letter-spacing:.06em;line-height:.95;margin:2px 0 0;color:var(--t-ink);text-wrap:balance;overflow-wrap:anywhere}
.tto-label{font-family:var(--t-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--t-soft);margin:0;display:flex;align-items:center;justify-content:center;gap:10px}
.tto-label.rule::before,.tto-label.rule::after{content:"";width:26px;height:1px;background:var(--t-accent);flex:none}
.tto-when{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%;max-width:280px;margin-top:8px;font-family:var(--t-label);color:var(--t-soft)}
.tto-when .side{border-top:1px solid var(--t-accent);border-bottom:1px solid var(--t-accent);padding-block:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tto-when .day{font-family:var(--t-display);font-size:56px;line-height:.9;color:var(--t-ink);font-variant-numeric:lining-nums}
.tto-place{font-family:var(--t-display);font-size:21px;font-weight:600;margin:6px 0 0;color:var(--t-ink);overflow-wrap:anywhere}
.tto-addr{font-style:italic;font-size:17px;margin:0;color:var(--t-soft);overflow-wrap:anywhere}
.tto-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.tto-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:999px;font:600 11px var(--t-label);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;
  background:var(--t-btn);color:var(--t-btnInk)}
.tto-btn.ghost{background:transparent;color:var(--t-ink);box-shadow:inset 0 0 0 1px var(--t-ink)}
.tto-btn:disabled{opacity:.6;cursor:default}
.tto-btn:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.tto-photo{width:100%;max-width:270px;aspect-ratio:4/5;border-radius:999px 999px 8px 8px;overflow:hidden;
  box-shadow:0 0 0 1px var(--t-ink),0 0 0 6px var(--t-bg),0 0 0 7px var(--t-accent)}
.tto-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tto-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--t-accent) 22%,var(--t-bg)),color-mix(in srgb,var(--t-ink) 10%,var(--t-bg)));color:var(--t-soft);font:11px var(--t-label);letter-spacing:.18em;text-transform:uppercase}
.tto-ph svg{width:40px;height:40px;stroke:var(--t-soft)}
.tto-cap{font-style:italic;font-size:17px;margin:2px 0 0;color:var(--t-soft);overflow-wrap:anywhere}
.tto-count{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;max-width:300px}
.tto-count div{display:flex;flex-direction:column;align-items:center}
.tto-count b{font-family:var(--t-display);font-weight:500;font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums lining-nums;color:var(--t-ink)}
.tto-count span{font:10px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft)}
.tto-msg{font-size:19px;font-style:italic;line-height:1.45;margin:0;max-width:28ch;color:var(--t-ink);overflow-wrap:anywhere;white-space:pre-line}
.tto-frame{border:1px solid var(--t-ink);border-radius:999px 999px 6px 6px;padding:48px 20px 26px;width:100%;max-width:310px;
  box-shadow:0 0 0 5px var(--t-bg),0 0 0 6px var(--t-accent);display:flex;flex-direction:column;align-items:center;gap:10px}
.tto-form{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left}
.tto-form input,.tto-form select{font:16px var(--t-body);padding:9px 12px;border-radius:8px;border:1px solid var(--t-soft);background:transparent;color:var(--t-ink);width:100%}
.tto-form option{color:#111;background:#fff}
.tto-form label{font:10px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--t-soft);margin-top:4px}
.tto-err{font:13px var(--t-label);color:var(--t-ink);background:color-mix(in srgb,var(--t-accent) 25%,transparent);padding:8px 10px;border-radius:8px;margin:4px 0 0}
.tto-thanks{font-family:var(--t-script);font-size:28px;margin:0}
.tto-credit{margin:0;padding:14px 20px 0;text-align:center;font:9px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft);opacity:.75}
.tto-foot{padding:22px 20px 34px;text-align:center;font:10px var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--t-soft)}
.tto-foot a{color:inherit}
.tto-music{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));z-index:6;width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--t-ink) 30%,transparent);background:color-mix(in srgb,var(--t-bg) 85%,transparent);color:var(--t-ink);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tto-music svg{width:20px;height:20px;fill:currentColor}
.tto-music:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}

.tto-gate{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;
  background:color-mix(in srgb,var(--t-bg) 72%,transparent);transition:opacity .8s ease,visibility .8s}
.tto-gate.gone{opacity:0;visibility:hidden}
.tto-ghead{text-align:center;line-height:1}
.tto-gyr{display:block;font-family:var(--t-script);font-size:54px;color:var(--t-ink);margin-bottom:-.24em;margin-left:1.2em}
.tto-giv{display:block;font-family:var(--t-display);font-weight:var(--t-dw);font-size:50px;letter-spacing:.06em;color:var(--t-ink)}
.tto-envbtn{all:unset;position:relative;cursor:pointer;width:min(300px,82%);aspect-ratio:1.45;perspective:900px;-webkit-tap-highlight-color:transparent}
.tto-envbtn:focus-visible{outline:2px solid var(--t-accent);outline-offset:8px;border-radius:6px}
.tto-env,.tto-front,.tto-flap,.tto-letter,.tto-seal{position:absolute;display:block}
.tto-env{inset:0;border-radius:5px;background:linear-gradient(160deg,var(--t-env),var(--t-env2));box-shadow:0 22px 40px -18px rgba(0,0,0,.55)}
.tto-letter{left:7%;right:7%;top:9%;bottom:9%;border-radius:3px;background:var(--t-paper);color:var(--t-paperInk);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px;
  font-family:var(--t-script);font-size:24px;line-height:1.1;transition:transform 1s cubic-bezier(.3,.7,.2,1) .45s;z-index:1}
.tto-front{inset:0;z-index:2;border-radius:5px;background:linear-gradient(170deg,var(--t-env),var(--t-env2));clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.tto-front::after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--t-accent) 70%,transparent);border-radius:2px}
.tto-flap{left:0;right:0;top:0;height:58%;z-index:3;transform-origin:top center;background:linear-gradient(180deg,var(--t-env),var(--t-env2));
  clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .7s cubic-bezier(.5,0,.3,1),z-index 0s .35s;filter:brightness(1.04)}
.tto-seal{left:50%;top:52%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;z-index:4;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--t-seal) 70%,#fff),var(--t-seal) 55%,color-mix(in srgb,var(--t-seal) 70%,#000));
  color:var(--t-sealInk);display:flex;align-items:center;justify-content:center;font-family:var(--t-display);font-size:20px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 0 0 3px color-mix(in srgb,var(--t-seal) 80%,#000);transition:opacity .35s}
.tto-envbtn.open .tto-flap{transform:rotateX(180deg);z-index:0}
.tto-envbtn.open .tto-seal{opacity:0}
.tto-envbtn.open .tto-letter{transform:translateY(-58%)}
.tto-tap{font:11px var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--t-soft);margin:0;animation:tto-pulse 2.4s ease-in-out infinite}
@keyframes tto-pulse{50%{opacity:.45}}

/* ---------- design artwork (only designs with a `deco` entry use these) ---------- */
.tto-screen.tto-paper{background:var(--t-paperimg) 0 0/384px 384px,radial-gradient(130% 90% at 50% 40%,color-mix(in srgb,var(--t-bg) 70%,#fff),var(--t-bg) 60%,color-mix(in srgb,var(--t-bg) 94%,#7a6448))}
.tto-paper .tto-env{background:var(--t-paperimg) 0 0/384px 384px,linear-gradient(160deg,var(--t-env),var(--t-env2))}
.tto-paper .tto-front{background:var(--t-paperimg) 0 0/384px 384px,linear-gradient(170deg,var(--t-env),var(--t-env2))}
.tto-paper .tto-flap{background:var(--t-paperimg) 0 0/384px 384px,linear-gradient(180deg,var(--t-env),var(--t-env2))}
.tto-paper .tto-letter{background:var(--t-paperimg) 0 0/384px 384px,var(--t-paper)}
.tto-paper .tto-gate{background:var(--t-paperimg) 0 0/384px 384px,var(--t-bg)}
.tto-rib,.tto-bow{display:none}
.tto-bowed .tto-seal{display:none}
.tto-bowed .tto-rib{display:block;position:absolute;z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--t-ribbon) 80%,#fff),var(--t-ribbon) 50%,color-mix(in srgb,var(--t-ribbon) 88%,#fff));transition:opacity .35s}
.tto-bowed .tto-rib.h{left:0;right:0;top:50%;height:8%;transform:translateY(-50%)}
.tto-bowed .tto-rib.v{top:0;bottom:0;left:50%;width:6.5%;transform:translateX(-50%);background:linear-gradient(90deg,color-mix(in srgb,var(--t-ribbon) 80%,#fff),var(--t-ribbon) 50%,color-mix(in srgb,var(--t-ribbon) 88%,#fff))}
.tto-bowed .tto-bow{display:block;position:absolute;z-index:6;left:50%;top:50%;width:40%;transform:translate(-50%,-36%);pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));transition:opacity .35s}
.tto-bowed .tto-bow[hidden]{display:none}
.tto-envbtn.open .tto-rib,.tto-envbtn.open .tto-bow{opacity:0}
.tto-band{height:14px;flex:none;background:
  linear-gradient(135deg,var(--t-ink) 25%,transparent 25%) 0 0/14px 14px,linear-gradient(225deg,var(--t-ink) 25%,transparent 25%) 0 0/14px 14px,
  linear-gradient(315deg,var(--t-ink) 25%,transparent 25%) 0 0/14px 14px,linear-gradient(45deg,var(--t-ink) 25%,transparent 25%) 0 0/14px 14px,var(--t-bg)}
.tto-meadow{width:calc(100% + 52px);margin:14px -26px -36px;pointer-events:none}
.tto-meadow img,.tto-family img{display:block;width:100%;height:auto}
.tto-meadow img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tto-family{display:flex;align-items:flex-end;justify-content:center;padding:12px 4% 6px;pointer-events:none}
.tto-family .f0{width:42%}.tto-family .f1{width:20%;margin:0 -2% 2%}.tto-family .f2{width:36%}
.tto-notet{font-size:36px;font-weight:400}
.tto-noter{display:block;width:70px;height:1px;background:var(--t-accent);margin:-2px 0 4px}
.tto-noter::before,.tto-noter::after{display:none}
.tto-host{font-family:var(--t-script);font-size:23px;margin:-2px 0 0;color:var(--t-soft)}
.tto-sched{list-style:none;margin:0;padding:0;width:100%;max-width:320px;display:flex;flex-direction:column}
.tto-sched li{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--t-accent) 45%,transparent);text-align:left}
.tto-sched li:last-child{border-bottom:0}
.tto-sched .t{font:11px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft);text-align:right}
.tto-sched .w{font-family:var(--t-body);font-size:19px;color:var(--t-ink);overflow-wrap:anywhere}
.tto-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;width:100%;max-width:330px;background:color-mix(in srgb,var(--t-accent) 55%,transparent);border:1px solid color-mix(in srgb,var(--t-accent) 55%,transparent)}
.tto-stats div{background:var(--t-bg);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.tto-stats span{font:10px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft)}
.tto-stats b{font-family:var(--t-display);font-weight:500;font-size:21px;line-height:1.15;color:var(--t-ink);overflow-wrap:anywhere}
.tto-tally{width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px}
.tto-tbar{display:flex;height:14px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-ink) 25%,transparent)}
.tto-tbar span{display:block;height:100%;transition:width .8s ease}
.tto-tbar .b{background:#9CC3E6}.tto-tbar .g{background:#F0AFC0}
.tto-tnums{display:flex;justify-content:space-between}
.tto-tnums div{display:flex;flex-direction:column;align-items:center}
.tto-tnums b{font-family:var(--t-display);font-weight:500;font-size:34px;line-height:1;color:var(--t-ink)}
.tto-tnums span{font:10px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--t-soft)}
.tto-seats{font-size:17px;margin-top:-4px}
.tto-reveal{padding-top:46px;padding-bottom:6px}
.tto-rv-boy .tto-big{color:#6F9DCB}.tto-rv-girl .tto-big{color:#D7849C}
.tto-conf{position:absolute;top:-20px;z-index:7;pointer-events:none;border-radius:2px;animation:tto-conf linear forwards}
@keyframes tto-conf{to{transform:translate(var(--x),110vh) rotate(var(--r))}}
.tto-bowmark{width:58px;height:auto;display:block;margin:0 auto 2px}
.tto-rafsc{font-size:44px;margin-top:-10px;display:flex;align-items:center;gap:10px}
.tto-rafsc::before,.tto-rafsc::after{content:"";width:34px;height:1px;background:var(--t-accent)}
.tto-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:340px;margin-top:6px;border-top:1px solid var(--t-accent);border-bottom:1px solid var(--t-accent);padding-block:10px}
.tto-notes div{display:flex;flex-direction:column;align-items:center;gap:1px}
.tto-notes b{font-family:var(--t-display);font-weight:600;font-size:18px;color:var(--t-ink)}
.tto-notes span{font:10px var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--t-soft)}
/* swans swim along the bottom once the envelope opens */
.tto-parade{position:absolute;left:0;right:0;bottom:0;height:30%;max-height:240px;min-height:130px;z-index:4;pointer-events:none;overflow:hidden;
  background:linear-gradient(to top,var(--t-bg) 60%,color-mix(in srgb,var(--t-bg) 0%,transparent));opacity:0;transition:opacity 1.2s ease}
.tto-parade.on{opacity:1}
.tto-swim{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom,0px));left:0;height:80%;display:flex;align-items:flex-end;gap:6px;transform:translateX(-100%);white-space:nowrap}
.tto-parade.on .tto-swim{animation:tto-swim 17s linear forwards}
.tto-swim img{display:block;width:auto;max-width:none;animation:tto-bob 2.6s ease-in-out infinite alternate}
.tto-swim .big{height:100%}
.tto-swim .baby{height:56%;animation-delay:.5s}
.tto-swim .big+.big{animation-delay:1.1s}
@keyframes tto-swim{from{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}
@keyframes tto-bob{to{transform:translateY(-4px)}}
/* editor flourish (TTO.fly) */
.tto-fly{position:fixed;left:0;top:0;width:38px;height:28px;z-index:9999;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.tto-fly svg{display:block;width:100%;height:100%}
.tto-spark{position:fixed;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);animation:tto-spark .8s ease-out forwards}
.tto-spark svg{display:block;width:100%;height:100%}
@keyframes tto-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}30%{opacity:1;transform:translate(calc(-50% + var(--dx) * .3),calc(-50% + var(--dy) * .3)) scale(1.1) rotate(var(--r))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.tto-screen *,.tto-screen *::before,.tto-screen *::after{transition:none!important;animation:none!important}}