/* One bear professor, four actions. No colour-coded learning steps.
   The approved concept artwork is displayed through four CSS viewports:
   its source pixels remain intact. Text and numbers are real accessible HTML. */
body.yz-home {
  --mist:#f5f5f3; --paper:#fff; --paper-2:#f5f5f3;
  --ink:#252629; --ink-2:#52545a; --ink-3:#74767c;
  --line:#e4e4e2; --line-2:#d0d1d1;
  --blue:#303236; --blue-deep:#17191c; --blue-soft:#ededeb; --aqua:#575a60;
  --s1:#303236; --s2:#303236; --s3:#303236; --s4:#303236;
  --s1-on:#fff; --s2-on:#fff; --s3-on:#fff; --s4-on:#fff;
  --s1-soft:#f0f0ed; --s2-soft:#f0f0ed; --s3-soft:#f0f0ed; --s4-soft:#f0f0ed;
  --s1-ink:#303236; --s2-ink:#303236; --s3-ink:#303236; --s4-ink:#303236;
}
:root:not([data-theme="night"]):not([data-theme="sepia"]) body.yz-home {--mist:#f5f5f3}
:root[data-theme="night"] body.yz-home {
  --mist:#191a1c; --paper:#242529; --paper-2:#2c2d31; --ink:#f2f2ef; --ink-2:#c5c6c8; --ink-3:#a6a8ac;
  --line:#393a3e; --line-2:#57595f; --blue:#e4e4e0; --blue-deep:#fff; --blue-soft:#35363a; --aqua:#d0d1d1;
  --s1:#e4e4e0; --s2:#e4e4e0; --s3:#e4e4e0; --s4:#e4e4e0;
  --s1-on:#202124; --s2-on:#202124; --s3-on:#202124; --s4-on:#202124;
  --s1-soft:#303135; --s2-soft:#303135; --s3-soft:#303135; --s4-soft:#303135;
  --s1-ink:#e4e4e0; --s2-ink:#e4e4e0; --s3-ink:#e4e4e0; --s4-ink:#e4e4e0;
}
:root[data-theme="sepia"] body.yz-home {
  --mist:#efece4; --paper:#faf8f1; --paper-2:#f0ece2; --ink:#302e29;
  --s1-soft:#ece8dd; --s2-soft:#ece8dd; --s3-soft:#ece8dd; --s4-soft:#ece8dd;
}
.yz-home .yz-tabs {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
:root[data-theme="night"] .yz-home .yz-tabs {box-shadow:none}
.yz-home .yz-puck {display:none}
.yz-home .yz-tab {
  display:flex; flex-direction:row; justify-content:flex-start; align-items:center;
  gap:10px; min-height:84px; padding:8px 12px; text-align:left;
  border:1px solid var(--line-2); border-radius:18px; background:var(--paper);
  box-shadow:none; color:var(--ink);
}
.yz-home .yz-tab:hover {background:var(--paper-2)}
.yz-home .yz-tab[aria-selected="true"] {
  color:var(--ink)!important; background:var(--paper);
  border-color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink);
}
.yz-home .yz-tab[aria-selected="true"] .yz-tab-t::after {
  content:""; position:absolute; bottom:-5px; left:0; width:24px; height:3px; margin-top:0; border-radius:3px; background:var(--ink);
}
.yz-home .yz-bear {
  display:block; flex:0 0 60px; width:60px; aspect-ratio:33/34; border-radius:8px;
  background-image:url('/study/assets/kuma-learning-poses.webp');
  background-color:#fff; background-repeat:no-repeat;
  background-size:465.454545% 301.176471%; background-position-y:48.976608%;
}
.yz-home .yz-bear-1 {background-position-x:3.897181%}
.yz-home .yz-bear-2 {background-position-x:35.240464%}
.yz-home .yz-bear-3 {background-position-x:65.588723%}
.yz-home .yz-bear-4 {background-position-x:96.600332%}
.yz-home .yz-tab-t {position:relative;flex:1;gap:2px;align-items:flex-start}
.yz-home .yz-tab-n {
  display:block; width:auto; height:auto; padding:0; border:0; border-radius:0;
  background:none; color:var(--ink-3); font:500 13px/1.2 var(--num);
}
.yz-home .yz-tab-long {display:block;font:700 14px/1.45 var(--round)}
.yz-home .yz-tab-short,.yz-home .yz-tab small {display:none}
.yz-home .yz-tab-long .yz-ph {display:block}
.yz-home .yz-step {color:var(--ink-2)}
.yz-home .yz-step::before {background:var(--ink-3)}
.yz-home .yz-pane .flow-grade-options label:has(input:checked) {
  background:var(--paper-2);color:var(--ink);border-color:var(--ink-3);
}
.yz-home .yz-pane .flow-check input,.yz-home .flow-grade-options input {accent-color:var(--ink)}
.yz-home .yz-next,.yz-home .yz-note {border:1px solid var(--line)}
.yz-home .yz-mix-bar i:nth-child(1) {background:#484b50}
.yz-home .yz-mix-bar i:nth-child(2) {background:#96989b}
.yz-home .yz-mix-bar i:nth-child(3) {background:#caccce}
@media(max-width:767px) {
  .yz-home .yz-tabs {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .yz-home .yz-tab {min-height:72px;padding:6px 10px;gap:9px;border-radius:15px}
  .yz-home .yz-bear {flex-basis:50px;width:50px}
  .yz-home .yz-tab-long {font-size:13px}
  .yz-home .yz-tab-n {font-size:12px}
  .yz-home .yz-railwrap {padding-top:6px;padding-bottom:6px}
}
@media(max-width:359px) {
  .yz-home .yz-tab {gap:7px;padding:6px 8px}
  .yz-home .yz-bear {flex-basis:48px;width:48px}
  .yz-home .yz-tab-long {font-size:12px}
}