: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)}
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)}
.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}
}