:root{--ios-blue:#007AFF;--ios-blue-light:#E8F4FD;--ios-blue-mid:#3A8FFF;--ios-green:#34C759;--ios-orange:#FF9500;--ios-red:#FF3B30;--ios-purple:#AF52DE;--ios-teal:#5AC8FA;--ios-pink:#FF2D55;--bg-primary:#F2F2F7;--bg-card:#FFFFFF;--text-primary:#1C1C1E;--text-secondary:#6E6E73;--text-tertiary:#8E8E93;--border-color:#E5E5EA;--radius-card:12px;--radius-button:10px;--radius-input:6px;--max-width:640px}.app-container,.header-bar{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{background:var(--bg-primary);color:var(--text-primary);max-width:var(--max-width);margin:0 auto;padding:0 20px 100px;min-height:100vh}.app-container:has(.full-width-page){max-width:none;padding-left:0;padding-right:0}.header-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;position:sticky;top:0;background:var(--bg-card);z-index:10}.header-bar__nav{display:flex;gap:8px}.header-bar__back{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-color);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ios-blue);transition:background .15s;flex-shrink:0}.header-bar__back:active{background:var(--border-color)}.header-bar__back-icon{font-size:24px;line-height:1;font-weight:500}.header-bar__back-label{font-size:11px;line-height:1;font-weight:600;white-space:nowrap}.header-bar__title{font-size:18px;font-weight:600}.header-bar__spacer{min-width:44px}.progress-bar{height:3px;background:var(--border-color);border-radius:2px;margin-bottom:16px;overflow:hidden}.progress-bar__fill{height:100%;background:var(--ios-blue);border-radius:2px;transition:width .4s ease-out}.hero-banner{background:var(--ios-blue);border-radius:var(--radius-card);padding:24px;display:flex;align-items:center;gap:16px;margin-bottom:24px}.hero-banner__icon{width:64px;height:64px;background:rgba(255,255,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}.hero-banner__text{color:#fff}.hero-banner__title{font-size:22px;font-weight:700;margin-bottom:4px}.hero-banner__description{font-size:14px;opacity:.9;line-height:1.4}.example-card{background:var(--bg-card);border-radius:var(--radius-card);padding:14px 16px;margin-bottom:16px}.example-card__hint{font-size:16px;font-weight:600;color:var(--ios-blue);display:flex;align-items:center;gap:6px}.example-card__description{font-size:14px;color:var(--text-secondary);margin-top:2px}.demo-area{background:var(--ios-blue-light);border-radius:var(--radius-card);padding:32px 24px;margin-bottom:24px;transition:background .4s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;gap:16px}.demo-area--completed{background:#E8F8ED}.demo-area__label{font-size:15px;color:var(--text-primary);text-align:center}.demo-area__content{width:100%}.demo-area:has(.listens-combobox[data-open]){padding-bottom:240px}.demo-area__stack{width:100%;display:flex;flex-direction:column;gap:16px}.combobox-field{position:relative;width:100%}.combobox-field .listens-combobox-label{display:block;margin-bottom:8px;font-size:14px;line-height:1.5;font-weight:500;color:var(--text-primary)}.combobox-field[data-listening] .listens-combobox-label{color:var(--ios-blue)}.phone-input-row>.listens-text-field{flex:1;min-width:0;position:relative}.phone-input-row .listens-combobox-label,.phone-input-row>.listens-text-field>.listens-text-field-label{position:absolute;bottom:calc(100% + 6px);left:0;margin:0;white-space:nowrap}.contact-grid>div:has([data-listening])>label{display:none}.listens-label{display:block;font-size:.875rem;line-height:1.5rem;font-weight:500;color:#111827}.signup-grid .listens-combobox,.signup-grid .listens-text-field,.signup-grid .listens-textarea{gap:.5rem}.signup-grid .listens-combobox-label,.signup-grid .listens-text-field-label,.signup-grid .listens-textarea-label{margin-bottom:0;font-size:.875rem;line-height:1.5rem;font-weight:500}.signup-grid .listens-combobox:not([data-listening]) .listens-combobox-label,.signup-grid .listens-text-field:not([data-listening]) .listens-text-field-label,.signup-grid .listens-textarea:not([data-listening]) .listens-textarea-label{color:#111827}.phone-input-row:has([data-listening]){margin-top:1.5rem}.contact-country{width:auto}.contact-country .listens-combobox-input{width:7rem;min-width:0;padding:8px 30px 8px 14px;border:none;border-radius:0;background:transparent;outline:none;font-size:15px;color:var(--text-secondary)}.contact-country .listens-combobox-input:focus{outline:none}.contact-country .listens-combobox-toggle{padding:0 8px;color:var(--text-tertiary)}.contact-country .listens-combobox-options{min-width:160px;border-radius:var(--radius-input);box-shadow:0 10px 24px rgba(0,0,0,.12);outline:1px solid rgba(0,0,0,.05);outline-offset:-1px}.contact-country .listens-combobox-option{padding:8px 12px;font-size:15px;color:var(--text-primary)}.contact-country .listens-combobox-option[data-highlighted]{background:var(--ios-blue);color:#fff}.form-combobox .listens-combobox-input{min-width:0;padding:8px 44px 8px 14px;border-radius:.375rem;background:#ffffff;outline:1px solid #d1d5db;outline-offset:-1px;font-size:16px;color:#111827}.form-combobox .listens-combobox-input:focus{outline:2px solid #4f46e5;outline-offset:-2px}.form-combobox .listens-combobox-input::placeholder{color:#9ca3af}.form-combobox .listens-combobox-toggle{right:6px}.form-combobox .listens-combobox-options{position:absolute;z-index:10;margin:0;padding:4px 0;list-style:none;background:#fff;border-radius:.375rem;box-shadow:0 10px 24px rgba(0,0,0,.12);outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;max-height:240px;overflow-y:auto}.form-combobox .listens-combobox-option{padding:8px 14px;font-size:14px;color:#111827;cursor:default;-webkit-user-select:none;user-select:none}.form-combobox .listens-combobox-option[data-highlighted]{background:#4f46e5;color:#fff;outline:none}.form-combobox .listens-combobox-option[data-selected]{font-weight:600}.form-combobox-qty{width:5rem}.form-combobox-qty .listens-combobox-input{padding:6px 28px 6px 10px;outline:1px solid #6b7280;outline-offset:-1px}.form-combobox-qty .listens-combobox-toggle{right:4px}.combobox-field .listens-combobox-input-wrapper{position:relative}.combobox-field .listens-combobox-input{display:block;width:100%;box-sizing:border-box;padding:9px 44px 9px 12px;background:var(--bg-card);color:var(--text-primary);font-size:15px;line-height:1.5;border:none;border-radius:var(--radius-input);outline:0;outline-offset:-1px}.combobox-field .listens-combobox-input::placeholder{color:var(--text-tertiary)}.combobox-field .listens-combobox-input:focus{outline:2px solid var(--ios-blue);outline-offset:-2px}.combobox-field .listens-combobox-toggle{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:0 10px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer}.combobox-field .listens-combobox-toggle svg{width:20px;height:20px;transition:transform .15s ease}.combobox-field[data-open] .listens-combobox-toggle svg{transform:rotate(180deg)}.combobox-field .listens-combobox-options{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;margin:0;padding:4px 0;list-style:none;background:var(--bg-card);border-radius:var(--radius-input);box-shadow:0 10px 24px rgba(0,0,0,.12);outline:1px solid rgba(0,0,0,.05);outline-offset:-1px;max-height:240px;overflow-y:auto}.combobox-field .listens-combobox-option{padding:8px 12px;font-size:15px;color:var(--text-primary);cursor:default;-webkit-user-select:none;user-select:none}.combobox-field .listens-combobox-option[data-selected]{font-weight:600}.combobox-field .listens-combobox-option[data-highlighted]{background:var(--ios-blue);color:#fff;outline:none}.combobox-field .listens-combobox-no-results{padding:8px 12px;font-size:15px;color:var(--text-secondary)}.menu-section{margin-bottom:24px}.menu-section__title{font-size:14px;color:var(--text-secondary);font-weight:500;padding:0 16px 8px}.menu-list{background:var(--bg-card);border-radius:var(--radius-card);overflow:hidden;list-style:none}.menu-item{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:inherit;cursor:pointer;transition:background .1s}.menu-item:active{background:#f0f0f5}.menu-item:focus-visible{outline:2px solid var(--ios-blue);outline-offset:-2px;background:var(--ios-blue-light)}.menu-list>li+li>.menu-item{border-top:1px solid var(--border-color)}.menu-item__icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;border-radius:7px;background:var(--text-tertiary)}.menu-item__text{flex:1;min-width:0}.menu-item__title{font-size:16px;font-weight:500;color:var(--text-primary)}.menu-item__subtitle{font-size:13px;color:var(--text-secondary);margin-top:2px}.menu-item__chevron{color:var(--text-tertiary);font-size:14px;flex-shrink:0;transition:transform .15s ease-out}.menu-item:hover .menu-item__chevron{transform:translateX(2px)}.continue-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;background:var(--ios-blue);color:#fff;border:none;border-radius:var(--radius-button);font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s ease-out,opacity .15s;margin-top:8px}.continue-button .listens-label-button-content{color:inherit}.continue-button[data-listening] .listens-label-button-content{color:var(--ios-blue-light)}.continue-button:hover{transform:translateY(-1px)}.continue-button:active{transform:translateY(1px);opacity:.85}.feature-list{background:var(--bg-card);border-radius:var(--radius-card);overflow:hidden}.feature-row{padding:16px}.feature-row+.feature-row{border-top:1px solid var(--border-color)}.feature-row__title{font-size:16px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}.feature-row__star{color:var(--ios-blue);font-size:16px}.feature-row__description{font-size:14px;color:var(--text-secondary);line-height:1.4}.steps-list{background:var(--ios-blue);border-radius:var(--radius-card);padding:20px;color:#fff;margin-bottom:24px}.steps-list__title{font-size:20px;font-weight:700;margin-bottom:16px}.steps-list__items{list-style:none}.steps-list__item{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;gap:8px}.steps-list__number{opacity:.8}.command-demo{background:var(--bg-primary);border-radius:var(--radius-card);padding:20px;margin-bottom:24px;transition:background .4s ease-out;min-height:200px}.command-demo--completed{background:#E8F8ED}.command-demo .listens-list{display:flex;width:100%}.command-demo .listens-list-items{background:var(--bg-card);border-radius:8px;overflow:hidden;gap:0}.command-demo .listens-list-item{padding:12px 16px;gap:12px;border-radius:0;background:var(--bg-card)}.command-demo .listens-list-item+.listens-list-item{border-top:1px solid var(--border-color)}.command-demo .listens-list-item-text{font-size:16px;color:var(--ios-blue)}.command-demo .listens-list-item[data-checked] .listens-list-item-text{color:var(--text-secondary);opacity:.6}.command-demo .listens-list-item-checkbox{width:22px;height:22px;accent-color:var(--ios-blue)}.command-demo .listens-list-item-delete{color:var(--text-tertiary);font-size:16px}.command-demo .listens-list-item-delete:hover{color:var(--ios-red)}.command-demo .listens-list-empty{font-size:16px;color:var(--text-secondary);padding:12px 16px;background:var(--bg-card);border-radius:8px}.command-demo__help-button{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:transparent;border:none;color:var(--ios-blue);font-size:15px;cursor:pointer;margin:12px auto 0}.help-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}.help-overlay__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}.help-overlay__card{position:relative;background:var(--bg-card);border-radius:16px 16px 0 0;width:100%;max-width:var(--max-width);padding:20px 20px 40px;animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.help-overlay__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.help-overlay__title-row{display:flex;align-items:center;gap:8px}.help-overlay__title{font-size:17px;font-weight:600}.help-overlay__subtitle{font-size:13px;color:var(--text-secondary)}.help-overlay__close{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ios-blue);background:transparent;color:var(--ios-blue);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.help-overlay__command{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--border-color)}.help-overlay__command-icon{font-size:18px;flex-shrink:0;margin-top:2px}.help-overlay__command-text{flex:1}.help-overlay__command-name{font-size:15px;font-weight:500}.help-overlay__command-name span{color:var(--ios-blue)}.help-overlay__command-name .param{color:var(--ios-red)}.help-overlay__command-desc{font-size:13px;color:var(--text-secondary);margin-top:2px}.demo-form{width:100%}.demo-form__field{margin-bottom:16px}.demo-form__label{font-size:14px;font-weight:500;margin-bottom:4px;display:block}.demo-form__sublabel{font-size:12px;color:var(--ios-blue);margin-bottom:4px;display:block}.demo-form__input{width:100%;padding:10px;border-radius:var(--radius-input);border:1px solid var(--border-color);font-size:15px}.demo-form__submit{padding:10px 24px;background:var(--ios-blue);color:#fff;border:none;border-radius:var(--radius-input);cursor:pointer;font-weight:600;font-size:15px}.demo-form__submit[data-listening] .listens-label-button-content{color:var(--ios-blue-light)}.demo-form__actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}label.demo-form__field{display:block;cursor:pointer}.app-container [data-listening],.app-container [data-listening] .listens-label,.app-container [data-listening] .listens-option{color:var(--ios-blue)}.listening-bar{background:var(--bg-card)}.listens-label-button-content,.listens-toggle-button-content{color:inherit}.contact-submit .listens-label-button-content{color:#fff}.completion-banner{background:var(--ios-green);border-radius:var(--radius-card);padding:20px 24px;margin-top:24px;text-align:center;color:#fff}.completion-banner__icon{font-size:32px;margin-bottom:8px}.completion-banner__title{font-size:18px;font-weight:700;margin-bottom:4px}.completion-banner__description{font-size:14px;opacity:.9;line-height:1.4;margin-bottom:16px}.completion-banner__button{padding:10px 24px;background:rgba(255,255,255,.25);color:#fff;border:none;border-radius:var(--radius-button);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.completion-banner__button:active{background:rgba(255,255,255,.35)}.demo-button{padding:14px 32px;background:rgba(255,255,255,.8);color:var(--text-primary);border:none;border-radius:var(--radius-button);cursor:pointer;font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px;transition:all .2s}.demo-button--active{background:var(--ios-green);color:#fff}.demo-feedback{color:#0E6B30;font-weight:600;font-size:14px}.nav-demo__panel{padding:24px;border-radius:var(--radius-card);color:#fff;font-weight:700;font-size:20px;text-align:center;width:100%;transition:background .3s ease-out}.nav-demo__tabs{display:flex;gap:8px}.nav-demo__tab{padding:10px 16px;min-height:44px;background:var(--border-color);color:var(--text-secondary);border:none;border-radius:var(--radius-input);cursor:pointer;font-weight:600;font-size:14px}.nav-demo__tab--active{color:#fff}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hero-banner{animation:fadeInUp .35s ease-out both}.example-card{animation:fadeInUp .35s ease-out .05s both}.command-demo,.completion-banner,.demo-area,.feature-list,.steps-list{animation:fadeInUp .35s ease-out .1s both}.continue-button{animation:fadeInUp .35s ease-out .15s both}.menu-list>li{animation:fadeInUp .3s ease-out both}.menu-list>li:first-child{animation-delay:.03s}.menu-list>li:nth-child(2){animation-delay:.06s}.menu-list>li:nth-child(3){animation-delay:.09s}.menu-list>li:nth-child(4){animation-delay:.12s}.menu-list>li:nth-child(5){animation-delay:.15s}.menu-list>li:nth-child(6){animation-delay:.18s}.feature-list>.feature-row{animation:fadeInUp .3s ease-out both}.feature-list>.feature-row:first-child{animation-delay:.05s}.feature-list>.feature-row:nth-child(2){animation-delay:.1s}.feature-list>.feature-row:nth-child(3){animation-delay:.15s}.feature-list>.feature-row:nth-child(4){animation-delay:.2s}.feature-list>.feature-row:nth-child(5){animation-delay:.25s}.command-demo .listens-list-item{animation:fadeInUp .25s ease-out}.demo-feedback,.help-overlay__backdrop{animation:fadeIn .2s ease-out}.app-container a:focus-visible,.app-container button:focus-visible{outline:2px solid var(--ios-blue);outline-offset:2px}.screenshot-placeholder{border:2px dashed var(--border-color);border-radius:var(--radius-card);background:#F9F9FB;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:120px}.screenshot-placeholder__icon{font-size:28px;opacity:.5}.screenshot-placeholder__label{font-size:13px;color:var(--text-tertiary);text-align:center;padding:0 16px}.screenshot-placeholder__image{width:100%;border-radius:var(--radius-card);object-fit:cover}.command-ref{background:var(--bg-card);border-radius:var(--radius-card);padding:16px;margin-bottom:16px}.command-ref__title{font-size:16px;font-weight:600;margin-bottom:4px}.command-ref__syntax{font-family:SF Mono,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--ios-blue);background:var(--ios-blue-light);padding:6px 10px;border-radius:var(--radius-input);margin-bottom:8px;display:inline-block}.command-ref__syntax+.command-ref__syntax{margin-left:6px}.command-ref__description{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}.command-ref__aliases{font-size:13px;color:var(--text-tertiary);margin-bottom:12px}.setting-ref{background:var(--bg-card);border-radius:var(--radius-card);padding:16px;margin-bottom:16px}.setting-ref__title{font-size:16px;font-weight:600;margin-bottom:4px}.setting-ref__description{font-size:14px;margin-bottom:12px}.section-intro,.setting-ref__description{color:var(--text-secondary);line-height:1.5}.section-intro{font-size:15px;margin-bottom:20px}.install-buttons{display:flex;gap:12px;margin-bottom:24px}.install-button{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;padding:16px 12px;border-radius:14px;text-decoration:none;color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.1);transition:transform .15s ease,box-shadow .15s ease}.install-button:active{transform:scale(.97);box-shadow:0 1px 4px rgba(0,0,0,.12)}.install-button--chrome{background:linear-gradient(135deg,#4285F4,#1a65d6)}.install-button--safari{background:linear-gradient(135deg,#17A3FF,#0060DF)}.install-button__icon{width:28px;height:28px;flex-shrink:0}.install-button__text{display:flex;flex-direction:column;text-align:left}.install-button__label{font-size:11px;font-weight:400;opacity:.85;line-height:1.2}.install-button__browser{font-size:15px;font-weight:600;line-height:1.3}@media (prefers-reduced-motion:reduce){.command-demo,.command-demo .listens-list-item,.completion-banner,.continue-button,.demo-area,.demo-feedback,.example-card,.feature-list,.feature-list>.feature-row,.help-overlay__backdrop,.help-overlay__card,.hero-banner,.menu-list>li,.steps-list{animation:none}.command-demo .listens-list-item-checkbox,.menu-item__chevron,.progress-bar__fill{transition:none}.continue-button:active,.continue-button:hover,.menu-item:hover .menu-item__chevron{transform:none}}