@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #000000;--text-primary: #ffffff;--text-muted: rgba(255, 255, 255, .6);--accent: #ffffff;--bar-high: #f43f5e;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-sans: "Inter", system-ui, -apple-system, sans-serif}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);width:100vw;height:100vh;overflow:hidden;margin:0;padding:0}#app{width:100%;height:100%}#visualizer{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1;display:block}.player-container{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;background:#14141499;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:100px;padding:12px 24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px #00000080;transition:opacity .5s ease}.player-container.fade-out{opacity:0}.control-btn{background:none;border:none;color:var(--accent);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:transform .2s ease,background .2s ease}.control-btn:hover{background:#ffffff1a;transform:scale(1.05)}.control-btn svg{display:block;width:100%;height:100%}.progress-wrapper{display:flex;align-items:center;gap:12px;min-width:250px}.player-meta{display:flex;flex-direction:column;gap:4px;min-width:230px}.status-pill{font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#ffffffe6;transition:color .2s ease,text-shadow .2s ease,transform .2s ease}.status-pill.muted{color:#ffffff9e}#preset-indicator.changed{color:#fff;text-shadow:0 0 14px rgba(130,185,255,.55);transform:translate(2px)}#time-current,#time-total{font-size:.75rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:32px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#fff3;border-radius:2px;outline:none;cursor:pointer;position:relative}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.record-btn{background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:100px;font-family:var(--font-sans);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;letter-spacing:.5px}.record-btn:hover:not(:disabled){color:var(--text-primary);border-color:#ffffff80;background:#ffffff0d}.record-btn:disabled{opacity:.3;cursor:not-allowed}.record-btn.recording{background:#f43f5e26;border-color:var(--bar-high);color:var(--bar-high);animation:pulse-record 1.5s infinite alternate}.track-btn{min-width:62px;justify-content:center}@keyframes pulse-record{0%{box-shadow:0 0 5px #f43f5e1a}to{box-shadow:0 0 15px #f43f5e66}}.control-btn.preset-nav{font-size:.9rem;opacity:.7;transition:opacity .2s,transform .2s,background .2s}.control-btn.preset-nav:hover{opacity:1;transform:scale(1.15);background:#ffffff1f}.settings-wrap{position:relative;display:flex;align-items:center}.control-btn.settings{opacity:.82;border:1px solid rgba(255,255,255,.18)}.control-btn.settings.active{opacity:1;background:#b464ff38;box-shadow:0 0 16px #8c5aff73}.control-btn.settings.menu-open{transform:scale(1.05) rotate(18deg);background:#ffffff24}.settings-panel{position:fixed;z-index:44;width:min(300px,92vw);max-height:calc(100vh - 16px);overflow-y:auto;overflow-x:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0a0a0deb;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 24px 48px #0009,0 0 0 1px #ffffff0a inset;display:flex;flex-direction:column;pointer-events:auto}.settings-header{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.07)}.settings-header-icon{width:6px;height:6px;border-radius:50%;background:#a078ffe6;box-shadow:0 0 8px #a078ffb3;flex-shrink:0}.settings-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#ffffff80;flex:1}.settings-body{display:flex;flex-direction:column;padding:8px 0 12px}.settings-section{display:flex;flex-direction:column;gap:2px;padding:0 12px}.settings-section+.settings-section{margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}.settings-section-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#ffffff4d;margin-bottom:6px;padding:0 4px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px;border-radius:10px;transition:background .15s ease}.settings-row:hover{background:#ffffff0a}.settings-row-label{font-size:.8rem;font-weight:500;color:#ffffffe0;line-height:1.2;flex:1}.settings-row-sub{font-size:.65rem;color:#ffffff61;margin-top:1px;font-weight:400}.settings-toggle{position:relative;width:36px;height:20px;flex-shrink:0}.settings-toggle input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.settings-toggle-track{position:absolute;inset:0;border-radius:999px;background:#ffffff1f;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.settings-toggle input:checked+.settings-toggle-track{background:#73d6ffd1;border-color:#73d6ff99;box-shadow:0 0 10px #73d6ff59}.settings-toggle input:disabled+.settings-toggle-track{cursor:default}.settings-toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#ffffffb3;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease}.settings-toggle input:checked+.settings-toggle-track:after{transform:translate(16px);background:#fff}.settings-stack{display:flex;flex-direction:column;gap:6px;padding:4px}.settings-caption{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff61}.settings-note{font-size:.66rem;color:#ffffff8a;line-height:1.45;padding:6px 4px 2px}.settings-select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#ffffff12;color:#ffffffe6;padding:8px 28px 8px 10px;font-size:.78rem;font-family:var(--font-sans);cursor:pointer;transition:border-color .15s ease,background .15s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.settings-select:hover{border-color:#ffffff40;background-color:#ffffff1a}.settings-select:focus{outline:none;border-color:#73d5ff99;box-shadow:0 0 0 2px #73d5ff1f}.settings-select option,.settings-select optgroup{color:#0f1724;background-color:#eef3fb}.settings-select option:checked{color:#fff;background-color:#3f67c8}.settings-apply-btn{width:100%;border-radius:10px;border:1px solid rgba(115,190,255,.25);background:#64a0ff26;color:#ffffffeb;font-size:.73rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 10px;cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.settings-apply-btn:hover{transform:translateY(-1px);background:#64a0ff47;border-color:#91d2ff80;box-shadow:0 4px 16px #64a0ff33}.settings-apply-btn:active{transform:translateY(0);box-shadow:none}.settings-panel[hidden]{display:none}.safety-warning-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:#000000e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.safety-warning-modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;padding:28px 26px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0e0e0ef5;color:#ffffffe0;box-shadow:0 24px 48px #00000080}.safety-warning-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.safety-warning-badge{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff59}.safety-warning-lang-toggle{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 9px;background:transparent;color:#fff6;font-family:var(--font-sans);font-size:.65rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:color .12s ease,border-color .12s ease}.safety-warning-lang-toggle:hover{color:#ffffffbf;border-color:#ffffff47}.safety-warning-lang-toggle:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px}.safety-warning-title{margin:0 0 14px;font-size:1.05rem;font-weight:600;line-height:1.3;color:#ffffffe6}.safety-warning-copy{display:grid;gap:10px;color:#ffffff8c;font-size:.85rem;line-height:1.6}.safety-warning-copy p{margin:0}.safety-warning-note{margin-top:16px;color:#ffffff4d;font-size:.72rem}.safety-warning-actions{display:flex;justify-content:flex-end;margin-top:22px}.safety-warning-accept-btn{appearance:none;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:9px 18px;background:#ffffff12;color:#ffffffe0;font-family:var(--font-sans);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}.safety-warning-accept-btn:hover{background:#ffffff1f;border-color:#ffffff47}.safety-warning-accept-btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}.safety-warning-overlay[hidden],.safety-warning-modal[hidden]{display:none}@media(max-width:768px){.safety-warning-modal{padding:20px 16px;border-radius:14px}.safety-warning-actions{justify-content:stretch}.safety-warning-accept-btn{width:100%;text-align:center}}.fps-overlay{position:fixed;top:16px;right:16px;z-index:20;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#080808c7;color:#ffffffeb;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.fps-overlay.visible{opacity:1;transform:translateY(0)}.player-container::-webkit-scrollbar{display:none}@media(max-width:980px){.player-container{width:min(94vw,760px);border-radius:24px;padding:10px 14px;gap:12px}.progress-wrapper{min-width:180px;flex:1 1 180px}.player-meta{min-width:160px;flex:0 1 auto}}@media(max-width:768px){.player-container{width:100vw;border-radius:20px 20px 0 0;bottom:0;left:0;transform:none;padding:16px 20px 24px;border:none;border-top:1px solid rgba(255,255,255,.08);background:#0a0a0ad9;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);gap:10px}.player-meta{display:none}.progress-wrapper{min-width:100px;flex:1 1 auto}.record-btn{padding:8px 14px;font-size:.8rem}}