/* Units: /units/, /units/N/, reviews, tests, the starting check and the final project, plus the lesson-page additions
   (breadcrumb, "Lesson 6, 2 of 4", your role, quick check, exit ticket). redesign_units.py and case_page.py.
   House look: navy outlines, hard offset shadows in blue, yellow and pink, filled brand panels, Clash Display headings,
   photo frames for the art, and a different background band wherever dense sections meet. */

:root{
  --un-ink:#142b46; --un-blue:#124dec; --un-blue-dark:#0b37b0; --un-gold:#ffdc52; --un-pink:#c2185b;
  --un-sky:#eaf1ff; --un-sun:#fff4cf; --un-rose:#ffe9f1; --un-butter:#fff6d6; --un-line:#c9d4ea; --un-ok:#0d7a4f; --un-no:#b3123f;
  --un-display:var(--r-display,'Clash Display','Satoshi',system-ui,sans-serif); --un-body:var(--r-body,'Satoshi',system-ui,sans-serif);
  --un-edge:2.5px solid var(--un-ink); --un-pad:clamp(44px,6vw,88px); --un-r:24px; --un-r-sm:16px;
}

/* ---------- Frame, bands and type ---------- */
#main .un-page{display:block;color:var(--un-ink);font-family:var(--un-body)}
#main .un-page *{box-sizing:border-box}
#main .un-page .un-band{margin:0!important;padding:var(--un-pad) 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff}
#main .un-page .un-band--sky{background:var(--un-sky)}
#main .un-page .un-band--sun{background:var(--un-sun)}
#main .un-page .un-band--rose{background:var(--un-rose)}
#main .un-page .un-band.un-top{padding-top:clamp(24px,3vw,40px)!important}
#main .un-page .un-band.un-tail{padding-top:clamp(36px,4vw,56px)!important}
#main .un-page .un-band--white + .un-band--white{padding-top:0!important}
#main .un-page .un-wrap{width:min(1240px,calc(100% - 96px));margin:0 auto}
@media (max-width:1100px){#main .un-page .un-wrap{width:calc(100% - 64px)}}
@media (max-width:760px){#main .un-page .un-wrap{width:calc(100% - 32px)}}
#main .un-page :is(h1,h2,h3,h4){font-family:var(--un-display);color:var(--un-ink);letter-spacing:-.01em;margin:0;text-wrap:balance}
#main .un-page h1{font-size:clamp(2.2rem,4.6vw,3.9rem)!important;line-height:1.02!important;font-weight:650!important}
#main .un-page h2{font-size:clamp(1.75rem,3vw,2.6rem)!important;line-height:1.06!important;font-weight:650!important}
#main .un-page h3{font-size:clamp(1.2rem,1.6vw,1.45rem)!important;line-height:1.15!important;font-weight:650!important}
#main .un-page h4{font-size:1.1rem!important;line-height:1.2!important;font-weight:650!important;margin-top:22px}
#main .un-page p{margin:0;max-width:none;font-size:1.0625rem;line-height:1.6;color:var(--un-ink)}
#main .un-page :is(ul,ol){margin:0;padding:0;list-style:none}
#main .un-page li{margin:0}
#main .un-page li::marker{content:none}
#main .un-page a{color:var(--un-blue);text-underline-offset:.2em}
#main .un-page img{display:block;max-width:100%;height:auto}
#main .un-page .npw-icon{width:1.2em;height:1.2em}
#main .un-sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 32px;margin-bottom:clamp(22px,2.8vw,36px)}
#main .un-sec-head p{max-width:560px;font-size:1.125rem}
#main .un-lede{margin-top:14px!important;font-size:clamp(1.125rem,1.6vw,1.35rem)!important;line-height:1.5!important;max-width:720px}
#main .un-k{font:750 .8125rem/1.3 var(--un-body)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--un-ink)!important;margin:0 0 8px!important}

/* chips, buttons, frames */
#main .un-chip{display:inline-flex;align-items:center;margin:0!important;padding:5px 14px;border:2px solid var(--un-ink);border-radius:999px;background:#fff;
  font:750 .9375rem/1.2 var(--un-body)!important;color:var(--un-ink)!important}
#main .un-chip--blue{background:var(--un-blue);color:#fff!important}
#main .un-chip--gold{background:var(--un-gold)}
#main .un-chip--pink{background:var(--un-pink);color:#fff!important}
#main .un-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border:var(--un-edge);border-radius:999px;
  background:var(--un-blue);color:#fff!important;font:750 1.0625rem/1.2 var(--un-body);text-decoration:none!important;box-shadow:4px 4px 0 var(--un-ink);
  transition:transform .15s,box-shadow .15s;margin-right:4px}
#main .un-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--un-ink)}
#main .un-btn:focus-visible,#main .un-page :is(a,button,select,input,textarea):focus-visible{outline:3px solid var(--un-gold);outline-offset:3px}
#main .un-btn--small{min-height:46px;padding:10px 20px;font-size:1rem}
#main .un-pill{display:inline-flex;align-items:center;min-height:44px;padding:9px 20px;background:#fff;color:var(--un-ink)!important;border:var(--un-edge);border-radius:999px;
  font:750 1rem/1.2 var(--un-body);text-decoration:none!important;box-shadow:3px 3px 0 var(--un-ink)}
#main .un-pill:hover{background:var(--un-butter)}
#main .un-frame{display:block;margin:0 8px 8px 0;padding:0;border:6px solid #fff;border-radius:26px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 2.5px var(--un-ink),8px 8px 0 2.5px var(--un-blue)}
#main .un-frame img{width:100%;height:100%;object-fit:cover;border-radius:19px}
#main .un-face{width:56px;height:56px;border-radius:50%;border:2px solid var(--un-ink);background:#fff;flex:none;object-fit:cover}

/* breadcrumb: separators drawn here, never typed */
#main :is(.un-crumbs,.cs-crumbs) ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 18px;padding:0;list-style:none}
#main :is(.un-crumbs,.cs-crumbs) li{display:inline-flex;align-items:center;margin:0!important;padding:0!important;font:700 1rem/1.4 var(--un-body);color:var(--un-ink)}
#main :is(.un-crumbs,.cs-crumbs) li + li::before{content:"/";margin:0 .55em;color:var(--un-blue);font-weight:800}
#main :is(.un-crumbs,.cs-crumbs) a{color:var(--un-blue)!important;text-decoration:underline;text-decoration-thickness:2px}
#main :is(.un-crumbs,.cs-crumbs) [aria-current]{font-weight:650}

/* progress (units.js fills it) */
#main .un-progress{font:700 .9375rem/1.3 var(--un-body)!important}
#main .un-progress:empty{display:none}
#main .un-progress--bar{display:flex;flex-direction:column;gap:8px;min-width:200px}
#main .un-progress--bar::after{content:"";display:block;height:12px;border:2px solid var(--un-ink);border-radius:999px;
  background:linear-gradient(90deg,var(--un-gold) calc(var(--un-done,0)*100%),#fff 0)}
#main .un-status{flex:none;align-self:center;font:750 .8125rem/1 var(--un-body);border-radius:999px}
#main .un-status:empty{display:none}
#main .un-status[data-state]{padding:6px 10px;border:2px solid var(--un-ink);background:#fff;color:var(--un-ink)}
#main .un-status[data-state="done"]{background:var(--un-gold)}

/* ---------- /units/ ---------- */
#main .un-hub-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px}
#main .un-hub-go{margin:0!important}
#main .un-find{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) auto;align-items:end;gap:12px 14px;margin-top:clamp(24px,3vw,36px);
  padding:18px 20px;background:#fff;border:var(--un-edge);border-radius:var(--un-r);box-shadow:6px 6px 0 var(--un-gold)}
#main .un-find label{display:block;margin-bottom:6px;font:750 .875rem/1.2 var(--un-body);color:var(--un-ink)}
#main .un-find-box{position:relative}
#main .un-find-box .npw-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--un-ink)}
#main .un-find :is(input,select){width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--un-ink);border-radius:12px;background:#fff;color:var(--un-ink);font:600 1rem/1.2 var(--un-body)}
#main .un-find input{padding-left:44px}
#main .un-find select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23142b46' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 12px center}
#main .un-find-reset{min-height:48px;padding:10px 18px;border:2px solid var(--un-ink);border-radius:999px;background:#fff;color:var(--un-ink);font:750 1rem/1 var(--un-body)}
#main .un-find-reset:hover{background:var(--un-butter)}
#main .un-find-count{grid-column:1/-1;font:700 1rem/1.3 var(--un-body)!important}
#main .un-find-count:empty{display:none}
@media (max-width:1100px){#main .un-find{grid-template-columns:repeat(2,minmax(0,1fr))}#main .un-find-q{grid-column:1/-1}}
@media (max-width:520px){#main .un-find{grid-template-columns:1fr;padding:16px}#main .un-find-reset{justify-self:start}}

#main .un-units{display:grid;gap:clamp(28px,3.4vw,44px)}
#main .un-unit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin:0 10px 10px 0!important;background:#fff;border:var(--un-edge);border-radius:var(--un-r);
  overflow:hidden;box-shadow:10px 10px 0 var(--un-shadow,var(--un-ink))}
#main .un-unit--blue{--un-fill:var(--un-blue);--un-on:#fff;--un-shadow:var(--un-gold)}
#main .un-unit--gold{--un-fill:var(--un-gold);--un-on:var(--un-ink);--un-shadow:var(--un-pink)}
#main .un-unit--pink{--un-fill:var(--un-pink);--un-on:#fff;--un-shadow:var(--un-blue)}
#main .un-unit-panel{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px);background:var(--un-fill);color:var(--un-on);border-right:var(--un-edge)}
#main .un-unit-panel .un-chip{align-self:flex-start}
#main .un-unit-panel h2{font-size:clamp(1.8rem,2.8vw,2.5rem)!important}
#main .un-unit-panel h2 a{color:var(--un-on)!important;text-decoration:none}
#main .un-unit-panel h2 a:hover{text-decoration:underline;text-decoration-thickness:3px}
#main .un-unit-panel .un-eq{font:600 1.125rem/1.45 var(--un-body)!important;color:var(--un-on)!important}
#main .un-with{display:flex;align-items:center;gap:12px;color:var(--un-on)!important}
#main .un-with > span{display:flex;flex-direction:column;font-size:.9375rem;line-height:1.35}
#main .un-with b{font-weight:750}
#main .un-mini-img{width:56px;height:56px;border-radius:50%;border:2.5px solid var(--un-ink);background:#fff;object-fit:cover;object-position:50% 20%;flex:none}
#main .un-unit-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
#main .un-unit-foot .un-progress{color:var(--un-on)!important}
#main .un-rows{display:flex;flex-direction:column;justify-content:center;padding:8px clamp(14px,2vw,24px)}
#main .un-row + .un-row{border-top:1.5px solid var(--un-line)}
#main .un-row-link{display:flex;align-items:center;gap:14px;padding:16px 6px;color:var(--un-ink)!important;text-decoration:none!important;border-radius:14px}
#main .un-row-link:hover{background:var(--un-sky)}
#main .un-row-link:hover .un-row-title{text-decoration:underline;text-decoration-thickness:2px}
#main .un-row-face{width:48px;height:48px;border-radius:50%;border:2px solid var(--un-ink);background:#fff;flex:none}
#main .un-row-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#main .un-row-no{font:750 .875rem/1.2 var(--un-body);color:var(--un-pink)}
#main .un-row-title{font:650 1.1875rem/1.25 var(--un-display);color:var(--un-ink)}
#main .un-row-skill{display:flex;align-items:flex-start;gap:6px;font:600 .9375rem/1.35 var(--un-body);color:var(--un-ink)}
#main .un-row-skill .npw-icon{margin-top:1px;color:var(--un-blue)}
@media (max-width:900px){
  #main .un-unit{grid-template-columns:1fr}
  #main .un-unit-panel{border-right:0;border-bottom:var(--un-edge)}
}
@media (max-width:520px){
  #main .un-unit{margin-right:6px!important;box-shadow:6px 6px 0 var(--un-shadow)}
  #main .un-row-link{gap:10px;padding:14px 2px}
  #main .un-row-face{width:40px;height:40px}
  #main .un-row-title{font-size:1.0625rem}
}
#main .un-empty{margin-top:20px!important;padding:18px 20px;background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm);font-weight:650}
#main .un-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(22px,3vw,36px);background:var(--un-butter);
  border:var(--un-edge);border-radius:var(--un-r);box-shadow:8px 8px 0 var(--un-pink);margin-right:8px}
#main .un-final h2{margin-top:10px}
#main .un-final p{margin-top:8px;max-width:640px}
#main .un-edu{display:flex;align-items:center;gap:12px;font-size:1.0625rem!important;font-weight:600}
#main .un-edu .npw-icon{width:40px;height:40px}
#main .un-hub-edu{padding-top:clamp(32px,4vw,48px)!important}

/* ---------- /units/N/: header ---------- */
#main .un-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
#main .un-head-text > * + *{margin-top:16px!important}
#main .un-head h1{max-width:12ch}
#main .un-meta{display:flex;flex-wrap:wrap;gap:10px}
#main .un-meta li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:2px solid var(--un-ink);border-radius:999px;background:#fff;font:700 .9375rem/1.2 var(--un-body)}
#main .un-meta .npw-icon{color:var(--un-blue)}
#main .un-head-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:8px}
#main .un-bigq{position:relative;margin:0 8px 8px 0;padding:clamp(24px,3vw,40px);background:var(--un-butter);border:var(--un-edge);border-radius:var(--un-r);box-shadow:8px 8px 0 var(--un-gold)}
#main .un-bigq-k{font:750 .875rem/1.2 var(--un-body)!important;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px!important}
#main .un-bigq-q{font:650 clamp(1.45rem,2.4vw,2.05rem)/1.2 var(--un-display)!important;letter-spacing:-.01em;text-wrap:balance}
@media (max-width:900px){#main .un-head-grid{grid-template-columns:1fr}#main .un-head h1{max-width:none}}

/* the story so far */
#main .un-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
#main .un-story-art{aspect-ratio:16/10}
#main .un-story-p{margin-top:16px!important;font-size:clamp(1.125rem,1.5vw,1.3rem)!important;line-height:1.6!important}
#main .un-story-text .un-k{margin-top:26px!important}
#main .un-leads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#main .un-leads li{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;background:#fff;border:2px solid var(--un-ink);border-radius:999px}
#main .un-leads li > span{display:flex;flex-direction:column;line-height:1.25}
#main .un-leads b{font:650 1.0625rem/1.2 var(--un-display)}
#main .un-leads li > span > span{font-size:.875rem;font-weight:600}
#main .un-leads .un-face{width:48px;height:48px}
@media (max-width:900px){#main .un-story{grid-template-columns:1fr}}
@media (max-width:420px){#main .un-leads{grid-template-columns:1fr}}

/* mentor briefing */
#main .un-mentor{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:center}
#main .un-mentor--nopic{grid-template-columns:1fr;max-width:860px}
#main .un-mentor-pic{aspect-ratio:1;max-width:460px;box-shadow:0 0 0 2.5px var(--un-ink),8px 8px 0 2.5px var(--un-pink);background:var(--un-sky)}
#main .un-mentor-pic img{object-position:50% 25%}
#main .un-mentor-text h2{margin-top:2px}
#main .un-mentor-job{margin-top:8px!important;font-weight:650;font-size:1.125rem!important}
#main .un-mentor-focus{margin-top:14px!important}
#main .un-mentor-text h3{margin-top:26px!important}
#main .un-watch{display:grid;gap:10px;margin-top:12px!important}
#main .un-watch li{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--un-sky);border-radius:14px;font:600 1.0625rem/1.4 var(--un-body)}
#main .un-watch .npw-icon{margin-top:2px;color:var(--un-blue)}
#main .un-quote{margin:24px 0 0!important;padding:18px 22px;background:#fff;border:var(--un-edge);border-radius:22px 22px 22px 6px;box-shadow:5px 5px 0 var(--un-pink);margin-right:5px!important}
#main .un-quote p{font:650 clamp(1.2rem,1.8vw,1.45rem)/1.3 var(--un-display)!important}
#main .un-quote footer{margin-top:8px;font:700 .9375rem/1.3 var(--un-body);color:var(--un-ink);background:none;padding:0}
#main .un-mentor-more{margin-top:18px!important;font-weight:750}
@media (max-width:900px){#main .un-mentor{grid-template-columns:1fr}#main .un-mentor-pic{max-width:340px}}

/* the skill ladder: four rungs that climb */
#main .un-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end;counter-reset:rung}
#main .un-rung{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 22px;background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm);
  box-shadow:6px 6px 0 var(--un-ink);margin:0 6px 6px 0!important}
#main .un-rung--1{margin-top:108px!important}
#main .un-rung--2{margin-top:72px!important}
#main .un-rung--3{margin-top:36px!important}
#main .un-rung--4{background:var(--un-blue);color:#fff}
#main .un-rung--4 :is(h3,p,.un-k,a,span){color:#fff!important}
#main .un-rung--4 .un-uses li{background:var(--un-blue-dark);border-color:#fff}
#main .un-rung-no span{display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--un-gold);border:2px solid var(--un-ink);font:750 .875rem/1.2 var(--un-body);color:var(--un-ink)!important}
#main .un-rung-detail{font-size:1rem!important;line-height:1.5!important}
#main .un-rung .un-k{margin:6px 0 0!important}
#main .un-uses{display:flex;flex-direction:column;gap:8px}
#main .un-uses li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1.5px solid var(--un-ink);border-radius:12px;background:var(--un-sun)}
#main .un-uses a{font:700 .9375rem/1.3 var(--un-body);color:var(--un-ink)!important}
#main .un-uses span{font-size:.8125rem;font-weight:650}
#main .un-first{font-size:.9375rem!important;font-weight:600}
@media (max-width:1100px){
  #main .un-ladder{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  #main .un-rung--1,#main .un-rung--2,#main .un-rung--3{margin-top:0!important}
}
@media (max-width:620px){
  #main .un-ladder{grid-template-columns:1fr;gap:16px}
  /* the climb reads as steps stepping right */
  #main .un-rung--2{margin-left:12px!important}#main .un-rung--3{margin-left:24px!important}#main .un-rung--4{margin-left:36px!important}
}

/* the four lessons */
#main .un-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
#main .un-lesson{display:flex;flex-direction:column;background:#fff;border:var(--un-edge);border-radius:var(--un-r);overflow:hidden;margin:0 8px 8px 0!important;
  box-shadow:8px 8px 0 var(--un-shadow,var(--un-blue))}
#main .un-lesson:nth-child(2){--un-shadow:var(--un-gold)}
#main .un-lesson:nth-child(3){--un-shadow:var(--un-pink)}
#main .un-lesson-art{margin:0;border:0;border-bottom:var(--un-edge);border-radius:0;box-shadow:none;aspect-ratio:16/9}
#main .un-lesson-art img{border-radius:0}
#main .un-lesson-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(18px,2.2vw,28px)}
#main .un-lesson-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#main .un-lesson-no{font:750 1rem/1.2 var(--un-body)!important;color:var(--un-pink)!important}
#main .un-lesson-no span{color:var(--un-ink)}
#main .un-lesson h3{font-size:clamp(1.35rem,2vw,1.7rem)!important}
#main .un-lesson h3 a{color:var(--un-ink)!important;text-decoration:none}
#main .un-lesson h3 a:hover{text-decoration:underline;text-decoration-thickness:3px}
#main .un-lead{display:flex;align-items:center;gap:10px;font-weight:700}
#main .un-lead .un-face{width:40px;height:40px}
#main .un-facts{display:grid;gap:10px;margin:0}
#main .un-facts > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;padding-top:10px;border-top:1.5px solid var(--un-line)}
#main .un-facts dt{font:750 .9375rem/1.4 var(--un-body)}
#main .un-facts dd{margin:0;font-size:1rem;line-height:1.45}
#main .un-terms{display:flex;flex-wrap:wrap;gap:6px}
#main .un-terms li{padding:3px 10px;background:var(--un-sky);border-radius:999px;font:650 .875rem/1.4 var(--un-body)}
#main .un-lesson-go{margin-top:auto!important;padding-top:6px}
@media (max-width:900px){#main .un-lesson-grid{grid-template-columns:1fr}}
@media (max-width:420px){#main .un-facts > div{grid-template-columns:1fr;gap:2px}}

/* words to know: flip cards */
#main .un-flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
#main .un-flip{display:block;width:100%;height:100%;min-height:230px;margin:0;padding:0;border:0;background:none;color:var(--un-ink);text-align:left;cursor:pointer;perspective:1000px;font:inherit}
#main .un-flip-in{position:relative;display:grid;height:100%;min-height:230px}
#main :is(.un-flip-front,.un-flip-back){grid-area:1/1;display:flex;flex-direction:column;gap:8px;padding:20px;border:var(--un-edge);border-radius:var(--un-r-sm);
  box-shadow:5px 5px 0 var(--un-ink);margin:0 5px 5px 0}
#main .un-flip-front{background:#fff}
#main .un-flip-back{background:var(--un-blue);color:#fff}
#main .un-flip-term{font:650 1.5rem/1.1 var(--un-display)}
#main .un-flip-pron{font:700 1rem/1.3 var(--un-body);color:var(--un-pink);letter-spacing:.02em}
#main .un-flip-pos{font-style:italic;font-size:.9375rem}
#main .un-flip-from{margin-top:auto;font:700 .8125rem/1.2 var(--un-body)}
#main .un-flip-hint{display:none;font:700 .8125rem/1.2 var(--un-body);color:var(--un-blue)}
#main .un-flip-def{font:600 1rem/1.45 var(--un-body)}
#main .un-flip-ex{font-size:.9375rem;line-height:1.45;padding-top:8px;border-top:1.5px solid rgba(255,255,255,.55)}
#main .un-flip-es{margin-top:auto;font:700 .875rem/1.3 var(--un-body)}
/* without scripts both sides show, one under the other */
html:not(.un-js) #main .un-flip-in{display:flex;flex-direction:column;gap:10px}
html:not(.un-js) #main .un-flip{cursor:default}
html.un-js #main .un-flip-in{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
html.un-js #main :is(.un-flip-front,.un-flip-back){backface-visibility:hidden;-webkit-backface-visibility:hidden}
html.un-js #main .un-flip-back{transform:rotateY(180deg)}
html.un-js #main .un-flip[aria-pressed="true"] .un-flip-in{transform:rotateY(180deg)}
html.un-js #main .un-flip-hint{display:block}
html.un-js #main .un-flip-from{margin-top:auto}
html.un-js #main .un-flip-hint{margin-top:2px}
#main .un-flip:focus-visible{outline:3px solid var(--un-gold);outline-offset:4px;border-radius:var(--un-r-sm)}
@media (prefers-reduced-motion:reduce){html.un-js #main .un-flip-in{transition:none}}

/* more practice */
#main .un-prac{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
#main .un-prac a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm);
  box-shadow:5px 5px 0 var(--un-gold);color:var(--un-ink)!important;text-decoration:none!important;margin:0 5px 5px 0}
#main .un-prac a:hover b{text-decoration:underline}
#main .un-prac-kind{font:750 .8125rem/1.2 var(--un-body);color:var(--un-pink)}
#main .un-prac b{font:650 1.125rem/1.25 var(--un-display)}
#main .un-more-all{margin-top:20px!important;font-weight:750}

/* review and test cards */
#main .un-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#main .un-checks a{display:flex;align-items:flex-start;gap:16px;height:100%;padding:22px 24px;background:#fff;border:var(--un-edge);border-radius:var(--un-r);
  box-shadow:6px 6px 0 var(--un-blue);color:var(--un-ink)!important;text-decoration:none!important;margin:0 6px 6px 0}
#main .un-check--test a{box-shadow:6px 6px 0 var(--un-pink)}
#main .un-checks .npw-icon{width:48px;height:48px}
#main .un-checks a > span{display:flex;flex-direction:column;gap:6px}
#main .un-checks b{font:650 1.4rem/1.15 var(--un-display)}
@media (max-width:760px){#main .un-checks{grid-template-columns:1fr}}

/* for educators and the next unit */
#main .un-tail .un-wrap{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
#main .un-next{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(18px,2.4vw,28px);
  background:var(--un-fill,var(--un-blue));color:var(--un-on,#fff)!important;border:var(--un-edge);border-radius:var(--un-r);box-shadow:8px 8px 0 var(--un-ink);
  text-decoration:none!important;margin-right:8px}
#main .un-next--blue{--un-fill:var(--un-blue);--un-on:#fff}
#main .un-next--gold{--un-fill:var(--un-gold);--un-on:var(--un-ink)}
#main .un-next--pink{--un-fill:var(--un-pink);--un-on:#fff}
#main .un-next:not(:has(.un-next-art)){grid-template-columns:1fr}
#main .un-next-art{margin:0;aspect-ratio:16/9;box-shadow:0 0 0 2.5px var(--un-ink)}
#main .un-next-text{display:flex;flex-direction:column;gap:10px}
#main .un-next .un-k{color:var(--un-on)!important}
#main .un-next-title{font:650 clamp(1.6rem,2.8vw,2.4rem)/1.05 var(--un-display);color:var(--un-on)}
#main .un-next-q{font:600 1.125rem/1.45 var(--un-body);color:var(--un-on)}
#main .un-next:hover .un-next-title{text-decoration:underline;text-decoration-thickness:3px}
@media (max-width:760px){#main .un-next{grid-template-columns:1fr}}

/* ---------- Reviews, tests, the starting check and the final project ---------- */
#main .un-head--check h1{max-width:none}
#main .un-levels{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px!important}
#main .un-levels p{font:750 .9375rem/1.2 var(--un-body)!important}
#main :is(.un-levels,.un-forms-switch,.un-sure) [role=group]{display:flex;flex-wrap:wrap;gap:8px}
#main :is(.un-levels,.un-forms-switch,.un-sure) button{min-height:44px;padding:8px 16px;border:2px solid var(--un-ink);border-radius:999px;background:#fff;color:var(--un-ink);
  font:750 .9375rem/1.2 var(--un-body);cursor:pointer}
#main :is(.un-levels,.un-forms-switch,.un-sure) button[aria-pressed="true"]{background:var(--un-ink);color:#fff}
html:not(.un-js) #main :is(.un-levels,.un-forms-switch){display:none}
html.un-js #main .un-lv:not(.is-on){display:none}
html.un-js #main [data-form-off]{display:none}
html.un-js #main .un-lv-name{display:none}
#main .un-lv + .un-lv{margin-top:32px}
#main .un-lv-name,#main .un-form-name{display:inline-flex;margin-bottom:14px!important;padding:4px 12px;border-radius:999px;background:var(--un-sky);font:750 .875rem/1.3 var(--un-body)!important}
#main .un-forms-switch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 24px}
#main .un-forms-switch p{font:750 .9375rem/1.2 var(--un-body)!important}
#main .un-forms-note{font-size:.9375rem!important}
#main .un-check-page h2 + p,#main .un-check-page h3 + p{margin-top:10px!important}
#main .un-check-page h3{margin-top:32px!important}
#main .un-scenario{margin-top:14px;max-width:820px}
#main .un-scenario p + p{margin-top:12px!important}
#main .un-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
#main .un-doc{padding:20px 22px;background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm);box-shadow:5px 5px 0 var(--un-ink);margin:0 5px 5px 0}
#main .un-doc-k{font:750 .8125rem/1.3 var(--un-body)!important;color:var(--un-pink)!important;letter-spacing:.04em;text-transform:uppercase}
#main .un-doc h3{margin:6px 0 10px!important;font-size:1.2rem!important}
#main .un-doc p + p{margin-top:10px!important}
@media (max-width:760px){#main .un-docs{grid-template-columns:1fr}}
#main .un-skill-lines{display:grid;gap:10px;counter-reset:sk;margin-top:18px}
#main .un-skill-lines li{padding:14px 18px;background:#fff;border:2px solid var(--un-ink);border-radius:14px;font-size:1.0625rem;line-height:1.5}
#main .un-mentor-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
#main :is(.un-sample,.un-feedback){padding:20px;background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm)}
#main .un-feedback{background:var(--un-butter)}
@media (max-width:760px){#main .un-mentor-check{grid-template-columns:1fr}}
#main .un-method,#main .un-steps{display:grid;gap:10px;margin-top:14px;counter-reset:st}
#main :is(.un-method,.un-steps) li{position:relative;padding:12px 16px 12px 56px;background:#fff;border:2px solid var(--un-ink);border-radius:14px;counter-increment:st;line-height:1.5}
#main :is(.un-method,.un-steps) li::before{content:counter(st);position:absolute;left:12px;top:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--un-gold);border:2px solid var(--un-ink);font:750 .9375rem/1 var(--un-body)}
#main .un-safe{display:grid;gap:8px;margin:14px 0 16px}
#main .un-safe li{padding:10px 14px;background:#fff;border-radius:12px;border:1.5px solid var(--un-ink)}
#main .un-task{margin-top:12px;padding:clamp(18px,2.4vw,28px);background:#fff;border:var(--un-edge);border-radius:var(--un-r);box-shadow:6px 6px 0 var(--un-gold);margin-right:6px}
#main .un-task h4:first-child{margin-top:0}
#main .un-task h4 + p,#main .un-task h4 + ul{margin-top:6px!important}
#main .un-task ul:not([class]),#main .un-formats{display:grid;gap:6px}
#main .un-task ul:not([class]) li,#main .un-formats li{position:relative;padding-left:20px}
#main .un-task ul:not([class]) li::before,#main .un-formats li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--un-blue)}
#main .un-coach{margin-top:18px!important;padding:14px 18px;background:var(--un-sky);border-radius:14px}
#main .un-table-wrap{overflow-x:auto;margin-top:10px;border:2px solid var(--un-ink);border-radius:14px}
#main .un-rubric{width:100%;min-width:720px;border-collapse:collapse;font-size:.9375rem;line-height:1.45;background:#fff}
#main .un-rubric :is(th,td){padding:10px 12px;border-bottom:1.5px solid var(--un-line);border-right:1.5px solid var(--un-line);text-align:left;vertical-align:top}
#main .un-rubric thead th{background:var(--un-sky);font-weight:750}
#main .un-rubric tbody th{font-weight:750;background:var(--un-butter)}
#main .un-draft-l{display:block;margin-top:22px;font:750 1rem/1.3 var(--un-body)}
#main .un-next-row{margin:0!important}
#main .un-back{margin-top:16px!important;font-weight:750}

/* ---------- Self-check items (units pages and the lesson quick check) ---------- */
#main :is(.un-page,.cs-page) .un-qs{display:grid;gap:18px;margin-top:14px}
#main :is(.un-page,.cs-page) .un-q{margin:0 5px 5px 0;padding:clamp(16px,2vw,22px);background:#fff;border:var(--un-edge);border-radius:var(--un-r-sm);box-shadow:5px 5px 0 var(--un-sky)}
#main :is(.un-page,.cs-page) .un-q--parts{box-shadow:5px 5px 0 var(--un-sun)}
#main :is(.un-page,.cs-page) .un-q--parts .un-q{margin-top:14px;box-shadow:none;border-width:2px}
#main :is(.un-page,.cs-page) .un-q-stem{display:flex;gap:12px;align-items:flex-start;margin:0!important;font:650 1.0625rem/1.45 var(--un-body)!important;color:var(--un-ink)}
#main :is(.un-page,.cs-page) .un-q-n{flex:none;display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:999px;background:var(--un-ink);color:#fff;
  font:750 .875rem/1 var(--un-body)}
#main :is(.un-page,.cs-page) .un-opts{display:grid;gap:8px;margin:14px 0 0!important;padding:0!important;list-style:none}
#main :is(.un-page,.cs-page) .un-opts li{margin:0!important;padding:0!important}
#main :is(.un-page,.cs-page) .un-opts li::before{content:none!important}
#main :is(.un-page,.cs-page) .un-opt{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:48px;padding:10px 14px;background:#fff;border:2px solid var(--un-ink);border-radius:12px;
  color:var(--un-ink);font:600 1rem/1.45 var(--un-body);text-align:left;cursor:pointer}
#main :is(.un-page,.cs-page) .un-opt:hover{background:var(--un-sky)}
#main :is(.un-page,.cs-page) .un-opt-l{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--un-ink);font:750 .875rem/1 var(--un-body)}
#main :is(.un-page,.cs-page) .un-opt.is-right{background:#e3f6ec;border-color:var(--un-ok)}
#main :is(.un-page,.cs-page) .un-opt.is-right .un-opt-l{background:var(--un-ok);border-color:var(--un-ok);color:#fff}
#main :is(.un-page,.cs-page) .un-opt.is-wrong{background:#fdeaf0;border-color:var(--un-no)}
#main :is(.un-page,.cs-page) .un-opt.is-wrong .un-opt-l{background:var(--un-no);border-color:var(--un-no);color:#fff}
#main :is(.un-page,.cs-page) .un-opt.is-picked{box-shadow:3px 3px 0 var(--un-ink)}
#main :is(.un-page,.cs-page) .un-q-why{margin-top:10px!important;font:650 1rem/1.45 var(--un-body)!important}
#main :is(.un-page,.cs-page) .un-q-why:empty{display:none}
#main :is(.un-page,.cs-page) .un-q-why[data-state="right"]{color:var(--un-ok)!important}
#main :is(.un-page,.cs-page) .un-q-why[data-state="wrong"]{color:var(--un-no)!important}
#main :is(.un-page,.cs-page) .un-q--written textarea,#main :is(.un-page,.cs-page) .un-ticket textarea,#main .un-task textarea{display:block;width:100%;margin-top:12px;padding:12px 14px;
  border:2px solid var(--un-ink);border-radius:12px;background:#fff;color:var(--un-ink);font:500 1.0625rem/1.5 var(--un-body);resize:vertical}
#main :is(.un-page,.cs-page) .un-q-frame{margin-top:8px!important;padding:8px 12px;background:var(--un-butter);border-radius:10px;font-size:.9375rem!important}
#main :is(.un-page,.cs-page) .un-q-saved{margin-top:6px!important;font:650 .875rem/1.3 var(--un-body)!important}
#main :is(.un-page,.cs-page) .un-q-saved:empty{display:none}
#main :is(.un-page,.cs-page) .un-score{margin-top:12px!important;display:inline-flex;padding:6px 14px;border-radius:999px;background:var(--un-gold);border:2px solid var(--un-ink);font:750 .9375rem/1.2 var(--un-body)!important}
#main :is(.un-page,.cs-page) .un-score:empty{display:none}

/* ---------- Lesson pages: breadcrumb, "Lesson 6, 2 of 4", your role, quick check and exit ticket ---------- */
#main .cs-page .cs-crumbs ol{margin:0}
#main .cs-page .cs-where{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px!important}
#main .cs-page .cs-where-n{display:inline-flex;padding:5px 14px;border-radius:999px;background:var(--un-gold);border:2px solid var(--un-ink);font:750 .9375rem/1.2 var(--un-body);color:var(--un-ink)}
#main .cs-page .cs-where-time{display:inline-flex;align-items:center;gap:6px;font:700 .9375rem/1.2 var(--un-body);color:var(--un-ink)}
#main .cs-page .cs-where-time .npw-icon{color:var(--un-blue)}
#main .cs-page .cs-role{margin-top:14px!important;padding:12px 16px;border-left:5px solid var(--un-pink);background:var(--un-rose);border-radius:0 12px 12px 0;font-size:1.0625rem!important;line-height:1.5}
#main .cs-page .cs-role strong{display:block;font:750 .8125rem/1.3 var(--un-body);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
#main .cs-page .guest-visit--case h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
#main .cs-page :is(.un-qc,.un-ticket){margin-top:clamp(28px,3vw,40px);padding:clamp(18px,2.4vw,28px);background:var(--un-sky);border:var(--un-edge);border-radius:var(--un-r);
  box-shadow:6px 6px 0 var(--un-blue);margin-right:6px}
#main .cs-page .un-ticket{background:var(--un-butter);box-shadow:6px 6px 0 var(--un-gold)}
#main .cs-page :is(.un-qc,.un-ticket) h3{margin:0 0 8px!important;font:650 clamp(1.35rem,2vw,1.6rem)/1.15 var(--un-display)!important;color:var(--un-ink)!important}
#main .cs-page :is(.un-qc,.un-ticket) > p{margin:0!important;font-size:1rem!important}
#main .cs-page .un-qc .un-levels{margin-top:14px!important}
#main .cs-page .un-lv + .un-lv{margin-top:24px}
#main .cs-page .un-sure{margin-top:16px}
#main .cs-page .un-sure p{margin:0 0 8px!important;font:700 .9375rem/1.3 var(--un-body)!important}
#main .cs-page .un-done-row{margin-top:24px!important}
#main .cs-page .un-done{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;border:var(--un-edge);border-radius:999px;background:#fff;color:var(--un-ink);
  font:750 1rem/1.2 var(--un-body);box-shadow:4px 4px 0 var(--un-gold);cursor:pointer}
#main .cs-page .un-done[aria-pressed="true"]{background:var(--un-gold);box-shadow:4px 4px 0 var(--un-ink)}
#main .cs-page .un-done[hidden]{display:none}

@media print{
  #main .un-page .un-band{padding:16px 0!important;background:#fff!important}
  #main :is(.un-find,.un-levels,.un-forms-switch,.un-done-row){display:none!important}
  #main .un-flip-back{transform:none!important;position:static}
}