:root {
  --accent: #ff3d46;
}

body,
.topbar,
.footer,
.profile-card,
.resource-card,
.stack-list,
.status-panel,
.hero-console {
  transition: background-color 1.2s ease, border-color 1.2s ease, color 1.2s ease, box-shadow 1.2s ease;
}

.brand-mark,
.eyebrow,
.button-primary,
.card-arrow,
.resource-type,
.resource-card strong span,
.status-copy h2 span {
  color: var(--accent);
  border-color: var(--accent);
  transition: color 1.2s ease, border-color 1.2s ease, background-color 1.2s ease;
}

.brand {
  gap: 11px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  padding: 4px;
  display: grid;
  place-items: center;
  background: rgba(255, 61, 70, .07);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  display: flex;
  align-items: baseline;
  gap: 2px;
  position: relative;
  padding-bottom: 10px;
}

.brand-name small {
  position: absolute;
  left: 0;
  bottom: 0;
  color: var(--muted);
  font: 7px var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 23px;
  margin-top: 38px;
  color: var(--muted);
  font: 9px var(--mono);
  letter-spacing: .04em;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
}

.hero-meta strong {
  color: var(--paper);
  font-weight: 400;
}

.button-primary {
  background-color: var(--accent);
  color: var(--ink);
}

.hero-console {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}

.profile-card.expert.selected,
.profile-card.expert:hover {
  border-color: var(--accent);
}

body {
  background-color: #07090b;
  background-image:
    radial-gradient(circle at 8% 8%, rgba(255, 61, 70, .13), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(79, 157, 255, .07), transparent 25%),
    linear-gradient(rgba(228, 229, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 229, 220, .025) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}

body::before {
  background:
    linear-gradient(120deg, transparent 0 50%, rgba(255, 61, 70, .06) 50.1%, transparent 50.3%),
    linear-gradient(300deg, transparent 0 70%, rgba(228, 229, 220, .035) 70.1%, transparent 70.3%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%);
  opacity: .8;
  transition: background 1.35s ease;
}

.topbar,
main,
.footer {
  position: relative;
  z-index: 1;
}

.hero-console {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}

.profile-card.expert.selected,
.profile-card.expert:hover,
.resource-card.resource-main,
.resource-card:hover {
  border-color: var(--accent);
}

.profile-card.expert.selected,
.profile-card.expert:hover {
  background: linear-gradient(145deg, rgba(228, 229, 220, .12), #0b0f10 56%);
}

.resource-card.resource-main {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.codes-section {
  padding: 0 0 130px;
}

.code-lab {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 440px;
  border: 1px solid var(--line);
  background: #090c0d;
}

.code-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 12px;
}

.code-tab {
  appearance: none;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 11px var(--mono);
  padding: 15px 12px;
  text-align: left;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.code-tab span {
  color: var(--accent);
  display: inline-block;
  font-size: 9px;
  margin-right: 8px;
}

.code-tab:hover,
.code-tab.active {
  background: rgba(255, 255, 255, .045);
  border-left-color: var(--accent);
  color: var(--paper);
}

.code-github {
  border-top: 1px solid var(--line);
  color: var(--accent);
  font: 10px/1.5 var(--mono);
  margin-top: auto;
  padding: 18px 12px 8px;
  text-decoration: none;
}

.code-window {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.code-window-top,
.code-window-footer {
  align-items: center;
  color: var(--muted);
  display: flex;
  font: 10px var(--mono);
  justify-content: space-between;
  padding: 14px 18px;
}

.code-window-top {
  border-bottom: 1px solid var(--line);
}

.code-window-top i {
  background: #4b5751;
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  margin-right: 4px;
  width: 7px;
}

.code-window-top i:first-child { background: var(--red); }
.code-window-top strong { color: var(--paper); font-weight: 400; }
.code-window-top button { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 9px var(--mono); padding: 6px 8px; }
.code-window-top button:hover { border-color: var(--accent); color: var(--accent); }
.code-window pre { flex: 1; margin: 0; overflow: auto; padding: 25px; }
.code-window code { color: #b7cbb6; font: 12px/1.75 var(--mono); white-space: pre; }
.code-window-footer { border-top: 1px solid var(--line); font-size: 9px; }

@media (max-width: 800px) {
  .code-lab { grid-template-columns: 1fr; }
  .code-sidebar { border-bottom: 1px solid var(--line); border-right: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .code-github { grid-column: span 2; }
  .code-window { min-height: 360px; }
}

.download-section,
.tools-section,
.terminal-section,
.roadmap-section,
.requirements-section,
.community-section,
.changelog-section,
.faq-section {
  padding: 0 0 130px;
}

.download-panel,
.community-panel {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(110deg, rgba(255, 61, 70, .09), #0b0f10 62%);
  display: flex;
  justify-content: space-between;
  padding: 42px;
  transition: border-color 1.2s ease, background 1.2s ease;
}

.download-panel h2,
.community-panel h2 { font-size: clamp(40px, 5vw, 68px); }
.download-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.6; max-width: 430px; }
.download-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 17px; }
.download-link { color: var(--paper); font: 11px var(--mono); text-decoration: none; }
.download-link:hover { color: var(--accent); }
.download-actions small { color: var(--muted); font: 10px/1.5 var(--mono); max-width: 250px; }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-grid article { background: #0b0f10; border: 1px solid var(--line); min-height: 205px; padding: 20px; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.tool-grid article:hover { border-color: var(--accent); transform: translateY(-5px); }
.tool-number, .tool-tag { color: var(--accent); font: 9px var(--mono); letter-spacing: .08em; }
.tool-grid strong { font-size: 24px; margin-top: 35px; }
.tool-grid p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0 18px; }
.tool-tag { margin-top: auto; }

.demo-terminal { background: #090c0d; border: 1px solid var(--line); min-height: 300px; }
.demo-output { font: 12px/2 var(--mono); min-height: 245px; padding: 24px; }
.demo-output p { margin: 0; }
.demo-terminal button { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 9px var(--mono); padding: 6px 8px; }
.demo-terminal button:hover { border-color: var(--accent); color: var(--accent); }

.roadmap-grid { border-top: 1px solid var(--line); }
.roadmap-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 55px 1fr 90px; padding: 22px 0; }
.roadmap-item > span, .roadmap-item b { color: var(--muted); font: 10px var(--mono); }.roadmap-item strong { font-size: 18px; }.roadmap-item p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }.roadmap-item b { text-align: right; font-weight: 400; }.roadmap-item.complete > span, .roadmap-item.complete b, .roadmap-item.active > span, .roadmap-item.active b { color: var(--accent); }

.requirements-grid { align-items: start; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: 52px 0; }.requirement-list { border-top: 1px solid var(--line); }.requirement-list div { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 18px 0; }.requirement-list span { color: var(--muted); font: 10px var(--mono); }.requirement-list strong { font: 12px var(--mono); font-weight: 400; }

.community-panel { background: #0b0f10; }.community-links { display: flex; flex-direction: column; min-width: min(390px, 100%); }.community-links a { border-bottom: 1px solid var(--line); color: var(--paper); display: flex; justify-content: space-between; padding: 15px 0; text-decoration: none; font: 12px var(--mono); }.community-links a:hover { color: var(--accent); }.community-links span { color: var(--muted); font-size: 9px; }

.changelog-list { border-top: 1px solid var(--line); }
.changelog-list article { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 180px 1fr 1.6fr; padding: 22px 0; }
.changelog-list span { color: var(--accent); font: 9px var(--mono); }.changelog-list strong { font-size: 17px; }.changelog-list p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 17px; justify-content: space-between; list-style: none; padding: 21px 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--accent); content: '+'; font: 20px var(--mono); transition: transform .25s ease; }
.faq-list details[open] summary::after { content: '-'; transform: rotate(180deg); }
.faq-list p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: -5px 45px 22px 0; max-width: 720px; }

@media (max-width: 800px) {
  .download-panel, .community-panel { align-items: flex-start; flex-direction: column; gap: 35px; padding: 28px; }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .requirements-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 500px) {
  .tool-grid { grid-template-columns: 1fr; }
  .roadmap-item { gap: 12px; grid-template-columns: 35px 1fr; }
  .roadmap-item b { grid-column: 2; text-align: left; }
  .changelog-list article { grid-template-columns: 1fr; gap: 8px; }
}