*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#a8c5e8,#e8dc98,khaki);display:flex;align-items:center;justify-content:center;padding:1rem}.app{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001f;padding:2rem;max-width:420px;width:100%}.title{background:linear-gradient(135deg,#4a7fd4,#d4a84a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.75rem;font-weight:700;margin:0 0 .5rem;text-align:center}.subtitle{color:#6b7280;font-size:.9rem;text-align:center;margin:0 0 1.5rem;line-height:1.4}.previewWrap{width:100%;aspect-ratio:4/3;border:2px dashed #d1d5db;border-radius:12px;overflow:hidden;background:#f9fafb;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.previewWrap.hasWords{border-style:solid;border-color:#e5e7eb;padding:1rem;align-items:flex-start;justify-content:flex-start;overflow-y:auto}.previewPlaceholder{color:#9ca3af;font-size:1rem;text-align:center;padding:0 1rem}.wordListPreview{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.buttonsRow{display:flex;gap:.75rem;margin-bottom:1rem}.btn{flex:1;padding:.75rem 1rem;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btnUpload{background:linear-gradient(135deg,#4a7fd4,#d4a84a);color:#fff}.btnUpload:hover{opacity:.95}.btnCamera{background:#e5e7eb;color:#374151}.btnCamera:hover{background:#d1d5db}.btnProcess{width:100%;padding:.75rem 1rem;background:#e5e7eb;color:#374151;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem}.btnProcess:hover:not(:disabled){background:#d1d5db}.btnProcess:disabled{cursor:not-allowed;opacity:.7}.btnProcess.ready{background:linear-gradient(135deg,#4a7fd4,#d4a84a);color:#fff}.btnProcess.ready:hover{opacity:.95}.status{background:#f3f4f6;border-radius:8px;padding:.6rem 1rem;font-size:.85rem;color:#4b5563;text-align:center;min-height:2.5rem;display:flex;align-items:center;justify-content:center}.wordsSection{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #e5e7eb}.wordsSection h3{font-size:.95rem;color:#374151;margin:0 0 .5rem}.wordList{display:flex;flex-wrap:wrap;gap:.5rem}.wordChip{padding:.4rem .75rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid rgba(0,0,0,.12);color:#fff}.wordChip:hover{opacity:.9}.wordChip.playing{outline:2px solid rgba(0,0,0,.3);outline-offset:2px}.wordChip.color0{background:#ef4444}.wordChip.color1{background:#f97316}.wordChip.color2{background:#eab308;color:#1f2937}.wordChip.color3{background:#22c55e}.wordChip.color4{background:#3b82f6}.wordChip.color5{background:#6366f1}.wordChip.color6{background:#8b5cf6}.hiddenInput{display:none}