:root{--bg:#0a0a0a;--bg-elevated:#121212;--card:#181818;--card-hover:#232323;--input:#2a2a2a;--border:#2e2e2e;--border-strong:#3e3e3e;--text:#fff;--text-dim:#b3b3b3;--text-faint:#7a7a7a;--accent:#1ed760;--accent-hover:#3be477;--accent-deep:#12a347;--on-accent:#06120a;--danger:#f26d5b;--danger-bg:#2a1512;--warn:#e8b53f;--warn-bg:#2a2113;--success:#1ed760;--radius-sm:6px;--radius:10px;--radius-lg:16px;--pill:500px;--shadow:0 8px 24px #00000080;--font:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;font-weight:800;line-height:1.15}a{color:inherit}.app{flex-direction:column;min-height:100vh;display:flex}.header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:20;background:#0a0a0ad9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;display:flex;position:sticky;top:0}.header__brand{align-items:center;gap:14px;display:flex}.header__brand svg{flex-shrink:0}.header h1{letter-spacing:.02em;font-size:18px;font-weight:800}.header p{color:var(--text-dim);margin:1px 0 0;font-size:13px;font-weight:500}.main{flex:1}.stage{max-width:620px;margin:0 auto;padding:12vh 24px 0}.workspace{grid-template-columns:340px minmax(0,1fr);align-items:start;gap:24px;max-width:1500px;margin:0 auto;padding:24px;display:grid}@media (width<=1000px){.workspace{grid-template-columns:1fr;padding:16px}}.button{border-radius:var(--pill);letter-spacing:.02em;cursor:pointer;background:var(--accent);color:var(--on-accent);border:none;padding:13px 26px;font-family:inherit;font-size:14px;font-weight:700;transition:transform .12s,background .15s,filter .15s}.button:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.04)}.button:active:not(:disabled){transform:scale(.99)}.button:disabled{opacity:.4;cursor:default}.button--secondary{color:var(--text);border:1px solid var(--border-strong);background:0 0}.button--secondary:hover:not(:disabled){border-color:var(--text);background:0 0;transform:scale(1.04)}.button--ghost{color:var(--text-dim);border:1px solid var(--border);background:0 0;font-weight:600}.button--ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-dim);background:0 0}.button--record{color:#fff;background:#f0503c}.button--record:hover:not(:disabled){background:#ff6450}.controls .button{width:100%;margin-bottom:12px}.linkish{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;font-weight:700;text-decoration:underline}.landing{max-width:1100px;margin:0 auto;padding:0 24px 40px}.hero{text-align:center;padding:56px 0 40px;position:relative}.hero:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 50% 0,#1ed7602e,#0000 62%);height:640px;position:absolute;inset:-25% -40% auto}.hero__kicker{border-radius:var(--pill);color:var(--accent);letter-spacing:.06em;text-transform:uppercase;background:#1ed7601f;border:1px solid #1ed7604d;margin:0 0 20px;padding:6px 16px;font-size:12px;font-weight:700;display:inline-block}.hero__title{letter-spacing:-.035em;margin:0 0 20px;font-size:clamp(2.6rem,6.5vw,4.4rem);font-weight:900;line-height:1.03}.hero__title em{background:linear-gradient(100deg, var(--accent), #7ef0a4);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:normal}.hero__subtitle{max-width:560px;color:var(--text-dim);margin:0 auto 40px;font-size:18px;font-weight:500;line-height:1.55}.hero__box{text-align:left;max-width:620px;margin:0 auto}.section{padding:72px 0 0}.section__title{letter-spacing:-.03em;margin:0 0 12px;font-size:clamp(1.7rem,3.2vw,2.2rem);font-weight:900}.section__intro{max-width:620px;color:var(--text-dim);margin:0 0 32px;font-size:16px;font-weight:500;line-height:1.6}.section--center{text-align:center}.section--center .section__intro{margin-left:auto;margin-right:auto}.cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;display:grid}.card{background:var(--card);border-radius:var(--radius);padding:26px 22px;transition:background .2s,transform .2s}.card:hover{background:var(--card-hover);transform:translateY(-3px)}.card__icon{width:46px;height:46px;color:var(--accent);background:#1ed76024;border-radius:50%;place-items:center;margin-bottom:18px;display:grid}.card__icon svg{width:22px;height:22px}.card h3{margin-bottom:9px;font-size:17px;font-weight:800}.card p{color:var(--text-dim);margin:0;font-size:14px;font-weight:500;line-height:1.55}.steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;display:grid}.step{background:var(--card);border-radius:var(--radius);padding:26px 22px;transition:background .2s}.step:hover{background:var(--card-hover)}.step__number{background:var(--accent);width:34px;height:34px;color:var(--on-accent);border-radius:50%;place-items:center;margin-bottom:16px;font-size:15px;font-weight:900;display:inline-grid}.step h3{margin-bottom:8px;font-size:16px;font-weight:800}.step p{color:var(--text-dim);margin:0;font-size:14px;font-weight:500;line-height:1.55}.instrument-groups{gap:10px;display:grid}.instrument-group{background:var(--card);border-radius:var(--radius);grid-template-columns:150px 1fr;align-items:baseline;gap:18px;padding:18px 22px;transition:background .2s;display:grid}.instrument-group:hover{background:var(--card-hover)}@media (width<=640px){.instrument-group{grid-template-columns:1fr;gap:6px}}.instrument-group h4{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:0;font-size:12px;font-weight:800}.instrument-group p{color:var(--text-dim);margin:0;font-size:14px;font-weight:500;line-height:1.6}.callout{border-radius:var(--radius-lg);background:linear-gradient(135deg,#12331f,#0f2417);border:1px solid #1ed76038;padding:36px 34px}.callout h2{margin-bottom:12px;font-size:22px;font-weight:800}.callout p{color:var(--text-dim);margin:0;font-size:15px;font-weight:500;line-height:1.65}.callout p+p{margin-top:12px}.tabs{gap:8px;margin-bottom:18px;display:flex}.tabs__tab{background:var(--input);color:var(--text-dim);font:inherit;border-radius:var(--pill);cursor:pointer;border:none;padding:9px 20px;font-size:13.5px;font-weight:700;transition:background .15s,color .15s,transform .12s}.tabs__tab:hover{color:var(--text);transform:scale(1.03)}.tabs__tab--active{background:var(--text);color:#000}.tabs__tab--active:hover{color:#000}.panel{background:var(--card);border-radius:var(--radius-lg);padding:26px}.panel .button{width:100%}.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:var(--card);padding:52px 28px;transition:border-color .18s,background .18s,transform .18s}.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);background:var(--card-hover);outline:none}.dropzone--active{border-color:var(--accent);background:#1ed76014;transform:scale(1.01)}.dropzone--disabled{opacity:.5;cursor:default}.dropzone__icon{width:52px;height:52px;color:var(--accent);margin-bottom:16px}.dropzone__title{margin:0;font-size:18px;font-weight:700}.dropzone__title span{color:var(--accent)}.dropzone__hint{color:var(--text-faint);margin:8px 0 0;font-size:13px;font-weight:500}.demo{text-align:center;color:var(--text-dim);margin:16px 0 0;font-size:13.5px;font-weight:500}.input{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--input);width:100%;color:var(--text);padding:13px 16px;font-family:inherit;font-size:14.5px;font-weight:500}.input:focus{border-color:var(--text);outline:none}.input::placeholder{color:var(--text-faint)}.track{border-radius:var(--radius-sm);background:var(--input);align-items:center;gap:14px;margin-bottom:16px;padding:12px;display:flex}.track__cover{object-fit:cover;border-radius:4px;flex-shrink:0;width:48px;height:48px}.track div{flex-direction:column;min-width:0;display:flex}.track strong{text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:700;overflow:hidden}.track span{color:var(--text-dim);font-size:12.5px;font-weight:500}.choices{flex-direction:column;gap:10px;margin-bottom:20px;display:flex}.choice{border:1px solid var(--border-strong);border-radius:var(--radius);cursor:pointer;align-items:flex-start;gap:13px;padding:16px 17px;transition:border-color .15s,background .15s;display:flex}.choice:hover{border-color:var(--text-dim);background:var(--card-hover)}.choice--active{border-color:var(--accent);background:#1ed76012}.choice--disabled{cursor:default;opacity:.45}.choice--disabled:hover{border-color:var(--border-strong);background:0 0}.choice--disabled input{cursor:default}.choice input{flex-shrink:0;margin-top:3px}.choice div{flex-direction:column;gap:4px;display:flex}.choice strong{font-size:14.5px;font-weight:700}.choice span{color:var(--text-dim);font-size:13px;font-weight:500;line-height:1.5}.howto{background:var(--input);border-radius:var(--radius);margin-bottom:18px;padding:18px 20px}.howto__title{margin:0 0 10px;font-size:13.5px;font-weight:700}.howto__steps{color:var(--text-dim);margin:0;padding-left:20px;font-size:13.5px;font-weight:500;line-height:1.6}.howto__steps li+li{margin-top:6px}.howto__steps strong{color:var(--text);font-weight:700}.howto__warn{border-top:1px solid var(--border-strong);color:var(--warn);margin:14px 0 0;padding-top:14px;font-size:12.5px;font-weight:500;line-height:1.55}.note-legal{color:var(--text-faint);margin:16px 0 0;font-size:12.5px;font-weight:500;line-height:1.5}.recording{text-align:center}.recording__head{justify-content:center;align-items:center;gap:11px;margin-bottom:18px;display:flex}.recording__dot{background:#f0503c;border-radius:50%;width:12px;height:12px;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.recording__dot{animation:none}}.recording__time{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:40px;font-weight:800}.meter{border-radius:var(--pill);background:var(--input);height:8px;margin-bottom:10px;overflow:hidden}.meter__fill{background:linear-gradient(90deg, var(--accent), var(--warn) 78%, var(--danger));height:100%;transition:width .1s linear}.recording .field__note{margin:0 0 18px}.progress{background:var(--card);border-radius:var(--radius-lg);text-align:center;padding:34px}.progress__label{margin:0 0 18px;font-size:18px;font-weight:700}.progress__track{border-radius:var(--pill);background:var(--input);height:6px;overflow:hidden}.progress__bar{background:var(--accent);height:100%;transition:width .25s ease-out}.progress__hint{color:var(--text-faint);margin:16px 0 0;font-size:12.5px;font-weight:500}.controls{background:var(--bg-elevated);border-radius:var(--radius-lg);max-height:calc(100vh - 104px);position:sticky;top:84px;overflow-y:auto}@media (width<=1000px){.controls{max-height:none;position:static}}.controls__section{padding:22px}.controls__section+.controls__section{border-top:1px solid var(--border)}.controls h2{text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:18px;font-size:11.5px;font-weight:800}.field{margin-bottom:18px;display:block}.field--inline{align-items:flex-start;gap:11px;font-size:13.5px;font-weight:500;display:flex}.field--inline input{flex-shrink:0;margin-top:3px}.field__label{color:var(--text-dim);justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;font-size:12.5px;font-weight:600;display:flex}.field__label em{color:var(--text);font-variant-numeric:tabular-nums;font-style:normal;font-weight:700}.field__note{color:var(--text-faint);margin:0 0 18px;font-size:12.5px;font-weight:500;line-height:1.5}.field+.field__note{margin-top:-10px}.select-wrap{display:block;position:relative}select{appearance:none;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--input);width:100%;color:var(--text);cursor:pointer;padding:12px 40px 12px 15px;font-family:inherit;font-size:14px;font-weight:600;transition:border-color .15s,background .15s}select:hover{border-color:var(--text-dim);background:var(--card-hover)}select:focus-visible{border-color:var(--accent);outline:none}select option{color:var(--text);background:#1f1f1f}.select-wrap:after{content:"";border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);pointer-events:none;width:8px;height:8px;transition:border-color .15s;position:absolute;top:50%;right:16px;transform:translateY(-70%)rotate(45deg)}.select-wrap:hover:after{border-color:var(--text)}input[type=range]{width:100%;accent-color:var(--accent);height:22px}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:17px;height:17px}.confidence--high{color:var(--success);font-weight:700}.confidence--mid{color:var(--warn);font-weight:700}.confidence--low{color:var(--danger);font-weight:700}.output{min-width:0}.output__bar{background:var(--bg-elevated);border-radius:var(--radius-lg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px 20px;display:flex}.output__meta{flex-direction:column;min-width:0;display:flex}.output__meta strong{letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap;max-width:40ch;font-size:18px;font-weight:800;overflow:hidden}.output__meta span{color:var(--text-dim);font-size:12.5px;font-weight:500}.output__actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.output__actions .button{padding:10px 20px;font-size:13px}.zoom{border-radius:var(--pill);background:var(--input);align-items:center;gap:2px;padding:3px;display:flex}.zoom button{width:28px;height:28px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:16px;line-height:1;transition:background .15s}.zoom button:hover{background:var(--border-strong)}.zoom span{color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums;min-width:42px;font-size:12px;font-weight:600}.player{width:100%;height:42px;margin-bottom:16px}.alert{border-radius:var(--radius);border:1px solid;margin:0 0 16px;padding:14px 18px;font-size:13.5px;font-weight:500;line-height:1.55}.alert p{margin:0}.alert p+p{margin-top:8px}.alert--error{background:var(--danger-bg);color:var(--danger);border-color:#f26d5b59}.alert--info{background:var(--warn-bg);color:#e8d9b0;border-color:#e8b53f4d}.alert .button{margin-top:12px}.score{border-radius:var(--radius-lg);background:#fff;min-height:240px;padding:22px 14px;position:relative;overflow-x:auto}.score__canvas{color:#000}.score__overlay{color:#555;border-radius:var(--radius-lg);z-index:2;background:#ffffffeb;place-items:center;font-size:14px;font-weight:600;display:grid;position:absolute;inset:0}.tips{color:var(--text-faint);margin:24px 0 0;padding:0 0 0 20px;font-size:13.5px;font-weight:500}.tips li+li{margin-top:8px}.footer{border-top:1px solid var(--border);color:var(--text-faint);text-align:center;padding:32px 24px;font-size:12.5px;font-weight:500}.footer p{margin:0}@media print{.header,.footer,.controls,.output__bar,.player,.alert,.score__overlay{display:none!important}body{background:#fff}.workspace{padding:0;display:block}.score{background:#fff;padding:0;overflow:visible}}
