:root { --ink: #161412; --red: #9e1b1b; --muted: #7d766d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font-family: "Noto Sans JP", sans-serif; touch-action: none; user-select: none; -webkit-user-select: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.35 0.06' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0.35 -0.1'/></filter><rect width='400' height='400' fill='%23fbfaf6'/><rect width='400' height='400' filter='url(%23w)'/></svg>") 0 0 / 400px 400px; }
body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 64px; background: #161412; border-top: 8px solid var(--red); z-index: -1; }
button { font: inherit; color: inherit; cursor: pointer; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.top { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { display: flex; align-items: baseline; gap: 10px; }
.logo b { font-family: "Yuji Syuku", serif; font-size: 32px; }
.logo small { font-size: 12px; color: var(--muted); }
.right { display: flex; gap: 8px; }
.pill { white-space: nowrap; padding: 6px 14px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 12px; font-weight: 700; }
.pill b { font-size: 18px; color: var(--red); margin: 0 2px; }
.pill span { color: var(--muted); }
.copy { position: fixed; left: 28px; top: 100px; width: 320px; pointer-events: none; }
.copy h1 { margin: 0; font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 56px; line-height: 1.15; }
.copy h1 span { color: var(--red); }
.copy p { font-size: 13px; line-height: 1.9; }
.meter { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 900; }
.track { height: 14px; border: 2px solid var(--ink); background: #fff; }
.track i { display: block; height: 100%; background: repeating-linear-gradient(45deg, #7fb4d6 0 8px, #a9cfe6 8px 16px); transition: width .25s; }
.state { font-weight: 700; color: var(--ink); }
body.ready .state { color: var(--red); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .5; } }
.result { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 20px 30px; background: #fff; border: 2px solid var(--ink); border-top: 12px solid var(--red); box-shadow: 8px 8px 0 var(--ink); animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.result span { font-size: 12px; color: var(--muted); }
.result b { font-family: "Yuji Syuku", serif; font-weight: 400; font-size: 28px; }
.result em { font-style: normal; font-size: 46px; font-weight: 900; color: var(--red); line-height: 1; }
.result em small { font-size: 16px; }
.result p { margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.result button { padding: 8px 20px; background: var(--red); color: #fff; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }
@media (max-width: 899px) {
  .copy { left: 16px; right: 16px; top: 62px; width: auto; }
  .copy h1 { font-size: 34px; }
  .copy p { display: none; }
  .logo small { display: none; }
}