:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,sans-serif;color:#fff;background:#051d48;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{border:0;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff;outline-offset:3px}.groove-app{--energy:0;position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:9px;background:#092a68}.color-field{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-3;background:linear-gradient(180deg,#122d79,#175c93 28%,#167c91 58%,#074c83);transition:filter .8s ease}.level-1 .color-field{background:linear-gradient(180deg,#253587,#7864a9 36%,#d18eaa 64%,#07558e)}.level-2 .color-field{background:linear-gradient(180deg,#303c91,#b071a9 38%,#f19a8e 67%,#08619d)}.level-3 .color-field{background:linear-gradient(180deg,#433e94,#d67c9e 34%,#ff9a66 66%,#08629d)}.color-field:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 48%,rgba(255,220,188,calc(.08 + var(--energy)*.34)),transparent 34%),linear-gradient(120deg,rgba(5,16,65,.15),transparent 55%)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:3px 1px 12px;border-bottom:1px solid #ffffff2e}.brand{margin:0;font-size:.76rem;letter-spacing:.18em;font-weight:700}.subbrand{margin:3px 0 0;font-size:.61rem;letter-spacing:.35em;color:#fff9;font-weight:700}.header-buttons{display:flex;gap:5px}.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#ffffff12;border:1px solid #ffffff2e}.status{display:flex;align-items:center;justify-content:space-between;font-size:.78rem}.status>div{display:flex;align-items:center;gap:8px}.status small{font-size:.62rem;color:#fffb}.live-dot{width:9px;height:9px;border-radius:50%;background:#fff6}.live-dot.on{background:#ffad8d;box-shadow:0 0 13px #ff9b79}.groove-stage{min-height:0;display:grid;grid-template-rows:minmax(210px,1fr) auto auto;place-items:center}.energy-orb{position:relative;width:min(74vw,380px,46dvh);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:transparent;touch-action:manipulation}.halo{position:absolute;border-radius:50%;border:1px solid #ffffff66;box-shadow:0 0 calc(8px + var(--energy)*28px) #ffd5bd55;transition:transform .5s ease,opacity .5s ease}.halo-1{width:52%;aspect-ratio:1;background:radial-gradient(circle,#ffffff32,#ffb79e17 55%,transparent)}.halo-2{width:72%;aspect-ratio:1;opacity:calc(.28 + var(--energy)*.45);transform:scale(calc(.92 + var(--energy)*.08))}.halo-3{width:94%;aspect-ratio:1;opacity:calc(.12 + var(--energy)*.33);transform:scale(calc(.88 + var(--energy)*.12))}.level-label{position:relative;z-index:2;display:grid;text-align:center}.level-label small{font-size:.54rem;letter-spacing:.2em;color:#fffb}.level-label strong{font-size:clamp(1.55rem,8vw,2.7rem);letter-spacing:.06em;margin:5px 0}.level-label em{font-style:normal;font-size:.7rem;color:#fffc}.energy-orb i{--angle:calc(var(--i)*36deg);position:absolute;width:calc(2px + var(--hit)*3px);height:calc(2px + var(--hit)*3px);border-radius:50%;background:#fff;box-shadow:0 0 9px #fff;transform:rotate(var(--angle)) translateY(calc(-78px - var(--energy)*70px));opacity:calc(.15 + var(--energy)*.75)}.energy-meter{width:min(78%,340px);height:5px;border-radius:8px;background:#ffffff26;overflow:hidden}.energy-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6fd1d2,#ff9b75);transition:width .15s linear}.groove-stage>p{text-align:center;margin:12px 0 0;font-size:1.06rem;font-weight:650}.groove-stage>p small{display:block;margin-top:5px;font-size:.63rem;font-weight:450;color:#fffb}.groove-controls{width:100%;max-width:540px;margin:auto;display:grid;gap:8px}.whistle,.start-btn{min-height:62px;border-radius:20px;background:linear-gradient(110deg,#ff625e,#ff9b56);box-shadow:0 14px 36px #6d274a45,inset 0 1px #fff6;font-size:1.35rem;font-weight:750}.whistle span{display:block;font-size:.53rem;letter-spacing:.19em;margin-top:2px;color:#ffffffbd}.secondary-row{display:grid;grid-template-columns:1fr auto;gap:8px}.stop-btn,.strong-hit{min-height:48px;border-radius:16px;border:1px solid #ffffff55;background:#123f7d40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.strong-hit{padding:0 18px;font-size:.72rem}.volume-link{justify-self:center;background:transparent;display:flex;align-items:center;gap:6px;font-size:.68rem;color:#fffc}.welcome{display:flex;flex-direction:column;justify-content:space-between;padding-top:max(52px,calc(env(safe-area-inset-top) + 28px))}.welcome .color-field{background:linear-gradient(165deg,#102c78,#5562a8 32%,#c182ad 55%,#fb9a83 72%,#075891)}.welcome-copy,.welcome-actions{width:100%;max-width:540px;margin:0 auto}.welcome-kicker{font-size:.67rem;letter-spacing:.26em;font-weight:700}.welcome h1{margin:6px 0 22px;font-size:clamp(4.2rem,21vw,7rem);line-height:.9;letter-spacing:-.07em}.welcome-lead{font-size:clamp(1.28rem,5.8vw,1.9rem);line-height:1.55;font-weight:600}.level-preview{display:flex;gap:7px;margin:24px 0 20px;flex-wrap:wrap}.level-preview span{padding:7px 9px;border-radius:99px;background:#ffffff13;border:1px solid #ffffff2b;font-size:.55rem;letter-spacing:.08em}.welcome-note{font-size:.84rem;line-height:1.8;color:#fffd}.welcome-actions{display:grid;gap:10px}.start-btn{width:100%;font-size:1.04rem}.safety-link{background:transparent;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px}.welcome-actions>small{text-align:center;font-size:.65rem;color:#fffa}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#03112e66;padding:12px;display:flex;align-items:flex-end}.settings-sheet{width:min(100%,560px);max-height:92dvh;overflow:auto;margin:auto;padding:21px;border-radius:27px;background:#102e65c9;border:1px solid #ffffff30;box-shadow:0 25px 70px #00143f88;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.sheet-header p{margin:0;font-size:.58rem;letter-spacing:.22em;color:#fffa}.sheet-header h2{margin:5px 0 0;font-size:1.35rem}.setting-list{display:grid;gap:6px}.range-row,.select-row{min-height:58px;padding:11px 13px;border-radius:15px;background:#ffffff0e;border:1px solid #ffffff14}.range-row{display:grid;gap:8px}.range-row span,.select-row{display:flex;align-items:center;justify-content:space-between;font-size:.8rem}.range-row output{color:#fffa}.range-row input{width:100%;accent-color:#ff9476}.select-row select{color:#fff;background:#163b77;border:1px solid #ffffff33;border-radius:9px;padding:7px 26px 7px 9px}.select-row input{width:21px;height:21px;accent-color:#ff9476}.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.sheet-actions button{min-height:45px;border-radius:14px;border:1px solid #ffffff4c;background:#ffffff0d;font-size:.72rem}.version{text-align:center;font-size:.62rem;color:#fff8}.safety-sheet .primary-button{min-height:56px;border-radius:17px;background:linear-gradient(110deg,#ff625e,#ff9b56);width:100%}.safety-list{padding-left:1.2em;line-height:1.6;display:grid;gap:8px;font-size:.82rem}.eyebrow{font-size:.6rem;letter-spacing:.2em}.text-button{background:transparent}.primary-button{color:#fff}@media(min-width:700px){body{display:grid;place-items:center;background:#06152e}.groove-app{width:480px;min-height:min(920px,100dvh);max-height:100dvh;border-radius:28px;box-shadow:0 35px 90px #0009}.sheet-backdrop{position:absolute}}@media(max-height:700px){.groove-app{padding-top:max(12px,env(safe-area-inset-top))}.energy-orb{width:min(56vw,250px,31dvh)}.groove-stage{grid-template-rows:minmax(130px,1fr) auto auto}.whistle{min-height:52px}.status{font-size:.7rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.welcome-copy h1{margin:0;max-width:9ch;font-size:clamp(3.75rem,18vw,6.25rem);line-height:.88;letter-spacing:-.065em;font-weight:720}.welcome-product{margin:12px 0 0;font-size:clamp(1.5rem,7vw,2.1rem);line-height:1;font-weight:700;letter-spacing:-.025em}.welcome .welcome-lead{margin:34px 0 0;font-size:clamp(1.25rem,5.6vw,1.8rem);line-height:1.5;font-weight:620}@media(max-height:760px){.welcome-copy h1{font-size:clamp(3.25rem,15vw,5rem)}.welcome-product{margin-top:8px}.welcome .welcome-lead{margin-top:22px}.level-preview{margin:17px 0 14px}.welcome-note{margin:0}}