/* Shared tokens: neutral grey canvas, white panels, restrained blue links. */
:root {
  color-scheme:light;
  --bg:#f2f3f5;
  --surface:#ffffff;
  --raised:#e9ebef;
  --line:#dce0e5;
  --text:#292d34;
  --muted:#686f79;
  --cyan:#4d6589;
  --purple:#4d6589;
  --header:76px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text)
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
[hidden] {
  display:none!important
}
::selection {
  background:#91b5ed3b
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
.skip {
  position:fixed;
  top:-50px;
  left:20px;
  z-index:20;
  padding:12px;
  background:var(--cyan);
  color:var(--bg)
}
.skip:focus {
  top:8px
}
.header {
  height:var(--header);
  display:flex;
  align-items:center;
  gap:26px;
  padding:0 32px;
  border-bottom:1px solid var(--line);
  background:#1a202bf5;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(12px)
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  font-weight:800;
  letter-spacing:1px;
  white-space:nowrap
}
.brand-logo { width: 38px; height: 38px; object-fit: contain; display: block; }
.brand small {
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:2px;
  margin-left:6px
}
.brand-mark {
  display:grid;
  place-content:center;
  position:relative;
  width:35px;
  height:35px;
  border:1px solid #91b5ed53;
  color:var(--cyan);
  background:linear-gradient(135deg,#91b5ed12,#91b5ed12);
  font-size:25px;
  font-weight:900;
  letter-spacing:-5px;
  box-shadow:0 0 22px #91b5ed0b
}
.brand-mark span {
  color:var(--purple);
  position:absolute;
  right:5px;
  top:2px
}
.header-divider {
  height:24px;
  width:1px;
  background:var(--line)
}
select {
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:10px 32px 10px 12px;
  border-radius:5px;
  max-width:100%
}
.project-switch select {
  width:195px
}
.header-links {
  display:flex;
  gap:26px;
  align-items:center;
  margin-left:auto;
  color:var(--muted);
  font-size:12px
}
.header-links a:hover {
  color:var(--cyan)
}
.header-links i {
  font-size:11px;
  margin-left:5px
}
.header-links .editor-link {
  color:var(--text);
  border:1px solid var(--line);
  padding:10px 13px;
  border-radius:4px
}
.icon-button {
  background:transparent;
  border:0;
  color:var(--muted);
  padding:8px
}
.icon-button:hover {
  color:var(--cyan)
}
.mobile-menu {
  display:none
}
.layout {
  display:grid;
  grid-template-columns:264px minmax(0,1fr) 222px;
  max-width:1600px;
  margin:auto;
  min-height:calc(100vh - var(--header))
}
.sidebar {
  position:sticky;
  top:var(--header);
  height:calc(100vh - var(--header));
  overflow:auto;
  border-right:1px solid var(--line);
  padding:30px 20px 20px;
  display:flex;
  flex-direction:column
}
.sidebar-project {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:26px
}
.sidebar-project strong {
  display:block;
  margin-top:6px;
  font-size:15px
}
.eyebrow {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.7px;
  color:var(--muted)
}
.sidebar-project .eyebrow {
  font-size:8px;
  letter-spacing:1.15px
}
.project-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  background:#91b5ed09;
  border:1px solid #91b5ed33;
  border-radius:5px;
  color:var(--cyan);
  font-size:17px
}
.search-box {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px;
  color:var(--muted);
  background:var(--surface);
  margin-bottom:25px
}
.search-box input {
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-size:12px
}
.search-box:focus-within {
  border-color:var(--cyan)
}
kbd {
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 5px;
  font-size:10px;
  color:var(--muted)
}
.nav-heading {
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  font-weight:700;
  color:#6f7d93;
  margin:15px 12px 10px
}
.nav-link {
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:11px 12px;
  margin:3px 0;
  text-align:left;
  font-size:12px;
  border-radius:4px;
  line-height:1.4
}
.nav-link i {
  width:15px;
  flex-shrink:0;
  font-size:13px
}
.nav-link:hover {
  color:var(--text);
  background:#ffffff04
}
.nav-link.active {
  background:linear-gradient(90deg,#91b5ed11,#91b5ed03);
  border-color:#91b5ed26;
  color:var(--cyan)
}
.active-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  margin-left:auto;
  box-shadow:0 0 8px #91b5ed6b
}
summary {
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:var(--muted);
  font-size:12px;
  padding:14px 12px;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary i:last-child {
  margin-left:auto;
  font-size:9px;
  transition:transform .2s
}
details:not([open]) summary i:last-child {
  transform:rotate(-90deg)
}
details .nav-link {
  padding-left:27px
}
details .nav-link:before {
  content:"";
  height:16px;
  position:absolute;
  left:15px;
  border-left:1px solid var(--line)
}
.support-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:35px;
  padding:18px 15px;
  background:linear-gradient(130deg,#91b5ed0c,#91b5ed04);
  border:1px solid #91b5ed25;
  border-radius:5px
}
.support-card>i {
  font-size:20px;
  color:var(--purple)
}
.support-card strong {
  font-size:12px
}
.support-card>span {
  font-size:11px;
  line-height:1.6;
  color:var(--muted)
}
.support-card .support-cta {
  color:var(--purple);
  margin-top:3px
}
.support-cta i {
  font-size:9px;
  margin-left:6px
}
.sidebar-footer {
  font-size:9px;
  letter-spacing:1.5px;
  color:#647188;
  display:flex;
  gap:8px;
  align-items:center;
  padding:25px 4px 0;
  margin-top:auto
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 9px #91b5ed3b
}
main {
  min-width:0;
  padding:28px clamp(24px,4vw,64px) 24px
}
.breadcrumbs {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:30px
}
.breadcrumbs>i {
  font-size:8px;
  color:#53617a
}
.breadcrumbs>span:nth-of-type(2) {
  color:var(--text)
}
.breadcrumbs button {
  margin-left:auto
}
.resource-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border:1px solid #91b5ed29;
  background:linear-gradient(100deg,#91b5ed08,#91b5ed08);
  border-radius:4px;
  margin-bottom:30px
}
.resource-banner .eyebrow {
  color:var(--cyan);
  font-size:8px
}
.resource-banner .status-dot {
  margin-right:7px
}
.resource-banner>span:last-child {
  font-size:8px;
  letter-spacing:1px;
  color:#6e809b
}
.markdown {
  line-height:1.85;
  color:#b6c1d1;
  font-size:13px;
  overflow-wrap:anywhere
}
.markdown h1,.markdown h2,.markdown h3,.markdown h4 {
  color:var(--text);
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.4px;
  scroll-margin-top:100px
}
.markdown h1 {
  font-size:36px;
  letter-spacing:-1.2px;
  margin:0 0 22px
}
.markdown h2 {
  font-size:21px;
  margin:36px 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line)
}
.markdown h3 {
  font-size:16px;
  margin:28px 0 12px
}
.markdown p {
  margin:15px 0
}
.markdown h1+p {
  font-size:14px;
  color:var(--muted)
}
.markdown a {
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px
}
.markdown a:hover {
  color:#9eedf3
}
.markdown strong {
  color:#dbe4f1
}
.markdown ul,.markdown ol {
  padding-left:22px
}
.markdown li {
  padding-left:5px;
  margin:8px 0
}
.markdown li::marker {
  color:#5e728d
}
.markdown :not(pre)>code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.88em;
  background:#293548;
  color:#9fdae5;
  border:1px solid #26384a;
  border-radius:4px;
  padding:2px 6px
}
.markdown pre {
  overflow:auto;
  position:relative;
  background:#1c2430;
  border:1px solid #273245;
  border-radius:6px;
  margin:22px 0
}
.markdown pre code,.markdown .hljs {
  display:block;
  background:transparent;
  padding:18px 20px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  line-height:1.8;
  overflow:visible
}
.code-toolbar {
  position:sticky;
  left:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:100%;
  padding:8px 15px;
  border-bottom:1px solid var(--line);
  color:#7f91aa;
  font-size:10px;
  letter-spacing:1px;
  background:#242e3d
}
.copy-code {
  padding:3px 8px;
  border:1px solid #2e3d51;
  background:transparent;
  color:var(--muted);
  border-radius:3px;
  font-size:10px
}
.copy-code:hover {
  border-color:var(--cyan);
  color:var(--cyan)
}
.markdown blockquote {
  margin:22px 0;
  border-left:3px solid #667994;
  background:#242e3d;
  padding:5px 18px;
  color:#aebdd0
}
.markdown .callout {
  border:1px solid #91b5ed2b;
  border-left:3px solid var(--cyan);
  border-radius:4px;
  background:#91b5ed07;
  padding:14px 18px
}
.callout-title {
  display:block;
  color:var(--cyan)!important;
  font-size:10px;
  letter-spacing:1.4px
}
.callout p {
  margin:8px 0
}
.markdown .warning,.markdown .caution {
  border-color:#efb86640;
  border-left-color:#efb866;
  background:#efb86607
}
.warning .callout-title,.caution .callout-title {
  color:#efb866!important
}
.markdown .important {
  border-color:#91b5ed40;
  border-left-color:var(--purple);
  background:#91b5ed07
}
.important .callout-title {
  color:var(--purple)!important
}
.markdown table {
  display:block;
  overflow-x:auto;
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  margin:22px 0;
  border:1px solid var(--line);
  border-radius:4px
}
.markdown th {
  text-align:left;
  color:#d1dceb;
  background:#242e3d;
  font-weight:600
}
.markdown td,.markdown th {
  padding:11px 15px;
  border-bottom:1px solid var(--line);
  min-width:100px
}
.markdown tr:last-child td {
  border-bottom:0
}
.markdown hr {
  border:0;
  border-top:1px solid var(--line);
  margin:30px 0
}
.markdown img {
  max-width:100%;
  height:auto;
  border-radius:5px
}
.markdown input[type=checkbox] {
  accent-color:var(--cyan)
}
.pagination {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:45px;
  padding-top:28px;
  border-top:1px solid var(--line)
}
.page-card {
  padding:17px 20px;
  border:1px solid var(--line);
  border-radius:5px;
  background:linear-gradient(125deg,#242e3d,#1c2430);
  display:flex;
  flex-direction:column;
  gap:8px
}
.page-card:hover {
  border-color:#91b5ed54
}
.page-card span {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.page-card strong {
  font-size:13px;
  font-weight:500
}
.page-card.next {
  text-align:right
}
.page-card.next strong {
  color:var(--cyan)
}
.content-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:26px 0 5px;
  font-size:10px;
  color:#67748a
}
.content-footer a {
  color:var(--muted)
}
.content-footer i {
  font-size:9px;
  margin-left:4px
}
.toc-sidebar {
  position:sticky;
  top:var(--header);
  height:calc(100vh - var(--header));
  overflow:auto;
  padding:38px 24px 20px 5px
}
.toc-sidebar>.eyebrow {
  font-size:9px;
  color:#afbdce
}
.toc-sidebar nav {
  margin-top:20px;
  border-left:1px solid var(--line)
}
.toc-link {
  display:block;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  padding:7px 0 7px 15px;
  border-left:1px solid transparent;
  margin-left:-1px
}
.toc-link.level-3 {
  padding-left:25px;
  font-size:10px
}
.toc-link.active,.toc-link:hover {
  color:var(--cyan);
  border-left-color:var(--cyan)
}
.toc-note {
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:20px;
  font-size:10px;
  line-height:1.8;
  color:#66778e
}
.toc-note i {
  display:block;
  color:var(--purple);
  margin-bottom:10px;
  font-size:15px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,15px);
  padding:13px 20px;
  border:1px solid #91b5ed4a;
  border-radius:5px;
  background:#15202e;
  color:var(--text);
  box-shadow:0 8px 30px #0007;
  z-index:30;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  max-width:90vw;
  font-size:12px
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
/* Editor: native textarea keeps the bundle small and the writing surface responsive. */
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:11px 17px;
  border-radius:4px;
  border:1px solid var(--line);
  font-size:12px;
  color:var(--text);
  background:var(--raised)
}
.button.primary {
  color:#08171a;
  background:var(--cyan);
  border-color:var(--cyan);
  font-weight:650
}
.button.primary:hover {
  background:#83e7ef
}
.button.subtle {
  background:transparent;
  color:var(--muted)
}
.editor-badge {
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--purple);
  border:1px solid #91b5ed30;
  border-radius:4px;
  padding:7px 10px
}
.login-panel {
  min-height:calc(100vh - var(--header));
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 35%,#91b5ed06,transparent 55%);
  padding:30px 20px
}
.login-card {
  max-width:430px;
  width:100%;
  padding:38px;
  border:1px solid #91b5ed30;
  background:linear-gradient(140deg,#131b28,#1c2430);
  border-radius:8px;
  box-shadow:0 20px 80px #0003
}
.login-card>.project-icon {
  margin-bottom:23px
}
.login-card h1 {
  font-size:25px;
  letter-spacing:-.8px;
  margin:12px 0
}
.login-card p {
  color:var(--muted);
  line-height:1.8;
  font-size:12px
}
.login-card label {
  display:block;
  font-size:11px;
  color:var(--text);
  margin:24px 0 9px
}
.login-card input {
  width:100%;
  padding:13px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px
}
.login-card .button {
  width:100%;
  margin-top:16px
}
.login-card #login-error {
  color:#f9b1a6;
  margin:12px 0;
  min-height:18px
}
.login-footnote {
  display:block;
  font-size:10px;
  color:#60718a;
  text-align:center
}
.editor-toolbar {
  min-height:78px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:16px 24px;
  border-bottom:1px solid var(--line)
}
.editor-toolbar label {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:13px
}
.editor-toolbar select {
  font-size:12px;
  letter-spacing:0
}
.editor-toolbar #editor-path {
  font-family:Consolas,monospace;
  font-size:11px;
  color:var(--muted)
}
#save-state {
  font-size:11px;
  color:var(--muted);
  margin-left:auto
}
.editor-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr) minmax(0,1fr);
  height:calc(100vh - 154px)
}
.editor-tree {
  padding:24px 14px;
  border-right:1px solid var(--line);
  overflow:auto
}
.editor-tree>.eyebrow {
  display:block;
  margin:0 12px 20px
}
.editor-tree>p {
  font-size:11px;
  color:#6e7d93;
  line-height:1.8;
  padding:20px 12px;
  border-top:1px solid var(--line);
  margin-top:30px
}
.editor-pane,.preview-pane {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0
}
.editor-pane {
  border-right:1px solid var(--line)
}
.pane-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:var(--surface);
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--muted)
}
.pane-title i {
  margin-right:6px;
  color:var(--cyan)
}
.pane-title>span:last-child {
  font-size:9px;
  letter-spacing:0;
  color:#6d7b90
}
#source {
  flex:1;
  width:100%;
  resize:none;
  background:#1a202b;
  color:#b9c9de;
  border:0;
  outline:none;
  padding:25px;
  font-family:Consolas,ui-monospace,monospace;
  font-size:12px;
  line-height:1.9;
  tab-size:2
}
#preview {
  padding:28px;
  flex:1;
  overflow:auto
}
#preview h1 {
  font-size:29px
}
@media(min-width:1600px) {
  .layout {
    border-left:1px solid var(--line);
    border-right:1px solid var(--line)
  }
}
@media(max-width:1180px) {
  .layout {
    grid-template-columns:240px minmax(0,1fr)
  }
  .toc-sidebar {
    display:none
  }
  .header {
    padding:0 24px;
    gap:18px
  }
  .header-links {
    gap:16px
  }
  .editor-layout {
    grid-template-columns:190px minmax(0,1fr) minmax(0,1fr)
  }
  .editor-toolbar #editor-path {
    display:none
  }
}
@media(max-width:850px) {
  .header-links>a:not(.editor-link) {
    display:none
  }
  .brand {
    font-size:13px
  }
  .brand small {
    font-size:9px
  }
  .header {
    gap:14px;
    padding:0 18px
  }
  .project-switch select {
    width:170px
  }
  .editor-layout {
    grid-template-columns:165px minmax(0,1fr)
  }
  .preview-pane {
    grid-column:2;
    height:65vh;
    border-top:1px solid var(--line)
  }
  .editor-layout {
    height:auto
  }
  .editor-tree {
    grid-row:span 2
  }
  .editor-pane {
    height:65vh;
    border-right:0
  }
  .editor-toolbar {
    gap:12px
  }
  .editor-toolbar label {
    font-size:0
  }
  .editor-toolbar label select {
    font-size:12px
  }
  .editor-badge {
    display:none
  }
}
@media(max-width:650px) {
  :root {
    --header:66px
  }
  .header {
    padding:0 14px;
    gap:12px
  }
  .brand {
    gap:8px;
    font-size:11px;
    letter-spacing:.6px
  }
  .brand small,.header-divider {
    display:none
  }
  .brand-mark {
    width:29px;
    height:29px;
    font-size:22px
  }
  .project-switch {
    margin-left:auto
  }
  .project-switch select {
    width:139px;
    font-size:11px;
    padding:9px
  }
  .header-links {
    display:none
  }
  .mobile-menu {
    display:block
  }
  .layout {
    display:block
  }
  .sidebar {
    position:fixed;
    top:var(--header);
    left:0;
    width:280px;
    z-index:9;
    background:var(--bg);
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .2s;
    box-shadow:20px 0 40px #0005
  }
  .sidebar.open {
    transform:translateX(0);
    visibility:visible;
  }
  main {
    padding:23px 20px
  }
  .breadcrumbs {
    margin-bottom:22px;
    font-size:10px;
    gap:10px
  }
  .resource-banner {
    padding:11px
  }
  .resource-banner>span:last-child {
    display:none
  }
  .markdown h1 {
    font-size:30px
  }
  .markdown h2 {
    font-size:20px
  }
  .markdown {
    font-size:12px
  }
  .page-card {
    padding:15px
  }
  .content-footer {
    flex-direction:column;
    gap:12px
  }
  .editor-body .header-links {
    display:flex;
    font-size:10px
  }
  .editor-body .header-links>a {
    display:block
  }
  .editor-body .button {
    padding:8px
  }
  .editor-toolbar {
    flex-wrap:wrap;
    padding:14px
  }
  .editor-toolbar #save-state {
    margin-left:0;
    font-size:10px
  }
  .editor-toolbar .button {
    margin-left:auto;
    padding:9px;
    font-size:11px
  }
  .editor-layout {
    display:flex;
    flex-direction:column
  }
  .editor-tree {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:14px
  }
  .editor-tree>.eyebrow,.editor-tree>p {
    display:none
  }
  .editor-tree nav {
    display:flex;
    overflow-x:auto;
    gap:6px
  }
  .editor-tree .nav-link {
    width:auto;
    white-space:nowrap;
    font-size:10px;
    padding:8px
  }
  .editor-tree .nav-link i {
    display:none
  }
  .editor-pane {
    height:60vh
  }
  .preview-pane {
    height:65vh
  }
  .login-card {
    padding:28px
  }
  .pane-title {
    padding:13px 16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important
  }
}

/* Calm surfaces and consistent accents replace the neon treatments. */
.brand-mark,
.project-icon,
.resource-banner,
.support-card,
.page-card,
.login-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.brand-mark span { color: var(--cyan); }
.brand-logo { filter: invert(1) brightness(.35); }
html[data-theme="dark"] .brand-logo { filter: none; }
.sidebar { background: var(--bg); }
.nav-link.active {
  background: #e5e9ef;
  border-color: transparent;
}
.active-dot, .status-dot { box-shadow: none; }
.resource-banner { display: none; }
.support-card { margin-top: 28px; }
.support-card > i, .support-card .support-cta { color: var(--muted); }
.sidebar-project .eyebrow { letter-spacing: .8px; }
.nav-heading, .sidebar-footer, .content-footer, .toc-note,
.editor-tree > p, .pane-title > span:last-child, .login-footnote {
  color: var(--muted);
}
.markdown { color: #4e5662; font-size: 14px; }
.markdown :not(pre) > code { color: #40516b; border-color: var(--line); background: #e9ecf1; }
.markdown h1 { font-weight: 650; }
.markdown pre { border-color: var(--line); }
.code-toolbar { color: var(--muted); }
.markdown .callout { background: #edf1f6; }
.all-scripts {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  padding: 0 2px 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.all-scripts:hover { color: var(--text); }
.home .mobile-menu { display: none; }

/* The landing page is a searchable catalog driven entirely by projects.json. */
.catalog {
  max-width: 1180px;
  margin: 0 auto;
  padding: 68px 40px 28px;
}
.catalog-heading { max-width: 620px; margin-bottom: 52px; }
.catalog-heading .eyebrow {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 1.6px;
}
.catalog h1 {
  font-size: clamp(34px, 4vw, 49px);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -1.6px;
  margin: 20px 0 18px;
}
.catalog-heading p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  max-width: 560px;
}
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.catalog-toolbar > div { display: flex; align-items: center; gap: 12px; }
.catalog-toolbar h2 { margin: 0; font-size: 17px; font-weight: 600; }
#script-count { color: var(--muted); font-size: 11px; }
.catalog-search {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 13px;
  color: var(--muted);
  width: 270px;
}
.catalog-search:focus-within { border-color: var(--cyan); }
.catalog-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
}
.script-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.script-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  transition: border-color .18s, background .18s;
}
.script-card:hover { background: #fafbfc; border-color: #a4aebb; }
.script-card-top { display: flex; align-items: center; justify-content: space-between; }
.script-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 7px;
  background: #f0f2f5;
  color: #626c7b;
  font-size: 17px;
}
.card-arrow { color: #8b929c; font-size: 11px; }
.script-card h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.script-card p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0 0 24px; }
.script-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 11px;
  color: #5c6674;
}
.script-card-footer i { font-size: 10px; color: var(--cyan); }
.catalog-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 25px 0 0;
  margin-top: 45px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.catalog-footer a:hover { color: var(--text); }
.catalog-footer i { margin-left: 6px; font-size: 9px; }
.empty-state { padding: 45px 0; color: var(--muted); font-size: 14px; }

/* Light reading and editing surfaces; no neon, heavy shadows, or dark panels. */
::selection { background: #dce5f1; }
.header { background: #f2f3f5f5; backdrop-filter: blur(12px); }
.brand { letter-spacing: .5px; }
.brand-mark { color: #49515d; border-radius: 4px; }
.brand-mark span { color: #737d8c; }
.brand small { letter-spacing: 1.3px; }
.project-icon { color: #626c7b; }
.nav-link:hover { background: #e9ecf0; }
.support-card { background: #f7f8fa; }
.search-box, .catalog-search { background: #fafbfc; }
.search-box input::placeholder, .catalog-search input::placeholder { color: #777f8a; }
.script-card { border-radius: 6px; }
.catalog-heading .eyebrow { color: var(--muted); letter-spacing: 1.2px; }
.catalog h1 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; }
.catalog-heading { margin-bottom: 42px; }
.script-card-footer { border-top: 0; padding-top: 8px; }
.markdown strong { color: var(--text); }
.markdown a:hover { color: #2f4565; }
.markdown pre { background: #f8f9fb; }
.markdown pre code, .markdown .hljs { background: transparent; color: #394250; }
.code-toolbar { background: #eceff3; color: var(--muted); }
.copy-code { border-color: #ccd2db; }
.markdown blockquote { background: #e9edf2; color: #505b6b; border-left-color: #a5afbd; }
.markdown .callout { border-color: #d5dde9; border-left-color: #8294ad; }
.markdown .warning, .markdown .caution {
  background: #faf5e9;
  border-color: #e6dcc4;
  border-left-color: #b2914b;
}
.warning .callout-title, .caution .callout-title { color: #876b30 !important; }
.markdown .important { background: #edf1f6; border-color: #d5dde9; border-left-color: #8294ad; }
.markdown th { background: #e9edf2; color: #414b5b; }
.markdown td { background: #fafbfc; }
.page-card { background: #fafbfc; }
.page-card:hover { border-color: #a4aebb; }
.toc-sidebar > .eyebrow { color: var(--muted); }
.toast { background: #fff; border-color: #ccd4df; box-shadow: 0 4px 16px #26324614; }
.button.primary { background: #48566b; border-color: #48566b; color: #fff; }
.button.primary:hover { background: #364256; }
.editor-badge { color: var(--muted); border-color: var(--line); }
.login-panel { background: var(--bg); }
.login-card { background: #fff; }
.login-card input { background: #f7f8fa; }
.login-card #login-error { color: #a13e36; }
#source { background: #fafbfc; color: #414b5b; }
.preview-pane { background: #fff; }
@media (max-width: 650px) {
  .sidebar { box-shadow: 12px 0 30px #26324618; }
}
@media (max-width: 900px) {
  .catalog { padding: 48px 28px 28px; }
  .script-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .catalog { padding: 36px 20px 25px; }
  .catalog-heading { margin-bottom: 35px; }
  .catalog-heading p { font-size: 13px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; gap: 17px; }
  .catalog-search { width: 100%; }
  .script-grid { grid-template-columns: 1fr; gap: 14px; }
  .script-card { padding: 22px; }
  .catalog-footer { flex-direction: column; gap: 10px; }
  .markdown { font-size: 13px; }
}