:root{--bg: #0a0f1f;--accent: #7fe7ff;--font-en: "Outfit", sans-serif;--font-jp: "Noto Sans JP", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:var(--font-en),var(--font-jp);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#bg{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}.blob-blue{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;background:#3b5bff}.blob-purple{width:60vmax;height:60vmax;right:-20vmax;top:-10vmax;background:#b05cff}.blob-cyan{width:55vmax;height:55vmax;left:30vw;bottom:-35vmax;background:#2fd4e0}#app{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#top{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;flex:none}#pause-btn{width:34px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-size:12px;cursor:pointer}#title{font-weight:600;font-size:16px;letter-spacing:.04em}#speed{display:flex;align-items:center;gap:6px}#speed .label{font-size:10px;letter-spacing:.12em;opacity:.7}#speed button{width:30px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;color:#fff;font-size:16px;line-height:1;cursor:pointer}#speed b{min-width:38px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}#progress{flex:1;height:4px;border-radius:2px;background:#ffffff26;overflow:hidden}#progress-fill{height:100%;width:0%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.stat{display:flex;align-items:baseline;gap:6px;min-width:88px}.stat .label{font-size:10px;letter-spacing:.12em;opacity:.7}.stat b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}#play{flex:1;min-height:0;width:100%;display:block;touch-action:none}#bottom{height:26px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.2em;opacity:.7}#debug{position:fixed;right:8px;bottom:8px;z-index:5;font-size:11px;font-family:var(--font-jp);background:#0a0f1fd9;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:4px 8px;max-width:200px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#debug summary{cursor:pointer;opacity:.6;font-family:var(--font-en);letter-spacing:.1em}#debug label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:4px 0}#debug input[type=number],#debug select{width:70px;font-size:11px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:2px 4px}#debug select option{color:#000}#debug button{width:100%;margin-top:4px;font-size:11px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:3px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#0a0f1fc7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-family:var(--font-jp)}.overlay.hidden{display:none}.overlay h1{font-family:var(--font-en);font-size:40px;font-weight:700;letter-spacing:.06em;margin-bottom:10px}.overlay p{font-size:16px}.overlay .hint{margin-top:10px;font-size:12px;opacity:.6}#overlay-portrait{display:none;z-index:20}@media (orientation: portrait){#overlay-portrait{display:flex}}
