:root { --ink:#113326; --green:#0f4735; --lime:#c9ef64; --cream:#f8f5ec; --paper:#fffdf7; --muted:#64746c; --line:#dce4dc; --orange:#f2a846; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100svh; background:radial-gradient(circle at 90% 0%, #d9edab 0 10%, transparent 30%), var(--cream); }
a { color:inherit; }
.shell { width:min(100%, 1120px); margin:0 auto; padding:28px 28px 52px; }
.brand { display:inline-block; color:var(--green); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-decoration:none; }
.brand span { color:var(--orange); padding:0 4px; }
.hero, .capture-heading, .result-heading { max-width:680px; margin:88px 0 36px; }
.eyebrow { color:#678243; font-size:.73rem; font-weight:800; letter-spacing:.14em; margin:0 0 12px; }
h1 { font-size:clamp(2.2rem, 6vw, 4.6rem); letter-spacing:-.065em; line-height:.94; margin:0; }
h2 { letter-spacing:-.04em; }
.lede, .capture-heading p, .result-heading p { color:#52655b; font-size:1.1rem; line-height:1.55; max-width:600px; margin:18px 0 0; }
.demo-badge { display:inline-block; border:1px solid #d1d6bd; border-radius:99px; color:#59683c; font-size:.78rem; margin:20px 0 0; padding:8px 12px; }
.scene-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:12px; }
.scene-card { --card:#1f593d; appearance:none; background:linear-gradient(145deg, rgba(13,55,38,.15), rgba(4,23,14,.85)), var(--cover, linear-gradient(145deg, #557841, var(--card))); background-position:center; background-size:cover; border:2px solid transparent; border-radius:18px; color:white; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; min-height:290px; padding:18px; text-align:left; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.scene-card:nth-child(2) { --card:#8d6533; }.scene-card:nth-child(3) { --card:#315e64; }.scene-card:nth-child(4) { --card:#805333; }
.scene-card:hover, .scene-card:focus-visible { transform:translateY(-4px); outline:none; box-shadow:0 12px 28px rgba(18,54,35,.18); }
.scene-card.selected { border-color:var(--lime); box-shadow:0 0 0 4px rgba(201,239,100,.35); }
.scene-number { color:var(--lime); font-size:.78rem; font-weight:800; letter-spacing:.1em; }.scene-content { display:grid; gap:6px; }.scene-content strong { font-size:1.35rem; letter-spacing:-.035em; }.scene-content small { font-size:.85rem; line-height:1.35; opacity:.9; }
.consent, .gallery { align-items:flex-start; cursor:pointer; display:flex; gap:10px; font-size:.88rem; line-height:1.45; margin-top:22px; max-width:680px; }.gallery { margin-top:10px; color:#59665e; }.consent input, .gallery input { accent-color:var(--green); flex:0 0 auto; height:18px; margin:1px 0 0; width:18px; }
.primary-button, .secondary-button { align-items:center; border:0; border-radius:999px; cursor:pointer; display:inline-flex; font:inherit; font-weight:800; gap:14px; justify-content:center; margin-top:26px; min-height:54px; padding:0 24px; text-decoration:none; transition:transform .15s ease, opacity .15s ease; }.primary-button { background:var(--green); color:white; }.primary-button span { color:var(--lime); font-size:1.3em; }.primary-button:hover:not(:disabled), .secondary-button:hover { transform:translateY(-2px); }.primary-button:disabled { cursor:not-allowed; opacity:.42; }.secondary-button { background:transparent; border:1px solid #b5c5b8; color:var(--green); }
.form-error { background:#fff0e9; border-radius:12px; color:#9b351b; font-size:.9rem; margin:16px 0 0; padding:12px 14px; }.empty-state, .privacy { background:var(--paper); border:1px solid var(--line); border-radius:22px; margin-top:30px; max-width:680px; padding:26px; }.privacy { font-size:1.05rem; line-height:1.6; }.privacy h1 { font-size:clamp(2.4rem, 6vw, 4rem); }
.capture-shell, .capture-shell body { background:#092b20; }.capture-shell { color:white; min-height:100svh; }.capture-shell .brand { color:white; }.capture-heading { margin:42px 0 22px; }.capture-heading .eyebrow { color:var(--lime); }.capture-heading p { color:#c7d8ce; }.camera-stage { background:#04150e; border:1px solid rgba(255,255,255,.15); border-radius:28px; height:min(58svh, 610px); overflow:hidden; position:relative; }.camera-stage video, .camera-stage img { height:100%; object-fit:cover; transform:scaleX(-1); width:100%; }.camera-stage:after { border:2px solid rgba(201,239,100,.88); border-radius:50%; box-shadow:0 0 0 999px rgba(2,22,14,.26); content:""; height:min(72%, 520px); left:50%; pointer-events:none; position:absolute; top:12%; transform:translateX(-50%); width:min(58%, 380px); }.camera-status { background:rgba(4,21,14,.72); bottom:0; color:white; left:0; padding:18px; position:absolute; right:0; text-align:center; }.capture-actions { display:flex; flex-wrap:wrap; gap:10px; }.capture-actions .primary-button, .capture-actions .secondary-button { margin-top:20px; }.capture-actions .secondary-button { color:white; border-color:rgba(255,255,255,.45); }
.result-heading { margin-top:72px; }.result-stage { align-items:center; background:#e2e9dc; border-radius:28px; display:flex; justify-content:center; margin-top:28px; min-height:360px; overflow:hidden; position:relative; }.result-stage img { display:block; max-height:min(65svh, 720px); max-width:100%; object-fit:contain; }.spinner { animation:spin 1s linear infinite; border:4px solid #bdd1ba; border-radius:50%; border-top-color:var(--green); height:42px; width:42px; }@keyframes spin { to { transform:rotate(360deg); } }.result-actions { text-align:center; }.qr-instruction { color:#53655a; margin:24px 0 10px; }.qr { border:8px solid white; box-shadow:0 5px 22px rgba(25,52,37,.12); display:block; margin:0 auto; width:190px; }.result-actions .primary-button, .result-actions .secondary-button { margin-top:24px; }.direct-link { color:#617167; font-size:.8rem; line-height:1.4; margin:18px auto; max-width:460px; overflow-wrap:anywhere; }
@media (max-width:760px) { .shell { padding:22px 18px 38px; }.hero, .capture-heading, .result-heading { margin-top:54px; }.scene-grid { grid-template-columns:1fr 1fr; }.scene-card { min-height:210px; }.camera-stage { border-radius:20px; height:55svh; }.result-stage { border-radius:20px; min-height:300px; } }
@media (max-width:380px) { .scene-grid { grid-template-columns:1fr; }.scene-card { min-height:150px; } }
.gallery-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top:30px; }.gallery-photo { aspect-ratio:3 / 4; background:#dce7dc; border-radius:16px; color:var(--green); overflow:hidden; position:relative; text-decoration:none; }.gallery-photo img { height:100%; object-fit:cover; transition:transform .2s ease; width:100%; }.gallery-photo:hover img { transform:scale(1.04); }.gallery-photo span { background:rgba(255,255,255,.92); bottom:9px; border-radius:999px; font-size:.75rem; font-weight:800; left:9px; padding:6px 9px; position:absolute; } @media (max-width:760px) { .gallery-grid { grid-template-columns:1fr 1fr; } }
.preview-notice { align-items:center; background:rgba(8,52,37,.9); border:1px solid rgba(201,239,100,.7); border-radius:14px; bottom:18px; color:white; display:flex; flex-direction:column; gap:3px; left:50%; padding:10px 16px; position:absolute; text-align:center; transform:translateX(-50%); z-index:2; }.preview-notice strong { color:var(--lime); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }.preview-notice span { font-size:.78rem; white-space:nowrap; }
.final-notice { align-items:center; background:rgba(17,71,38,.94); border:1px solid rgba(255,255,255,.52); border-radius:14px; bottom:18px; color:white; display:flex; flex-direction:column; gap:3px; left:50%; padding:10px 16px; position:absolute; text-align:center; transform:translateX(-50%); z-index:2; }.final-notice strong { color:#fff; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }.final-notice span { font-size:.78rem; white-space:nowrap; }.generation-progress { margin:16px auto 0; max-width:560px; }.progress-copy { display:flex; font-size:.82rem; justify-content:space-between; margin-bottom:8px; }.progress-copy strong { color:var(--green); }.progress-copy span { color:#64746c; font-weight:800; }.progress-track { background:#dbe4d7; border-radius:999px; height:10px; overflow:hidden; }.progress-track span { background:linear-gradient(90deg, var(--green), #5d8d4b, var(--lime)); border-radius:inherit; display:block; height:100%; transition:width .45s ease; }.generation-progress p { color:#64746c; font-size:.8rem; margin:9px 0 0; text-align:center; }
.kiosk-result-shell { padding-right:310px; position:relative; }.kiosk-handoff { background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 34px rgba(17,51,38,.14); padding:22px; position:fixed; right:max(24px, calc((100vw - 1120px)/2 + 24px)); text-align:center; top:82px; width:260px; z-index:5; }.kiosk-handoff .eyebrow { margin-bottom:7px; }.kiosk-handoff h2 { font-size:1.8rem; margin:0; }.kiosk-handoff p:not(.eyebrow) { color:#52655b; font-size:.9rem; line-height:1.45; margin:10px 0 16px; }.kiosk-handoff .qr { margin:0 auto 12px; width:180px; }.kiosk-handoff small { color:#64746c; display:block; font-size:.75rem; line-height:1.35; }.kiosk-handoff .primary-button { margin-top:16px; width:100%; } @media (max-width:760px) { .kiosk-result-shell { padding-right:18px; }.kiosk-handoff { margin-top:18px; position:static; width:auto; } }
.camera-status { z-index:4; }.auto-countdown { align-items:center; background:rgba(7,43,31,.9); border:2px solid var(--lime); border-radius:22px; box-shadow:0 10px 32px rgba(0,0,0,.3); color:white; display:flex; flex-direction:column; left:50%; min-width:150px; padding:12px 20px; position:absolute; top:22px; transform:translateX(-50%); z-index:5; }.auto-countdown strong { color:var(--lime); font-size:3.1rem; line-height:1; }.auto-countdown span { font-size:.72rem; font-weight:800; letter-spacing:.08em; margin-top:5px; text-transform:uppercase; }.camera-stage.is-aligned:after { border-color:#fff; box-shadow:0 0 0 999px rgba(2,22,14,.18), 0 0 24px rgba(201,239,100,.8); }.camera-stage.is-capturing:before { animation:capture-flash .35s ease-out; background:white; content:""; inset:0; pointer-events:none; position:absolute; z-index:8; } @keyframes capture-flash { from { opacity:.9; } to { opacity:0; } }