@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#f3f0f5;font-synthesis:none;text-rendering:optimizelegibility;font-optical-sizing:auto;--muted:#88858f;--line:#29272f;--panel:#19181e;--purple:#a78bfa;--green:#8ee0b1;background:#101014;font-family:DM Sans,sans-serif;font-weight:400}*{box-sizing:border-box}body{background:radial-gradient(at 50% -20%,#282039 0%,#15131a 42%,#101014 75%);min-width:320px;min-height:100vh;margin:0}button,select{font:inherit}button:focus-visible,select:focus-visible{outline-offset:3px;outline:2px solid #b9a5ff}.app-shell{max-width:1120px;margin:0 auto;padding:30px 38px 25px}.topbar{align-items:center;gap:12px;display:flex}.brand-mark{color:#171321;background:linear-gradient(140deg,#b49cff,#8065d9);border-radius:12px;place-items:center;width:39px;height:39px;display:grid;box-shadow:0 5px 24px #9679ef33}.brand-name{letter-spacing:-.6px;font-family:Manrope,sans-serif;font-size:17px;font-weight:800}.brand-subtitle{letter-spacing:1.5px;color:#8e8998;margin-top:2px;font-family:DM Mono,monospace;font-size:8px}.local-pill{color:#aaa5b1;letter-spacing:1px;border:1px solid #33303b;border-radius:30px;align-items:center;gap:7px;margin-left:auto;padding:7px 11px;font:10px DM Mono,monospace;display:flex}.local-dot,.eyebrow span{background:#8ee0b1;border-radius:50%;width:6px;height:6px;box-shadow:0 0 9px #8ee0b188}.intro{text-align:center;max-width:590px;margin:48px auto 32px}.eyebrow{color:#b6a9d4;letter-spacing:2px;justify-content:center;align-items:center;gap:9px;font:10px DM Mono,monospace;display:flex}.intro h1{letter-spacing:-2.4px;margin:13px 0 10px;font:800 clamp(34px,5vw,51px)/1.12 Manrope,sans-serif}.intro h1 em{color:#b49cff;font-style:normal}.intro p{color:#9c98a4;margin:0;font-size:14px;line-height:1.7}.workspace{grid-template-columns:minmax(0,1.4fr) minmax(300px,.9fr);align-items:stretch;gap:17px;display:grid}.panel{background:linear-gradient(145deg,#1c1b22,#18171d);border:1px solid #302d38;border-radius:16px;box-shadow:0 12px 35px #0002}.video-panel{min-width:0;padding:19px 19px 16px}.panel-heading{justify-content:space-between;align-items:center;margin-bottom:17px;display:flex}.panel-title{letter-spacing:1.2px;color:#e4dfea;align-items:center;gap:9px;font:600 11px DM Mono,monospace;display:flex}.panel-title svg{color:#b49cff}.panel-kicker{color:#706c78;font:10px DM Mono,monospace}.video-empty{aspect-ratio:16/9;color:#f2eff7;cursor:pointer;background:radial-gradient(#282233,#17151c 72%);border:1px dashed #51495f;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:9px;width:100%;transition:border-color .2s,background .2s;display:flex}.video-empty:hover{background:radial-gradient(#322841,#19161f 72%);border-color:#a78bfa}.upload-icon{color:#bba7ff;background:#a78bfa20;border-radius:15px;place-items:center;width:49px;height:49px;margin-bottom:4px;display:grid}.video-empty strong{font-size:14px}.video-empty>span:not(.upload-icon){color:#9b95a5;font-size:11px}.video-empty .file-types{letter-spacing:1px;margin-top:5px;color:#77717f!important;font:9px DM Mono,monospace!important}.video-wrap{aspect-ratio:16/9;background:#08080a;border-radius:10px;place-items:center;width:100%;display:grid;overflow:hidden}.video-wrap video{object-fit:contain;width:100%;height:100%}.video-meta{justify-content:space-between;align-items:center;gap:12px;padding:14px 1px 11px;display:flex}.file-meta{align-items:center;gap:8px;min-width:0;display:flex}.file-icon{color:#a995f3;display:flex}.file-name{color:#d6d1dd;text-overflow:ellipsis;white-space:nowrap;max-width:250px;font-size:11px;overflow:hidden}.file-size,.muted{color:#77727e;white-space:nowrap;font-size:10px}.text-button{color:#b49cff;cursor:pointer;white-space:nowrap;background:0 0;border:0;font-size:11px}.text-button:disabled{opacity:.4;cursor:not-allowed}.timeline{background:#37333e;border-radius:5px;height:3px;overflow:hidden}.timeline-fill{background:#a78bfa;height:100%;transition:width .2s}.time-row{color:#77727f;justify-content:space-between;margin-top:8px;font:10px DM Mono,monospace;display:flex}.side-column{flex-direction:column;gap:17px;display:flex}.mic-panel,.record-panel{padding:19px}.status-tag,.record-indicator{letter-spacing:.7px;color:#8a8491;align-items:center;gap:6px;font:9px DM Mono,monospace;display:flex}.status-tag i,.record-indicator i{background:#666;border-radius:50%;width:6px;height:6px}.status-tag.ready{color:#8ee0b1}.status-tag.ready i{background:#8ee0b1;box-shadow:0 0 8px #8ee0b188}.field-label,.level-header{letter-spacing:1px;color:#827d89;font:9px DM Mono,monospace}.select-wrap{margin-top:8px;position:relative}.select-wrap select{appearance:none;color:#e3dfe9;cursor:pointer;background:#222129;border:1px solid #393541;border-radius:8px;width:100%;padding:11px 34px 11px 11px;font-size:11px}.select-wrap>svg{color:#918b9b;pointer-events:none;position:absolute;top:11px;right:11px}.mic-connect{color:#c9baff;cursor:pointer;background:#302744;border:1px solid #5d4b83;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:10px;padding:10px;font-size:11px;font-weight:600;display:flex}.mic-connect.connected{color:#9ae4b9;background:#1d3028;border-color:#3a654f}.mic-connect:disabled{opacity:.5;cursor:not-allowed}.level-header{justify-content:space-between;margin-top:19px;font-size:8px;display:flex}.level-header span:last-child{color:#8ee0b1}.level-meter{background:#302d36;border-radius:10px;height:7px;margin-top:8px;overflow:hidden}.level-fill{background:linear-gradient(90deg,#68c995,#b6e98c);border-radius:10px;height:100%;transition:width 90ms}.helper{color:#77727f;margin:8px 0 0;font-size:10px}.error-text{color:#ff9e9e;margin:8px 0 0;font-size:10px}.record-panel{text-align:center;flex-direction:column;flex:1;align-items:center;display:flex}.record-panel .panel-heading{width:100%;margin-bottom:10px}.record-indicator{color:#88818d}.record-indicator.live{color:#ff888f}.record-indicator i{background:#817c88}.record-indicator.live i{background:#ff6e78;animation:1.1s infinite pulse;box-shadow:0 0 9px #ff6e7888}.record-clock{letter-spacing:-2px;color:#f1edf7;margin-top:5px;font:500 39px DM Mono,monospace}.record-caption{letter-spacing:1.4px;color:#827d89;margin:5px 0 18px;font:9px DM Mono,monospace}.record-button,.stop-button{letter-spacing:.7px;cursor:pointer;border:0;border-radius:9px;justify-content:center;align-items:center;gap:10px;width:100%;padding:13px 14px;font-size:11px;font-weight:700;transition:transform .15s,opacity .15s;display:flex}.record-button{color:#1b1528;background:linear-gradient(110deg,#b49cff,#9679ed);box-shadow:0 6px 20px #9d7df033}.record-button:hover:not(:disabled),.stop-button:hover:not(:disabled){transform:translateY(-1px)}.record-button:disabled,.stop-button:disabled{opacity:.38;cursor:not-allowed}.record-dot{background:#5c345f;border-radius:50%;width:9px;height:9px}.stop-button{color:#ffb2b5;background:#4a242c;border:1px solid #71343e}.record-hint{color:#77727f;margin-top:11px;font-size:10px;line-height:1.5}.notice{color:#aaa5b0;background:#19181e;border:1px solid #302d38;border-radius:10px;align-items:center;gap:10px;margin-top:17px;padding:12px 14px;font-size:11px;display:flex}.notice-icon{color:#b49cff;display:flex}.success-notice{color:#b6e8c9;border-color:#355442}.success-notice .notice-icon{color:#8ee0b1}.saved-panel{margin-top:14px;padding:17px 19px}.saved-heading{justify-content:space-between;align-items:flex-start;display:flex}.saved-heading p{color:#8c8792;margin:6px 0 0;font-size:11px}.icon-button{color:#85808b;cursor:pointer;background:0 0;border:0;padding:3px}.saved-files{grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;display:grid}.saved-file{background:#222129;border:1px solid #35313d;border-radius:9px;align-items:center;gap:10px;min-width:0;padding:11px;display:flex}.saved-file-icon{border-radius:9px;flex:none;place-items:center;width:34px;height:34px;display:grid}.saved-file-icon.audio{color:#c0adff;background:#342a4a}.saved-file-icon.json{color:#9be1b7;background:#263b32}.saved-file>div{min-width:0}.saved-file strong,.saved-file small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.saved-file strong{color:#e1dce7;font-size:10px}.saved-file small{color:#817b88;margin-top:4px;font-size:9px}footer{color:#68636f;letter-spacing:.5px;justify-content:space-between;align-items:center;margin-top:24px;font:9px DM Mono,monospace;display:flex}footer div{align-items:center;gap:7px;display:flex}footer svg{color:#9b8ac8}@keyframes pulse{50%{opacity:.4;box-shadow:0 0 2px #ff6e78}}@media (width<=760px){.app-shell{padding:22px 18px}.intro{margin:38px auto 26px}.workspace{grid-template-columns:1fr}.side-column{grid-template-columns:1fr 1fr;display:grid}.record-panel{min-height:100%}.saved-files{grid-template-columns:1fr}}@media (width<=520px){.side-column{grid-template-columns:1fr}.intro h1{letter-spacing:-1.5px}.intro p{font-size:12px}.app-shell{padding:18px 13px}.video-panel,.mic-panel,.record-panel{padding:15px}.file-name{max-width:155px}footer{gap:10px;font-size:8px}.local-pill{font-size:8px}}.download-link{color:inherit;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}.download-link:hover{background:#292532;border-color:#a78bfa}
