.app{max-width:1200px;margin:0 auto;padding:1.25rem}.header h1{margin:0 0 .35rem;font-size:1.35rem;font-weight:600}.sub{margin:0;font-size:.85rem;color:#9aa0a6}.sub code{font-size:.8rem;word-break:break-all}.panels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}@media(max-width:900px){.panels{grid-template-columns:1fr}}.panel h2{margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:#bdc1c6}.frame{background:#1a1d24;border-radius:8px;overflow:hidden;border:1px solid #2d3139;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center}.video,.ai-canvas{width:100%;height:100%;object-fit:contain;display:block}.hint{margin:.5rem 0 0;font-size:.8rem;color:#80868b}.speak-form{margin-top:1.5rem;display:flex;flex-direction:column;gap:.5rem}.speak-form label{font-size:.85rem;color:#bdc1c6}.row{display:flex;flex-wrap:wrap;gap:.5rem}.speak-form input{flex:1;min-width:200px;padding:.55rem .75rem;border-radius:6px;border:1px solid #3c4043;background:#1a1d24;color:#e8eaed;font-size:.95rem}.speak-form button{padding:.55rem 1rem;border-radius:6px;border:none;background:#8ab4f8;color:#0f1115;font-weight:600;cursor:pointer}.speak-form button.secondary{background:#3c4043;color:#e8eaed}.speak-form button:hover{filter:brightness(1.05)}.error-banner{margin-top:1rem;padding:.65rem .85rem;background:#3d1f1f;border:1px solid #8a4a4a;border-radius:6px;color:#f2b8b5;font-size:.9rem}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;color:#e8eaed;background:#0f1115}*{box-sizing:border-box}body{margin:0;min-height:100vh}