:root{color:#2c2c1b;font-synthesis:none;text-rendering:optimizelegibility;background:#f3f1ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top,#e7e3d8 0,#f3f1ea 48rem);min-width:320px;min-height:100vh;margin:0}button,select,textarea{color:#2c2c1b;font:inherit;background:#faf9f5;border:1px solid #c8c4b7;border-radius:.75rem}button{cursor:pointer;font-weight:700}button:hover:not(:disabled){background:#e7e3d8;border-color:#5d6b4a}button:disabled{cursor:not-allowed;opacity:.45}select{width:100%;padding:.65rem .75rem}.app-shell{width:min(100% - 2rem,76rem);margin:0 auto;padding:3rem 0 4rem}.page-header{margin-bottom:2rem}.eyebrow{color:#5d6b4a;letter-spacing:.16em;margin:0 0 .7rem;font-size:.75rem;font-weight:800}h1,h2,p{margin-top:0}h1{max-width:72rem;margin-bottom:0;font-size:clamp(1.2rem,3vw,2.5rem);line-height:1.04}.language-panel,.status-panel,.text-card{background:#faf9f5f0;border:1px solid #c8c4b7;border-radius:1rem;box-shadow:0 1rem 3rem #2c2c1b1f}.language-panel{padding:1rem}.language-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"source-flag arrow target-flag";align-items:start;gap:clamp(.75rem,2vw,1.5rem);display:grid}.flag-button#source-action{grid-area:source-flag}.flag-button#target-action{grid-area:target-flag}.language-controls-panel{background:#e7e3d8b3;border:1px solid #c8c4b7;border-radius:.75rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"source-controls.target-controls";align-items:center;gap:clamp(.75rem,2vw,1.5rem);min-height:4.5rem;margin-top:.75rem;padding:.75rem 0;display:grid}.source-controls,.target-controls{align-items:end;gap:.75rem;min-width:0;display:flex}.source-controls{grid-area:source-controls;justify-content:flex-start;padding-left:6px}.target-controls{grid-area:target-controls;justify-content:flex-end;padding-right:6px}.flag-button{text-align:center;isolation:isolate;background:#d1be9c;border:1px solid #a0835c;border-radius:1rem;place-content:center;gap:.4rem;min-height:11rem;padding:1rem;display:grid;position:relative;overflow:hidden}.flag-button:after{z-index:1;content:"";pointer-events:none;background:linear-gradient(#2c2c1b1f,#2c2c1b94);position:absolute;inset:0}.flag-button:hover:not(:disabled){border-color:#5d6b4a}.action-button.is-listening{border-color:#5d6b4a;animation:1.5s ease-in-out infinite listening-border}.flag-image,.flag-fallback{z-index:0;object-fit:cover;border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}.flag-fallback{background:#d1be9c;place-items:center;font-size:5rem;display:grid}.flag-image[hidden],.flag-fallback[hidden]{display:none}.flag-overlay-title,.flag-overlay-role,.button-state-label{z-index:2;position:relative}.flag-overlay-title{color:#fff;text-shadow:0 2px 5px #2c2c1ba6;font-size:clamp(1.1rem,2vw,1.5rem)}.flag-overlay-role,.button-state-label{color:#f3f1ea;letter-spacing:.09em;text-transform:uppercase;text-shadow:0 2px 4px #2c2c1bb3;font-size:.74rem;font-weight:800}.direction-arrow{color:#5d6b4a;text-align:center;white-space:nowrap;grid-area:arrow;align-self:center;font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1}.language-selection{flex:0 50%;min-width:9rem}.language-selection label{color:#6e6a58;margin-bottom:.35rem;font-size:.78rem;display:block}.voice-options{gap:.4rem;display:flex}.voice-button{color:#6e6a58;background:#faf9f5;border-color:#c8c4b7;align-items:center;gap:.3rem;padding:.35rem .5rem;font-size:.78rem;display:inline-flex}.voice-button img{object-fit:contain;border-radius:999px;width:1.8rem;height:1.8rem}.voice-button.is-selected{color:#2c2c1b;background:#e7e3d8;border-color:#5d6b4a;box-shadow:0 0 0 2px #5d6b4a2e}.status-panel{justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:.8rem 1rem;display:flex}.status-row{align-items:center;gap:.65rem;min-width:0;font-weight:700;display:flex}.status-dot{background:#a0835c;border-radius:999px;flex:none;width:.75rem;height:.75rem}.status-dot[data-state=active]{background:#5d6b4a;box-shadow:0 0 .8rem #5d6b4a}.status-dot[data-state=error]{background:#a65d4f}.clear-button{color:#6e6a58;background:0 0;flex:none;padding:.55rem .85rem}.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem;display:grid}.text-card{min-width:0;padding:1.25rem}.partial-card,.translation-card,.recognized-card{min-height:22rem}.partial-card{grid-column:1/-1;min-height:0;padding-top:.75rem;padding-bottom:.75rem}.translation-card{background:linear-gradient(145deg,#e7e3d8f0,#faf9f5f5);border-color:#a0835c}.card-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}h2{color:#5d6b4a;letter-spacing:.1em;text-transform:uppercase;margin-bottom:0;font-size:.8rem}.card-badge{color:#2c2c1b;letter-spacing:.08em;background:#d1be9c;border-radius:999px;padding:.25rem .45rem;font-size:.65rem;font-weight:800}.card-actions{gap:.45rem;display:flex}.icon-button{border-radius:.65rem;place-items:center;width:2.3rem;height:2.3rem;padding:0;font-size:1.05rem;display:inline-grid}.partial-text,.translation-text{white-space:pre-wrap;margin-bottom:0;line-height:1.7}.partial-text{color:#6e6a58;min-height:1.5rem;font-style:italic}.translation-text{color:#2c2c1b;min-height:15rem;font-size:1.25rem}.transcript-text{resize:vertical;color:#2c2c1b;background:#faf9f5;width:100%;min-height:15rem;padding:1rem;font-size:1.1rem;line-height:1.75;display:block}.transcript-text:not([readonly]){border-color:#5d6b4a;outline:2px solid #5d6b4a33}.error-message{color:#6b2f27;background:#f3e2de;border:1px solid #a65d4f;border-radius:.75rem;margin:1rem 0 0;padding:1rem}@keyframes listening-border{0%,to{box-shadow:0 0 #5d6b4a00}50%{box-shadow:0 0 0 .45rem #5d6b4a38}}@media (width<=44rem){.app-shell{width:min(100% - 1rem,76rem);padding-top:2rem}.language-pair{grid-template-columns:1fr;grid-template-areas:"source-flag""arrow""target-flag"}.language-controls-panel{grid-template-columns:1fr;grid-template-areas:"source-controls""target-controls"}.content-grid{grid-template-columns:minmax(0,1fr)}.partial-card{grid-column:auto}.direction-arrow{justify-self:center;transform:rotate(90deg)}.language-selection{flex:50%}.status-panel{flex-direction:column;align-items:stretch}.clear-button{width:100%}}