:root{
  --yk-brand:#07858a;
  --yk-brand-strong:#056f74;
  --yk-brand-soft:#e8f5f4;
  --yk-ink:#102c3a;
  --yk-muted:#6d7f90;
  --yk-line:#dce5ea;
  --yk-canvas:#f5f7fa;
  --yk-header-height:76px;
  --yk-sidebar-width:200px;
}

body.yk-shell{background:var(--yk-canvas);color:var(--yk-ink);min-height:100vh}
body.yk-shell>header.yk-header{position:fixed;z-index:120;inset:0 0 auto 0;height:var(--yk-header-height);display:flex;align-items:center;box-sizing:border-box;padding:0 30px;background:#fff;border-bottom:1px solid var(--yk-line);box-shadow:none}
.yk-brand{width:var(--yk-sidebar-width);display:flex;align-items:center;gap:12px;color:#0e2635;text-decoration:none;white-space:nowrap}
.yk-brand b{font-size:26px;line-height:1;font-weight:800;letter-spacing:-.04em}
.yk-brand-book{display:block!important;width:38px!important;height:32px!important;overflow:visible!important;color:var(--yk-action);fill:rgba(7,133,138,.08);stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 38px!important}
.yk-brand-tagline,.yk-brand-context{font-size:14px;color:var(--yk-muted);white-space:nowrap}
.yk-brand-context{font-weight:650;color:var(--yk-action)}
.yk-header-actions{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.yk-public-nav{margin-left:44px;display:flex;align-items:center;gap:30px}
.yk-public-nav a{position:relative;padding:27px 0 25px;color:#43586a;text-decoration:none;font-size:15px}
.yk-public-nav a:hover,.yk-public-nav a:focus-visible,.yk-public-nav a[aria-current="page"]{color:var(--yk-action)}
.yk-public-nav a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--yk-brand)}
.yk-header-link,.yk-account,.yk-header-actions button{color:var(--yk-ink);text-decoration:none;background:none;border:0;padding:6px 2px;font:inherit;cursor:pointer}
.yk-header-link{color:var(--yk-action);font-weight:600}
.yk-header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 17px;border:1px solid var(--yk-brand);border-radius:7px;background:var(--yk-brand);color:#fff}
.yk-header-cta:hover,.yk-header-cta:focus-visible{background:var(--yk-brand-strong);color:#fff}
.yk-preview-badge{padding:5px 9px;border-radius:999px;background:#eef5f5;color:var(--yk-action);font-size:12px;font-weight:650}
.yk-account{display:flex;align-items:center;gap:8px}
.yk-account i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;font-weight:var(--yk-weight-title);color:#fff;background:var(--yk-brand)}
.yk-account strong{font-weight:600}
.yk-header-divider{width:1px;height:18px;background:var(--yk-line)}
.yk-header-actions form{margin:0}

body.yk-shell>aside.yk-sidebar{position:fixed;z-index:100;left:0;top:var(--yk-header-height);bottom:0;width:var(--yk-sidebar-width);box-sizing:border-box;padding:28px 10px 18px;background:#fff;border-right:1px solid var(--yk-line);display:flex;flex-direction:column}
.yk-sidebar nav{display:grid;gap:5px}
.yk-nav-link{position:relative;display:flex;align-items:center;gap:14px;min-height:50px;padding:0 15px;border-radius:9px;color:#40566a;text-decoration:none;font-size:16px;font-weight:520;box-sizing:border-box;white-space:nowrap;transition:background .16s,color .16s}
.yk-nav-link:hover,.yk-nav-link:focus-visible{background:#f0f7f7;color:var(--yk-action);outline:2px solid transparent}
.yk-nav-link:focus-visible{box-shadow:0 0 0 3px rgba(7,133,138,.2)}
.yk-nav-link.is-active{background:var(--yk-brand-soft);color:var(--yk-action);font-weight:700}
.yk-nav-link.is-active:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--yk-brand)}
.yk-nav-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.yk-shell .yk-nav-icon img{display:block!important;width:22px!important;height:22px!important;max-width:none!important;max-height:none!important;object-fit:contain!important}
.yk-sidebar-utility{margin-top:auto;padding:18px 10px 0;border-top:1px solid var(--yk-line);display:grid;gap:8px}
.yk-sidebar-utility a{color:var(--yk-action);text-decoration:none;font-size:14px}
.yk-sidebar-utility small{color:var(--yk-muted);font-size:12px;font-weight:var(--yk-weight-nav);line-height:var(--yk-line-ui)}

/* The specialist pages predate the shared shell and some ship broad nav/svg
   selectors. Lock only the shared desktop sidebar so those page styles cannot
   change its rhythm or icon geometry during cross-page navigation. */
body.yk-shell>aside.yk-sidebar>nav{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:5px!important;margin:0!important;padding:0!important;transform:none!important}
body.yk-shell>aside.yk-sidebar>nav>.yk-nav-link{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;width:auto!important;min-width:0!important;height:auto!important;min-height:50px!important;margin:0!important;padding:0 15px!important;border:0!important;border-radius:9px!important;/* dsh-typo-t0 */ line-height:var(--yk-line-ui)!important;font-size:var(--yk-type-nav)!important;font-weight:var(--yk-weight-nav)!important;letter-spacing:normal!important;transform:none!important}
/* dsh-typo-t0 */ body.yk-shell>aside.yk-sidebar>nav>.yk-nav-link.is-active{font-weight:var(--yk-weight-nav-on)!important}
body.yk-shell>aside.yk-sidebar>nav>.yk-nav-link>.yk-nav-icon{display:grid!important;place-items:center!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:0!important;padding:0!important;transform:none!important}
body.yk-shell>aside.yk-sidebar>nav>.yk-nav-link>.yk-nav-icon>img{display:block!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;object-fit:contain!important}

body.yk-shell:not(.yk-shell-public)>main{margin-left:var(--yk-sidebar-width);padding-top:calc(var(--yk-header-height) + 24px);min-height:calc(100vh - var(--yk-header-height));box-sizing:border-box}
body.yk-shell-public>main{margin-left:0;padding-top:var(--yk-header-height)}
.yk-app-footer{margin-left:var(--yk-sidebar-width);min-height:58px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;border-top:1px solid var(--yk-line);color:var(--yk-muted);background:#fff;font-size:13px}
.yk-app-footer a{color:var(--yk-action);text-decoration:none}
.yk-public-footer{min-height:58px;padding:0 max(60px,calc((100vw - 1460px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;box-sizing:border-box;border-top:1px solid var(--yk-line);background:#fff;color:var(--yk-muted);font-size:13px}
.yk-public-footer>div,.yk-public-footer nav{display:flex;align-items:center;gap:20px}.yk-public-footer nav{gap:22px}.yk-public-footer nav i{width:1px;height:16px;background:var(--yk-line)}.yk-public-footer a{color:#536777;text-decoration:none}.yk-footer-brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:var(--yk-weight-page)!important;color:var(--yk-ink)!important}.yk-footer-brand svg{width:25px;height:22px;fill:none;stroke:var(--yk-brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.yk-mobile-nav{display:none}

body.yk-shell-public>header.yk-header{padding-inline:60px}
body.yk-shell-public{--yk-header-height:64px}
body.yk-shell-public .yk-brand{width:216px}
body.yk-shell-public .yk-brand-book{width:40px!important;height:34px!important;flex-basis:40px!important}
body.yk-shell-public .yk-brand b{font-size:27px}
body.yk-shell-public .yk-brand-tagline{display:none}
body.yk-shell-public .yk-public-nav{margin-left:0}

/* Focus variant: the same design system and the same shared header/footer, with
   the sidebar collapsed for reading, intent, mobile and phone-scene samples.
   Per the sample images these pages show no desktop sidebar. */
body.yk-shell-focus{--yk-sidebar-width:0px}
body.yk-shell-focus>aside.yk-sidebar{display:none!important}
body.yk-shell-focus>main{margin-left:0!important;padding-top:var(--yk-header-height)}
body.yk-shell-focus .yk-app-footer{margin-left:0;padding-inline:max(30px,calc((100vw - 1460px)/2))}

body.yk-shell-teacher .yk-brand{width:auto}
body.yk-shell-teacher .yk-brand-context{margin-left:8px;padding-left:14px;border-left:1px solid var(--yk-line)}

@media(max-width:760px){
  :root{--yk-header-height:56px;--yk-sidebar-width:0px}
  body.yk-shell>header.yk-header{height:var(--yk-header-height);padding:0 15px}
  .yk-brand{width:auto;gap:8px}.yk-brand-book{width:27px!important;height:24px!important;flex-basis:27px!important}.yk-brand b{font-size:20px}
  .yk-brand-tagline,.yk-brand-context,.yk-public-nav,.yk-header-divider,.yk-account strong,.yk-header-actions form{display:none}
  .yk-header-actions{gap:8px}.yk-header-link{font-size:13px}.yk-account i{width:32px;height:32px}
  body.yk-shell>aside.yk-sidebar{display:none}
  body.yk-shell:not(.yk-shell-public)>main,body.yk-shell-public>main{margin-left:0;padding-top:var(--yk-header-height)}
  body.yk-shell-focus>main{padding-top:var(--yk-header-height)}
  .yk-app-footer{display:none}
  body.yk-shell-student,body.yk-shell-teacher{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.yk-shell-student>.yk-mobile-nav,body.yk-shell-teacher>.yk-mobile-nav{position:fixed!important;z-index:140!important;display:grid!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:calc(60px + env(safe-area-inset-bottom))!important;padding:4px 3px env(safe-area-inset-bottom)!important;box-sizing:border-box!important;background:#fff!important;border-top:1px solid var(--yk-line)!important;box-shadow:0 -4px 18px rgba(16,44,58,.08)!important;transform:none!important}
  body.yk-shell-student>.yk-mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  body.yk-shell-teacher>.yk-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body.yk-shell-student>.yk-mobile-nav .yk-nav-link,body.yk-shell-teacher>.yk-mobile-nav .yk-nav-link{display:flex!important;visibility:visible!important;min-height:52px!important;padding:4px 0 2px!important;gap:2px!important;border-radius:7px!important;justify-content:center!important;flex-direction:column!important;/* dsh-typo-t0 */ font-size:var(--yk-type-tabbar)!important;font-weight:var(--yk-weight-nav)!important;line-height:var(--yk-line-tabbar)!important;opacity:1!important}
  .yk-mobile-nav .yk-nav-link.is-active:before{display:none}
  .yk-mobile-nav .yk-nav-icon,.yk-mobile-nav .yk-nav-icon img{width:20px!important;height:20px!important}
  .yk-mobile-nav .yk-nav-link.is-active{background:transparent;color:var(--yk-action)}
  body.yk-shell>header.yk-header{transform:none!important;overflow:visible!important}
  body.yk-shell-public>header.yk-header{padding-inline:15px}
  body.yk-shell-public .yk-brand{width:auto}
  .yk-public-footer{padding:18px;display:grid}.yk-public-footer>div{gap:12px}.yk-public-footer nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}.yk-public-footer nav i{display:none}
}

@media(min-width:761px) and (max-width:1100px){
  :root{--yk-sidebar-width:176px}
  body.yk-shell>header.yk-header{padding-inline:22px}
  .yk-brand b{font-size:23px}
  .yk-nav-link{padding-inline:12px;gap:10px;font-size:15px}
}

/* Mobile teacher header: the workbench link is duplicated by the brand and bottom navigation.
   Keep the account and return-to-learning actions visible at 390px. */
@media(max-width:760px){
  body.yk-shell-teacher .yk-header-actions>.yk-header-link:first-child{display:none}
}
@media(max-width:760px){
  body.yk-shell-teacher .yk-header-actions>.yk-header-link[href="/center"]{font-size:13px!important;max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip}
}