/* Shared geometry across landing, samples and editor: no navigation layout shift. */
body .app-header.site-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;padding:18px max(24px,calc((100% - 1180px)/2));min-height:88px;background:#fff;border-bottom:1px solid #e5ebe7;flex-wrap:nowrap}
body .app-header.site-header .brand{display:flex;align-items:center;justify-content:flex-start;gap:11px;margin:0;padding:0;font-size:18px;line-height:1.25;text-decoration:none;min-width:0}
body .app-header.site-header .brand img{display:block;width:40px;height:40px;flex-shrink:0}
body .app-header.site-header .brand>span{display:block;white-space:nowrap;max-width:none;font-weight:900}
body .app-header.site-header .brand small{display:block;font-size:9px;letter-spacing:1.8px;line-height:1.5;margin-top:5px;color:#63776e;font-weight:700}
body .app-header.site-header .nav{display:flex;align-items:center;justify-content:center;gap:2px;margin:0;padding:0;order:0;min-width:0;flex-basis:auto}
body .app-header.site-header .nav a,body .app-header.site-header .nav button{display:flex;align-items:center;justify-content:center;width:auto;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#43564e;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap;text-decoration:none;gap:0;margin:0}
body .app-header.site-header .nav a:hover,body .app-header.site-header .nav button:hover{background:#edf4ef;color:var(--teal)}
body .app-header.site-header .connect-button{justify-self:end;width:auto;max-width:158px;min-height:44px;margin:0;padding:11px 20px;border-radius:10px;font-size:14px;line-height:1.35;white-space:normal;font-weight:800;box-shadow:none}
.marketing-page .workspace{max-width:none}.marketing-page main{padding-top:12px}.marketing-page .footnote{max-width:1180px;margin-inline:auto;align-items:center;gap:16px}.marketing-page .footnote .text-toggle{background:transparent;border-color:var(--line);font-size:13px;margin-left:auto}
@media(max-width:1100px){body .app-header.site-header{grid-template-columns:minmax(0,1fr) auto;padding:16px 24px 8px;gap:10px 20px}body .app-header.site-header .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;display:flex;width:100%;border-top:1px solid #edf1ed;padding-top:7px}body .app-header.site-header>.connect-button{grid-column:2;grid-row:1}body .app-header.site-header .nav a,body .app-header.site-header .nav button{padding:10px 16px}body .app-header.site-header .brand>span{white-space:nowrap}}
@media(max-width:600px){body .app-header.site-header{padding:12px 16px 6px;gap:10px 12px;min-height:0}body .app-header.site-header .brand{font-size:16px;gap:9px}body .app-header.site-header .brand img{width:32px;height:32px;display:block}body .app-header.site-header .brand>span{white-space:normal;line-height:1.25}body .app-header.site-header .brand small{display:none}body .app-header.site-header .connect-button{width:auto;max-width:112px;min-height:44px;font-size:13px;padding:10px 13px}body .app-header.site-header .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding-top:5px}body .app-header.site-header .nav a,body .app-header.site-header .nav button{font-size:13px;min-height:44px;padding:6px 2px;white-space:normal;text-align:center;line-height:1.4}.marketing-page .footnote .text-toggle{margin-left:0}}
@media(prefers-reduced-motion:no-preference){body .app-header.site-header .nav a,body .app-header.site-header .nav button{transition:background .15s,color .15s}}
/* One shared header for home, samples and the lesson workspace. */
.site-header .header-tools{display:flex;align-items:center;gap:8px;margin:0;grid-column:3;grid-row:1}.site-header .text-toggle{width:44px;min-width:44px;min-height:44px;padding:6px;font-size:15px;border-radius:10px}.site-header .nav [aria-current=page]{background:#edf4ef;color:var(--teal)}
body .app-header.site-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;min-height:64px;padding:10px max(20px,calc((100% - 1180px)/2));gap:20px}body .app-header.site-header .brand{font-size:18px}body .app-header.site-header .brand img{width:40px;height:40px}body .app-header.site-header .nav{display:flex;grid-row:auto;grid-column:auto;gap:2px;border:0;padding:0;width:auto}body .app-header.site-header .nav button{font-size:14px;padding:8px 10px;min-height:44px}body .app-header.site-header .header-tools{grid-column:3;grid-row:1}
@media(max-width:1100px){.site-header .header-tools{grid-column:2}body .app-header.site-header{grid-template-columns:minmax(0,1fr) auto;padding:8px 24px;gap:6px 16px}body .app-header.site-header .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;border-top:1px solid #edf1ed;padding-top:5px}body .app-header.site-header .header-tools{grid-column:2}body .app-header.site-header .brand small{display:none}}
@media(max-width:800px){body .app-header.site-header{padding:8px 12px;gap:6px}body .app-header.site-header .brand{font-size:16px;display:flex}body .app-header.site-header .brand img{width:32px;height:32px}body .app-header.site-header .brand>span{white-space:normal}body .app-header.site-header .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:2px;padding-top:0;border:0}body .app-header.site-header .nav button{font-size:12px;white-space:normal;padding:6px 2px}.site-header .header-tools{gap:6px}.site-header .header-tools .connect-button{width:auto;max-width:110px;padding:9px 12px;font-size:13px}}
@media(max-width:600px){.site-header .brand{font-size:15px;gap:7px}.site-header .brand>span{max-width:150px;white-space:normal}.site-header .header-tools .connect-button{max-width:96px;padding:8px 10px;font-size:12px}.site-header .text-toggle{min-width:40px;width:40px}.site-header .header-tools{gap:5px}}
@media(max-height:600px) and (max-width:800px){body .app-header.site-header{grid-template-columns:minmax(0,1fr) auto;min-height:60px}body .app-header.site-header .brand{display:none}body .app-header.site-header .nav{grid-column:1;grid-row:1}body .app-header.site-header .nav button{font-size:11px;padding:4px 1px}body .app-header.site-header .header-tools{grid-column:2;grid-row:1}body .app-header.site-header .connect-button{width:44px;max-width:44px;font-size:10px;padding:4px}body .app-header.site-header .text-toggle{width:40px;min-width:40px;font-size:13px}}

/* Shell transitions must not translate the header or working surface. */
#main.screen-enter{animation:none}
body .app-header.site-header .brand small{display:none}