*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;min-height:100dvh;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;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));padding-bottom:max(1rem,env(safe-area-inset-bottom))}.app{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001f;padding:1.25rem;max-width:420px;width:100%}@media (min-width: 480px){.app{padding:2rem}}.title{background:linear-gradient(135deg,#4a7fd4,#d4a84a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.5rem;font-weight:700;margin:0 0 .5rem;text-align:center}@media (min-width: 480px){.title{font-size:1.75rem}}.subtitle{color:#6b7280;font-size:.85rem;text-align:center;margin:0 0 1.25rem;line-height:1.4}@media (min-width: 480px){.subtitle{font-size:.9rem;margin-bottom:1.5rem}}.wordListInputWrap{margin-bottom:1.25rem}.wordListInputLabel{display:block;font-size:.85rem;color:#4b5563;margin-bottom:.35rem}.wordListInput{width:100%;padding:.6rem .75rem;border:1px solid #e5e7eb;border-radius:8px;font-size:.9rem;resize:vertical;min-height:80px;margin-bottom:.5rem}.wordListInput:focus{outline:none;border-color:#4a7fd4}.btnUseWords{width:100%;padding:.5rem 1rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;background:#e5e7eb;color:#374151}.btnUseWords:hover{background:#d1d5db}.previewWrap{width:100%;min-height:180px;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:.75rem;align-items:flex-start;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media (min-width: 480px){.previewWrap.hasWords{padding:1rem}}.previewWrap.hasImage{aspect-ratio:4/3;min-height:200px}.previewPlaceholder{color:#9ca3af;font-size:1rem;text-align:center;padding:0 1rem}.wordListPreview{display:flex;flex-wrap:wrap;gap:.5rem;width:100%}@media (max-width: 479px){.wordListPreview{gap:.6rem}}.buttonsRow{display:flex;gap:.75rem;margin-bottom:1rem}.btn{flex:1;min-height:48px;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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.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%;min-height:48px;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;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.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:.75rem 1rem;font-size:.85rem;color:#4b5563;text-align:center;min-height:3rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}.btnTapToHear{min-height:44px;min-width:44px;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#4a7fd4,#d4a84a);color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.btnTapToHear:hover:not(:disabled){opacity:.95}.btnTapToHear:disabled{opacity:.7;cursor:not-allowed}.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{min-height:44px;padding:.5rem .9rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:1px solid rgba(0,0,0,.12);color:#fff}.wordChip:hover:not(:disabled){opacity:.9}.wordChip:disabled{cursor:not-allowed;opacity:.7}.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}