*{box-sizing:border-box;margin:0;padding:0}html,body{background:#0a1a2e;width:100%;height:100%;font-family:ui-serif,Georgia,Times New Roman,serif;overflow:hidden}canvas{display:block}.title{color:#f4ead8;text-shadow:0 2px 24px #00000073;-webkit-user-select:none;user-select:none;pointer-events:none;animation:2.4s both fade-in;position:fixed;top:28px;left:32px}.title h1{letter-spacing:.06em;font-size:clamp(26px,3.4vw,42px);font-weight:500}.title .sub{opacity:.75;letter-spacing:.03em;margin-top:6px;font-size:clamp(12px,1.2vw,15px);font-style:italic}.phase{color:#f4ead8;letter-spacing:.12em;opacity:.85;text-shadow:0 2px 16px #0006;-webkit-user-select:none;user-select:none;pointer-events:none;font-variant-numeric:tabular-nums;font-size:15px;animation:2.4s both fade-in;position:fixed;top:32px;right:36px}.controls{-webkit-backdrop-filter:blur(10px);color:#f4ead8;-webkit-user-select:none;user-select:none;background:#0a101a52;border:1px solid #ffffff1f;border-radius:14px;align-items:center;gap:16px;padding:12px 18px;animation:2.4s both fade-in;display:flex;position:fixed;bottom:26px;left:32px}.speed{letter-spacing:.08em;opacity:.9;align-items:center;gap:10px;font-size:12px;display:flex}.speed input[type=range]{accent-color:#f4b35f;cursor:pointer;width:110px}.btn{letter-spacing:.08em;color:#f4ead8;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:999px;padding:7px 14px;font-family:inherit;font-size:12px;transition:background .25s,opacity .25s}.btn:hover{background:#fff3}.btn.off{opacity:.5}.hint{color:#f4ead8;letter-spacing:.06em;opacity:.9;text-shadow:0 2px 12px #00000080;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px;transition:opacity 1.6s;animation:3s both fade-in;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}.hint.fade{opacity:0}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.title{top:18px;left:20px}.phase{top:22px;right:22px}.hint{display:none}}