/* SEAL: the special section, three variants (a letter, the seal wall, the pin board).
   One phone screen each: heading, the thing to touch and its result fit 100svh at 390x664. */
.sp{--sw:min(calc(100vw - 32px),420px);--sp-hand:'Playpen Sans Hebrew','Playpen Sans',sans-serif;--sp-hk:1;padding:40px 16px 18px}
html:lang(en) .sp{--sp-hand:'Playpen Sans','Playpen Sans Hebrew',sans-serif}
html:lang(ru) .sp{--sp-hand:'Caveat','Playpen Sans',sans-serif;--sp-hk:1.24}
html:lang(ar) .sp{--sp-hand:'Aref Ruqaa','Amiri',serif;--sp-hk:1.08}
.sp .w{position:relative;width:var(--sw);margin:0 auto}
.sp .h{font-size:clamp(32px,8.4vw,46px)}
.sp-sub{margin:6px auto 0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--od2);text-wrap:balance}
.sp-note{min-height:46px;margin:8px auto 0;max-width:36ch;font-size:15.5px;line-height:1.5;color:var(--od2);text-wrap:balance}
.sp-note.ok{font-weight:500;color:var(--hi);white-space:pre-line}
.sp-act{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:12px;min-height:54px}
.sp .btn{min-height:52px}
.sp .btn[disabled]{pointer-events:none;opacity:.55}
.sp .lnk{color:var(--od2)}
.sp input,.sp textarea{-webkit-appearance:none;appearance:none}
.sp .shake{animation:spShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes spShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.sp-crumb{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:40% 60% 50% 45%;pointer-events:none;z-index:9}
.sp-mote{position:absolute;width:3px;height:3px;margin:-1.5px;border-radius:50%;pointer-events:none;z-index:9;background:rgb(255,226,188)}

/* ============ A: a letter, folded in three and sealed ============ */
.spa{--P:clamp(104px,calc((100 * var(--vh) - 330px - var(--fx,0px)) / 3),calc(var(--sw) * .43))}
.spa-st{position:relative;height:calc(var(--P) * 3);margin:14px auto 0;perspective:1400px;perspective-origin:50% 40%}
.spa-lt{position:relative;width:100%;transform-style:preserve-3d;transform-origin:50% 50%}
.spa-pn{position:relative;height:var(--P);transform-style:preserve-3d}
.spa-p1{transform-origin:50% 100%;transform:rotateX(-1.4deg);z-index:3}
.spa-p2{z-index:1}
.spa-p3{transform-origin:50% 0;transform:rotateX(1.2deg);z-index:2}
.spa-fc{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.spa-fc.b{transform:rotateX(180deg);visibility:hidden}
.spa-pn.flip>.spa-fc.f{visibility:hidden}
.spa-pn.flip>.spa-fc.b{visibility:visible}
.spa-fc .sh{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(40,26,12,.8),rgba(40,26,12,.45));opacity:0}
.spa-p2 .spa-fc::before,.spa-p2 .spa-fc::after{content:'';position:absolute;inset-inline:0;height:6px;pointer-events:none;z-index:2}
.spa-p2 .spa-fc::before{top:0;background:linear-gradient(180deg,rgba(60,40,20,.12),rgba(255,255,255,.3) 40%,transparent)}
.spa-p2 .spa-fc::after{bottom:0;background:linear-gradient(0deg,rgba(60,40,20,.11),rgba(255,255,255,.26) 45%,transparent)}
.spa-lsh{position:absolute;inset:2px;transform:translateZ(-2px);pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.35),0 30px 60px -18px rgba(0,0,0,.7),0 70px 100px -50px rgba(0,0,0,.6)}
html[data-palette="c"] .spa-lsh{box-shadow:0 1px 2px rgba(0,0,0,.12),0 26px 46px -18px rgba(50,40,28,.35)}
/* the sheet's text, laid once over the three panels (each panel shows its third) */
.spa-cnt{position:absolute;inset-inline:0;height:calc(var(--P) * 3);padding:16px 22px 14px;display:flex;flex-direction:column;text-align:start}
.spa-p1 .spa-cnt{top:0}.spa-p2 .spa-cnt{top:calc(var(--P) * -1)}.spa-p3 .spa-cnt{top:calc(var(--P) * -2)}
.spa-cnt .dl{font-size:14px;font-weight:500;line-height:1.4;color:var(--ink2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spa-cnt .gr{margin-top:6px;font-family:var(--sp-hand);font-size:calc(19px * var(--sp-hk));line-height:1.5;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spa-cnt .bd{flex:1;min-height:0;margin-top:2px;font-family:var(--sp-hand);font-size:calc(17px * var(--sp-hk));line-height:28px;color:var(--ink);white-space:pre-wrap;overflow:hidden;word-break:break-word;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(120,90,60,.16) 27px 28px);background-attachment:local}
.spa-cnt .sg{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;margin-top:4px}
.spa-cnt .sg span{font-family:var(--sp-hand);font-size:calc(16px * var(--sp-hk));color:var(--ink2)}
.spa-cnt .sg b{font-family:var(--sp-hand);font-weight:600;font-size:calc(24px * var(--sp-hk));line-height:34px;min-height:34px;color:var(--accent);max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spa-ed{position:absolute;inset:0;z-index:5;transform:translateZ(12px) scale(.9915)}
.spa-ed .dl,.spa-ed .gr{visibility:hidden}
.spa-ed textarea.bd{display:block;width:100%;padding:0;border:0;outline:0;resize:none;background-color:transparent;font-family:var(--sp-hand);font-size:calc(17px * var(--sp-hk));line-height:28px;color:var(--ink);overflow:hidden;border-radius:0}
.spa-ed textarea.bd::placeholder{color:color-mix(in srgb,var(--ink) 50%,var(--bg))}
.spa-ed .sg input{width:66%;padding:0;border:0;outline:0;border-radius:0;background:transparent;text-align:end;font-family:var(--sp-hand);font-weight:600;font-size:calc(24px * var(--sp-hk));line-height:34px;color:var(--accent);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 18%,transparent)}
.spa-ed .sg input::placeholder{color:color-mix(in srgb,var(--accent) 50%,var(--bg));font-weight:500}
.spa-ed .sg input:focus{box-shadow:0 1.5px 0 color-mix(in srgb,var(--accent) 55%,transparent)}
.spa-ed textarea.bd:focus{background-color:color-mix(in srgb,var(--accent) 3%,transparent)}
.spa-cnt.copy .bd,.spa-cnt.copy .sg{visibility:hidden}
.spa-lt.folded .spa-cnt.copy .bd,.spa-lt.folded .spa-cnt.copy .sg{visibility:visible}
.spa-ad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(var(--P) * .14) 16px 0}
.spa-ad .to{font-family:var(--sp-hand);font-weight:600;font-size:calc(min(30px,var(--P) * .22) * var(--sp-hk));line-height:1.2;color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.spa-ad .fr{margin-top:2px;font-family:var(--sp-hand);font-size:calc(16px * var(--sp-hk));color:var(--ink2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.spa-wax{position:absolute;left:0;top:0;width:150px;height:150px;z-index:4;pointer-events:none}
.spa-pile{position:absolute;left:50%;top:calc(var(--P) * .38);width:calc(var(--sw) * .94);height:var(--P);margin-left:calc(var(--sw) * -.47);pointer-events:none;opacity:0;visibility:hidden}
.spa-pile i{position:absolute;inset:0;box-shadow:0 1px 2px rgba(0,0,0,.35),0 22px 36px -18px rgba(0,0,0,.75)}
.spa-pile i::after{content:'';position:absolute;left:50%;bottom:-17px;width:44px;height:44px;margin-left:-22px;background:var(--wax,none) center/contain no-repeat}
.spa-res{position:absolute;inset-inline:0;top:calc(var(--P) * 1.88);display:flex;flex-direction:column;align-items:center;gap:4px;padding-inline:8px;opacity:0;visibility:hidden}
.spa-res .ok{font-family:var(--sp-hand);font-weight:500;font-size:calc(20px * var(--sp-hk));line-height:1.35;color:var(--hi)}
.spa-res .q{max-width:30ch;font-family:var(--sp-hand);font-size:calc(17px * var(--sp-hk));line-height:1.55;color:var(--od2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ B: the seal wall, the guest presses a seal next to theirs ============ */
.spb{--SH:clamp(290px,calc(100 * var(--vh) - 356px - var(--fx,0px)),440px)}
.spb-sh{position:relative;height:var(--SH);margin:14px auto 0;border-radius:2px;rotate:-.6deg;box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 56px -24px rgba(0,0,0,.8)}
html[data-palette="c"] .spb-sh{box-shadow:0 1px 2px rgba(0,0,0,.12),0 26px 46px -22px rgba(50,40,28,.4)}
.spb-sh::before{content:'';position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none}
.spb-hd{position:absolute;inset:calc(var(--SH) * .05) 18px auto;display:flex;flex-direction:column;align-items:center}
.spb-nm{font-family:var(--f-name);font-weight:700;font-size:calc(clamp(26px,calc(var(--SH) * .1),36px) * var(--nm,1));line-height:1.1;color:var(--ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.spb-dt{margin-top:2px;font-size:14px;font-weight:500;line-height:1.4;color:var(--ink2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.spb-rule{width:46px;height:1px;margin-top:8px;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.spb-s{position:absolute;pointer-events:none}
.spb-me{position:absolute;left:50%;pointer-events:auto;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.spb-ring{position:absolute;inset:0;overflow:visible}
.spb-ring circle{fill:color-mix(in srgb,var(--col,#8f1d1d) 7%,transparent);stroke:var(--col,#8f1d1d);stroke-width:1.5;stroke-dasharray:4 5;opacity:.7;transition:stroke .4s ease,fill .4s ease}
.spb-ring .gl{fill:none;stroke-dasharray:none;stroke-width:1.5;opacity:0;transform-origin:50% 50%;transform-box:fill-box}
.sp-on .spb-ring .gl{animation:spBreath 2.6s cubic-bezier(.2,.8,.16,1) infinite}
.spb-me.done .spb-ring{visibility:hidden}
@keyframes spBreath{0%{transform:scale(.92);opacity:.75}100%{transform:scale(1.32);opacity:0}}
.spb-gh{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-seal),Georgia,serif;font-weight:700;line-height:1;color:var(--col,#8f1d1d);opacity:.4;pointer-events:none;transition:color .4s ease}
.spb-me canvas{position:absolute;pointer-events:none}
.spb-in{position:absolute;left:50%;width:62%;margin-left:-31%;padding:0 4px;border:0;outline:0;border-radius:0;background:transparent;text-align:center;font-family:var(--sp-hand);font-weight:600;font-size:calc(22px * var(--sp-hk));line-height:38px;height:40px;color:var(--ink);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 30%,transparent)}
.spb-in::placeholder{color:color-mix(in srgb,var(--ink) 48%,var(--bg));font-weight:500}
.spb-in:focus{box-shadow:0 1.5px 0 var(--col,var(--accent))}
.spb-in[readonly]{box-shadow:none;color:var(--col,var(--ink))}
.spb-chips{display:flex;justify-content:center;gap:clamp(6px,2.6vw,14px);margin-top:10px;height:52px}
.spb-chip{position:relative;width:48px;height:52px;display:grid;place-items:center;border-radius:50%}
.spb-chip canvas{width:46px;height:46px;transition:transform .5s var(--ease)}
.spb-chip::after{content:'';position:absolute;left:50%;bottom:-1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--hi);opacity:0;transition:opacity .3s ease}
.spb-chip[aria-checked="true"] canvas{transform:translateY(-3px) scale(1.12)}
.spb-chip[aria-checked="true"]::after{opacity:1}
.spb .sp-act{margin-top:6px}

/* ============ C: the pin board ============ */
.spc{--BH:clamp(270px,calc(100 * var(--vh) - 358px - var(--fx,0px)),420px)}
.spc-bd{position:relative;height:var(--BH);margin:14px auto 0;border-radius:3px;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px color-mix(in srgb,var(--hi) 45%,transparent),0 36px 60px -34px rgba(0,0,0,.7)}
html[data-palette="c"] .spc-bd{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 1px rgba(0,0,0,.12),0 30px 50px -28px rgba(50,40,28,.35)}
.spc-bd canvas.cork{position:absolute;inset:0;width:100%;height:100%}
.spc-lamp{position:absolute;left:-30%;top:-40%;width:160%;height:150%;pointer-events:none;background:radial-gradient(40% 34% at 50% 40%,rgba(255,206,150,.2),transparent 72%)}
.spc-vig{position:absolute;inset:0;pointer-events:none;z-index:20;background:radial-gradient(130% 100% at 50% 40%,transparent 58%,rgba(60,40,20,.16));box-shadow:inset 0 0 18px rgba(60,40,20,.12)}
.spc-spot{position:absolute;border-radius:2px;pointer-events:none;background:rgba(255,226,180,.07);box-shadow:inset 0 0 0 1.5px rgba(255,226,180,.28);background-clip:padding-box}
.spc-spot::before,.spc-spot::after{content:'';position:absolute;left:50%;top:50%;background:rgba(255,226,180,.4);border-radius:1px}
.spc-spot::before{width:18px;height:1.5px;margin:-.75px 0 0 -9px}
.spc-spot::after{width:1.5px;height:18px;margin:-9px 0 0 -.75px}
.spc-dim{position:absolute;inset:0;z-index:30;background:rgba(10,6,4,.62);opacity:0;visibility:hidden}
.spc-n{position:absolute;width:var(--nw);padding:22px 11px 10px;text-align:center;cursor:pointer;transform-origin:50% 12px;-webkit-user-select:none;user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 18px -9px rgba(0,0,0,.65)}
.spc-n::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,rgba(255,255,255,.28),transparent 30%,transparent 70%,rgba(60,40,20,.1))}
.spc-n.y{background-color:#f3e6bf}
.spc-n.k{background-color:#f1ddd3}
.spc-n .nt{font-family:var(--sp-hand);font-size:calc(13.5px * var(--sp-hk) * var(--nf,1));line-height:1.42;color:var(--ink);overflow-wrap:break-word}
.spc-n .ns{margin-top:5px;font-family:var(--sp-hand);font-weight:600;font-size:calc(15px * var(--sp-hk));line-height:1.15;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spc-n .ph{position:absolute;left:50%;top:-4px;width:26px;height:26px;margin-left:-13px;z-index:3;pointer-events:none}
.spc-n .ps{position:absolute;left:50%;top:-4px;width:26px;height:26px;margin-left:-13px;z-index:2;pointer-events:none;transform:translate(3px,5px)}
.spc-n .ph img,.spc-n .ps img{width:100%;height:100%}
.spc-n.zoom{z-index:40}
.spc-n.mine{z-index:12}
.spc-n.mine::before{content:'';position:absolute;inset:-5px;border:1.5px solid var(--hi);border-radius:2px;opacity:0;pointer-events:none}
.spc-n.mine.glow::before{animation:spMine 2.2s cubic-bezier(.2,.8,.16,1) forwards}
@keyframes spMine{0%{opacity:0;transform:scale(1.08)}30%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.spc-cmp{position:relative;margin:14px auto 0;padding:12px 12px 12px;border-radius:2px;box-shadow:0 2px 3px rgba(0,0,0,.25),0 26px 44px -24px rgba(0,0,0,.8)}
html[data-palette="c"] .spc-cmp{box-shadow:0 1px 2px rgba(0,0,0,.12),0 22px 40px -22px rgba(50,40,28,.4)}
.spc-cmp textarea,.spc-cmp input{display:block;width:100%;padding:8px 12px;border:0;border-radius:3px;outline:0;resize:none;text-align:start;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);transition:box-shadow .3s ease}
.spc-cmp textarea{font-family:var(--sp-hand);font-size:calc(17px * var(--sp-hk));line-height:1.5;height:calc(17px * var(--sp-hk) * 3 + 16px);overflow:hidden}
.spc-cmp input{font-family:var(--f-body);font-size:17px;line-height:1.3;height:48px}
.spc-cmp textarea:focus,.spc-cmp input:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.spc-cmp ::placeholder{color:var(--ink2);opacity:.75}
.spc-row{display:flex;gap:8px;margin-top:8px;align-items:stretch}
.spc-row input{flex:1 1 auto;min-width:0}
.spc-row .btn{flex:0 0 auto;min-width:0;min-height:48px;padding:0 20px;gap:8px}
.spc-row .btn img{width:22px;height:22px;margin-inline-start:-4px}
.spc-bd .sp-mote{z-index:25}

@media(min-width:900px){
  .sp{padding:64px 16px 40px;--sw:min(calc(100vw - 64px),440px)}
  .sp .h{font-size:clamp(46px,4.4vw,60px);margin-inline:-120px}
  .sp-sub{font-size:19px}
  .spa{--P:clamp(120px,calc((100 * var(--vh) - 380px - var(--fx,0px)) / 3),calc(var(--sw) * .43))}
  .spb{--SH:clamp(290px,calc(100 * var(--vh) - 390px - var(--fx,0px)),470px)}
  .spc{--BH:clamp(300px,calc(100 * var(--vh) - 390px - var(--fx,0px)),440px)}
}
@media(prefers-reduced-motion:reduce){.sp-on .spb-ring .gl{animation:none}}
.sp-probe{position:absolute;top:0;left:0;width:1px;height:calc(100 * var(--vh));visibility:hidden;pointer-events:none}

/* game on: the ring that breathes out of the thing to touch, the glint on the button */
.sp-ping{position:absolute;z-index:6;pointer-events:none;border-radius:4px;border:2px solid color-mix(in srgb,var(--accent) 80%,#fff);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);will-change:transform,opacity}
.sp-ping.rd{border-radius:50%}
.sp .btn.sp-glint{position:relative;overflow:hidden}
.sp .btn.sp-glint::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,240,214,.55) 48%,transparent 66%);transform:translateX(-110%);animation:spGlint .75s cubic-bezier(.3,.6,.2,1) forwards}
html[dir="rtl"] .sp .btn.sp-glint::after{animation-name:spGlintR}
@keyframes spGlint{to{transform:translateX(110%)}}
@keyframes spGlintR{from{transform:translateX(110%)}to{transform:translateX(-110%)}}
.spb-drop{position:absolute;left:50%;top:50%;width:16px;height:20px;margin:-10px 0 0 -8px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.55),transparent 34%),var(--col,var(--accent));box-shadow:inset -2px -3px 4px rgba(0,0,0,.3);pointer-events:none;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.sp .btn.sp-glint::after{animation:none;display:none}}