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

body {
  min-height:100vh;
  background:#fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  line-height:1.5;
}

.container {
  width:100%;
  max-width:800px;
}

header {
  text-align:center;
  margin-bottom:64px;
  position:relative;
}

header::after {
  content:'';
  position:absolute;
  bottom:-32px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:1px;
  background:#000;
}

h1 {
  font-size:36px;
  font-weight:300;
  margin-bottom:12px;
  letter-spacing:2px;
}

#meta {
  font-size:13px;
  color:#666;
  margin-top:12px;
  font-weight:400;
}

#initial-state {
  text-align:center;
  padding:100px 20px;
}

#initial-state.hidden { display:none; }

#results {
  opacity:0;
  transition:opacity 0.5s ease;
}

#results.show { opacity:1; }

.main-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  background:#000;
  border:2px solid #000;
  margin-bottom:2px;
}

.metric {
  background:#fff;
  padding:40px 24px;
  text-align:center;
  transition:background 0.15s;
  position:relative;
}

.metric.active::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:#000;
}

.metric-label {
  font-size:10px;
  color:#999;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}

.metric-value {
  font-size:48px;
  font-weight:200;
  line-height:1;
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
}

.metric-unit {
  font-size:12px;
  color:#999;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.sub-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  background:#000;
  border:2px solid #000;
  margin-bottom:48px;
}

.sub-metric {
  background:#fff;
  padding:28px 20px;
  text-align:center;
}

.sub-metric .metric-label { font-size:9px; margin-bottom:12px; }
.sub-metric .metric-value { font-size:30px; margin-bottom:6px; font-weight:200; }
.sub-metric .metric-unit { font-size:11px; }

#graph-wrap {
  background:#fafafa;
  padding:32px;
  margin-bottom:48px;
  border:1px solid #f0f0f0;
}

#graph {
  width:100%;
  height:160px;
  display:block;
}

.legend {
  display:flex;
  gap:32px;
  justify-content:center;
  margin-top:20px;
  font-size:11px;
  color:#999;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.legend span { display:flex; align-items:center; gap:10px; }
.legend i { width:16px; height:2px; }

#progress-bar {
  height:1px;
  background:#e5e5e5;
  margin-bottom:40px;
  overflow:hidden;
}

#progress-bar div {
  height:100%;
  width:0;
  background:#000;
  transition:width 0.2s linear;
}

.actions {
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:20px;
}

button {
  padding:16px 40px;
  font-size:12px;
  font-weight:500;
  font-family:inherit;
  border:1px solid #000;
  background:transparent;
  color:#000;
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
  letter-spacing:1px;
}

button:hover:not(:disabled) {
  background:#000;
  color:#fff;
}

button:disabled {
  opacity:0.2;
  cursor:not-allowed;
}

#go {
  padding:18px 56px;
  font-size:13px;
  font-weight:600;
  background:#000;
  color:#fff;
}

#go:hover:not(:disabled) {
  background:#fff;
  color:#000;
}

#status {
  text-align:center;
  font-size:12px;
  color:#999;
  min-height:20px;
  margin-top:24px;
}

footer {
  text-align:center;
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid #e5e5e5;
}

footer code {
  background:#f8f8f8;
  padding:6px 14px;
  font-family:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size:11px;
  color:#666;
  user-select:all;
  border:1px solid #e5e5e5;
  letter-spacing:0;
}

@media (max-width:768px) {
  body { padding:40px 20px; }
  h1 { font-size:28px; letter-spacing:1px; }
  header { margin-bottom:48px; }
  header::after { bottom:-24px; }
  .main-grid { grid-template-columns:repeat(2, 1fr); }
  .sub-grid { grid-template-columns:1fr; }
  .metric { padding:32px 20px; }
  .metric-value { font-size:38px; }
  .sub-metric { padding:24px 16px; }
  .sub-metric .metric-value { font-size:26px; }
  button { padding:14px 32px; font-size:11px; }
  #go { padding:16px 44px; font-size:12px; }
  #graph-wrap { padding:24px; margin-bottom:40px; }
  #graph { height:140px; }
}

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

.metric-value.animate {
  animation:fadeInUp 0.4s ease;
}