@font-face{
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(create-practice-resource-0-f43f1c7780d69792.ttf) format('truetype');
}
@font-face{
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(create-practice-resource-1-02e8f4be57ddc47c.ttf) format('truetype');
}
@font-face{
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(create-practice-resource-2-1d37d1e34c77be80.ttf) format('truetype');
}
@font-face{
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(create-practice-resource-3-9bfe70fd1d70600c.ttf) format('truetype');
}
@font-face{
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(create-practice-resource-4-36120862013ba0d8.ttf) format('truetype');
}
:root{
      --reference: none;
      --ink: #1b2522;
      --mist: #e8f5ef;
      --white: #f6fbf8;
      --accent: #aed9c9;
      --serif: 'Lora', Georgia, 'Times New Roman', serif;
      --sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    }
*{ box-sizing: border-box; }
html{ background: #f5f8f6; }
body{ margin: 0; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button,select{ font: inherit; }
button{ border: 0; padding: 0; cursor: pointer; }
button:focus-visible,select:focus-visible{ outline: 3px solid #c0ebd9; outline-offset: 5px; }
.screen{
      position: absolute; width: 375px; height: 812px; overflow: hidden;
      border-radius: 34px; isolation: isolate;
      box-shadow: 0 13px 28px rgba(33, 64, 54, .11), 0 0 0 14px rgba(195, 220, 209, .10);
    }
.setup{ left: 487px; top: 0; color: var(--white); background: var(--ink); }
.atmosphere{ position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #293f37; }
.waterfall-strip{
      position: absolute; left: 0; top: 0; width: 31px; height: 812px;
      background-image: var(--reference); background-size: 1600px 1200px;
      background-position: -133px -261px; transform: scaleX(12.1); transform-origin: top left; filter: blur(.85px) hue-rotate(-22deg);
    }
.waterfall-detail{
      position: absolute; inset: 0; background-image: var(--reference);
      background-size: 1600px 1200px; background-position: -125.5px -261px; filter: hue-rotate(-22deg);
      /* Remove every original UI region, retaining only the backdrop's photo. */
      mask-image:
        linear-gradient(to bottom, transparent 0 144px, #000 184px),
        radial-gradient(circle at 187.5px 391px, transparent 0 151px, #000 162px),
        radial-gradient(circle at 287px 286px, transparent 0 22px, #000 30px),
        radial-gradient(circle at 187.5px 673px, transparent 0 60px, #000 73px);
      mask-composite: intersect;
    }
.setup .waterfall-detail{
      background-image: none; mask-image: none;
    }
.setup .waterfall-detail::before,.setup .waterfall-detail::after{
      content: ''; position: absolute; left: 0; width: 375px;
      background-image: var(--reference); background-repeat: no-repeat;
      mask-image: linear-gradient(to bottom, transparent 0%, #000 16% 78%, transparent 100%);
    }
.setup .waterfall-detail::before{ top: 142px; height: 260px; background-size: 1600px 3120px; background-position: -125.5px -1053px; }
.setup .waterfall-detail::after{ top: 376px; height: 396px; background-size: 1600px 7200px; background-position: -125.5px -4806px; }
.atmosphere::after{
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(180deg, #1b2421 0%, rgba(27, 36, 33, .98) 12%, rgba(27, 36, 33, .18) 30%, transparent 75%, #30483e 100%),
        radial-gradient(ellipse at 83% 43%, rgba(22, 37, 31, .42), transparent 66%),
        radial-gradient(ellipse at 45% 88%, rgba(172, 210, 192, .3), transparent 38%);
    }
.waterfall-strip::after{ content: ''; position: absolute; inset: 0; background: rgba(84, 135, 115, .14); }
.screen-header{ position: absolute; inset: 57px 16px auto; height: 36px; text-align: center; }
.screen-header h1,.screen-header h2{ margin: 0; font: 500 26px/36px var(--serif); letter-spacing: -.25px; }
.icon-button{ position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #70736e; color: #fff; display: grid; place-items: center; }
.icon-button svg{ width: 15px; height: 15px; stroke-width: 1.6; }
svg{ display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav{
      --active-index: 0; --light-x: 24%;
      position: absolute; left: 16px; right: 16px; bottom: 22px; height: 65px;
      display: flex; align-items: center; padding: 4px; border-radius: 36px;
      border: 0; background: rgba(28, 47, 38, .13); isolation: isolate;
      box-shadow: 0 8px 22px rgba(8, 25, 17, .2), inset 0 2px 4px rgba(255, 255, 255, .2), inset 0 -3px 5px rgba(9, 24, 17, .14);
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    }
.bottom-nav::after{
      content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
      -webkit-backdrop-filter: blur(3px) saturate(145%);
      backdrop-filter: url(#nav-glass-refraction) blur(1px) saturate(145%);
      background: radial-gradient(ellipse at var(--light-x) 0%, rgba(255,255,255,.24), transparent 58%), linear-gradient(170deg, rgba(255,255,255,.07), transparent 42%, rgba(12,30,22,.1));
    }
.bottom-nav::before{
      content: ''; position: absolute; z-index: 1; top: 4px; left: 4px;
      width: calc((100% - 8px) / 4); height: calc(100% - 8px); border-radius: 31px;
      transform: translateX(calc(var(--active-index) * 100%)); border: 0; pointer-events: none;
      background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(241,255,247,.06) 58%, rgba(255,255,255,.13));
      box-shadow: inset 0 2px 5px rgba(255,255,255,.23), inset 0 -2px 4px rgba(20,40,29,.1), 0 3px 8px rgba(9,28,18,.12);
      transition: transform 360ms cubic-bezier(.2,.85,.2,1);
    }
.bottom-nav button{
      position: relative; z-index: 2; flex: 1; height: 100%; min-width: 0; border: 0;
      color: rgba(255,255,255,.88); background: transparent;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; border-radius: 31px; font-size: 12.5px; line-height: 16px; font-weight: 400;
      text-shadow: 0 1px 4px rgba(14,31,22,.42); -webkit-tap-highlight-color: transparent;
      transition: transform 180ms ease;
    }
.bottom-nav button:active{ transform: scale(.93); }
.bottom-nav button[aria-pressed="true"]{ color: #fff; font-weight: 500; }
.bottom-nav svg{ width: 25px; height: 25px; stroke-width: 1.75; }
.bottom-nav .nav-home-shell{ fill: none; }
.bottom-nav button[aria-pressed="true"] .nav-home-shell{ fill: currentColor; stroke: currentColor; }
.bottom-nav button[aria-pressed="true"] .nav-home-smile{ stroke: #426b59; }
@media (prefers-reduced-transparency: reduce){.bottom-nav{ background: #355347; }
.bottom-nav::after{ backdrop-filter: none; }}
.setup .screen-header{ top: 45px; }
.practice-options{ position: absolute; bottom: 190px; left: 0; right: 0; display: grid; gap: 9px; }
.option-group{ min-width: 0; margin: 0; padding: 0; border: 0; }
.option-group legend{ padding: 0; margin: 0 28px 0; color: #f2f8f4; font-size: 11px; font-weight: 700; letter-spacing: .1px; }
.pill-track{ display: flex; gap: 5px; overflow-x: auto; padding: 6px 28px 12px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 28px; overscroll-behavior-x: contain; cursor: grab; }
.pill-track::-webkit-scrollbar{ display: none; }
.pill-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.glass-pill{
      position: relative; flex: 0 0 auto; min-height: 49px; padding: 0 23px; border-radius: 99px;
      border: 1px solid rgba(235, 255, 245, .32); color: #f8fcfa; font-size: 16px; line-height: 21px; white-space: nowrap;
      background: linear-gradient(155deg, rgba(236, 255, 248, .17), rgba(214, 245, 233, .06) 48%, rgba(238, 255, 246, .11)) rgba(14, 42, 33, .45);
      -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -1px 1px rgba(255, 255, 255, .04), 0 4px 12px rgba(10, 32, 24, .1);
      text-shadow: 0 1px 3px rgba(8, 32, 23, .25); scroll-snap-align: start; user-select: none; -webkit-tap-highlight-color: transparent;
      transition: background 160ms ease, border-color 160ms ease;
    }
.glass-pill[aria-checked="true"]{
      border-color: rgba(227, 255, 239, .78); font-weight: 700;
      background: linear-gradient(145deg, rgba(218, 255, 234, .32), rgba(177, 229, 206, .17) 60%, rgba(222, 255, 239, .22)) rgba(14, 42, 33, .45);
      box-shadow: inset 0 1px 2px rgba(255, 255, 255, .36), 0 4px 14px rgba(9, 35, 26, .14);
    }
.glass-pill:hover{ border-color: rgba(235, 255, 245, .7); }
.glass-pill:focus-visible{ outline: 2px solid #d8ffeb; outline-offset: 3px; }
.intensity-track{
      display: flex; gap: 2px; margin: 6px 28px 0; padding: 5px; border-radius: 99px;
      border: 1px solid rgba(235, 255, 245, .3); background: rgba(18, 46, 37, .25);
      -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
    }
.intensity-track .glass-pill{ flex: 1 1 0; min-width: 0; min-height: 43px; padding: 0 8px; background: transparent; border-color: transparent; box-shadow: none; font-size: 15px; }
.intensity-track .glass-pill[aria-checked="true"]{ background: linear-gradient(145deg, rgba(228, 255, 241, .26), rgba(197, 239, 220, .12)); border-color: rgba(235, 255, 245, .45); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), 0 2px 7px rgba(10, 33, 24, .1); }
.start{
      position: absolute; left: 28px; right: 28px; bottom: 107px; height: 62px; border-radius: 99px;
      border: 2px solid rgba(172, 237, 211, .32); color: #fff; font-size: 21px; line-height: 26px; font-weight: 700;
      background: linear-gradient(155deg, rgba(230, 255, 244, .13), rgba(230, 255, 244, .02) 48%, rgba(230, 255, 244, .06)), linear-gradient(110deg, rgba(36, 123, 99, .82), rgba(24, 85, 64, .86));
      -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, .24), inset 0 -1px 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(13, 36, 27, .12);
    }
.start svg{ position: absolute; right: 25px; top: 18px; width: 23px; height: 23px; stroke-width: 2; }
.start:hover{ background: linear-gradient(155deg, rgba(230, 255, 244, .17), rgba(230, 255, 244, .03) 48%, rgba(230, 255, 244, .08)), linear-gradient(110deg, rgba(43, 135, 109, .86), rgba(29, 97, 74, .9)); }
.start:active{ transform: scale(.97); }
.visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 699px){.screen{ scroll-snap-align: center; }
.setup{ top: 0; }
.setup{ left: 411px; }}
@media (prefers-reduced-motion: reduce){.bottom-nav::before,.glass-pill{ transition: none; }}
.setup{ --photo-opacity: 1; --green-opacity: 1; --gradient-opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.setup .atmosphere{ opacity: var(--green-opacity); }
.yoga-background{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: var(--photo-opacity); pointer-events: none; }
.duration-picker{ position: absolute; top: 56px; left: 28px; right: 28px; height: 155px; text-align: center; color: #f8fcf9; }
.duration-label{ display: block; font-size: 11px; line-height: 16px; color: rgba(248,252,249,.78); }
.duration-value{ display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 6px 0 12px; }
.duration-value output{ font: 400 48px/54px var(--sans); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.duration-value > span{ font-size: 13px; color: rgba(248,252,249,.7); }
.duration-ruler{ display: flex; height: 60px; overflow-x: auto; overflow-y: hidden; padding: 0 calc(50% - 6px); scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x; cursor: grab; mask-image: linear-gradient(90deg, transparent, #000 22% 78%, transparent); }
.duration-ruler::-webkit-scrollbar{ display: none; }
.duration-ruler.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.duration-ruler:focus-visible{ outline: 2px solid #b8ddcb; outline-offset: 4px; border-radius: 8px; }
.duration-tick{ position: relative; flex: 0 0 12px; height: 58px; scroll-snap-align: center; user-select: none; }
.duration-tick::before{ content: ''; position: absolute; top: 9px; left: 5px; width: 1px; height: 12px; background: rgba(248,252,249,.54); border-radius: 1px; }
.duration-tick.major::before{ top: 2px; height: 24px; background: rgba(248,252,249,.88); }
.duration-tick > span{ position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 10px; color: rgba(248,252,249,.68); }
.duration-marker{ position: absolute; top: 90px; left: calc(50% - 1px); width: 2px; height: 30px; border-radius: 2px; background: #d2f4e0; box-shadow: 0 0 8px rgba(190,240,213,.35); pointer-events: none; }
.glass-pill[aria-checked="false"]{
      color: rgba(248,252,250,.68); border-color: rgba(235,255,245,.10);
      background: linear-gradient(155deg, rgba(255,255,255,.07), transparent 55%, rgba(255,255,255,.025)) rgba(19,38,29,.12);
      -webkit-backdrop-filter: blur(3px) saturate(115%);
      backdrop-filter: url(#nav-glass-refraction) blur(2px) saturate(115%);
      box-shadow: inset 0 1px 3px rgba(255,255,255,.10), inset 0 -2px 3px rgba(15,30,22,.06), 0 2px 6px rgba(15,30,22,.05);
      text-shadow: 0 1px 3px rgba(8,32,23,.16);
    }
.glass-pill[aria-checked="false"]:hover{ color: #f8fcfa; border-color: rgba(235,255,245,.24); }
.intensity-row{ display: flex; align-items: center; gap: 8px; margin: 6px 28px 0; }
.intensity-row .intensity-track{ flex: 1; min-width: 0; margin: 0; padding: 4px; border-color: rgba(235,255,245,.12); background: rgba(18,46,37,.12); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.intensity-track .glass-pill{ min-height: 38px; padding: 0 5px; font-size: 13px; }
.intensity-track .glass-pill[aria-checked="false"]{ border-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.practice-settings{ flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: rgba(248,252,250,.82); background: rgba(234,249,240,.06); -webkit-backdrop-filter: blur(3px); backdrop-filter: url(#nav-glass-refraction) blur(2px); box-shadow: inset 0 1px 3px rgba(255,255,255,.15), 0 3px 8px rgba(13,30,21,.08); }
.practice-settings svg{ width: 19px; height: 19px; stroke-width: 1.35; }
.practice-settings:hover{ color: #fff; background: rgba(234,249,240,.15); }
.setup::after{ content:none; background:none; }
.yoga-smoke{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.yoga-smoke::before,.yoga-smoke::after{
      content: ''; position: absolute; inset: -15% -30%;
      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22900%22%20viewBox%3D%220%200%20600%20900%22%3E%3Cfilter%20id%3D%22mist%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.008%20.005%22%20numOctaves%3D%223%22%20seed%3D%2212%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.74%200%200%200%200%20.86%200%200%200%200%20.8%20.7%20.7%20.7%200%20-.72%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%225%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22600%22%20height%3D%22900%22%20filter%3D%22url%28%23mist%29%22%2F%3E%3C%2Fsvg%3E") center / cover no-repeat;
      opacity: .42; mix-blend-mode: screen; filter: blur(4px);
      mask-image: radial-gradient(ellipse at 32% 75%, #000 0%, rgba(0,0,0,.6) 36%, transparent 70%);
      transform-origin: 50% 75%; will-change: transform;
      animation: smoke-drift 12s ease-in-out -4s infinite alternate;
    }
.yoga-smoke::after{ opacity: .28; transform-origin: 80% 50%; mask-image: radial-gradient(ellipse at 78% 58%, #000, transparent 65%); animation: smoke-drift-reverse 17s ease-in-out -9s infinite alternate; }
@keyframes smoke-drift{ from { transform: translate(-18%, 14%) scale(1); } to { transform: translate(20%, -16%) scale(1.12); } }
@keyframes smoke-drift-reverse{ from { transform: translate(18%, 14%) scale(1.08) rotate(-4deg); } to { transform: translate(-18%, -12%) scale(1.18) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){.yoga-smoke::before,.yoga-smoke::after{ animation: none; will-change: auto; }}
.settings-sheet{ position: fixed; inset: auto; margin: 0; width: 343px; max-width: calc(100vw - 32px); max-height: calc(100svh - 32px); padding: 24px; border: 0; border-radius: 28px; color: #f7fcf8; background: linear-gradient(145deg,rgba(133,166,145,.38),rgba(25,51,39,.68)); -webkit-backdrop-filter: blur(28px) saturate(130%); backdrop-filter: blur(28px) saturate(130%); box-shadow: inset 0 2px 6px rgba(255,255,255,.18), 0 24px 70px rgba(8,26,17,.3); }
.settings-sheet::backdrop{ background: rgba(10,25,18,.2); }
.settings-sheet header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.settings-sheet h2{ margin: 0; font: 500 22px/30px var(--serif); letter-spacing: -.4px; }
.sheet-close{ width: 30px; height: 30px; border-radius: 50%; background: rgba(240,255,246,.08); color: #e7f2eb; display: grid; place-items: center; }
.sheet-close svg{ width: 13px; height: 13px; stroke-width: 1.5; }
.sheet-field{ margin-bottom: 22px; }
.sheet-field > label,.sheet-field > span{ display: block; margin-bottom: 9px; font-size: 11px; color: #ceded3; }
.sheet-duration-heading{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sheet-duration-heading label{ font-size: 11px; color: #ceded3; }
.sheet-duration-heading output{ font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.7px; }
.sheet-duration-heading output small{ font-size: 11px; letter-spacing: 0; color: #ceded3; }
.settings-sheet input[type="range"]{ width: 100%; accent-color: #b1dbc5; cursor: pointer; }
.settings-sheet select{ width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(232,255,242,.09); color: #f7fcf8; font-size: 14px; box-shadow: inset 0 1px 3px rgba(255,255,255,.12); cursor: pointer; color-scheme: dark; }
.sheet-intensity{ display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(12,32,22,.18); }
.sheet-intensity button{ flex: 1; min-height: 37px; border-radius: 99px; color: #c4d7cb; background: transparent; font-size: 12px; }
.sheet-intensity button[aria-pressed="true"]{ color: #fff; background: rgba(225,255,237,.17); box-shadow: inset 0 1px 4px rgba(255,255,255,.19); }
.sheet-done{ width: 100%; min-height: 46px; border-radius: 99px; background: linear-gradient(120deg,rgba(94,153,124,.7),rgba(28,87,61,.72)); color: #fff; font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 4px rgba(230,255,240,.15); }
html,body{background:#f5f8f6}
@font-face{font-family:Board Lato;src:url('board-lato.ttf') format('truetype');font-display:swap}
/* Local screen-board design system; no public-site assets are modified. */
.board-glass-nav{
 --active-index:0;--light-x:24%;position:absolute!important;inset:auto 16px 22px!important;width:auto!important;max-width:343px;height:65px!important;min-height:65px!important;margin:0 auto!important;padding:4px!important;display:flex!important;align-items:center!important;gap:0!important;border:0!important;border-radius:36px!important;overflow:visible!important;isolation:isolate;z-index:20!important;background:rgba(34,49,39,.09)!important;filter:none!important;
 box-shadow:0 9px 24px rgba(26,39,29,.17),0 2px 5px rgba(31,44,33,.08),inset 0 1px 1px rgba(255,255,255,.65),inset 0 -1px 1px rgba(26,42,30,.17)!important;
 font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif!important;
}
.board-glass-nav::after{content:''!important;display:block!important;position:absolute!important;z-index:0!important;inset:0!important;width:auto!important;height:auto!important;border-radius:inherit!important;pointer-events:none;backdrop-filter:blur(3px) saturate(125%)!important;-webkit-backdrop-filter:blur(3px) saturate(125%)!important;border:1px solid rgba(255,255,255,.33)!important;background:radial-gradient(ellipse at var(--light-x) 0%,rgba(255,255,255,.42),transparent 52%),linear-gradient(165deg,rgba(255,255,255,.07),transparent 40%,rgba(24,46,31,.07))!important;box-shadow:inset 1px 1px 1px rgba(255,255,255,.33),inset -1px -1px 1px rgba(237,249,245,.19)!important}
.board-glass-nav::before{content:''!important;display:block!important;position:absolute!important;z-index:1!important;inset:4px auto auto 4px!important;width:calc((100% - 8px)/4)!important;height:calc(100% - 8px)!important;border-radius:31px!important;transform:translateX(calc(var(--active-index)*100%))!important;pointer-events:none;border:1px solid rgba(249,255,250,.55)!important;backdrop-filter:blur(1px) saturate(120%)!important;-webkit-backdrop-filter:blur(1px) saturate(120%)!important;background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.3),transparent 72%),linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 52%,rgba(255,255,255,.13))!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.75),inset 0 -1px 2px rgba(25,46,32,.15),0 2px 8px rgba(24,44,30,.12)!important;transition:transform 440ms cubic-bezier(.22,.86,.2,1)!important}
.board-glass-nav button{position:relative!important;z-index:2!important;flex:1!important;width:25%!important;height:100%!important;min-height:44px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:31px!important;color:white!important;font:400 12.5px/16px -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif!important;text-transform:none!important;letter-spacing:normal!important;text-shadow:0 1px 3px rgba(17,36,24,.65),0 0 7px rgba(17,36,24,.12)!important;cursor:pointer;box-shadow:none!important;opacity:1!important}
.board-glass-nav button:focus-visible{outline:2px solid white!important;outline-offset:-3px!important}
.board-glass-nav button:active{transform:scale(.94)}
.board-glass-nav svg{display:block!important;width:25px!important;height:25px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important;stroke-linecap:round;stroke-linejoin:round}
.board-glass-nav .nav-home-shell{fill:none!important}
.board-glass-nav button[aria-pressed=true] .nav-home-shell{fill:currentColor!important}
.board-glass-nav button[aria-pressed=true] .nav-home-smile{stroke:#426b59!important}
.board-glass-nav button{color:#40594b!important;text-shadow:0 1px 1px #ffffff45!important}
.board-glass-nav button[aria-pressed=true]{color:#244d39!important;font-weight:500!important}
.board-glass-nav button[aria-pressed=true] .nav-home-smile{stroke:#f4faf4!important}

html,body{width:375px;height:812px;background:transparent;overflow:hidden}.setup{left:0!important;top:0!important;box-shadow:none!important;border-radius:0!important}.settings-sheet{left:16px!important;top:auto!important;bottom:16px!important}

/*
 Embedded font licenses
Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

Copyright 2011 The Lora Project Authors (https://github.com/cyrealtype/Lora-Cyrillic), with Reserved Font Name "Lora".

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


*/

/* Approved home screen controls — 4 October 2026. */
/* Shared liquid-glass controls, based on screen one's Start practice button. */
:root {
 --control-green:linear-gradient(155deg,rgba(230,255,244,.13),rgba(230,255,244,.02) 48%,rgba(230,255,244,.06)),linear-gradient(110deg,rgba(36,123,99,.82),rgba(24,85,64,.86));
 --control-rim:rgba(172,237,211,.55);
 --control-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px rgba(172,237,211,.16),inset 0 -1px 1px rgba(255,255,255,.12),0 4px 12px rgba(13,36,27,.12);
 --control-idle:linear-gradient(155deg,rgba(255,255,255,.65),rgba(255,255,255,.2) 48%,rgba(255,255,255,.42)) rgba(53,91,69,.08);
 --control-idle-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px rgba(32,65,46,.12),0 2px 7px rgba(13,36,27,.06);
}
html body :is(.glass-pill,.sheet-intensity button,.ys-pose-chapters button,.style-filters button,.view-class,.detail-back,.save-class,.empty button,.player-exit,.player-audio button,.ysb-iconbutton) {
 border-radius:99px!important;
 border:1px solid rgba(92,136,109,.22)!important;
 background:var(--control-idle)!important;
 box-shadow:var(--control-idle-shadow)!important;
 backdrop-filter:blur(12px) saturate(120%)!important;
 -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
 color:#345543!important;text-shadow:none!important;
}
html body :is(.start,.primary,.player-play),
html body :is(.glass-pill[aria-checked=true],.sheet-intensity button[aria-pressed=true],.ys-pose-chapters button[aria-selected=true],.style-filters button[aria-pressed=true],.save-class[aria-pressed=true],.player-audio button[aria-pressed=true]) {
 border-radius:99px!important;
 border:1.5px solid var(--control-rim)!important;
 background:var(--control-green)!important;
 box-shadow:var(--control-shadow)!important;
 backdrop-filter:blur(12px) saturate(120%)!important;
 -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
 color:#fff!important;text-shadow:0 1px 2px #153e3229!important;
}
html body .board-glass-nav {background:var(--control-idle)!important;border:0!important;box-shadow:var(--control-idle-shadow),0 0 0 1px rgba(92,136,109,.22)!important}
/* Border-box keeps the sliding lens centred on each padded navigation slot. */
html body .board-glass-nav::before {box-sizing:border-box!important;background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.3),transparent 72%),linear-gradient(145deg,rgba(213,235,219,.52),rgba(151,181,160,.2) 52%,rgba(202,224,209,.38))!important;border:1px solid rgba(249,255,250,.55)!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.75),inset 0 -1px 2px rgba(25,46,32,.15),0 2px 8px rgba(24,44,30,.1)!important;backdrop-filter:blur(12px) saturate(120%)!important;-webkit-backdrop-filter:blur(12px) saturate(120%)!important}
html body :is(.class-screen,.screen,.ysb-screen,.ys-pose-screen) .board-glass-nav button[aria-pressed=true] {color:#244d39!important;text-shadow:none!important}
html body :is(.class-screen,.screen,.ysb-screen,.ys-pose-screen) .board-glass-nav button[aria-pressed=true] .nav-home-smile {stroke:currentColor!important}
html body :is(.ysb-browse)::before {background:var(--control-idle)!important;border:1px solid rgba(92,136,109,.22)!important;box-shadow:var(--control-idle-shadow)!important}
html body :is(.glass-pill,.ys-pose-chapters button,.style-filters button,.start,.primary,.player-play,.view-class,.detail-back,.save-class,.player-audio button):focus-visible {outline:2px solid #247b63!important;outline-offset:3px!important}
html body .save-class[aria-pressed=true] svg {fill:currentColor}
@media(prefers-reduced-transparency:reduce) {
 html body :is(.glass-pill,.sheet-intensity button,.ys-pose-chapters button,.style-filters button,.view-class,.detail-back,.save-class,.empty button,.player-exit,.player-audio button,.ysb-iconbutton,.board-glass-nav) {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html body .board-glass-nav::before {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#dce9df!important}
}

/* Image surfaces follow the original photograph; no coloured letterboxing. */
html body .detail-art {height:auto;background:transparent;}
html body .detail-art img {height:auto;width:100%;display:block;}
html body .board-player .player-portrait {background:transparent!important;}
html body .board-player .player-portrait img {background:transparent!important;}

/* The player glass takes its colour from the dark scene underneath it. */
html body .board-player :is(.player-play,.player-audio button) {
 background:linear-gradient(155deg,rgba(230,255,244,.18),rgba(230,255,244,.025) 48%,rgba(230,255,244,.09)) rgba(172,237,211,.08)!important;
 border:1.5px solid var(--control-rim)!important;
 box-shadow:var(--control-shadow)!important;
 backdrop-filter:blur(14px) saturate(135%)!important;
 -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
 color:#fff!important;
}
html body .board-player .player-audio button[aria-pressed=true] {
 background:linear-gradient(155deg,rgba(230,255,244,.2),rgba(230,255,244,.03) 48%,rgba(230,255,244,.1)) rgba(172,237,211,.13)!important;
}
@media(prefers-reduced-transparency:reduce) {
 html body .board-player :is(.player-play,.player-audio button) {background:#48544d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* Isolated option-button study. Photo, CTA and app navigation retain their source styles. */
/* Colour expresses the character of each option; green belongs to the CTA. */
html body .setup .practice-options .glass-pill {
  --option-hue: 265;
  --option-saturation: 44%;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 8% -28%, hsl(var(--option-hue) 65% 83% / .5), transparent 70%),
    radial-gradient(ellipse at 108% 125%, hsl(calc(var(--option-hue) + 28) 48% 68% / .36), transparent 68%),
    linear-gradient(165deg, rgba(255, 253, 247, .52), rgba(255, 253, 247, .2) 45%, rgba(244, 238, 229, .33)) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .25),
    inset 0 -2px 3px hsl(var(--option-hue) 35% 30% / .18),
    0 1px 1px hsl(var(--option-hue) 35% 25% / .15),
    0 5px 11px hsl(var(--option-hue) 25% 24% / .15) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  color: #3f3d43 !important;
  text-shadow: 0 1px rgba(255, 255, 255, .25) !important;
  transition: box-shadow 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* Flow / grounded / disciplined / quiet: amber, clay, plum, periwinkle. */
html body .setup [data-choice="style"] .glass-pill:nth-child(1) { --option-hue: 34; --option-saturation: 66%; }
html body .setup [data-choice="style"] .glass-pill:nth-child(2) { --option-hue: 15; --option-saturation: 54%; }
html body .setup [data-choice="style"] .glass-pill:nth-child(3) { --option-hue: 305; --option-saturation: 37%; }
html body .setup [data-choice="style"] .glass-pill:nth-child(4) { --option-hue: 246; --option-saturation: 48%; }
/* Focus options use the same warm / cool vocabulary with their own identities. */
html body .setup [data-choice="focus"] .glass-pill:nth-child(1) { --option-hue: 270; --option-saturation: 42%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(2) { --option-hue: 211; --option-saturation: 55%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(3) { --option-hue: 12; --option-saturation: 58%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(4) { --option-hue: 38; --option-saturation: 57%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(5) { --option-hue: 329; --option-saturation: 45%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(6) { --option-hue: 230; --option-saturation: 44%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(7) { --option-hue: 200; --option-saturation: 45%; }
html body .setup [data-choice="focus"] .glass-pill:nth-child(8) { --option-hue: 25; --option-saturation: 60%; }
/* Intensity moves from a cool blue through violet to warm coral. */
html body .setup [data-choice="intensity"] .glass-pill:nth-child(1) { --option-hue: 225; --option-saturation: 45%; }
html body .setup [data-choice="intensity"] .glass-pill:nth-child(2) { --option-hue: 274; --option-saturation: 43%; }
html body .setup [data-choice="intensity"] .glass-pill:nth-child(3) { --option-hue: 17; --option-saturation: 58%; }
html body .setup .practice-options .glass-pill[aria-checked="true"] {
  border: 0 !important;
  background:
    radial-gradient(ellipse at 3% -12%, hsl(var(--option-hue) 57% 76% / 1), transparent 65%),
    radial-gradient(ellipse at 112% 118%, hsl(calc(var(--option-hue) + 30) 43% 56% / .98), transparent 68%),
    radial-gradient(ellipse at 55% 45%, rgba(255, 251, 245, .4), transparent 70%),
    linear-gradient(150deg, rgba(246, 240, 231, .6), rgba(232, 222, 215, .35)) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .3),
    inset 0 -2px 3px hsl(var(--option-hue) 30% 30% / .18),
    0 1px 2px hsl(var(--option-hue) 30% 30% / .16),
    0 5px 12px hsl(var(--option-hue) 25% 30% / .16) !important;
  color: #302c38 !important;
  text-shadow: 0 1px rgba(255, 255, 255, .35) !important;
}
html body .setup .practice-options .glass-pill:hover { border-color: rgba(255, 255, 255, .97) !important; }
html body .setup .practice-options .glass-pill:focus-visible { outline: 2px solid hsl(var(--option-hue) 40% 28%) !important; outline-offset: 3px !important; }
html body .setup .practice-options .glass-pill:active { box-shadow: inset 0 2px 5px hsl(var(--option-hue) 30% 20% / .3), 0 1px 3px rgba(35, 22, 31, .1) !important; }
@media (prefers-reduced-motion: reduce) { html body .setup .practice-options .glass-pill { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  html body .setup .practice-options .glass-pill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(145deg, hsl(var(--option-hue) var(--option-saturation) 83%), hsl(var(--option-hue) var(--option-saturation) 73%)) !important; }
  html body .setup .practice-options .glass-pill[aria-checked="true"] { background: linear-gradient(145deg, hsl(var(--option-hue) 36% 82%), hsl(var(--option-hue) 30% 73%)) !important; }
}

/* Soft rectangles retain the existing option sizes and gesture tracks. */
:root { --option-radius: 24px; }
html body .setup .practice-options .glass-pill { border-radius: var(--option-radius) !important; }
html body .setup .intensity-track { border-radius: calc(var(--option-radius) + 4px) !important; }
html body .setup .intensity-track .glass-pill { border-radius: var(--option-radius) !important; }
html body .setup .practice-settings { border-radius: var(--option-radius) !important; }
/* Focus is the middle step between the 49px style and 38px intensity controls. */
html body .setup [data-choice="focus"] .glass-pill { min-height: 44px; padding-inline: 18px; font-size: 15px; line-height: 20px; }
html body .setup .intensity-track { border: 0 !important; box-shadow: none !important; }
/* Intensity stays neutral in every state: clear glass rather than colour washes. */
html body .setup [data-choice="intensity"] .glass-pill {
  background: linear-gradient(155deg, rgba(255, 255, 255, .48), rgba(242, 241, 238, .2) 48%, rgba(250, 249, 246, .35)) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .22), inset 0 -2px 3px rgba(43, 43, 43, .12), 0 4px 9px rgba(37, 37, 37, .12) !important;
  backdrop-filter: blur(18px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(100%) !important;
  color: #42403e !important;
}
html body .setup [data-choice="intensity"] .glass-pill[aria-checked="true"] {
  background: linear-gradient(155deg, rgba(255, 255, 255, .76), rgba(242, 240, 235, .48) 55%, rgba(250, 248, 243, .63)) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .28), inset 0 -2px 3px rgba(43, 43, 43, .13), 0 4px 10px rgba(37, 37, 37, .16) !important;
  color: #2d2b29 !important;
}
html body .setup [data-choice="intensity"] .glass-pill:focus-visible { outline-color: #494744 !important; }
@media (prefers-reduced-transparency: reduce) {
  html body .setup [data-choice="intensity"] .glass-pill { background: #dedbd6 !important; }
  html body .setup [data-choice="intensity"] .glass-pill[aria-checked="true"] { background: #f1efea !important; }
}

/* Quiet typography and rounded controls across both comparison versions. */
html body .setup .practice-options .glass-pill {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5d5c59 !important;
  text-shadow: none !important;
}
html body .setup .practice-options .glass-pill:is([aria-checked="true"], [aria-selected="true"], [data-single-trigger]) {
  font-weight: 500 !important;
  color: #494845 !important;
}
html body .setup [data-choice="intensity"] .glass-pill,
html body .setup .single-intensity-trigger { font-size: 12px !important; }
html body .setup .start {
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Unselected options: colourless liquid glass without any colour tint. */
html body .setup .practice-options .glass-pill:is([aria-checked="false"], [aria-selected="false"]) {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.27), rgba(255,255,255,.06) 72%),
    linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.06) 48%, rgba(255,255,255,.08)) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 1px rgba(255,255,255,.16), 0 3px 8px rgba(25,25,25,.05) !important;
  backdrop-filter: blur(3px) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(3px) brightness(1.03) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body .setup .practice-options .glass-pill:is([aria-checked="false"], [aria-selected="false"]) {
    background: #efefef !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Tiny row labels sit above their controls in both versions. */
html body .setup .option-group legend.row-label {
  margin: 0 28px;
  padding: 0;
  color: rgba(65,65,65,.65);
  font-size: 9px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: .1px;
}
html body .setup .practice-options .glass-pill:is([aria-checked="false"], [aria-selected="false"]) {
  filter: none;
}

html body .setup .option-group legend:is(#style-label, #focus-label) {
  color: #494845;
  background: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 6px;
  margin-inline: 22px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
html body .setup .practice-options .glass-pill:is([aria-checked="false"], [aria-selected="false"]) {
  color: #4d4c49 !important;
  text-shadow: 0 0 3px rgba(255,255,255,.55) !important;
}

/* Intensity is temporarily hidden; settings stays accessible at the top right. */
html body .setup .intensity-options { display: none !important; }
html body .setup > .practice-settings {
  position: absolute;
  top: 45px;
  right: 16px;
  z-index: 20;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  color: rgba(255,255,255,.9);
  background: rgba(75,85,76,.48);
}
html body .setup > .practice-settings svg { width: 18px; height: 18px; }

/* Minimal top controls use the same light glass as the option pills. */
html body .setup .back-settings { display: none !important; }
html body .setup > .practice-settings {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.27), rgba(255,255,255,.06) 72%),
    linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.06) 48%, rgba(255,255,255,.08)) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 1px rgba(255,255,255,.16), 0 3px 8px rgba(25,25,25,.05) !important;
  backdrop-filter: blur(3px) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(3px) brightness(1.03) !important;
  color: #4d4c49 !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body .setup > .practice-settings { background: #efefef !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Shared glass styling applies to both comparison versions. */
html body .setup .start { border-radius: 8px !important; }


/* Rounded emerald CTA with a soft glow inside the button. */
html body .setup .start {
  border-radius: 999px !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(0, 202, 158, .5), transparent 58%),
    radial-gradient(ellipse at 47% 115%, rgba(0, 194, 144, .42), transparent 57%),
    linear-gradient(110deg, #006d56, #004b3d 58%, #004638) !important;
  box-shadow: inset 0 1px 2px rgba(131, 255, 215, .18), inset 0 -1px 2px rgba(0, 32, 24, .14), 0 4px 12px rgba(0, 76, 56, .12) !important;
  transition: filter 160ms ease, transform 160ms ease;
}
html body .setup .start:hover { filter: brightness(1.08); }
html body .setup .start:active { filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) { html body .setup .start { transition: none; } }

/* Scroll-linked browsing stays continuous until the visitor takes control. */
.pill-track[data-demo-scrub] { scroll-snap-type: none; }

/* Stronger glass colour and crisp labels for the local settings preview. */
html body .setup .practice-options .glass-pill {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #302d2b !important;
  text-shadow: none !important;
}
html body .setup .practice-options .glass-pill:is([aria-checked="false"], [aria-selected="false"]) {
  color: #302d2b !important;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.42), rgba(255,255,255,.14) 72%),
    linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,.14) 48%, rgba(255,255,255,.2)) !important;
  backdrop-filter: blur(6px) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(6px) brightness(1.04) !important;
  text-shadow: none !important;
}
html body .setup .practice-options .glass-pill[aria-checked="true"] {
  color: #2c2430 !important;
  font-weight: 700 !important;
  background:
    radial-gradient(ellipse at 3% -12%, hsl(var(--option-hue) 65% 73% / 1), transparent 65%),
    radial-gradient(ellipse at 112% 118%, hsl(calc(var(--option-hue) + 30) 54% 53% / 1), transparent 68%),
    radial-gradient(ellipse at 55% 45%, rgba(255,251,245,.3), transparent 70%),
    linear-gradient(150deg, rgba(246,240,231,.7), rgba(232,222,215,.5)) !important;
  text-shadow: none !important;
}

/* Plain, clear labels directly over the photograph. */
html body .setup .option-group legend:is(#style-label, #focus-label) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  border-radius: 0;
  padding: 2px 0;
  margin-inline: 28px;
}