:root{
  --bg:#0b1020;
  --card:#151b2f;
  --text:#e9eefc;
  --muted:#a8b1c9;
  --accent:#5aa3ff;
  --ok:#28c277;
  --warn:#ffb020;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 20% -10%, #1a2140 0%, #0b1020 60%);
}
.container{
  max-width:920px;
  margin:32px auto;
  padding:0 16px;
}
h1{
  font-size:28px;
  margin:0 0 16px;
}
h2{
  font-size:18px;
  margin:0 0 12px;
}
.card{
  background:linear-gradient(180deg, #192243 0%, #11182d 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:16px;
  margin:12px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.sub{color:var(--muted); margin-top:6px}
p{margin:8px 0}

.ok{color:var(--ok)}
.warn{color:var(--warn)}

.now{color:var(--muted)}
.countdown{font-weight:600; color:#e3f4ff}

button{background:var(--accent); color:white; border:0; padding:8px 12px; border-radius:8px; cursor:pointer}
button:hover{filter:brightness(1.05)}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0}
.timeline li{
  position:relative;
  padding-left:28px;
  margin:14px 0;
}
.timeline li::before{
  content:""; position:absolute; left:8px; top:0.6em; width:10px; height:10px; border-radius:50%; background:#68a1ff; box-shadow:0 0 0 3px rgba(104,161,255,0.25);
}
.timeline li::after{
  content:""; position:absolute; left:12px; top:1.6em; bottom:-14px; width:2px; background:linear-gradient(#2a355d, transparent);
}
.timeline li:last-child::after{display:none}
.timeline .time{color:#cfe2ff; font-weight:600}
.timeline .materials{color:#e9eefc}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0f1427; border:1px solid #2a355d; color:#e9eefc}
.chip .ico{font-size:14px}

footer{margin-top:16px; color:var(--muted)}