#curtain{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center}
#curtain::before,#curtain::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;background:#2f3a38;animation:open 1s cubic-bezier(.76,0,.24,1) .85s forwards}
#curtain::before{left:0;--x:-100%}
#curtain::after{right:0;--x:100%}
#curtain span{position:relative;z-index:1;font-family:"Shippori Mincho",serif;font-size:72px;color:#f4efe7;animation:mark 1.1s ease forwards}
@keyframes open{to{transform:translateX(var(--x))}}
@keyframes mark{0%{opacity:0;letter-spacing:.5em}45%,70%{opacity:1;letter-spacing:0}100%{opacity:0}}

.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hint-touch{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;background:rgba(47,58,56,.88);color:#f4efe7;font-size:13px;letter-spacing:.12em;padding:5px 16px;border-radius:99px;pointer-events:none}

.ch{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(-14px);animation:ch .9s ease forwards}
@keyframes ch{to{opacity:1;filter:blur(0);transform:none}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

.mark{animation:blob 9s ease-in-out infinite;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.staff-grid>div:hover .mark{transform:scale(1.06) rotate(-4deg)}
.staff-grid>div:nth-child(2) .mark{animation-delay:-3s}
.staff-grid>div:nth-child(3) .mark{animation-delay:-6s}
@keyframes blob{0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}33%{border-radius:58% 42% 46% 54%/48% 58% 42% 52%}66%{border-radius:44% 56% 57% 43%/56% 44% 56% 44%}}

.menu-hint{margin-top:-12px;color:var(--sub);font-size:14px}
.row[role=checkbox]{cursor:pointer;position:relative;padding-left:34px;transition:background .25s,padding .25s}
.row[role=checkbox]::before{content:"";position:absolute;left:4px;top:50%;width:18px;height:18px;margin-top:-9px;border:1px solid var(--ink);border-radius:50%;transition:background .2s,box-shadow .2s}
.row[role=checkbox]:hover{background:rgba(180,105,74,.08)}
.row[role=checkbox]:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.row[aria-checked=true]::before{background:var(--clay);box-shadow:inset 0 0 0 3px #ebe3d6}
.row[aria-checked=true] b{color:var(--clay)}

#tally{position:fixed;left:50%;bottom:18px;z-index:20;width:min(620px,calc(100% - 32px));transform:translate(-50%,140%);transition:transform .5s cubic-bezier(.2,.8,.2,1);background:var(--deep);color:#f4efe7;border-radius:20px;padding:12px 14px 12px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 14px 40px rgba(38,35,31,.32)}
#tally.show{transform:translate(-50%,0)}
#tally .tname{font-size:13px;opacity:.75;line-height:1.5}
#tally .tsum{font-family:"Shippori Mincho",serif;font-size:24px;line-height:1.3;white-space:nowrap}
#tally .tsum small{font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;margin-left:8px;opacity:.85}
#tally a{background:var(--clay);color:#fff;text-decoration:none;padding:10px 18px;border-radius:99px;font-size:14px;white-space:nowrap}

#open-now{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(244,239,231,.4);border-radius:99px;padding:5px 16px;font-size:14px}
#open-now i{width:9px;height:9px;border-radius:50%;background:#9b958a}
#open-now.on i{background:#8fd694;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,214,148,.7)}100%{box-shadow:0 0 0 12px rgba(143,214,148,0)}}

@media (max-width:520px){#tally .tname{display:none}#tally .tsum{font-size:21px}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.mark,#open-now.on i{animation:none}#tally{transition:none}}