/* ...existing styles... */
:root { --bg:#fff; --fg:#111; --muted:#666; --line:#eaeaea; --accent:#111; }
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ...existing styles... */
.wrap {
  min-height:100dvh; display:grid; place-items:center; padding:64px 20px; text-align:center; gap:24px;
}
.title { font-size: clamp(28px, 5vw, 44px); line-height:1.1; letter-spacing:-0.02em; font-weight:800; }
.subtitle { color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); margin:0; }
/* ...existing styles... */
.mark { color:var(--fg); }
.cone { display:block; margin-inline:auto; transform: translateZ(0); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .cone{ animation:none } .bar{ animation:none } }
/* ...existing styles... */
.progress {
  width:min(520px, 90vw); height:6px; border-radius:999px; background:var(--line);
  overflow:hidden; margin:6px auto 0; position:relative;
}
.bar {
  width:45%; height:100%; background:var(--fg);
  transform-origin:left center; animation: loading 2.2s cubic-bezier(.3,.6,.4,1) infinite;
}
@keyframes loading {
  0% { transform: translateX(-60%) scaleX(0.4); opacity:.5 }
  50% { transform: translateX(40%)  scaleX(1.0); opacity:.9 }
  100%{ transform: translateX(140%) scaleX(0.4); opacity:.5 }
}
/* ...existing styles... */
.foot { display:flex; gap:10px; align-items:center; justify-content:center; color:var(--muted); margin-top:6px; }
.sep { opacity:.4; }
.mono { font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }