/* A focused demonstration surface with supporting detail on demand. */
.project-page { background:#f6f8fc; }
.project-page .container { max-width:1240px; padding-inline:32px; }
.project-page h1,.project-page h2,.project-page h3,.project-page h4 { font-family:Inter,sans-serif; }
.proj-hero { padding:108px 0 18px; }
.project-back { display:inline-block; font-size:13px; color:var(--text-faint); margin-bottom:20px; }
.project-back:hover { color:var(--accent); }
.project-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.project-heading h1 { font-size:clamp(26px,3vw,36px); line-height:1.2; letter-spacing:-.035em; margin-bottom:10px; }
.project-purpose { font-size:15px; margin:0; line-height:1.6; }
.demo-note { font-size:12px; color:var(--text-faint); text-align:right; max-width:250px; flex-shrink:0; }
.proj-tabs { top:69px; margin-top:0; padding:8px 0 0; background:#f6f8fc; gap:8px; border-bottom:1px solid var(--border); }
.proj-tabs a { font-size:14px; text-transform:none; letter-spacing:0; padding:12px 17px; border-radius:8px 8px 0 0; }
.proj-tabs a.active { color:var(--accent); background:#fff; }
.tab-panel,.tab-panel.subsection { margin-top:20px; }
.dash { border:0; border-radius:0; padding:0; margin:0; background:transparent; }
.filter-bar { padding:18px; margin:0 0 20px; gap:12px; background:#fff; border:1px solid var(--border); border-radius:10px; }
.field,.field.grow-0 { flex:1 1 145px; min-width:130px; }
.field-wide { flex:2 1 280px; }
.field label { font-size:12px; text-transform:none; letter-spacing:0; }
.field select,.field input[type="text"] { font-size:14px; min-height:42px; border-radius:6px; }
.reset-btn { font-size:12px; min-height:42px; padding:10px 12px; }
.kpi-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.kpi { padding:17px 18px; background:#fff; border:1px solid var(--border); border-radius:10px; }
.kpi span.label { text-transform:none; letter-spacing:0; font-size:12px; line-height:1.5; margin-bottom:8px; }
.kpi span.value { font:650 clamp(19px,2vw,26px) Inter,sans-serif; letter-spacing:-.035em; overflow-wrap:anywhere; }
.chart-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; margin-bottom:20px; }
.chart-grid.thirds { grid-template-columns:repeat(3,minmax(0,1fr)); }
.chart-box { background:white; padding:22px; border-radius:10px; }
.chart-box h4 { font-size:15px; line-height:1.4; font-weight:600; margin-bottom:20px; }
.chart-box canvas { width:100%!important; height:275px!important; max-height:275px; }
.dashboard-detail,.project-details { margin:16px 0 0; padding:0 20px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.dashboard-detail { margin-bottom:20px; }
.dashboard-detail > summary,.project-details > summary { padding:17px 0; color:var(--text-dim); font-size:14px; font-weight:500; }
.dashboard-detail[open],.project-details[open] { padding-bottom:20px; }
.dashboard-detail .chart-grid { margin:0; }
.dashboard-detail .chart-box { padding:16px; }
.dashboard-detail .insight-panel { margin:0; border:0; box-shadow:none; padding:0; }
.project-details .explain-grid { margin-top:0; }
.project-details .card { border:0; padding:12px 0 0; }
.project-details .card h3 { font-size:17px; }
.project-details .card p { font-size:14px; }
.table-wrap { background:#fff; }
.next-proj { margin-top:28px; gap:24px; }
.next-proj a { font-size:13px; max-width:48%; }
.meta-chips { margin:12px 0 20px; }
.pipeline-legend { line-height:1.6; }
.agent-step { background:#fff; }
.code-panel { margin-top:20px; }
.proj-hero + section.tight { padding-bottom:28px; }
@media(max-width:1000px) { .chart-grid.thirds { grid-template-columns:1fr; } .chart-grid.thirds .chart-box canvas { height:250px!important; } .filter-bar { gap:10px; } }
@media(max-width:760px) { .project-page .container { padding-inline:20px; } .project-heading { align-items:flex-start; flex-direction:column; gap:12px; } .demo-note { text-align:left; max-width:none; } .chart-grid { grid-template-columns:1fr; } .kpi-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .proj-tabs { top:70px; } .chart-box { padding:18px; } .proj-tabs a { padding:11px 12px; font-size:13px; } }
@media(max-width:480px) { .project-page .nav .container { padding-inline:12px; } .proj-hero { padding-top:96px; } .field,.field.grow-0 { flex:1 1 calc(50% - 12px); min-width:0; } .field-wide { flex-basis:100%; } .filter-bar { padding:14px; } .kpi { padding:14px; } .dashboard-detail,.project-details { padding-inline:14px; } .chart-box canvas { height:240px!important; max-height:240px; } .next-proj { flex-direction:column; align-items:flex-start; } .next-proj a { max-width:100%; } }