*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background-color:#fbf5e9;color:#2a2a2a;min-height:100vh;line-height:1.5}#root{min-height:100vh}::selection{background-color:#ffe4a0;color:#2a2a2a}:focus-visible{outline:3px solid #7c3aed;outline-offset:2px}.app{max-width:920px;margin:0 auto;padding:1rem 1.5rem 3rem}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:2px solid rgba(0,0,0,.06);margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem}.top-bar-title{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.app-brand{margin:0;line-height:0;flex:1;min-width:0}.app-logo{height:auto;width:auto;max-height:13rem;max-width:100%;object-fit:contain;display:block}.status-indicator{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:#6b7280;font-weight:500;padding:.3rem .8rem;border-radius:999px;background:#0000000a;transition:all .2s ease}.status-indicator.listening{color:#16a34a;background:#16a34a1a}.status-indicator.retrying{color:#b45309;background:#b453091a;animation:retryPulse 1.5s ease-in-out infinite}@keyframes retryPulse{0%,to{opacity:1}50%{opacity:.6}}.error-banner{display:flex;align-items:flex-start;gap:.75rem;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:.75rem 1rem;border-radius:.75rem;margin-bottom:1rem;font-size:.95rem;line-height:1.5}.error-banner-text{flex:1}.error-banner-dismiss{flex-shrink:0;background:none;border:none;color:#991b1b;font-size:1.25rem;line-height:1;cursor:pointer;padding:.1rem .25rem;border-radius:.25rem;font-family:inherit}.error-banner-dismiss:hover{background:#991b1b14}.warning-banner{display:flex;align-items:flex-start;gap:.75rem;background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:.75rem 1rem;border-radius:.75rem;margin-bottom:1rem;font-size:.95rem;line-height:1.5}.warning-banner-text{flex:1}.warning-banner-dismiss{flex-shrink:0;background:none;border:none;color:#92400e;font-size:1.25rem;line-height:1;cursor:pointer;padding:.1rem .25rem;border-radius:.25rem;font-family:inherit}.warning-banner-dismiss:hover{background:#92400e14}.unsupported-message{text-align:center;padding:3rem 1.5rem;background:#fff;border-radius:1rem;margin-top:2rem;box-shadow:0 1px 3px #0000000f}.unsupported-message h2{font-size:1.5rem;margin-bottom:1rem;color:#991b1b}.unsupported-message p{font-size:1.1rem;color:#4b5563;line-height:1.7}.controls-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.primary-controls{display:flex;gap:.75rem;flex-wrap:wrap}.secondary-controls{display:flex;gap:1rem;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.7rem;font-size:1.2rem;font-weight:600;border:none;border-radius:1rem;cursor:pointer;transition:background-color .15s ease,opacity .15s ease;min-height:60px;font-family:inherit;white-space:nowrap;color:#fff}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-talk,.btn-tap,.btn-new{gap:.65rem;padding:.6rem 1.6rem .6rem 1.1rem;background:#fff;box-shadow:0 1px 3px #0000000f;font-weight:700}.btn-talk:disabled,.btn-tap:disabled,.btn-new:disabled{opacity:.6}.btn-talk{border:2px solid #22c55e;color:#166534}.btn-talk:hover:not(:disabled){background:#f0fdf4;border-color:#16a34a}.btn-tap{border:2px solid #7c3aed;color:#5b21b6}.btn-tap:hover:not(:disabled){background:#f5f3ff;border-color:#6d28d9}.btn-label-icon{width:2.6rem;height:2.6rem;object-fit:contain;display:block;pointer-events:none;flex-shrink:0}.btn-stop{background:#ef4444}.btn-stop:hover:not(:disabled){background:#dc2626}.btn-stop-reading{background:#ef4444}.btn-stop-reading:hover:not(:disabled){background:#dc2626}.btn-readback{background:#7c3aed}.btn-readback:hover:not(:disabled){background:#6d28d9}.btn-new{border:2px solid #94a3b8;color:#334155}.btn-new:hover:not(:disabled){background:#f8fafc;border-color:#64748b}.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#4b5563;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:#7c3aed}.settings-panel{margin-top:1.25rem}.settings-toggle{display:flex;align-items:center;gap:.5rem;background:none;border:none;font-size:.95rem;font-weight:600;color:#4b5563;cursor:pointer;padding:.5rem 0;font-family:inherit}.settings-toggle:hover{color:#1e293b}.settings-toggle-icon{font-size:.7rem}.settings-content{background:#fff;border-radius:.75rem;padding:1.25rem;margin-top:.5rem;box-shadow:0 1px 3px #0000000f;border:1px solid rgba(0,0,0,.06)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.settings-row{display:flex;flex-direction:column;gap:.3rem}.settings-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;font-weight:500;color:#374151}.settings-value{font-variant-numeric:tabular-nums;color:#6b7280;font-weight:400}.settings-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#e5e7eb;border-radius:3px;outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#7c3aed;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.settings-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#7c3aed;cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.settings-select{padding:.5rem .75rem;font-size:.95rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;color:#374151;font-family:inherit;cursor:pointer}.settings-select:focus{border-color:#7c3aed}.help-content{font-size:.9rem;line-height:1.6;color:#374151}.help-prose h3{font-size:.95rem;font-weight:600;color:#1e293b;margin:1rem 0 .4rem}.help-prose h3:first-of-type{margin-top:0}.help-prose p{margin-bottom:.75rem}.help-prose ol,.help-prose ul{margin:0 0 .75rem 1.25rem}.help-prose li{margin-bottom:.35rem}.reading-card{background:#fff;border-radius:1rem;padding:2rem;min-height:300px;box-shadow:0 1px 3px #0000000f,0 4px 12px #00000008;border:1px solid rgba(0,0,0,.04);display:flex;justify-content:center}.reading-area{margin:0 auto;text-align:left;width:100%}.word-token{display:inline;background:none;border:none;padding:.08em .12em;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:.25em;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease;line-height:inherit;text-align:left;vertical-align:baseline}.word-token:hover{background-color:#7c3aed14}.word-token:active{background-color:#7c3aed26}.word-token.word-boxed{background-color:#00000008;padding:.06em .18em;margin:.04em}.word-token.word-sample{color:#6b7280}.word-token.word-boxed:hover{background-color:#7c3aed1a}.word-token.word-highlighted{background-color:#fde68a;border-radius:.2em;box-shadow:0 0 0 3px #fde68a}.word-token.word-clicked{background-color:#bfdbfe;border-radius:.2em;box-shadow:0 0 0 3px #bfdbfe;animation:wordPulse .3s ease}@keyframes wordPulse{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}.interim-text{color:#9ca3af;font-style:italic}.app-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.06);text-align:center;font-size:.85rem;color:#6b7280}.app-footer a{color:#7c3aed;text-decoration:none}.app-footer a:hover{text-decoration:underline}@media(max-width:640px){.app{padding:.75rem 1rem 2rem}.top-bar{flex-direction:column;align-items:flex-start}.top-bar-title{width:100%}.app-logo{width:100%;height:auto;max-height:none}.controls-row{flex-direction:column;align-items:flex-start}.primary-controls{width:100%}.primary-controls .btn{flex:1 1 0}.reading-card{padding:1.25rem;border-radius:.75rem}.settings-grid{grid-template-columns:1fr}}