body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.7;min-height:100vh;padding-top:56px;}.container{max-width:900px;margin:0 auto;padding:0 24px;}.back-nav{padding:12px 0 24px;}.back-link{color:var(--ink-muted);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:color 0.3s;}.back-link:hover{color:var(--ink);}.back-link svg{transition:transform 0.3s var(--ease-out);}.back-link:hover svg{transform:translateX(-4px);}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted);padding:24px 0 0;flex-wrap:wrap;}.breadcrumb a{color:var(--ink-muted);text-decoration:none;transition:color 0.2s;}.breadcrumb a:hover{color:var(--ink);}.breadcrumb span.sep{opacity:0.4;}.breadcrumb span.current{color:var(--red-faded);font-weight:500;}.detail-hero{padding:40px 0 60px;text-align:center;}.detail-emoji{width:100px;height:100px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:48px;margin:0 auto 24px;position:relative;overflow:hidden;color:var(--ink);}.detail-emoji .gi{width:48px;height:48px;}.detail-emoji .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.3;}.detail-name{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:700;margin-bottom:12px;}.detail-desc{font-size:18px;color:var(--ink-secondary);max-width:600px;margin:0 auto 24px;}.detail-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px;}.detail-tags span{font-size:12px;color:var(--ink-secondary);background:var(--red-faded-light);padding:6px 14px;border-radius:75px;border:1px solid var(--divider);}.detail-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--red-faded);color:#fff;border-radius:75px;padding:14px 34px;font-family:var(--font-body);font-size:16px;font-weight:500;border:none;cursor:pointer;text-decoration:none;transition:all 0.4s var(--ease-out);}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(199,91,74,0.3);}.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);border:1px solid var(--divider);border-radius:75px;padding:14px 34px;font-size:16px;font-weight:500;cursor:pointer;text-decoration:none;transition:all 0.4s var(--ease-out);}.btn-ghost:hover{background:var(--red-faded-light);border-color:var(--red-faded);}.status-bar{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:75px;border:1px solid var(--divider);font-size:13px;color:var(--ink-muted);margin-bottom:32px;}.status-dot{width:8px;height:8px;border-radius:50%;}.status-dot.online{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.4);animation:pulse 2s ease-in-out infinite;}.status-dot.offline{background:#6B7280;}.status-dot.checking{background:#FBBF24;animation:pulse 1s ease-in-out infinite;}@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}}.section{padding:48px 0;}.section-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--ink);margin-bottom:20px;}.arch-diagram{background:var(--paper-deep);border:1px solid var(--divider);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center;}.arch-node{padding:16px 24px;border-radius:12px;background:var(--paper);border:1px solid var(--divider);text-align:center;font-size:14px;}.arch-node strong{display:block;margin-bottom:4px;}.arch-node small{color:var(--ink-muted);}.arch-arrow{color:var(--red-faded);font-size:20px;}.feature-list{list-style:none;}.feature-list li{padding:16px 0;border-bottom:1px dashed var(--divider);display:flex;gap:14px;align-items:flex-start;}.feature-list li:last-child{border-bottom:none;}.feature-num{width:32px;height:32px;border-radius:8px;background:var(--red-faded);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;flex-shrink:0;margin-top:2px;}.feature-text strong{display:block;margin-bottom:4px;font-size:15px;}.feature-text p{font-size:14px;color:var(--ink-secondary);}.challenge-box{background:var(--paper-deep);border:1px solid var(--divider);border-radius:12px;padding:24px;margin-bottom:16px;}.challenge-box h4{font-size:15px;color:var(--red-faded);margin-bottom:8px;}.challenge-box p{font-size:14px;color:var(--ink-secondary);line-height:1.7;}.empty-state{text-align:center;padding:120px 24px;}.empty-state h2{font-family:var(--font-display);font-size:1.8rem;margin-bottom:12px;}.empty-state p{color:var(--ink-muted);}.narrative-motivation{padding:48px 0 32px;}.narrative-motivation .narrative-quote{font-family:var(--font-byliner);font-style:italic;font-size:1.15rem;line-height:1.9;color:var(--ink-secondary);max-width:720px;margin:0 auto 24px;text-align:center;position:relative;padding:0 24px;}.narrative-motivation .narrative-quote::before{content:'\201C';position:absolute;left:-8px;top:-12px;font-size:3rem;color:var(--red-faded);opacity:0.3;font-family:Georgia,serif;}.narrative-motivation .narrative-problem{background:var(--paper-deep);border-left:3px solid var(--red-faded);border-radius:0 12px 12px 0;padding:20px 28px;max-width:720px;margin:0 auto;font-size:0.95rem;color:var(--ink-secondary);line-height:1.8;}.narrative-problem strong{display:block;color:var(--red-faded);font-family:var(--font-display);font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}.goal-statement{text-align:center;padding:32px 0;max-width:720px;margin:0 auto;}.goal-statement .goal-label{font-family:var(--font-mono);font-size:0.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;}.goal-statement .goal-text{font-family:var(--font-body);font-weight:400;font-size:1.05rem;line-height:1.8;color:var(--ink-secondary);}.workflow-section{padding:48px 0;}.workflow-section .section-title{margin-bottom:32px;}.workflow-steps{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto;position:relative;}.workflow-steps::before{content:'';position:absolute;left:24px;top:0;bottom:0;width:2px;background:var(--divider);}.workflow-step{display:flex;gap:20px;padding:24px 0;position:relative;}.workflow-step:not(:last-child){border-bottom:1px dashed var(--divider);}.workflow-step-num{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;flex-shrink:0;z-index:1;position:relative;}.workflow-step-content{flex:1;padding-top:4px;}.workflow-step-title{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:6px;}.workflow-step-desc{font-size:0.92rem;color:var(--ink-secondary);line-height:1.7;}.tech-decisions-section{padding:48px 0;}.tech-decisions-section .section-title{margin-bottom:28px;}.tech-decisions-grid{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:0 auto;}.tech-decision-card{border:1px solid var(--divider);border-radius:12px;overflow:hidden;transition:border-color 0.3s var(--ease-out);}.tech-decision-card:hover{border-color:var(--divider-active);}.tech-decision-question{padding:18px 24px;background:var(--red-faded-light);font-family:var(--font-display);font-weight:600;font-size:0.95rem;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;}.tech-decision-question::after{content:'+';font-size:1.3rem;color:var(--red-faded);transition:transform 0.3s var(--ease-out);flex-shrink:0;}.tech-decision-card.open .tech-decision-question::after{content:'\2212';}.tech-decision-answer{padding:0 24px;max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease-out),padding 0.4s var(--ease-out);font-size:0.92rem;color:var(--ink-secondary);line-height:1.8;}.tech-decision-card.open .tech-decision-answer{max-height:300px;padding:0 24px 20px;}.deep-dive-section{padding:48px 0;}.deep-dive-section .section-title{margin-bottom:28px;}.deep-dive-blocks{display:flex;flex-direction:column;gap:28px;max-width:720px;margin:0 auto;}.deep-dive-block{border:1px solid var(--divider);border-radius:12px;padding:28px;background:var(--paper-deep);overflow:hidden;word-wrap:break-word;overflow-wrap:break-word;}.deep-dive-block-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--divider);}.deep-dive-block-content{font-size:0.92rem;color:var(--ink-secondary);line-height:1.9;}.deep-dive-block-content p{margin:0 0 12px;}.deep-dive-block-content strong{color:var(--ink);font-weight:600;}.deep-dive-block-content code{font-family:var(--font-mono);background:var(--paper-deep);padding:2px 6px;border-radius:4px;font-size:0.85em;}.deep-dive-block-content pre{background:var(--paper-deep);border:1px solid var(--divider);border-radius:8px;padding:16px;margin:16px 0;overflow-x:auto;font-family:var(--font-mono);font-size:0.85em;line-height:1.6;}.deep-dive-block-content pre code{background:none;padding:0;border-radius:0;font-size:inherit;}.deep-dive-block-content ul,.deep-dive-block-content ol{margin:12px 0;padding-left:24px;}.deep-dive-block-content li{margin-bottom:8px;}.deep-dive-block-content h2,.deep-dive-block-content h3,.deep-dive-block-content h4{color:var(--ink);margin:24px 0 12px;font-weight:600;}.modules-section{padding:48px 0;}.modules-section .section-title{margin-bottom:28px;}.modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:800px;margin:0 auto;}.module-card{border:1px solid var(--divider);border-radius:12px;padding:24px;background:var(--paper);transition:border-color 0.3s var(--ease-out),transform 0.2s var(--ease-out);}.module-card:hover{border-color:var(--divider-active);transform:translateY(-2px);}.module-card-role{font-family:var(--font-mono);font-size:0.65rem;color:var(--red-faded);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}.module-card-name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:6px;}.module-card-tech{font-family:var(--font-mono);font-size:0.7rem;color:var(--ink-faint);margin-bottom:10px;letter-spacing:0.02em;}.module-card-desc{font-size:0.88rem;color:var(--ink-secondary);line-height:1.7;}.dataflow-section{padding:48px 0;}.dataflow-section .section-title{margin-bottom:28px;}.dataflow-steps{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto;position:relative;}.dataflow-step{display:flex;gap:20px;padding:20px 0;align-items:flex-start;}.dataflow-step:not(:last-child){border-bottom:1px dashed var(--divider);}.dataflow-step-connector{display:flex;flex-direction:column;align-items:center;width:48px;flex-shrink:0;}.dataflow-step-dot{width:14px;height:14px;border-radius:50%;background:var(--red-faded);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--red-faded);flex-shrink:0;}.dataflow-step-line{width:2px;flex:1;min-height:20px;background:var(--divider);margin-top:4px;}.dataflow-step-content{flex:1;padding-top:0;}.dataflow-step-header{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;}.dataflow-step-stage{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);}.dataflow-step-format{font-family:var(--font-mono);font-size:0.65rem;color:var(--red-faded);background:var(--red-faded-light);padding:2px 8px;border-radius:4px;}.dataflow-step-desc{font-size:0.9rem;color:var(--ink-secondary);line-height:1.7;}.milestones-section{padding:48px 0;}.milestones-section .section-title{margin-bottom:28px;}.milestones-timeline{display:flex;gap:24px;max-width:720px;margin:0 auto;}.milestone-item{flex:1;border:1px solid var(--divider);border-radius:12px;padding:20px;text-align:center;transition:border-color 0.3s var(--ease-out),transform 0.2s var(--ease-out);}.milestone-item:hover{border-color:var(--divider-active);transform:translateY(-2px);}.milestone-version{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink);margin-bottom:4px;}.milestone-date{font-family:var(--font-mono);font-size:0.7rem;color:var(--red-faded);margin-bottom:10px;letter-spacing:0.03em;}.milestone-desc{font-size:0.85rem;color:var(--ink-secondary);line-height:1.6;}.narrative-divider{display:flex;align-items:center;justify-content:center;padding:8px 0;}.narrative-divider-line{width:100%;height:0;border-top:1px dashed var(--divider);}.narrative-divider-dot{width:5px;height:5px;background:var(--divider);border-radius:50%;margin:0 12px;flex-shrink:0;}@media (max-width:600px){.arch-diagram{flex-direction:column;}.arch-arrow{transform:rotate(90deg);}.detail-actions{flex-direction:column;align-items:center;}.modules-grid{grid-template-columns:1fr;}.milestones-timeline{flex-direction:column;}.narrative-motivation .narrative-quote{font-size:1rem;}.workflow-steps::before{left:20px;}.workflow-step-num{width:40px;height:40px;font-size:0.95rem;}}

@media print {
  .detail-hero { padding: 20px 0 30px; }
  .detail-emoji { width: 60px; height: 60px; font-size: 30px; }
  .btn-primary, .btn-ghost, .psi-link { display: none; }
  .tech-decision-answer { max-height: none !important; padding: 12px 0 !important; }
  .deep-dive-block { break-inside: avoid; }
}

[data-theme="dark"] .narrative-problem,[data-theme="dark"] .challenge-box,[data-theme="dark"] .deep-dive-block,[data-theme="dark"] .arch-diagram,[data-theme="dark"] .module-card,[data-theme="dark"] .milestone-item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .tech-decision-question{background:rgba(255,255,255,.03)}
[data-theme="dark"] .workflow-step-num{background:var(--red-faded);color:#fff}
[data-theme="dark"] .deep-dive-block-content pre,[data-theme="dark"] .deep-dive-block-content code{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .milestone-item:hover,[data-theme="dark"] .module-card:hover{border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .detail-emoji .orb{opacity:.5}


.section-nav {
  display: none;
  position: sticky;
  top: 80px;
  z-index: 20;
  align-self: start;
  padding: 16px 14px 14px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .12);
  backdrop-filter: blur(16px) saturate(125%);
}
.section-nav-label {
  margin: 0 6px 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.section-nav ul {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 150px);
  margin: 0;
  padding: 0 0 0 8px;
  overflow-y: auto;
  list-style: none;
  border-left: 1px solid var(--divider);
  scrollbar-width: thin;
}
.section-nav li { display: contents; }
.section-nav a {
  display: -webkit-box;
  padding: 7px 9px;
  overflow: hidden;
  color: var(--ink-muted);
  border-radius: 0 7px 7px 0;
  font-size: .78rem;
  line-height: 1.45;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.section-nav a:hover,
.section-nav a.active {
  color: var(--red-faded);
  background: var(--red-faded-light);
  box-shadow: inset 2px 0 0 var(--red-faded);
}
.section-nav a[aria-current="location"] { font-weight: 600; }
a:focus-visible,button:focus-visible{outline:2px solid var(--red-faded);outline-offset:3px;border-radius:4px}
html{scroll-behavior:smooth}


.project-detail-main {
  min-height: calc(100vh - 56px);
}

.project-detail-shell {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  column-gap: 36px;
  align-items: start;
  padding-top: clamp(20px, 3vw, 32px);
}

.project-detail-shell .breadcrumb {
  grid-column: 1;
  grid-row: 1;
}

.project-detail-shell #project-detail {
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
}

.project-detail-shell .section-nav {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.project-detail-shell :where(.detail-hero, .section, .narrative-motivation, .workflow-section, .tech-decisions-section, .deep-dive-section, .modules-section, .dataflow-section, .milestones-section) {
  scroll-margin-top: 84px;
}

@media (min-width: 1120px) {
  .section-nav { display: block; }
}

@media (max-width: 1119px) {
  .project-detail-shell {
    max-width: 900px;
    display: block;
  }
}

.project-detail-shell .breadcrumb {
  padding-top: 0;
  min-height: 32px;
}

.project-detail-shell .detail-hero {
  padding-top: clamp(24px, 4vw, 40px);
}

@media (max-width: 600px) {
  .project-detail-shell {
    padding-top: 16px;
  }

  .project-detail-shell .detail-hero {
    padding-top: 20px;
  }
}


.project-detail-shell .detail-actions :where(.btn-primary, .btn-ghost) {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: ease;
  touch-action: manipulation;
}

.project-detail-shell .detail-actions :where(.btn-primary, .btn-ghost):active {
  transform: translateY(0) scale(.995);
}

.status-dot.limited {
  background: #d8bb82;
  box-shadow: 0 0 0 3px rgba(216, 187, 130, .12);
}

.project-detail-shell .status-bar {
  max-width: 100%;
  justify-content: center;
  line-height: 1.45;
}

@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: project-detail-view-out 140ms ease both;
  }

  ::view-transition-new(root) {
    animation: project-detail-view-in 180ms ease both;
  }
}

@keyframes project-detail-view-out {
  to { opacity: 0; }
}

@keyframes project-detail-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}




.project-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-10);
  text-align: center;
}

.project-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, var(--color-primary-10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.project-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-heading);
  position: relative;
  z-index: 1;
}

.project-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}


.project-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  position: relative;
  z-index: 1;
}

.project-tag {
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  transition: all 0.2s var(--ease-out-quart);
}

.project-tag:hover {
  border-color: var(--color-primary-30);
  color: var(--color-primary);
  background: var(--color-primary-10);
}


.project-content {
  max-width: var(--content-wide-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding-x);
}


.project-screenshots {
  margin: var(--space-12) 0;
}

.project-screenshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.project-screenshot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: all 0.35s var(--ease-out-quart);
}

.project-screenshot:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

.project-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease-out-quart);
}

.project-screenshot:hover img {
  transform: scale(1.02);
}


.project-features {
  margin: var(--space-12) 0;
}

.project-features-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  text-align: center;
}

.project-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.project-feature-card {
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease-out-quart);
}

.project-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}

.project-feature-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  background: var(--color-primary-10);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.project-feature-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.project-feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}


.project-tech-stack {
  margin: var(--space-12) 0;
  padding: var(--space-8);
  background: var(--color-bg-glass);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.project-tech-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.project-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.project-tech-item {
  padding: 8px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: all 0.2s var(--ease-out-quart);
}

.project-tech-item:hover {
  border-color: var(--color-primary-30);
  color: var(--color-primary);
}


@media (max-width: 768px) {
  .project-hero {
    padding: var(--space-10) 0 var(--space-8);
  }
  
  .project-screenshots-grid {
    grid-template-columns: 1fr;
  }
  
  .project-features-grid {
    grid-template-columns: 1fr;
  }
}