:root{
  color-scheme:light dark;
  --chrome-bg:white;
  --shell-ink:black;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:black;
  background:maroon;
  line-height:1.6;
  --maroon:maroon;
  --maroon-dark:maroon;
  --maroon-light:maroon;
  --teal:teal;
  --teal-dark:teal;
  --aqua:aqua;
  --aquamarine:mediumaquamarine;
  --aquamarine-soft:mediumaquamarine;
  --scarlet:#ff2400;
  --scarlet-dark:#c91c00;
  --surface:maroon;
  --surface-alt:teal;
  --border:black;
  --muted:mediumaquamarine;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(ellipse 52% 38% at 50% 100%,rgba(255,178,67,.07) 0%,rgba(221,131,0,.035) 42%,transparent 72%),
    var(--maroon);
  color:black;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 16%,#FFB243 0 1.8px,rgba(255,178,67,.8) 3px,rgba(221,131,0,.35) 6px,transparent 9px),
    radial-gradient(circle at 79% 12%,#FFB243 0 1.6px,rgba(255,178,67,.75) 3px,rgba(179,106,0,.3) 6px,transparent 9px),
    radial-gradient(circle at 36% 31%,#DD8300 0 1.4px,rgba(255,178,67,.65) 3px,rgba(221,131,0,.3) 6px,transparent 9px),
    radial-gradient(circle at 90% 39%,#FFB243 0 1.8px,rgba(255,178,67,.72) 3px,rgba(179,106,0,.3) 6px,transparent 10px),
    radial-gradient(circle at 14% 57%,#DD8300 0 1.4px,rgba(255,178,67,.62) 3px,rgba(221,131,0,.26) 6px,transparent 9px),
    radial-gradient(circle at 67% 63%,#FFB243 0 1.5px,rgba(255,178,67,.68) 3px,rgba(179,106,0,.28) 6px,transparent 9px),
    radial-gradient(circle at 44% 79%,#B36A00 0 1.7px,rgba(255,178,67,.6) 3px,rgba(221,131,0,.26) 6px,transparent 10px),
    radial-gradient(circle at 83% 88%,#FFB243 0 1.6px,rgba(255,178,67,.72) 3px,rgba(221,131,0,.3) 6px,transparent 9px),
    radial-gradient(circle at 24% 42%,#FFB243 0 1.5px,rgba(255,178,67,.66) 3px,rgba(221,131,0,.25) 6px,transparent 9px),
    radial-gradient(circle at 58% 7%,#DD8300 0 1.4px,rgba(255,178,67,.6) 3px,rgba(179,106,0,.24) 6px,transparent 9px),
    radial-gradient(circle at 72% 78%,#FFB243 0 1.7px,rgba(255,178,67,.68) 3px,rgba(221,131,0,.28) 6px,transparent 10px),
    radial-gradient(ellipse 45% 24% at 58% 24%,rgba(179,106,0,.18),transparent 72%),
    radial-gradient(ellipse 52% 28% at 30% 74%,rgba(221,131,0,.12),transparent 74%);
  filter:blur(.2px);
  opacity:.96;
}
a{color:inherit;text-decoration:none}
header{
  min-height:76px;
  border-bottom:2px solid black;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,5vw,80px);
  background:linear-gradient(90deg,var(--chrome-bg) 0%,var(--chrome-bg) 24%,teal 100%);
  color:var(--shell-ink);
  z-index:5;
  box-shadow:0 3px 14px rgba(0,0,0,.24);
}
.brand{font-weight:900;letter-spacing:.12em;color:var(--shell-ink)}
.brand span{color:var(--aquamarine)}
nav{display:flex;gap:28px;font-size:.9rem;color:var(--shell-ink)}
nav a{padding:8px 2px;border-bottom:2px solid transparent;font-weight:800}
nav a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
nav a.nav-admin{padding:8px 12px;border:2px solid black;border-radius:7px;background:var(--maroon);color:black}
nav a.nav-admin:hover{background:var(--aqua);color:black;border-color:black;transform:translateY(-1px)}
main{
  min-height:0;
  width:100%;
  margin:0;
  padding:22px clamp(16px,3vw,36px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-padding-block:22px;
}
.page-card{
  width:min(860px,100%);
  min-height:auto;
  margin:0 auto;
  padding:clamp(20px,3.5vw,34px);
  background:linear-gradient(90deg,black 0%,black 10%,var(--teal) 42%,var(--teal) 100%);
  color:black;
  border:4px solid black;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.hero{padding:16px 0 48px;max-width:820px}
.eyebrow{font-size:.72rem;letter-spacing:.16em;color:var(--aquamarine);font-weight:900;text-transform:uppercase}
.hero h1,.page-head h1,.article h1{
  width:96%;
  max-width:none;
  font-size:clamp(2.7rem,7vw,6rem);
  line-height:.95;
  margin:18px 0 24px;
  padding:10px 18px 14px;
  color:black;
  background:
    linear-gradient(90deg,var(--maroon) 0,var(--maroon) 33%,var(--teal) 45%,var(--teal) 100%);
  border-radius:8px;
}
.hero h1{
  background:
    linear-gradient(90deg,var(--maroon) 0,var(--maroon) 33%,var(--teal) 45%,var(--teal) 100%);
}
.hero em{font-style:normal;color:white}
.lede{font-size:1.15rem;color:black;max-width:700px}
em,strong,.highlight{color:var(--aquamarine)}
.actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.home-cta{display:flex;align-items:center;gap:10px;margin-top:24px}
.home-cta .button{border-right:0;border-radius:7px 0 0 7px}
.next-cue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  color:white;
  font-size:1.35rem;
  font-weight:900;
  line-height:1;
  border:2px solid black;
  border-left:0;
  border-radius:0 7px 7px 0;
  background:var(--maroon);
}
.button{
  display:inline-block;
  background:var(--maroon);
  color:black;
  padding:10px 16px;
  border-radius:7px;
  font-weight:900;
  border:2px solid black;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.button:hover,.button.ghost:hover{
  background:var(--aqua);
  color:black;
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(0,0,0,.22);
}
.button.ghost{background:var(--maroon);color:black;border:2px solid black}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  border-top:3px solid var(--teal);
  padding:16px 0;
  margin-bottom:18px;
  color:black;
}
.section-head a{color:var(--aqua);font-weight:900}
.grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.card{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  width:240px;
  max-width:100%;
  border:2px solid black;
  background:linear-gradient(90deg,black 0%,black 10%,var(--teal) 42%,var(--teal) 100%);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .16s ease,box-shadow .16s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}
.thumb{
  width:100%;
  min-width:210px;
  height:100px;
  background:var(--teal) center/cover no-repeat;
  border-bottom:2px solid black;
}
.pad{
  padding:12px 14px;
  background:linear-gradient(90deg,black 0%,black 10%,var(--teal) 42%,var(--teal) 100%);
  color:black;
}
.pad p{color:black;margin:6px 0}
.pad h2{margin:4px 0 6px;line-height:1.15}
.pad .eyebrow{margin-bottom:2px}
.card a{color:var(--aqua);font-weight:900}
.card a:hover{color:var(--aquamarine)}
.card-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.card-links a{font-size:.92rem}
.page-head{padding:16px 0 30px}
.page-head h1{font-size:clamp(2.7rem,6vw,5.5rem)}
.page-head p:not(.eyebrow){max-width:700px}
.article{max-width:800px;margin:16px auto}
.article h1{font-size:clamp(2.8rem,6vw,5.5rem);line-height:1;color:black}
.links{display:flex;gap:16px;margin:24px 0;flex-wrap:wrap}
.links a{color:var(--aqua);font-weight:900}
.markdown{font-size:1.05rem;color:black}
.markdown h2{margin-top:2.2em;color:var(--aquamarine)}
.markdown h3{color:var(--aqua)}
.markdown a{text-decoration:underline;color:var(--aquamarine);font-weight:800}
.markdown a:hover{color:var(--aqua)}
.snippet{
  background:var(--aquamarine);
  border:2px solid black;
  border-radius:8px;
  padding:12px;
  margin-bottom:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.snippet>div{
  background:var(--teal);
  padding:12px 14px;
  border:2px solid black;
  border-radius:6px;
}
.snippet pre{
  background:var(--teal);
  color:black;
  border:2px solid black;
  padding:12px;
  margin:0;
  overflow:auto;
  border-radius:6px;
}
.tag{color:black;background:var(--aquamarine);border:1px solid black;padding:3px 8px;border-radius:999px;font-weight:900}
.editor{max-width:440px;margin:20px auto;display:grid;gap:12px}
.editor label:not(.check){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:44px;
  padding:5px 7px 5px 12px;
  background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,var(--aquamarine) 48%,var(--teal) 100%);
  border:2px solid black;
  border-radius:6px;
  color:black;
  font-weight:800;
  font-size:.88rem;
}
.form-title-box,.form-intro-box{
  max-width:100%;
  color:black;
  border:0;
  border-radius:0;
  padding:0;
}
.form-title-box{
  width:88%;
  background:linear-gradient(90deg,var(--maroon) 0%,var(--maroon) 33%,var(--teal) 100%);
  border-radius:8px;
  padding:10px 16px 14px;
}
.form-intro-box{
  width:auto;
  background:transparent;
}
.form-title-box h1{
  margin:0;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1;
}
.form-intro-box p{
  margin:0;
  font-size:.95rem;
  font-weight:800;
}
.editor .check{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}
.editor input,.editor textarea{
  width:100%;
  background:transparent;
  border:0;
  color:black;
  padding:6px 8px;
  border-radius:4px;
  font:inherit;
  font-size:.88rem;
}
.editor input::placeholder,.editor textarea::placeholder{color:var(--teal);opacity:1}
.login .editor label:not(.check){
  min-height:42px;
}
.login .editor label:not(.check) input{
  width:min(300px,72%);
  flex:1 1 300px;
  min-width:0;
}
.editor input:focus,.editor textarea:focus{outline:3px solid var(--aqua);outline-offset:2px;border-color:black}
.login .form-intro-box{width:fit-content}
.editor .code{font-family:ui-monospace,monospace}

.check input{width:auto}
.admin-list{display:grid;gap:10px}
.admin-list>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:var(--teal);
  border:2px solid black;
  border-radius:7px;
}
.admin-list small{color:var(--aquamarine);margin:0 14px}
footer{
  height:30px;
  overflow:hidden;
  border-top:2px solid black;
  padding:5px 24px;
  color:white;
  text-align:center;
  background:linear-gradient(90deg,var(--chrome-bg) 0%,var(--chrome-bg) 24%,teal 100%);
  transition:height .22s ease,padding .22s ease;
}
.site-footer:hover,.site-footer.is-expanded{
  height:72px;
  padding:14px 24px;
}
.footer-content{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 18px;
  min-height:38px;
}
.footer-detail{
  color:var(--aquamarine);
  font-size:.8rem;
  font-weight:800;
}

.page-card{
  color:white;
}
.page-card p:not(.eyebrow){
  color:white;
}
.page-card .lede{
  color:white;
}
.page-card .section-head{
  color:white;
}
.page-card .markdown{
  color:white;
}
.page-card .markdown p{
  color:white;
}
.page-card .pad p{
  color:white;
}
.page-card .pad h2{
  color:white;
}
.page-card .snippet{
  color:white;
}
.page-card .snippet>div{
  color:white;
}
.page-card .admin-list>div{
  color:white;
}
.page-card .admin-list a{
  color:var(--aqua);
}
.page-card .links a{
  color:var(--aqua);
}
.page-card .form-intro-box p{
  color:white;
}

a:focus-visible,.button:focus-visible{
  outline:3px solid var(--aqua);
  outline-offset:3px;
  box-shadow:0 0 0 2px black;
}
@media (prefers-color-scheme: dark){
  :root{
    --chrome-bg:black;
    --shell-ink:white;
  }
}
@media(max-width:700px){
  header{height:auto;min-height:68px;padding:14px 20px;gap:18px}
  nav{gap:12px;font-size:.8rem;flex-wrap:wrap;justify-content:flex-end}
  main{padding:14px}
  .page-card{padding:22px 16px}
  .hero{padding-top:8px}
  .hero h1,.page-head h1,.article h1{width:100%;max-width:none}
  .form-title-box{width:100%}
  .login .editor label:not(.check){align-items:stretch;flex-direction:column}
  .login .editor label:not(.check) input{width:100%;flex-basis:auto}
  .grid{display:grid;grid-template-columns:1fr}
  .card{width:100%}
  .thumb{min-width:0}
  .snippet{grid-template-columns:1fr}
  .section-head{align-items:flex-start;flex-direction:column}
}

.toc-card{
  margin:0 0 30px;
  padding:18px 20px 20px;
  border:3px solid black;
  border-radius:10px;
  background:linear-gradient(90deg,var(--maroon) 0%,var(--maroon) 28%,var(--teal) 58%,var(--teal) 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.toc-card h1,
.toc-card h2,
.toc-card h3{
  margin:0 0 12px;
  color:black;
  line-height:1.1;
}
.toc-card ul{
  margin:0;
  padding-left:1.25rem;
}
.toc-card ul ul{
  margin-top:4px;
}
.toc-card li{
  margin:5px 0;
  color:black;
}
.toc-card a{
  color:black;
  text-decoration:none;
  font-weight:800;
}
.toc-card a:hover{
  color:var(--aqua);
  text-decoration:underline;
}
.markdown h1[id],
.markdown h2[id],
.markdown h3[id],
.markdown h4[id],
.markdown h5[id],
.markdown h6[id]{
  scroll-margin-top:22px;
}

.footer-copyright{
  color:white;
  font-weight:900;
}
.footer-link{
  color:var(--aqua);
  font-weight:900;
  text-decoration:none;
}
.footer-link:hover{
  color:var(--aquamarine);
  text-decoration:underline;
}
.footer-detail{
  color:var(--aquamarine);
  font-size:.8rem;
  font-weight:800;
}
@media(max-width:700px){
  nav{
    gap:12px;
    flex-wrap:nowrap;
    white-space:nowrap;
  }
  .footer-content{
    gap:7px 14px;
  }
}


/* Private developer workspace */
.workspace-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:14px;margin:0 0 14px;border:2px solid black;border-radius:8px;background:var(--aquamarine);color:black}
.workspace-toolbar label,.workspace-commit-row label,.workspace-command-label{display:grid;gap:4px;font-weight:900;font-size:.86rem;color:black}
.workspace-toolbar select,.workspace-commit-row input,.workspace-command-label textarea{min-width:190px;border:2px solid black;border-radius:6px;padding:8px;background:var(--teal);color:black;font:inherit}
.workspace-toolbar select:disabled{opacity:.55}
.workspace-toolbar #workspace-status{font-size:.82rem;font-weight:800;max-width:100%;color:black}
.workspace-note{font-size:.82rem;font-weight:800;color:black;max-width:100%}
.workspace-grid{display:grid;grid-template-columns:minmax(220px,30%) minmax(0,1fr);gap:14px;min-height:420px}
.workspace-files,.workspace-editor,.workspace-terminal{min-width:0;border:2px solid black;border-radius:8px;background:var(--teal);color:black;overflow:hidden}
.workspace-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--aquamarine);border-bottom:2px solid black;color:black;font-weight:900;min-height:48px}
.workspace-panel-title span{overflow-wrap:anywhere}
.workspace-breadcrumb{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid black;font-size:.78rem;font-weight:800}
.workspace-breadcrumb span{overflow-wrap:anywhere}
.workspace-tree{display:grid;align-content:start;gap:2px;max-height:360px;overflow:auto;padding:8px}
.workspace-tree-item{display:block;width:100%;text-align:left;padding:7px 9px;border:1px solid transparent;border-radius:4px;background:transparent;color:black;font:inherit;font-size:.83rem;cursor:pointer;overflow-wrap:anywhere}
.workspace-tree-item:hover,.workspace-tree-item:focus-visible{background:var(--aqua);border-color:black;outline:none}
.workspace-tree-item.directory{font-weight:900}
.workspace-empty{padding:10px;font-size:.82rem;color:black;overflow-wrap:anywhere}
.workspace-editor{display:grid;grid-template-rows:auto minmax(340px,1fr) auto}
.workspace-editor textarea{width:100%;min-height:340px;resize:vertical;border:0;border-radius:0;padding:14px;background:#101820;color:#e5f6ff;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}
.workspace-editor textarea:focus,.workspace-command-label textarea:focus{outline:3px solid var(--aqua);outline-offset:-3px}
.workspace-editor textarea:disabled{opacity:.65}
.workspace-commit-row{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-top:2px solid black}
.workspace-commit-row label{flex:1 1 240px}
.workspace-commit-row input{width:100%}
.workspace-terminal{margin-top:16px;padding:14px}
.workspace-terminal-head{display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.workspace-terminal-head h2{margin:0;color:black}
.workspace-terminal-head p:not(.eyebrow){margin:4px 0 12px;color:black;font-size:.88rem;max-width:760px}
.workspace-command-label{margin-top:10px}
.workspace-command-label textarea{width:100%;min-width:0;resize:vertical;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.workspace-output{height:260px;max-height:440px;overflow:auto;margin:14px 0 0;padding:14px;background:#101820;color:#d5f7e8;border:2px solid black;border-radius:6px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.workspace-head{padding-bottom:18px}
@media(max-width:800px){.workspace-grid{grid-template-columns:1fr}.workspace-files{min-height:170px}.workspace-tree{max-height:240px}.workspace-editor{min-height:440px}.workspace-editor textarea{min-height:320px}}

.workspace-login-divider{display:flex;align-items:center;gap:12px;max-width:440px;margin:14px auto;color:var(--aquamarine);font-size:.75rem;font-weight:900;letter-spacing:.12em}
.workspace-login-divider:before,.workspace-login-divider:after{content:"";height:2px;flex:1;background:var(--aquamarine)}
.workspace-login-action{justify-content:center;margin:0 auto 16px}
.workspace-login-error{color:#ffb0a8!important;text-align:center;font-weight:800}


/* VS Code-style private workspace */
.workspace-ide{grid-template-columns:minmax(230px,280px) minmax(0,1fr);min-height:620px;align-items:stretch}
.workspace-files,.workspace-editor{background:#1e1e1e;color:#d4d4d4;border:1px solid #3a3a3a;border-radius:7px;overflow:hidden;min-width:0}
.workspace-explorer-title{min-height:38px;padding:9px 12px;background:#252526;color:#ccc;border:0;font-size:.72rem;letter-spacing:.08em}
.workspace-muted{font-size:.7rem;font-weight:500;letter-spacing:0;color:#858585}
.workspace-breadcrumb{padding:9px 12px;background:#1e1e1e;border-bottom:1px solid #343434;color:#9da0a6;font-size:.74rem;overflow-wrap:anywhere}
.workspace-tree{display:block;max-height:680px;min-height:480px;overflow:auto;padding:7px 0;background:#1e1e1e}
.workspace-tree-item{display:flex;align-items:center;gap:7px;width:100%;min-height:27px;padding-block:4px;padding-inline-end:10px;border:0;border-radius:0;text-align:left;background:transparent;color:#ccc;font:12.5px/1.35 "Segoe UI",Arial,sans-serif;cursor:pointer;white-space:nowrap}
.workspace-tree-item:hover,.workspace-tree-item:focus-visible{background:#2a2d2e;border:0;outline:none}
.workspace-tree-item.directory{color:#d7d7d7;font-weight:600}
.workspace-tree-icon{display:inline-flex;align-items:center;justify-content:center;min-width:18px;color:#9da0a6;font-size:10px;font-weight:700}
.workspace-tree-item.file .workspace-tree-icon{font-size:9px;color:#75b9f0}
.workspace-tree-name{overflow:hidden;text-overflow:ellipsis}
.workspace-tree-loading{padding-block:5px;color:#858585;font-size:11px}
.workspace-editor{display:grid;grid-template-rows:auto minmax(420px,1fr) auto;background:#1e1e1e}
.workspace-editor-toolbar{display:grid;grid-template-rows:auto auto;background:#252526;border-bottom:1px solid #343434;min-width:0}
.workspace-tabs{display:flex;align-items:stretch;overflow-x:auto;min-height:38px;background:#252526}
.workspace-tab{display:flex;align-items:center;min-width:0;max-width:220px;background:#2d2d2d;border-right:1px solid #202020;color:#969696}
.workspace-tab.active{background:#1e1e1e;color:#fff;border-top:1px solid #007acc}
.workspace-tab-select{display:flex;align-items:center;gap:7px;min-width:0;padding:8px 8px 8px 12px;border:0;background:transparent;color:inherit;font:12px "Segoe UI",Arial,sans-serif;cursor:pointer}
.workspace-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-tab-dirty{width:9px;color:#e8bd58;font-size:9px}
.workspace-tab-close{width:24px;height:24px;margin:0 5px 0 0;border:0;border-radius:4px;background:transparent;color:#aaa;font-size:17px;line-height:1;cursor:pointer}
.workspace-tab-close:hover{background:#444;color:#fff}
.workspace-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:7px 10px;background:#1e1e1e;border-top:1px solid #333}
.workspace-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b7b7b7;font:11px "Segoe UI",Arial,sans-serif}
.workspace-editor-actions .button{padding:6px 10px;font-size:.75rem;white-space:nowrap}
.workspace-editor-actions kbd{margin-left:4px;padding:1px 4px;border:1px solid #555;border-radius:3px;background:#303030;color:#ddd;font-size:9px}
.workspace-monaco{position:relative;min-height:420px;width:100%;height:100%;background:#1e1e1e}
.workspace-editor-placeholder{display:grid;place-items:center;min-height:420px;color:#777;font:13px "Segoe UI",Arial,sans-serif}
.workspace-fallback-editor{width:100%;height:100%;min-height:420px;resize:vertical;border:0;border-radius:0;padding:14px;background:#1e1e1e;color:#d4d4d4;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}
.workspace-fallback-editor:focus{outline:2px solid #007acc;outline-offset:-2px}
.workspace-commit-row{background:#252526;border-top:1px solid #3a3a3a}
.workspace-commit-row label{color:#ccc;font-size:.76rem}
.workspace-commit-row input{background:#1e1e1e;color:#eee;border:1px solid #555;font-size:.8rem}
.workspace-commit-row .workspace-note{color:#ccc}
.workspace-terminal{background:#1e1e1e;border:1px solid #3a3a3a;color:#ddd}
.workspace-terminal-head h2,.workspace-terminal-head p:not(.eyebrow){color:#ddd}
.workspace-command-label{color:#ddd}
.workspace-command-label textarea{background:#252526;color:#eee;border:1px solid #555}
.workspace-output{background:#111;color:#d7e8da;border:1px solid #444}
.workspace-toolbar{background:#d8f1e9}
@media(max-width:900px){.workspace-ide{grid-template-columns:1fr;min-height:0}.workspace-tree{min-height:180px;max-height:300px}.workspace-editor{min-height:540px}.workspace-monaco,.workspace-fallback-editor{min-height:420px}}

/* Stable footer and floating language control */
body{grid-template-rows:auto minmax(0,1fr) auto;min-height:100dvh;height:100dvh;}
main{min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.site-footer{height:auto;min-height:44px;max-height:none;overflow:visible;padding:8px 18px;border-top:2px solid black;transition:none;}
.site-footer:hover,.site-footer.is-expanded{height:auto;min-height:44px;padding:8px 18px;}
.footer-content{min-height:26px;gap:6px 16px;line-height:1.35;}
.footer-detail{overflow-wrap:anywhere;}
.language-fab{position:fixed;z-index:20;right:clamp(14px,2.5vw,28px);bottom:clamp(58px,8vh,76px);display:flex;align-items:center;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(20,20,20,.9);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(12px);}
.language-fab[hidden]{display:none;}
.language-fab-switch{display:flex;align-items:center;justify-content:center;gap:7px;min-width:54px;min-height:42px;padding:0 13px;border-radius:999px;background:var(--aqua);color:#111;font-size:.82rem;font-weight:900;letter-spacing:.04em;}
.language-fab-switch:hover{background:var(--aquamarine);}
.language-fab-globe{font-size:1rem;line-height:1;}
.language-fab-dismiss{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#ddd;font-size:1.15rem;cursor:pointer;}
.language-fab-dismiss:hover{background:#444;color:#fff;}
@media(max-width:700px){.site-footer{padding:8px 12px}.site-footer:hover,.site-footer.is-expanded{padding:8px 12px}.footer-content{gap:5px 10px;font-size:.76rem}.language-fab{bottom:62px;right:12px;}}
@media(prefers-reduced-motion:reduce){.language-fab *{transition:none!important;}}


/* Workspace layout polish: stable footer, wide editor canvas */
.page-card:has(.workspace-ide){width:min(1440px,100%);max-width:100%;padding:clamp(16px,2vw,28px);}
.page-card:has(.workspace-ide) .workspace-head{padding-top:8px;}
.page-card:has(.workspace-ide) .workspace-ide{min-width:0;}
.page-card:has(.workspace-ide) .workspace-editor{min-width:0;}
.site-footer,.site-footer:hover,.site-footer.is-expanded{
  height:auto!important;
  min-height:44px;
  max-height:none;
  overflow:visible;
  padding:8px 18px!important;
  transition:none!important;
  transform:none!important;
}
.site-footer .footer-content{min-height:26px;align-items:center;justify-content:center;line-height:1.35;}
.language-fab{bottom:clamp(58px,8vh,76px);}
.language-fab[hidden]{display:none!important;}
@media(max-width:700px){
  .page-card:has(.workspace-ide){padding:14px 10px;}
  .site-footer,.site-footer:hover,.site-footer.is-expanded{padding:7px 10px!important;}
}


/* Explorer drawer and immersive editor controls */
.workspace-ide{position:relative;isolation:isolate;}
.workspace-explorer-toggle{
  position:absolute;z-index:8;left:0;top:10px;display:flex;align-items:center;gap:7px;
  min-height:34px;padding:0 10px;border:1px solid #4a4a4a;border-radius:0 5px 5px 0;
  background:#252526;color:#ddd;font:12px "Segoe UI",Arial,sans-serif;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.workspace-explorer-toggle span[aria-hidden]{font-size:20px;line-height:1;}
.workspace-explorer-toggle:hover{background:#333;color:#fff;}
.workspace-explorer-backdrop{display:none;position:absolute;inset:0;z-index:6;border:0;background:rgba(0,0,0,.22);cursor:pointer;}
.workspace-files{position:relative;z-index:7;min-width:0;}
.workspace-ide:not(.explorer-open){grid-template-columns:0 minmax(0,1fr);}
.workspace-ide:not(.explorer-open) .workspace-files{display:none;}
.workspace-ide.explorer-open{grid-template-columns:minmax(230px,280px) minmax(0,1fr);}
.workspace-ide.explorer-open .workspace-explorer-toggle{left:0;}
.workspace-view-button{
  flex:0 0 auto;min-height:30px;padding:5px 9px;border:1px solid #555;border-radius:4px;
  background:#2d2d2d;color:#ddd;font:11px "Segoe UI",Arial,sans-serif;white-space:nowrap;cursor:pointer;
}
.workspace-view-button:hover{background:#3a3a3a;color:white;}
.workspace-editor-actions{flex-wrap:wrap;}
.workspace-ide.editor-fullscreen .workspace-editor{
  position:fixed;inset:0;z-index:1000;width:100vw;height:100dvh;max-height:100dvh;
  border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto;
  box-shadow:none;overflow:hidden;
}
.workspace-ide.editor-fullscreen .workspace-monaco,
.workspace-ide.editor-fullscreen .workspace-fallback-editor{min-height:0;height:100%;overflow:hidden;}
.workspace-ide.editor-fullscreen .workspace-commit-row{padding:8px 12px;}
.workspace-ide.editor-fullscreen .workspace-editor-toolbar{grid-template-rows:auto auto;}
.workspace-ide.editor-fullscreen .workspace-tabs{min-height:42px;}
.workspace-ide.editor-fullscreen .workspace-view-button{min-height:34px;}
@media(max-width:900px){
  .workspace-ide.explorer-open{grid-template-columns:minmax(0,1fr);}
  .workspace-ide.explorer-open .workspace-files{
    position:absolute;z-index:9;left:0;top:0;bottom:0;width:min(340px,86%);
    max-height:100%;box-shadow:8px 0 30px rgba(0,0,0,.35);
  }
  .workspace-ide.explorer-open .workspace-explorer-backdrop{display:block;}
  .workspace-ide:not(.explorer-open){grid-template-columns:minmax(0,1fr);}
  .workspace-ide:not(.explorer-open) .workspace-files{display:none;}
  .workspace-explorer-toggle{position:fixed;left:0;top:42%;z-index:30;}
}
@media(max-width:700px) and (orientation:portrait){
  .workspace-ide.explorer-open .workspace-files{
    position:fixed;inset:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;
    box-shadow:none;z-index:1001;
  }
  .workspace-ide.explorer-open .workspace-explorer-backdrop{display:none;}
  .workspace-ide.explorer-open .workspace-explorer-toggle{position:fixed;z-index:1002;left:auto;right:10px;top:8px;border-radius:5px;}
  .workspace-ide.explorer-open .workspace-explorer-title{padding-right:58px;}
  .workspace-ide.editor-fullscreen .workspace-editor{z-index:1000;}
}


/* Footer is permanently static: no hover expansion, slide, or motion. */
body>footer.site-footer,
body>footer.site-footer:hover,
body>footer.site-footer:focus-within,
body>footer.site-footer.is-expanded{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  translate:none!important;
  animation:none!important;
  transition-property:none!important;
  transition-duration:0s!important;
  height:auto!important;
  min-height:44px!important;
  max-height:none!important;
  padding:8px 18px!important;
  overflow:visible!important;
}
body>footer.site-footer:hover,
body>footer.site-footer:focus-within,
body>footer.site-footer.is-expanded{
  height:auto!important;
  min-height:44px!important;
  padding:8px 18px!important;
}
body>footer.site-footer .footer-content{
  height:auto!important;
  min-height:26px!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}
@media(max-width:700px){
  body>footer.site-footer,
  body>footer.site-footer:hover,
  body>footer.site-footer:focus-within,
  body>footer.site-footer.is-expanded{padding:7px 10px!important;}
}


/* Hard reset: footer never animates, expands, or shifts on interaction. */
html body footer.site-footer,
html body footer.site-footer:hover,
html body footer.site-footer:active,
html body footer.site-footer:focus,
html body footer.site-footer:focus-within,
html body footer.site-footer.is-expanded{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  translate:0 0!important;
  transform:translateY(0)!important;
  animation:none!important;
  transition: none!important;
  transition-property:none!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
  padding:8px 18px!important;
  overflow:hidden!important;
}
html body footer.site-footer .footer-content,
html body footer.site-footer:hover .footer-content{
  display:flex!important;
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  align-items:center!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  padding:0!important;
  margin:0!important;
}

/* Language selector: compact fixed circular globe control, never a footer bar. */
html body #language-fab.language-fab{
  position:fixed!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  padding:0!important;
  right:18px!important;
  bottom:62px!important;
  top:auto!important;
  left:auto!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  z-index:9999!important;
  transform:none!important;
  transition:none!important;
}
html body #language-fab .language-fab-switch{
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  padding:0!important;
  margin:0!important;
  border:2px solid #111!important;
  border-radius:50%!important;
  background:var(--aqua)!important;
  color:#111!important;
  box-shadow:0 4px 12px rgba(0,0,0,.28)!important;
  line-height:1!important;
}
html body #language-fab .language-fab-globe{font-size:24px!important;line-height:1!important;}
html body #language-fab .language-fab-code{display:none!important;}
html body #language-fab .language-fab-dismiss{
  position:absolute!important;
  top:-5px!important;
  right:-5px!important;
  display:grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  padding:0!important;
  border:1px solid #fff!important;
  border-radius:50%!important;
  background:#222!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1!important;
}
html body #language-fab[hidden]{display:none!important;}
@media(max-width:700px){
  html body footer.site-footer,
  html body footer.site-footer:hover,
  html body footer.site-footer:focus-within{height:44px!important;min-height:44px!important;max-height:44px!important;padding:7px 10px!important;}
  html body #language-fab.language-fab{right:12px!important;bottom:58px!important;}
}


/* Native fullscreen plus a viewport fallback for browsers without Fullscreen API support. */
.workspace-editor:fullscreen {
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  background:#1e1e1e!important;
}
.workspace-editor:fullscreen::backdrop{background:#1e1e1e;}
.workspace-editor:fullscreen .workspace-monaco,
.workspace-editor:fullscreen .workspace-fallback-editor{height:100%!important;min-height:0!important;overflow:auto!important;}
body.workspace-editor-fallback-fullscreen .workspace-ide{isolation:auto!important;}
body.workspace-editor-fallback-fullscreen .workspace-editor{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  background:#1e1e1e!important;
}
body.workspace-editor-fallback-fullscreen .workspace-monaco,
body.workspace-editor-fallback-fullscreen .workspace-fallback-editor{height:100%!important;min-height:0!important;overflow:auto!important;}


/* Editor workspace refinement: fixed canvas, VS Code-like tree and chevrons. */
.page-card:has(.workspace-ide) .workspace-ide{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:0;
  height:clamp(560px,76vh,860px);
  min-height:560px;
  align-items:stretch;
  overflow:hidden;
  border:1px solid #3c3c3c;
  border-radius:7px;
  background:#1e1e1e;
}
.page-card:has(.workspace-ide) .workspace-files{
  height:100%;
  min-height:0;
  border:0;
  border-right:1px solid #3a3a3a;
  border-radius:0;
  overflow:hidden;
}
.page-card:has(.workspace-ide) .workspace-tree{
  height:calc(100% - 78px);
  min-height:0;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
}
.page-card:has(.workspace-ide) .workspace-editor{
  height:100%;
  min-height:0;
  max-height:none;
  border:0;
  border-radius:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}
.page-card:has(.workspace-ide) .workspace-editor-toolbar{
  grid-template-rows:auto auto;
  min-height:0;
}
.page-card:has(.workspace-ide) .workspace-monaco{
  height:100%;
  min-height:0;
  width:100%;
  overflow:hidden;
}
.page-card:has(.workspace-ide) .workspace-fallback-editor{
  height:100%;
  min-height:0;
  max-height:none;
  resize:none;
  overflow:auto;
}
.page-card:has(.workspace-ide) .workspace-editor-placeholder{
  min-height:0;
  height:100%;
}
.page-card:has(.workspace-ide) .workspace-commit-row{
  min-height:54px;
}
.workspace-tree-item.directory .workspace-tree-icon{
  min-width:16px;
  width:16px;
  color:#c5c5c5;
  font-size:12px;
  line-height:1;
  transform:translateY(-1px);
}
.workspace-tree-item.directory[aria-expanded="true"] .workspace-tree-icon{color:#d7d7d7;}
.workspace-tree-item.file .workspace-tree-icon{
  min-width:16px;
  width:16px;
  color:#75b9f0;
}
.workspace-explorer-toggle{
  position:relative;
  top:auto;
  left:auto;
  z-index:2;
  align-self:start;
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:7px 0 0 6px;
  box-shadow:none;
  border:0;
  background:transparent;
  padding:0 8px;
  min-height:28px;
}
.workspace-explorer-toggle span[aria-hidden]{
  display:inline-grid;
  place-items:center;
  width:16px;
  font-size:17px;
  font-weight:700;
}
.workspace-ide.explorer-open .workspace-explorer-toggle{
  position:absolute;
  left:4px;
  top:5px;
  margin:0;
}
.workspace-ide.explorer-open .workspace-explorer-title{padding-left:36px;}
.workspace-ide:not(.explorer-open) .workspace-editor{grid-column:2;}
.workspace-ide:not(.explorer-open){grid-template-columns:0 minmax(0,1fr);}
.workspace-ide:not(.explorer-open) .workspace-explorer-toggle{
  position:absolute;
  left:5px;
  top:7px;
  grid-column:auto;
  grid-row:auto;
  z-index:5;
}
.workspace-ide:not(.explorer-open) .workspace-files{display:none;}
.workspace-ide:not(.explorer-open) .workspace-editor-toolbar{padding-left:34px;}
.workspace-view-button{border-radius:3px;}
@media(max-width:900px){
  .page-card:has(.workspace-ide) .workspace-ide{
    height:72vh;
    min-height:540px;
    grid-template-columns:minmax(0,1fr);
  }
  .page-card:has(.workspace-ide) .workspace-editor{grid-column:1;}
  .page-card:has(.workspace-ide) .workspace-files{
    position:absolute;
    left:0;top:0;bottom:0;
    width:min(320px,85%);
    height:100%;
    z-index:9;
    border-right:1px solid #3a3a3a;
    box-shadow:8px 0 26px rgba(0,0,0,.35);
  }
  .workspace-ide.explorer-open .workspace-explorer-backdrop{display:block;}
  .workspace-ide.explorer-open .workspace-explorer-toggle{
    position:absolute;
    top:6px;left:auto;right:8px;
    z-index:11;
  }
  .workspace-ide.explorer-open .workspace-explorer-title{padding-left:12px;padding-right:44px;}
  .workspace-ide:not(.explorer-open) .workspace-files{display:none;}
  .workspace-ide:not(.explorer-open) .workspace-explorer-toggle{
    position:absolute;left:5px;top:7px;z-index:5;
  }
  .workspace-ide:not(.explorer-open) .workspace-editor-toolbar{padding-left:34px;}
}
@media(max-width:700px) and (orientation:portrait){
  .page-card:has(.workspace-ide) .workspace-ide{height:70vh;min-height:520px;}
  .workspace-ide.explorer-open .workspace-files{
    position:fixed;inset:0;width:100vw;height:100dvh;max-height:100dvh;z-index:1001;
  }
  .workspace-ide.explorer-open .workspace-explorer-toggle{
    position:fixed;right:10px;left:auto;top:8px;z-index:1002;
  }
}