/* sumi: the special section, three variants (only the chosen one is shown).
   Every variant fits one phone screen: heading, lead, stage and its result.
   Nothing moving carries a CSS filter; shadows are baked or static. */
/* the section is exactly one screen tall (capped), and the stage takes whatever the heading and lead leave */
.sec.spx{height:100vh;height:100svh;min-height:600px;max-height:700px;padding:58px 0 16px;overflow:hidden;overflow:clip}
.spx>.w{height:100%;display:flex;flex-direction:column}
.spx .hd{margin-bottom:10px}
.spx .lead{margin:0 auto 12px;max-width:30ch;font-size:17px;line-height:1.6}
:lang(ar) .spx .lead{font-size:18px;line-height:1.55}
.sp-dock{position:relative;flex:none;display:grid}
.sp-dock>*{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sp-dock>[hidden]{display:none}
.sp-ok{display:block;max-width:30ch;margin:0;text-align:center;font-size:17px;font-weight:500;line-height:1.4;color:var(--accent);text-wrap:balance}
.sp-ok svg{display:inline-block;vertical-align:-4px;margin-inline-end:6px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-again{min-height:44px;padding:0 14px;font-size:16px;font-weight:500;color:var(--dim);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.tipr{position:relative;display:block;width:46px;height:46px;flex:none}
.tipr::before,.tipr::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);opacity:0;animation:spRip 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.tipr::after{animation-delay:1.3s}
@keyframes spRip{0%{transform:scale(.4);opacity:.95}100%{transform:scale(1.5);opacity:0}}

/* ---------- a: a blessing in ink, on a hanging scroll ---------- */
.spa{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center}
.kk{position:relative;flex:1 1 auto;min-height:0;width:min(100%,292px);display:flex;flex-direction:column;margin-top:24px}
.kk-cord{position:absolute;left:50%;top:-25px;width:112px;height:32px;margin-left:-56px;overflow:visible}
.kk-cord path{fill:none;stroke:color-mix(in srgb,var(--brush) 72%,#8a6a3a);stroke-width:1.5;stroke-linecap:round}
.kk-cord circle{fill:color-mix(in srgb,var(--brush) 85%,#000)}
.kk-rod{position:relative;z-index:3;display:block;flex:none;height:12px;margin:0 -6px;border-radius:6px;background:linear-gradient(180deg,#7a5230,#3e2614 45%,#1a0d05 82%,#2c1a0d);box-shadow:0 6px 10px -6px rgba(0,0,0,.5)}
.kk-rod.b{height:16px;margin:0 -2px;border-radius:8px}
.kk-rod.b::before,.kk-rod.b::after{content:'';position:absolute;top:-3px;width:16px;height:22px;border-radius:6px;background:linear-gradient(90deg,#6d5222,#c49a52 30%,#f1dba3 46%,#c49a52 66%,#6d5222)}
.kk-rod.b::before{left:-14px}.kk-rod.b::after{right:-14px}
.kk-sheet{position:relative;z-index:1;flex:1 1 auto;min-height:0;padding:38px 15px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.06)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cg fill='none' stroke='%23b8924f' stroke-width='.6' opacity='.5'%3E%3Cpath d='M0 0l14 8.08L28 0M0 16.17l14-8.09 14 8.09M14 8.08v16.17M0 16.17l14 8.08 14-8.08M0 32.33l14-8.08 14 8.08M14 24.25v16.17M0 32.33l14 8.09 14-8.09M0 48.5l14-8.08 14 8.08M0 0v48.5M28 0v48.5M0 16.17L28 32.33M28 16.17L0 32.33'/%3E%3C/g%3E%3C/svg%3E") 50% 0/28px 48.5px,color-mix(in srgb,var(--brush) 10%,var(--soft));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brush) 12%,transparent),0 28px 44px -30px var(--shade)}
html[data-dark="1"] .kk-sheet{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.2)),repeating-linear-gradient(60deg,transparent 0 5px,rgba(255,230,190,.05) 5px 6px),color-mix(in srgb,var(--accent) 22%,#1a1410)}
.kk-fu{position:absolute;top:0;left:31%;width:9px;height:31px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,rgba(255,255,255,.14) 60%,rgba(0,0,0,.12)),color-mix(in srgb,var(--accent) 62%,var(--brush));box-shadow:0 2px 3px -1px rgba(0,0,0,.3)}
.kk-fu::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:rgba(255,240,210,.55)}
.kk-fu.e{left:auto;right:31%}
.kk-pan{position:relative;height:100%;background:var(--fib),color-mix(in srgb,var(--bg) 40%,#fff);background-size:512px 512px,auto;
  box-shadow:0 -6px 0 color-mix(in srgb,#c49a52 72%,var(--brush)),0 6px 0 color-mix(in srgb,#c49a52 72%,var(--brush)),inset 0 0 0 1px rgba(0,0,0,.06)}
html[data-dark="1"] .kk-pan{background:var(--fib),color-mix(in srgb,var(--bg) 82%,#fff);background-size:512px 512px,auto}
.kk-pan textarea{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0;padding:26% 18px 46px;border:0;border-radius:0;background:transparent;resize:none;outline:none;
  font:500 20px/1.55 var(--f-body);color:var(--ink);text-align:center;caret-color:var(--accent);-webkit-appearance:none;appearance:none}
.kk-pan textarea::placeholder{color:var(--dim);opacity:.8}
.kk-pan textarea:focus{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent)}
.kk-pan.inked textarea{visibility:hidden}
.kk-cv{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
.kk-hk{position:absolute;z-index:3;bottom:12px;inset-inline-end:12px;width:36px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:3px;
  background:var(--noise),var(--seal);background-size:180px 180px,auto;color:var(--seal-on);font-family:var(--f-disp);font-weight:var(--f-namew);font-size:14px;line-height:.92;
  box-shadow:inset 0 0 0 2.5px var(--seal),inset 0 0 0 3.6px var(--seal-on);opacity:0;visibility:hidden;transform:rotate(-5deg)}
.kk-hk b{display:block;font-weight:inherit}
.kk-hk b:only-child{font-size:20px}
/* the answer: the meaning under the characters, the guest's own words under it */
.kk-pan.said textarea{visibility:hidden}
.kk-res{position:absolute;left:0;right:0;top:0;z-index:2;padding:0 46px;text-align:center;visibility:hidden;pointer-events:none}
.kk-pan.said .kk-res{visibility:visible}
.kk-mean{margin:0;font-family:var(--f-disp);font-weight:var(--f-dispw);font-size:25px;line-height:1.2;color:var(--ink);text-wrap:balance}
.kk-mean.long{font-size:20px}
.kk-own{margin:3px 0 0;font-size:15px;line-height:1.4;color:var(--dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:balance;overflow-wrap:anywhere}
.kk-drop{position:absolute;left:50%;top:40px;z-index:1;width:13px;height:12px;margin:-6px 0 0 -6.5px;border-radius:52% 48% 50% 50%/56% 50% 50% 44%;background:var(--brush);opacity:0;visibility:hidden;pointer-events:none}
.kk-pan.said .kk-drop,.kk-pan.typing .kk-drop{display:none}
.kk-hk{inset-inline-end:auto;left:11px;bottom:11px}
.kk-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.kk-br{position:absolute;left:0;top:0;z-index:5;width:96px;pointer-events:none;opacity:0;visibility:hidden;will-change:transform}
.kk-br img{display:block;width:100%;height:auto;max-width:none}
.kk-br img:not(.bk){position:relative}
.kk-br .bk{position:absolute;left:-16.667%;top:-25.381%;width:133.333%;opacity:var(--shA)}
html[dir="ltr"] .kk-br{transform-origin:0 0}
.spa .sp-dock{height:92px;width:100%;margin-top:8px}
.spa-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.spa-chips button{min-height:40px;padding:0 13px;border-radius:99px;font-size:15.5px;font-weight:500;line-height:1.2;color:var(--ink);background:color-mix(in srgb,var(--bg) 65%,#fff);box-shadow:inset 0 0 0 1px var(--line);transition:transform .4s var(--ease),box-shadow .25s}
html[data-dark="1"] .spa-chips button{background:color-mix(in srgb,var(--bg) 88%,#fff)}
.spa-chips button:active{transform:scale(.95)}
@media (hover:hover){.spa-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}}
.sp-in .sp-go{display:none;min-height:52px;padding:0 28px}
.sp-in.typing .sp-go{display:inline-flex}
.sp-in.typing .spa-chips{display:none}
.sp-go .ico{width:22px;height:22px}
[dir="rtl"] .sp-go .ico{transform:scaleX(-1)}

/* ---------- b: the koi pond ---------- */
.spb{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pond{position:relative;flex:1 1 auto;min-height:0;margin:0 -8px;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline-offset:-4px}
.pond-cv{position:absolute;left:0;top:0;pointer-events:none}
.pond-drop{position:absolute;left:0;top:0;z-index:3;width:10px;height:13px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--brush);pointer-events:none;visibility:hidden}
.pond-hint{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.pond-hint b{font-size:21px;font-weight:700;line-height:1.3;color:var(--ink);text-shadow:0 0 12px var(--bg),0 0 4px var(--bg)}
.pond-end{position:absolute;left:50%;top:50%;z-index:2;width:62%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;visibility:hidden}
.pond-end canvas{display:block}
.pond-nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.pond-dt{margin:2px 0 0;font-family:var(--f-disp);font-weight:var(--f-dispw);font-size:19px;line-height:1.2;color:var(--accent);font-variant-numeric:lining-nums}
.spb .sp-dock{height:48px}
.spb-dots{display:flex;gap:10px;margin:0;justify-content:center}
.spb-dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent);transition:background-color .4s,transform .5s var(--ease)}
.spb-dots i.on{background:var(--accent);transform:scale(1.15)}
.spb-say{min-height:24px;margin:6px 0 0;font-size:16px;font-weight:500;line-height:1.4;color:var(--dim)}

/* ---------- c: a fortune drawn from a bamboo cup ---------- */
.spc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.omk{position:relative;flex:1 1 auto;min-height:0}
.omk-sh{position:absolute;left:50%;bottom:2px;width:170px;height:30px;margin-left:-85px;border-radius:50%;background:radial-gradient(closest-side,var(--shade),transparent);opacity:.75;pointer-events:none}
.cup{position:absolute;left:50%;bottom:10px;z-index:2;width:120px;margin-left:-60px;-webkit-tap-highlight-color:transparent;border-radius:12px;transform-origin:50% 100%}
.cup-in{position:relative;display:block;width:120px;height:226px;transform-origin:50% 92%}
.cup-back{position:absolute;left:4px;right:4px;top:70px;height:24px;border-radius:50%;background:radial-gradient(60% 70% at 50% 40%,#140a03,#3a2410 80%,#5a3c1c)}
.cup-st{position:absolute;left:0;right:0;top:0;height:86px}
.cup-st i{position:absolute;bottom:0;left:50%;width:6px;margin-left:-3px;border-radius:2px 2px 1px 1px;transform-origin:50% 100%;
  background:linear-gradient(180deg,rgba(40,25,10,.55) 0 2px,transparent 2px 10px,rgba(40,25,10,.18) 10px 11px,transparent 11px),linear-gradient(90deg,#8a6a3a,#efdcb0 40%,#d2b27a 68%,#7a5a2a)}
.cup-st i:nth-child(3n){background:linear-gradient(180deg,rgba(40,25,10,.55) 0 2px,transparent 2px),linear-gradient(90deg,#7a5a2a,#dcc08a 40%,#b89356 68%,#6b4f25)}
.cup-st i.pick{width:7px;margin-left:-3.5px;background:linear-gradient(180deg,var(--accent) 0 3px,transparent 3px 9px,var(--accent) 9px 10px,transparent 10px),linear-gradient(90deg,#8a6a3a,#f4e4bd 40%,#d8b880 68%,#7a5a2a)}
.cup-body{position:absolute;left:4px;right:4px;top:82px;bottom:0;border-radius:0 0 12px 12px/0 0 7px 7px;
  background:linear-gradient(180deg,transparent 46%,rgba(60,35,10,.55) 46.5%,rgba(255,240,200,.35) 48.5%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,.1),transparent 18%,transparent 85%,rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg,transparent 0 9px,rgba(90,60,20,.07) 9px 10px),linear-gradient(90deg,#4a3518 0%,#8f6d33 11%,#d4b373 30%,#f1dba3 41%,#cfa862 60%,#8a6a2c 84%,#3e2c12 100%);
  -webkit-mask:radial-gradient(56px 12px at 50% 0,transparent 97%,#000 100%);mask:radial-gradient(56px 12px at 50% 0,transparent 97%,#000 100%)}
.cup-band{position:absolute;left:4px;right:4px;top:118px;height:11px;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%,rgba(0,0,0,.3)),linear-gradient(90deg,rgba(0,0,0,.45),transparent 30%,transparent 62%,rgba(0,0,0,.5)),var(--accent);border-radius:2px/50%}
.cup-band::after{content:'';position:absolute;left:50%;top:6px;width:9px;height:24px;margin-left:-4.5px;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 50%,rgba(0,0,0,.3)),var(--accent)}
.cup-lip{position:absolute;left:3px;right:3px;top:70px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2.5px #c9a35f,inset 0 -3px 0 1px #8a6a2c}
.cup-hint{position:absolute;left:50%;bottom:calc(100% + 6px);width:260px;margin-left:-130px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.cup-hint b{font-size:21px;font-weight:700;line-height:1.3;color:var(--ink)}
.cup-hint .tipr{order:2}
.omk-p{position:absolute;left:50%;top:0;z-index:3;width:min(80%,262px);height:calc(100% - 14px);transform:translateX(-50%);visibility:hidden;
  background:var(--fib),color-mix(in srgb,var(--bg) 35%,#fff);background-size:512px 512px,auto;box-shadow:0 26px 40px -28px var(--shade),0 1px 3px rgba(0,0,0,.08)}
html[data-dark="1"] .omk-p{background:var(--fib),color-mix(in srgb,var(--bg) 80%,#fff);background-size:512px 512px,auto}
.omk-p::before{content:'';position:absolute;inset:9px;border:1.5px solid color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none}
.omk-in{position:absolute;inset:18px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
.omk-kj{display:block;flex:none}
.omk-lv{margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.3;color:var(--accent)}
.omk-lv::after{content:'';display:block;width:42px;height:1.5px;margin:10px auto 0;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.omk-f{margin:12px 0 0;max-width:12em;font-family:var(--f-disp);font-weight:var(--f-dispw);font-size:24px;line-height:1.4;text-wrap:balance;color:var(--ink)}
:lang(ru) .omk-f,:lang(en) .omk-f{font-size:23px;line-height:1.3}
.omk-hk{position:relative;margin-top:14px;width:38px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:3px;
  background:var(--noise),var(--seal);background-size:180px 180px,auto;color:var(--seal-on);font-family:var(--f-disp);font-weight:var(--f-namew);font-size:14px;line-height:.92;
  box-shadow:inset 0 0 0 2.5px var(--seal),inset 0 0 0 3.6px var(--seal-on);transform:rotate(-5deg);visibility:hidden}
.omk-hk b{display:block;font-weight:inherit}
.omk-hk b:only-child{font-size:20px}
.omk-roll{position:absolute;left:-5px;right:-5px;top:-7px;z-index:2;height:14px;border-radius:7px;visibility:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,rgba(255,255,255,.6) 48%,transparent 70%,rgba(0,0,0,.22)),color-mix(in srgb,var(--bg) 40%,#fff)}
.spc .sp-dock{height:84px}

@media (min-width:760px){
  .sec.spx{max-height:780px;padding:60px 0 36px}
  .spx .hd{margin-bottom:12px}
  .kk{width:400px}
  .omk-p{width:300px}
  .pond{margin:0}
}
@media (prefers-reduced-motion:reduce){.tipr::before,.tipr::after{animation:none;opacity:.6;transform:none}}