body { display: flex; flex-direction: column; min-height: 100vh; }
    main { flex: 1; padding-top: calc(var(--nav-h) + 56px); padding-bottom: 96px; }

    /* ── ページヘッダー ── */
    .page-header { margin-bottom: 64px; }
    .page-header-inner { display: flex; flex-direction: column; gap: 20px; }
    .page-eyebrow { display: flex; align-items: center; gap: 14px; }
    .page-eyebrow-line { width: 32px; height: 1px; background: var(--accent-blue); opacity: 0.6; }
    .page-eyebrow-text { font-family: var(--font-mono); font-size: 0.60rem; color: var(--accent-teal); letter-spacing: 0.28em; text-transform: uppercase; }
    .page-desc { font-size: 0.88rem; color: var(--text-1); line-height: 1.85; max-width: 560px; }

    /* ── カテゴリセクション ── */
    .cat-section { margin-bottom: 72px; }

    .cat-section-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 28px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }

    .cat-section-icon {
      width: 38px;
      height: 38px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .cat-section-icon svg { width: 18px; height: 18px; }

    .cat-section-label {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--accent-teal);
    }

    .cat-section-title {
      font-family: var(--font-display);
      font-size: 1.10rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-0);
    }

    .cat-section-count {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      color: var(--text-2);
      letter-spacing: 0.12em;
      margin-left: auto;
    }

    /* ── テックグリッド ── */
    .tech-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    /* ── テックカード ── */
    .tech-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      position: relative;
      overflow: hidden;
      cursor: default;
      transition:
        border-color var(--t),
        background var(--t),
        transform var(--t) var(--ease),
        box-shadow var(--t);
    }

    /* カード上部の色ライン */
    .tech-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      opacity: 0;
      transition: opacity var(--t);
      border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .tech-card:hover {
      border-color: var(--border-m);
      background: var(--bg-card-hover);
      transform: translateY(-5px);
      box-shadow:
        0 14px 40px rgba(0,0,0,0.32),
        0 0 0 1px rgba(59,158,255,0.06);
    }

    .tech-card:hover::before { opacity: 1; }

    /* カテゴリ別アクセントカラー */
    .tech-card[data-cat="frontend"]    { --card-accent: #3b9eff; }
    .tech-card[data-cat="runtime"]     { --card-accent: #00e5b8; }
    .tech-card[data-cat="backend"]     { --card-accent: #8b72ff; }
    .tech-card[data-cat="hosting"]     { --card-accent: #ffb340; }
    .tech-card[data-cat="development"] { --card-accent: #ff6b6b; }
    .tech-card[data-cat="environment"] { --card-accent: #64d9fb; }

    .tech-card::before { background: var(--card-accent, var(--accent-blue)); }

    .tech-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.32), 0 0 20px rgba(var(--card-accent, 59,158,255), 0.06); }

    /* アイコンエリア */
    .tech-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color var(--t), box-shadow var(--t);
      background: rgba(255,255,255,0.02);
    }

    .tech-card:hover .tech-icon {
      border-color: var(--border-m);
      box-shadow: 0 0 16px rgba(59,158,255,0.12);
    }

    .tech-icon svg { width: 28px; height: 28px; }

    /* テキスト */
    .tech-info { flex: 1; width: 100%; }

    .tech-name {
      font-family: var(--font-display);
      font-size: 0.98rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text-0);
      margin-bottom: 4px;
    }

    .tech-desc {
      font-size: 0.72rem;
      color: var(--text-2);
      line-height: 1.65;
    }

    /* ステータスバッジ */
    .tech-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 99px;
      border: 1px solid;
      margin-top: auto;
      align-self: flex-start;
    }

    .tech-badge-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: currentColor;
    }

    .tech-badge[data-level="primary"] {
      color: var(--accent-teal);
      border-color: rgba(0,229,184,0.28);
      background: rgba(0,229,184,0.06);
    }

    .tech-badge[data-level="secondary"] {
      color: var(--accent-blue);
      border-color: rgba(59,158,255,0.22);
      background: rgba(59,158,255,0.05);
    }

    .tech-badge[data-level="learning"] {
      color: var(--text-2);
      border-color: var(--border);
      background: transparent;
    }

    /* ── スペックバー（全体統計） ── */
    .spec-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      margin-bottom: 64px;
    }

    .spec-item {
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 28px 24px;
      text-align: center;
      transition: background var(--t);
    }

    .spec-item:hover { background: var(--bg-card-hover); }

    .spec-value {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--text-0) 0%, var(--accent-blue) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 8px;
    }

    .spec-label {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      color: var(--text-2);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    /* ── ターミナル風フッターブロック ── */
    .terminal-block {
      background: rgba(2,8,20,0.92);
      border: 1px solid var(--border-m);
      border-radius: var(--r-lg);
      padding: 28px 32px;
      margin-top: 56px;
      font-family: var(--font-mono);
      position: relative;
      overflow: hidden;
    }

    .terminal-block::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 32px;
      background: rgba(8,25,55,0.9);
      border-bottom: 1px solid var(--border);
    }

    .terminal-dots {
      position: absolute;
      top: 10px; left: 16px;
      display: flex; gap: 7px;
    }

    .terminal-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
    }

    .terminal-dot:nth-child(1){ background: rgba(255,80,60,0.7); }
    .terminal-dot:nth-child(2){ background: rgba(255,180,60,0.7); }
    .terminal-dot:nth-child(3){ background: rgba(0,229,184,0.7); }

    .terminal-title {
      position: absolute;
      top: 8px; left: 50%;
      transform: translateX(-50%);
      font-size: 0.60rem;
      color: var(--text-2);
      letter-spacing: 0.12em;
    }

    .terminal-body { margin-top: 24px; }

    .terminal-line {
      font-size: 0.75rem;
      line-height: 1.9;
      color: var(--text-1);
    }

    .terminal-prompt { color: var(--accent-teal); margin-right: 8px; }
    .terminal-cmd    { color: var(--text-0); }
    .terminal-out    { color: var(--text-2); padding-left: 20px; }
    .terminal-hl     { color: var(--accent-blue); }
    .terminal-hl2    { color: var(--accent-purple); }

    .terminal-cursor {
      display: inline-block;
      width: 7px; height: 13px;
      background: var(--accent-teal);
      vertical-align: text-bottom;
      margin-left: 2px;
      animation: termBlink 1s step-end infinite;
    }

    @keyframes termBlink { 0%,100%{ opacity: 1; } 50%{ opacity: 0; } }

    /* ── 戻るリンク ── */
    .back-to-lab {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 0.62rem;
      color: var(--text-2); letter-spacing: 0.14em;
      text-transform: uppercase; text-decoration: none;
      transition: color var(--t); margin-top: 56px;
    }

    .back-to-lab:hover { color: var(--accent-blue); }
    .back-to-lab svg { width: 14px; height: 14px; transform: rotate(180deg); }

    /* ── レスポンシブ ── */
    /* タブレット (768px以下) */
    @media (max-width: 768px) {
      main { padding-top: calc(var(--nav-h) + 36px); }

      .spec-bar { grid-template-columns: 1fr; }
      .spec-item { padding: 20px 24px; }
      .spec-value { font-size: 1.8rem; }

      .tech-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
      .tech-card { padding: 18px 16px; gap: 12px; }
      .tech-icon { width: 44px; height: 44px; }
      .tech-icon svg { width: 22px; height: 22px; }
      .tech-name { font-size: 0.88rem; }

      .terminal-block { padding: 28px 20px 20px; }
      .terminal-line { font-size: 0.68rem; }
    }

    /* スマートフォン (480px以下) */
    @media (max-width: 480px) {
      .tech-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .tech-card { padding: 16px 14px; gap: 10px; }
      .tech-icon { width: 40px; height: 40px; }
      .tech-icon svg { width: 20px; height: 20px; }
      .tech-name { font-size: 0.82rem; }
      .tech-desc { font-size: 0.68rem; }
      .tech-badge { font-size: 0.48rem; padding: 2px 8px; }

      .cat-section-header { gap: 10px; }
      .cat-section-title { font-size: 0.95rem; }
      .cat-section-count { display: none; }

      .terminal-block { display: none; }
    }

    /* 極小 (360px以下) */
    @media (max-width: 360px) {
      .tech-grid { grid-template-columns: 1fr; }
    }