@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
:root{--ink:#233d2d;--muted:#798174;--cream:#f4f4ed;--green:#304f34;--line:#dce0d2}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #bba86a;outline-offset:4px}button:disabled{cursor:default}header{height:94px;display:flex;align-items:center;padding:0 5%;gap:30px;border-bottom:1px solid var(--line)}.brand{font-family:'Playfair Display',Georgia,serif;font-size:45px;letter-spacing:-3px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:15px}.brand span{font-family:Manrope,sans-serif;font-size:9px;letter-spacing:3px;margin-top:14px}.edition{margin-left:auto;font-size:9px;letter-spacing:2.3px;color:var(--muted)}.stat-pill{margin-left:40px;padding:12px 18px;border:1px solid var(--line);border-radius:30px;background:transparent;font-size:11px}.stat-pill span{margin-left:20px}main{padding:22px 3% 104px;max-width:1800px;margin:auto}#garden{height:calc(100dvh - 220px);min-height:420px;position:relative;border-radius:5px;overflow:hidden;background:#e8eade;transition:height .7s}#scene{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}.garden-title{position:absolute;top:8%;left:5%;pointer-events:none}.eyebrow,.label{font-size:9px;letter-spacing:2.5px;color:#7c886e;font-weight:600}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,4.2vw,64px);font-weight:400;line-height:1.13;letter-spacing:-1.8px;margin:22px 0}h1 em{font-weight:400;color:#698057}.garden-title p{font-size:12px;line-height:1.9;color:#6e7a60}.camera{position:absolute;right:24px;bottom:48px;display:flex;flex-direction:column;gap:2px}.camera button{height:36px;width:36px;background:#f7f7eedc;font-size:20px}.soil-caption{position:absolute;bottom:26px;left:4%;font-size:9px;letter-spacing:2px;display:flex;gap:12px;align-items:center}.soil-caption>span:last-child{color:#788169;margin-left:12px}.live-dot{height:5px;width:5px;background:#718856;border-radius:50%}.gesture{position:absolute;bottom:26px;right:84px;font-size:10px;color:#7a816a}nav{position:fixed;bottom:0;left:0;width:100%;height:82px;padding-bottom:env(safe-area-inset-bottom);background:#f4f4edf5;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:55px;z-index:4}nav button{background:transparent;font-size:11px;display:flex;align-items:center;gap:9px;position:relative}nav button>span{font-size:24px;font-family:Georgia,serif}.plant-button{background:var(--green);color:#fff;border-radius:4px;padding:9px 25px}nav i{width:6px;height:6px;background:#b79144;border-radius:50%;position:absolute;right:-10px;top:3px}dialog{border:1px solid #dde1d2;background:#f6f5ed;color:var(--ink);border-radius:10px;padding:38px;width:min(540px,calc(100% - 30px));max-height:85dvh;box-shadow:0 24px 100px #18211133}dialog::backdrop{background:#2333245c;backdrop-filter:blur(5px)}.close{position:absolute;right:15px;top:12px;font-size:25px;background:none;color:#849078}h2{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:400;line-height:1.2;margin:12px 0 18px}h3{font-size:15px;margin:0 0 8px}p{line-height:1.8}.sub{color:var(--muted);font-size:12px}.primary{padding:14px 22px;background:var(--green);color:#fff;border-radius:4px;font-weight:600}.wide{width:100%;margin-top:20px}.plant-card{margin-top:22px;border:1px solid var(--line);padding:20px;border-radius:6px;display:flex;gap:20px;align-items:center;background:#ebeede}.plant-card svg{flex-shrink:0}.chips{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}.chips span{font-size:10px;border:1px solid #ccd4bd;border-radius:20px;padding:5px 9px}.placement{position:absolute;top:24px;left:50%;transform:translateX(-50%);padding:14px 20px;background:#f4f4edf0;border-radius:6px;font-size:12px;max-width:90%;width:max-content;box-shadow:0 4px 15px #0001}.placement button{background:none;text-decoration:underline;margin-left:12px}.learning .garden-title{display:none}.learning #garden{height:45dvh;min-height:260px}.learning main{max-width:1400px}.learning .gesture{display:none}#quiz{max-width:740px;margin:26px auto 0;padding:0 16px}.qhead{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7b856f}.qprogress{display:flex;gap:5px;margin:14px 0 24px}.qprogress i{height:3px;flex:1;background:#d9dece}.qprogress i.done{background:#688257}.qprogress i.bad{background:#a9905e}.sentence{font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,3vw,30px);color:#2d3e2c;margin:20px 0 25px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer{padding:15px 18px;text-align:left;background:#eceee3;border:1px solid #dce1d0;border-radius:5px;transition:.2s}.answer:not(:disabled):hover{background:#dfe5d0}.answer b{font-size:9px;display:inline-block;margin-right:17px;color:#8c967e;font-weight:400}.answer.correct{background:#dfead7;border-color:#749164}.answer.wrong{background:#eee2d0;border-color:#b29b70}.feedback{margin:20px 0;background:#e9ede0;padding:20px;border-radius:5px}.feedback.error{background:#f0e8da}.feedback p{font-size:12px;margin:9px 0}.next-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}.next-row .sub{font-size:10px}.return{background:none;text-decoration:underline;font-size:11px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px 0}.metrics strong{font-family:Georgia,serif;font-size:32px;font-weight:400;display:block}.metrics span{font-size:10px;color:var(--muted)}.row{padding:17px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.row button{background:#e2e7d6;padding:10px;border-radius:4px;font-size:11px}.parts{display:flex;gap:8px;flex-wrap:wrap}.parts button{padding:12px;background:#e7dfcb;border-radius:4px}.parts button:disabled{background:#e3e9d9}.help{border-top:1px solid var(--line);margin-top:22px;padding-top:17px;font-size:11px;color:#79836e}#toast{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:14px 20px;border-radius:5px;background:#f5f5edee;box-shadow:0 4px 22px #0001;font-size:12px;pointer-events:none}button.small{padding:9px;font-size:10px}[hidden]{display:none!important}@media(max-width:700px){header{height:75px;padding:0 6%;gap:0}.brand{font-size:36px}.brand span{font-size:7px;letter-spacing:2px;gap:10px}.edition{display:none}.stat-pill{margin-left:auto;padding:10px;font-size:9px}.stat-pill span{margin-left:5px}main{padding:12px 12px 95px}#garden{height:calc(100dvh - 180px);min-height:430px}.garden-title{left:7%;top:6%}h1{font-size:38px;letter-spacing:-1px;margin:15px 0}.eyebrow{font-size:8px;letter-spacing:1.8px}.garden-title p{font-size:11px}.gesture{display:none}.soil-caption{left:7%;font-size:8px;gap:8px}.soil-caption>span:last-child{margin-left:4px}.camera{right:15px}.learning #garden{height:34dvh;min-height:210px}.learning main{padding-top:10px}#quiz{padding:0 8px;margin-top:20px}.sentence{font-size:24px}.answer{padding:14px 10px}.answer b{margin-right:10px}nav{gap:0;justify-content:space-around;height:78px}nav button{flex-direction:column;gap:1px;font-size:9px}nav .plant-button{padding:4px 23px}nav button>span{font-size:24px}dialog{padding:30px 24px}h2{font-size:30px}.plant-card{padding:14px;gap:12px}.placement{font-size:10px;top:15px}.learning .soil-caption{bottom:16px}.learning .camera{bottom:35px}.next-row{align-items:flex-start}.next-row .primary{white-space:nowrap}.qprogress{margin-bottom:18px}}

.garden-title{color:#f3f0df;text-shadow:0 2px 18px #16150c66}.garden-title h1 em{color:#c4d2a0}.garden-title .eyebrow{color:#c9d0b6}.garden-title p{color:#d5d7c6}.soil-caption,.soil-caption>span:last-child,.gesture{color:#d1d2bc}#garden:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#10160f55,transparent 65%)}.garden-title,.soil-caption,.gesture,.camera,.placement,#toast{z-index:2}.learning #garden:before{background:none}

.plant-portrait{flex:0 0 86px;width:86px;height:110px;background:url("assets/flytrap-parts.png") no-repeat left center;background-size:auto 110px}
