/* Readable controls at normal browser zoom; one working public spacing system. */
body:not(.cms-body) {
  --site-stack-height:76px;
  --footer-ticker-height:0px;
  padding-top:var(--site-stack-height);
}
body:not(.editor-page):not(.cms-body) {
  /* These values belong on body, where the CMS variables are actually defined. */
  --public-pad:clamp(16px,var(--public-pad-setting,64px),240px);
  --public-gutter:max(var(--public-pad),calc((100% - var(--public-content-setting,1600px))/2 + var(--public-pad)));
}
.site-sticky-stack {position:fixed!important;inset:0 0 auto;z-index:120;transform:none!important;isolation:isolate}
.site-sticky-stack .site-header {position:relative!important;top:auto!important;height:76px;background:#0b1b34;box-sizing:border-box}
.site-header .brand {gap:12px}
.site-header .brand img {width:40px;height:40px;flex-shrink:0}
.site-header .brand span {font-size:26px;line-height:1.15}
.site-header nav a {font-size:15px}
.site-header .compact,.site-header .language-picker select {font-size:14px;min-height:40px}
body:not(.editor-page):not(.cms-body) .site-header,
body:not(.editor-page):not(.cms-body) .hero,
body:not(.editor-page):not(.cms-body) .section,
body:not(.editor-page):not(.cms-body) .feature-grid,
body:not(.editor-page):not(.cms-body) .page-head,
body:not(.editor-page):not(.cms-body) .site-footer,
body:not(.editor-page):not(.cms-body) .compact-footer {
  padding-left:var(--public-gutter)!important;padding-right:var(--public-gutter)!important;
}
body:not(.editor-page) .cards.six,
body:not(.editor-page) .cards.four,
body:not(.editor-page) .learning-grid,
body:not(.editor-page) .tool-directory-grid {grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}
body:not(.editor-page) .template-card {padding:18px;border-radius:18px;gap:8px}
body:not(.editor-page) .template-card .thumb {height:180px}
body:not(.editor-page) .template-card>b,body:not(.editor-page) .template-card h3 {font-size:17px}
body:not(.editor-page) .learning-card h3 {font-size:18px}
body:not(.editor-page) .learning-card p {font-size:14px;min-height:72px}
body:not(.editor-page) .lab-start {font-size:14px}
body:not(.editor-page) .tool-directory-grid>a.tool-directory-card {
  display:flex!important;flex-direction:column;align-items:stretch;gap:16px!important;padding:18px!important;
  position:relative;min-width:0;
}
body:not(.editor-page) .tool-directory-thumb {width:100%!important;height:150px!important;flex-shrink:0}
body:not(.editor-page) .tool-directory-thumb img {width:100%;height:100%;object-fit:contain}
body:not(.editor-page) .tool-directory-copy h3 {font-size:17px!important;line-height:1.35}
body:not(.editor-page) .tool-directory-copy p {font-size:13px!important;line-height:1.6}
body:not(.editor-page) .tool-open-arrow {align-self:flex-end;margin-top:auto}

/* Desktop ad rails align with the same reduced content area and header. */
@media(min-width:1700px) {
  body.side-ad-left-active:not(.editor-page),body.side-ad-right-active:not(.editor-page) {
    --public-pad:clamp(12px,var(--ad-page-pad-setting,32px),160px);
    --public-gutter:var(--public-pad);
  }
  body.side-ad-left-active:not(.editor-page) .site-header {padding-left:calc(var(--public-pad) + var(--ad-side) + var(--ad-gap))!important}
  body.side-ad-right-active:not(.editor-page) .site-header {padding-right:calc(var(--public-pad) + var(--ad-side) + var(--ad-gap))!important}
}

/* Editor reference: the comfortable 125% screenshot, implemented in real sizes. */
body.editor-page {--editor-rail:190px;--editor-tools:250px;--site-stack-height:80px;height:100dvh;overflow:hidden;box-sizing:border-box}
body.editor-page .site-header {height:80px;padding-inline:20px!important;gap:28px}
body.editor-page .site-header .brand img {width:42px;height:42px}
body.editor-page .site-header .brand span {font-size:28px}
body.editor-page .site-header .compact,body.editor-page .language-picker select {font-size:15px;min-height:44px}
body.editor-page .editor-mode-label {font-size:14px;padding:7px 11px}
body.editor-page .editor-site-main,
body.editor-page .editor-shell,
body.editor-page.has-running-header .editor-shell,
body.editor-page.has-running-footer .editor-shell,
body.editor-page.has-running-header.has-running-footer .editor-shell {
  height:calc(100dvh - var(--site-stack-height) - var(--footer-ticker-height))!important;
  min-height:0;max-height:none!important;
}
body.editor-page .editor-shell,body.editor-page .editor-shell[data-visual="turtle"] {
  grid-template-columns:var(--editor-rail) minmax(0,1fr) var(--editor-tools)!important;
}
body.editor-page .editor-main {min-height:0;grid-template-rows:auto minmax(0,1fr) 30px!important}
body.editor-page .editor-shell.learning-mode .editor-main,
body.editor-page .editor-shell[data-visual="turtle"] .editor-main {grid-template-rows:auto minmax(0,1fr) 30px!important}
body.editor-page .editor-top {min-height:64px;gap:12px;padding:9px 14px!important;position:relative!important;z-index:18}
body.editor-page .editor-title-wrap {min-width:0;flex:1;gap:10px}
body.editor-page #projectTitle {font-size:18px!important;min-height:44px;max-width:650px}
body.editor-page .editor-actions {flex-shrink:0;gap:10px}
body.editor-page .editor-actions .btn {font-size:18px!important;padding:10px 17px;min-height:44px}
body.editor-page #saveState {font-size:12px;white-space:nowrap}
body.editor-page .catalog-intro b {font-size:17px}
body.editor-page .catalog-intro small {font-size:13px}
body.editor-page .visual-catalog button {font-size:15px!important;padding:9px 10px!important;line-height:1.35}
body.editor-page .visual-catalog .catalog-group-name {font-size:11px!important}
body.editor-page .editor-side-bottom a {font-size:14px}
body.editor-page .inspector label {font-size:14px!important}
body.editor-page .inspector input,body.editor-page .inspector select,body.editor-page .inspector textarea {font-size:14px!important}
body.editor-page .inspector .btn {font-size:16px;min-height:42px}
body.editor-page .canvas-wrap {padding:18px!important;min-height:0;overflow:hidden!important}
body.editor-page .editor-main>.canvas-wrap .canvas-card {width:min(100%,1050px)!important;height:min(100%,850px);border-radius:18px}
body.editor-page .editor-shell.learning-mode .canvas-card {padding:20px 22px!important;height:100%!important;overflow:hidden!important}
body.editor-page .learning-host {height:100%;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin}
body.editor-page .lab-header h2 {font-size:25px!important}
body.editor-page .lab-header p {font-size:14px!important}
body.editor-page .lab-scorebar {padding:14px 18px!important}
body.editor-page .lab-scorebar>span {font-size:12px}
body.editor-page .lab-scorebar b {font-size:16px!important}
body.editor-page .quiz-card {max-width:700px!important;padding:28px!important;margin:20px auto!important}
body.editor-page .quiz-card h3 {font-size:28px!important;line-height:1.35}
body.editor-page .quiz-answer {font-size:16px!important;padding:14px!important;min-height:58px}
body.editor-page .quiz-answer span {font-size:13px;width:34px;height:34px;flex-shrink:0}
body.editor-page .learning-controls p {font-size:14px;line-height:1.7}
body.editor-page .learning-controls h3 {font-size:20px}
body.editor-page .running-footer {height:36px;font-size:13px;box-sizing:border-box}
body.editor-page .editor-status {font-size:12px}

/* CMS controls use the same readable sizing; the scrolling header is opaque. */
.cms-body {font-size:16px}
.cms-body .cms-layout {grid-template-columns:270px minmax(0,1fr)}
.cms-body .cms-main {padding:0 28px 28px}
.cms-body .cms-top {background:#f0f4fa;backdrop-filter:none;padding:20px 0;z-index:60;top:0}
.cms-body .cms-top h1 {font-size:32px}
.cms-body .cms-top p,.cms-body .cms-card p {font-size:14px;line-height:1.6}
.cms-body .cms-sidebar a {font-size:16px;padding:12px}
.cms-body .cms-nav-group {font-size:11px}
.cms-body .cms-card label {font-size:14px}
.cms-body input,.cms-body select,.cms-body textarea,.cms-body .btn {font-size:15px}
.cms-body input:not([type="checkbox"]),.cms-body select,.cms-body .btn {min-height:44px}
.cms-body .cms-card h2 {font-size:22px}
.storage-connection-card {margin-bottom:20px}

@media(max-width:1200px) {
  body.editor-page {--editor-rail:170px;--editor-tools:230px}
  body.editor-page #saveState {display:none}
  body.editor-page .editor-actions .btn {padding:9px 12px;font-size:16px!important}
  .cms-body .cms-layout {grid-template-columns:230px minmax(0,1fr)}
}
@media(max-width:1100px) {
  body:not(.editor-page) .cards.six,body:not(.editor-page) .cards.four,
  body:not(.editor-page) .learning-grid,body:not(.editor-page) .tool-directory-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  body:not(.editor-page):not(.cms-body) {--public-gutter:clamp(16px,var(--public-pad-setting,32px),64px)}
  body.editor-page .editor-top {flex-wrap:wrap}
  body.editor-page .editor-title-wrap {flex-basis:100%}
  body.editor-page .editor-actions {margin-left:auto}
}
@media(max-width:900px) {
  body.editor-page {--editor-rail:155px;--editor-tools:0px}
  body.editor-page .editor-shell,body.editor-page .editor-shell.learning-mode,body.editor-page .editor-shell[data-visual="turtle"] {grid-template-columns:var(--editor-rail) minmax(0,1fr)!important}
  body.editor-page .site-header {gap:14px}
  body.editor-page .site-header .brand span {font-size:23px}
  .cms-body .cms-layout {grid-template-columns:minmax(0,1fr)}
  .cms-body .cms-sidebar {display:none}
  .cms-body .cms-mobile-tabs {display:flex}
}
@media(max-width:700px) {
  body.editor-page .editor-main {grid-template-rows:auto minmax(180px,1fr) minmax(150px,34%) 30px!important}
  body.editor-page .editor-shell.learning-mode .editor-main,
  body.editor-page .editor-shell[data-visual="turtle"] .editor-main {grid-template-rows:auto minmax(0,1fr) 30px!important}
  body.editor-page .editor-title-wrap {flex-basis:auto!important;flex:0 0 auto}
  body.editor-page .editor-actions {flex-wrap:wrap;flex:0 0 auto;margin-left:0}
}
@media(max-width:620px) {
  body:not(.editor-page):not(.cms-body) {--public-gutter:clamp(16px,var(--public-pad-setting,20px),28px)}
  .site-sticky-stack .site-header {height:auto;min-height:68px;padding-block:10px;gap:10px}
  .site-header .brand img {width:30px;height:30px}
  .site-header .brand span {font-size:19px!important}
  .site-header .brand {max-width:44%!important;gap:7px}
  .site-header .header-actions {gap:6px}
  .site-header .compact,.site-header .language-picker select {font-size:11px!important;min-height:34px;padding:6px 8px}
  .site-header .header-actions .icon-btn {width:28px;padding:2px}
  body:not(.editor-page) .cards.six,body:not(.editor-page) .cards.four,
  body:not(.editor-page) .learning-grid,body:not(.editor-page) .tool-directory-grid {grid-template-columns:minmax(0,1fr)!important}
  body.editor-page {--editor-rail:48px}
  body.editor-page .editor-shell,body.editor-page .editor-shell.learning-mode {grid-template-columns:48px minmax(0,1fr)!important}
  body.editor-page .site-header {padding-inline:10px!important}
  body.editor-page .canvas-wrap {padding:8px!important}
  body.editor-page .editor-shell.learning-mode .canvas-card {padding:12px!important}
  body.editor-page #projectTitle {font-size:15px!important;min-height:36px}
  body.editor-page .editor-actions .btn {font-size:14px!important;min-height:38px;padding:7px 11px}
  body.editor-page .lab-header h2 {font-size:20px!important}
  body.editor-page .quiz-card {padding:16px!important}
  body.editor-page .quiz-card h3 {font-size:21px!important}
  body.editor-page .quiz-answer {font-size:14px!important;padding:11px!important}
  .cms-body .cms-main {padding:0 16px 20px}
  .cms-body .cms-top {gap:12px;flex-wrap:wrap}
  .cms-body .cms-top h1 {font-size:27px}
}
@media print {
  body:not(.cms-body) {padding-top:0!important;height:auto!important;overflow:visible!important}
  .site-sticky-stack {display:none!important}
}