@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --bg: #f5efe1;
  --bg-grid: rgba(78, 52, 46, 0.08);
  --paper: rgba(255, 252, 245, 0.9);
  --panel: #fffdf7;
  --ink: #241815;
  --muted: #6d5b55;
  --accent: #df5b39;
  --accent-deep: #b53a24;
  --accent-soft: #ffd6b5;
  --teal: #195b61;
  --border-color: #2a1d19;
  --title-bar-bg: linear-gradient(90deg, #241815 0%, #4f332a 100%);
  --title-text: #fff8ef;
  --pixel-font-title: 'Press Start 2P', cursive;
  --pixel-font-body: 'Space Grotesk', sans-serif;
  --shadow: 12px 12px 0 rgba(42, 29, 25, 0.12);
}

body{
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.nav-shell {
  width: min(1200px, 100%);
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
}

.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--panel);
  border: 4px solid var(--border-color);
  box-shadow: var(--shadow);
  clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel-font-title);
  letter-spacing: 1px;
}

.nav-brand .brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #195b61 0%, #13474d 100%);
  color: #fff9f1;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.16), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
}

.nav-brand .brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.nav-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #fff3e5 0%, #ffd2ae 100%);
}

.nav-toggle-line {
  width: 22px;
  height: 3px;
  background: var(--ink);
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.nav-bar.is-open .nav-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-bar.is-open .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-bar.is-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-link {
  padding: 9px 12px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
}

.nav-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #fff3e5 0%, #ffd2ae 100%);
}

.nav-link.active {
  background: linear-gradient(180deg, #df7c55 0%, #b65036 100%);
  color: #fffaf1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(180deg, rgba(181, 220, 255, 0.55) 0%, rgba(245, 239, 225, 0) 36%),
    radial-gradient(circle at top left, rgba(255, 214, 181, 0.9), transparent 35%),
    radial-gradient(circle at bottom right, rgba(25, 91, 97, 0.18), transparent 30%);
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  font-family: var(--pixel-font-body);
  color: var(--ink);
  line-height: 1.55;
  padding: 40px 20px 56px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.page-stack {
  width: min(1200px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.blog-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
}

.post-list-single {
  display: grid;
  gap: 14px;
  margin: 16px auto 0;
  max-width: 1100px;
}

.post-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 1100px;
}

.page-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 52px;
  padding: 10px 14px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  color: var(--ink);
  font-family: var(--pixel-font-title);
  font-size: 10px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, opacity 0.14s ease;
}

.page-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #fff1e1 0%, #ffd3b0 100%);
}

.page-btn.active {
  background: linear-gradient(180deg, #df7c55 0%, #b65036 100%);
  color: #fffaf1;
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.post-row {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  padding: 18px 62px 18px 18px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #f8e6d9 0%, #efe4d8 100%);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.08), inset 4px 4px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.post-row:hover {
  background: linear-gradient(180deg, #f8e6d9 0%, #efe4d8 100%);
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--border-color);
}

.row-title {
  font-family: var(--pixel-font-title);
  font-size: 15px;
  margin-bottom: 8px;
}

.row-view-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #ffd8bd 100%);
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.24);
  color: var(--ink);
  font-size: 13px;
}

.row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 20;
}

.modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.modal-card {
  position: relative;
  width: min(1280px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  z-index: 1;
}

.modal-card .window-content {
  min-height: 0;
  overflow-y: auto;
}

.modal-close-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #ffd8bd 100%);
  color: var(--ink);
  font-family: var(--pixel-font-title);
  font-size: 11px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.modal-close-btn i {
  font-size: 14px;
}

.modal-close-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #ffe9d4 0%, #ffc9a4 100%);
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-list {
  display: grid;
  gap: 12px;
}

.post-card {
  padding: 14px;
  border: 3px solid rgba(42, 29, 25, 0.2);
  background:
    linear-gradient(180deg, rgba(25, 91, 97, 0.12), rgba(255, 255, 255, 0.86)),
    linear-gradient(90deg, rgba(42, 29, 25, 0.04) 50%, transparent 50%);
  background-size: auto, 14px 14px;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.08), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.post-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--border-color);
}

.post-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffe7d3 0%, #fff9f1 100%);
}

.post-title {
  font-family: var(--pixel-font-title);
  font-size: 13px;
  margin-bottom: 6px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.pill {
  padding: 4px 8px;
  border: 2px solid var(--border-color);
  background: #fff9f1;
  font-family: var(--pixel-font-title);
  font-size: 9px;
}

.post-viewer {
  min-height: 440px;
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 44%),
    linear-gradient(135deg, #fffaf3 0%, #f7e7d4 55%, #f0ddcb 100%);
}

.markdown-body {
  display: grid;
  gap: 16px;
  color: var(--ink);
  background: #fffdf8;
  border: 3px solid rgba(42, 29, 25, 0.2);
  padding: 18px;
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.08), inset 4px 4px 0 rgba(255, 255, 255, 0.2);
  line-height: 1.65;
  max-width: 980px;
  margin: 0 auto;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  font-family: var(--pixel-font-title);
  letter-spacing: 0.5px;
}

.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 18px; margin-top: 4px; }
.markdown-body h3 { font-size: 15px; }

.markdown-body p {
  font-size: 17px;
  color: var(--ink);
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 22px;
  display: grid;
  gap: 6px;
  list-style-position: outside;
}

.markdown-body li {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

.markdown-body a.markdown-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(25, 91, 97, 0.55);
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

.markdown-body a.markdown-link:hover {
  color: var(--accent-deep);
  text-decoration-color: rgba(181, 58, 36, 0.6);
}

.markdown-body a.markdown-link:focus-visible {
  outline: 2px solid rgba(223, 91, 57, 0.45);
  outline-offset: 2px;
}

.markdown-body a.markdown-url-link {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(25, 91, 97, 0.12);
  border: 1px solid rgba(25, 91, 97, 0.28);
  font-size: 0.95em;
}

.markdown-body a.markdown-url-link.markdown-link-external::after {
  content: " ↗";
  font-size: 0.9em;
}

.markdown-body blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  color: var(--muted);
  background: rgba(223, 91, 57, 0.06);
}

.markdown-body hr {
  border: none;
  border-top: 3px dashed rgba(42, 29, 25, 0.3);
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
  border: 2px solid rgba(42, 29, 25, 0.2);
  padding: 8px 10px;
  background: #fff;
}

.markdown-body code {
  background: #fff4e6;
  border: 2px solid var(--border-color);
  padding: 2px 5px;
  font-family: "Space Grotesk", monospace;
  font-size: 13px;
}

.markdown-body pre {
  position: relative;
  background: #0f1b1d;
  color: #f5efe1;
  padding: 64px 14px 14px;
  border: 3px solid var(--border-color);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.18), inset 4px 4px 0 rgba(255, 255, 255, 0.2);
  overflow-x: auto;
}

.markdown-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

.code-block-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--title-bar-bg);
  border-bottom: 3px solid var(--border-color);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.06);
}

.code-block-label {
  color: var(--title-text);
  font-family: var(--pixel-font-title);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.code-copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid var(--border-color);
  background: linear-gradient(180deg, #fff7ee 0%, #ffd8bd 100%);
  color: var(--ink);
  font-family: var(--pixel-font-title);
  font-size: 10px;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  flex-shrink: 0;
}

.code-copy-btn i {
  font-size: 12px;
}

.code-copy-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #ffe9d4 0%, #ffc9a4 100%);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fff9f2 0%, #d6f0f2 100%);
  font-weight: 700;
}
.window-content > .status-chip {
  display: inline-flex;
  margin: 0 auto 12px;
}

.status-chip::before {
  content: "●";
  color: var(--accent);
}

.sky-layer {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.85) 0 18px, transparent 18px),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.85) 0 14px, transparent 14px),
    radial-gradient(circle at 72% 14%, rgba(255, 255, 255, 0.75) 0 16px, transparent 16px),
    radial-gradient(circle at 76% 16%, rgba(255, 255, 255, 0.75) 0 12px, transparent 12px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3 {
  font-family: var(--pixel-font-title);
  text-transform: uppercase;
  letter-spacing: 1px;
}

a {
  color: inherit;
  text-decoration: none;
}

.window {
  background: var(--panel);
  border: 4px solid var(--border-color);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
}

.window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 18%),
    linear-gradient(90deg, rgba(42, 29, 25, 0.03) 50%, transparent 50%);
  background-size: auto, 16px 16px;
  pointer-events: none;
}

.window-header {
  background: var(--title-bar-bg);
  color: var(--title-text);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4px solid var(--border-color);
  position: relative;
  z-index: 1;
}

.window-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    linear-gradient(90deg, rgba(42, 29, 25, 0.18) 0 12px, rgba(42, 29, 25, 0.08) 12px 24px);
  background-size: auto, 24px 18px;
}

.window-title {
  font-family: var(--pixel-font-title);
  font-size: 12px;
}

.window-controls {
  display: flex;
  gap: 6px;
}

.control {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-radius: 0;
  cursor: pointer;
}

.control.red { background: #ff5f56; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #27c93f; }

.window-content {
  position: relative;
  z-index: 1;
  padding: 22px;
}

.container {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.blogs-page .container {
  display: block;
  width: 100%;
}

.blogs-page .window {
  width: 100%;
  margin: 0 auto;
}

.blogs-page .dino-parade-shell {
  width: min(1200px, 100%);
  margin: 32px auto 0;
}

.dino-parade-shell {
  width: 100%;
  margin: 32px 0 0;
  position: relative;
  z-index: 1;
}

.container > .dino-parade-shell {
  grid-column: 1 / -1;
}

.dino-parade {
  width: 100%;
}

.dino-parade .window-content {
  display: grid;
  gap: 16px;
}

.dino-parade-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.dino-parade-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.parade-crew-link,
.parade-game-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 3px solid var(--border-color);
  color: #fffaf1;
  font-family: var(--pixel-font-title);
  font-size: 10px;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.parade-crew-link {
  background: linear-gradient(180deg, #df7c55 0%, #b65036 100%);
}

.parade-game-link {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(180deg, #2b7f89 0%, #195b61 100%);
}

.parade-crew-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #ee8a63 0%, #c55438 100%);
}

.parade-game-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #36909b 0%, #1b6670 100%);
}

.dino-game-modal .modal-backdrop {
  background:
    radial-gradient(circle at top, rgba(255, 209, 159, 0.22), transparent 34%),
    rgba(15, 10, 8, 0.62);
  backdrop-filter: blur(2px);
}

.dino-game-modal .modal-card.dino-game-card {
  width: min(980px, calc(100vw - 32px));
  height: min(740px, calc(100vh - 24px));
  margin: 0;
}

.dino-game-card .window-content {
  overflow: hidden;
}

.dino-game-content {
  display: grid;
  gap: 10px;
  height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(135deg, #fffaf3 0%, #f7e7d4 55%, #f0ddcb 100%);
}

.dino-game-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dino-game-rule {
  padding: 8px 10px;
  border: 3px solid var(--border-color);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.1), transparent 40%),
    linear-gradient(180deg, #fffdf8 0%, #f4e8da 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.08), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
}

.dino-game-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.dino-game-start-btn,
.dino-game-reset-btn {
  min-width: 118px;
  min-height: 42px;
}

.dino-game-reset-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  color: var(--ink);
  font-family: var(--pixel-font-title);
  font-size: 10px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.dino-game-reset-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: linear-gradient(180deg, #fff1e1 0%, #ffd3b0 100%);
}

.dino-game-start-btn:disabled {
  cursor: not-allowed;
  opacity: 0.74;
  transform: none;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
}

.dino-game-start-btn:disabled:hover {
  transform: none;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #2b7f89 0%, #195b61 100%);
}

.dino-game-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dino-hud-chip {
  padding: 8px 10px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fff8ef 0%, #f2dfce 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.1), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  display: grid;
  gap: 4px;
}

.dino-hud-chip span {
  font-family: var(--pixel-font-title);
  font-size: 8px;
  color: var(--muted);
}

.dino-hud-chip strong {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.dino-game-status {
  padding: 8px 10px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f4e8da 100%);
  font-weight: 700;
  font-size: 14px;
  min-height: 42px;
  display: flex;
  align-items: center;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.08), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
}

.dino-game-status.is-win {
  color: #0f5f35;
  background: linear-gradient(180deg, #e8fff2 0%, #d2f6e2 100%);
}

.dino-game-status.is-lose {
  color: #7a1f19;
  background: linear-gradient(180deg, #ffefe9 0%, #ffd8cc 100%);
}

.dino-game-board-shell {
  position: relative;
  overflow: hidden;
  padding: 10px;
  min-height: 0;
  border: 3px solid var(--border-color);
  background:
    radial-gradient(circle at 18% 22%, rgba(174, 219, 153, 0.28) 0 12%, transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(133, 194, 154, 0.2) 0 10%, transparent 30%),
    linear-gradient(180deg, #395c41 0%, #2f4f38 36%, #556742 64%, #5e503a 100%);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.1), inset 4px 4px 0 rgba(255, 255, 255, 0.22);
}

.dino-game-board-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(22, 45, 31, 0.34) 0 10px,
      rgba(22, 45, 31, 0.1) 10px 20px
    ),
    linear-gradient(180deg, rgba(11, 30, 20, 0.44) 0%, transparent 46%);
}

.dino-game-board-shell::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -6%;
  height: 38%;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 24%, rgba(90, 75, 61, 0.76) 0 14px, transparent 14px),
    radial-gradient(circle at 24% 42%, rgba(76, 63, 51, 0.74) 0 18px, transparent 18px),
    radial-gradient(circle at 41% 30%, rgba(98, 82, 67, 0.7) 0 16px, transparent 16px),
    radial-gradient(circle at 58% 46%, rgba(75, 60, 49, 0.72) 0 20px, transparent 20px),
    radial-gradient(circle at 74% 26%, rgba(92, 77, 63, 0.74) 0 16px, transparent 16px),
    radial-gradient(circle at 90% 44%, rgba(78, 64, 52, 0.74) 0 19px, transparent 19px);
}

.dino-game-board {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dino-hole {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  min-height: 62px;
  border: 3px solid var(--border-color);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16) 0 14%, transparent 36%),
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.09) 0 12%, transparent 34%),
    radial-gradient(circle at 32% 70%, rgba(29, 22, 17, 0.3) 0 14%, transparent 32%),
    radial-gradient(circle at 70% 76%, rgba(37, 27, 21, 0.24) 0 16%, transparent 34%),
    linear-gradient(160deg, #8b7a6d 0%, #75675b 44%, #625349 72%, #53463d 100%);
  box-shadow: inset -4px -4px 0 rgba(24, 15, 12, 0.24), inset 3px 3px 0 rgba(255, 244, 231, 0.12);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.dino-hole::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 8%;
  height: 58%;
  border: 3px solid #2d221d;
  border-bottom: 0;
  border-radius: 999px 999px 0 0 / 86% 86% 0 0;
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.16) 0 11%, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(111, 90, 77, 0.24) 45%, rgba(70, 56, 48, 0.36) 100%);
  box-shadow: inset -3px -2px 0 rgba(34, 22, 18, 0.2), inset 2px 2px 0 rgba(255, 240, 226, 0.12);
  z-index: 1;
  pointer-events: none;
}

.dino-hole::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  height: 18%;
  border: 2px solid #2c211b;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      110deg,
      rgba(92, 75, 63, 0.95) 0 9px,
      rgba(77, 63, 53, 0.95) 9px 18px
    );
  box-shadow: inset -2px -2px 0 rgba(35, 24, 19, 0.24), inset 2px 1px 0 rgba(255, 244, 232, 0.16);
  z-index: 4;
  pointer-events: none;
}

.dino-hole:hover {
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--border-color), inset -4px -4px 0 rgba(24, 15, 12, 0.24), inset 3px 3px 0 rgba(255, 244, 231, 0.12);
}

.dino-hole:active {
  transform: translate(0, 0);
}

.dino-hole-mouth {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10%;
  height: 36%;
  border: 3px solid #201713;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(22, 15, 12, 0.94) 0%, rgba(14, 8, 6, 1) 100%);
  box-shadow: inset -4px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 2;
}

.dino-pop {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 64%;
  max-width: 64px;
  transform: translate(-50%, 90%) scale(0.88);
  opacity: 0;
  transition: transform 0.17s ease, opacity 0.17s ease, filter 0.17s ease;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 0 rgba(25, 17, 13, 0.3));
  z-index: 3;
}

.dino-hole.is-up .dino-pop {
  transform: translate(-50%, -7%) scale(1);
  opacity: 1;
}

.dino-hole.is-hit {
  animation: dino-hole-shake 0.2s ease;
}

.dino-hole.is-hit .dino-pop {
  animation: dino-pop-hit 0.2s ease;
}

@keyframes dino-pop-hit {
  0% {
    transform: translate(-50%, -6%) scale(1);
  }
  50% {
    transform: translate(-50%, -12%) scale(1.12);
  }
  100% {
    transform: translate(-50%, 68%) scale(0.82);
    opacity: 0;
  }
}

@keyframes dino-hole-shake {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, 1px);
  }
  75% {
    transform: translate(2px, -1px);
  }
}

.dino-page .container {
  display: block;
  width: 100%;
}

.dino-page .window {
  width: 100%;
  margin: 0 auto 28px;
}

.dino-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 320px;
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 42%),
    linear-gradient(135deg, #fffaf3 0%, #f7e7d4 55%, #f0ddcb 100%);
}

.dino-overview-copy {
  min-width: 0;
}

.dino-overview-copy h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}

.dino-overview-copy .hero-summary {
  max-width: none;
}

.dino-overview-copy .project-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dino-lineup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  border: 3px solid var(--border-color);
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.08), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #f4e8da 100%);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.1), inset 4px 4px 0 rgba(255, 255, 255, 0.22);
}

.dino-lineup img {
  width: 74px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(42, 29, 25, 0.12));
}

.dino-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.dino-card,
.dino-protocol-item {
  padding: 18px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fff7ee 0%, #efdccc 100%);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.08), inset 4px 4px 0 rgba(255, 255, 255, 0.24);
}

.dino-card {
  display: grid;
  gap: 14px;
}

.dino-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dino-card-figure {
  width: 88px;
  min-width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #d6f0f2 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
}

.dino-card-figure img {
  width: 72px;
  height: auto;
  object-fit: contain;
}

.dino-card-name,
.dino-protocol-item h3 {
  font-family: var(--pixel-font-title);
  font-size: 12px;
  line-height: 1.5;
}

.dino-card-role {
  color: var(--accent-deep);
  font-weight: 700;
  margin-top: 6px;
}

.dino-card p,
.dino-protocol-item p {
  font-size: 15px;
  color: var(--ink);
}

.dino-protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dino-parade-track {
  --dino-size: 76px;
  --dino-start: -120px;
  --dino-gap: 86px;
  --dino-ground-clearance: 34px;
  --dino-road-bottom: 24px;
  --dino-road-height: 30px;
  --dino-road-border: 4px;
  --dino-traffic-light-base-height: 8px;
  --dino-traffic-light-overlap: 6px;
  --parade-car-width: 112px;
  --parade-car-height: 46px;
  position: relative;
  height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(25, 91, 97, 0.1), transparent 28%),
    linear-gradient(180deg, #fff8ef 0%, #efe0cf 100%);
}

.dino-parade-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.45) 0 18px, transparent 18px),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.35) 0 12px, transparent 12px),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.3) 0 14px, transparent 14px);
  pointer-events: none;
  opacity: 0.55;
}

.dino-camera,
.dino-prop {
  position: absolute;
  pointer-events: none;
}

.parade-car {
  position: absolute;
  left: -200px;
  bottom: calc(var(--dino-road-bottom) + var(--dino-road-border) + 2px);
  width: var(--parade-car-width);
  height: var(--parade-car-height);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: left, transform;
}

.dino-parade-track.is-scripted .parade-car {
  opacity: 1;
}

.parade-car-body,
.parade-car-roof,
.parade-car-window,
.parade-car-light,
.parade-car-wheel {
  position: absolute;
}

.parade-car-body {
  inset: auto 0 8px 0;
  height: 24px;
  border: 3px solid var(--border-color);
  border-radius: 8px 12px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(180deg, #df7c55 0%, #b65036 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.16), inset 3px 3px 0 rgba(255, 255, 255, 0.16);
}

.parade-car-roof {
  left: 22px;
  bottom: 25px;
  width: 48px;
  height: 18px;
  border: 3px solid var(--border-color);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f7e7d4 0%, #e4c6aa 100%);
  transform: skewX(-18deg);
  transform-origin: bottom left;
}

.parade-car-window {
  left: 34px;
  bottom: 28px;
  width: 28px;
  height: 11px;
  border: 2px solid var(--border-color);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #d6f0f2 0%, #9fc8cc 100%);
  transform: skewX(-18deg);
  transform-origin: bottom left;
}

.parade-car-light {
  right: 8px;
  bottom: 18px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.16);
  transform-origin: center;
  transition: opacity 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.parade-car.is-honking .parade-car-light {
  animation: car-honk-light 0.34s ease-in-out 1;
}

@keyframes car-honk-light {
  0% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.16);
  }
  35% {
    opacity: 0.28;
    filter: brightness(0.65);
    box-shadow: 0 0 0 0 rgba(255, 209, 102, 0);
  }
  68% {
    opacity: 1;
    filter: brightness(1.1);
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.22);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.16);
  }
}

.parade-car-wheel {
  bottom: 0;
  width: 19px;
  height: 19px;
  border: 3px solid var(--border-color);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #9aa1a8 0 4px, #2a1d19 4px 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.parade-car-wheel-back {
  left: 16px;
}

.parade-car-wheel-front {
  right: 14px;
}

.dino-camera {
  top: 14px;
  right: 22px;
  width: 118px;
  height: 94px;
  z-index: 1;
}

.dino-camera-arm,
.dino-camera-body,
.dino-camera-lens,
.dino-camera-light,
.dino-camera-beam {
  position: absolute;
}

.dino-camera-arm {
  top: 12px;
  left: 54px;
  width: 72px;
  height: 12px;
  background: linear-gradient(180deg, #d8d2c9 0%, #a69b90 100%);
  border: 3px solid var(--border-color);
  transform: rotate(-26deg);
  transform-origin: left center;
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.2);
}

.dino-camera-body {
  top: 26px;
  left: 34px;
  width: 54px;
  height: 30px;
  background: linear-gradient(180deg, #d6f0f2 0%, #a8d1d5 100%);
  border: 3px solid var(--border-color);
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.dino-camera-lens {
  top: 30px;
  left: 10px;
  width: 28px;
  height: 22px;
  background: linear-gradient(180deg, #195b61 0%, #123d42 100%);
  border: 3px solid var(--border-color);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.18), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.dino-camera-light {
  top: 24px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff5f56;
  border: 2px solid var(--border-color);
  animation: camera-blink 1.2s steps(1) infinite;
  z-index: 3;
}

.dino-camera-beam {
  top: 34px;
  right: 72px;
  width: 230px;
  height: 104px;
  background: linear-gradient(270deg, rgba(214, 240, 242, 0.26), rgba(214, 240, 242, 0));
  clip-path: polygon(100% 34%, 0 0, 0 100%, 100% 66%);
  filter: blur(1px);
  transform-origin: right center;
  animation: camera-sweep 4.8s ease-in-out infinite alternate;
  z-index: 1;
}

.dino-prop {
  bottom: 40px;
  z-index: 1;
}

.dino-house,
.dino-townhouse,
.dino-hospital,
.dino-office {
  border: 3px solid var(--border-color);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.1), inset 3px 3px 0 rgba(255, 255, 255, 0.18);
}

.dino-house {
  left: 10%;
  width: 66px;
  height: 54px;
  background:
    linear-gradient(90deg, transparent 0 14px, #fff6ed 14px 28px, transparent 28px 38px, #fff6ed 38px 52px, transparent 52px),
    linear-gradient(180deg, #f0c9a4 0%, #ddb28a 100%);
}

.dino-house::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -28px;
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 30px solid #b65036;
  filter: drop-shadow(0 -2px 0 rgba(42, 29, 25, 0.12));
}

.dino-house::after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: 0;
  width: 14px;
  height: 22px;
  background: #6d5b55;
  border-left: 3px solid var(--border-color);
  border-right: 3px solid var(--border-color);
}

.dino-townhouse {
  left: 27%;
  width: 84px;
  height: 70px;
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(255, 248, 239, 0.92) 12px 24px, transparent 24px 34px, rgba(255, 248, 239, 0.92) 34px 46px, transparent 46px 56px, rgba(255, 248, 239, 0.92) 56px 68px, transparent 68px),
    linear-gradient(180deg, #d6f0f2 0%, #9fc8cc 100%);
}

.dino-townhouse::before {
  content: "";
  position: absolute;
  inset: -18px 0 auto;
  height: 18px;
  background: #195b61;
  border: 3px solid var(--border-color);
  border-bottom: none;
}

.dino-townhouse::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: 0;
  width: 18px;
  height: 28px;
  background: #6d5b55;
  border-left: 3px solid var(--border-color);
  border-right: 3px solid var(--border-color);
}

.dino-hospital {
  left: 49%;
  width: 104px;
  height: 84px;
  background:
    linear-gradient(90deg, transparent 0 10px, rgba(255, 248, 239, 0.92) 10px 22px, transparent 22px 34px, rgba(255, 248, 239, 0.92) 34px 46px, transparent 46px 58px, rgba(255, 248, 239, 0.92) 58px 70px, transparent 70px 82px, rgba(255, 248, 239, 0.92) 82px 94px, transparent 94px),
    linear-gradient(180deg, #f7f2ea 0%, #e5ddd3 100%);
}

.dino-hospital::before {
  content: "+";
  position: absolute;
  top: 10px;
  left: 36px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #ff5f56;
  color: #fff8ef;
  border: 3px solid var(--border-color);
  font-family: var(--pixel-font-title);
  font-size: 12px;
  line-height: 1;
}

.dino-hospital::after {
  content: "";
  position: absolute;
  left: 41px;
  bottom: 0;
  width: 16px;
  height: 30px;
  background: #6d5b55;
  border-left: 3px solid var(--border-color);
  border-right: 3px solid var(--border-color);
}

.dino-office {
  right: 11%;
  width: 74px;
  height: 106px;
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(255, 248, 239, 0.92) 12px 22px, transparent 22px 32px, rgba(255, 248, 239, 0.92) 32px 42px, transparent 42px 52px, rgba(255, 248, 239, 0.92) 52px 62px, transparent 62px),
    linear-gradient(180deg, #b9c7d4 0%, #899aa8 100%);
}

.dino-office::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 20px;
  width: 28px;
  height: 12px;
  background: #241815;
  border: 3px solid var(--border-color);
  border-bottom: none;
}

.dino-office::after {
  content: "";
  position: absolute;
  left: 29px;
  bottom: 0;
  width: 16px;
  height: 22px;
  background: #6d5b55;
  border-left: 3px solid var(--border-color);
  border-right: 3px solid var(--border-color);
}

.dino-traffic-light {
  bottom: calc(
    var(--dino-road-bottom) +
    var(--dino-road-height) +
    var(--dino-road-border) +
    var(--dino-road-border) +
    var(--dino-traffic-light-base-height) -
    var(--dino-traffic-light-overlap)
  );
  width: 12px;
  height: 82px;
  background: linear-gradient(180deg, #d8d2c9 0%, #afa59b 100%);
  border: 3px solid var(--border-color);
  border-bottom: none;
}

.dino-traffic-light-a {
  left: 18%;
}

.dino-traffic-light-b {
  left: 50%;
  transform: translateX(-50%);
}

.dino-traffic-light-c {
  right: 18%;
}

.dino-traffic-light::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -14px;
  width: 32px;
  height: 52px;
  background:
    radial-gradient(circle at center 11px, #ff5f56 0 6px, #241815 6px 8px, transparent 8px),
    radial-gradient(circle at center 26px, #ffbd2e 0 6px, #241815 6px 8px, transparent 8px),
    radial-gradient(circle at center 41px, #27c93f 0 6px, #241815 6px 8px, transparent 8px),
    linear-gradient(180deg, #3f3430 0%, #241815 100%);
  border: 3px solid var(--border-color);
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.14), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
}

.dino-traffic-light::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -8px;
  width: 28px;
  height: 8px;
  background: #241815;
}

.dino-grass {
  bottom: 48px;
  width: 28px;
  height: 18px;
  background:
    linear-gradient(120deg, transparent 0 8px, #6f9365 8px 12px, transparent 12px),
    linear-gradient(70deg, transparent 0 10px, #4f7749 10px 15px, transparent 15px),
    linear-gradient(55deg, transparent 0 15px, #6f9365 15px 20px, transparent 20px),
    linear-gradient(140deg, transparent 0 20px, #4f7749 20px 24px, transparent 24px);
  filter: drop-shadow(0 2px 0 rgba(42, 29, 25, 0.14));
}

.dino-grass::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 6px;
  background: linear-gradient(180deg, #3f653b 0%, #2f4d2d 100%);
  border-radius: 8px;
}

.dino-grass-a {
  left: 21%;
}

.dino-grass-b {
  left: 40.5%;
}

.dino-grass-c {
  left: 67.5%;
}

.dino-grass-d {
  right: 21.5%;
}

.dino-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dino-road-bottom);
  height: var(--dino-road-height);
  background: linear-gradient(180deg, #6e6763 0%, #4f4845 100%);
  border-top: var(--dino-road-border) solid var(--border-color);
  border-bottom: var(--dino-road-border) solid var(--border-color);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.08), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  z-index: 0;
}

.dino-road::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    transparent 0 24px,
    rgba(255, 247, 238, 0.92) 24px 58px,
    transparent 58px 92px
  );
}

.dino-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 14px;
  border-top: 4px solid var(--border-color);
  border-bottom: 4px solid rgba(42, 29, 25, 0.18);
  background:
    linear-gradient(90deg, rgba(42, 29, 25, 0.14) 0 18px, transparent 18px 36px),
    linear-gradient(180deg, #d6c1ad 0%, #c9b29d 100%);
  background-size: 36px 100%, auto;
}

.dino-runner {
  position: absolute;
  left: calc(var(--dino-start) - (var(--order, 0) * var(--dino-gap)));
  bottom: calc(var(--dino-ground-clearance) + var(--lane-offset, 0px));
  width: var(--dino-size);
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 8px 0 rgba(42, 29, 25, 0.12));
  will-change: left, transform;
  z-index: 3;
}

.dino-parade-track.is-scripted .dino-runner {
  animation: none;
}

@keyframes dino-convoy {
  0% {
    left: calc(var(--dino-start) - (var(--order, 0) * var(--dino-gap)));
    transform: translateY(0) rotate(0deg) scaleX(1);
  }
  10% {
    transform: translateY(-8px) rotate(-5deg) scaleX(1);
  }
  20% {
    transform: translateY(1px) rotate(4deg) scaleX(1);
  }
  30% {
    transform: translateY(-6px) rotate(-4deg) scaleX(1);
  }
  40% {
    transform: translateY(2px) rotate(5deg) scaleX(1);
  }
  50% {
    transform: translateY(-7px) rotate(-5deg) scaleX(1);
  }
  60% {
    transform: translateY(1px) rotate(4deg) scaleX(1);
  }
  70% {
    transform: translateY(-8px) rotate(-4deg) scaleX(1);
  }
  80% {
    transform: translateY(2px) rotate(5deg) scaleX(1);
  }
  90% {
    transform: translateY(-6px) rotate(-4deg) scaleX(1);
  }
  100% {
    left: calc(100% + var(--dino-gap) - (var(--order, 0) * var(--dino-gap)));
    transform: translateY(0) rotate(0deg) scaleX(1);
  }
}

@keyframes camera-sweep {
  0% {
    transform: rotate(10deg);
    opacity: 0.22;
  }
  100% {
    transform: rotate(-10deg);
    opacity: 0.58;
  }
}

@keyframes camera-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.modal-open {
  overflow: hidden;
}

.modal-open .dino-parade-shell {
  visibility: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 28px;
  align-self: start;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 16px;
  border-bottom: 4px solid rgba(42, 29, 25, 0.12);
  padding-bottom: 8px;
  display: inline-block;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.45);
}

.xp-item, .project-item {
  margin-bottom: 18px;
  padding: 16px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fff7ee 0%, #efdccc 100%);
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.08), inset 4px 4px 0 rgba(255, 255, 255, 0.3);
}

.xp-header, .project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.job-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.company-icon {
  width: 52px;
  height: 52px;
  padding: 3px;
  box-sizing: border-box;
  border: 2px solid transparent;
  object-fit: cover;
  background:
    linear-gradient(180deg, #fffdf8 0%, #ffe9d4 100%) padding-box,
    repeating-linear-gradient(
      135deg,
      #df5b39 0 6px,
      #ffd166 6px 12px,
      #195b61 12px 18px,
      #58a066 18px 24px
    ) border-box;
  box-shadow:
    0 0 0 2px rgba(42, 29, 25, 0.18),
    inset -2px -2px 0 rgba(42, 29, 25, 0.15),
    inset 2px 2px 0 rgba(255, 255, 255, 0.24);
  flex-shrink: 0;
  image-rendering: auto;
}

.job-title, .project-name {
  font-family: var(--pixel-font-title);
  font-size: 13px;
  line-height: 1.5;
}

.date {
  font-family: var(--pixel-font-body);
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tag {
  background:
    linear-gradient(180deg, #195b61 0%, #13474d 100%);
  color: #f7f4ef;
  padding: 6px 10px;
  font-size: 10px;
  font-family: var(--pixel-font-title);
  border: 2px solid var(--border-color);
}

.xp-bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  list-style: disc;
  color: var(--ink);
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.project-links a {
  padding: 8px 12px;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fff9f2 0%, #ffe0c4 100%);
  font-weight: 700;
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.1), inset 4px 4px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.project-links a:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--border-color);
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}

.skill-card {
  border: 3px solid var(--border-color);
  padding: 12px;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  background:
    linear-gradient(180deg, #fffaf1 0%, #ffe5ce 100%);
  font-weight: 700;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  gap: 10px;
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.14), inset 4px 4px 0 rgba(255, 255, 255, 0.32);
}

.skill-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px var(--border-color);
  background: linear-gradient(180deg, #fff1dc 0%, #ffd2ae 100%);
}

.timeline {
  position: relative;
  padding-left: 24px;
  border-left: 2px dashed rgba(42, 29, 25, 0.35);
  margin-top: 20px;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--border-color);
  position: absolute;
  left: -6px;
  top: 6px;
}

.page-orb {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.orb-left {
  top: -100px;
  left: -120px;
  background: rgba(223, 91, 57, 0.42);
}

.orb-right {
  right: -90px;
  bottom: -100px;
  background: rgba(25, 91, 97, 0.3);
}

.intro-window .window-content {
  background:
    linear-gradient(180deg, rgba(255, 214, 181, 0.42), rgba(255, 255, 255, 0.8)),
    linear-gradient(90deg, rgba(42, 29, 25, 0.05) 50%, transparent 50%);
  background-size: auto, 18px 18px;
}

.status-badge {
  display: inline-block;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: var(--accent);
  border: 3px solid var(--border-color);
  color: #fffaf1;
  font-family: var(--pixel-font-title);
  font-size: 10px;
}

.muted-text {
  color: var(--muted);
  font-size: 15px;
}

.stat-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 2px dashed rgba(42, 29, 25, 0.18);
  font-size: 15px;
}

.stat-label {
  color: var(--muted);
  font-weight: 700;
}

.link-list {
  display: grid;
  gap: 10px;
}

.link-list a {
  display: block;
  padding: 12px 14px;
  border: 3px solid var(--border-color);
  background:
    linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  box-shadow: inset -4px -4px 0 rgba(42, 29, 25, 0.14), inset 4px 4px 0 rgba(255, 255, 255, 0.28);
}

.link-list a:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--border-color);
}

.external-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.link-list .external-link {
  display: flex;
  width: 100%;
}

.link-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.social-link .link-label i {
  width: 20px;
  text-align: center;
  color: var(--ink);
  font-size: 16px;
  flex-shrink: 0;
}

.external-link::after {
  content: "\f35d";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  background: linear-gradient(180deg, #fff8ef 0%, #ffd8bd 100%);
  flex-shrink: 0;
  color: var(--ink);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  box-shadow: inset -2px -2px 0 rgba(42, 29, 25, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.16s ease, background 0.16s ease;
}

.external-link:hover::after {
  transform: translate(-1px, -1px);
  background: linear-gradient(180deg, #fff3e5 0%, #ffcfa9 100%);
}

.meter-list {
  display: grid;
  gap: 12px;
}

.meter-row {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.meter {
  height: 18px;
  border: 3px solid var(--border-color);
  background:
    linear-gradient(90deg, rgba(42, 29, 25, 0.08) 50%, transparent 50%),
    #d8d2c9;
  background-size: 18px 100%;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background:
    linear-gradient(90deg, var(--accent) 0%, #ff9068 100%);
}

.achievement-list {
  display: grid;
  gap: 12px;
}

.achievement-list p {
  position: relative;
  padding-left: 18px;
}

.achievement-list p::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-deep);
  font-weight: 700;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at top right, rgba(255, 214, 181, 0.65), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.24), transparent 40%),
    linear-gradient(135deg, #fffaf3 0%, #f7e7d4 55%, #f0ddcb 100%);
}

.eyebrow {
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.hero-copy h1 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.25;
  margin-bottom: 16px;
}

.hero-summary {
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--muted);
}

.focus-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.focus-strip span {
  padding: 8px 10px;
  background: linear-gradient(180deg, #df7c55 0%, #b65036 100%);
  border: 3px solid var(--border-color);
  color: #fff9f1;
  font-family: var(--pixel-font-title);
  font-size: 9px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid rgba(42, 29, 25, 0.2);
  background: rgba(255, 255, 255, 0.58);
  font-weight: 600;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.06), inset 3px 3px 0 rgba(255,255,255,0.25);
}

.contact-primary {
  flex: 1;
  min-width: 0;
}

.copy-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  font-family: var(--pixel-font-title);
  font-size: 12px;
  cursor: pointer;
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.24);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.copy-btn i {
  font-size: 15px;
}

.copy-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--border-color);
}

.copy-btn:active {
  transform: translate(0, 0);
  box-shadow: inset 2px 2px 0 rgba(42, 29, 25, 0.16);
}

.social-compact {
  display: none;
  margin-top: 14px;
  gap: 12px;
}

.compact-link {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 3px solid var(--border-color);
  background: linear-gradient(180deg, #fffdf8 0%, #f5e9dc 100%);
  box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.14), inset 3px 3px 0 rgba(255,255,255,0.28);
  color: var(--ink);
  font-size: 18px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.compact-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--border-color);
}

.hero-card {
  display: grid;
  gap: 14px;
}

.avatar-frame {
  aspect-ratio: 1;
  border: 4px solid var(--border-color);
  background: linear-gradient(135deg, rgba(25, 91, 97, 0.94), rgba(36, 24, 21, 0.9));
  box-shadow: inset 0 0 0 4px rgba(255, 248, 239, 0.12);
  position: relative;
  overflow: hidden;
}

.profile-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.05) contrast(1.02);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-meta span {
  padding: 8px 10px;
  border: 2px solid var(--border-color);
  background: #fff9f1;
  font-family: var(--pixel-font-title);
  font-size: 9px;
}

.skill-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(42, 29, 25, 0.14));
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
  }

  .main-content {
    order: 1;
  }

  .sidebar {
    position: static;
    order: 2;
  }

  .hero-panel,
  .content-grid,
  .blog-layout,
  .dino-overview-panel,
  .dino-protocol-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    gap: 18px;
  }

  .hero-card {
    grid-template-columns: 140px 1fr;
    align-items: center;
  }

  .skill-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .dino-parade-track {
    --dino-size: 76px;
    --dino-start: -100px;
    --dino-gap: 70px;
    height: 160px;
  }

  .dino-game-compact-row {
    grid-template-columns: 1fr;
  }

  .dino-game-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

}

@media (max-width: 640px) {
  body {
    padding: 24px 14px 40px;
  }

  .modal {
    padding: 10px;
  }

  .modal-card {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .nav-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
  }

  .nav-brand {
    min-width: 0;
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.3px;
  }

  .nav-brand .brand-mark {
    width: 28px;
    height: 28px;
  }

  .nav-brand span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
    align-self: center;
  }

  .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
  }

  .nav-bar.is-collapsible .nav-links {
    display: none;
  }

  .nav-bar.is-collapsible.is-open .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .nav-link {
    width: 100%;
    text-align: center;
  }

  .window-header {
    padding: 8px 10px;
  }

  .window-title {
    font-size: 10px;
  }

  .window-content {
    padding: 18px;
  }

  .dino-page .window-content {
    padding: 16px;
  }

  .dino-parade-shell {
    margin-top: 24px;
  }

  .dino-parade-track {
    --dino-size: 52px;
    --dino-start: -82px;
    --dino-gap: 56px;
    --dino-ground-clearance: 28px;
    --dino-road-bottom: 18px;
    --dino-road-height: 24px;
    --parade-car-width: 84px;
    --parade-car-height: 36px;
    height: 138px;
  }

  .dino-parade-cta {
    align-items: stretch;
  }

  .dino-parade-actions {
    width: 100%;
  }

  .dino-overview-copy h1 {
    font-size: 1.35rem;
    line-height: 1.22;
    letter-spacing: 0.2px;
  }

  .dino-overview-copy .focus-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dino-overview-copy .focus-strip span {
    width: 100%;
    min-width: 0;
    text-align: center;
    font-size: 8px;
    padding: 8px;
    overflow-wrap: anywhere;
  }

  .dino-overview-copy .project-links {
    grid-template-columns: 1fr;
  }

  .dino-overview-copy .project-links a {
    min-width: 0;
    text-align: center;
  }

  .parade-crew-link,
  .parade-game-link {
    width: 100%;
  }

  .dino-game-content {
    gap: 8px;
  }

  .dino-game-controls {
    width: 100%;
    justify-content: stretch;
  }

  .dino-game-controls .parade-game-link,
  .dino-game-reset-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
  }

  .dino-game-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .dino-game-board-shell {
    padding: 8px;
  }

  .dino-game-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .dino-hole {
    min-height: 56px;
  }

  .dino-pop {
    max-width: 54px;
  }

  .dino-hud-chip {
    padding: 7px 8px;
  }

  .dino-hud-chip strong {
    font-size: 13px;
  }

  .dino-game-rule,
  .dino-game-status {
    font-size: 12px;
  }

  .dino-card-top {
    align-items: flex-start;
  }

  .dino-card-figure {
    width: 74px;
    min-width: 74px;
  }

  .dino-card-figure img,
  .dino-lineup img {
    width: 58px;
  }

  .dino-prop {
    transform: scale(0.68);
    transform-origin: bottom center;
  }

  .dino-runner[data-dino] {
    display: none;
  }

  .dino-runner[data-dino="red"],
  .dino-runner[data-dino="green"],
  .dino-runner[data-dino="blue"] {
    display: block;
  }

  .dino-traffic-light-a {
    left: 12%;
  }

  .dino-traffic-light-b {
    left: 50%;
  }

  .dino-traffic-light-c {
    right: 12%;
  }

  .dino-ground {
    bottom: 8px;
  }

  .hero-card {
    grid-template-columns: 1fr;
  }

  .avatar-frame {
    max-width: 220px;
  }

  .xp-header,
  .project-header,
  .stat-item {
    flex-direction: column;
  }

  .date {
    white-space: normal;
  }

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

  .project-links a,
  .link-list a {
    width: 100%;
  }

  .social-compact {
    display: flex;
  }

  .skill-grid {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 10px;
  }

  .skill-card {
    padding: 10px;
    box-shadow: inset -3px -3px 0 rgba(42, 29, 25, 0.12), inset 3px 3px 0 rgba(255, 255, 255, 0.28);
  }

  .skill-card span {
    font-size: 11px;
  }

  .skill-logo {
    width: 36px;
    height: 36px;
  }
}