.stage{position:relative;height:clamp(560px,calc(100vh - 64px),840px);height:clamp(560px,calc(100svh - 64px),840px);overflow:hidden;background:var(--board)}.welcome{position:absolute;left:50%;top:50%;z-index:2;width:min(680px,calc(100% - 48px));transform:translate(-50%,-50%);text-align:center;pointer-events:none}.welcome h1{margin:0;font-size:clamp(2.5rem,1.6rem + 3vw,4rem);font-weight:720;line-height:1;letter-spacing:-.03em}.welcome h1 .br{display:block}.welcome .lead{margin:22px auto 0;max-width:31em;font-size:19px;line-height:1.45;color:var(--grey);text-wrap:balance}.sec-how,.sec-where{padding:80px 12px 0}.manual{container:manual/inline-size;position:relative;max-width:1416px;margin:0 auto;border-radius:16px;background:var(--slate);overflow:hidden}.manual-body{padding:28px 0 72px}.mds{container-type:inline-size;position:relative;display:none;margin:0 auto;width:min(calc(100cqw - 48px),calc(var(--lw) * 1.08px));aspect-ratio:var(--lw) /var(--lh);--u:calc(100cqw / var(--lw))}.mds-wide{--lw:1320;--lh:560}.mds-mid{--lw:760;--lh:1010}.mds-phone{--lw:360;--lh:1170;width:min(calc(100cqw - 12px),calc(var(--lw) * 1.08px))}@container manual (min-width: 1100px){.mds-wide{display:block}}@container manual (min-width: 640px) and (max-width: 1099.98px){.mds-mid{display:block}}@container manual (max-width: 639.98px){.mds-phone{display:block}.manual-body{padding-bottom:58px}}.mn{position:absolute;z-index:3;box-sizing:border-box;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));min-height:calc(144 * var(--u));padding:calc(20 * var(--u));color:var(--note-ink);font-size:calc(16 * var(--u));line-height:1.6;font-weight:430;white-space:pre-wrap;border-radius:calc(14 * var(--u));box-shadow:var(--shadow-note)}.mn.is-lifted{z-index:6;transform:rotate(var(--tilt,4deg)) scale(1.04);box-shadow:var(--shadow-lifted)}.mn.is-editing{outline:calc(2 * var(--u)) solid var(--teal);outline-offset:calc(3 * var(--u))}.mn-x{position:absolute;top:calc(-10 * var(--u));right:calc(-10 * var(--u));display:none;box-sizing:border-box;width:calc(26 * var(--u));height:calc(26 * var(--u));padding:calc(3 * var(--u));border:calc(2 * var(--u)) solid #fff;border-radius:50%;background:var(--ink);color:#fff}.mn-x svg,.mn.is-hover .mn-x{display:block}.mn-x svg{width:100%;height:100%}.caret{display:inline-block;width:calc(2 * var(--u));height:1.15em;margin-left:calc(1 * var(--u));background:var(--ink);vertical-align:-.2em}.spot{position:absolute;z-index:9;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));margin:calc(-15 * var(--u)) 0 0 calc(-15 * var(--u));transition:transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}.spot .spot-ring{inset:0;background:rgba(55,159,162,.34)}.spot .spot-dot,.spot .spot-ring{position:absolute;border-radius:50%;transition:transform .8s cubic-bezier(.16,1,.3,1)}.spot .spot-dot{left:calc(7 * var(--u));top:calc(7 * var(--u));width:calc(16 * var(--u));height:calc(16 * var(--u));background:var(--teal);box-shadow:0 0 0 calc(2 * var(--u)) #fff}.spot.on-x{z-index:5;width:calc(44 * var(--u));height:calc(44 * var(--u));margin:calc(-22 * var(--u)) 0 0 calc(-22 * var(--u))}.spot:hover .spot-ring{transform:scale(1.25)}.spot:hover .spot-dot{transform:scale(.9)}.card{position:absolute;z-index:10;box-sizing:border-box;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));padding:calc(11 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));border-radius:calc(16 * var(--u));background:var(--card);transform-origin:var(--o,0 50%);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}.card b{display:block;font-size:max(13px,calc(15 * var(--u)));font-weight:650;line-height:1.25}.card .t{display:block;margin-top:calc(4 * var(--u));font-size:max(12px,calc(13.5 * var(--u)));line-height:1.4;color:var(--grey);text-wrap:pretty}.manual[data-reveal=wait] .spot{transform:scale(0);transition:none}.manual[data-reveal=wait] .card{opacity:0;transform:scale(.8);transition:none}.trail{inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}.m-label,.trail{position:absolute}.m-label{bottom:18px;z-index:11;margin:0;font-size:22px;font-weight:550;letter-spacing:-.01em;color:#fff}.m-label.left{left:22px}.m-label.right{right:22px}.diagram{container:diagram/inline-size;max-width:1320px;margin:0 auto;padding:0 12px}.diagram svg{width:100%;height:auto;overflow:visible}.diagram text{font-family:var(--font)}.diagram .mono{font-variation-settings:"MONO" 1}.diagram .dg-wide{display:none}.diagram .dg-narrow{display:block;max-width:520px;margin:0 auto}@container diagram (min-width: 1036px){.diagram .dg-wide{display:block}.diagram .dg-narrow{display:none}}@media (max-width:760px){.stage{height:clamp(600px,calc(100vh - 56px),760px);height:clamp(600px,calc(100svh - 56px),760px)}.welcome{top:36px;width:calc(100% - 36px);transform:translateX(-50%)}.welcome h1{font-size:40px}.welcome .lead{margin-top:16px;font-size:16.5px}.welcome .hint{margin-top:16px;font-size:14px}.sec-how,.sec-where{padding-top:64px}.sec-how{padding-left:8px;padding-right:8px}.m-label{font-size:17px;bottom:14px}.m-label.left{left:16px}.m-label.right{right:16px}.diagram{padding:0 6px}}@media (min-width:761px) and (max-height:500px){.welcome{top:28px;transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.card,.spot,.spot .spot-dot,.spot .spot-ring{transition:none}}