*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#F2F4F6;color:#1A1D21;font-family:'Inter',sans-serif;font-size:0.9375rem;line-height:1.7;padding:2rem}

/* Layout */
.panel-container{display:grid;grid-template-columns:1fr min(800px,90vw) 1fr;margin-bottom:3rem}
.panel-container>*{grid-column:2}
.panel{background:#FFFFFF;border-radius:8px;padding:32px;box-shadow:0 1px 3px rgba(0,0,0,0.06),0 8px 24px rgba(0,0,0,0.04);margin-bottom:1.5rem;position:relative;overflow:hidden}
.panel.elevated{transform:translateY(-20px);box-shadow:0 2px 6px rgba(0,0,0,0.08),0 12px 32px rgba(0,0,0,0.06)}
.panel.wide{max-width:100%}

/* Skeleton Loading Shimmer */
.shimmer-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#E8EAEC 25%,#F0F2F4 50%,#E8EAEC 75%);background-size:400px 100%;animation:shimmer 0.8s ease-in-out;opacity:0;pointer-events:none;border-radius:8px;z-index:1}
@keyframes shimmer{0%{opacity:1;background-position:-200px 0}100%{opacity:0;background-position:200px 0}}

/* Typography */
h1{font-weight:600;font-size:clamp(2rem,4vw,3rem);color:#1A1D21;margin-bottom:0.5rem}
h2{font-weight:600;font-size:1.25rem;color:#1A1D21;margin-bottom:1rem}
.subtitle{color:#6B7280;font-size:0.9375rem;margin-bottom:1.5rem}
.accent-line{width:60px;height:2px;background:#2563EB}

/* Code */
code,.code-snippet{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:0.8125rem;line-height:1.6;color:#6B7280;background:#F2F4F6;padding:2px 6px;border-radius:4px}
.code-snippet{display:block;margin-top:1rem;padding:8px 12px}

/* Diagrams */
.diagram-container{margin:1.5rem 0;text-align:center}
.diagram-container.large{margin:2rem 0}

/* Metrics */
.metric{margin-bottom:1.25rem}
.metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.metric-label{font-size:0.8125rem;color:#6B7280}
.metric-value{font-family:'JetBrains Mono',monospace;font-size:0.8125rem;color:#1A1D21;font-weight:600}
.progress-bar{height:4px;border-radius:2px;background:#E8EAEC;overflow:hidden}
.progress-fill{height:100%;border-radius:2px;background:#2563EB;transition:width 1s ease}

/* Badges */
.badge-row{display:flex;gap:0.5rem;margin-top:1.25rem;flex-wrap:wrap}
.badge{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:0.6875rem;font-weight:600;letter-spacing:0.02em}
.badge.success{background:#059669;color:#FFFFFF}
.badge.default{background:#E8EAEC;color:#6B7280}

/* Spec Table */
.spec-table{width:100%;border-collapse:collapse;font-size:0.8125rem;margin-top:0.5rem}
.spec-table th{text-align:left;padding:0.75rem 1rem;border-bottom:1px solid #D1D5DB;color:#6B7280;font-weight:600;font-size:0.75rem;letter-spacing:0.04em;text-transform:uppercase}
.spec-table td{padding:0.75rem 1rem;border-bottom:1px solid #F2F4F6}
.spec-table tbody tr:nth-child(even){background:#F2F4F6}
.spec-table tbody tr:nth-child(odd){background:#FFFFFF}

/* Footer */
.footer-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-status{display:flex;align-items:center;gap:0.75rem}
.footer-text{color:#6B7280;font-size:0.8125rem}

/* Card reveal */
.card{opacity:0;transform:translateY(20px);transition:opacity 0.4s ease,transform 0.4s ease}
.card.visible{opacity:1;transform:translateY(0)}
.card.elevated.visible{transform:translateY(-20px)}

/* Responsive */
@media(max-width:640px){
  body{padding:1rem}
  .panel{padding:20px}
  .spec-table{font-size:0.75rem}
  .spec-table td,.spec-table th{padding:0.5rem}
}