/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Custom Properties ──────────────────────────────────────────── */
:root {
  --white:      #FFFFFF;
  --black:      #000000;
  --gray:       #F5F5F5;
  --border:     1px solid #000000;

  --font-mono:  'SF Mono', ui-monospace, 'Courier New', Courier, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.25rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.5rem;
  --text-3xl:   4rem;

  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-12:   3rem;
}

/* ─── Base Typography ────────────────────────────────────────────── */
body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
h2 { font-size: var(--text-xl); font-weight: 400; }
h3 { font-size: var(--text-lg); font-weight: 700; }
p  { font-size: var(--text-sm); line-height: 1.6; }

/* ─── 3-Section Page Layout (subpages) ──────────────────────────── */
.page-layout {
  height: 100vh;
  display: grid;
  grid-template-rows: 33.333vh 33.333vh 33.333vh;
  overflow: hidden;
}
.section {
  border-bottom: var(--border);
  padding: var(--space-8);
  overflow: hidden;
  position: relative;
}
.section:last-child { border-bottom: none; }
.section-inner {
  max-width: 960px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── Section 1 — Identity Block ────────────────────────────────── */
.tool-name    { font-size: var(--text-3xl); line-height: 1; }
.tool-tagline { font-size: var(--text-sm); margin-top: var(--space-4); }
.tool-author  { font-size: var(--text-xs); margin-top: var(--space-2); opacity: 0.6; }
.back-link    {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  font-size: var(--text-xs);
  border-bottom: var(--border);
  opacity: 0.6;
}
.back-link:hover { opacity: 1; }

/* ─── Section 3 — Technical Text ────────────────────────────────── */
.tech-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 720px;
}
.tech-label {
  font-size: var(--text-xs);
  opacity: 0.6;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── Index Page ─────────────────────────────────────────────────── */
.index-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 33.333vh auto auto;
}
.index-section {
  border-bottom: var(--border);
  padding: var(--space-8);
}
.index-section:last-child { border-bottom: none; }
.index-inner {
  max-width: 960px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
  border: var(--border);
  margin: -1px 0 0 -1px;
  padding: var(--space-8);
  background: var(--white);
  display: block;
  transition: background 0.12s;
}
.card:hover { background: var(--gray); }
.card-number      { font-size: var(--text-xs); opacity: 0.55; }
.card-title       { font-size: var(--text-xl); margin-top: var(--space-3); line-height: 1.1; }
.card-description { font-size: var(--text-sm); margin-top: var(--space-4); line-height: 1.6; opacity: 0.7; }

/* ─── Mobile: desktop-only notice ───────────────────────────────── */
.mobile-wall { display: none; }
@media (max-width: 768px) {
  .mobile-wall {
    display: flex;
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    border: 1px solid #000000;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
    text-align: center;
  }
  .mobile-wall-title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .mobile-wall-body {
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 280px;
    opacity: 0.6;
  }
}

/* ─── Utilities ──────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-8  { gap: var(--space-8); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.bg-gray    { background: var(--gray); }
.border-right { border-right: var(--border); }
.border-left  { border-left: var(--border); }
.border-top   { border-top: var(--border); }
.border-bottom { border-bottom: var(--border); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-xl { font-size: var(--text-xl); }
.overflow-hidden { overflow: hidden; }