:root{--green:#556B4E;--deep:#2F3A2E;--cream:#F7F3EC;--paper:#FFFCF5;--sage:#A8B79A;--light:#E6E2CF;--ink:#2F3A2E;--muted:#667060;--line:rgba(47,58,46,.15);--shadow:0 24px 70px rgba(47,58,46,.18)}
*{box-sizing:border-box}
html{background:#E6E2CF}
body{margin:0;min-height:100vh;font-family:"Poppins",sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 0,#F7F3EC 0,transparent 35%),radial-gradient(circle at 90% 88%,#A8B79A 0,transparent 34%),#E6E2CF}
button,input{font:inherit}
button,label{touch-action:manipulation}
.app-shell{position:relative;max-width:520px;min-height:100vh;margin:0 auto;overflow:hidden;background:var(--cream);box-shadow:var(--shadow)}
.brand-bar{height:80px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--line);background:rgba(247,243,236,.94);backdrop-filter:blur(16px)}
.brand-lockup{display:flex;align-items:center;gap:9px}.brand-lockup span{font-family:"Quicksand",sans-serif;font-weight:600;letter-spacing:.28em;font-size:.74rem;color:var(--deep);padding-left:10px;border-left:1px solid var(--sage)}
.brand-logo{width:106px;height:58px;object-fit:contain;object-position:left center}
.instagram-link{display:flex;align-items:center;gap:7px;color:var(--green);text-decoration:none;font-weight:700;font-size:.82rem}
.instagram-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.intro-lockup{display:flex;align-items:center;justify-content:center;gap:14px;margin:-24px auto 14px;color:var(--deep)}
.intro-lockup img{display:block;width:148px;height:82px;object-fit:contain}
.intro-lockup span{padding-left:14px;border-left:1px solid var(--sage);font-family:"Quicksand",sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.32em}
.intro{min-height:calc(100vh - 80px);padding:44px 24px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(circle at 50% 47%,rgba(168,183,154,.25),transparent 32%)}
.eyebrow{margin:0 0 8px;font-size:.72rem;letter-spacing:.22em;font-weight:800;color:var(--green)}
h1,h2{font-family:"Quicksand",sans-serif;color:var(--deep);margin:0}
h1{font-size:clamp(2.5rem,10vw,4rem);line-height:.95;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--green);font-weight:600}
h2{font-size:1.8rem;line-height:1.05}
.intro-copy{max-width:330px;margin:20px auto 26px;font-size:1rem;line-height:1.55;color:var(--muted)}
.mini-frame-deck{position:relative;width:250px;height:260px;margin:2px 0 28px}
.mini-frame{position:absolute;inset:10px 37px 0;border-radius:26px;display:flex;align-items:flex-end;justify-content:center;padding:18px;color:white;font-family:"Quicksand",sans-serif;font-size:1.4rem;box-shadow:0 18px 34px rgba(47,58,46,.18);border:7px solid var(--paper);background:linear-gradient(145deg,var(--sage),var(--green))}
.mini-botanical{transform:rotate(-10deg) translateX(-30px);background:radial-gradient(circle at 65% 25%,var(--light) 0 8%,transparent 9%),linear-gradient(145deg,var(--sage),var(--green))}
.mini-squad{transform:rotate(10deg) translateX(30px);background:radial-gradient(circle at 25% 23%,var(--cream) 0 4%,transparent 5%),linear-gradient(145deg,var(--green),var(--deep))}
.mini-tasting{background:linear-gradient(145deg,var(--light),var(--deep))}
.mini-frame span{background:rgba(47,58,46,.86);padding:7px 18px;border-radius:999px}
.primary-button,.secondary-button{min-height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;border:0;cursor:pointer}
.primary-button{width:100%;max-width:360px;color:white;background:var(--green);box-shadow:0 12px 24px rgba(25,61,42,.22)}
.primary-button:active{transform:translateY(1px)}
.primary-button svg,.secondary-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.privacy-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;color:var(--muted);font-size:.78rem}
.privacy-note svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.hidden{display:none!important}
.studio,.result{padding:22px 18px 30px;min-height:calc(100vh - 80px)}
.studio-head,.result-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:15px}
.icon-button,.round-action{border:1px solid var(--line);background:var(--paper);color:var(--green);display:grid;place-items:center;cursor:pointer}
.icon-button{width:44px;height:44px;border-radius:14px}
.icon-button svg,.round-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.format-switch{display:flex;gap:4px;padding:4px;margin:0 auto 14px;border:1px solid var(--line);border-radius:14px;background:var(--light)}
.format-button{flex:1;border:0;border-radius:10px;padding:8px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.format-button small{font-weight:500;margin-left:3px}
.format-button.active{background:var(--paper);color:var(--green);box-shadow:0 2px 8px rgba(25,61,42,.09)}
.camera-stage{position:relative;width:100%;max-height:60vh;overflow:hidden;margin:0 auto;background:var(--deep);border-radius:26px;box-shadow:0 16px 32px rgba(47,58,46,.19)}
.ratio-story{aspect-ratio:9/16;max-width:340px}
.ratio-feed{aspect-ratio:4/5;max-width:400px}
#camera,.uploaded-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#camera.user-facing{transform:scaleX(-1)}
.camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;color:rgba(255,255,255,.8);background:linear-gradient(145deg,var(--green),var(--deep))}
.camera-placeholder p{font-size:.88rem}
.pulse-camera{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);animation:pulse 1.5s infinite}
.pulse-camera svg{width:30px;fill:none;stroke:white;stroke-width:1.5}
@keyframes pulse{50%{transform:scale(1.08);background:rgba(255,255,255,.16)}}
.live-frame{position:absolute;inset:0;pointer-events:none;display:none;color:white;border:7px solid rgba(247,243,236,.97);box-shadow:inset 0 0 0 2px rgba(47,58,46,.88)}
.live-frame.active{display:block}
.frame-outline{position:absolute;inset:13px;border:1px solid rgba(247,243,236,.92);border-radius:16px}
.frame-brand{position:absolute;top:21px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;padding:6px 13px;border-radius:999px;background:rgba(47,58,46,.72);box-shadow:0 5px 18px rgba(47,58,46,.18);backdrop-filter:blur(8px);font-size:.55rem;letter-spacing:.18em;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.frame-brand span,.frame-brand strong{font-weight:700}.frame-brand i{width:3px;height:3px;border-radius:50%;background:var(--sage)}
.social-caption{position:absolute;left:0;right:0;bottom:0;padding:62px 28px 27px;text-align:center;background:linear-gradient(transparent,rgba(25,31,24,.78));text-shadow:0 2px 9px rgba(0,0,0,.4)}
.social-caption strong{display:block;font-family:"Caveat",cursive;font-size:2.25rem;font-weight:600;line-height:.9;color:var(--cream)}
.social-caption small{display:block;margin-top:10px;font-size:.58rem;font-weight:600;letter-spacing:.06em;color:rgba(247,243,236,.92)}
.brand-sprig{position:absolute;width:58px;height:auto;object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 5px rgba(20,31,19,.16))}
.sprig-left{left:8px;top:78px;transform:rotate(-9deg)}
.sprig-right{right:8px;bottom:116px;transform:rotate(171deg)}
.squad{border-color:var(--light);box-shadow:inset 0 0 0 3px rgba(85,107,78,.95)}
.squad .frame-brand{background:rgba(85,107,78,.82)}
.squad .social-caption{background:linear-gradient(transparent,rgba(47,58,46,.83))}
.confetti{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:18px 23px 0 -1px var(--cream),37px 4px 0 -2px var(--green)}
.confetti-a{top:87px;left:27px}.confetti-b{top:105px;right:69px;transform:rotate(42deg)}.confetti-c{right:31px;bottom:145px;transform:rotate(-18deg)}
.tasting{border-color:var(--cream);box-shadow:inset 0 0 0 3px rgba(47,58,46,.94)}
.tasting .frame-brand{color:var(--deep);background:rgba(247,243,236,.86);text-shadow:none}
.tasting .social-caption{background:linear-gradient(transparent,rgba(35,43,33,.82))}
.coffee-ring{position:absolute;right:-34px;top:92px;width:104px;height:104px;border:5px double rgba(230,226,207,.7);border-radius:50%;opacity:.8}
.camera-error{margin:12px 0;padding:14px;border:1px solid rgba(85,107,78,.28);border-radius:16px;background:var(--light);text-align:center;color:var(--deep)}
.camera-error strong,.camera-error span{display:block}.camera-error span{font-size:.82rem;margin:4px 0 10px}
.file-button input,.round-action input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-button{position:relative;padding:0 18px;min-height:42px;background:white;color:var(--green);border:1px solid var(--line)}
.frame-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}
.frame-option{border:1px solid var(--line);border-radius:15px;padding:7px;background:var(--paper);color:var(--muted);font-size:.7rem;font-weight:700;cursor:pointer}
.frame-option.active{color:var(--green);border-color:var(--green);box-shadow:0 0 0 2px rgba(25,61,42,.08)}
.swatch{height:38px;margin-bottom:5px;border-radius:10px;display:grid;place-items:center;color:white;font-family:"Quicksand",sans-serif;font-weight:700}.botanical-swatch{background:var(--green)}.squad-swatch{background:var(--deep);border:3px solid var(--sage)}.tasting-swatch{background:var(--cream);color:var(--green);border:3px solid var(--green)}
.capture-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}
.round-action{position:relative;width:50px;height:50px;border-radius:50%}
.shutter{width:72px;height:72px;border-radius:50%;border:4px solid var(--green);padding:5px;background:transparent;cursor:pointer}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:var(--sage)}
.result{padding-top:26px}.result-image{display:block;width:100%;max-height:63vh;object-fit:contain;border-radius:24px;background:var(--deep);box-shadow:0 16px 34px rgba(16,45,32,.18)}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.share-actions .primary-button{grid-column:1/-1;max-width:none}.secondary-button{background:var(--paper);color:var(--green);border:1px solid var(--line)}
.share-tip{text-align:center;color:var(--muted);font-size:.83rem;line-height:1.5}.share-tip a{color:var(--green);font-weight:800}.text-button{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--green);font-weight:800;text-decoration:underline;cursor:pointer}
.toast{position:fixed;z-index:20;left:50%;bottom:24px;transform:translate(-50%,20px);width:max-content;max-width:calc(100vw - 40px);padding:12px 17px;border-radius:999px;background:var(--deep);color:white;font-size:.84rem;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){body{padding:28px}.app-shell{min-height:calc(100vh - 56px);border-radius:34px}.intro{min-height:calc(100vh - 136px)}.camera-stage{max-height:58vh}}
@media(max-height:760px){.intro{padding-top:25px}.mini-frame-deck{height:205px;transform:scale(.83);margin:-10px 0 5px}.camera-stage{max-height:52vh}}
@media(max-width:370px){.instagram-link span{display:none}.brand-logo{width:100px}.brand-lockup span{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.pulse-camera{animation:none}}