/* YIN × YANG · two elemental forms, ten unique cartoons, no bone tweening. */
.yy-guide {
  --yy-fur:#f4f8fc; --yy-fur-deep:#c6d8ef; --yy-outline:#284d83;
  --yy-mane:#285b9e; --yy-ear:#88d4ff; --yy-eye:#267cc9;
  --yy-cheek:#d6e9ff; --yy-muzzle:#fcf7f1; --yy-paw:#214b86;
  --yy-badge:#49ceff; --yy-magic:#ffe3a3; --yy-ruff:#eaf5ff;
  margin:0 0 28px;padding:18px 18px 21px;
  border:1px solid color-mix(in srgb,var(--line) 50%,#62b7f5);
  border-radius:24px;background:color-mix(in srgb,var(--bg) 86%,#bfdff1);
  box-shadow:0 18px 50px rgba(11,45,85,.075);
  overflow:hidden; isolation:isolate;
}
.yy-guide[data-spirit="yin"] {
  --yy-fur:#252d55; --yy-fur-deep:#151d3b; --yy-outline:#090f31;
  --yy-mane:#7463d9; --yy-ear:#9e66ed; --yy-eye:#f0c37f;
  --yy-cheek:#52518f; --yy-muzzle:#3a3b6d; --yy-paw:#10153c;
  --yy-badge:#ad85fc; --yy-magic:#c6eaff; --yy-ruff:#9da2ed;
}
.yy-guide .guide-heading {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:15px;
  font:700 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--muted);
}
.yy-form-choice {
  display:inline-flex;align-items:center;gap:5px;padding:4px;
  border:1px solid color-mix(in srgb,var(--line) 70%,#68c6ed);
  border-radius:99px;background:color-mix(in srgb,var(--bg) 92%,#87d2f4);
}
.yy-form-choice button {
  padding:8px 15px;border:0;border-radius:99px;background:transparent;
  color:var(--muted);font:700 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.07em;
  cursor:pointer;transition:background .22s,color .22s,box-shadow .22s;
}
.yy-form-choice button[aria-pressed="true"]{
  background:#1c5797;color:#fff;box-shadow:0 2px 12px rgba(21,94,174,.23);
}
.yy-guide[data-spirit="yin"] .yy-form-choice button[aria-pressed="true"]{
  background:#463778;box-shadow:0 2px 12px rgba(100,67,193,.28);
}
.yy-form-choice button:focus-visible{outline:2px solid #51caff;outline-offset:2px}
.yy-stage {
  position:relative;width:100%;max-width:960px;margin:auto;
  aspect-ratio:720 / 460;overflow:hidden;isolation:isolate;border-radius:22px;
  border:1px solid rgba(115,198,242,.25);
  background:
    radial-gradient(ellipse 65% 72% at 74% 21%,rgba(255,233,188,.68),transparent 90%),
    radial-gradient(ellipse 60% 70% at 31% 43%,rgba(91,184,249,.23),transparent 95%),
    linear-gradient(150deg,#e5f5ff,#9bd4f7 58%,#3b83ae);
  box-shadow:inset 0 0 90px rgba(255,255,255,.25),0 18px 40px rgba(20,87,139,.13);
  transition:background .45s ease;
}
.yy-guide[data-spirit="yin"] .yy-stage {
  border-color:rgba(126,111,208,.45);
  background:
    radial-gradient(ellipse 53% 60% at 74% 21%,rgba(173,117,239,.45),transparent 90%),
    radial-gradient(ellipse 65% 70% at 29% 43%,rgba(75,118,241,.22),transparent 95%),
    linear-gradient(150deg,#0d1536,#28316d 58%,#0a2a53);
  box-shadow:inset 0 0 90px rgba(30,23,76,.36),0 18px 40px rgba(9,9,45,.24);
}
.yy-stage::before {
  content:"";position:absolute;width:26%;aspect-ratio:1;right:11%;top:10%;
  background:radial-gradient(circle,#fff2cf 0%,#d5edff 67%,rgba(255,243,203,0) 69%);
  opacity:.85;border-radius:50%;filter:blur(1px);
}
.yy-guide[data-spirit="yin"] .yy-stage::before {
  background:radial-gradient(circle,#dce9ff 0%,#a5b3f0 67%,rgba(165,179,240,0) 69%);opacity:.75;
}
.yy-sky {
  position:absolute;inset:0;opacity:.66;pointer-events:none;
  background:
    radial-gradient(circle at 13% 19%,#eafcff 0 1px,transparent 2px),
    radial-gradient(circle at 61% 14%,#fff4d0 0 1.5px,transparent 3px),
    radial-gradient(circle at 82% 39%,#f8fff6 0 1px,transparent 2px),
    radial-gradient(circle at 41% 26%,#e9fdff 0 1px,transparent 2px),
    linear-gradient(0deg,rgba(14,83,126,.19),transparent 42%);
}
.yy-energy {
  position:absolute;width:28%;height:30%;bottom:3%;border-radius:50%;pointer-events:none;
  filter:blur(36px);background:rgba(59,220,255,.19);
}
.yy-energy-a{left:5%}.yy-energy-b{right:3%;background:rgba(231,158,241,.16)}
.yy-svg {
  position:relative;z-index:2;display:block;width:100%;height:100%;
  overflow:visible;pointer-events:none;filter:drop-shadow(0 10px 5px rgba(9,37,77,.15));
}
.yy-outline {stroke:var(--yy-outline);stroke-width:3.6;stroke-linejoin:round;stroke-linecap:round}
.yy-fur {fill:url(#yy-fur-grad)}
.yy-fur-stop-hi{stop-color:var(--yy-ruff)}
.yy-fur-stop-mid{stop-color:var(--yy-fur)}
.yy-fur-stop-low{stop-color:var(--yy-fur-deep)}
.yy-mane-stop-hi{stop-color:var(--yy-ear)}
.yy-mane-stop-low{stop-color:var(--yy-mane)}
.yy-cheek{fill:var(--yy-cheek);opacity:.94}
.yy-ear-inner{fill:var(--yy-ear)}
.yy-mane,.yy-crest{fill:url(#yy-mane-grad)}
.yy-hairline{fill:none;stroke:var(--yy-fur-deep);stroke-width:5;stroke-linecap:round;opacity:.84}
.yy-mane-light{fill:none;stroke:var(--yy-ruff);stroke-width:5;stroke-linecap:round;opacity:.63}
.yy-face-streak{fill:none;stroke:var(--yy-ear);stroke-width:4;stroke-linecap:round;opacity:.8}
.yy-fur-fringe{fill:none;stroke:var(--yy-fur-deep);stroke-width:7;stroke-linecap:round}
.yy-shoulder-shine{fill:none;stroke:var(--yy-ruff);stroke-width:5;stroke-linecap:round;opacity:.57}
.yy-toe-shine{fill:none;stroke:var(--yy-ear);stroke-width:2.6;stroke-linecap:round;opacity:.88}
.yy-sigil-lines{fill:none;stroke:var(--yy-badge);stroke-width:2.7;stroke-linecap:round}
.yy-ruff{fill:none;stroke:var(--yy-ruff);stroke-width:12;stroke-linecap:round}
.yy-eye-white{fill:#f8fdff;stroke:var(--yy-outline);stroke-width:1.8}
.yy-iris{fill:var(--yy-eye)}
.yy-spark-eye{fill:#fff}
.yy-eye-closed{fill:none;stroke:var(--yy-outline);stroke-width:4.2;stroke-linecap:round}
.yy-brow{fill:none;stroke:var(--yy-outline);stroke-width:3.6;stroke-linecap:round}
.yy-muzzle{fill:var(--yy-muzzle)}
.yy-nose{fill:var(--yy-outline)}
.yy-smile{fill:none;stroke:var(--yy-outline);stroke-width:2.9;stroke-linecap:round}
.yy-crown-mark{fill:var(--yy-magic);stroke:var(--yy-outline);stroke-width:1.7}
.yy-tail-main{fill:var(--yy-mane)}
.yy-tail-stripe{fill:none;stroke:var(--yy-ruff);stroke-width:12;stroke-linecap:round;opacity:.87}
.yy-limb{stroke-width:31;stroke-linejoin:round;stroke-linecap:round;stroke:var(--yy-fur)}
.yy-leg {stroke-width:40}
.yy-paw{fill:var(--yy-paw);stroke:var(--yy-outline);stroke-width:2.5}
.yy-foot{rx:17;ry:13}
.yy-gem{fill:var(--yy-badge);stroke:var(--yy-outline);stroke-width:3}
.yy-gem-shine{fill:rgba(255,255,255,.75)}
.yy-lotus{fill:#64c1e4;stroke:#2c7fb4;stroke-width:2}
.yy-lotus-inner{fill:#b4e8f4;opacity:.88}
.yy-guide[data-spirit="yin"] .yy-lotus{fill:#574eac;stroke:#a88bff}
.yy-guide[data-spirit="yin"] .yy-lotus-inner{fill:#a7a4ed}
.yy-stars {fill:#f8f1d5;opacity:.88}
.yy-pose{opacity:0;visibility:hidden;transition:opacity 370ms ease-out,visibility 370ms}
.yy-pose.is-current{opacity:1;visibility:visible}
.yy-character{transform-origin:360px 360px}
.yy-guide[data-status="running"][data-motion="still"] .yy-character {animation:yy-breathe 6s ease-in-out infinite}
.yy-guide[data-status="running"][data-phase="breath"][data-motion="still"] .yy-character {
  animation:yy-breathe 19s ease-in-out infinite;
}
@keyframes yy-breathe{0%,100%{transform:translateY(2px)}45%{transform:translateY(-3px)}}
.yy-bloom {
  position:absolute;z-index:3;left:50%;top:49%;width:19%;
  aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(249,253,255,.95) 0%,rgba(129,217,255,.5) 30%,transparent 76%);
}
.yy-bloom span {position:absolute;inset:0;display:grid;place-items:center;color:#e7fbff;font-size:46px}
.yy-stage.yy-blooming .yy-bloom {animation:yy-bloom 640ms ease-out both}
@keyframes yy-bloom{0%,100%{opacity:0;scale:.65}45%{opacity:1;scale:1.4}}
.yy-watermark {
  position:absolute;right:17px;bottom:12px;z-index:3;
  font:700 9px/1.3 'JetBrains Mono',monospace;letter-spacing:.13em;
  color:rgba(255,255,255,.9);text-shadow:0 2px 5px #0a1c43;
}
.yy-watermark span{font-size:18px;color:#b4f1ff}
.yy-breath-panel {
 position:absolute;z-index:4;right:16px;top:16px;
 width:128px;display:flex;align-items:center;flex-direction:column;gap:4px;
 padding:13px 10px;border:1px solid rgba(161,225,255,.6);border-radius:17px;
 color:#eafcff;background:rgba(7,30,76,.85);
 box-shadow:0 9px 30px rgba(4,34,89,.21);
 opacity:0;pointer-events:none;translate:0 -12px;
 transition:opacity .3s ease,translate .3s ease;
}
.yy-breath-active .yy-breath-panel {opacity:1;translate:0 0}
.yy-breath-panel small{font:700 8px/1.3 'JetBrains Mono',monospace;letter-spacing:.05em}
.yy-breath-count{font:700 46px/1 'Fraunces',serif;color:#8ee8ff}
.yy-breath-label{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.15em}
.yy-breath-rail{height:4px;width:100%;border-radius:5px;overflow:hidden;background:rgba(199,232,255,.2)}
.yy-breath-progress{height:100%;width:100%;display:block;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#64dcff,#bc8df2)}
.yy-breath-active[data-breath="inhale"] .yy-energy-a{animation:yy-inhale 4s ease-in-out both}
.yy-breath-active[data-breath="hold"] .yy-energy-a{scale:1.3}
.yy-breath-active[data-breath="exhale"] .yy-energy-a{animation:yy-exhale 8s ease-in-out both}
@keyframes yy-inhale{from{scale:.65}to{scale:1.3}}
@keyframes yy-exhale{from{scale:1.3}to{scale:.65}}
.yy-guide figcaption{text-align:center;padding:15px 8px 1px;min-height:85px}
.yy-guide figcaption strong{display:block;color:var(--ink);font:600 clamp(22px,3vw,29px)/1.2 'Fraunces',Georgia,serif}
.yy-guide figcaption p{margin:8px auto 0;max-width:48ch;color:var(--muted);font-size:13px;line-height:1.6}
.flow-preview {padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.flow-preview:hover {border-color:var(--sage)}
.flow-entry-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow-console-foot {gap:12px}
.flow-phase-timing{display:grid;gap:7px;margin-top:8px}
.flow-session-clock .flow-phase-timing small{display:flex;gap:10px;justify-content:space-between;opacity:1;line-height:1.5}
.flow-phase-timing b{font:inherit;font-variant-numeric:tabular-nums}
[data-flow-action][disabled]{opacity:.46;cursor:not-allowed}
[data-flow-action]:focus-visible{outline:2px solid #47bfe8;outline-offset:3px}
.sanctuary-dock.yy-dock-active {border-color:rgba(103,196,246,.78)!important;box-shadow:0 0 28px rgba(92,175,244,.18)}
.sanctuary-dock.yy-dock-active .breath-ring-core {background:#8ad7fa;box-shadow:0 0 16px #58a5f6}
@media(max-width:700px){
  .yy-guide{margin-inline:-9px;padding:12px 10px 16px;border-radius:18px}
  .yy-stage{aspect-ratio:5 / 5.5;border-radius:14px}
  .yy-svg{width:100%;height:100%;margin-left:0}
  .yy-form-choice button{padding:7px 10px;font-size:9px}
  .yy-breath-panel{width:95px;right:9px;top:9px;padding:8px}
  .yy-breath-panel small{font-size:7px}
  .yy-breath-count{font-size:34px}
  .yy-guide figcaption p{font-size:12px}
}
@media(max-width:360px){.yy-stage{aspect-ratio:5 / 6.2}.yy-svg{width:100%;margin-left:0}}
@media(prefers-reduced-motion:reduce) {
 .yy-pose,.yy-breath-panel,.yy-form-choice button{transition:none!important}
 .yy-character,.yy-bloom,.yy-energy{animation:none!important}
}
body.quiet-mode .yy-character,body.quiet-mode .yy-bloom,
.yy-guide[data-hidden="true"] .yy-character{animation-play-state:paused}

/* ART DIRECTION v2: organic manga-anime character instead of a wire puppet */
.yy-guide{scroll-margin-top:138px}
.yy-fur.yy-outline{stroke-width:3.7}
.yy-face-mask{fill:var(--yy-fur);opacity:.42}
.yy-crest{stroke-width:2.8;stroke-linejoin:round}
.yy-ear-light{fill:none;stroke:var(--yy-ruff);stroke-width:3;opacity:.8;stroke-linecap:round}
.yy-cheek-shine{fill:none;stroke:var(--yy-ruff);stroke-width:3;opacity:.46;stroke-linecap:round}
.yy-temple-mark{fill:none;stroke:var(--yy-badge);stroke-width:3.1;stroke-linecap:round}
.yy-lashes{stroke:var(--yy-outline);stroke-width:2.7;fill:none;stroke-linecap:round}
.yy-eye-liner{fill:none;stroke:var(--yy-outline);stroke-width:5.1;stroke-linecap:round}
.yy-iris{fill:var(--yy-eye);stroke:var(--yy-outline);stroke-width:1.4}
.yy-pupil{fill:#11284d}
.yy-guide[data-spirit="yin"] .yy-pupil{fill:#1a1135}
.yy-eye-tiny{fill:#fff9e5;opacity:.9}
.yy-mouth-mark{fill:none;stroke:var(--yy-outline);stroke-width:1.7;stroke-linecap:round}
.yy-crown-shine{fill:#faffff;opacity:.83}
.yy-chest-fur{fill:var(--yy-ruff);opacity:.75}
.yy-medallion{fill:var(--yy-outline);stroke:var(--yy-ruff);stroke-width:3.7}
.yy-necklace{fill:none;stroke:var(--yy-mane);stroke-width:4;stroke-linecap:round}
.yy-shoulder-shine{opacity:.5}
.yy-limb {
  stroke:var(--yy-outline);
  stroke-width:2.8;
  fill:url(#yy-fur-grad);
  stroke-linecap:round;
  stroke-linejoin:round;
}
.yy-leg{stroke-width:2.8}
.yy-limb-lustre{
  fill:none;stroke:var(--yy-ruff);stroke-width:3.3;
  opacity:.27;stroke-linecap:round;stroke-linejoin:round;
}
.yy-paw{fill:var(--yy-paw);stroke:var(--yy-ruff);stroke-width:2.8}
.yy-paw-toes{fill:none;stroke:var(--yy-badge);stroke-width:2.5;stroke-linecap:round;opacity:.75}
.yy-paw-gloss{fill:none;stroke:var(--yy-ruff);stroke-width:2.4;stroke-linecap:round;opacity:.3}
.yy-tail-main{fill:url(#yy-mane-grad);stroke-width:3.4}
.yy-tail-band{fill:none;stroke:var(--yy-ruff);stroke-width:14;stroke-linecap:round;opacity:.74}
.yy-tail-fur{fill:var(--yy-fur-deep);opacity:.65}
.yy-tail-glint{fill:none;stroke:#e3fbff;stroke-width:4.5;stroke-linecap:round;opacity:.52}
.yy-gem{
  fill:var(--yy-badge);stroke:var(--yy-outline);stroke-width:3.8;
  filter:drop-shadow(0 1px 3px rgba(46,158,230,.4));
}
.yy-guide[data-spirit="yin"] .yy-crest{filter:drop-shadow(0 0 4px rgba(110,79,211,.36))}
.yy-guide[data-spirit="yang"] .yy-crest{filter:drop-shadow(0 0 4px rgba(68,158,229,.19))}
.yy-guide .guide-heading{position:relative;z-index:1}
.yy-stage{min-height:300px}
.yy-stage:focus-within{outline:2px solid var(--yy-badge);outline-offset:2px}
@media (max-width:700px){
 .yy-guide{scroll-margin-top:92px}
 .yy-stage{min-height:295px}
}
@media (max-width:360px){.yy-stage{min-height:270px}}

/* One contrasting lock makes Yin and Yang halves of the same spirit. */
.yy-opposite-lock{fill:#3d3278;stroke:#e9c5ee;stroke-width:2.2;stroke-linejoin:round}
.yy-guide[data-spirit="yin"] .yy-opposite-lock{fill:#e6f8fc;stroke:#87d9e9}
.yy-scene-breadcrumb{
 position:absolute;z-index:4;top:17px;left:19px;
 display:flex;flex-direction:column;gap:4px;pointer-events:none;
 color:#153b71;text-shadow:0 1px 9px rgba(240,252,255,.53);
}
.yy-scene-breadcrumb strong{font:800 11px/1.1 'JetBrains Mono',monospace;letter-spacing:.16em}
.yy-scene-breadcrumb span{font:600 11px/1.2 'Inter',sans-serif}
.yy-guide[data-spirit="yin"] .yy-scene-breadcrumb{color:#dceeff;text-shadow:0 1px 9px rgba(0,8,34,.7)}
.yy-guide[data-phase="breath"] .yy-stage .yy-energy-a{filter:blur(28px);opacity:.9}
.yy-guide[data-phase="pose-1"] .yy-energy-b,.yy-guide[data-phase="pose-2"] .yy-energy-b{filter:blur(20px);opacity:.78}
.yy-guide[data-phase="savasana"] .yy-stars{opacity:.42}
.yy-guide[data-phase="finish"] .yy-stars{filter:drop-shadow(0 0 5px #defcff);opacity:1}
@media(max-width:700px){
 .yy-scene-breadcrumb{top:10px;left:10px}
 .yy-scene-breadcrumb strong{font-size:9px}
 .yy-scene-breadcrumb span{font-size:9px}
}

/* Keep the practice below the fixed navigation on in-page section jumps. */
#instructor-flow{scroll-margin-top:124px}