/* Approved direction: iOS-like light surfaces, one blue accent, generous touch targets. */
:root{--accent:#007aff;--ink:#1d1d1f;--muted:#6e6e73;--canvas:#f5f5f7;--line:#e5e5ea;--blue-tint:#edf5ff;--curve:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;background:#eaeaec;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.75;line-break:strict;word-break:normal;overflow-wrap:anywhere;hanging-punctuation:allow-end;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a,input,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed}button:active:not(:disabled){transform:scale(.98)}button,a{transition:opacity .3s var(--curve),transform .3s var(--curve),background-color .3s var(--curve)}:focus-visible{outline:3px solid #85baff;outline-offset:3px}button:disabled{opacity:.4}a{color:var(--accent)}button{border:0}button[hidden],[hidden]{display:none!important}.app{position:relative;max-width:430px;min-height:100dvh;margin:0 auto;background:#fff;overflow:hidden}.topbar{height:64px;display:flex;align-items:center;gap:8px;padding:8px 24px}.brand{font-weight:600;letter-spacing:.02em;font-size:18px;color:var(--ink);text-decoration:none}.brand span{font-weight:400;color:var(--muted);margin-left:4px}.demo-badge{margin-left:auto;font-size:12px;letter-spacing:.08em;border:1px solid var(--line);padding:2px 8px;border-radius:9999px;color:var(--muted)}.icon-button{display:grid;place-items:center;min-width:44px;height:44px;background:var(--canvas);border-radius:9999px;font-size:24px;line-height:1}.topbar .icon-button{margin-left:-8px;flex:0 0 44px;width:44px}.brand{flex-shrink:0}.demo-badge{flex-shrink:0}.steps{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 24px;gap:8px}.step{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}.step b{height:20px;width:20px;display:grid;place-items:center;border-radius:50%;font-weight:500;background:var(--canvas);font-variant-numeric:tabular-nums}.step.current{color:var(--accent);font-weight:600}.step.current b{background:var(--accent);color:#fff}.step.done b{background:var(--blue-tint);color:var(--accent)}main{padding:0 24px 160px;outline:0;min-height:calc(100dvh - 150px)}.screen{animation:appear .5s var(--curve) both}.eyebrow{color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.08em;margin:0 0 8px}h1{font-size:30px;line-height:1.35;letter-spacing:.02em;margin:0 0 8px;font-weight:600;text-wrap:balance}h2{font-size:20px;line-height:1.4;font-weight:600;margin:0}p{margin:0;text-wrap:pretty}.subtitle{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:24px}.caption{font-size:12px;color:var(--muted);line-height:1.6}.section-label{font-size:14px;font-weight:600;margin:24px 0 12px;display:flex;justify-content:space-between;align-items:center}.section-label span{font-weight:400;color:var(--muted);font-size:12px}.photo-drop{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:240px;overflow:hidden;border:1px dashed #9fc8ff;border-radius:24px;background:var(--blue-tint);text-align:center;cursor:pointer}.photo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.photo-drop:focus-within{outline:3px solid #85baff;outline-offset:3px}.photo-drop .plus{width:64px;height:64px;background:#fff;border-radius:16px;color:var(--accent);font-size:36px;font-weight:400;margin-bottom:16px;display:grid;place-items:center;line-height:1}.photo-drop strong{font-size:16px;font-weight:600}.photo-drop .caption{margin-top:8px}.uploaded{width:100%;height:100%;object-fit:cover}.change-photo{position:absolute;bottom:12px;background:rgba(255,255,255,.95);padding:4px 16px;border-radius:9999px;font-size:14px}.local-note{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--muted);font-size:12px;justify-content:center}.local-note svg{width:14px;height:14px}.checks{margin-top:24px;display:grid;gap:12px}.check-row{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:#4b4b4b;cursor:pointer}.check-row input{flex-shrink:0;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}.minor-note{margin:12px 0 0;padding:12px 16px;background:var(--canvas);border-radius:16px}.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);padding:12px 24px calc(16px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);z-index:5;box-shadow:0 -8px 24px rgba(0,0,0,.025)}.primary{display:block;width:100%;min-height:56px;padding:12px 16px;background:var(--accent);color:#fff;border-radius:16px;font-size:16px;line-height:1.75;font-weight:600}.bottom .caption{text-align:center;margin-top:8px}.text-button{background:transparent;color:var(--accent);padding:8px 12px;min-height:44px;font-size:14px}.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.style-item{min-width:0;text-align:center}.style-card{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;background:var(--canvas);border:2px solid transparent;border-radius:16px;min-height:132px;width:100%;padding:8px 4px}.style-card.selected{border-color:var(--accent);background:var(--blue-tint)}.style-card img{width:72px;height:72px;object-fit:contain;border-radius:8px;mix-blend-mode:multiply}.style-card strong{font-size:14px;font-weight:500;margin-top:8px}.selected-mark{position:absolute;top:4px;right:4px;background:var(--accent);color:#fff;border-radius:50%;height:16px;width:16px;font-size:12px;line-height:16px}.sample-button{min-height:44px;padding:4px 0;font-size:12px;background:transparent;color:var(--accent);width:100%}.sample-none{font-size:12px;color:var(--muted);height:44px;display:grid;place-items:center}.hint-card{margin-top:16px;padding:16px;background:var(--canvas);border-radius:16px;font-size:14px;color:#4b4b4b}.hint-card b{color:var(--ink);font-weight:600}.category-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -24px 16px;padding:0 24px 8px;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;min-height:44px;padding:8px 16px;background:var(--canvas);border-radius:9999px;color:var(--muted);font-size:14px}.category-tab.active{background:var(--accent);color:#fff}.phrase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.phrase-cell{position:relative;background:var(--canvas);border:1px solid transparent;border-radius:16px;padding:8px;min-width:0;height:112px}.phrase-cell:focus-within{border-color:var(--accent);background:var(--blue-tint)}.phrase-cell label{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:4px}.phrase-cell textarea{resize:none;border:0;outline:0!important;background:transparent;color:var(--ink);padding:0;margin:0;width:100%;height:56px;font-size:16px;line-height:1.7;border-radius:0;overflow:hidden}.phrase-cell textarea::placeholder{color:#757575;opacity:1}.phrase-count{position:absolute;right:8px;bottom:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.inline-status{font-size:12px;color:var(--muted);margin-top:12px;min-height:20px}.error{color:#9d2222;font-size:14px;margin-top:12px}.summary-card{background:var(--canvas);padding:16px;border-radius:24px;margin-top:24px}.summary-top{display:flex;align-items:center;gap:12px}.summary-top img{height:64px;width:64px;object-fit:cover;border-radius:16px}.summary-top strong{display:block;font-weight:600}.summary-top .caption{display:block}.summary-phrases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.summary-phrases span{padding:8px 4px;background:#fff;border-radius:8px;text-align:center;font-size:12px;min-height:48px;display:grid;place-items:center}.price-row{display:flex;justify-content:space-between;align-items:center;margin:24px 0 16px}.price{font-size:36px;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums}.price small{font-size:16px;font-weight:400}.receipt-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:8px}.simulation-tag{font-size:12px;background:var(--blue-tint);color:#0064d1;padding:4px 8px;border-radius:8px;display:inline-block;margin-top:16px}.progress-number{display:flex;justify-content:center;align-items:baseline;font-size:64px;font-weight:600;line-height:1.3;margin:32px 0 8px;font-variant-numeric:tabular-nums}.progress-number span{font-size:24px;color:var(--muted);font-weight:400}.progress-copy{text-align:center;font-size:14px;color:var(--muted)}.progress-track{height:8px;border-radius:9999px;background:var(--canvas);margin:24px 0;overflow:hidden}.progress-fill{height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--curve)}.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.progress-tile{height:80px;background:var(--canvas);border-radius:16px;display:grid;place-items:center;color:#76767c;font-size:20px}.progress-tile.complete{background:var(--blue-tint);color:var(--accent)}.progress-tile.active{animation:pulse 1s var(--curve) infinite}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;margin:24px 0 16px}.result-item{background:var(--canvas);border-radius:16px;overflow:hidden;padding:8px 4px;width:100%;text-align:center}.result-item img{display:block;width:100%;height:96px;object-fit:contain}.result-item strong{display:block;min-height:40px;font-size:12px;font-weight:500;line-height:1.6;margin-top:4px}.result-item .caption{font-size:12px}.result-note{background:var(--blue-tint);color:#345474;padding:16px;border-radius:16px;font-size:14px}.preview-dialog{width:calc(100% - 32px);max-width:382px;border:0;padding:24px;border-radius:24px;box-shadow:0 24px 80px #0002;color:var(--ink)}.preview-dialog::backdrop{background:rgba(0,0,0,.35)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-dialog>img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--canvas);border-radius:16px;margin:16px 0}.preview-dialog .primary{margin-top:16px}.toast{position:fixed;left:50%;bottom:144px;transform:translate(-50%,8px);width:max-content;max-width:calc(100% - 48px);padding:12px 16px;background:var(--ink);color:#fff;border-radius:16px;z-index:20;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s var(--curve),transform .3s var(--curve)}.toast.visible{opacity:1;transform:translate(-50%,0)}.skip{position:fixed;top:-80px;left:16px;padding:12px;background:#fff;z-index:30}.skip:focus{top:8px}.loading{padding:48px 0;color:var(--muted)}@keyframes appear{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{50%{opacity:.4;transform:scale(.98)}}@media(min-width:600px){.app{margin:24px auto;min-height:calc(100dvh - 48px);border-radius:32px;box-shadow:0 24px 80px #0001}.bottom{border-radius:0 0 32px 32px;bottom:24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@supports not (height:100dvh){.app{min-height:100vh}}

/* Animated style previews: retain selection border and crisp pixel-art scaling. */
.style-card[data-style="pixel"] img{image-rendering:pixelated}