*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{overscroll-behavior:none;width:100%;height:100dvh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;position:fixed;top:0;left:0;overflow:hidden}body{touch-action:manipulation;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:#fff;background:#000}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-track{background:0 0}.app{touch-action:none;width:100vw;height:100dvh;transition:background .5s;position:relative;overflow:hidden}.effect-canvas{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.floating-letter{z-index:2;pointer-events:none;text-shadow:0 0 20px,0 4px 8px #00000080;transform-origin:50%;font-size:clamp(50px,10vw,80px);font-weight:900;animation:1.5s ease-out forwards letterPop;position:absolute}@keyframes letterPop{0%{opacity:0;transform:scale(0)rotate(-15deg)}15%{opacity:1;transform:scale(1.3)rotate(5deg)}30%{opacity:1;transform:scale(1)rotate(0)}to{opacity:0;transform:scale(.8)translateY(-60px)rotate(10deg)}}.show-ui-btn{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:100;-webkit-backdrop-filter:blur(10px);cursor:pointer;opacity:.5;touch-action:manipulation;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:22px;transition:opacity .3s,transform .3s;display:flex;position:fixed}.show-ui-btn:hover,.show-ui-btn:active{opacity:1;transform:scale(1.1)rotate(45deg)}.overlay-panel{z-index:50;width:100%;height:100dvh;padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(20px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#000000d9;flex-direction:column;justify-content:flex-start;align-items:center;gap:20px;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0;overflow:hidden auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.panel-header{text-align:center}.app-title{color:#fff;background:linear-gradient(135deg,#ff6b6b,#ffe66d,#4ecdc4,#a78bfa,#ff6b6b) 0 0/300% 300%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(28px,5vw,48px);font-weight:900;animation:4s infinite gradientShift}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.app-subtitle{color:#ffffffb3;font-size:clamp(14px,2.5vw,18px);font-weight:400}.preset-grid{grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:600px;display:grid}@media (width<=640px){.preset-grid{grid-template-columns:repeat(2,1fr);gap:10px}}@media (width<=360px){.preset-grid{gap:8px}}.preset-card{cursor:pointer;color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#ffffff0d;border:2px solid #ffffff1a;border-radius:16px;flex-direction:column;align-items:center;gap:6px;min-height:100px;padding:16px 10px;font-family:inherit;transition:all .25s;display:flex}.preset-card:hover,.preset-card:active{background:#ffffff1a;border-color:#ffffff4d;transform:translateY(-2px)}.preset-card.active{background:#4ecdc426;border-color:#4ecdc4;box-shadow:0 0 20px #4ecdc433}.preset-card.stem{background:#4ecdc40a;border-color:#4ecdc433}.preset-card.stem.active{background:#4ecdc433;border-color:#4ecdc4;box-shadow:0 0 24px #4ecdc459}@media (width<=640px){.preset-card{border-radius:14px;min-height:90px;padding:12px 8px}}.preset-card.locked{opacity:.55;background:#ffdd5708;border-color:#ffdd5726}.preset-card.locked:hover{opacity:.8;background:#ffdd5714;border-color:#ffdd5759}.preset-emoji{font-size:clamp(28px,6vw,36px);line-height:1}.preset-name{letter-spacing:.3px;font-size:clamp(12px,2.8vw,14px);font-weight:700}.preset-desc{color:#ffffff80;text-align:center;font-size:clamp(10px,2.2vw,11px);line-height:1.3}@media (width<=360px){.preset-desc{display:none}}.panel-actions{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:600px;margin-top:8px;display:flex}.action-btn{cursor:pointer;touch-action:manipulation;border:none;border-radius:12px;flex:180px;min-width:150px;max-width:280px;min-height:48px;padding:14px 28px;font-family:inherit;font-size:16px;font-weight:700;transition:all .2s}@media (width<=640px){.action-btn{padding:14px 20px;font-size:15px}}.fullscreen-btn{color:#fff;background:#ffffff1a;border:1px solid #fff3}.fullscreen-btn:hover{background:#fff3}.play-btn{color:#000;background:linear-gradient(135deg,#4ecdc4,#44cf6c);box-shadow:0 4px 15px #4ecdc44d}.play-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #4ecdc466}.hint-text{color:#fff6;text-align:center;font-size:13px}.bg-flash{z-index:0;opacity:.12;pointer-events:none;width:100%;height:100%;animation:.2s ease-out forwards flashFade;position:absolute;top:0;left:0}@keyframes flashFade{0%{opacity:.15}to{opacity:0}}.hint-text kbd{color:#ffffffb3;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:2px 8px;font-family:monospace;font-size:12px;display:inline-block}