microWakeWord-Trainer-Nvidia-Docker/static/ui/trainer-ui.css

:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f3f1ee;font-synthesis:none;--bg:#0d0d0e;--surface:#1d1d1fe6;--surface-solid:#1c1c1e;--surface-2:#2b2b2ecc;--line:#ffffff1a;--line-strong:#ffffff2e;--text:#f3f1ee;--muted:#aaa6a0;--orange:#ff9134;--orange-2:#ffb267;--violet:#77736e;--blue:#a8a5a1;--green:#44dda5;--red:#ff6c7d;--yellow:#ffc561;--shadow:0 24px 70px #00000052;background:#0d0d0e;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-height:100%}body{background:radial-gradient(circle at 78% -10%,#ff913414,#0000 34%),linear-gradient(145deg,#121213,#0d0d0e 60%,#151413);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button,.button{border:1px solid var(--line-strong);min-height:42px;color:var(--text);cursor:pointer;background:#303033db;border-radius:12px;padding:9px 16px;font-weight:700;transition:border-color .18s,transform .18s,background .18s,box-shadow .18s}button:hover:not(:disabled),.button:hover:not(:disabled){background:#3e3d3df0;border-color:#ff91348c;transform:translateY(-1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #ff9134e0}button:disabled{opacity:.43;cursor:not-allowed}.button.primary{color:#18100a;background:linear-gradient(135deg, var(--orange), #ffb45f);border-color:#ffad63;box-shadow:0 10px 28px #ff7e2330}.button.primary:hover:not(:disabled){background:linear-gradient(135deg,#ffa04c,#ffc078)}.button.danger{color:#fff;background:#ff4e6533;border-color:#ff6c7d8a}.button.ghost{background:0 0}.button.large{min-width:min(100%,360px);min-height:54px;font-size:16px}.app-shell{width:min(1180px,100% - 36px);margin:0 auto;padding:30px 0 80px;position:relative}.ambient{z-index:-1;filter:blur(95px);opacity:.16;pointer-events:none;border-radius:50%;width:380px;height:380px;position:fixed}.ambient-one{background:var(--violet);top:-160px;right:4vw}.ambient-two{background:var(--orange);bottom:-180px;left:-70px}.app-header{justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px;display:flex}.brand{align-items:center;gap:16px;display:flex}.brand-mark{background:radial-gradient(circle at 50% 36%,#383330,#191819 72%);border:1px solid #ffa45266;border-radius:19px;flex:none;place-items:center;width:58px;height:58px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff1f,0 14px 36px #00000040}.brand-mark img{object-fit:contain;filter:drop-shadow(0 5px 9px #0000005c);width:56px;height:56px;display:block}.brand h1,.hero h2,.panel h3,.modal h2{font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif}.brand h1{letter-spacing:-.035em;margin:2px 0 1px;font-size:clamp(22px,3vw,31px)}.brand p,.hero p,.panel p,.modal p{color:var(--muted);margin:0;line-height:1.55}.brand p{font-size:13px}.eyebrow{color:var(--orange-2);letter-spacing:.18em;text-transform:uppercase;font-size:10px;font-weight:800}.header-status{align-items:center;gap:10px;display:flex}.live-dot,.session-chip{border:1px solid var(--line);min-height:34px;color:var(--muted);background:#181819c7;border-radius:999px;align-items:center;padding:7px 11px;font-size:12px;font-weight:700;display:inline-flex}.live-dot i{background:var(--green);border-radius:50%;width:7px;height:7px;margin-right:7px;box-shadow:0 0 0 4px #44dda51a}.tabs{z-index:20;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#141415e6;border-radius:16px;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:18px;padding:6px;display:grid;position:sticky;top:12px;box-shadow:0 14px 36px #0003}.tabs button{min-height:42px;color:var(--muted);background:0 0;border-color:#0000;padding:8px;font-size:13px;position:relative}.tabs button.active{color:#fff;background:linear-gradient(135deg,#ff913438,#5c595638);border-color:#ff98416b;box-shadow:inset 0 1px #ffffff0d}.tabs button b{color:#23120b;background:var(--orange);border-radius:99px;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 4px;font-size:10px;display:inline-grid}.tab-short{display:none}.main-content{gap:16px;display:grid}.hero,.panel,.native-notice{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:22px}.hero{justify-content:space-between;align-items:flex-end;gap:30px;min-height:210px;padding:34px;display:flex;position:relative;overflow:hidden}.hero:after{content:"";background:radial-gradient(circle,#ff913438,#0000 67%);border-radius:50%;width:290px;height:290px;position:absolute;bottom:-95px;right:-45px}.auto-hero:after{background:radial-gradient(circle,#ff913429,#0000 67%)}.capture-hero:after{background:radial-gradient(circle,#beb8b11f,#0000 67%)}.firmware-hero:after{background:radial-gradient(circle,#ff913421,#0000 67%)}.hero>*{z-index:1;position:relative}.hero h2{letter-spacing:-.05em;max-width:760px;margin:8px 0;font-size:clamp(27px,5vw,48px);line-height:1.02}.hero p{max-width:720px;font-size:15px}.hero-pill{flex:none}.step-row{gap:7px;min-width:165px;display:grid}.step-row span{color:#d5d1cc;align-items:center;gap:8px;font-size:12px;font-weight:700;display:flex}.step-row b,.number{color:#26150b;background:linear-gradient(135deg, var(--orange), #ffc175);border-radius:11px;flex:none;place-items:center;width:32px;height:32px;font-size:12px;display:inline-grid}.panel{padding:26px}.panel-head{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:23px;display:grid}.panel-head h3{letter-spacing:-.025em;margin:0 0 3px;font-size:20px}.panel-head p{font-size:13px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.phrase-form{grid-template-columns:repeat(2,minmax(0,1fr))}.field{align-content:start;gap:7px;display:grid}.field>span{color:#ddd9d4;letter-spacing:.01em;font-size:12px;font-weight:800}.field.wide{grid-column:1/-1}.field input,.field select{border:1px solid var(--line-strong);width:100%;min-height:46px;color:var(--text);background:#0f0f10d1;border-radius:12px;padding:10px 13px}.field select{appearance:auto}.field input:disabled,.field select:disabled{opacity:1;cursor:not-allowed;color:#aaa7a3;-webkit-text-fill-color:#aaa7a3;background:#464544b8;border-color:#97938e38}.field small,.dropzone small,.progress-card small,.stack>small{color:var(--muted);font-size:11px;line-height:1.45}.row{align-items:center;gap:9px;display:flex}.row.space{justify-content:space-between}.form-actions{margin-top:16px}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.stats article{border:1px solid var(--line);background:#1212139e;border-radius:15px;gap:5px;min-height:105px;padding:17px;display:grid}.stats span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}.stats strong{align-self:end;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;font-size:30px}.stats .format-value{font-size:15px;line-height:1.35}.train-action{place-items:center;padding:29px 0 19px;display:grid}.panel-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:14px;padding-top:17px;font-size:12px;display:flex}.pill{border:1px solid var(--line-strong);color:#d1cdc8;white-space:nowrap;background:#302f2fbd;border-radius:999px;align-items:center;width:fit-content;min-height:29px;padding:5px 10px;font-size:11px;font-weight:800;display:inline-flex}.pill.success{color:#8bf2cc;background:#24a07621;border-color:#44dda559}.pill.warning{color:#ffd58a;background:#d6922421;border-color:#ffc5615c}.pill.error{color:#ffabb5;background:#dc445821;border-color:#ff6c7d5c}.toggle-list{gap:9px;margin-bottom:18px;display:grid}.toggle-list.compact{margin:15px 0 0}.toggle-list label{border:1px solid var(--line);cursor:pointer;background:#1212138f;border-radius:14px;align-items:flex-start;gap:12px;padding:13px;display:flex}.toggle-list input{width:18px;height:18px;accent-color:var(--orange);margin:2px 0 0}.toggle-list label>span{gap:3px;display:grid}.toggle-list small{color:var(--muted);line-height:1.45}.link-row{align-items:center;gap:10px;margin-top:15px;display:flex}.action-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;display:grid}.audit,.transcript{color:#d2cec9;background:#ff91340e;border:1px solid #ff913438;border-radius:13px;padding:13px;font-size:12px;line-height:1.55}.action-panel .audit{margin-top:15px}.audio-list,.word-list{gap:12px;display:grid}.audio-card{border:1px solid var(--line);background:#121213a3;border-radius:17px;gap:13px;padding:17px;display:grid}.audio-card header,.audio-card footer{justify-content:space-between;align-items:flex-start;gap:15px;display:flex}.audio-card header>div:first-child{gap:3px;min-width:0;display:grid}.audio-card header strong{overflow-wrap:anywhere}.audio-card small,.audio-card footer>span{color:var(--muted);font-size:11px;line-height:1.5}.audio-card audio{width:100%;height:42px}.audio-card footer{align-items:center}.audio-card footer>div{flex-wrap:wrap;justify-content:flex-end;gap:7px;display:flex}.audio-card footer button{min-height:36px;padding:6px 11px;font-size:11px}.meta-row{flex-wrap:wrap;gap:6px;display:flex}.meta-row span{border:1px solid var(--line);color:#bdb8b2;background:#323131ad;border-radius:99px;padding:4px 8px;font-size:10px}.empty-state{border:1px dashed var(--line-strong);min-height:130px;color:var(--muted);text-align:center;border-radius:15px;place-items:center;padding:24px;display:grid}.toolbar{flex-wrap:wrap;margin-bottom:14px}.segment-control{border:1px solid var(--line);background:#101011ad;border-radius:12px;gap:4px;padding:4px;display:flex}.segment-control button{background:0 0;border-color:#0000;min-height:34px;padding:5px 9px;font-size:11px}.segment-control button.active{background:#ff913424;border-color:#ff913447}.segment-control b{color:var(--orange-2);margin-left:4px}.pagination{color:var(--muted);justify-content:center;align-items:center;gap:12px;margin-top:16px;font-size:12px;display:flex}.dropzone{cursor:pointer;background:#ff91340d;border:1px dashed #ff913473;border-radius:16px;justify-content:space-between;align-items:center;gap:18px;min-height:100px;margin-bottom:14px;padding:19px;display:flex;position:relative}.dropzone input{opacity:0;cursor:pointer;position:absolute;inset:0}.dropzone span{gap:5px;display:grid}.dropzone>b{color:var(--orange-2);white-space:nowrap;background:#ff913426;border-radius:10px;padding:8px 12px;font-size:12px}.progress-card{border:1px solid var(--line);background:#121213a3;border-radius:14px;gap:9px;margin-top:15px;padding:14px;display:grid}.progress-card>div:first-child{justify-content:space-between;gap:10px;display:flex}.progress-card span{color:var(--orange-2);font-size:12px}.progress-track{background:#ffffff12;border-radius:99px;height:7px;overflow:hidden}.progress-track i{border-radius:inherit;background:linear-gradient(90deg, var(--orange), var(--violet));height:100%;transition:width .2s;display:block}.native-notice{color:var(--muted);align-items:center;gap:12px;padding:14px 18px;font-size:12px;display:flex}.native-notice strong{color:var(--green)}.esphome-notice strong{color:var(--orange-2)}.compatibility-panel{padding-top:19px}.compatibility-panel .panel-head{margin-bottom:15px}.word-list article{border:1px solid var(--line);background:#121213a3;border-radius:15px;justify-content:space-between;align-items:center;gap:20px;padding:16px;display:flex}.word-list article>div{gap:6px;min-width:0;display:grid}.word-list a{overflow-wrap:anywhere;color:var(--orange-2);font-size:11px;text-decoration:none}.data-hero:after{background:radial-gradient(circle,#b0aba426,#0000 67%)}.data-panel{padding-bottom:18px}.data-list{gap:9px;display:grid}.data-row{border:1px solid var(--line);background:#121213a3;border-radius:15px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:15px 16px;display:grid}.data-row.empty{background:#12121357}.data-copy{gap:6px;min-width:0;display:grid}.data-title{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.data-title strong{font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;font-size:15px}.data-title code{overflow-wrap:anywhere;border:1px solid var(--line);color:#aaa6a0;background:#3736358c;border-radius:7px;padding:3px 7px;font:10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}.data-copy small,.data-note,.data-usage span{color:var(--muted);font-size:11px;line-height:1.45}.data-note{color:#c7a57d}.data-usage{text-align:right;gap:4px;min-width:105px;display:grid}.data-usage strong{color:var(--orange-2);font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif;font-size:16px}.data-row.empty .data-usage strong{color:#8c8883}.data-row>button{min-width:82px}.data-warning{background:#d6922417;border:1px solid #ffc5614d;border-radius:12px;padding:11px 13px;font-size:12px;color:#ffd58a!important;margin-top:14px!important}.loading-panel{min-height:400px;color:var(--muted);justify-content:center;align-items:center;gap:12px;display:flex}.spinner{border:2px solid #ffffff24;border-top-color:var(--orange);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050506cc;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line-strong);background:#1c1c1e;border-radius:21px;width:min(680px,100%);max-height:calc(100vh - 40px);padding:23px;overflow:auto;box-shadow:0 36px 100px #0000008c}.modal-head{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;display:flex}.modal-head h2{margin:4px 0;font-size:24px}.console-modal{width:min(980px,100%)}.console-actions{flex-wrap:wrap;justify-content:flex-end}.console-follow{min-height:34px;color:var(--orange-2);background:#ff91341f;border-color:#ff91346b;padding:6px 11px;font-size:11px}.console-log{color:#cbc6c0;white-space:pre-wrap;background:#0b0b0c;border:1px solid #ff91342e;border-radius:14px;min-height:430px;max-height:calc(100vh - 190px);margin:0;padding:17px;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;display:block;overflow:auto}.console-log span{min-height:1.65em;display:block}.console-log .success{color:#73e4b9}.console-log .error{color:#ff8290}.console-log .warning{color:#ffd079}.console-log .heading{color:var(--orange-2);font-weight:700}.stack{gap:14px;display:grid}.pairing-code{text-align:center;letter-spacing:.14em;text-transform:uppercase;font:700 28px/1 ui-rounded,SF Pro Rounded,system-ui,sans-serif}.link-success{text-align:center;place-items:center;gap:11px;padding:30px;display:grid}.link-success i{width:54px;height:54px;color:var(--green);background:#44dda51f;border:1px solid #44dda566;border-radius:50%;place-items:center;font-size:25px;font-style:normal;display:grid}.link-success span{color:var(--muted);font-size:12px}.trim-modal{width:min(820px,100%)}.waveform{border:1px solid var(--line);background:#0d0d0e;border-radius:14px;width:100%;height:210px;margin:16px 0}.range-grid{grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px;display:grid}.range-grid label{color:var(--muted);gap:7px;font-size:11px;display:grid}.range-grid input{width:100%;accent-color:var(--orange)}.modal-actions{justify-content:flex-end;margin-top:14px}.muted{color:var(--muted)}.toast{z-index:200;color:#eafff7;background:#144838f2;border:1px solid #44dda561;border-radius:13px;max-width:min(420px,100% - 44px);padding:13px 16px;font-size:13px;font-weight:700;position:fixed;bottom:22px;right:22px;box-shadow:0 18px 45px #0006}.toast.warning{background:#5d4116f7;border-color:#ffc56173}.toast.error{background:#5e1f2bf7;border-color:#ff6c7d73}.toast-enter-active,.toast-leave-active{transition:opacity .2s,transform .2s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(10px)}@media (width<=920px){.tab-full{display:none}.tab-short{display:inline}}@media (width<=780px){.app-shell{width:min(100% - 22px,1180px);padding-top:17px}.app-header{align-items:flex-start}.header-status{display:none}.tabs{top:7px}.tab-full{display:none}.tab-short{display:inline}.hero{min-height:unset;align-items:flex-start;padding:24px}.step-row{display:none}.panel{padding:19px}.panel-head{grid-template-columns:auto minmax(0,1fr)}.panel-head>:last-child:not(:nth-child(2)){grid-column:1/-1}.form-grid,.phrase-form,.stats,.action-grid,.range-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.audio-card header,.audio-card footer,.word-list article,.panel-footer{flex-direction:column;align-items:stretch}.audio-card footer>div{justify-content:flex-start}.word-list article>button{width:100%}.sample-head .segment-control{grid-column:1/-1}.segment-control button{flex:1}.data-row{grid-template-columns:1fr auto}.data-copy{grid-column:1/-1}.data-usage{text-align:left}.data-row>button{min-width:96px}.modal-backdrop{padding:8px}.modal{max-height:calc(100vh - 16px);padding:17px}.modal-head{flex-direction:column}.console-actions{justify-content:flex-start}.console-log{min-height:55vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
/*$vite$:1*/