:root {
  --ink: #0b0e11;
  --paper: #f3f4ef;
  --lime: #d9ff65;
  --coral: #ff7658;
  --mint: #89f7c1;
  --glass: rgba(15, 18, 20, .78);
  --line: rgba(255,255,255,.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: #fff; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.prototype-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 520px) minmax(430px, 1fr); background: radial-gradient(circle at 25% 18%, #25302b 0, #111618 30%, #090b0d 72%); overflow: hidden; }
.brief-panel { min-height: 100vh; padding: 44px clamp(32px, 5vw, 76px); display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); position: relative; }
.brief-panel::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(217,255,101,.14); border-radius: 50%; left: -100px; bottom: -70px; box-shadow: 0 0 80px rgba(217,255,101,.08); }
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 27px; height: 21px; border: 2px solid var(--lime); border-radius: 7px; position: relative; }
.brand-mark::before { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--coral); border-radius: 50%; inset: 4px 0 0 7px; }
.brand-mark::after { content: ""; width: 8px; height: 4px; background: var(--lime); border-radius: 2px 2px 0 0; position: absolute; left: 7px; top: -6px; }
.brand-name { font-size: 20px; font-weight: 750; letter-spacing: .08em; }
.prototype-tag { margin-left: auto; color: #99a29e; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .08em; }
.brief-copy { margin: auto 0 46px; max-width: 410px; }
.eyebrow { color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.brief-copy h1 { margin: 18px 0 22px; font-size: clamp(36px, 3.1vw, 44px); line-height: 1.15; letter-spacing: -.06em; }
.brief-summary { margin: 0; color: #aeb7b3; font-size: 16px; line-height: 1.8; max-width: 390px; }
.flow-nav { display: grid; gap: 6px; z-index: 1; }
.flow-item { appearance: none; border: 0; color: #87918d; background: transparent; padding: 13px 14px; display: grid; grid-template-columns: 42px 1fr; text-align: left; border-radius: 15px; cursor: pointer; transition: .25s ease; }
.flow-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.flow-item.active { color: #fff; background: rgba(217,255,101,.08); box-shadow: inset 2px 0 var(--lime); }
.flow-number { font: 700 12px/1 ui-monospace, monospace; color: var(--lime); padding-top: 3px; }
.flow-item b, .flow-item small { display: block; }
.flow-item b { font-size: 15px; }
.flow-item small { font-size: 12px; color: #737d79; margin-top: 4px; }
.privacy-note { margin-top: 24px; color: #737d79; font-size: 12px; display: flex; align-items: center; gap: 8px; z-index: 1; }
.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.phone-stage { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; }
.phone { width: min(390px, calc(100vw - 40px)); aspect-ratio: 390 / 820; max-height: calc(100vh - 58px); border-radius: 48px; overflow: hidden; position: relative; background: #222; border: 7px solid #24292a; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 1px #000; isolation: isolate; }
.camera-video, .camera-image, .result-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-video { z-index: 0; opacity: 0; transition: opacity .3s ease; background: #111; }
.camera-image, .result-photo { background: url("/assets/cafe-camera-scene.webp") center 48% / cover no-repeat; transform: scale(1.02); transition: opacity .3s ease; }
.phone.camera-live .camera-video { opacity: 1; }
.phone.camera-live .camera-image,.phone.camera-connecting .camera-image { opacity: 0; }
.scan-background-layer { position:absolute;inset:0;background-repeat:no-repeat;opacity:0;transition:opacity .8s ease; }
.scan-background-layer.visible { opacity:1; }
.scan-bottom-panel { position:absolute;left:20px;right:20px;bottom:calc(72px + env(safe-area-inset-bottom));display:grid;gap:8px; }
.scan-background-controls { display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:#09110e80;font-size:10px;backdrop-filter:blur(8px); }
.scan-background-controls span { flex:1; }.scan-background-controls button { border:0;border-radius:8px;background:#ffffff1a;color:#fff;font-size:10px;padding:8px;cursor:pointer; }
.phone.camera-live .scan-background-controls,.phone.is-scanning .scan-background-controls { display:none; }
.phone:not(.camera-live):not(.is-scanning) .scene-chips { display:none; }
.phone.is-guiding .camera-image { display:none; }
.phone.is-guiding { background:#111; }
.guide-camera-state { position:absolute; top:28%; left:16px; right:16px; z-index:20; padding:18px; text-align:center; border-radius:16px; background:rgba(15,20,22,.95); color:#fff; }
.guide-camera-state[hidden] { display:none; }
.guide-camera-state button { padding:10px 18px; border:0; border-radius:10px; background:var(--lime); color:#111; cursor:pointer; }
#shutter:disabled { opacity:.35; cursor:not-allowed; }
.camera-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.52), transparent 20%, transparent 57%, rgba(0,0,0,.8)); z-index: 1; }
.camera-header { position: absolute; z-index: 30; top: 14px; left: 13px; right: 13px; height: 47px; display: flex; align-items: center; justify-content: space-between; }
.icon-btn { border: 1px solid rgba(255,255,255,.16); background: rgba(7,10,10,.38); color: #fff; width: 38px; height: 38px; border-radius: 50%; backdrop-filter: blur(16px); cursor: pointer; }
.mini-brand { position:absolute;left:50%;transform:translateX(-50%);display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; padding: 8px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(7,10,10,.3); backdrop-filter: blur(14px); }
.mini-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.account-trigger { min-width:56px;height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(7,10,10,.46);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(16px);cursor:pointer; }
.account-trigger b { max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800; }
.account-avatar { display:none;width:23px;height:23px;border-radius:50%;place-items:center;background:var(--lime);color:#11150d;font-size:8px;font-weight:900; }
.account-trigger.logged-in { padding:0 8px 0 6px; }
.account-trigger.logged-in .account-avatar { display:grid; }
.screen { display: none; position: absolute; inset: 0; z-index: 10; }
.screen.active { display: block; animation: reveal .34s ease both; }
@keyframes reveal { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
.focus-frame { position: absolute; inset: 17% 12% 23%; }
.focus-frame i { position: absolute; width: 46px; height: 46px; border-color: rgba(217,255,101,.78); border-style: solid; }
.focus-frame i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-radius:15px 0 0 0}.focus-frame i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-radius:0 15px 0 0}.focus-frame i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 15px}.focus-frame i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 15px 0}
.scan-beam { position: absolute; z-index: 2; top: 23%; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--lime), transparent); filter: drop-shadow(0 0 7px var(--lime)); animation: scan 2s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateY(0); opacity:.2 } 50% { transform: translateY(360px); opacity:1 } }
.scene-chips span { position: absolute; z-index: 3; opacity: 0; padding: 6px 9px; background: rgba(10,13,13,.62); border: 1px solid rgba(217,255,101,.38); border-radius: 12px; color: #efffc2; font-size: 11px; backdrop-filter: blur(10px); animation: chipIn .5s calc(var(--delay) + .7s) forwards; }
.scene-chips span:nth-child(1){top:22%;left:9%}.scene-chips span:nth-child(2){top:38%;right:8%}.scene-chips span:nth-child(3){top:53%;left:8%}
@keyframes chipIn { to { opacity:1; transform:translateY(-5px) } }
.scan-status { display: flex; align-items: center; gap: 10px; padding: 13px; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(18px); }
.scan-status { flex-wrap:wrap; }
.scan-copy { min-width: 0; flex: 1 1 calc(100% - 56px); }
.scan-status .scan-action { flex:1; }
.scan-status b, .scan-status small { display: block; }
.scan-status b { font-size: 15px; }.scan-status small { color:#a7b0ac;font-size:11px;margin-top:5px }
.scan-action { flex: 0 0 auto; min-width: 78px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--lime); color: #11150d; font-size: 11px; font-weight: 800; cursor: pointer; }
.scan-action.secondary { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; }
.scan-action:disabled { opacity: .58; cursor: wait; }
.scan-action[hidden] { display: none; }
.pulse-orb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(217,255,101,.35); }
.pulse-orb span { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(217,255,101,.5); animation: pulse 1.4s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 11px rgba(217,255,101,0) } }
.scene-summary { position: absolute; top: 83px; left: 17px; display: flex; gap: 9px; align-items: center; padding: 10px 12px; border-radius: 15px; background: rgba(10,13,13,.66); border:1px solid var(--line); backdrop-filter: blur(16px); }
.scene-summary b,.scene-summary small{display:block}.scene-summary b{font-size:13px}.scene-summary small{color:#adb5b1;font-size:10px;margin-top:3px}.ai-spark{color:var(--lime);font-size:18px}
.recommend-sheet { position: absolute; left: 0; right: 0; bottom: 50px; padding: 8px 16px 19px; border-radius: 28px 28px 0 0; background: rgba(11,14,17,.91); border-top: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(24px); }
.sheet-handle { width: 34px; height: 4px; border-radius: 4px; background: #555e5a; margin: 0 auto 13px; }
.sheet-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:12px }.sheet-title b,.sheet-title small{display:block}.sheet-title b{font-size:17px}.sheet-title small{font-size:10px;color:#84908b;margin-top:4px}.sheet-title button{border:0;background:transparent;color:var(--lime);font-size:11px;padding:4px;cursor:pointer}
.scene-tabs { display:flex; gap:6px; margin:-2px 0 11px; padding-bottom:2px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
.scene-tabs::-webkit-scrollbar { display:none; }
.scene-tabs button { flex:0 0 auto; height:27px; padding:0 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.06); color:#8f9a95; font-size:10px; cursor:pointer; scroll-snap-align:start; }
.scene-tabs button span { margin-right:3px; color:var(--lime); }
.scene-tabs button.active { border-color:var(--lime); background:rgba(217,255,101,.14); color:#efffc9; }
.shot-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shot-card { border: 1px solid rgba(255,255,255,.1); background:#171b1c; color:#fff; padding:0; border-radius:15px; overflow:hidden; position:relative; cursor:pointer;text-align:left;transition:.2s ease }
.shot-card.selected { border-color: var(--lime); transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.28) }
.shot-thumb { display:block; width:100%; height:auto; aspect-ratio:1 / 1; background-color:#101415; background-image:url("/assets/shot-library-cafe-v1.webp"); background-size:300% 300%; background-repeat:no-repeat; }
.shot-info { display:block;padding:9px 8px 11px;min-height:72px}.shot-info b,.shot-info small{display:block}.shot-info b{font-size:12px}.shot-info small{font-size:9px;color:#83908a;margin-top:4px}.shot-info em{display:inline-block;color:#12150d;background:var(--lime);font-style:normal;font-size:8px;font-weight:800;padding:3px 5px;border-radius:5px;margin-top:6px}
.select-ring { position:absolute;right:7px;top:7px;width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.2) }.shot-card.selected .select-ring{border:4px solid var(--lime);background:#101311}
.primary-cta { width:100%;height:46px;border:0;border-radius:15px;background:var(--lime);color:#11150d;font-weight:800;margin-top:13px;cursor:pointer }.primary-cta span{float:right;margin-right:8px}
.composition-grid { position:absolute; inset:0; opacity:.27 }.composition-grid i{position:absolute;background:#fff}.composition-grid i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}.composition-grid i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}.composition-grid i:nth-child(3){top:33.33%;left:0;right:0;height:1px}.composition-grid i:nth-child(4){top:66.66%;left:0;right:0;height:1px}
.pose-overlay { position:absolute;inset:3% 0 11%;width:100%;height:86%;fill:none;stroke:var(--lime);stroke-width:3;stroke-dasharray:8 9;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(217,255,101,.7));opacity:.84 }
.guide-score { position:absolute;top:84px;left:16px;right:16px;display:flex;gap:7px }.guide-score span{padding:7px 10px;border-radius:11px;background:rgba(8,11,11,.6);border:1px solid var(--line);backdrop-filter:blur(12px);font-size:10px}.guide-score b{color:var(--lime);font-size:12px}
.coach-stack { position:absolute;left:15px;right:15px;bottom:151px;display:grid;gap:7px }.coach-card{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:rgba(8,11,11,.72);border:1px solid var(--line);backdrop-filter:blur(18px)}.coach-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:var(--lime);color:#111;font-weight:900}.subject-coach .coach-icon{background:var(--coral);color:#fff}.coach-card small,.coach-card b{display:block}.coach-card small{font-size:9px;color:#99a39e;margin-bottom:3px}.coach-card b{font-size:12px}
.capture-controls { position:absolute;left:0;right:0;bottom:65px;display:flex;align-items:center;justify-content:center;gap:45px }.shutter{width:66px;height:66px;border-radius:50%;border:3px solid #fff;background:transparent;padding:4px;cursor:pointer}.shutter span{display:block;width:100%;height:100%;background:#fff;border-radius:50%;transition:.15s}.shutter:active span{transform:scale(.83);background:var(--lime)}.small-round{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.result-photo { inset:0 0 42%; background-position:center 43%; transform:none }.result-screen{background:#0c0f11}.result-top{position:absolute;left:18px;top:82px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(8,11,11,.63);border:1px solid var(--line);backdrop-filter:blur(15px)}.success-check{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#12150d;font-weight:900}.result-top b,.result-top small{display:block}.result-top b{font-size:14px}.result-top small{font-size:9px;color:#a1aaa6;margin-top:3px}
.result-sheet{position:absolute;left:0;right:0;bottom:50px;min-height:43%;padding:22px 18px;background:#0d1112;border-radius:27px 27px 0 0}.result-metrics{display:flex;align-items:center;justify-content:space-around;text-align:center;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.09)}.result-metrics span{min-width:60px}.result-metrics b,.result-metrics small{display:block}.result-metrics b{font-size:19px;color:var(--lime)}.result-metrics small{font-size:9px;color:#7e8884;margin-top:3px}.result-metrics i{width:1px;height:28px;background:rgba(255,255,255,.1)}.result-sheet p{text-align:center;font-size:12px;color:#a8b0ad;margin:16px 0 10px}.feedback-row{display:grid;grid-template-columns:1.25fr .8fr;gap:7px}.feedback-row button{border:1px solid rgba(255,255,255,.12);background:#171c1d;color:#dbe1de;border-radius:12px;padding:10px 6px;font-size:10px;cursor:pointer}.feedback-row button.selected{border-color:var(--lime);color:var(--lime)}.result-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;margin-top:14px}.result-actions button{height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font-weight:750;cursor:pointer}.result-actions .save-btn{background:var(--lime);color:#10130d;border-color:var(--lime)}
.result-screen{background:#090c0d}.result-screen .result-photo{inset:0 0 165px;background-size:contain;background-position:center;background-repeat:no-repeat;transform:none;cursor:zoom-in}.result-feedback-bar{position:absolute;z-index:22;left:16px;right:16px;bottom:173px;padding:7px 8px 8px;border:1px solid rgba(255,255,255,.15);border-radius:15px;background:rgba(8,12,12,.78);color:#fff;backdrop-filter:blur(16px)}.result-feedback-bar>span{display:block;margin-bottom:6px;text-align:center;color:#c5cdc8;font-size:8px}.result-feedback-bar .feedback-row{grid-template-columns:1.35fr .75fr;gap:6px}.result-feedback-bar .feedback-row button{height:25px;padding:0 5px;border-radius:8px;background:rgba(255,255,255,.075);font-size:8px}.result-feedback-bar .feedback-row button.selected{background:rgba(217,255,101,.13)}.result-action-dock{position:absolute;z-index:21;left:0;right:0;bottom:50px;height:115px;padding:10px 16px 12px;background:#0d1112;border-top:1px solid rgba(255,255,255,.08)}.result-action-dock .result-actions{display:block;margin:0}.result-action-dock .result-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:7px}.result-action-dock .result-actions button{height:39px;font-size:10px}.result-action-dock .result-actions .share-btn{width:100%;height:45px;border:0;background:var(--lime);color:#10130d;font-size:12px}.result-action-dock .share-btn span{display:inline-grid;width:22px;height:22px;margin-right:7px;place-items:center;border-radius:50%;background:#111;color:var(--lime)}.phone.result-photo-focus .result-photo{inset:0;z-index:140;background-color:#050707;cursor:zoom-out}.phone.result-photo-focus .camera-header,.phone.result-photo-focus .result-top,.phone.result-photo-focus .result-feedback-bar,.phone.result-photo-focus .result-action-dock,.phone.result-photo-focus .prototype-stepper,.phone.result-photo-focus .home-indicator{display:none}
.poster-sheet{position:absolute;inset:0;z-index:120;visibility:hidden;pointer-events:none}.poster-sheet.open{visibility:visible;pointer-events:auto}.poster-backdrop{position:absolute;inset:0;width:100%;border:0;background:rgba(0,0,0,.76);opacity:0;transition:.22s}.poster-sheet.open .poster-backdrop{opacity:1}.poster-panel{position:absolute;left:0;right:0;bottom:50px;padding:11px 18px 14px;border-radius:27px 27px 0 0;background:#111512;color:#fff;transform:translateY(calc(100% + 50px));transition:.28s ease}.poster-sheet.open .poster-panel{transform:translateY(0)}.poster-panel header{height:43px;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:8px}.poster-panel header button{width:30px;height:30px;border:0;border-radius:50%;background:#252b27;color:#fff;font-size:19px}.poster-panel header small{display:block;color:#859089;font-size:7px}.share-poster{width:min(252px,78%);margin:8px auto 10px;overflow:hidden;border-radius:3px;background:#f4f2e9;color:#111;box-shadow:0 15px 35px #0008}.poster-photo{height:280px;position:relative;overflow:hidden;background-image:url('/assets/cafe-camera-scene.webp');background-size:0 0}.poster-photo::before,.poster-photo::after{content:"";position:absolute;inset:0;background-image:inherit;background-position:center;background-repeat:no-repeat}.poster-photo::before{inset:-12px;background-size:cover;filter:blur(10px) brightness(.58)}.poster-photo::after{background-size:contain}.poster-info{min-height:91px;padding:8px 10px;display:grid;grid-template-columns:1fr 74px;align-items:center;gap:7px}.poster-brand-line{display:flex;align-items:center;gap:5px}.poster-brand-line>b{font-size:9px}.poster-brand-line small{margin-left:1px;font-size:5px;letter-spacing:.04em;color:#778079}.poster-brand-mark{width:16px;height:13px;position:relative;display:inline-block;border:1.5px solid #789719;border-radius:4px}.poster-brand-mark::before{content:"";position:absolute;width:5px;height:5px;left:4px;top:3px;border:1.5px solid #e36e50;border-radius:50%}.poster-brand-mark::after{content:"";position:absolute;width:5px;height:2px;left:4px;top:-4px;border-radius:2px 2px 0 0;background:#789719}.poster-info h3{margin:7px 0 0;font-size:13px;line-height:1.15;letter-spacing:-.045em;white-space:nowrap}.poster-info h3 em{color:#617c17;font-style:normal}.poster-qr-wrap{display:grid;justify-items:center;gap:3px}.poster-qr-wrap p{width:74px;margin:0;text-align:center;color:#111;line-height:1.18}.poster-qr-wrap p b,.poster-qr-wrap p small{display:block}.poster-qr-wrap p b{font-size:5px}.poster-qr-wrap p small{margin-top:1px;color:#778079;font-size:4.7px;letter-spacing:.02em}.prototype-qr{width:54px;height:54px;display:block;padding:2px;background:#fff}.poster-actions{display:grid;grid-template-columns:1.25fr .75fr;gap:8px}.poster-actions button{height:43px;border-radius:13px;font-size:11px;font-weight:850;cursor:pointer}.poster-share{border:0;background:var(--lime);color:#111512}.poster-save{border:1px solid #39413c;background:#202622;color:#fff}.poster-note{margin:7px 0 0;text-align:center;color:#879089;font-size:7px}
.prototype-stepper { position:absolute;z-index:40;left:0;right:0;bottom:0;height:50px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8,10,11,.93);border-top:1px solid rgba(255,255,255,.09);backdrop-filter:blur(18px);padding:5px 11px 8px}.prototype-stepper button{border:0;background:transparent;color:#68726e;font-size:9px;display:grid;place-items:center;gap:2px;cursor:pointer}.prototype-stepper span{display:block;width:15px;height:3px;border-radius:3px;background:#39413e}.prototype-stepper button.active{color:#fff}.prototype-stepper button.active span{background:var(--lime);box-shadow:0 0 8px rgba(217,255,101,.6)}
.home-indicator { position:absolute;z-index:50;bottom:3px;left:50%;transform:translateX(-50%);width:90px;height:3px;border-radius:3px;background:rgba(255,255,255,.48);pointer-events:none }
.toast { position:absolute;z-index:70;left:50%;bottom:66px;transform:translate(-50%,12px);padding:9px 13px;border-radius:14px;background:#f4f6f2;color:#111;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.profile-sheet { position:absolute;inset:0;z-index:100;visibility:hidden;pointer-events:none; }
.profile-sheet.open { visibility:visible;pointer-events:auto; }
.profile-backdrop { position:absolute;inset:0;width:100%;border:0;background:rgba(0,0,0,.7);opacity:0;transition:.2s; }
.profile-sheet.open .profile-backdrop { opacity:1; }
.profile-login-panel,.profile-center-panel { position:absolute;left:0;right:0;bottom:50px;padding:11px 18px 20px;border-radius:26px 26px 0 0;background:#f5f7f2;color:#111512;transform:translateY(calc(100% + 50px));transition:.25s ease; }
.profile-sheet.open .profile-login-panel,.profile-sheet.open .profile-center-panel { transform:translateY(0); }
.profile-login-panel[hidden],.profile-center-panel[hidden],.profile-name-editor[hidden],.profile-detail-view[hidden],.profile-detail-section[hidden],.profile-photo-latest[hidden],.profile-order-card[hidden],.profile-order-empty[hidden] { display:none; }
.profile-handle { display:block;width:34px;height:4px;margin:0 auto 18px;border-radius:4px;background:#d4d9d1; }
.profile-close { position:absolute;right:16px;top:14px;width:30px;height:30px;border:0;border-radius:50%;background:#e5e9e2;color:#5d665f;font-size:18px;cursor:pointer; }
.profile-kicker { margin:0 0 6px;color:#6f9019;font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em; }
.profile-login-panel h2 { max-width:285px;margin:0;font-size:21px;line-height:1.25;letter-spacing:-.035em; }
.profile-login-copy { margin:9px 0 14px;color:#778079;font-size:9px; }
.profile-field { height:51px;margin-top:8px;padding:0 12px;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:5px;border:1px solid #dfe3dc;border-radius:13px;background:#fff; }
.profile-field > span { color:#555e58;font-size:10px;font-weight:700; }
.profile-field input { min-width:0;border:0;outline:0;background:transparent;color:#111512;font-size:12px;font-weight:650; }
.profile-field input::placeholder { color:#b1b8b3;font-weight:450; }
.profile-code-field { grid-template-columns:52px 1fr auto; }
.profile-code-field button { border:0;border-left:1px solid #e4e7e2;padding:5px 0 5px 11px;background:transparent;color:#668710;font-size:9px;font-weight:750;cursor:pointer; }
.profile-code-field button:disabled { color:#a9b0ab; }
.profile-consent { margin:12px 1px;display:flex;align-items:center;gap:7px;color:#7f8882;font-size:8px; }
.profile-consent input { accent-color:#9bc52b; }
.profile-primary { width:100%;height:48px;border:0;border-radius:14px;background:#111512;color:#fff;font-weight:800;cursor:pointer; }
.profile-primary span { float:right;margin-right:4px;color:var(--lime); }
.profile-safe { margin:9px 0 0;color:#939b95;font-size:8px;text-align:center; }
.profile-safe span { margin-right:4px;color:#63a778; }
.profile-identity { display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:11px;padding:3px 1px 15px; }
.profile-large-avatar { width:50px;height:50px;display:grid;place-items:center;border-radius:17px;background:#111512;color:var(--lime);font-size:14px;font-weight:900;box-shadow:0 10px 22px rgba(17,21,18,.15); }
.profile-identity small,.profile-identity b,.profile-identity em { display:block; }
.profile-identity small { color:#8b938e;font-size:8px; }
.profile-identity b { margin-top:3px;font-size:17px;letter-spacing:-.02em; }
.profile-identity em { margin-top:3px;color:#818a84;font-size:9px;font-style:normal; }
.profile-identity button { border:0;background:transparent;color:#668710;font-size:9px;font-weight:750;cursor:pointer; }
.profile-name-editor { margin:-6px 0 12px 63px;display:grid;grid-template-columns:1fr auto;gap:7px; }
.profile-name-editor input { min-width:0;height:36px;padding:0 10px;border:1px solid #d9ddd7;border-radius:10px;background:#fff;outline:0; }
.profile-name-editor button { padding:0 13px;border:0;border-radius:10px;background:#111512;color:#fff;font-size:9px;font-weight:750;cursor:pointer; }
.profile-benefit-card { min-height:76px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;border-radius:17px;background:linear-gradient(135deg,#151a16,#252d25);color:#fff;box-shadow:0 12px 26px rgba(17,22,18,.13); }
.profile-benefit-card small,.profile-benefit-card b { display:block; }
.profile-benefit-card small { color:#9aa59e;font-size:8px; }
.profile-benefit-card b { margin-top:6px;font-size:14px; }
.profile-benefit-card em { padding:6px 8px;border:1px solid rgba(217,255,101,.34);border-radius:999px;background:rgba(217,255,101,.1);color:var(--lime);font:800 8px/1 ui-monospace,monospace;font-style:normal; }
.profile-menu { margin-top:12px;overflow:hidden;border:1px solid #e2e5df;border-radius:16px;background:#fff; }
.profile-menu button { width:100%;min-height:49px;padding:0 12px;display:grid;grid-template-columns:1fr auto 10px;align-items:center;gap:8px;border:0;border-bottom:1px solid #eef0ec;background:#fff;color:#171b18;text-align:left;cursor:pointer; }
.profile-menu button:last-child { border-bottom:0; }
.profile-menu button > span { display:flex;align-items:center;gap:9px; }
.profile-menu i { width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#eef3e8;color:#627d1b;font-size:8px;font-style:normal;font-weight:850; }
.profile-menu b { font-size:10px; }
.profile-menu em { color:#8b938d;font-size:8px;font-style:normal; }
.profile-menu strong { color:#a2aaa4;font-size:17px;font-weight:450; }
.profile-version { margin:14px 0 0;text-align:center;color:#a2aaa4;font:500 8px/1.4 ui-monospace,monospace;letter-spacing:.08em; }
.profile-version b { color:#78817b;font-weight:800; }
.profile-logout { width:100%;margin-top:2px;padding:10px;border:0;background:transparent;color:#8a928d;font-size:9px;cursor:pointer; }
.profile-detail-view { min-height:430px; }
.profile-detail-header { height:43px;margin-top:-9px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e2e6df; }
.profile-detail-header button { width:29px;height:29px;border:0;border-radius:50%;background:#e5e9e2;color:#4d5650;font-size:20px;cursor:pointer; }
.profile-detail-header small,.profile-detail-header b { display:block; }
.profile-detail-header small { color:#929a94;font-size:7px; }
.profile-detail-header b { margin-top:2px;font-size:13px; }
.profile-detail-section { padding-top:14px; }
.profile-photo-summary { padding:14px 15px;display:flex;align-items:center;justify-content:space-between;border-radius:15px;background:#151a16;color:#fff; }
.profile-photo-summary small,.profile-photo-summary b { display:block; }.profile-photo-summary small{color:#98a29c;font-size:8px}.profile-photo-summary b{margin-top:4px;font-size:17px;color:var(--lime)}.profile-photo-summary em{color:#929d96;font-size:8px;font-style:normal}
.profile-photo-empty,.profile-order-empty { min-height:255px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.profile-photo-empty i,.profile-order-empty i { width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#eaf0e4;color:#668315;font-size:12px;font-style:normal;font-weight:900; }
.profile-photo-empty b,.profile-order-empty b { margin-top:12px;font-size:14px; }.profile-photo-empty p,.profile-order-empty p { max-width:250px;margin:7px 0 14px;color:#818a84;font-size:9px;line-height:1.55; }
.profile-photo-empty button,.profile-order-empty button { height:38px;padding:0 16px;border:0;border-radius:11px;background:#111512;color:#fff;font-size:9px;font-weight:800;cursor:pointer; }
.profile-photo-latest { margin-top:12px;overflow:hidden;border:1px solid #e1e5de;border-radius:16px;background:#fff; }
#profile-photo-preview { height:205px;background:url('/assets/cafe-camera-scene.webp') center 45% / cover no-repeat; }
.profile-photo-latest span { display:block;padding:11px 13px;position:relative; }.profile-photo-latest small,.profile-photo-latest b{display:block}.profile-photo-latest small{color:#8d958f;font-size:8px}.profile-photo-latest b{margin-top:3px;font-size:11px}.profile-photo-latest em{position:absolute;right:13px;top:17px;color:#6f8b20;font-size:8px;font-style:normal}
.profile-order-card { padding:15px;border:1px solid #dfe4dc;border-radius:17px;background:#fff; }
.profile-order-card > div { position:relative;padding-left:17px; }.profile-order-card > div span{position:absolute;left:0;top:3px;width:8px;height:8px;border-radius:50%;background:#efa93b;box-shadow:0 0 0 5px rgba(239,169,59,.12)}.profile-order-card small,.profile-order-card b{display:block}.profile-order-card small{color:#a36b13;font-size:8px}.profile-order-card b{margin-top:5px;font-size:14px}
.profile-order-card dl { margin:16px 0 0;padding-top:12px;display:grid;grid-template-columns:65px 1fr;gap:10px;border-top:1px solid #eef0ec;font-size:8px; }.profile-order-card dt{color:#939b95}.profile-order-card dd{margin:0;text-align:right;font-weight:700}
.profile-contact-hero { padding:14px;display:flex;align-items:center;gap:11px;border-radius:16px;background:#151a16;color:#fff; }.profile-contact-hero i{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;background:var(--lime);color:#111512;font-size:11px;font-style:normal;font-weight:900}.profile-contact-hero small,.profile-contact-hero b{display:block}.profile-contact-hero small{color:#9da69f;font-size:8px}.profile-contact-hero b{margin-top:4px;font-size:13px}
.profile-contact-row { width:100%;margin-top:11px;padding:13px;display:flex;align-items:center;justify-content:space-between;border:1px solid #dfe4dc;border-radius:14px;background:#fff;color:#141815;text-align:left;cursor:pointer; }.profile-contact-row b,.profile-contact-row small{display:block}.profile-contact-row b{font-size:11px}.profile-contact-row small{margin-top:4px;color:#8b938d;font-size:8px}.profile-contact-row em{color:#6b891a;font-size:8px;font-style:normal;font-weight:750}
.profile-group-card { margin-top:10px;padding:14px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;background:#e9eee5; }.profile-group-card small,.profile-group-card b{display:block}.profile-group-card small{color:#6d891c;font-size:8px;font-weight:800}.profile-group-card b{margin-top:4px;font-size:11px}.profile-group-card p{margin:5px 0 0;color:#808981;font-size:8px}.profile-group-card i{width:49px;height:49px;display:grid;place-items:center;border-radius:13px;background:#d6dccf;color:#7b867d;font-size:13px;font-style:normal;font-weight:900}
.profile-security-card { padding:14px;display:flex;gap:10px;align-items:flex-start;border-radius:15px;background:#eaf4e9; }.profile-security-card i{width:27px;height:27px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:#79c995;color:#fff;font-size:10px;font-style:normal;font-weight:900}.profile-security-card b,.profile-security-card small{display:block}.profile-security-card b{font-size:11px}.profile-security-card small{margin-top:4px;color:#718078;font-size:8px;line-height:1.45}
.profile-settings-list { margin-top:11px;overflow:hidden;border:1px solid #e0e4de;border-radius:15px;background:#fff; }.profile-settings-list button{width:100%;min-height:57px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #edf0eb;background:#fff;color:#171b18;text-align:left;cursor:pointer}.profile-settings-list button:last-child{border-bottom:0}.profile-settings-list b,.profile-settings-list small{display:block}.profile-settings-list b{font-size:10px}.profile-settings-list small{margin-top:4px;color:#8c958e;font-size:8px}.profile-settings-list em{padding:4px 6px;border-radius:999px;background:#e4f3e7;color:#388653;font-size:7px;font-style:normal}.profile-settings-list strong{color:#718b25;font-size:9px}
.profile-privacy-note { margin:11px 4px 0;color:#969d98;font-size:8px;line-height:1.5;text-align:center; }
.capture-flash { position: absolute; inset: 0; z-index: 80; background: #fff; pointer-events: none; animation: flash .3s ease forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
#recognition-empty { padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035); }
#recognition-empty b { font-size:12px;color:var(--lime); }
#recognition-empty p { color:#a8b0ad;font-size:10px;line-height:1.5;margin:5px 0 0; }
#retry-recommend { margin:0; }
.recommendation-actions{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.recommendation-actions #refresh-shots{height:38px;padding:0 13px;border:1px solid rgba(217,255,101,.3);border-radius:12px;background:rgba(217,255,101,.08);color:var(--lime);font-size:11px;font-weight:800;cursor:pointer}.recommendation-actions #refresh-shots:hover{background:rgba(217,255,101,.14)}
.recommend-scan-visual{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}.phone.recommend-recognizing .recommend-scan-visual{display:block}.recommend-scan-state{display:none}.phone.recommend-recognizing .scene-summary{display:none}.phone.recommend-recognizing .recommend-sheet{min-height:0;height:98px;padding:8px 12px 11px;overflow:hidden;transition:height .25s ease}.phone.recommend-recognizing .recommend-sheet>.festival-entry,.phone.recommend-recognizing .recommend-sheet>.sheet-title,.phone.recommend-recognizing .recommend-sheet>.scene-tabs,.phone.recommend-recognizing .recommend-sheet>#recognition-empty,.phone.recommend-recognizing .recommend-sheet>.recommendation-actions,.phone.recommend-recognizing .recommend-sheet>.shot-list,.phone.recommend-recognizing .recommend-sheet>.primary-cta,.phone.recommend-recognizing .recommend-sheet>.import-reference{display:none}.phone.recommend-recognizing .recommend-scan-state{height:70px;display:flex;align-items:center;gap:7px}.recommend-scan-spark{width:29px;height:29px;display:grid;place-items:center;flex:none;border-radius:50%;background:rgba(217,255,101,.12);color:var(--lime);animation:pulse 1.2s ease-in-out infinite}.recommend-scan-copy{min-width:0;flex:1}.recommend-scan-copy b,.recommend-scan-copy small{display:block}.recommend-scan-copy b{font-size:10px}.recommend-scan-copy small{margin-top:4px;color:#89948d;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recommend-scan-cancel,.recommend-scan-error-actions button{height:30px;padding:0 8px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.06);color:#dce3de;font-size:8px;cursor:pointer;white-space:nowrap}.recommend-scan-error-actions{display:none;gap:5px}.recommend-scan-state[data-state="error"] .recommend-scan-spark{color:#efaa78;background:rgba(239,170,120,.1);animation:none}.recommend-scan-state[data-state="error"] .recommend-scan-cancel{display:none}.recommend-scan-state[data-state="error"] .recommend-scan-error-actions{display:flex}.recommend-scan-state[data-state="error"] .recommend-scan-error-actions button:first-child{border-color:rgba(217,255,101,.35);color:var(--lime)}
.stage-caption{position:absolute;bottom:5px;color:#626b68;font-size:11px;letter-spacing:.04em}
@media (max-width: 840px) {
  .prototype-shell{display:block;min-height:100dvh}.brief-panel{display:none}.phone-stage{padding:0;min-height:100dvh}.phone{width:100vw;height:100dvh;max-height:none;aspect-ratio:auto;border:0;border-radius:0}.stage-caption{display:none}.camera-header{top:max(14px, calc(env(safe-area-inset-top) + 8px))}.prototype-stepper{padding-bottom:max(8px, env(safe-area-inset-bottom));height:calc(50px + env(safe-area-inset-bottom))}.home-indicator{bottom:max(3px, env(safe-area-inset-bottom))}
}
.poster-brand-mark{width:18px!important;height:15px!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}.poster-brand-mark::before,.poster-brand-mark::after{content:none!important}.poster-brand-mark>i{position:absolute;left:0;top:0;width:49px;height:41px;border:3px solid #789719;border-radius:12px;box-shadow:0 0 24px #78971920;transform:scale(.35);transform-origin:top left}.poster-brand-mark>i::before{content:"";position:absolute;top:-8px;left:6px;width:11px;height:5px;background:#789719;border-radius:3px 3px 0 0}.poster-brand-mark>i::after{content:"";position:absolute;width:20px;height:20px;border:3px solid #e36e50;border-radius:50%;top:7px;left:11px}
.poster-brand-mark>i{width:18px;height:15px;border:1px solid #789719;border-radius:4px;box-shadow:none;transform:none}.poster-brand-mark>i::before{top:-3px;left:3px;width:4px;height:2px;border-radius:1px 1px 0 0}.poster-brand-mark>i::after{width:8px;height:8px;border:1px solid #e36e50;left:50%;top:50%;transform:translate(-50%,-50%)}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }

/* Keep the full captured frame in the dynamically sized share poster. */
.poster-panel{max-height:calc(100% - 12px);overflow:auto}
.poster-photo{height:auto;aspect-ratio:var(--poster-photo-aspect,1080 / 2271);background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.poster-photo::before,.poster-photo::after{display:none}