*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#05070d;--panel:#0d111ceb;--line:#78a0dc1f;--text:#dfe8f5;--text-dim:#8291a8;--accent:#4fd8ff;--accent2:#7aa2ff;--danger:#ff7a8a}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}#app{height:100vh;display:flex}#viewport{flex:1;min-width:0;position:relative}#viewport canvas{display:block}#viewport-bg{z-index:0;background:radial-gradient(70% 55% at 50% 26%,#1a2a4d 0%,#0b1122 52%,#05070d 100%);position:absolute;top:0;bottom:0;left:0;right:0}#viewport>canvas{z-index:1;position:relative}.chips{z-index:5;flex-wrap:wrap;gap:8px;display:flex;position:absolute;top:14px;left:14px}.chip{color:#a9c7e8;border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080e1ab8;border-radius:999px;padding:4px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}#subtitle{z-index:5;text-align:center;letter-spacing:.5px;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0408109e;border-radius:12px;max-width:72%;padding:10px 18px;font-size:17px;line-height:1.75;transition:opacity .25s;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}#subtitle.show{opacity:1}#subtitle em{color:var(--text-dim);margin-bottom:4px;font-size:11px;font-style:normal;display:block}#subtitle span{color:#c7d6ea;transition:color .12s}#subtitle span.on{color:#fff;text-shadow:0 0 12px #4fd8ffcc}#drop-hint{z-index:5;color:#5f7292;background:#080e1a80;border:1px dashed #78a0dc40;border-radius:8px;padding:5px 10px;font-size:11px;position:absolute;bottom:14px;right:14px}#loading{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#05070dbf;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .3s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#loading.hidden{opacity:0;pointer-events:none}#loading .ring{border:3px solid #4fd8ff26;border-top-color:var(--accent);border-radius:50%;width:46px;height:46px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{color:var(--text-dim);letter-spacing:1px;font-size:13px}#panel{z-index:6;background:var(--panel);border-left:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex-direction:column;flex-shrink:0;gap:16px;width:392px;padding:18px 18px 24px;display:flex;overflow-y:auto}#panel::-webkit-scrollbar{width:8px}#panel::-webkit-scrollbar-thumb{background:#78a0dc2e;border-radius:4px}.panel-header h1{letter-spacing:2px;font-size:18px}.panel-header h1:before{content:"";background:var(--accent);width:8px;height:8px;box-shadow:0 0 10px var(--accent);border-radius:50%;margin-right:9px;display:inline-block}.panel-header p{color:var(--text-dim);margin-top:6px;font-size:11px;line-height:1.6}.tabs{background:#080c16b3;border-radius:10px;gap:6px;padding:4px;display:flex}.tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:8px 0;font-size:13px;transition:all .18s}.tab.active{color:var(--accent);background:#4fd8ff24}.tab-page{flex-direction:column;gap:9px;display:none}.tab-page.active{display:flex}.field-label{color:var(--text-dim);margin-top:4px;font-size:12px}.field-label span{color:var(--accent)}textarea,select{width:100%;color:var(--text);border:1px solid var(--line);resize:vertical;background:#080c16d9;border-radius:9px;outline:none;padding:9px 11px;font-family:inherit;font-size:13px}textarea:focus,select:focus{border-color:#4fd8ff73}select option{background:#0d1220}input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg, var(--accent), var(--accent2));border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #4fd8ffcc}input[type=file]{width:100%;color:var(--text-dim);border:1px dashed var(--line);background:#080c16d9;border-radius:9px;outline:none;padding:9px 11px;font-size:12px}input[type=file]::-webkit-file-upload-button{color:var(--accent);cursor:pointer;background:#4fd8ff1f;border:none;border-radius:6px;margin-right:10px;padding:5px 10px;font-size:12px}input[type=file]::file-selector-button{color:var(--accent);cursor:pointer;background:#4fd8ff1f;border:none;border-radius:6px;margin-right:10px;padding:5px 10px;font-size:12px}.btn-row{gap:9px;margin-top:4px;display:flex}.btn{letter-spacing:1px;cursor:pointer;text-align:center;border:none;border-radius:9px;flex:1;padding:10px 0;font-family:inherit;font-size:13.5px;transition:all .18s}.btn.primary{color:#fff;background:linear-gradient(135deg,#2fb9e8,#6a8dff);box-shadow:0 4px 18px #3f9bff59}.btn.primary:hover{filter:brightness(1.12)}.btn.primary:active{transform:translateY(1px)}.btn.ghost{color:#b7c8e0;border:1px solid var(--line);background:#78a0dc14;justify-content:center;align-items:center;display:inline-flex}.btn.ghost:hover{color:var(--accent);border-color:#4fd8ff66}.btn.danger{color:var(--danger);background:#ff7a8a24}.file-btn{position:relative;overflow:hidden}.hint{color:#5f7292;font-size:11px;line-height:1.7}.demo-list{gap:8px;display:flex}.demo-btn{color:var(--accent);cursor:pointer;background:#4fd8ff12;border:1px solid #4fd8ff40;border-radius:9px;flex:1;padding:10px 6px;font-family:inherit;font-size:12.5px;transition:all .18s}.demo-btn:hover{background:#4fd8ff29}.time-row{color:var(--text-dim);justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:11px;display:flex}#audio-name{text-overflow:ellipsis;white-space:nowrap;max-width:55%;overflow:hidden}.level-meter{border:1px solid var(--line);background:#080c16e6;border-radius:5px;height:10px;margin-top:6px;overflow:hidden}#level-bar{background:linear-gradient(90deg,#35d0a0,#4fd8ff 60%,#ff7a8a);width:0%;height:100%;transition:width 80ms linear}.viz{flex-direction:column;gap:8px;display:flex}.viz-head{color:var(--text-dim);justify-content:space-between;align-items:baseline;font-size:12px;display:flex}#viseme-now{color:var(--accent);font-family:ui-monospace,Menlo,monospace;font-size:12px}#mel-info{font-family:ui-monospace,Menlo,monospace;font-size:11px}#viseme-meter,#spectrogram{border:1px solid var(--line);background:#060a12d9;border-radius:9px;width:100%}.panel-footer{color:#4d5c75;text-align:center;margin-top:auto;font-size:11px}#toast{z-index:99;color:#ffd7dc;opacity:0;pointer-events:none;background:#141a2af2;border:1px solid #ff7a8a66;border-radius:10px;padding:9px 20px;font-size:13px;transition:all .25s;position:fixed;top:18px;left:50%;transform:translate(-50%)translateY(-8px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}@media (max-width:880px){#app{flex-direction:column}#viewport{height:52vh}#panel{border-left:none;border-top:1px solid var(--line);flex:1;width:100%}}