:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  color: #151518;
  background: #f7f7f8;
  font-synthesis: none;
  --bg: #f7f7f8;
  --surface: rgba(255,255,255,.88);
  --surface-solid: #fff;
  --text: #151518;
  --secondary: #66666d;
  --tertiary: #94949b;
  --border: rgba(0,0,0,.08);
  --subtle: #f0f0f2;
  --accent: #111114;
  --accent-text: #fff;
  --success: #16824d;
  --danger: #cf4040;
  --link: #2467d6;
  --shadow: 0 24px 70px rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.035);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -100px, rgba(135,155,255,.16), transparent 430px),
    radial-gradient(circle at 5% 19%, rgba(220,176,255,.10), transparent 360px),
    var(--bg);
}
a, button, input { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
.hidden { display: none !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.lucide { width:20px; height:20px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0; }
.lucide-sm { width:16px; height:16px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0; }
.lucide-xs { width:14px; height:14px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.site-shell { width: min(100% - 32px, 900px); margin: 0 auto; padding: 20px 0 64px; }
.topbar { min-height: 52px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:760; letter-spacing:-.02em; }
.brand-mark { width:29px; height:29px; border-radius:9px; display:grid; place-items:center; background:#111114; color:#fff; font-size:15px; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.hero { text-align:center; padding: 56px 14px 28px; }
.hero h1 { margin:0 auto; max-width:840px; font-size:clamp(46px,7.7vw,78px); line-height:.98; letter-spacing:-.061em; font-weight:790; }
.hero h1 span { color:#67676e; }
.hero-lead { max-width:660px; margin:20px auto 0; font-size:19px; line-height:1.5; letter-spacing:-.015em; color:var(--secondary); }

.trust-row { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:24px; color:var(--secondary); font-size:13px; font-weight:600; }
.trust-row span { display:inline-flex; align-items:center; gap:5px; }
.trust-row i { width:3px; height:3px; border-radius:50%; background:currentColor; }

.workspace { margin: 18px auto 0; width:min(100%,780px); min-height:290px; }
.tool-card { background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:30px; overflow:hidden; backdrop-filter:blur(22px); }
.boot-state { min-height:250px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--secondary); font-size:14px; }
.picker-state { padding:14px; }
.drop-zone { min-height:300px; border:1.5px dashed rgba(0,0,0,.15); border-radius:22px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px; cursor:pointer; padding:32px 20px; background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(249,249,250,.68)); transition:.2s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color:rgba(0,0,0,.25); background:#f8f8fa; transform:translateY(-1px); }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#111114; color:white; margin-bottom:8px; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.upload-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.drop-title { font-size:25px; line-height:1.1; letter-spacing:-.03em; font-weight:760; }
.drop-subtitle { color:var(--secondary); font-size:14px; }
.choose-button { margin-top:12px; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:14px; background:#111114; color:white; font-weight:700; font-size:15px; transition:transform .15s ease, opacity .15s ease; }
.choose-button:hover { transform:scale(1.02); }
.choose-button:active { transform:scale(.98); }

.privacy-line { display:flex; align-items:center; justify-content:center; gap:7px; padding:15px 10px 4px; color:var(--secondary); font-size:12.5px; text-align:center; }
.privacy-line svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; flex:0 0 auto; }

.processing-state { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.82fr); }
.photo-stage { position:relative; background:#171719; overflow:hidden; }
.photo-stage canvas, #result-image { display:block; width:100%; height:100%; object-fit:contain; }
.processing-state .photo-stage { min-height:420px; }
.processing-state canvas { max-height:560px; }
.processing-scrim { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.20); backdrop-filter:blur(1px); }
.processing-copy, .result-copy { padding:34px; }
.status-kicker { display:block; margin-bottom:9px; font-size:12px; font-weight:780; letter-spacing:.07em; text-transform:uppercase; color:var(--secondary); }
.processing-copy h2, .result-copy h2, .state-card h2 { margin:0; font-size:31px; line-height:1.04; letter-spacing:-.045em; }
.processing-copy p, .result-copy > p, .state-card p { color:var(--secondary); line-height:1.5; }
.progress-track { height:7px; overflow:hidden; background:#e5e5e8; border-radius:999px; margin-top:28px; }
.progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#111114 0%,#464654 50%,#111114 100%); background-size:200% 100%; animation:progressShimmer 2s infinite linear; transition:width .28s ease; }
@keyframes progressShimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.progress-meta { display:flex; justify-content:space-between; gap:16px; margin-top:10px; color:var(--tertiary); font-size:12px; }
.spinner { width:35px; height:35px; border-radius:50%; border:3px solid rgba(255,255,255,.28); border-top-color:#fff; animation:spin .8s linear infinite; }
.spinner.small { width:18px; height:18px; border-width:2px; border-color:rgba(0,0,0,.14); border-top-color:#111; }
@keyframes spin { to { transform:rotate(360deg); } }

.result-state { width:100%; }
.simple-result { text-align:center; padding:38px 24px 32px; display:flex; flex-direction:column; align-items:center; }
.result-thumb-frame { width:120px; height:120px; border-radius:20px; overflow:hidden; border:1px solid var(--border); background:#0f0f11; box-shadow:0 8px 24px rgba(0,0,0,.12); margin-bottom:18px; }
.result-thumb-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.simple-result h2 { margin:0; font-size:26px; line-height:1.15; letter-spacing:-.03em; font-weight:760; }
.simple-result p { margin:8px auto 0; color:var(--secondary); font-size:15px; line-height:1.45; max-width:360px; }

.result-actions { display:flex; justify-content:center; gap:10px; margin-top:22px; width:min(100%,340px); }
.primary-action, .secondary-action, .button-element { min-height:48px; border-radius:14px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:720; cursor:pointer; }
.primary-action { background:#111114; color:#fff; flex:1; }
.primary-action svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.secondary-action { background:var(--subtle); color:var(--text); flex:0 0 auto; }
.text-button { display:block; margin:16px auto 0; background:transparent; color:var(--secondary); font-size:13px; cursor:pointer; padding:7px 10px; }

.state-card { padding:48px 30px; text-align:center; }
.state-icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; margin:0 auto 16px; font-weight:800; }
.warning-icon { background:#ffe8e8; color:var(--danger); }

.story-section, .how-section, .faq-section { margin-top:80px; }
.section-heading { margin-bottom:20px; }
.section-heading h2 { margin:0; font-size:clamp(28px,4.5vw,40px); line-height:1.12; letter-spacing:-.04em; font-weight:760; }
.story-timeline { display:grid; gap:14px; }
.story-step { padding:22px 24px; border:1px solid var(--border); border-radius:20px; background:rgba(255,255,255,.66); }
.story-step h3 { margin:0 0 6px; font-size:18px; line-height:1.3; letter-spacing:-.02em; font-weight:720; }
.story-step p { margin:0; color:var(--secondary); line-height:1.55; font-size:14.5px; }
.highlight-step { border-color:rgba(84,97,190,.28); background:rgba(234,237,255,.5); }
.source-link { display:inline-flex; gap:5px; align-items:center; margin-top:10px; color:var(--link); font-size:13px; font-weight:650; text-decoration:none; }
.source-link:hover { text-decoration:underline; }

.section-lead { max-width:760px; margin:0 0 20px; font-size:17.5px; line-height:1.55; letter-spacing:-.01em; color:var(--secondary); }
.screenshot-card { margin:24px 0 20px; border:1px solid rgba(0,0,0,.15); border-radius:22px; background:#000; overflow:hidden; box-shadow:0 18px 45px rgba(0,0,0,.12); max-width:720px; }
.screenshot-card img { width:100%; height:auto; display:block; }
.screenshot-card figcaption { padding:13px 18px; font-size:13px; color:#adadb4; background:#111114; text-align:center; border-top:1px solid rgba(255,255,255,.08); line-height:1.45; }
.screenshot-card figcaption strong { color:#f4f4f6; }
.keep-copy { max-width:730px; margin:16px 0 0; color:var(--secondary); line-height:1.55; font-size:14.5px; }

.faq-list { border-top:1px solid var(--border); }
.faq-list details { border-bottom:1px solid var(--border); padding:0; }
.faq-list summary { list-style:none; cursor:pointer; padding:20px 4px; font-size:17px; font-weight:720; letter-spacing:-.015em; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-chevron { color:var(--tertiary); transition:transform .24s cubic-bezier(0.16, 1, 0.3, 1), color .2s ease; flex-shrink:0; }
.faq-list details[open] .faq-chevron { transform:rotate(180deg); color:var(--text); }
.faq-list p { max-width:760px; margin:-4px 0 21px; padding:0 34px 0 4px; color:var(--secondary); line-height:1.58; font-size:15px; }

.bottom-cta { margin-top:80px; text-align:center; }
.bottom-cta-card { padding:44px 24px; background:var(--surface); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); backdrop-filter:blur(22px); display:flex; flex-direction:column; align-items:center; }
.bottom-cta-card h2 { margin:0; font-size:clamp(24px,4vw,32px); line-height:1.15; letter-spacing:-.035em; font-weight:760; }
.bottom-cta-card p { max-width:480px; margin:10px auto 0; color:var(--secondary); font-size:15px; line-height:1.5; }
.bottom-cta-card .cta-button { margin-top:22px; }

.drop-zone.highlight-target { animation:targetPulse 1.2s cubic-bezier(0.16,1,0.3,1); }
@keyframes targetPulse { 0% { transform:scale(1); } 50% { transform:scale(1.02); border-color:var(--link); } 100% { transform:scale(1); } }

footer { text-align:center; margin-top:100px; padding:32px 10px 0; border-top:1px solid var(--border); color:var(--secondary); }
.footer-brand { display:inline-flex; gap:7px; align-items:center; color:var(--text); font-weight:760; }
footer p { margin:10px auto 0; font-size:13px; }
.fine-print { max-width:700px; color:var(--tertiary); font-size:11px; line-height:1.5; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a0a0c; --surface:rgba(25,25,28,.86); --surface-solid:#1a1a1d; --text:#f4f4f6;
    --secondary:#aaaab1; --tertiary:#777780; --border:rgba(255,255,255,.085); --subtle:#26262a;
    --link:#75a9ff; --shadow:0 24px 70px rgba(0,0,0,.36);
  }
  body { background:radial-gradient(circle at 50% -100px,rgba(91,103,176,.24),transparent 430px),#0a0a0c; }
  .brand-mark, .upload-icon, .choose-button, .primary-action, .progress-fill { background:#f1f1f3; color:#111; }
  .story-step { background:rgba(28,28,31,.66); }
  .drop-zone { border-color:rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(34,34,38,.72),rgba(26,26,29,.65)); }
  .drop-zone:hover, .drop-zone.dragging { background:#232327; border-color:rgba(255,255,255,.24); }
  .spinner.small { border-color:rgba(255,255,255,.18); border-top-color:#fff; }
  .highlight-step { background:rgba(30,32,48,.6); border-color:rgba(137,148,255,.24); }
  .result-thumb-frame { border-color:rgba(255,255,255,.14); box-shadow:0 12px 30px rgba(0,0,0,.5); }
  .screenshot-card { border-color:rgba(255,255,255,.14); box-shadow:0 20px 60px rgba(0,0,0,.5); }
  .warning-icon { background:#3a2324; color:#ff9d97; }
  .progress-track { background:#38383e; }
}

@media (max-width: 760px) {
  .site-shell { width:min(100% - 20px,900px); padding-top:14px; }
  .hero { padding:48px 4px 26px; }
  .hero h1 { font-size:clamp(40px,11vw,60px); }
  .hero-lead { font-size:18px; }
  .tool-card { border-radius:24px; }
  .processing-state { grid-template-columns:1fr; }
  .processing-state .photo-stage { min-height:300px; max-height:52vh; }
  .processing-copy, .result-copy { padding:22px; }
  .result-actions { flex-direction:column; width:100%; max-width:280px; }
  .primary-action, .secondary-action, .button-element { width:100%; }
  .story-section, .how-section, .faq-section, .bottom-cta { margin-top:60px; }
  .story-step { padding:18px 18px; border-radius:18px; }
  .story-step h3 { font-size:17px; }
  .story-step p { font-size:14px; }
  .screenshot-card { border-radius:18px; margin:18px 0; }
  .bottom-cta-card { padding:32px 18px; border-radius:20px; }
  .bottom-cta-card .cta-button { width:100%; max-width:280px; }
}