*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#2c1810;background-color:#f5f0eb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100dvh}.landing{position:relative;width:100%;min-height:100dvh;overflow:hidden;background:#f5f0eb;display:flex;align-items:center;justify-content:center}.deco-shell{position:absolute;top:-10px;left:-20px;width:130px;pointer-events:none;opacity:.9;z-index:1}.deco-circles{position:absolute;right:-140px;top:50%;transform:translateY(-50%);width:320px;pointer-events:none;opacity:.35;z-index:0}.deco-photo{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}.photo-top{top:40px;right:20px;width:120px;transform:rotate(6deg)}.photo-bottom{bottom:40px;left:10px;width:130px;transform:rotate(-8deg)}.landing-content{position:relative;z-index:2;text-align:center;padding:2rem 1.5rem;max-width:400px;width:100%}.title-name{font-family:Arial Black,Impact,sans-serif;font-size:4.5rem;font-weight:900;color:#2c1810;letter-spacing:.08em;margin:0;line-height:1}.title-wrapped{font-family:Georgia,Times New Roman,serif;font-style:italic;font-size:2rem;font-weight:400;color:#2c1810;margin:-.2rem 0 .3rem;line-height:1.2}.subtitle{font-size:.85rem;color:#6b5b50;margin:0 0 2.5rem;font-style:italic}.otp-section{display:flex;flex-direction:column;align-items:center;gap:.6rem}.otp-question{font-size:.95rem;color:#2c1810;font-weight:600;margin:0 0 .5rem}.otp-word-group{display:flex;gap:4px;justify-content:center}.otp-cell{width:28px;height:36px;border:2px solid #c4b5a5;border-radius:6px;text-align:center;font-size:1rem;font-weight:700;font-family:Arial,sans-serif;color:#2c1810;background:#ffffffb3;outline:none;transition:border-color .2s,background-color .2s,transform .15s;text-transform:uppercase;caret-color:#8b6f47;padding:0}.otp-cell:focus{border-color:#8b6f47;background:#fff;transform:scale(1.08);box-shadow:0 0 0 3px #8b6f4726}.otp-cell.correct{border-color:#7a9b6d;background:#7a9b6d1f}.otp-cell.incorrect{border-color:#c47a6a;background:#c47a6a1f}.btn-enter{margin-top:1rem;padding:.65rem 2.5rem;background:#2c1810;color:#f5f0eb;border:none;border-radius:24px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s}.btn-enter:hover{background:#4a3228;transform:scale(1.03)}.btn-enter:active{transform:scale(.97)}.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@media(min-width:480px){.deco-shell{width:160px;top:-10px;left:-10px}.deco-circles{width:400px;right:-160px}.photo-top{width:150px;right:40px}.photo-bottom{width:160px;left:30px}.title-name{font-size:5.5rem}.title-wrapped{font-size:2.5rem}.otp-cell{width:32px;height:40px;font-size:1.1rem}}.home{position:relative;width:100%;min-height:100dvh;overflow:hidden;background:#f5f0eb;display:flex;align-items:center;justify-content:center}.home .deco-shell{position:absolute;top:-10px;left:-20px;width:100px;pointer-events:none;opacity:.5;z-index:0}.home .deco-circles{position:absolute;right:-160px;bottom:-160px;width:340px;pointer-events:none;opacity:.2;z-index:0}.home-content{position:relative;z-index:2;text-align:center;padding:2rem 1.5rem;max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.home-header{margin-bottom:.5rem}.home-title{font-family:Arial Black,Impact,sans-serif;font-size:1.8rem;font-weight:900;color:#2c1810;letter-spacing:.05em;margin:0;line-height:1}.home-subtitle{font-family:Georgia,Times New Roman,serif;font-style:italic;font-size:1rem;font-weight:400;color:#6b5b50;margin:.15rem 0 0}.capture-area{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.camera-icon{width:80px;height:80px;border-radius:50%;background:#2c181014;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.camera-icon svg{width:36px;height:36px;color:#2c1810}.capture-text{font-size:.95rem;color:#6b5b50;margin:0;max-width:240px;line-height:1.4}.btn-capture{padding:.7rem 2rem;background:#2c1810;color:#f5f0eb;border:none;border-radius:24px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s}.btn-capture:hover{background:#4a3228;transform:scale(1.03)}.btn-capture:active{transform:scale(.97)}.preview-area{display:flex;flex-direction:column;align-items:center;gap:1rem}.photo-preview-frame{background:#fff;padding:8px 8px 24px;border-radius:4px;box-shadow:0 4px 16px #0000001f;transform:rotate(-2deg);max-width:240px}.photo-preview-frame img{width:100%;border-radius:2px;display:block}.preview-actions{display:flex;gap:.8rem}.btn-retake{padding:.6rem 1.5rem;background:transparent;color:#6b5b50;border:2px solid #c4b5a5;border-radius:24px;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}.btn-retake:hover{border-color:#8b6f47;color:#2c1810}.btn-generate{padding:.6rem 1.5rem;background:#2c1810;color:#f5f0eb;border:none;border-radius:24px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .15s}.btn-generate:hover{background:#4a3228;transform:scale(1.03)}.uploading-area{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.uploading-area .photo-preview-frame{max-width:160px;opacity:.7}.processing-area{display:flex;flex-direction:column;align-items:center;gap:1rem}.spinner-circles{width:120px;height:120px;animation:spin-slow 8s linear infinite;opacity:.6}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.processing-text{font-size:1.05rem;font-weight:600;color:#2c1810;margin:0}.progress-bar{width:100%;max-width:240px;height:8px;background:#2c18101a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:#2c1810;border-radius:4px;transition:width .5s ease-out}.processing-percent{font-size:1.1rem;font-weight:700;color:#2c1810;margin:0;font-variant-numeric:tabular-nums}.processing-timer{font-size:.85rem;color:#8b6f47;margin:0;font-variant-numeric:tabular-nums}.processing-hint{font-size:.78rem;color:#a89888;margin:0;font-style:italic}.spinner{width:40px;height:40px;border:4px solid rgba(44,24,16,.15);border-top-color:#2c1810;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-text{font-size:.95rem;color:#6b5b50;margin:0}.ready-area{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.video-frame{background:#fff;padding:8px 8px 24px;border-radius:4px;box-shadow:0 6px 24px #00000026;transform:rotate(1deg);max-width:320px;width:100%}.video-frame video{width:100%;border-radius:2px;display:block}.ready-text{font-size:1rem;font-weight:600;color:#2c1810;margin:0}.fade-in{animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(min-width:480px){.home-title{font-size:2.2rem}.photo-preview-frame{max-width:280px}.video-frame{max-width:380px}.spinner-circles{width:150px;height:150px}}