:root {
  color-scheme: dark;
  --ink: #070913;
  --text: #f8f7fc;
  --muted: #bed1e1;
  --cyan: #15f0ff;
  --pink: #fb37dc;
  --font: "Arial", "Segoe UI", sans-serif;
  --cut: polygon(23px 0, 100% 0, 100% calc(100% - 23px), calc(100% - 23px) 100%, 0 100%, 0 23px);
  --small-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

* { box-sizing: border-box; }
html { background: #03040a; scroll-behavior: smooth; }
body {
  margin: 0 auto;
  max-width: 1680px;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.4 var(--font);
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 20;
  inset: 8px auto auto 8px;
  padding: 10px 15px;
  color: var(--ink);
  background: var(--cyan);
}
.masthead {
  position: relative;
  isolation: isolate;
  z-index: 2;
  height: 64px;
  background: linear-gradient(106deg, #070812 0%, #080d19 64%, #040b17 100%);
}
.masthead-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(38px, 5.6vw, 86px);
  padding: 0 5.5%;
}
.wordmark {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(27px, 3.15vw, 49px);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.052em;
  line-height: 1;
}
.wordmark span { color: var(--pink); }
.site-nav { display: flex; align-items: center; gap: clamp(27px, 4.4vw, 66px); }
.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 750;
}
.site-nav a:hover { color: var(--cyan); }
.site-nav svg { width: 17px; color: var(--cyan); transform: rotate(90deg); }
.site-nav .nav-search { width: 23px; color: currentColor; transform: none; }
.site-nav svg, .search-panel svg, .topic-tile svg, .article-label svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.masthead-trace {
  position: absolute;
  width: 100%;
  height: 68px;
  inset: 0 0 auto;
  pointer-events: none;
  z-index: -1;
  color: var(--cyan);
  fill: currentColor;
}
.trace-main, .trace-detail { fill: none; stroke: currentColor; stroke-width: 1.35; }
.trace-accent { fill: var(--pink); }
.menu-toggle { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(397px, 38.8vw, 575px);
  overflow: hidden;
  background: #05060d;
}
.hero-picture, .hero-picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-picture { z-index: -2; }
.hero-picture img { object-fit: cover; object-position: center 49%; }
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #03040be6 0%, #03040bab 30%, #03040b22 61%, transparent 77%);
}
.hero-inner {
  padding: clamp(52px, 5.5vw, 92px) clamp(26px, 3.25vw, 55px) 64px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(46px, 5.9vw, 99px);
  font-weight: 900;
  letter-spacing: -.048em;
  line-height: 1.06;
  text-shadow: 0 2px 15px #050611a0;
}
.hero-subtitle {
  position: relative;
  margin: 9px 0 30px;
  padding-left: 35px;
  color: #f3f1f8;
  font-size: clamp(19px, 2.3vw, 35px);
  letter-spacing: -.015em;
}
.hero-subtitle::before {
  content: "";
  position: absolute;
  inset: .14em auto .14em 4px;
  width: 7px;
  transform: skewX(-24deg);
  background: var(--pink);
}
.search-panel {
  --search-cut: polygon(19px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 19px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: min(100%, 465px);
  min-height: 61px;
  padding: 2px 8px 2px 18px;
  color: var(--cyan);
  background: var(--cyan);
  clip-path: var(--search-cut);
}
.search-panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  clip-path: var(--search-cut);
  background: linear-gradient(100deg, #051320, #062133);
}
.search-panel:focus-within { background: var(--text); }
.search-icon { flex: 0 0 auto; width: 34px; margin-right: 11px; }
.search-panel input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  font-size: 22px;
}
.search-panel input::placeholder { opacity: 1; color: #acc8dd; }
.search-submit {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--cyan);
}
.search-submit:hover, .search-submit:focus-visible { color: var(--text); }
.search-submit svg { width: 36px; }

.catalog-section {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at top right, #180a27 0%, #090a17 63%, #070915 100%);
  padding: 0 clamp(18px, 2.4vw, 40px);
  scroll-margin-top: 12px;
}
.topics { margin-top: -30px; padding-bottom: 9px; background: none; }
.topics::before {
  content: "";
  position: absolute;
  inset: 30px 0 0;
  z-index: -1;
  background: radial-gradient(ellipse at top right, #180a27, #090a17 70%);
}
.articles { padding-top: 12px; padding-bottom: clamp(24px, 3.2vw, 48px); }
.section-heading {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 64px;
  margin: 0 calc(-1 * clamp(18px, 2.4vw, 40px)) 5px;
  padding: 10px 56px 0;
  font-size: clamp(29px, 3.37vw, 49px);
  font-weight: 900;
  letter-spacing: -.039em;
  line-height: 1.08;
}
.section-heading::before, .section-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 64px;
  pointer-events: none;
}
.section-heading::before {
  background: linear-gradient(90deg, #f735d3, #fd32dc 38%, #df39d4 80%, #ea40db86);
  clip-path: polygon(0 98%, 42px 0, var(--step, 234px) 0, calc(var(--step, 234px) + 29px) 30px, calc(100% - 65px) 30px,
    calc(100% - 65px) 32px, calc(var(--step, 234px) + 28px) 32px, calc(var(--step, 234px) - 1px) 2px, 43px 2px, 0 100%);
}
.section-heading::after {
  width: 67px;
  left: auto;
  top: 28px;
  right: 12px;
  height: 5px;
  transform: skewX(-39deg);
  background: repeating-linear-gradient(90deg, transparent 0 8px, var(--pink) 8px 15px);
  mask-image: linear-gradient(90deg, transparent, #000 62%);
}
.articles .section-heading { --step: 44%; }
.topic-grid, .article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(11px, 1.38vw, 22px);
  padding: 0;
  margin: 0;
  list-style: none;
}
.topic-tile, .article-tile {
  --accent: var(--cyan);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  clip-path: var(--cut);
  background: var(--accent);
  transition: filter .18s ease, background .18s ease;
}
.topic-tile:hover, .article-tile:hover { filter: brightness(1.2); }
.topic-tile:focus-visible, .article-tile:focus-visible { background: white; filter: brightness(1.25); outline: none; }
.topic-tile::before {
  position: absolute;
  inset: 2px;
  z-index: -1;
  content: "";
  clip-path: var(--cut);
  background: linear-gradient(90deg, #040713ef 0%, #04101cd1 54%, #04172584 100%), url("/assets/stories.webp") 50% 40% / 300% auto no-repeat #040a17;
}
.topic-tile {
  gap: clamp(10px, 1.3vw, 21px);
  min-height: clamp(82px, 9.2vw, 142px);
  padding: 12px clamp(13px, 2.1vw, 35px);
}
.topic-tile[aria-current="true"] { background: white; }
.topic-codex { --accent: var(--pink); }
.topic-codex::before {
  background: linear-gradient(90deg, #140619f0 0%, #170621dc 54%, #21062970 100%), url("/assets/stories.webp") 0% 38% / 300% auto no-repeat #140719;
}
.topic-automation::before {
  background-position: 0 0, 50% 27%;
}
.topic-icon {
  flex: 0 0 auto;
  width: clamp(31px, 5.3vw, 74px);
  color: var(--accent);
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent), transparent 55%));
}
.topic-tile span {
  min-width: 0;
  border-left: 1px solid var(--accent);
  padding-left: clamp(10px, 1.2vw, 19px);
  font-size: clamp(18px, 2.4vw, 37px);
  font-weight: 850;
  letter-spacing: -.042em;
  line-height: 1.12;
}
.topic-automation span { font-size: clamp(17px, 2.16vw, 33px); }
.tile-arrow { flex: 0 0 18px; width: 18px; margin-left: auto; color: var(--cyan); }
.topic-codex .tile-arrow { color: #fae4ff; }

.article-tile {
  --cut: polygon(19px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 19px);
  flex-direction: column;
  align-items: stretch;
  padding: 1px;
  text-align: left;
}
.article-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pink), #d256ef 33%, var(--cyan) 65%, var(--pink));
  z-index: -1;
}
.article-tile:focus-visible::before { background: white; }
.article-art {
  display: block;
  aspect-ratio: 2.15 / 1;
  background: url("/assets/stories.webp") var(--position, 0%) 43% / 300% auto no-repeat #0b1324;
}
.article-codex { --position: 50%; }
.article-debug { --position: 100%; }
.article-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-grow: 1;
  min-height: 51px;
  padding: 9px 17px;
  color: var(--text);
  background: linear-gradient(115deg, #111023, #0b0c19 70%);
  font-size: clamp(16px, 1.92vw, 29px);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.16;
}
.article-label svg { flex: 0 0 20px; width: 20px; color: var(--cyan); }
.filter-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 13px;
  padding: 9px 13px;
  border-left: 2px solid var(--cyan);
  background: #0c1a29;
}
.filter-notice p { margin: 0; }
.clear-filters {
  min-height: 38px;
  padding: 4px 11px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: #0a101e;
  white-space: nowrap;
}
.article-dialog {
  width: min(calc(100% - 34px), 450px);
  padding: 26px;
  border: 1px solid var(--cyan);
  background: #090f20;
  color: var(--text);
}
.article-dialog::backdrop { background: #02030bd9; }
.article-dialog h2 { margin: 0; font-size: 26px; line-height: 1.12; }
.article-dialog p { color: var(--muted); }
.article-dialog button, .error-link {
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 7px 17px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: #081b28;
}
.error-page { display: grid; place-items: center; padding: 25px; }
.error-card { width: min(100%, 650px); padding: clamp(20px, 4vw, 48px); border: 1px solid var(--cyan); }
.error-card h1 { margin: 0; font-size: clamp(30px, 4.4vw, 55px); line-height: 1.08; }
.error-card p { color: var(--muted); }
.error-card .error-code { color: var(--pink); margin: 28px 0 6px; font-size: 32px; font-weight: 850; }

@media (max-width: 900px) and (min-width: 681px) {
  .topic-tile { padding: 10px 14px; gap: 7px; }
  .topic-tile span { padding-left: 8px; }
  .topic-icon { width: 36px; }
  .tile-arrow { flex-basis: 12px; }
  .topic-automation span { font-size: clamp(15px, 2.1vw, 21px); }
}

@media (max-width: 680px) {
  :root { --cut: var(--small-cut); }
  .masthead { height: 58px; }
  .masthead-inner { padding: 0 14px; justify-content: space-between; gap: 15px; }
  .wordmark { font-size: clamp(25px, 8vw, 35px); }
  .masthead-trace { height: 58px; }
  .masthead::after {
    content: "";
    position: absolute;
    inset: auto auto 3px 7px;
    width: 46%;
    height: 2px;
    pointer-events: none;
    background: var(--pink);
  }
  .trace-main { stroke-width: 3; }
  .trace-accent, .trace-detail, .masthead-trace circle { display: none; }
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--cyan);
  }
  .menu-toggle span { height: 2px; width: 100%; background: currentColor; }
  .site-nav {
    display: none;
    position: absolute;
    inset: calc(100% - 1px) 0 auto;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    background: #080e1ceF;
    border-bottom: 1px solid var(--cyan);
    padding: 8px 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 43px; }
  .hero { min-height: 0; }
  .hero-picture { height: min(274px, 78vw); }
  .hero-picture img { object-position: right top; }
  .hero::before { background: linear-gradient(180deg, transparent 23%, #03040b26 42%, #060813ea 69%, #070913 100%); }
  .hero-inner { padding: clamp(146px, 45vw, 205px) 14px 19px; }
  .hero h1 {
    font-size: clamp(24px, 8vw, 41px);
    line-height: 1.07;
    letter-spacing: -.055em;
  }
  .hero-subtitle {
    padding-left: 18px;
    margin: 5px 0 14px;
    font-size: clamp(15px, 4.7vw, 23px);
  }
  .hero-subtitle::before { width: 4px; inset-inline-start: 3px; }
  .search-panel {
    --search-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    min-height: 46px;
    width: 100%;
    padding: 1px 6px 1px 12px;
  }
  .search-panel::before { inset: 2px; }
  .search-icon { width: 23px; margin-right: 8px; }
  .search-panel input { min-height: 44px; font-size: 17px; }
  .search-submit { height: 42px; flex-basis: 42px; }
  .search-submit svg { width: 27px; }
  .catalog-section { padding-inline: 12px; }
  .topics { margin-top: 0; padding-bottom: 8px; }
  .topics::before { inset-block-start: 0; }
  .articles { padding-top: 8px; padding-bottom: 26px; }
  .section-heading {
    --step: 37%;
    min-height: 41px;
    font-size: clamp(22px, 6.5vw, 31px);
    margin: 0 -12px 1px;
    padding: 6px 30px 0;
  }
  .section-heading::before {
    height: 35px;
    clip-path: polygon(0 96%, 27px 0, var(--step) 0, calc(var(--step) + 16px) 14px, 96% 14px,
      96% 15px, calc(var(--step) + 15px) 15px, calc(var(--step) - 1px) 1px, 28px 1px, 0 100%);
  }
  .section-heading::after { height: 3px; width: 33px; top: 13px; right: 7px; }
  .articles .section-heading { --step: 81%; }
  .topic-grid, .article-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .topic-tile { min-height: 60px; padding: 9px 14px 9px 23px; gap: 12px; }
  .topic-tile::before { inset: 1px; }
  .topic-icon { width: 39px; }
  .topic-tile span { padding-left: 12px; font-size: clamp(19px, 5.8vw, 26px); }
  .article-tile {
    --cut: var(--small-cut);
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    min-height: 80px;
  }
  .article-art { aspect-ratio: auto; min-height: 80px; }
  .article-label { min-height: 100%; padding: 7px 10px; gap: 6px; font-size: clamp(16px, 4.75vw, 22px); }
  .article-label svg { flex-basis: 14px; width: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topic-tile, .article-tile { transition: none; }
}