nav { font-family: monospace; font-size: 0.85em; padding: 12px 20px; }
nav a { color: inherit; text-decoration: none; }
nav a:hover { text-decoration: underline; }

body { margin: 0; font-family: monospace; background: #f8f8f8; color: #222; }

main { max-width: 700px; margin: 0 auto; padding: 40px 20px 80px; }

h1 { font-size: 1rem; font-weight: normal; margin: 0 0 48px; color: #aaa; }

.section { margin-bottom: 56px; }

.section-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #aaa;
  margin: 0 0 4px;
}

h2 {
  font-size: 0.85rem;
  font-weight: normal;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

/* Shadow levels */
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px 16px;
}
.shadow-card {
  background: #fff;
  padding: 24px 16px;
}
.shadow-level { font-size: 0.7em; color: #aaa; margin-bottom: 4px; }
.shadow-value { font-size: 0.65em; color: #888; overflow-wrap: break-word; margin-top: 12px; }

.shadow-0 { box-shadow: none; border: 1px solid #e0e0e0; }
.shadow-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1); }
.shadow-2 { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.1); }
.shadow-3 { box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12); }
.shadow-4 { box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.15); }

/* Z-index table */
.z-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.z-table th {
  text-align: left;
  font-weight: normal;
  color: #aaa;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid #e0e0e0;
}
.z-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid #e0e0e0;
}
.z-table tr:last-child td { border-bottom: none; }
.z-table td:last-child { color: #888; }