/* GHIM's guided session on iPhone: the colour field, clock, station wheel, dock and exercise sheet. */
.app-session { color: #fff5ed; font-family: var(--sf); }
.app-session > * { position: absolute; }
.ss-field { inset: 0; background: #ad3d33; }
.ss-glow { position: absolute; inset: 0; }
.ss-sb { left: 0; top: 0; width: 393px; height: 54px; }
.app-session .sb-batt { box-shadow: inset 0 0 0 1.2px currentColor; opacity: 0.9; }
.ss-top { left: 22px; right: 22px; top: 64px; display: flex; justify-content: space-between; align-items: center; opacity: 0; }
.ss-el small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.ss-el b { font-family: var(--sfr); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-end { height: 32px; padding: 0 16px; display: grid; place-items: center; border-radius: 16px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px currentColor; }
.ss-clock { left: 0; right: 0; top: 136px; text-align: center; }
.ss-clock b { font-family: var(--sfr); font-size: 56px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.ss-drain { left: 141px; top: 212px; width: 110px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.25); }
.ss-drain i { position: absolute; inset: 0; border-radius: 1px; background: currentColor; transform-origin: 0 50%; }
.ss-voice { left: 0; right: 0; top: 226px; height: 22px; text-align: center; font-size: 16px; }
.ss-voice span { position: absolute; left: 0; right: 0; top: 0; opacity: 0.86; }
.ss-voice .v-breathe { opacity: 0; }
.ss-wheel { left: 0; right: 0; top: 470px; height: 296px; overflow: hidden; }
.sw-in { position: absolute; left: 38px; right: 26px; top: 0; will-change: transform; }
.sw-row { position: relative; height: 64px; padding-left: 30px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sw-row::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1.5px; background: currentColor; opacity: 0.22; }
.sw-node { position: absolute; left: 0; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; opacity: 0.35; }
.sw-row.rest .sw-node { width: 8px; height: 8px; left: 2px; top: 28px; }
.sw-row b { font-size: 19px; font-weight: 600; white-space: nowrap; }
.sw-row.rest b { font-size: 16px; font-weight: 500; opacity: 0.78; }
.sw-row small { font-size: 13px; opacity: 0.72; white-space: nowrap; }
.sw-row.now .sw-node { opacity: 1; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22); }
.sw-row.now b { font-size: 22px; font-weight: 700; }
.sw-row.done b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ss-prog { left: 28px; right: 28px; top: 768px; opacity: 0; }
.ss-prog small { font-size: 12px; opacity: 0.8; }
.ss-prog small b { font-weight: 700; }
.ss-prog > i { position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.ss-prog > i > i { position: absolute; inset: 0; border-radius: 2px; background: currentColor; transform-origin: 0 50%; }
.ss-dock { left: 0; right: 0; top: 806px; height: 48px; }
.ss-dock > span { position: absolute; top: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; font-weight: 600; }
.ss-dock .gl { width: 15px; height: 15px; }
.ss-pause { left: 0; right: 0; }
.ss-resume { left: 50%; width: 150px; border-radius: 24px; background: currentColor; opacity: 0; }
.ss-resume b, .ss-resume .gl { color: #ad3d33; }
.ss-skip { left: 70px; width: 80px; opacity: 0; }
.ss-reset { right: 70px; width: 80px; opacity: 0; }
.ss-touch { left: 152px; top: 120px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); opacity: 0; }

/* the exercise sheet: the reading wash, the move, the steppers */
.ss-sheet { left: 0; right: 0; top: 118px; height: 780px; border-radius: 36px 36px 0 0; padding: 26px 24px 0; visibility: hidden; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.25); }
.ss-sheet .sh-grab { background: currentColor; opacity: 0.25; }
.sx-ctx { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; }
.sx-name { display: block; margin-top: 2px; font-size: 24px; font-weight: 700; }
.sx-motion { position: relative; height: 214px; margin-top: 14px; border-radius: 22px; background: #fbf7f5; overflow: hidden; }
.sx-today, .sx-step { margin-top: 12px; height: 50px; display: grid; grid-template-columns: auto 40px 1fr 40px; align-items: center; gap: 10px; padding: 0 6px 0 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.5); }
.sx-step { grid-template-columns: 40px 1fr 40px; padding: 0 6px; }
.sx-today small { font-size: 13px; font-weight: 600; opacity: 0.6; }
.sx-today b, .sx-step b { text-align: center; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sx-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.75); }
.sx-btn .gl { width: 15px; height: 15px; }
.sx-note { margin-top: 8px; font-size: 12px; opacity: 0.6; }
.sx-how { display: block; margin-top: 16px; font-size: 16px; font-weight: 700; }
.sx-steps { list-style: none; margin-top: 8px; display: grid; gap: 7px; }
.sx-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; font-size: 13px; line-height: 1.35; }
.sx-steps li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255, 255, 255, 0.6); }

/* the celebration and the share studio */
.app-complete { color: #fff; font-family: var(--sf); }
.app-complete > * { position: absolute; }
.cs-sky { inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 46%, rgba(255, 196, 120, 0.16), transparent 70%), linear-gradient(180deg, #170c26 0%, #2a1030 55%, #3a1018 100%); }
.cs-sparks { inset: 0; overflow: hidden; }
.cs-spark { position: absolute; border-radius: 2px; opacity: 0.8; will-change: transform; }
.cs-sb { left: 0; top: 0; width: 393px; height: 54px; }
.cs-done { left: 0; right: 0; top: 330px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs-orb { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 12px rgba(255, 220, 160, 0.5); margin-bottom: 28px; }
.cs-done small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: #ffb36b; }
.cs-done b { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.cs-done span { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.cs-see { left: 28px; right: 28px; top: 790px; height: 52px; border-radius: 26px; display: grid; place-items: center; font-size: 16px; font-weight: 600; color: #1d1020; background: #fff4e6; }
.cs-studio { inset: 0; opacity: 0; }
.cs-h { position: absolute; left: 24px; top: 70px; font-size: 22px; font-weight: 700; }
.cs-p { position: absolute; left: 24px; top: 102px; font-size: 13px; color: rgba(255, 255, 255, 0.64); }
.cs-card { position: absolute; left: 92px; top: 136px; width: 210px; height: 374px; }
.sc { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; }
.sc-skin { position: absolute; inset: 0; opacity: 0; }
.sc-skin[data-i="0"] { opacity: 1; }
.sc-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1.5px); background-size: 23px 31px; opacity: 0.35; }
.sc-frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sc-in { position: absolute; inset: 9% 11%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.sc-ov { margin-top: 10%; font-size: 7.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--sc-ink, #ffd27a); }
.sc-name { margin-top: 6%; font-size: 14px; font-weight: 700; }
.sc-date { margin-top: 3%; font-size: 8.5px; color: rgba(255, 255, 255, 0.6); }
.sc-hero { margin-top: auto; font-family: var(--sfr); font-size: 34px; font-weight: 800; line-height: 1; }
.sc-lab { font-style: normal; margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--sc-ink, #ffd27a); }
.sc-row { margin-top: 9%; width: 100%; display: flex; justify-content: space-around; padding: 6px 2px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.sc-row b { display: block; font-size: 9.5px; font-weight: 700; }
.sc-row small { font-size: 7px; color: rgba(255, 255, 255, 0.6); }
.sc-mark { margin: 7% 0 6%; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; color: var(--sc-ink, #ffd27a); }
.cs-picks { position: absolute; left: 14px; right: 14px; top: 548px; display: flex; justify-content: space-between; }
.cs-pick { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cs-pick i { position: relative; width: 50px; height: 88px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cs-pick i img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-pick small { font-size: 10.5px; color: rgba(255, 255, 255, 0.62); }
.cs-pick.on i { box-shadow: 0 0 0 2px #ffd27a, 0 0 18px rgba(255, 210, 122, 0.4); }
.cs-pick.on small { color: #ffd27a; font-weight: 600; }
.cs-share { position: absolute; left: 28px; right: 28px; top: 700px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; color: #2a1a06; background: #ffd27a; }
.cs-share .gl { width: 17px; height: 17px; }
.cs-donebtn { position: absolute; left: 0; right: 0; top: 770px; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
/* the copy that lifts off the glass */
.air-card { position: absolute; left: 0; top: 0; width: 210px; height: 374px; transform-origin: 0 0; visibility: hidden; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)); }
.ss-black { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 20; pointer-events: none; }