/* ==========================================================================
   CORE DESIGN SYSTEM
   ========================================================================== */

:root {
  --bg: #090f12;
  --header-bg: #0b1316;

  --panel: #101a1e;
  --panel-hover: #152126;

  --line: #26363b;
  --line-soft: #35484c;

  --text: #d9e3e0;
  --muted: #91a29f;
  --muted-light: #b5c2bf;

  --green: #8fb968;
  --green-soft: #b8d28e;

  --cyan: #69c4c7;
  --cyan-soft: #8bdadd;

  --amber: #c9aa62;

  --white: #eef4f1;

  /* Very subtle glow layers */
  --glow-green: rgba(143, 185, 104, 0.16);
  --glow-cyan: rgba(105, 196, 199, 0.12);

  --content-width: 1120px;

  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;
}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

html {
  scroll-behavior: auto;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(67, 119, 119, 0.07),
      transparent 38rem
    ),
    var(--bg);

  color: var(--text);

  font-family: var(--font-body);
  line-height: 1.62;
}

a {
  color: var(--cyan);
}

a:hover {
  color: var(--green-soft);
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ==========================================================================
   SHARED LAYOUT
   ========================================================================== */

.wrap {
  width: min(var(--content-width), calc(100% - 2rem));
  margin-inline: auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 18% 75%,
      rgba(143, 185, 104, 0.07),
      transparent 24rem
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(105, 196, 199, 0.06),
      transparent 28rem
    ),
    var(--header-bg);

  border-bottom: 1px solid var(--line);
}

/*
  Very subtle technical grid.
  It should be barely visible — just enough to break the flat
  dark background and give the header a technical / hacker feel.
*/

.site-header::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(rgba(105, 196, 199, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 196, 199, 0.06) 1px, transparent 1px);

  background-size: 32px 32px;

  mask-image: linear-gradient(
    to bottom,
    black,
    transparent 85%
  );
}

.header-grid {
  position: relative;
  z-index: 1;

  min-height: 285px;

  display: grid;
  grid-template-columns: 1.7fr 0.8fr;

  gap: 3rem;

  align-items: end;

  padding: 4rem 0 3rem;
}

.eyebrow,
.section-code,
.principle span,
.category-label,
.tool-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;

  letter-spacing: 0.12em;

  color: var(--green-soft);
}

.eyebrow {
  margin: 0;

  text-shadow:
    0 0 14px var(--glow-green);
}

.site-principle {
  margin: 0.7rem 0 0;

  color: var(--white);

  font-size: clamp(2.3rem, 5vw, 4.3rem);
  font-weight: 600;
  line-height: 1.02;

  letter-spacing: -0.04em;

  text-shadow:
    0 0 28px rgba(105, 196, 199, 0.07);
}


/*
  Header note intentionally uses a different visual treatment from
  the operating principle. It represents the practical selection
  behind the curator's philosophy.
*/

.header-note {
  margin: 0;

  padding-left: 1rem;

  border-left: 3px solid var(--green);

  color: var(--green-soft);

  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 0 12px var(--glow-green);
}


/* ==========================================================================
   SECTION NAVIGATION
   ========================================================================== */

.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;

  background: rgba(9, 15, 18, 0.94);

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(8px);
}

.nav-inner {
  display: flex;

  gap: 1.5rem;

  overflow-x: auto;
}

.nav-inner a {
  position: relative;

  flex: 0 0 auto;

  padding: 0.8rem 0;

  color: var(--muted);

  text-decoration: none;

  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.nav-inner a:hover,
.nav-inner a.active {
  color: var(--green-soft);

  text-shadow:
    0 0 10px var(--glow-green);
}

.nav-inner a.active {
  border-bottom: 2px solid var(--green);

  box-shadow:
    0 4px 12px -8px var(--green);
}


/* ==========================================================================
   CATEGORY SECTIONS
   ========================================================================== */

.category {
  min-height: 55vh;

  padding: 3rem 0 1rem;
}

.category-head {
  display: flex;

  align-items: baseline;
  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;

  border-bottom: 1px solid var(--line);
}

.category-head h2 {
  margin: 0;

  color: var(--white);

  font-size: 1.8rem;

  text-shadow:
    0 0 18px rgba(105, 196, 199, 0.045);
}

.category-label {
  color: var(--cyan);

  text-shadow:
    0 0 10px var(--glow-cyan);
}


/* ==========================================================================
   TOOL GRID
   ========================================================================== */

.tools {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;
}

.tool {
  position: relative;

  padding: 1.35rem 1.4rem 1.45rem;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 55%
    ),
    var(--panel);

  border: 1px solid var(--line);
  border-left: 3px solid var(--line-soft);

  border-radius: 3px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12);

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.tool:hover {
  border-left-color: var(--green);

  background:
    linear-gradient(
      135deg,
      rgba(143, 185, 104, 0.035),
      transparent 60%
    ),
    var(--panel-hover);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    -4px 0 18px -12px var(--green);

  transform: translateY(-1px);
}

.tool h3 {
  margin: 0 0 0.55rem;

  color: var(--white);

  font-size: 1.15rem;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.tool:hover h3 {
  color: var(--green-soft);

  text-shadow:
    0 0 12px var(--glow-green);
}

.tool p {
  margin: 0 0 0.75rem;

  color: var(--muted-light);

  font-size: 0.96rem;
}

.tool ul {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;

  color: #aebbb8;

  font-size: 0.9rem;
}

.tool li {
  margin: 0.25rem 0;
}

.tool code {
  padding: 0.08rem 0.3rem;

  background: #0a1215;

  color: #b9d4c1;

  border: 1px solid #1d2b2f;

  font-family: var(--font-mono);
  font-size: 0.85em;

  box-shadow:
    0 0 8px rgba(105, 196, 199, 0.04);
}

.tool-meta {
  display: block;

  margin-top: 0.85rem;

  color: var(--amber);

  font-size: 0.68rem;

  text-shadow:
    0 0 8px rgba(201, 170, 98, 0.08);
}


/* ==========================================================================
   SPECIAL CONTENT
   ========================================================================== */

.mermaid-note {
  margin-top: 0.8rem;

  padding: 0.65rem 0.8rem;

  border: 1px dashed #43524d;

  background: #0d1517;

  color: #aebbb8;

  font-size: 0.88rem;

  box-shadow:
    inset 0 0 18px rgba(105, 196, 199, 0.025);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  margin-top: 5rem;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.site-footer .wrap {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.4rem 0;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

  .header-grid {
    grid-template-columns: 1fr;

    gap: 1.5rem;

    min-height: auto;

    padding: 3rem 0 2.5rem;
  }

  .header-note {
    max-width: max-content;
  }

  .tools {
    grid-template-columns: 1fr;
  }

  .category {
    padding-top: 3rem;
  }

  .category-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .site-footer .wrap {
    flex-direction: column;
    gap: 0.3rem;
  }

}