/* Readable visual status for the silent product demo. No pretend text field or microphone input. */
.notch .hudx{width:100%;--hs:1}
.notch .hud{left:0;margin-left:0;width:100%;height:144px;transform:none}
.notch .screen{height:144px}
.notch:has(.card-open) .screen{height:272px}
.notch .hud-card{top:144px}
.notch .hud-st{font-size:16px;font-weight:500;letter-spacing:-.015em}
.notch #hudState,.notch .hud-heard,.notch .hud-wm,.notch .hud-sep,.notch .hud-ic{display:none}
.notch .hud-wave{gap:4px}
.notch .hud-wave i{width:4px;height:8px}
.notch .hud-wave i:nth-child(-n+2){height:17px}
.notch .hud-wave i:nth-child(3){height:13px}
.notch-progress{position:absolute;left:16px;right:16px;bottom:0;display:flex;gap:5px;height:2px}
.notch-progress i{flex:1;background:#ffffff19;transition:background .2s}
.notch-progress i.is-past{background:#ffffff66}
.notch-progress i.is-current{background:#eee}
.notch .hud-in{top:8px;left:16px;right:16px;width:auto;height:46px;padding:0;border:0;border-radius:0;background:none;color:#eee;font-size:16px;line-height:1.4;white-space:normal;letter-spacing:-.015em}
.notch .hud-pill{top:61px;max-width:calc(100% - 32px);height:40px;white-space:normal;font-size:13px;line-height:1.3;padding:0 12px;border-radius:10px}
.notch-meta{margin-left:16px;margin-right:16px;gap:8px}
.task-controls>div{flex-wrap:wrap;gap:8px 18px}
@media(max-width:640px){.hud-stage{height:280px}.notch .hud-in{font-size:15px}.notch .hud-st{font-size:14px}.notch .hud-pill{font-size:12px}.notch .hud-wave{gap:3px}.notch .hud-wave i{width:3px}}
@media(max-width:370px){.notch-meta{margin-left:12px;margin-right:12px}.notch .demo-toggle{letter-spacing:0;padding:0}.notch .hud-in{font-size:14px}}
.notch.is-preview .hudx{display:none}
.notch-playground{padding:14px 16px 0;white-space:normal;text-align:left}
.notch-playground[hidden]{display:none}
.notch-playground label{display:block;color:#b4b4b4;font-size:13px;margin-bottom:9px}
.notch-task-field{display:flex;border:1px solid #ffffff33;background:#080808}
.notch-task-field input{min-width:0;flex:1;border:0;background:none;padding:10px 12px;color:#fff;font:15px/1.4 var(--sans);border-radius:0}
.notch-task-field input::placeholder{color:#aaa}
.notch-task-field button{border:0;border-left:1px solid #ffffff33;background:none;color:#fff;font:11px var(--mono);padding:0 12px;min-height:44px;cursor:pointer}
.notch-suggestions{display:flex;flex-wrap:wrap;gap:0 16px;margin:2px 0 8px}
.notch-suggestions button{background:none;border:0;padding:0;min-height:44px;color:#b4b4b4;font:11px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.notch-suggestions button:hover{color:#fff}
.notch-approach{padding:12px 0;border-top:1px solid #ffffff22}
.notch-approach>span{display:block;color:#b4b4b4;font:10px var(--mono);text-transform:uppercase;letter-spacing:.035em}
.notch-approach p{font:16px/1.4 var(--sans);color:#eee;min-height:45px;margin:8px 0 12px;overflow-wrap:anywhere}
.notch-preview-progress{display:flex;gap:5px;height:2px}
.notch-preview-progress i{flex:1;background:#ffffff26}
.notch-preview-progress .is-past{background:#ffffff77}
.notch-preview-progress .is-current{background:#eee}
.notch-preview-note{color:#aaa;font:10px/1.5 var(--mono);margin:0 0 4px}
@media(max-width:370px){.notch-suggestions{gap:0 12px}.notch-suggestions button{font-size:10px}.notch-playground{padding-left:12px;padding-right:12px}.notch-task-field input{font-size:14px}.notch-meta{gap:5px}.notch-meta .demo-toggle{font-size:9px}}