:root{--green:#58cc02;--green-dark:#58a700;--blue:#1cb0f6;--ink:#3c3c3c;--muted:#777;--line:#e5e5e5;--bg:#fff;--soft:#f7f7f7}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Nunito,system-ui,sans-serif;font-weight:600}.app{flex-direction:column;gap:16px;max-width:560px;margin:0 auto;padding:20px 16px 40px;display:flex}header{text-align:center}h1{color:var(--green);margin:8px 0 0;font-size:28px;font-weight:900}.tagline{color:var(--muted);margin:4px 0 0}.btn-primary{text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--green);color:#fff;letter-spacing:.04em;text-transform:uppercase;border-bottom:4px solid var(--green-dark);border-radius:16px;padding:15px 20px;font-size:17px;font-weight:800;transition:transform 50ms;display:block}.btn-primary:active{border-bottom-width:2px;transform:translateY(2px)}.status{min-height:62px}.progress-line{--dot:22px;padding-top:4px}.pl-track{height:10px;margin:calc(var(--dot) / 2 - 5px) calc(50% / var(--n));background:var(--line);border-radius:5px;position:relative}.pl-seg{height:100%;position:absolute;top:0}.pl-fill{background:var(--green);border-radius:5px;width:0;height:100%}.pl-fill[data-state=creep]{background:var(--blue)}.progress-line.failed .pl-fill[data-state=stopped]{background:#ff4b4b}.pl-dot{width:var(--dot);height:var(--dot);background:var(--line);box-shadow:0 0 0 2px var(--line);border:4px solid #fff;border-radius:50%;transition:background .2s,box-shadow .2s;position:absolute;top:50%;transform:translate(-50%,-50%)}.pl-dot.done{background:var(--green);box-shadow:0 0 0 2px var(--green)}.pl-dot.active{background:var(--blue);box-shadow:0 0 0 2px var(--blue);animation:1.1s ease-in-out infinite pl-pulse}.pl-dot.warn{background:#ff9600;box-shadow:0 0 0 2px #ff9600}.pl-dot.error{background:#ff4b4b;box-shadow:0 0 0 2px #ff4b4b}@keyframes pl-pulse{50%{box-shadow:0 0 0 2px var(--blue), 0 0 0 9px #1cb0f638}}.pl-labels{grid-template-columns:repeat(var(--n), 1fr);text-align:center;margin-top:8px;display:grid}.pl-label{color:#afafaf;white-space:nowrap;grid-row:1;font-size:13px;font-weight:800}.pl-label.done{color:var(--green-dark)}.pl-label.active{color:var(--blue)}.pl-label.warn{color:#cc7800}.pl-label.error{color:#ea2b2b}.pl-sub{color:#cc7800;white-space:nowrap;grid-row:2;min-height:16px;font-size:11px}.pl-message{color:#ea2b2b;grid-area:2/1/auto/-1;font-size:13px}.card{border:2px solid var(--line);background:#fbfaf6;border-bottom-width:4px;border-radius:20px;min-height:120px;overflow:hidden}#stage{width:100%;display:block}.explain{text-align:center;margin:0;font-size:17px}.card{position:relative}.ai-overlay{pointer-events:none;opacity:0;width:100%;transition:opacity .25s;display:block;position:absolute;top:0;left:0}.ai-overlay.show{opacity:.8}.ai-overlay.intro{opacity:1;transition:opacity .45s}.ai-overlay.intro.fade{opacity:0}.ai-overlay.intro.off{opacity:0;transition:none}.btn-ghost{cursor:pointer;font:inherit;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);border:2px solid var(--line);background:#fff;border-bottom-width:4px;border-radius:14px;align-self:center;margin-top:-4px;padding:10px 18px;font-size:14px;font-weight:800}.btn-ghost:active{border-bottom-width:2px;transform:translateY(2px)}.btn-ghost.on{color:#fff;background:var(--blue);border-color:#1899d6}.btn-ghost[hidden]{display:none}.btn-float{z-index:2;-webkit-tap-highlight-color:transparent;background:#fffffff0;border-bottom-width:3px;border-radius:12px;margin:0;padding:6px 12px;font-size:12px;position:absolute;top:10px;right:10px}.btn-float:active{border-bottom-width:2px;transform:translateY(1px)}.btn-float.on{background:var(--blue)}.controls{border:2px solid var(--line);border-bottom-width:4px;border-radius:20px;flex-direction:column;gap:12px;padding:16px;display:flex}.controls[hidden]{display:none}.controls-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.controls h2{margin:0;font-size:20px;font-weight:900}.mic{background:var(--blue);color:#fff;min-height:48px;font:inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-bottom:4px solid #1899d6;border-radius:16px;align-items:center;gap:8px;padding:0 18px;font-size:16px;font-weight:800;transition:transform 50ms;display:inline-flex}.mic[hidden]{display:none}.mic:active{border-bottom-width:2px;transform:translateY(2px)}.mic svg{fill:none;stroke:#fff;stroke-width:2.2px;stroke-linecap:round;width:22px;height:22px}.mic svg rect{fill:#fff;stroke:none}.mic.listening{background:var(--green);border-bottom-color:var(--green-dark);animation:1.2s ease-in-out infinite mic-pulse}@keyframes mic-pulse{50%{box-shadow:0 0 0 8px #58cc022e}}.voice-hint{color:var(--muted);margin:-4px 0 0;font-size:14px}.voice-hint[hidden]{display:none}.numbers{border-bottom:2px solid var(--line);flex-direction:column;gap:10px;padding-bottom:14px;display:flex}.numbers[hidden]{display:none}.numbers-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.numbers h3{margin:0;font-size:16px;font-weight:900}.numbers-reset{border:2px solid var(--line);min-height:36px;font:inherit;letter-spacing:.04em;text-transform:uppercase;color:#1899d6;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-bottom-width:4px;border-radius:12px;padding:0 14px;font-size:13px;font-weight:800}.numbers-reset:active{border-bottom-width:2px;transform:translateY(2px)}.numbers-reset:disabled{color:#afafaf;cursor:default;border-bottom-width:4px;transform:none}.num-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.num{flex-direction:column;gap:5px;min-width:0;display:flex}.num label{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:800;overflow:hidden}.num-box{border:2px solid var(--line);background:var(--soft);border-bottom-width:4px;border-radius:14px;align-items:center;gap:6px;min-height:48px;padding:0 12px;transition:border-color .15s,background .15s;display:flex}.num-box:focus-within{border-color:var(--blue);background:#fff}.num-box input{width:100%;min-width:0;font:inherit;color:var(--ink);font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;flex:1;padding:0;font-size:17px;font-weight:800}.num-box input::placeholder{color:#afafaf;font-size:14px;font-weight:700}.num-unit{color:var(--muted);flex:none;font-size:14px;font-weight:800}.num-msg{color:#ea2b2b;min-height:0;margin:0;font-size:12.5px;font-weight:700;line-height:1.25}.num-msg:empty{display:none}.num.bad .num-box{background:#fff0f0;border-color:#ff4b4b}.num.bad label{color:#ea2b2b}.sliders{flex-direction:column;gap:14px;display:flex}.param-row{justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.param label{font-size:16px;font-weight:800}.param-value{color:var(--blue);font-variant-numeric:tabular-nums;font-size:16px;font-weight:900}.param input[type=range]{--fill:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:32px;margin:0}.param input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--green) var(--fill), var(--line) var(--fill));border-radius:999px;height:14px}.param input[type=range]::-moz-range-track{background:var(--line);border-radius:999px;height:14px}.param input[type=range]::-moz-range-progress{background:var(--green);border-radius:999px;height:14px}.param input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--line);background:#fff;border-bottom-width:5px;border-radius:50%;width:30px;height:30px;margin-top:-8px}.param input[type=range]::-moz-range-thumb{border:3px solid var(--line);background:#fff;border-radius:50%;width:26px;height:26px}.chips{gap:8px;margin-top:8px;display:flex}.chip{border:2px solid var(--line);min-height:44px;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-bottom-width:4px;border-radius:14px;flex:1;font-size:15px;font-weight:800}.chip:active{border-bottom-width:2px;transform:translateY(2px)}.chip.on{border-color:var(--blue);color:#1899d6;background:#ddf4ff}.toast{opacity:0;border-radius:14px;min-height:0;max-height:0;font-size:15px;transition:opacity .2s,max-height .2s,padding .2s;overflow:hidden}.toast.show{opacity:1;max-height:120px;padding:10px 14px}.toast.ok{color:var(--green-dark);background:#d7ffb8}.toast.info{color:#1899d6;background:#ddf4ff}.toast.warn{color:#b07800;background:#fff4d6}.examples{flex-direction:column;gap:8px;margin-top:-4px;display:flex}.examples h2{color:var(--muted);text-align:center;margin:0;font-size:15px;font-weight:800}.examples-row{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;margin:0 -16px;padding:2px 16px 6px;scroll-padding-inline:16px;display:flex;overflow-x:auto}.examples-row::-webkit-scrollbar{display:none}.example{scroll-snap-align:start;border:2px solid var(--line);width:96px;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-bottom-width:4px;border-radius:16px;flex-direction:column;flex:none;align-items:center;gap:6px;padding:6px 6px 8px;font-size:14px;font-weight:800;transition:transform 50ms;display:flex}.example img{object-fit:cover;background:#fbfaf6;border-radius:10px;width:80px;height:80px;display:block}.example:active{border-bottom-width:2px;transform:translateY(2px)}.example.on{border-color:var(--green);color:var(--green-dark);background:#d7ffb8}