/* Set-up for a new family (#setup): the sheet, Pass it to them and Now round again, each with its own parts below; and How to play. */
body[data-mode="setup"] #app{padding-top:0}
.ob{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s5);min-height:calc(100dvh - var(--s7));padding-bottom:var(--s7)}
.ob-logo{display:block;width:clamp(150px,15vw,210px);height:auto}
.ob-msg{margin:0;font:700 17px/1.4 var(--fD);color:var(--err)}
.ob-msg:empty{display:none}

/* How to play (the HowToPlay board): four steps on the buddy's habitat, each picture the real thing it is about.
   The habitat runs up behind the header, as on Home. Four across from 1200px, with an arrow in each gap; two on a
   tablet; one on a phone. Never three and one left over. */
/* [data-mode] so this outranks the rich-mode tab bar padding in mq.css; .how-in pads for the tab bar itself */
body[data-route="how"][data-mode] #app{max-width:none;padding:0}
.how{position:relative;isolation:isolate;min-height:100dvh;margin-top:calc(-1 * var(--headerH));padding-top:var(--headerH);overflow:hidden;color:var(--ivory)}
.how>.ui-scene{z-index:-3}
.how>.ui-scene .ui-scene-img{object-position:center 30%;opacity:.55}
.how-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.72) 0%,rgba(5,8,23,.5) 26%,rgba(5,8,23,.84) 58%,#050817 100%)}
.how-in{max-width:1216px;margin:0 auto;padding:22px clamp(20px,3.5vw,48px) 56px}
.how-title{margin:0;font:700 clamp(44px,5.4vw,66px)/1 var(--fH);letter-spacing:-.012em;color:var(--ivory)}
.how-title:focus{outline:0}
.how-sub{margin:14px 0 0;font:600 clamp(19px,1.8vw,22px)/1.35 var(--fD);color:#c9d2ee}
/* Watch the video, beside How to play's subtitle (the HowToPlay board): gold words, a small play ring, nothing louder */
.how-subrow{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.how-subrow .how-sub{margin:0}
.how-watch{min-height:var(--tap);display:inline-flex;align-items:center;gap:10px;padding:0 4px;border:0;background:none;color:var(--gold2);font:700 17px/1.2 var(--fD);cursor:pointer}
.how-watch-i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(232,196,106,.16);box-shadow:inset 0 0 0 1.5px var(--gold)}
.how-watch-i .ui-icon{width:13px;height:13px;margin-left:2px}
.how-watch-w{text-decoration:underline;text-underline-offset:4px}
.how-watch-t{font-weight:600;color:#9aa6d2}
.how-watch:hover .how-watch-w{color:#fff}
.how-watch:focus-visible{outline:3px solid #ffd65c;outline-offset:4px;border-radius:10px}
.how-track{--g:28px;position:relative;margin-top:34px}
.how-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.how-step{display:flex;flex-direction:column;border-radius:var(--rC);overflow:hidden;background:rgba(8,12,34,.88);box-shadow:inset 0 0 0 1px rgba(169,180,220,.26),0 26px 44px -26px rgba(0,0,0,.9);animation:how-deal 640ms cubic-bezier(.17,.84,.3,1) both;animation-delay:calc(80ms + var(--i) * 120ms)}
@keyframes how-deal{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.how-pic{height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse 70% 62% at 50% 52%,rgba(255,252,245,.12) 0%,rgba(255,252,245,0) 72%)}
.how-pic.is-gold{background:radial-gradient(ellipse 70% 62% at 50% 56%,rgba(232,196,106,.18) 0%,rgba(232,196,106,0) 72%)}
.how-pic.is-leaf{background:radial-gradient(ellipse 70% 62% at 50% 56%,rgba(159,219,110,.2) 0%,rgba(159,219,110,0) 72%)}
.how-say{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:6px 20px 24px}
.how-head{display:flex;align-items:center;gap:10px}
.how-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--ink);font:800 18px var(--fN)}
.how-step h2{margin:0;font:700 26px/1.1 var(--fH);color:var(--ivory);text-wrap:balance}
.how-say p{margin:0;font:400 18px/1.5 var(--fD);color:#c9d2ee}
/* 1: a paper, with a typed answer and the real Submit button */
.how-paper{width:186px;box-sizing:border-box;padding:14px 16px 16px;border-radius:6px;background:var(--sheet);color:var(--pInk);transform:rotate(-4deg);box-shadow:0 22px 32px -16px rgba(0,0,0,.85),0 2px 4px rgba(0,0,0,.25)}
.how-paper p{margin:0}
.how-paper-k{font:700 11px/1.2 var(--fD);letter-spacing:.05em;color:var(--pInk2)}
.how-paper .how-paper-q{margin-top:8px;font:700 23px/1.2 var(--fR)}
.how-paper-a{margin-top:8px;display:flex;align-items:center;height:40px;padding:0 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 2px var(--navyHi);font:700 22px/1 var(--fR)}
.how-paper-a i{width:2px;height:24px;margin-left:3px;background:var(--navyHi);animation:how-caret 1.1s steps(1) infinite}
@keyframes how-caret{50%{opacity:0}}
.how-paper-go{margin:12px 0 0 auto;width:max-content;display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;background:linear-gradient(180deg,var(--navyHi),var(--navyLow) 82%);color:#fff;font:700 12px/1 var(--fD)}
.how-paper-go svg{width:13px;height:13px;stroke-width:3.4}
/* 2: stars for one paper */
.how-stars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.how-stars li{display:flex;align-items:center;gap:14px}
.how-stars [role="img"]{flex:0 0 auto;display:flex;gap:3px}
.how-stars b{font:700 17px/1.2 var(--fD);color:var(--ivory)}
.how-star{width:30px;height:30px;color:var(--gold);filter:drop-shadow(0 0 8px rgba(232,196,106,.55))}
.how-star.is-off{color:rgba(255,250,240,.34);filter:none}
.how-star.is-off path{fill:none;stroke-width:1.4}
/* 3: four stars to a pack */
.how-meter{display:flex;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(5,8,23,.72);box-shadow:inset 0 0 0 1px rgba(246,220,149,.45)}
.how-star.is-next{color:var(--gold2);transform-origin:50% 55%;animation:how-next 1.8s ease-in-out infinite}
@keyframes how-next{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.16);opacity:1}}
.how-down{width:26px;height:26px;margin:6px 0 2px;color:var(--gold2);transform:rotate(90deg);stroke-width:2.6}
.how-pack{width:78px;height:104px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(232,196,106,.45));animation:how-float 4.2s ease-in-out infinite}
@keyframes how-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
/* 4: the three cards out of it, fanned */
.how-fan{position:relative;display:block;width:96px;height:128px;margin-top:10px}
.how-card{position:absolute;left:0;top:0;width:96px;height:128px;transform-origin:50% 100%;animation:how-fan 720ms cubic-bezier(.2,1.25,.4,1) 1.1s both}
.how-card img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7px;box-shadow:0 16px 24px -12px rgba(0,0,0,.9)}
.how-card.is-l{--x:-50px;--r:-13deg;transform:translateX(-50px) rotate(-13deg)}
.how-card.is-r{--x:50px;--r:13deg;transform:translateX(50px) rotate(13deg)}
.how-card.is-m{--x:0px;--r:0deg;top:-8px}
@keyframes how-fan{from{transform:translateY(18px)}to{transform:translateX(var(--x)) rotate(var(--r))}}
/* One arrow in each gap, level with the pictures */
.how-arrow{position:absolute;z-index:2;top:97px;left:calc((100% - 3 * var(--g)) / 4 * var(--k) + var(--g) * var(--k) - var(--g) / 2);margin-left:-18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 0 0 5px rgba(5,8,23,.92),0 0 18px rgba(232,196,106,.5);animation:how-pop 420ms cubic-bezier(.2,1.7,.4,1) both;animation-delay:calc(500ms + var(--k) * 120ms)}
.how-arrow svg{width:19px;height:19px;stroke-width:3}
@keyframes how-pop{from{transform:scale(0)}to{transform:none}}
@media (max-width:1199px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.how-arrow{display:none}}
@media (max-width:1023px){.how-in{padding-bottom:calc(var(--tabbarH) + env(safe-area-inset-bottom) + var(--s6))}}
@media (max-width:599px){.how-steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
.how-step,.how-arrow,.how-paper-a i,.how-star.is-next,.how-pack{animation:none}
.how-card{animation:none}
.how-card.is-m{transform:none}
}

/* Now round again (the StartRoundAgain board), where set-up ends: the same four steps on the buddy's habitat, Do a paper lit gold
   as the next one, the two just done ringed green and ticked, a dashed loop from the last back to the first, and one way on.
   No header or tab bar in set-up, so the habitat starts at the top. The loop and the arrows go once the steps stop being a row. */
body[data-mode="setup"] #app:has(>.how-round){max-width:none;padding:0}
.how.how-round{margin-top:0;padding-top:0;background:#050817}
.how-round .how-in{padding:52px clamp(20px,3.5vw,48px)}
.how-round .how-step{position:relative}
.how-step.is-next{box-shadow:inset 0 0 0 3px var(--gold),0 0 40px -6px rgba(232,196,106,.45),0 26px 44px -26px rgba(0,0,0,.9)}
.how-tag{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 13px;border-radius:999px;font:800 14px/1 var(--fD);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.how-tag.is-next{background:var(--gold)}
.how-tag svg{width:15px;height:15px;stroke-width:3.4}
/* Room for the tag above each picture, and the arrows level with what the pictures show */
.how-round .how-pic{height:252px;box-sizing:border-box;padding-top:36px}
.how-round .how-arrow{top:126px}
/* The meter is empty: the free pack was the first, and now the stars fill it */
.how-star.is-off.is-ring{color:var(--gold2)}
.how-card.is-buddy img{box-shadow:0 0 0 3px var(--gold),0 18px 26px -12px rgba(0,0,0,.95)}
/* the room the board leaves above the button, where the loop back used to be */
.how-gap{height:66px}
.how-go{margin:26px 0 0;text-align:center}
.mq-btn.ob-round-go,.mq-btn.ob-round-go:hover,.mq-btn.ob-round-go:active{min-height:84px;max-width:100%;box-sizing:border-box;padding:0 clamp(24px,5vw,50px);border:1px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 clamp(21px,5.4vw,27px)/1.15 var(--fD);letter-spacing:-.01em;text-wrap:balance;text-shadow:none;box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 22px 36px -18px rgba(0,0,0,.9);transition:transform 110ms,box-shadow 150ms}
.mq-btn.ob-round-go:hover{box-shadow:inset 0 2px #fff,0 7px 0 rgba(72,82,122,.55),0 0 0 6px rgba(255,255,255,.28)}
.mq-btn.ob-round-go:active{transform:translateY(2px)}
.mq-btn.ob-round-go:focus-visible{outline:3px solid #ffd65c;outline-offset:5px}
@media (max-width:1199px){.how-gap{display:none}.how-go{margin-top:34px}}
@media (prefers-reduced-motion:reduce){.mq-btn.ob-round-go,.mq-btn.ob-round-go:hover,.mq-btn.ob-round-go:active{transition:none}}

/* The grown-up's two screens (look A on the StartSheet and StartPassIt boards, Jon 27 Oct): the Space habitat edge to edge,
   drifting very slowly, darkened on the left where the words sit and left bright on the right; the logo on its own at the top. */
body[data-mode="setup"] #app:has(>:is(.ob-sheet,.ob-pass-it)){max-width:none;padding:0}
.ob.ob-sheet,.ob.ob-pass-it{display:flex;flex-direction:column;gap:0;min-height:100dvh;padding:0;overflow:hidden;background:#050817;color:var(--ivory)}
.ob-scene{z-index:-2}
.ob-scene .ui-scene-img{object-position:72% 50%;transform-origin:72% 50%;animation:ob-drift 48s ease-in-out infinite alternate}
@keyframes ob-drift{from{transform:scale(1.03)}to{transform:scale(1.1) translateX(-1.2%)}}
.ob-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.6) 0%,rgba(5,8,23,0) 16%,rgba(5,8,23,0) 72%,rgba(5,8,23,.9) 100%),linear-gradient(90deg,rgba(5,8,23,.9) 0%,rgba(5,8,23,.64) 40%,rgba(5,8,23,.1) 72%,rgba(5,8,23,.3) 100%)}
.ob-top{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;padding:22px clamp(16px,3vw,40px) 0}
.ob-top .ob-logo{width:168px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.ob-eyebrow{margin:0;font:800 14px/1.3 var(--fD);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* The one sheet: Step 1 (their name and school year) and Step 2 (the grown-up passcode) on two frosted cards, then Continue,
   always gold. The words keep to the left 780px; the habitat keeps the right. One card above the other on phones. */
.ob-sheet-in{flex:1 1 auto;width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;padding:28px clamp(16px,3vw,40px) 44px;display:flex;align-items:center}
.ob-col{flex:0 1 780px;min-width:0}
.ob-sheet-h{margin:10px 0 0;font:700 clamp(44px,6vw,76px)/.98 var(--fH);letter-spacing:-.02em;color:var(--ivory);text-shadow:0 4px 40px rgba(232,196,106,.28)}
.ob-parts{margin-top:26px;display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.ob-part{flex:1 1 290px;min-width:0;box-sizing:border-box;padding:24px;border-radius:26px;background:rgba(8,13,40,.6);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(0,0,0,.95)}
.ob-step{margin:0 0 12px;display:flex;align-items:center;gap:10px;font:800 13px/1 var(--fD);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ob-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#ffe9ad,#e9ba5f);color:#0b1236;font:700 16px/1 var(--fH);letter-spacing:0}
.ob-part-h{margin:0;font:700 24px/1.2 var(--fH);color:var(--ivory)}
.ob-sheet :is(.ob-sheet-h,.ob-part-h):focus{outline:0}
.ob-field{margin-top:18px}
.ob-field input{width:100%;box-sizing:border-box;min-height:60px;padding:0 18px;border:0;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(232,196,106,.45);color:var(--ivory);font:700 26px/1.2 var(--fH)}
.ob-field input:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.ob-hint{margin:8px 0 0;font:400 14px/1.45 var(--fD);color:#a9b4dc}
.ob-label{margin:22px 0 8px;font:600 15px/1.3 var(--fD);color:#c9d2ee}
.ob-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:15px;background:rgba(255,255,255,.08)}
.ob-seg-b{min-height:52px;padding:0 22px;border:0;border-radius:12px;background:transparent;color:#c9d2ee;font:700 17px/1.2 var(--fD);cursor:pointer;transition:background 140ms,color 140ms}
.ob-seg-b:hover{color:#fff}
.ob-seg-b[aria-pressed="true"]{background:var(--gold);color:#0b1236}
.ob-seg-b:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.ob-pass-note{margin:6px 0 0;min-height:42px;font:400 15px/1.4 var(--fD);color:#c9d2ee}
.ob-pass-note.is-wrong{color:#ffc2c7}
.ob-pass-note.is-ok{color:#bdefc7}
.ob-dots{margin-top:6px;display:flex;justify-content:center;gap:14px}
.ob-dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(201,210,238,.6);transition:background 140ms}
.ob-dot.is-on{background:#e8c46a;box-shadow:0 0 14px rgba(232,196,106,.75)}
.ob-dots.is-done .ob-dot{background:#7ed08c;box-shadow:0 0 14px rgba(126,208,140,.7)}
.ob-pad{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ob-key{min-height:58px;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(201,210,238,.22);color:var(--ivory);font:800 24px/1 var(--fH);cursor:pointer;transition:background 110ms,transform 90ms,box-shadow 120ms}
.ob-key:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(232,196,106,.55)}
.ob-key:active{transform:scale(.95)}
.ob-key:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.ob-key.is-fn{color:#c9d2ee}
.ob-key .ui-icon{width:24px;height:24px;stroke-width:2.2}
.ob-key.is-blank{background:none;box-shadow:none}
.ob-pass-retry{margin-top:16px}
.ob-code{margin-top:16px;padding:18px 20px;border-radius:16px;background:rgba(240,180,41,.12);box-shadow:inset 0 0 0 1.5px rgba(240,180,41,.45)}
.ob-code p{margin:0}
.ob-code-h{font:600 15px/1.4 var(--fD);color:var(--ivory)}
.ob-code .ob-code-v{margin-top:10px;font:800 clamp(28px,8.4vw,34px)/1.15 var(--fD);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#f6dc95;white-space:nowrap}
.ob-keep{white-space:nowrap}
.ob-code .ob-code-tip{margin-top:10px;font:400 14px/1.5 var(--fD);color:#c9d2ee}
.ob-go{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px}
.ob-sheet .ob-msg{font:600 16px/1.4 var(--fD);color:#ffc2c7;text-shadow:0 1px 8px rgba(0,0,0,.9)}
/* Continue: gold whether or not it is ready (Jon). Pressed too early, app.js says what is still missing. */
.mq-btn.ob-hand,.mq-btn.ob-hand:hover,.mq-btn.ob-hand:active,.mq-btn.ob-hand[aria-disabled="true"]{min-height:68px;padding:0 34px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:#0b1236;font:700 23px/1.1 var(--fH);text-shadow:none;box-shadow:inset 0 2px #fff6d2,0 6px 0 rgba(154,107,41,.45),0 22px 40px -18px rgba(232,196,106,.7);transition:transform 110ms,box-shadow 150ms}
.mq-btn.ob-hand:hover{box-shadow:inset 0 2px #fff6d2,0 6px 0 rgba(154,107,41,.45),0 0 0 7px rgba(246,220,149,.22)}
.mq-btn.ob-hand:active{transform:translateY(3px)}
.mq-btn.ob-hand:focus-visible{outline:3px solid #ffd65c;outline-offset:5px}
@media (max-width:639px){
.ob-scrim{background:linear-gradient(180deg,rgba(5,8,23,.66) 0%,rgba(5,8,23,.5) 30%,rgba(5,8,23,.5) 70%,rgba(5,8,23,.9) 100%)}
.ob-sheet-in{padding-top:20px}
.ob-part{padding:22px 20px}
.ob-go,.mq-btn.ob-hand{flex:1 1 100%}
}

/* Pass it to them: the same habitat, the words on the left and nothing else. */
.pi-wrap{flex:1 1 auto;width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;padding:20px clamp(16px,3vw,40px) 56px;display:flex;align-items:center}
.pi-say{flex:0 1 720px;min-width:0}
.pi-h{margin:14px 0 0;font:700 clamp(56px,7.4vw,96px)/.95 var(--fH);letter-spacing:-.025em;overflow-wrap:anywhere;color:var(--ivory);text-shadow:0 4px 50px rgba(232,196,106,.35)}
.pi-h:focus{outline:0}
.pi-sub{margin:22px 0 0;max-width:34ch;font:400 21px/1.5 var(--fD);color:#d6dcf2;overflow-wrap:anywhere}
.pi-act{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.ob-pass-it .ob-msg{margin:16px 0 0;font:600 16px/1.4 var(--fD);color:#ffc2c7;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.mq-btn.pi-go,.mq-btn.pi-go:hover,.mq-btn.pi-go:active{min-height:84px;padding:0 50px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:#0b1236;font:700 32px/1.1 var(--fH);text-shadow:none;box-shadow:inset 0 2px #fff6d2,0 6px 0 rgba(154,107,41,.45),0 22px 40px -18px rgba(232,196,106,.7);transition:transform 110ms,box-shadow 150ms}
.mq-btn.pi-go:hover{box-shadow:inset 0 2px #fff6d2,0 6px 0 rgba(154,107,41,.45),0 0 0 8px rgba(246,220,149,.22),0 22px 40px -18px rgba(232,196,106,.7)}
.mq-btn.pi-go:active{transform:translateY(3px)}
.mq-btn.pi-go:focus-visible{outline:3px solid #ffd65c;outline-offset:5px}
.mq-link.pi-back{min-height:48px;padding:10px 4px;font:600 17px/1.3 var(--fD);color:#c9d2ee}
.mq-link.pi-back:hover{color:#fff}
.mq-link.pi-back:focus-visible{outline:3px solid #ffd65c;outline-offset:3px}
.pi-in{animation:pi-in 700ms cubic-bezier(.2,.9,.3,1) both}
.pi-in-2{animation-delay:120ms}
.pi-in-3{animation-delay:240ms}
@keyframes pi-in{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:639px){
.pi-wrap{padding-top:32px;padding-bottom:40px}
.pi-act{gap:10px 20px}
.pi-act .mq-btn.pi-go{flex:1 1 100%;padding:0 24px;font-size:28px}
.pi-act .pi-back{margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
.ob-scene .ui-scene-img,.pi-in,.pi-in-2,.pi-in-3{animation:none}
.ob-key,.ob-dot,.ob-seg-b,.mq-btn.ob-hand,.mq-btn.pi-go,.mq-btn.pi-go:hover,.mq-btn.pi-go:active{transition:none}
.ob-key:active,.mq-btn.ob-hand:active{transform:none}
}