:root { font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #173329; background: #f4f0e5; font-synthesis: none; }
* { box-sizing: border-box; }
html { background: #f4f0e5; }
html, body, #app { margin: 0; min-height: 100%; }
body { min-width: 300px; }
.app-boot { min-height:100vh;display:grid;place-content:center;justify-items:center;gap:18px;background:#f4f0e5 }.app-boot img{width:66px;height:66px}.app-boot span{width:24px;height:24px;border:3px solid #146c4d33;border-top-color:#146c4d;border-radius:50%;animation:spin .7s linear infinite}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #146c4d; font-size: 1.6rem; font-weight: 900; letter-spacing: -.065em; }
.wordmark img { width: 39px; height: 39px; }
.wordmark.small { font-size: 1.25rem; }.wordmark.small img { width: 31px; height: 31px; }

/* Landing */
.landing-shell { min-height: 100vh; overflow: hidden; background: #f4f0e5; }
.landing-nav { width: min(1160px, calc(100% - 40px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1733291a; }
.nav-launch { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; color: #146c4d; font-size: .88rem; font-weight: 800; }
.nav-launch span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fff; background: #146c4d; transition: transform .2s ease; }
.nav-launch:hover span { transform: translateX(3px); }
.hero { width: min(1160px, calc(100% - 40px)); min-height: 650px; margin: auto; padding: 72px 0 78px; display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(40px, 8vw, 110px); align-items: center; }
.kicker { margin: 0 0 17px; color: #b65b35; font-size: .73rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero h1 { margin: 0; color: #173329; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.3rem, 7.1vw, 6.3rem); font-weight: 500; line-height: .91; letter-spacing: -.065em; }
.hero h1 em { color: #146c4d; font-weight: inherit; }
.hero-intro { max-width: 570px; margin: 30px 0 28px; color: #52665e; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.launch-button { display: inline-flex; align-items: center; gap: 11px; padding: 15px 21px; border-radius: 999px; color: #fff; background: #146c4d; box-shadow: 0 9px 24px #146c4d35; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease; }
.launch-button:hover { transform: translateY(-2px); box-shadow: 0 13px 28px #146c4d45; }
.launch-dot { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px #ffffff25; }
.privacy-note { color: #78847f; font-size: .75rem; }
.gpu-notice { max-width: 485px; margin-top: 26px; padding: 12px 14px; display: flex; gap: 11px; align-items: center; border: 1px solid #d9bf84; border-radius: 13px; color: #66583b; background: #fff8df; font-size: .78rem; line-height: 1.4; }
.gpu-notice > span { display: grid; width: 29px; height: 29px; flex: none; place-items: center; border-radius: 50%; background: #f0d78f; font-size: 1.15rem; }
.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.viewfinder { position: relative; width: min(100%, 480px); aspect-ratio: .92; overflow: hidden; border-radius: 44% 44% 31% 31% / 34% 34% 24% 24%; background: linear-gradient(160deg,#d5dfca,#87a184); box-shadow: 0 35px 70px #17332926; }
.viewfinder::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 18%,#fff8,transparent 32%),linear-gradient(0deg,#17332926,transparent 50%); }
.corner { position:absolute; z-index:4; width:34px; height:34px; border-color:#f8f1d9; border-style:solid; }.tl{top:28px;left:28px;border-width:3px 0 0 3px;border-radius:8px 0 0}.tr{top:28px;right:28px;border-width:3px 3px 0 0;border-radius:0 8px 0 0}.bl{bottom:28px;left:28px;border-width:0 0 3px 3px;border-radius:0 0 0 8px}.br{right:28px;bottom:28px;border-width:0 3px 3px 0;border-radius:0 0 8px}
.object-shape { position:absolute; }.pot { left:31%; bottom:8%; width:38%; height:37%; border-radius:9px 9px 48% 48%; background:linear-gradient(100deg,#a85c3d,#d98b62);box-shadow:inset 15px 0 30px #5c271d30}.leaf-one,.leaf-two{left:44%;bottom:40%;width:18%;height:40%;border-radius:100% 0 100% 0;background:#2d7750;transform:rotate(-27deg);transform-origin:bottom}.leaf-two{left:42%;height:43%;transform:rotate(42deg);background:#4f9065}
.demo-label { position:absolute; z-index:5; top:36%; right:6%; padding:10px 12px; border:2px solid #fff; border-radius:10px; color:#173329;background:#a8f0c8e8;box-shadow:0 5px 20px #0005;font-weight:900 }.demo-label span{margin-left:9px}
.sound-card { position:absolute; z-index:6; left:-12px; bottom:20px; height:65px; padding:0 18px; display:flex;align-items:center;gap:6px;border:1px solid #fff8;border-radius:18px;background:#fffdeff2;box-shadow:0 16px 35px #17332929;color:#146c4d}.sound-card span{font-size:1.6rem}.sound-card i{display:block;width:3px;border-radius:5px;background:#f1a25e}.sound-card i:nth-of-type(1){height:13px}.sound-card i:nth-of-type(2){height:28px}.sound-card i:nth-of-type(3){height:18px}.sound-card b{margin-left:7px;color:#173329}
.how-it-works { padding: 85px max(20px, calc((100% - 1160px)/2)); display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;color:#f4f0e5;background:#173329 }.how-it-works h2{margin:0;font-family:Georgia,serif;font-size:clamp(2.3rem,4.5vw,4.2rem);font-weight:500;line-height:1.03;letter-spacing:-.04em}.how-it-works ol{list-style:none;margin:0;padding:0}.how-it-works li{padding:20px 0;display:flex;gap:20px;border-top:1px solid #f4f0e52d}.how-it-works li>span{color:#f1a25e;font-size:.75rem;font-weight:900}.how-it-works strong{font-size:1.05rem}.how-it-works li p{margin:5px 0 0;color:#b9c5bf;line-height:1.5}
.landing-footer { width:min(1160px,calc(100% - 40px));height:120px;margin:auto;display:flex;align-items:center;justify-content:space-between}.landing-footer p{color:#75827c;font-size:.8rem}

/* Camera */
.camera-shell { width:min(100%,760px);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) 12px calc(104px + env(safe-area-inset-bottom));background:#f4f0e5 }
.camera-topbar { height:62px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center }.camera-topbar .wordmark{justify-self:center}.back-button,.icon-button{display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:50%;color:#173329;background:#fff;box-shadow:0 3px 15px #183d2d18;font-size:1.4rem}.icon-button{font-size:1.5rem}
.camera-stage { position:relative;overflow:hidden;min-height:calc(100dvh - 176px);border-radius:24px;background:#111714;box-shadow:0 12px 35px #07100c55;display:grid;place-items:center }
#camera,#overlay,.object-labels{display:block;width:100%;height:auto;max-height:calc(100dvh - 176px);object-fit:contain}#overlay,.object-labels{position:absolute;inset:0;margin:auto}#overlay{pointer-events:none}.object-labels{pointer-events:none;overflow:hidden}
.object-label{position:absolute;z-index:2;max-width:72%;transform:translateY(calc(-100% - 4px));border:2px solid #fff;border-radius:10px;padding:7px 11px;color:#082118;background:#a8f0c8ee;box-shadow:0 3px 14px #0008;font-size:clamp(.9rem,3.8vw,1.2rem);font-weight:900;line-height:1;white-space:nowrap;pointer-events:auto;transition:left .22s linear,top .22s linear}.object-label.below{transform:translateY(4px)}.object-label:active{background:#fff2a8;scale:.96}
.camera-loading,.camera-prompt{position:absolute;inset:0;z-index:4;padding:30px;display:grid;place-content:center;justify-items:center;text-align:center;color:#fff;background:radial-gradient(circle at 50% 30%,#33594a,#17211d 65%)}.camera-loading img{width:62px;height:62px;margin-bottom:20px}.camera-loading strong{margin-top:14px}.camera-loading p{margin:7px 0;color:#aebcb6;font-size:.75rem}.camera-prompt h1{margin:4px 0 8px;font-family:Georgia,serif;font-size:clamp(2rem,8vw,2.8rem);font-weight:500;letter-spacing:-.04em}.camera-prompt p{max-width:310px;margin:0 auto 24px;color:#d3ddd8;line-height:1.45}.camera-icon{font-size:3.5rem}.primary{justify-self:center;border:0;border-radius:999px;padding:14px 25px;color:#10231b;background:#a8f0c8;font-weight:850}
.spinner{width:21px;height:21px;border:2px solid #ffffff55;border-top-color:#a8f0c8;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.live-badge{position:absolute;z-index:3;top:10px;left:50%;transform:translateX(-50%);padding:7px 11px;border-radius:999px;color:#fff;background:#07120da8;backdrop-filter:blur(7px);font-size:.72rem;white-space:nowrap;pointer-events:none}.live-badge span{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#62eda1;box-shadow:0 0 0 4px #62eda133}.message{margin-top:10px;padding:11px 14px;border-radius:14px;line-height:1.35}.error{color:#7b2520;background:#ffe6e2}
.language-dock{position:fixed;z-index:10;right:0;bottom:0;left:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));text-align:center;background:#f4f0e5f5;border-top:1px solid #d9ddd9;backdrop-filter:blur(15px)}.language-dock p{margin:0 0 7px;color:#66706b;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.languages{display:flex;justify-content:center;gap:7px}.languages button{min-width:82px;border:1px solid #bfc8c3;border-radius:999px;padding:10px 13px;background:#fff;color:#46514c;font-weight:750}.languages button.selected{border-color:#146c4d;color:#fff;background:#146c4d;box-shadow:0 3px 10px #146c4d33}
#blazor-error-ui{display:none;position:fixed;inset:auto 0 0;z-index:1000;padding:12px;color:#fff;background:#8f281e}
@media(max-width:760px){.landing-nav,.hero,.landing-footer{width:calc(100% - 32px)}.hero{min-height:0;padding:54px 0 70px;grid-template-columns:1fr;gap:48px}.hero h1{font-size:clamp(3.25rem,16vw,5.3rem)}.hero-visual{min-height:430px}.viewfinder{width:min(92%,420px)}.sound-card{left:0}.how-it-works{padding:65px 24px;grid-template-columns:1fr;gap:45px}.privacy-note{width:100%}}
@media(min-width:780px){.camera-shell{padding-inline:0}.camera-stage{border-radius:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}