.coach{position:absolute;left:0;top:0;z-index:3;width:max-content;max-width:min(calc(100vw - 24px),calc(580 * var(--u)));pointer-events:none}.coach .tip{--face: var(--ink);--lift: calc(5 * var(--u));--side: color-mix(in srgb, var(--face) 70%, var(--ink));background:var(--gloss),var(--face);border:0;box-shadow:inset 0 calc(2 * var(--u)) 0 #f3f6f84d,0 var(--lift) 0 var(--side),0 calc(var(--lift) + 5 * var(--u)) calc(14 * var(--u)) var(--shade);position:relative;display:flex;align-items:center;gap:calc(12 * var(--u));box-sizing:border-box;width:100%;text-align:left;border-radius:calc(22 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u));color:var(--cream);font-size:max(16px,calc(22 * var(--u)));font-weight:900;line-height:1.22;pointer-events:auto;cursor:pointer}.coach .ico{flex:none;width:max(34px,calc(44 * var(--u)));height:max(34px,calc(44 * var(--u)));border-radius:50%;display:grid;place-items:center;background:var(--gloss),var(--gold);box-shadow:0 calc(3 * var(--u)) 0 color-mix(in srgb,var(--gold) 70%,var(--ink))}.coach .ico svg{width:70%;height:70%}.coach .say{display:flex;flex-direction:column;gap:calc(6 * var(--u));min-width:0}.coach .txt{text-wrap:pretty}.coach .keys{display:flex;gap:calc(6 * var(--u))}.coach .keys:empty{display:none}.coach .cap{background:var(--cream);color:var(--ink);font-size:max(12px,calc(14 * var(--u)));font-weight:900;line-height:1.2;border-radius:calc(7 * var(--u));padding:calc(2 * var(--u)) calc(9 * var(--u));box-shadow:0 calc(2.5 * var(--u)) 0 #f3f6f873}.coach .ok{flex:none;align-self:flex-end;background:var(--gloss),var(--gold);color:var(--ink);font-size:max(13px,calc(16 * var(--u)));border-radius:999px;padding:calc(4 * var(--u)) calc(12 * var(--u));box-shadow:0 calc(3 * var(--u)) 0 color-mix(in srgb,var(--gold) 70%,var(--ink));white-space:nowrap}.coach .tip:active{translate:0 calc(3 * var(--u));--lift: calc(2 * var(--u))}.coach .arrow{position:absolute;left:var(--ax, 50%);width:calc(20 * var(--u));height:calc(20 * var(--u));margin-left:calc(-10 * var(--u));rotate:45deg;border-radius:calc(4 * var(--u));background:var(--ink);pointer-events:none}.coach.above .arrow{top:calc(100% - 7 * var(--u))}.coach:not(.above) .arrow{top:calc(-9 * var(--u))}.coach.fresh .tip{animation:tipin .42s var(--spring) both}.coach.fresh .arrow{animation:tipfade .42s ease both}.coach.above.fresh .tip{transform-origin:var(--ax, 50%) 110%}.coach:not(.above).fresh .tip{transform-origin:var(--ax, 50%) -10%}.hud.coach-low .textbox{visibility:hidden}.hud:has(.pauseov:not(.hidden)) .coach{display:none}@media(pointer:coarse){.coach .keys{display:none}}@keyframes tipin{0%{opacity:0;scale:.5}}@keyframes tipfade{0%{opacity:0}}.scr.title .big.how{--face: var(--cream);font-size:max(16px,calc(21 * var(--u)))!important;min-height:max(48px,calc(54 * var(--u)));padding:calc(8 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u))}.scr.title .big.how svg{width:calc(32 * var(--u));height:calc(32 * var(--u))}.howto .panel{position:relative;width:min(calc(560 * var(--u)),calc(100vw - 24px));padding:calc(22 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u))}.howto h2{margin:0 calc(40 * var(--u)) calc(10 * var(--u));font-size:max(22px,calc(34 * var(--u)));font-weight:900;color:var(--gold);-webkit-text-stroke:calc(3.5 * var(--u)) var(--ink);paint-order:stroke fill;letter-spacing:calc(1 * var(--u));text-shadow:0 calc(4 * var(--u)) 0 var(--ink)}.howto .pic{display:block;width:100%;aspect-ratio:240 / 120;border-radius:calc(20 * var(--u));background:var(--snow);box-shadow:inset 0 calc(3 * var(--u)) 0 #2b22331a;touch-action:pan-y}.howto .pic>svg{display:block;width:100%;height:100%}.howto .line{margin:calc(14 * var(--u)) 0 calc(16 * var(--u));min-height:2.5em;font-size:max(17px,calc(24 * var(--u)));font-weight:900;line-height:1.25;white-space:pre-line}.howto .line .green{color:var(--green)}.howto .line .red{color:var(--red)}.howto .line .water{color:var(--water)}.howto .nav{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u))}.howto .nav .big{gap:calc(4 * var(--u));padding-left:calc(18 * var(--u));padding-right:calc(22 * var(--u));font-size:max(16px,calc(21 * var(--u)))!important}.howto .nav .big svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}.howto .nav .next{--face: var(--gold);padding-left:calc(24 * var(--u));padding-right:calc(16 * var(--u))}.howto .nav .prev{--face: var(--road)}.howto .nav .prev:disabled{visibility:hidden}.howto .dots{display:flex;gap:calc(8 * var(--u))}.howto .dots span{width:calc(12 * var(--u));height:calc(12 * var(--u));min-width:8px;min-height:8px;border-radius:50%;background:#2b223333;transition:background .2s,scale .2s var(--spring)}.howto .dots span.on{background:var(--ink);scale:1.3}.howto .shut{position:absolute;top:calc(14 * var(--u));right:calc(14 * var(--u));z-index:1}.howto .card.fresh{animation:cardin .32s var(--spring) both}.howto .card.fresh.back{animation-name:cardinback}@keyframes cardin{0%{opacity:0;translate:calc(40 * var(--u)) 0}}@keyframes cardinback{0%{opacity:0;translate:calc(-40 * var(--u)) 0}}@media(orientation:portrait)and (max-width:700px){.howto .panel{padding:calc(18 * var(--u)) calc(16 * var(--u))}.howto .nav .prev .lbl{display:none}.howto .nav .prev{padding-left:calc(14 * var(--u));padding-right:calc(14 * var(--u))}}@media(prefers-reduced-motion:reduce){.coach.fresh .tip,.coach.fresh .arrow,.howto .card.fresh{animation:none!important}}
