@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@700;800;900&display=swap";:root{color:#173d31;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--forest:#123f31;--forest-deep:#0b3025;--leaf:#42a66d;--leaf-light:#a8e6bc;--mint:#dff5df;--cream:#f5f7ef;--yellow:#ffd650;--ink:#173d31;--muted:#6c837b;--line:#dce6db;--white:#fff;--page-bg:#f5f7ef;--surface:#fff;--surface-soft:#ffffffbd;--surface-hover:#fff;--surface-complete:#eef9ee;--resource-bg:#ffffffb8;--toast-bg:#e4f7e9;--toast-line:#a5d9b6;--toast-text:#226643;--card-line:#d9e5d8;--impact-bg:#e8efe4;--impact-text:#4f6e62;--header-bg:#123f31f7;--header-muted:#b9d3c7;--footer-muted:#b6cec3;--card-shadow:0 12px 34px #1f463712;--action-shadow:0 16px 36px #1a46351a;--mint-icon-bg:#d7f4e0;--mint-icon-text:#21734b;--yellow-icon-bg:#fff0b5;--yellow-icon-text:#936f00;--green-icon-bg:#cbe7cf;--green-icon-text:#205f3e;--blue-icon-bg:#dcebea;--blue-icon-text:#2e6c68;background:#f5f7ef;font-family:DM Sans,system-ui,sans-serif}:root[data-theme=dark]{color:#eaf7ee;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--forest:#174d39;--forest-deep:#061510;--leaf:#70d49a;--leaf-light:#a8e6bc;--mint:#173c2d;--cream:#071b15;--ink:#eaf7ee;--muted:#a9c1b6;--line:#294c3e;--page-bg:#071b15;--surface:#102c22;--surface-soft:#102c22db;--surface-hover:#173c2e;--surface-complete:#123626;--resource-bg:#123629c7;--toast-bg:#123b2b;--toast-line:#337558;--toast-text:#b8f0ca;--card-line:#294c3e;--impact-bg:#17382d;--impact-text:#b7d6c8;--header-bg:#061b14f7;--header-muted:#a5c8b8;--footer-muted:#9bbcaf;--card-shadow:0 18px 42px #0003;--action-shadow:0 18px 42px #00000040;--mint-icon-bg:#194a35;--mint-icon-text:#8ce4ae;--yellow-icon-bg:#443b18;--yellow-icon-text:#ffe17a;--green-icon-bg:#234c35;--green-icon-text:#9bddae;--blue-icon-bg:#193d3b;--blue-icon-text:#9bd7d2;background:#071b15}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--page-bg);min-width:320px;min-height:100vh;margin:0;transition:background-color .25s,color .25s}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #f2bd24}#root{min-height:100vh}.app-shell{background:var(--page-bg);min-height:100vh;transition:background-color .25s;overflow:hidden}.app-header{height:82px;color:var(--white);background:var(--header-bg);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:0 clamp(24px,6vw,88px);display:flex}.brand{color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{background:var(--leaf-light);width:42px;height:42px;color:var(--forest-deep);border-radius:50%;place-items:center;font-size:24px;font-weight:900;display:grid}.brand strong{letter-spacing:-.5px;font:900 21px/1 Nunito,sans-serif;display:block}.brand small{color:var(--header-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:5px;font-size:11px;display:block}.header-actions,.resources,.pet-actions,.level-row,.section-heading{align-items:center;display:flex}.header-actions{gap:14px}.theme-toggle{min-height:40px;color:var(--white);cursor:pointer;background:#ffffff17;border:1px solid #ffffff2e;border-radius:999px;align-items:center;gap:7px;padding:8px 13px;font-weight:700;transition:transform .2s,background-color .2s;display:flex}.theme-toggle:hover{background:#ffffff29;transform:translateY(-1px)}.theme-icon{width:18px;font-size:18px;line-height:1}.theme-label{font-size:12px}.streak-pill{background:#ffffff1a;border-radius:999px;align-items:center;gap:7px;padding:9px 14px;font-size:13px;display:flex}.streak-pill span:last-child{color:#c7dbd2}.profile-button{width:40px;height:40px;color:var(--forest);background:var(--yellow);cursor:pointer;border:2px solid #ffffff59;border-radius:50%;font-weight:800}main{width:min(1180px,100% - 40px);margin:0 auto;padding:58px 0 72px}.welcome-row{justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px;display:flex}.eyebrow{color:var(--leaf);letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;font-size:12px;font-weight:800;display:block}h1,h2,p{margin-top:0}h1,h2{color:var(--ink);font-family:Nunito,sans-serif}h1{letter-spacing:-.045em;max-width:680px;margin-bottom:0;font-size:clamp(34px,4.2vw,56px);line-height:1.03}h2{letter-spacing:-.025em;margin-bottom:8px;font-size:28px;line-height:1.12}p{color:var(--muted);line-height:1.65}.resources{flex-wrap:wrap;justify-content:flex-end;gap:10px}.resources>span{border:1px solid var(--line);background:var(--resource-bg);border-radius:999px;padding:10px 14px;font-size:13px}.resources b{margin-right:5px}.toast{border:1px solid var(--toast-line);background:var(--toast-bg);width:100%;color:var(--toast-text);cursor:pointer;border-radius:14px;justify-content:space-between;align-items:center;margin-bottom:16px;padding:13px 16px;display:flex}.toast b{font-size:20px}.pet-card{min-height:385px;color:var(--white);background:var(--forest);border-radius:30px;grid-template-columns:1.05fr .95fr;display:grid;overflow:hidden;box-shadow:0 24px 60px #16403229}.pet-copy{align-self:center;padding:clamp(34px,5vw,62px)}.pet-copy .eyebrow{color:var(--yellow)}.pet-copy h2{color:var(--white);margin-bottom:13px;font-size:clamp(36px,4vw,50px)}.pet-copy p{color:#bad1c7;max-width:490px;margin-bottom:28px}.level-row{justify-content:space-between;max-width:460px;margin-bottom:9px;font-size:13px}.level-row strong{color:var(--yellow)}.progress-track{background:#ffffff26;border-radius:999px;max-width:460px;height:9px;overflow:hidden}.progress-track span{border-radius:inherit;background:linear-gradient(90deg, var(--yellow), #ffea91);height:100%;transition:width .4s;display:block}.pet-actions{flex-wrap:wrap;gap:18px;margin-top:26px}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:999px;font-weight:800;transition:transform .2s,box-shadow .2s,opacity .2s}.primary-button{color:var(--forest-deep);background:var(--yellow);padding:13px 20px;box-shadow:0 8px 24px #ffd65038}.primary-button:hover,.secondary-button:hover:not(:disabled){transform:translateY(-2px)}.primary-button:disabled,.secondary-button:disabled{opacity:.6;cursor:default}.happiness{color:#c8ddd3;font-size:13px}.happiness span{color:#ff8b97}.pet-scene{background:radial-gradient(circle at 50% 43%,#bdeec1 0,#8bd49f 42%,#5caf7a 100%);place-items:center;min-height:385px;display:grid;position:relative;overflow:hidden}.plastic-scene{background:radial-gradient(circle at 50% 43%,#c8fbf4 0,#7ddbd2 43%,#37a9b4 100%)}.paper-scene{background:radial-gradient(circle at 50% 43%,#fff3c9 0,#e8c983 45%,#bd8c51 100%)}.glass-scene{background:radial-gradient(circle at 50% 43%,#d8fff1 0,#99e7cf 43%,#4eb69e 100%)}.pet-scene:before,.pet-scene:after{content:"";border:1px solid #ffffff40;border-radius:50%;position:absolute}.pet-scene:before{width:340px;height:340px}.pet-scene:after{width:270px;height:270px}.pet-shadow{z-index:1;filter:blur(3px);background:#0b302533;border-radius:50%;width:210px;height:28px;position:absolute;bottom:24px}.pet-mascot{z-index:3;object-fit:contain;filter:drop-shadow(0 18px 20px #18533533);width:min(78%,330px);max-height:350px;animation:3.2s ease-in-out infinite float;position:relative}.pet-card-locked .pet-mascot{filter:grayscale(.9)brightness(.48)contrast(.9)drop-shadow(0 18px 20px #1853351f);animation:none}.pet-card-locked .sparkle{opacity:.22;animation:none}.hero-lock{z-index:5;color:#173d31;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffe0;border:1px solid #ffffff7a;border-radius:18px;flex-direction:column;align-items:center;gap:9px;padding:16px 20px;display:flex;position:absolute;box-shadow:0 12px 30px #0d3e322e}.hero-lock span{font-size:27px}.hero-lock strong{font:800 13px/1.2 Nunito,sans-serif}.sparkle{z-index:4;color:var(--yellow);font-size:30px;animation:1.8s ease-in-out infinite alternate twinkle;position:absolute}.sparkle-one{top:65px;right:18%}.sparkle-two{font-size:20px;animation-delay:.7s;bottom:65px;left:15%}.scanner-section{border:1px solid var(--card-line);background:var(--surface);box-shadow:var(--card-shadow);border-radius:30px;grid-template-columns:.78fr 1.22fr;align-items:center;gap:clamp(28px,5vw,68px);margin:28px 0 22px;padding:clamp(28px,4vw,48px);scroll-margin-top:24px;display:grid}.scanner-intro h2{max-width:430px;margin-bottom:14px;font-size:clamp(31px,3.5vw,44px)}.scanner-intro>p{max-width:470px;margin-bottom:24px}.ai-pipeline{flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:25px;display:flex}.ai-pipeline span{color:var(--muted);align-items:center;gap:6px;font-size:11px;font-weight:800;display:flex}.ai-pipeline b{width:22px;height:22px;color:var(--white);background:var(--leaf);border-radius:50%;place-items:center;font-size:10px;display:grid}.ai-pipeline i{color:var(--line);font-style:normal}.mode-toggle{width:fit-content;color:var(--ink);cursor:pointer;align-items:center;gap:10px;display:flex}.mode-toggle input{opacity:0;pointer-events:none;position:absolute}.mode-toggle>span{background:var(--line);border-radius:999px;width:42px;height:24px;transition:background-color .2s;position:relative}.mode-toggle>span:after{content:"";background:var(--white);border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 2px 5px #00000026}.mode-toggle input:checked+span{background:var(--leaf)}.mode-toggle input:checked+span:after{transform:translate(18px)}.mode-toggle input:focus-visible+span{outline:3px solid color-mix(in srgb, var(--leaf) 28%, transparent);outline-offset:2px}.mode-toggle b{font-size:13px}.mode-note{color:var(--muted);margin:7px 0 0 52px;font-size:11px;line-height:1.45;display:block}.scanner-panel{border:1px solid var(--line);background:var(--surface-soft);border-radius:24px;min-width:0;padding:16px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;position:absolute!important}.photo-dropzone{border:1.5px dashed color-mix(in srgb, var(--leaf) 46%, var(--line));width:100%;min-height:260px;color:var(--muted);background:var(--surface);cursor:pointer;border-radius:18px;place-items:center;padding:0;transition:border-color .2s,transform .2s;display:grid;position:relative;overflow:hidden}.photo-dropzone:hover{border-color:var(--leaf);transform:translateY(-1px)}.photo-dropzone.has-photo{border-style:solid}.photo-dropzone>img{object-fit:cover;width:100%;height:300px;display:block}.photo-placeholder{flex-direction:column;align-items:center;gap:7px;display:flex}.photo-placeholder>b{width:52px;height:52px;color:var(--leaf);background:var(--mint);border-radius:16px;place-items:center;margin-bottom:4px;font-size:27px;display:grid}.photo-placeholder strong{color:var(--ink);font:800 16px/1.2 Nunito,sans-serif}.photo-placeholder small{font-size:11px}.change-photo{color:#173d31;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffe0;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;position:absolute;bottom:12px;right:12px;box-shadow:0 7px 18px #0a2a2224}.demo-materials{flex-wrap:wrap;align-items:center;gap:7px;margin:13px 0;display:flex}.demo-materials>span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-right:3px;font-size:10px;font-weight:800}.demo-materials button{border:1px solid var(--line);color:var(--muted);background:var(--surface);text-transform:capitalize;cursor:pointer;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:800}.demo-materials button.selected{border-color:var(--leaf);color:var(--white);background:var(--leaf)}.verify-button{width:100%;min-height:48px;color:var(--white);background:linear-gradient(135deg, var(--leaf), var(--forest));cursor:pointer;border:0;border-radius:15px;justify-content:center;align-items:center;gap:9px;padding:12px 18px;font-weight:900;transition:transform .2s,opacity .2s;display:flex;box-shadow:0 9px 22px #23715033}.verify-button:hover:not(:disabled){transform:translateY(-2px)}.verify-button:disabled{opacity:.5;cursor:default}.spinner{border:2px solid #ffffff59;border-top-color:var(--white);border-radius:50%;width:17px;height:17px;animation:.75s linear infinite spin}.scan-result{border-radius:15px;grid-template-columns:auto 1fr;gap:11px;margin-top:13px;padding:13px;display:grid}.result-success{border:1px solid color-mix(in srgb, var(--leaf) 34%, transparent);background:var(--mint)}.result-error{background:#c44f4f17;border:1px solid #c44f4f40}.result-icon{width:28px;height:28px;color:var(--white);background:var(--leaf);border-radius:50%;place-items:center;font-weight:900;display:grid}.result-error .result-icon{background:#bd5151}.scan-result small{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;font-size:9px;font-weight:800;display:block}.scan-result strong{color:var(--ink);font:900 15px/1.2 Nunito,sans-serif;display:block}.scan-result p{margin:3px 0 0;font-size:11px;line-height:1.45}.mission-card{border:1px solid var(--card-line);background:var(--surface);box-shadow:var(--card-shadow);border-radius:22px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:22px;margin:22px 0 66px;padding:22px 24px;display:grid}.mission-complete{background:var(--surface-complete)}.mission-icon{background:var(--mint);width:58px;height:58px;color:var(--leaf);border-radius:18px;place-items:center;font-size:30px;display:grid}.mission-copy .eyebrow{margin-bottom:3px}.mission-copy h2{margin-bottom:3px;font-size:20px}.mission-copy p{margin-bottom:10px;font-size:13px}.material-selector{flex-wrap:wrap;gap:7px;display:flex}.material-selector button{border:1px solid var(--line);color:var(--muted);background:var(--surface-soft);text-transform:capitalize;cursor:pointer;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;transition:border-color .2s,color .2s,background-color .2s}.material-selector button:hover{border-color:var(--leaf);color:var(--leaf)}.material-selector button.selected{border-color:var(--leaf);color:var(--white);background:var(--leaf)}.reward{border-left:1px solid var(--line);padding:0 26px}.reward span{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px;display:block}.reward strong{color:var(--leaf)}.secondary-button{color:var(--white);background:var(--forest);padding:12px 18px}.collection-section{margin-bottom:66px}.collection-heading{align-items:flex-end}.collection-heading p{margin:6px 0 0}.collection-count{border:1px solid var(--line);color:var(--leaf);background:var(--surface);border-radius:999px;flex:none;padding:10px 14px;font-size:12px;font-weight:800}.pet-collection-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.collection-pet{text-align:left;border:1px solid var(--line);background:var(--surface);min-width:0;box-shadow:var(--card-shadow);cursor:pointer;border-radius:25px;padding:0 0 20px;transition:transform .22s,border-color .22s,box-shadow .22s;position:relative;overflow:hidden}.collection-pet:hover{box-shadow:var(--action-shadow);transform:translateY(-5px)}.collection-pet.is-selected{border-color:var(--leaf);box-shadow:0 0 0 3px color-mix(in srgb, var(--leaf) 18%, transparent), var(--card-shadow)}.collection-pet-art{border-radius:24px 24px 40% 40%/24px 24px 18% 18%;place-items:center;height:245px;display:grid;position:relative;overflow:hidden}.collection-pet-art:after{content:"";filter:blur(4px);background:#0d3e3226;border-radius:50%;width:128px;height:18px;position:absolute;bottom:21px}.collection-pet-art img{z-index:2;object-fit:contain;filter:drop-shadow(0 13px 14px #164c392e);width:75%;height:92%;transition:transform .25s,filter .25s,opacity .25s;position:relative}.collection-pet:hover .collection-pet-art img{transform:translateY(-4px)scale(1.025)}.collection-pet.is-locked .collection-pet-art img{opacity:.43;filter:grayscale()brightness(.56)contrast(.8)}.pet-lock{z-index:4;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#ffffffdb;border:1px solid #ffffff8c;border-radius:50%;place-items:center;width:50px;height:50px;font-size:21px;display:grid;position:absolute;box-shadow:0 9px 24px #14372c2e}.collection-pet-copy{padding:18px 20px 0;display:block}.collection-pet-copy strong{color:var(--ink);margin-bottom:6px;font:900 23px/1.1 Nunito,sans-serif;display:block}.collection-pet-copy small{min-height:37px;color:var(--muted);font-size:12px;line-height:1.5;display:block}.material-chip{color:var(--leaf);background:var(--mint);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;margin:13px 20px 0;padding:6px 9px;font-size:10px;font-weight:800;display:inline-block}.actions-section{margin-bottom:20px}.section-heading{justify-content:space-between;gap:30px;margin-bottom:20px}.section-heading h2{margin-bottom:0;font-size:clamp(28px,3vw,38px)}.impact-badge{color:var(--impact-text);background:var(--impact-bg);border-radius:999px;padding:10px 14px;font-size:12px}.action-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.action-card{text-align:left;border:1px solid var(--line);background:var(--surface-soft);cursor:pointer;border-radius:22px;min-height:218px;padding:22px;transition:transform .22s,box-shadow .22s,background .22s;position:relative}.action-card:hover{background:var(--surface-hover);box-shadow:var(--action-shadow);transform:translateY(-5px)}.action-icon{border-radius:15px;place-items:center;width:48px;height:48px;margin-bottom:28px;font:900 24px/1 Nunito,sans-serif;display:grid}.action-icon.mint{background:var(--mint-icon-bg);color:var(--mint-icon-text)}.action-icon.yellow{background:var(--yellow-icon-bg);color:var(--yellow-icon-text)}.action-icon.green{background:var(--green-icon-bg);color:var(--green-icon-text)}.action-icon.blue{background:var(--blue-icon-bg);color:var(--blue-icon-text)}.action-step{color:#a0b2aa;letter-spacing:.1em;font-size:11px;position:absolute;top:24px;right:22px}.action-card strong{margin-bottom:8px;font:800 19px/1.2 Nunito,sans-serif;display:block}.action-card>span:not(.action-icon):not(.action-step){color:var(--muted);padding-right:18px;font-size:13px;line-height:1.5;display:block}.action-card i{color:var(--leaf);font-size:20px;font-style:normal;position:absolute;bottom:17px;right:20px}footer{color:var(--footer-muted);background:var(--forest-deep);justify-content:space-between;gap:20px;padding:28px clamp(24px,6vw,88px);font-size:12px;display:flex}footer p{color:var(--footer-muted);margin:0}footer span:first-child{color:var(--white);font-family:Nunito,sans-serif;font-weight:900}@keyframes float{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-9px)rotate(1deg)}}@keyframes twinkle{0%{opacity:.5;transform:scale(.8)rotate(0)}to{opacity:1;transform:scale(1.15)rotate(20deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.pet-card{grid-template-columns:1fr}.pet-scene{grid-row:1;min-height:330px}.scanner-section{grid-template-columns:1fr}.mission-card{grid-template-columns:auto 1fr}.reward{border-left:0;padding:0 0 0 80px}.secondary-button{justify-self:end}.pet-collection-grid{grid-template-columns:repeat(2,1fr)}.collection-pet:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}.action-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=620px){.app-header{height:72px;padding-inline:18px}.brand small,.streak-pill span:last-child,.theme-label{display:none}.theme-toggle{justify-content:center;width:40px;padding:8px}.streak-pill{padding:8px 10px}main{width:min(100% - 28px,1180px);padding-top:38px}.welcome-row,.section-heading{flex-direction:column;align-items:flex-start}.resources{justify-content:flex-start}.pet-copy{padding:32px 24px 38px}.pet-scene{min-height:290px}.pet-scene:before{width:270px;height:270px}.pet-scene:after{width:220px;height:220px}.pet-mascot{width:min(76%,260px);max-height:265px}.pet-shadow{width:170px;bottom:18px}.scanner-section{padding:24px 18px}.photo-dropzone{min-height:220px}.photo-dropzone>img{height:245px}.mission-card{grid-template-columns:auto 1fr;gap:16px}.reward{padding-left:74px}.secondary-button{grid-column:1/-1;width:100%}.pet-collection-grid{grid-template-columns:1fr}.collection-pet:last-child{grid-column:auto;width:100%}.collection-pet-art{height:230px}.action-grid{grid-template-columns:1fr}.action-card{min-height:190px}footer{text-align:center;flex-direction:column;align-items:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.map-section{border:1px solid var(--card-line);background:var(--surface);box-shadow:var(--card-shadow);border-radius:30px;margin:28px 0 22px;padding:clamp(28px,4vw,48px);scroll-margin-top:24px}.map-heading{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.map-heading h2{max-width:650px;margin-bottom:8px;font-size:clamp(31px,3.5vw,44px)}.map-heading p{max-width:680px;margin-bottom:0}.prototype-badge{border:1px solid var(--line);color:var(--muted);background:var(--surface-soft);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;flex:none;align-items:center;gap:7px;padding:9px 12px;font-size:10px;font-weight:800;display:inline-flex}.prototype-badge i{background:var(--yellow);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #ffd65033}.map-layout{grid-template-columns:minmax(0,1fr) 285px;gap:16px;display:grid}.demo-map{border:1px solid var(--line);isolation:isolate;background:#e9eee6;border-radius:24px;min-height:500px;position:relative;overflow:hidden}:root[data-theme=dark] .demo-map{background:#173128}.map-grid{z-index:-5;opacity:.34;background-image:linear-gradient(#4d6f5b21 1px,#0000 1px),linear-gradient(90deg,#4d6f5b21 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0}.map-park{z-index:-3;color:#4e795e;background:#cce2c7;border-radius:42% 58% 49% 51%/45% 42% 58% 55%;place-items:center;width:38%;height:28%;display:grid;position:absolute;top:9%;left:8%;transform:rotate(-5deg)}.map-park:before,.map-park:after{content:"♣";color:#77a57f;font-size:26px;position:absolute}.map-park:before{top:26%;left:24%}.map-park:after{bottom:18%;right:19%}.map-park span{background:#ffffffa3;border-radius:7px;padding:5px 8px;font-size:9px;font-weight:800;transform:rotate(5deg)}:root[data-theme=dark] .map-park{color:#a0caae;background:#244c38}:root[data-theme=dark] .map-park span{background:#081b14a6}.map-block{z-index:-3;background:color-mix(in srgb, var(--surface) 82%, #dfe4da);border:1px solid #5c73662e;border-radius:12px;position:absolute;box-shadow:inset 0 0 0 7px #81928612}.map-block-one{width:31%;height:24%;top:13%;right:8%;transform:rotate(3deg)}.map-block-two{width:38%;height:25%;bottom:12%;right:10%;transform:rotate(-4deg)}.map-road{z-index:-2;background:#fafbf7;border:1px solid #d8ded5;position:absolute;box-shadow:0 0 0 5px #ffffff5e}:root[data-theme=dark] .map-road{background:#284038;border-color:#38564a;box-shadow:0 0 0 5px #0a1e174d}.map-road span{color:#9aa79e;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;font-size:8px;font-weight:800;position:absolute}.road-horizontal{width:110%;height:58px;top:49%;left:-5%;transform:rotate(-8deg)}.road-horizontal:after{content:"";border-top:1px dashed #c7d0c7;position:absolute;top:50%;left:0;right:0}.road-horizontal span{top:8px;left:48%}.road-vertical{width:55px;height:116%;top:-8%;left:55%;transform:rotate(11deg)}.road-vertical:after{content:"";border-left:1px dashed #c7d0c7;position:absolute;top:0;bottom:0;left:50%}.road-vertical span{bottom:37%;left:8px;transform:rotate(90deg)}.user-pin{z-index:4;flex-direction:column;align-items:center;gap:5px;display:flex;position:absolute;top:55%;left:47%}.user-pin>span{border:4px solid var(--white);background:#4285f4;border-radius:50%;width:17px;height:17px;position:relative;box-shadow:0 3px 9px #1f477b59}.user-pin>span:before{content:"";z-index:-1;background:#4285f42e;border-radius:50%;animation:2s ease-out infinite mapPulse;position:absolute;inset:-12px}.user-pin small{color:#234f87;background:#ffffffe6;border-radius:6px;padding:3px 6px;font-size:8px;font-weight:900;box-shadow:0 2px 6px #2a4e3f21}.bin-marker{z-index:5;border:3px solid var(--white);width:58px;height:64px;color:var(--white);cursor:pointer;border-radius:50% 50% 50% 12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;transition:transform .2s,box-shadow .2s;display:flex;position:absolute;transform:rotate(-45deg);box-shadow:0 8px 18px #24473940}.bin-marker>span,.bin-marker>small{transform:rotate(45deg)}.bin-marker>span{font-size:19px;font-weight:900;line-height:1}.bin-marker>small{letter-spacing:.03em;text-transform:uppercase;font-size:7px;font-weight:900}.bin-marker:hover,.bin-marker.selected{z-index:7;transform:rotate(-45deg)translate(3px,-3px)scale(1.08);box-shadow:0 11px 23px #1e3f3352,0 0 0 5px #ffffff57}.marker-paper{background:#c39149;top:24%;left:31%}.marker-glass{background:#36a88f;top:27%;right:18%}.marker-plastic{background:#278eaa;bottom:18%;right:28%}.demo-route{z-index:2;transform-origin:0;border-top:4px dotted #4a8fd8;width:28%;height:2px;animation:.5s both routeReveal;position:absolute;top:48%;left:48%}.route-paper{width:25%;transform:rotate(202deg)}.route-glass{width:31%;transform:rotate(327deg)}.route-plastic{width:32%;transform:rotate(32deg)}.map-legend{z-index:8;color:#536d62;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#ffffffe0;border:1px solid #76887c33;border-radius:10px;flex-wrap:wrap;gap:11px;padding:8px 10px;font-size:8px;font-weight:800;display:flex;position:absolute;bottom:14px;left:14px;box-shadow:0 5px 14px #1e413214}:root[data-theme=dark] .map-legend{color:#bcd0c6;background:#091e16d9}.map-legend span{align-items:center;gap:4px;display:flex}.paper-dot,.glass-dot,.plastic-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.paper-dot{background:#c39149}.glass-dot{background:#36a88f}.plastic-dot{background:#278eaa}.bin-panel{border:1px solid var(--line);background:var(--surface-soft);border-radius:24px;flex-direction:column;align-items:flex-start;min-width:0;padding:24px;display:flex}.selected-bin-icon{width:52px;height:52px;color:var(--white);border-radius:16px;place-items:center;margin-bottom:21px;font-size:25px;display:grid}.paper-bin{background:#c39149}.glass-bin{background:#36a88f}.plastic-bin{background:#278eaa}.bin-panel>small{color:var(--leaf);letter-spacing:.1em;text-transform:uppercase;font-size:9px;font-weight:900}.bin-panel h3{color:var(--ink);margin:6px 0 4px;font:900 21px/1.15 Nunito,sans-serif}.bin-panel>p{margin-bottom:19px;font-size:12px}.bin-distance{border-top:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:13px 0;display:flex}.bin-distance strong{color:var(--ink);font:900 22px/1 Nunito,sans-serif}.bin-distance span{color:var(--muted);font-size:10px}.bin-list{gap:6px;width:100%;margin:17px 0;display:grid}.bin-list button{width:100%;color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px 10px;display:grid}.bin-list button:hover,.bin-list button.selected{border-color:var(--line);color:var(--ink);background:var(--surface)}.bin-list button span{text-transform:capitalize;font-size:11px;font-weight:800}.bin-list button small{font-size:9px}.route-button,.scan-at-bin-button{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:7px;width:100%;min-height:42px;padding:10px;font-size:11px;font-weight:900;display:flex}.route-button{border:1px solid var(--line);color:var(--ink);background:var(--surface);margin-top:auto}.route-button.active{color:#2f70b5;background:color-mix(in srgb, #dbeaff 60%, var(--surface));border-color:#7aafe8}.scan-at-bin-button{color:var(--white);background:linear-gradient(135deg, var(--leaf), var(--forest));border:0;margin-top:8px}@keyframes mapPulse{0%{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}@keyframes routeReveal{0%{opacity:0;scale:0 1}to{opacity:1;scale:1}}@media (width<=900px){.map-heading{flex-direction:column;align-items:flex-start}.map-layout{grid-template-columns:1fr}.demo-map{min-height:440px}.bin-panel{grid-template-columns:auto 1fr;align-items:center;column-gap:14px;display:grid}.selected-bin-icon{grid-row:1/4;margin:0}.bin-panel>small,.bin-panel h3,.bin-panel>p{grid-column:2}.bin-panel h3{margin-top:3px}.bin-panel>p{margin-bottom:0}.bin-distance,.bin-list,.route-button,.scan-at-bin-button{grid-column:1/-1}.route-button{margin-top:0}}@media (width<=620px){.map-section{padding:24px 18px}.prototype-badge{white-space:normal}.demo-map{min-height:390px}.map-park{width:43%}.bin-marker{width:52px;height:58px}.marker-paper{left:23%}.marker-glass{right:11%}.marker-plastic{right:20%}.map-legend{justify-content:center;left:10px;right:10px}}