/* Lessons adopts the homepage's shared living sky/ocean and tactile controls.
   The scene module owns the background and day/night tokens. Layout and island
   illustration treatment are scoped here; tokens.css owns sg-button material. */
body.lessons-playful{
  --app-paper:#fff9e9;
  --app-surface:#fffdf5;
  --app-ground:transparent;
  --app-ink:#214b40;
  --app-muted:#576d61;
  --app-rim:#ddd5bf;
  --app-sea:#2f6f4e;
  --app-deep:#205443;
  --app-soft:#e4eed9;
  --app-edge:#c9bea2;
  --app-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --app-jp:var(--app-font);
  --lesson-heading:'Baloo 2','Hiragino Maru Gothic ProN',var(--app-font);
  --lesson-safe-top:env(safe-area-inset-top,0px);
  --lesson-safe-right:env(safe-area-inset-right,0px);
  --lesson-safe-bottom:env(safe-area-inset-bottom,0px);
  --lesson-safe-left:env(safe-area-inset-left,0px);
  position:relative;
  height:auto;
  min-height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--sea-fallback-4,#1b6e96);
  color:var(--app-ink);
  font-family:var(--app-font);
}
body.lessons-playful.dw-has-shell{padding-top:0}
body.lessons-playful.dw-has-nav{padding-bottom:calc(110px + var(--lesson-safe-bottom))}
body.lessons-playful.lang-jp [data-jp]{font-family:var(--app-font)}

/* A light header, with the same object mark and cream language control as home. */
body.lessons-playful .dw-hd{
  position:relative;
  inset:auto;
  width:100%;
  max-width:1000px;
  height:auto;
  min-height:76px;
  margin:0 auto;
  padding:calc(14px + var(--lesson-safe-top)) 124px 10px max(20px,var(--lesson-safe-left));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:5px;
  background:transparent!important;
  border:0;
  box-shadow:none;
  z-index:10;
}
body.lessons-playful .dw-hd .dw-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font:800 20px/1.2 var(--lesson-heading);
  letter-spacing:.08em;
  color:var(--sky-ink,var(--app-ink))!important;
  text-shadow:var(--sky-shadow,none);
}
body.lessons-playful .dw-brand{display:inline-flex;align-items:center;gap:9px;min-width:0}
body.lessons-playful .dw-brand-object{
  display:block;
  width:40px;
  height:40px;
  flex:none;
  object-fit:contain;
  border:2px solid var(--app-paper);
  border-radius:15px;
  background:var(--app-paper);
  box-shadow:0 3px 0 var(--app-edge);
}
body.lessons-playful .dw-hd .dw-pill{
  grid-column:1/-1;
  justify-self:start;
  max-width:100%;
  min-height:26px;
  margin:0 0 0 49px;
  padding:3px 9px;
  gap:6px;
  border:1px solid var(--app-rim);
  border-radius:11px;
  background:var(--app-paper);
  box-shadow:inset 0 1px 0 #fffdf5,0 2px 0 #ded5bd;
  color:var(--app-muted);
  font:600 11px/1.5 var(--app-font);
}
body.lessons-playful .dw-hd .dw-pill .seg{padding:0;border:0;background:none;box-shadow:none;min-height:0}
body.lessons-playful #drewLangToggle{
  position:absolute;
  top:calc(16px + var(--lesson-safe-top));
  right:max(20px,var(--lesson-safe-right));
  min-height:44px;
  padding:8px 11px;
  border:1px solid var(--app-rim);
  border-radius:16px;
  background:linear-gradient(#fffdf5,#f5e9cf);
  color:var(--app-deep);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);
  font:700 13px/1.2 var(--app-font);
  z-index:20;
  transition:transform 150ms ease,box-shadow 150ms ease;
}
body.lessons-playful #drewLangToggle:active{transform:translateY(3px);box-shadow:inset 0 1px 1px #214b4020,0 1px 0 var(--app-edge)}

/* Content remains in normal flow. All six worlds keep a full illustration and
   growing captions rather than shrinking to fit a fixed-height screen. */
body.lessons-playful #dw-lessons{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1000px;
  height:auto;
  min-height:0;
  margin:0 auto;
  padding:12px max(20px,var(--lesson-safe-right)) 16px max(20px,var(--lesson-safe-left));
  display:flex;
  flex-direction:column;
  gap:22px;
}
body.lessons-playful #dw-lessons > *{animation:none}
body.lessons-playful #dw-lessons .dw-hero{padding:2px 2px 0;align-items:flex-start}
body.lessons-playful #dw-lessons .dw-hero .eye{font:700 11px/1.5 var(--app-font);letter-spacing:.13em;color:var(--sky-sub,var(--app-muted));text-shadow:var(--sky-shadow,none)}
body.lessons-playful #dw-lessons .dw-hero .ttl{
  display:block;
  margin-top:7px;
  /* The title sits below the horizon, over water even in the daytime. */
  color:#fff9e9;
  font:800 clamp(28px,6.9vw,36px)/1.22 var(--lesson-heading);
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899;
}
body.lessons-playful #dw-lessons .dw-hero .ttl [data-jp]{font-family:inherit}
body.lessons-playful #dw-lessons .dw-hero .uline{display:none}
body.lessons-playful #dw-lessons .dw-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:auto;
  gap:22px 16px;
  flex:none;
  min-height:0;
  align-items:stretch;
}
body.lessons-playful #dw-lessons .dw-t.sg-button{
  --sg-radius:24px;
  --sg-height:254px;
  --sg-depth:7px;
  --sg-press:5px;
  --sg-face-top:#74e5c1;
  --sg-face-bottom:#35cba6;
  --sg-rim:#b4f5de;
  --sg-base:#178a74;
  --sg-ink:#123f38;
  --sg-gloss:rgba(255,255,255,.76);
  --sg-highlight:rgba(255,255,255,.9);
  --sg-shadow:rgba(8,47,62,.25);
  --lesson-art-top:#c4ffe8;
  --lesson-art-bottom:#6fe4c4;
  --lesson-caption-rim:rgba(255,255,255,.5);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  width:100%;
  min-width:0;
  min-height:var(--sg-height);
  height:auto;
  padding:9px 9px 12px;
  overflow:hidden;
  text-align:left;
  white-space:normal;
  font-family:var(--app-font);
  scroll-margin-block:24px 110px;
}
/* Each island has a colored face, a matching physical base and dark readable
   lettering. There is no separate white photo frame around the illustration. */
body.lessons-playful #dw-lessons .dw-t[data-category="bobo"]{
  --sg-face-top:#76e6c3;--sg-face-bottom:#38cfa9;--sg-rim:#b3f8df;--sg-base:#168b75;--sg-ink:#123f38;
  --lesson-art-top:#c4ffe8;--lesson-art-bottom:#6fe4c4;
}
body.lessons-playful #dw-lessons .dw-t[data-category="hobby"]{
  --sg-face-top:#b5ed78;--sg-face-bottom:#83d54c;--sg-rim:#e0ffb7;--sg-base:#548f35;--sg-ink:#234416;
  --lesson-art-top:#ecffcd;--lesson-art-bottom:#bce988;
}
body.lessons-playful #dw-lessons .dw-t[data-category="business"]{
  --sg-face-top:#c1b4fa;--sg-face-bottom:#a28aea;--sg-rim:#e8dfff;--sg-base:#7560b6;--sg-ink:#34254f;
  --lesson-art-top:#f0e7ff;--lesson-art-bottom:#ccbcfa;
}
body.lessons-playful #dw-lessons .dw-t[data-category="toeic"]{
  --sg-face-top:#96dcfa;--sg-face-bottom:#59baee;--sg-rim:#d5f4ff;--sg-base:#2b84b4;--sg-ink:#133b56;
  --lesson-art-top:#def8ff;--lesson-art-bottom:#9addf7;
}
body.lessons-playful #dw-lessons .dw-t[data-category="eiken"]{
  --sg-face-top:#e3d4fa;--sg-face-bottom:#cbb3eb;--sg-rim:#f7edff;--sg-base:#9c83b8;--sg-ink:#453359;
  --lesson-art-top:#f5eaff;--lesson-art-bottom:#e0caf6;
}
body.lessons-playful #dw-lessons .dw-t[data-category="everyday"]{
  --sg-face-top:#ffd2b1;--sg-face-bottom:#f4b38f;--sg-rim:#ffead7;--sg-base:#bb8068;--sg-ink:#573428;
  --lesson-art-top:#ffe9d4;--lesson-art-bottom:#ffd0ac;
}
body.lessons-playful #dw-lessons .dw-t .bg{
  position:relative;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:100%;
  height:142px;
  border:0;
  border-radius:18px;
  background:radial-gradient(ellipse 80% 90% at 50% 45%,var(--lesson-art-top),var(--lesson-art-bottom) 68%,transparent 100%);
  box-shadow:none;
  overflow:visible;
  transform:none;
}
body.lessons-playful #dw-lessons .dw-t.soon .bg{display:flex}
body.lessons-playful #dw-lessons .lesson-category-art{
  display:block;
  width:100%;
  height:100%;
  max-width:260px;
  padding:0;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 7px 4px #173f4226);
  transition:transform 220ms cubic-bezier(.22,1.1,.4,1);
  pointer-events:none;
}
body.lessons-playful #dw-lessons .dw-t .scrim{display:none}
body.lessons-playful #dw-lessons .dw-t .tt{
  position:static;
  inset:auto;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
  min-height:88px;
  padding:13px 3px 2px;
  border-top:1px solid var(--lesson-caption-rim);
  transform:none;
  color:var(--sg-ink);
  text-align:left;
}
body.lessons-playful #dw-lessons .dw-t .big{
  display:block;
  width:100%;
  color:var(--sg-ink);
  font:800 18px/1.3 var(--lesson-heading);
  letter-spacing:-.025em;
  text-shadow:none;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
body.lessons-playful #dw-lessons .dw-t .sub{
  display:block;
  max-width:100%;
  margin-top:0;
  padding-right:20px;
  color:var(--sg-ink);
  opacity:1;
  font:600 12px/1.6 var(--app-font);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  text-shadow:none;
  overflow-wrap:break-word;
}
body.lessons-playful #dw-lessons .dw-t .dw-min{
  display:inline-block;
  margin:4px 0 0 4px;
  padding:1px 6px;
  border-radius:8px;
  background:#fff9e9d9;
  color:var(--sg-ink);
  font:600 10px/1.5 var(--app-font);
  white-space:nowrap;
  text-shadow:none;
}
body.lessons-playful #dw-lessons .lesson-arrow{
  position:absolute;
  right:12px;
  bottom:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:24px;
  color:var(--sg-ink);
  pointer-events:none;
}
body.lessons-playful #dw-lessons .lesson-arrow svg{display:block;width:19px;height:19px;stroke-width:2.5}
body.lessons-playful #dw-lessons .dw-t.soon.sg-button{
  --sg-depth:5px;
  --sg-press:3px;
  --sg-gloss:rgba(255,255,255,.6);
  justify-content:flex-start;
}
body.lessons-playful #dw-lessons .dw-t.soon .lesson-category-art{filter:drop-shadow(0 6px 3px #29473520)}
body.lessons-playful #dw-lessons .dw-t.soon .tt{text-align:left}
body.lessons-playful #dw-lessons .dw-t.soon .sub{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:1px;
  padding:3px 7px;
  border:1px solid #d3c7b5;
  border-radius:9px;
  background:#fff9e9;
  color:#606558;
  font-size:11px;
  line-height:1.5;
}
body.lessons-playful #dw-lessons .dw-t .lock{width:11px;height:11px;flex:none;margin-right:2px;color:currentColor}

/* The existing dock keeps its destinations and due counter. */
body.lessons-playful .dw-nav{
  position:fixed;
  left:8px;
  right:8px;
  top:auto;
  bottom:0;
  width:auto;
  transform:none;
  display:flex;
  flex-direction:row;
  gap:2px;
  margin:0;
  padding:5px max(4px,var(--lesson-safe-right)) calc(8px + var(--lesson-safe-bottom)) max(4px,var(--lesson-safe-left));
  border:1px solid var(--app-rim);
  border-bottom:0;
  border-radius:25px 25px 0 0;
  background:linear-gradient(#fffdf5,#f9f1df);
  box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f15;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:30;
}
body.lessons-playful .dw-nav a{
  flex:1 1 0%;
  min-width:44px;
  min-height:64px;
  padding:4px 0 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:17px;
  color:var(--app-muted);
  opacity:1;
  font:500 11px/1.4 var(--app-font);
  transition:transform 140ms ease,background 140ms ease;
}
body.lessons-playful .dw-nav a:last-child{flex-grow:1.25}
body.lessons-playful .dw-nav a.on{background:var(--app-soft);box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1;color:var(--app-deep);font-weight:800}
body.lessons-playful .dw-nav a:active{transform:translateY(2px)}
body.lessons-playful .dw-nav a [data-jp]{font:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:normal;word-break:normal}
body.lessons-playful .dw-nav .dw-ic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.lessons-playful .dw-nav-object{display:block;width:36px;height:36px;object-fit:contain;flex:none}
body.lessons-playful .dw-nav-object + svg{display:none}
body.lessons-playful .dw-nav .dw-badge{top:0;right:-7px;background:var(--app-sea);border:1px solid var(--app-paper);font:700 10px/1.3 var(--app-font);min-width:17px;height:17px}
body.lessons-playful .dw-ft{position:relative;z-index:1;max-width:900px;margin:24px auto 0;padding:0 20px 10px;gap:4px 8px;color:#fff9e9;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899;opacity:1;font:500 11px/1.6 var(--app-font)}
body.lessons-playful .dw-ft a{display:inline-flex;align-items:center;min-height:44px;padding:4px 5px}
body.lessons-playful .dw-ft .sep{align-self:center;opacity:.45}
body.lessons-playful :is(.dw-nav a,#drewLangToggle,.dw-ft a):focus-visible{outline:3px solid var(--app-deep);outline-offset:4px}
body.lessons-playful .dw-ft a:focus-visible{outline-color:#fff9e9}

/* Honest coming-soon sheet: illustrated cards still open the existing message. */
body.lessons-playful .dw-soon{
  z-index:60;
  padding:max(20px,var(--lesson-safe-top)) max(20px,var(--lesson-safe-right)) max(20px,var(--lesson-safe-bottom)) max(20px,var(--lesson-safe-left));
  background:#193f386b;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
body.lessons-playful .dw-soon .card{
  width:100%;
  max-width:410px;
  max-height:calc(100svh - var(--lesson-safe-top) - var(--lesson-safe-bottom) - 40px);
  padding:25px 23px 29px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--app-rim);
  border-radius:28px;
  background:var(--app-paper);
  box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--app-edge),0 18px 40px #173a3933;
  color:var(--app-ink);
}
body.lessons-playful .dw-soon .tag{padding:4px 9px;border:1px solid #d9d5c7;border-radius:10px;background:#ece9dd;color:#616b5e;font:600 11px/1.6 var(--app-font)}
body.lessons-playful .dw-soon .msg{margin-top:16px;color:var(--app-ink);font:700 17px/1.65 var(--app-font)}
body.lessons-playful .dw-soon .kept{margin-top:10px;color:var(--app-muted);font:400 13px/1.6 var(--app-font)}
body.lessons-playful .dw-soon .row{display:flex;flex-wrap:wrap;gap:14px 12px;margin-top:24px}
body.lessons-playful .dw-soon .row .sg-button{--sg-height:48px;--sg-radius:16px;--sg-depth:5px;flex:1 1 140px;min-width:0;min-height:var(--sg-height);padding:11px 14px;font:700 14px/1.5 var(--app-font)}

@media(hover:hover) and (pointer:fine){
  body.lessons-playful #dw-lessons .dw-t:not(.soon):hover .lesson-category-art{transform:translateY(-3px) rotate(-1deg)}
}
@media(min-width:600px){
  body.lessons-playful #dw-lessons{padding-top:20px;gap:27px}
  body.lessons-playful #dw-lessons .dw-grid{gap:26px 22px}
  body.lessons-playful #dw-lessons .dw-t.sg-button{--sg-radius:27px;--sg-height:292px;padding:11px 11px 14px}
  body.lessons-playful #dw-lessons .dw-t .bg{height:178px;border-radius:20px}
  body.lessons-playful #dw-lessons .dw-t .tt{min-height:88px;padding:15px 7px 2px}
  body.lessons-playful #dw-lessons .dw-t .big{font-size:21px}
  body.lessons-playful #dw-lessons .dw-t .sub{font-size:13px}
  body.lessons-playful #dw-lessons .dw-t.soon .sub{font-size:12px}
  body.lessons-playful #dw-lessons .lesson-arrow{right:17px;bottom:18px}
}
@media(min-width:880px){
  body.lessons-playful{--dw-nav-inset:228px}
  body.lessons-playful.dw-has-nav{padding-left:var(--dw-nav-inset);padding-bottom:24px}
  body.lessons-playful .dw-hd{display:flex;flex-wrap:wrap;min-height:82px;padding:24px 132px 10px 24px;gap:14px}
  body.lessons-playful .dw-hd .dw-pill{margin:0 0 0 auto;font-size:12px}
  body.lessons-playful #drewLangToggle{top:24px;right:max(24px,calc((100vw - 228px - 940px)/2))}
  body.lessons-playful #dw-lessons{padding:22px 24px 20px;gap:29px}
  body.lessons-playful #dw-lessons .dw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 20px}
  body.lessons-playful #dw-lessons .dw-t .bg{height:clamp(170px,15vw,185px)}
  body.lessons-playful #dw-lessons .dw-t .big{font-size:20px}
  body.lessons-playful .dw-nav{left:18px;right:auto;top:20px;bottom:20px;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border:1px solid var(--app-rim);border-radius:27px;box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--app-edge),0 12px 30px #163c4d14}
  body.lessons-playful .dw-nav a{flex:none;width:100%;min-height:56px;flex-direction:row;align-items:center;justify-content:flex-start;padding:8px 9px;gap:10px;font-size:14px;text-align:left}
  body.lessons-playful .dw-nav a:last-child{flex-grow:0}
  body.lessons-playful .dw-nav .dw-badge{right:-4px;top:-2px}
  body.lessons-playful .dw-ft{margin-top:28px;padding-bottom:10px}
}
@media(max-width:359px){
  body.lessons-playful .dw-hd{padding-left:max(14px,var(--lesson-safe-left));padding-right:112px}
  body.lessons-playful .dw-hd .dw-logo{font-size:17px;gap:7px}
  body.lessons-playful .dw-brand-object{width:35px;height:35px}
  body.lessons-playful .dw-hd .dw-pill{margin-left:42px;font-size:10px}
  body.lessons-playful #drewLangToggle{right:max(14px,var(--lesson-safe-right))}
  body.lessons-playful #dw-lessons{padding-left:max(14px,var(--lesson-safe-left));padding-right:max(14px,var(--lesson-safe-right));gap:20px}
  body.lessons-playful #dw-lessons .dw-grid{gap:20px 12px}
  body.lessons-playful #dw-lessons .dw-t.sg-button{--sg-radius:21px;--sg-height:248px;padding:7px 7px 12px}
  body.lessons-playful #dw-lessons .dw-t .bg{height:138px;border-radius:16px}
  body.lessons-playful #dw-lessons .dw-t .tt{padding:12px 2px 2px}
  body.lessons-playful #dw-lessons .dw-t .big{font-size:16px}
  body.lessons-playful #dw-lessons .dw-t .sub{font-size:11px;padding-right:18px}
  body.lessons-playful #dw-lessons .dw-t.soon .sub{font-size:10px;padding:3px 5px}
  body.lessons-playful #dw-lessons .lesson-arrow{right:10px;bottom:15px;width:18px}
  body.lessons-playful .dw-nav{left:4px;right:4px}
  body.lessons-playful .dw-nav a{font-size:10px}
}
@media(max-width:879px) and (max-height:500px) and (orientation:landscape){
  body.lessons-playful .dw-nav a{min-height:44px;flex-direction:row;gap:5px}
  body.lessons-playful .dw-nav :is(.dw-ic,.dw-nav-object){width:30px;height:30px}
  body.lessons-playful.dw-has-nav{padding-bottom:calc(84px + var(--lesson-safe-bottom))}
}
@media(prefers-reduced-motion:reduce){
  body.lessons-playful :is(.lesson-category-art,.dw-nav a,#drewLangToggle){transition:none}
  body.lessons-playful #dw-lessons .dw-t:hover .lesson-category-art{transform:none}
}

/* One-screen portrait phone catalogue. Larger text/zoom and landscape retain
   the natural-flow layout above; legal links are also available in Profile.
   THE CARDS FILL THE SCREEN (Andrew, 13 Oct 2026 06:05, item 4): one row per two cards, however many the launch catalogue
   shows, each row an equal share of the height between the heading and the tab bar. A fixed three-row grid left the
   bottom row empty when fewer than five cards showed (build 6 shows four). test/cards-fill-height.cjs */
@media(min-width:360px) and (max-width:600px) and (min-height:600px) and (orientation:portrait){
  body.lessons-playful.dw-has-nav{padding-bottom:calc(88px + var(--lesson-safe-bottom))}
  body.lessons-playful .dw-hd{min-height:66px;height:calc(66px + var(--lesson-safe-top));padding-top:calc(8px + var(--lesson-safe-top));padding-bottom:8px}
  body.lessons-playful .dw-hd .dw-pill{display:none}
  body.lessons-playful #drewLangToggle{top:calc(9px + var(--lesson-safe-top))}
  body.lessons-playful #dw-lessons{height:calc(100svh - 154px - var(--lesson-safe-top) - var(--lesson-safe-bottom));padding:4px 16px 8px;gap:12px}
  body.lessons-playful #dw-lessons .dw-hero{flex:none;padding:0 2px}
  body.lessons-playful #dw-lessons .dw-hero .eye{display:none}
  body.lessons-playful #dw-lessons .dw-hero .ttl{margin:0;font-size:27px;line-height:1.25;color:var(--sky-ink);text-shadow:var(--sky-shadow)}
  body.lessons-playful #dw-lessons .dw-grid{flex:1;min-height:0;grid-template-rows:none;grid-auto-rows:minmax(110px,1fr);gap:14px 14px}
  body.lessons-playful #dw-lessons .dw-t.sg-button{--sg-radius:21px;--sg-depth:5px;--sg-press:3px;min-height:0;height:100%;padding:6px 7px 7px;overflow:visible}
  body.lessons-playful #dw-lessons .dw-t .bg{height:auto;flex:1;min-height:36px;border-radius:15px}
  body.lessons-playful #dw-lessons .lesson-category-art{position:absolute;inset:0;width:100%;height:100%}
  body.lessons-playful #dw-lessons .dw-t .tt{flex:none;min-height:62px;padding:6px 2px 0;gap:3px}
  body.lessons-playful #dw-lessons .dw-t .big{font-size:16px;line-height:1.2}
  body.lessons-playful #dw-lessons .dw-t .sub{font-size:11px;line-height:1.35;padding-right:13px}
  body.lessons-playful #dw-lessons .dw-t.soon .sub{font-size:10px;padding:3px 6px}
  body.lessons-playful #dw-lessons .dw-min{font-size:10px}
  body.lessons-playful #dw-lessons .lesson-arrow{right:8px;bottom:9px;width:15px;height:15px}
  body.lessons-playful .dw-ft{display:none}
}