@font-face {
  font-family:'Questrial';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/Questrial-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/InstrumentSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/InstrumentSerif-Italic.ttf') format('truetype');
}
:root {
  --blue:#253ce5;
  --blue-dark:#1c2fc0;
  --lime:#d0f45b;
  --ink:#1c2420;
  --muted:#6b716b;
  --paper:#fafbf7;
  --soft:#f0f2ec;
  --line:#dfe3d9;
  --white:#fff;
  --red:#b13728;
  --radius:12px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:112px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
button,input {
  font:inherit;
  color:inherit;
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button {
  border:0;
}
a {
  color:inherit;
  text-decoration:none;
}
img,svg {
  display:block;
  max-width:100%;
}
h1,h2,h3,p {
  margin:0;
}
button:disabled {
  cursor:not-allowed;
  opacity:.48;
}
a,button,input,summary {
  outline-offset:5px;
}
:focus-visible {
  outline:2px solid var(--blue);
}
[hidden] {
  display:none!important;
}
::selection {
  background:var(--lime);
  color:var(--ink);
}
.container {
  width:min(1280px,100% - 96px);
  margin-inline:auto;
}
.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.skip-link:focus {
  position:fixed;
  left:20px;
  top:10px;
  padding:12px;
  background:var(--lime);
  z-index:9999;
}
.button {
  display:inline-flex;
  gap:26px;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 23px;
  border-radius:6px;
  background:var(--lime);
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  transition:background .18s,transform .18s;
  white-space:nowrap;
}
.button:hover {
  background:#c0e44b;
}
.button:active {
  transform:translateY(1px);
}
.button-blue {
  background:var(--blue);
  color:white;
}
.button-blue:hover {
  background:var(--blue-dark);
}
.button-outline {
  background:transparent;
  border:1px solid var(--line);
}
.button-outline:hover {
  background:var(--soft);
}
.button-small {
  min-height:42px;
  padding:10px 18px;
  font-size:13px;
}
.text-link {
  display:inline-flex;
  gap:20px;
  align-items:center;
  padding:10px 0;
  background:transparent;
  font-size:14px;
  font-weight:700;
}
.text-link:hover {
  color:var(--blue);
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  margin-right:8px;
}
.header {
  position:fixed;
  z-index:1000;
  top:max(14px,env(safe-area-inset-top));
  left:50%;
  translate:-50% 0;
  width:max-content;
  max-width:calc(100vw - 20px);
  background:transparent;
  border:0;
}
.nav-pill {
  --nav-ease:cubic-bezier(.22,1.24,.36,1);
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:calc(100vw - 20px);
  min-height:3rem;
  padding:6px 10px 6px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  box-shadow:0 10px 28px #1c242014;
  overflow:hidden;
  transition:width .62s var(--nav-ease),height .62s var(--nav-ease),padding .62s var(--nav-ease),background-color .2s ease,border-color .2s ease;
}
.header[data-collapsed=true] .nav-pill {
  gap:0;
  padding:0;
  cursor:pointer;
}
.header[data-collapsed=true] .nav-pill:hover,
.header[data-collapsed=true] .nav-pill:focus-within {
  background:var(--lime);
  border-color:#c6e24a;
}
.brand.nav-logo {
  display:grid;
  place-items:center;
  flex:none;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  transition:width .62s var(--nav-ease),height .62s var(--nav-ease);
}
.header[data-collapsed=true] .nav-logo {
  width:calc(3rem - 2px);
  height:calc(3rem - 2px);
}
.header .nav-logo .brand-logo {
  width:30px;
  height:30px;
  object-fit:contain;
}
.header[data-collapsed=true] .nav-logo .brand-logo {
  width:34px;
  height:34px;
}
.nav-body {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  scrollbar-width:none;
  transition:opacity .24s ease .12s;
}
.nav-body::-webkit-scrollbar { display:none; }
.header[data-collapsed=true] .nav-body {
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.nav-body.is-scrollable {
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}
.nav-open {
  position:absolute;
  inset:0;
  z-index:2;
  padding:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.nav-open:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:-4px;
}
.brand {
  font-family:'Questrial',Arial,sans-serif;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:27px;
  letter-spacing:-.8px;
  font-weight:400;
  white-space:nowrap;
}
.brand-four {
  color:var(--blue);
}
.brand-dot {
  font-size:10px;
  vertical-align:top;
  letter-spacing:0;
  position:relative;
  top:4px;
  margin-left:3px;
}
.nav {
  position:relative;
  display:flex;
  gap:2px;
  align-items:center;
  margin:0;
  flex:none;
}
.nav-glide {
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:0;
  height:0;
  border-radius:999px;
  background:var(--lime);
  pointer-events:none;
  opacity:0;
  transition:transform .46s cubic-bezier(.22,1.16,.36,1),width .46s cubic-bezier(.22,1.16,.36,1),height .46s cubic-bezier(.22,1.16,.36,1),opacity .2s ease;
}
.nav-glide.is-ready { opacity:1; }
.header-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
  margin-right:2px;
}
.header .language-switch {
  width:64px;
  height:28px;
  padding:3px;
}
.header .language-thumb {
  inset:3px auto 3px 3px;
  width:calc((100% - 6px) / 2);
}
.header .header-actions>.button {
  min-height:28px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  gap:5px;
}
.language-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  width:88px;
  height:44px;
  padding:4px;
  isolation:isolate;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--soft);
}
.language-thumb {
  position:absolute;
  inset:4px auto 4px 4px;
  width:calc((100% - 8px) / 2);
  border-radius:99px;
  background:var(--blue);
  box-shadow:0 2px 5px #253ce51a;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  z-index:-1;
}
html[data-language=ru] .language-thumb { transform:translateX(100%); }
.language-switch button {
  min-width:0;
  padding:0;
  border-radius:99px;
  background:transparent;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--muted);
  transition:color .22s ease;
}
.language-switch button[aria-pressed=true] { color:var(--white); }
.language-switch button:focus-visible { outline-offset:5px; }
html[lang=ru] .nav a { font-size:11px; }
@media(max-width:860px) {
  .header-actions { order:-1; }
  .header .language-switch { width:60px;height:26px; }
  .header .header-actions>.button { min-height:26px;height:26px;padding:0 9px;font-size:11px;gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
  .language-thumb,.language-switch button { transition:none; }
}
.nav a {
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.nav a[aria-current=page] {
  background:var(--lime);
  color:var(--ink);
}
.nav:has(.nav-glide.is-ready) a[aria-current=page] {
  background:transparent;
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current=page]:hover {
  color:var(--ink);
}
.hero {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:60px;
  padding:112px 0 66px;
  align-items:start;
}
.hero-copy {
  padding-top:16px;
}
.hero h1 {
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(52px,5.8vw,84px);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1;
  margin:29px 0 25px;
}
.highlight {
  color:var(--blue);
  font-style:italic;
  white-space:nowrap;
}
.hero-description {
  font-size:15px;
  line-height:1.75;
  max-width:400px;
  color:#5d655d;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:29px;
}
.hero-footnote {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:46px;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
}
.hero-footnote strong {
  font-weight:500;
  color:var(--ink);
}
.mini-symbol {
  font-size:44px;
  color:var(--blue);
  line-height:1;
}
.hero-visual {
  position:relative;
}
.globe-stage {
  aspect-ratio:1/1.13;
  padding:28px 28px 28px 56px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  isolation:isolate;
}
.earth-canvas {
  position:absolute;
  inset:48px 0 62px;
  width:100%;
  height:calc(100% - 110px);
  border-radius:50%;
  z-index:-1;
  cursor:grab;
  touch-action:pan-y;
}
.earth-canvas.dragging {
  cursor:grabbing;
}
.globe-stage>.photo-caption,.globe-stage>.photo-type {
  pointer-events:none;
}
.brand .brand-logo {
  width:40px;
  height:40px;
  object-fit:contain;
  flex:none;
}
.photo-caption {
  color:var(--blue);
  max-width:100%;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
}
.photo-type {
  color:var(--lime);
  font-size:clamp(45px,5.8vw,82px);
  font-weight:700;
  line-height:.93;
  letter-spacing:-.07em;
  position:absolute;
  left:56px;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
}
.photo-type em {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.06em;
}
.city-mark {
  position:absolute;
  z-index:2;
  width:0;
  height:0;
  color:var(--lime);
  pointer-events:none;
}
.city-mark[hidden] {
  display:none;
}
.city-mark i {
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 3px var(--blue),0 0 0 5px var(--lime);
  transform:translate(-50%,-50%) scale(var(--city-scale,1));
}
.city-mark b {
  position:absolute;
  left:16px;
  top:0;
  transform:translateY(-54%);
  color:var(--lime);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 1px var(--blue),1px 0 0 var(--blue),-1px 0 0 var(--blue),0 1px 0 var(--blue),0 -1px 0 var(--blue);
}
.city-mark.is-left b {
  left:auto;
  right:16px;
  text-align:right;
}
.hero-stamp {
  position:absolute;
  background:var(--lime);
  bottom:74px;
  right:-25px;
  transform:rotate(7deg);
  padding:18px 19px 14px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  width:132px;
  box-shadow:0 3px 0 #1c24200d;
}
.hero-stamp b {
  font-size:32px;
  display:block;
  text-align:right;
  font-weight:400;
}
.visual-caption {
  display:flex;
  justify-content:space-between;
  margin-top:13px;
  font-size:9px;
  letter-spacing:.03em;
  color:var(--muted);
}
.hero-photo {
  width:100%;
  aspect-ratio:1/1.13;
  object-fit:cover;
  border-radius:3px 3px 70px 3px;
}
.manifesto-strip {
  overflow:hidden;
  background:var(--lime);
  border-block:1px solid #bbdb52;
}
.manifesto-track {
  display:flex;
  width:max-content;
  transform:translate3d(var(--marquee-x,0px),0,0);
  will-change:transform;
}
.manifesto-group {
  display:flex;
  flex:none;
  width:max(100vw,960px);
  padding-inline:clamp(24px,5.6vw,80px);
  justify-content:space-between;
  align-items:center;
  min-height:65px;
  gap:24px;
  font-size:15px;
  letter-spacing:-.02em;
  font-weight:700;
}
.manifesto-group span:nth-child(even) {
  font-size:30px;
  font-weight:400;
}
.section {
  padding-block:92px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:36px;
  gap:50px;
}
.section-heading h2,.principles-layout h2 {
  font-size:43px;
  letter-spacing:-.055em;
  line-height:1.08;
  margin-top:16px;
}
.section-heading>p {
  font-size:14px;
  line-height:1.8;
  max-width:320px;
  color:var(--muted);
}
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.tool-card {
  border:1px solid var(--line);
  padding:22px;
  background:var(--white);
  border-radius:5px;
  display:flex;
  flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.tool-card:hover {
  border-color:var(--blue);
  transform:translateY(-3px);
}
.tool-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.1em;
  font-weight:700;
}
.tool-arrow {
  font-size:20px;
  font-weight:400;
}
.tool-art {
  height:166px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:18px -4px 26px;
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--soft);
}
.art-scan {
  background:#eef0ff;
}
.art-scan svg {
  height:115px;
  stroke:var(--blue);
  stroke-width:2;
  fill:var(--lime);
}
.scan-corners {
  position:absolute;
  inset:21px 65px;
  border:1px solid #abb4ee;
  border-radius:8px;
}
.art-map {
  background:#eef4d6;
}
.art-map svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--blue);
  stroke-width:3;
}
.art-map .map-line {
  stroke:#d2dcb3;
  stroke-width:9;
}
.art-map .map-pin {
  fill:var(--blue);
  stroke:var(--blue);
}
.art-map circle {
  fill:var(--lime);
  stroke:var(--lime);
}
.art-chat {
  background:#e9edfa;
}
.chat-bubble {
  background:var(--blue);
  color:white;
  padding:20px 35px 20px 22px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
  border-radius:10px 10px 10px 0;
  transform:rotate(-7deg);
  position:relative;
}
.chat-bubble b {
  position:absolute;
  right:10px;
  bottom:10px;
  font-size:20px;
  font-weight:400;
}
.chat-star {
  color:#6b8929;
  font-size:64px;
  position:absolute;
  right:26px;
  top:20px;
}
.tool-card h3 {
  font-size:22px;
  letter-spacing:-.04em;
  line-height:1.2;
}
.tool-card>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin-top:12px;
  margin-bottom:30px;
  max-width:280px;
}
.tool-label {
  border-top:1px solid var(--line);
  padding-top:17px;
  font-size:10px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:auto;
}
.tool-label>span {
  color:var(--muted);
  font-weight:400;
  font-size:9px;
}
.access-label:before {
  content:'';
  display:inline-block;
  width:1em;
  height:1em;
  margin-right:.25em;
  vertical-align:-.15em;
  background:var(--blue);
  -webkit-mask:url('/static/arrow-up-right.svg') center / contain no-repeat;
  mask:url('/static/arrow-up-right.svg') center / contain no-repeat;
}
.eco-points {
  --eco-top:78px;
  --eco-gap:22px;
  height:240vh;
  background:var(--paper);
}
.eco-points-stage {
  position:sticky;
  top:var(--eco-top);
  height:calc(100svh - var(--eco-top) - var(--eco-gap));
  margin-inline:clamp(12px,2vw,28px);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#e7ecd8;
  display:flex;
  align-items:center;
}
.eco-points-media,
.eco-points-scrim {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.eco-points-video {
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  background:#e7ecd8;
  user-select:none;
  -webkit-user-select:none;
}
.eco-points-video::-webkit-media-controls,
.eco-points-video::-webkit-media-controls-enclosure,
.eco-points-video::-webkit-media-controls-panel,
.eco-points-video::-webkit-media-controls-play-button,
.eco-points-video::-webkit-media-controls-start-playback-button,
.eco-points-video::-webkit-media-controls-overlay-play-button {
  display:none !important;
  opacity:0;
  pointer-events:none;
  -webkit-appearance:none;
}
.eco-points-scrim {
  background:
    linear-gradient(100deg,rgba(250,251,247,.95) 0%,rgba(250,251,247,.9) 42%,rgba(250,251,247,.58) 100%);
}
.eco-points-copy {
  position:relative;
  z-index:1;
  width:min(1120px,calc(100% - 48px));
  margin-inline:auto;
}
.eco-points-intro {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px 48px;
  align-items:end;
}
.eco-points-intro h2 {
  margin-top:12px;
  font-size:clamp(34px,4vw,48px);
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1.05;
}
.eco-points-intro h2 em {
  font-style:normal;
  color:var(--blue);
}
.eco-points-intro p {
  max-width:420px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.eco-points-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}
.eco-points-grid article {
  min-height:100%;
  padding:14px 14px 16px;
  border:1px solid var(--line);
  border-radius:5px;
  background:rgba(255,255,255,.9);
}
.eco-points-kicker {
  color:var(--blue);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}
.eco-points-grid h3 {
  margin-top:8px;
  font-size:16px;
  letter-spacing:-.03em;
}
.eco-points-grid b {
  display:block;
  margin:8px 0 6px;
  color:var(--blue);
  font-size:22px;
  letter-spacing:-.04em;
}
.eco-points-grid p {
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.eco-points-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  max-width:680px;
  color:var(--ink);
  font-size:12px;
  line-height:1.5;
}
.eco-points-note:before {
  content:'';
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:inset 0 0 0 1px #b6d24a;
}
@media(max-width:900px) {
  .eco-points { height:220vh; }
  .eco-points-stage { align-items:stretch; }
  .eco-points-copy { max-height:100%; overflow:auto; padding-block:18px; }
  .eco-points-intro { grid-template-columns:1fr; gap:14px; }
  .eco-points-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
  .eco-points {
    --eco-top:68px;
    --eco-gap:12px;
    height:200vh;
  }
  .eco-points-stage {
    align-items:flex-start;
    margin-inline:10px;
    border-radius:16px;
  }
  .eco-points-scrim {
    background:linear-gradient(180deg,rgba(250,251,247,.42) 0%,rgba(250,251,247,.9) 34%,rgba(250,251,247,.96) 100%);
  }
  .eco-points-copy {
    width:calc(100% - 24px);
    padding-block:16px 14px;
  }
  .eco-points-intro { gap:8px; }
  .eco-points-intro h2 { font-size:30px; margin-top:6px; }
  .eco-points-intro p,.eco-points-grid p,.eco-points-note { font-size:12px; line-height:1.45; }
  .eco-points-grid { gap:8px; margin-top:12px; }
  .eco-points-grid article { padding:10px 10px 12px; }
  .eco-points-grid h3 { margin-top:4px; }
  .eco-points-grid b { font-size:18px; margin:4px 0; }
  .eco-points-note { margin-top:10px; }
}
.principles-section {
  padding-block:75px;
  background:var(--soft);
  border-block:1px solid var(--line);
}
.principles-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}
.principles-layout>div>p {
  margin-top:24px;
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}
.principles details {
  border-bottom:1px solid #ccd3c6;
}
.principles summary {
  display:flex;
  align-items:center;
  gap:22px;
  padding:20px 0;
  cursor:pointer;
  font-size:27px;
  letter-spacing:-.03em;
  list-style:none;
}
.principles summary::-webkit-details-marker {
  display:none;
}
.principles summary>span:first-child {
  font-size:9px;
  color:var(--muted);
  letter-spacing:0;
}
.details-plus {
  margin-left:auto;
  font-size:25px;
  color:var(--blue);
  transition:transform .42s cubic-bezier(.25,.1,.25,1);
}
.principles details[open]:not([data-expanded="false"]) .details-plus {
  transform:rotate(45deg);
}
.principles details>p {
  padding:0 30px 20px;
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:420px;
}
.cleanup-approach {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:2px 14px;
  margin-top:22px;
  padding:18px 18px 16px;
  background:white;
  border:1px solid var(--line);
}
.cleanup-approach-icon {
  grid-row:1 / span 3;
  color:var(--blue);
}
.cleanup-approach-icon svg {
  display:block;
  width:28px;
  height:28px;
  margin-top:2px;
}
.cleanup-approach h3 {
  margin:0;
  font-size:18px;
  letter-spacing:-.03em;
  line-height:1.2;
}
.cleanup-approach p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.cleanup-approach b {
  display:block;
  margin-top:10px;
  font-size:13px;
}
.join-section {
  text-align:center;
  padding-block:94px;
}
.join-section h2 {
  font-size:56px;
  letter-spacing:-.065em;
  line-height:1.08;
  margin:22px 0 28px;
}
.join-section h2>span {
  color:var(--blue);
}
.join-section>p {
  font-size:11px;
  color:var(--muted);
  margin-top:17px;
}
.community-crowd {
  position:relative;
  margin-top:-84px;
  overflow:hidden;
}
.crowd-canvas {
  display:block;
  width:100%;
  height:340px;
}
.crowd-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:22px;
  border-top:1px solid var(--line);
}
.crowd-caption>span {
  font-size:11px;
}
.crowd-caption>span>span {
  color:var(--blue);
  margin-left:12px;
}
.crowd-motion-toggle {
  position:absolute;
  z-index:1;
  top:8px;
  left:24px;
  padding:10px 14px;
  background:var(--paper);
  border:1px solid var(--blue);
  color:var(--blue);
  border-radius:4px;
  transform:translateY(-160%);
}
.crowd-motion-toggle:focus-visible {
  transform:translateY(0);
}
.community-crowd[data-state="unavailable"] .crowd-canvas {
  display:none;
}
@media(max-width:600px) {
  .community-crowd { margin-top:-50px; }
  .crowd-canvas { height:260px; }
  .crowd-caption {
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    padding-block:18px;
  }
  .crowd-caption>span { font-size:10px; }
}
.footer {
  border-top:1px solid var(--line);
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:102px;
}
.footer-top>.brand {
  font-size:26px;
}
.footer-top>span {
  font-size:12px;
  color:var(--muted);
}
.footer-top>a:last-child {
  font-size:12px;
  font-weight:600;
}
.footer-bottom {
  padding-block:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted);
  gap:16px;
}
.footer-bottom>span:last-child {
  color:var(--blue);
}
.workspace {
  padding-block:112px 84px;
  min-height:calc(100vh - 270px);
}
.page-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px;
}
.page-heading h1 {
  font-size:46px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.055em;
  margin-top:18px;
}
.page-heading h1 em {
  font-style:normal;
  color:var(--blue);
}
.page-heading>p {
  max-width:320px;
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}
.auth-gate {
  background:#eef0ff;
  padding:40px;
  display:flex;
  align-items:center;
  gap:28px;
  border:1px solid #d7dcff;
  min-height:220px;
}
.gate-icon {
  font-size:70px;
  font-weight:400;
  color:var(--blue);
  background:var(--lime);
  height:95px;
  width:95px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.auth-gate h2 {
  font-size:26px;
  letter-spacing:-.04em;
  margin-bottom:12px;
}
.auth-gate p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:380px;
}
.auth-gate>.button {
  margin-left:auto;
}
.panel {
  background:var(--white);
  border:1px solid var(--line);
  padding:24px;
  border-radius:6px;
}
.scan-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.dropzone {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.3;
  background:var(--soft);
  border:1px dashed #b5beb0;
  cursor:pointer;
  border-radius:5px;
  overflow:hidden;
}
.dropzone.dragover {
  border-color:var(--blue);
  background:#eef0ff;
}
.dropzone>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--soft);
}
.drop-content {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:10px;
  padding:20px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
.drop-content strong {
  font-size:18px;
  color:var(--ink);
  letter-spacing:-.025em;
}
.drop-content small {
  font-size:10px;
}
.upload-symbol {
  font-size:44px;
  font-weight:400;
  color:var(--blue);
  width:75px;
  height:75px;
  border:1px solid var(--blue);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:12px;
}
.scan-actions {
  display:flex;
  gap:12px;
  margin-top:20px;
}
.scan-actions>.button {
  flex:1;
}
.fine-print {
  font-size:10px;
  color:var(--muted);
  line-height:1.8;
  margin-top:17px;
}
.result-panel {
  display:flex;
  flex-direction:column;
}
.result-empty {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  flex:1;
  gap:24px;
  padding:24px 10px;
  min-height:350px;
}
.result-star {
  font-size:60px;
  color:var(--blue);
}
.result-empty h2 {
  font-size:32px;
  letter-spacing:-.045em;
  line-height:1.1;
}
.result-empty p {
  font-size:13px;
  line-height:1.8;
  max-width:240px;
  color:var(--muted);
}
.result-body {
  padding-top:25px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.category-tag {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:700;
}
.result-body h2 {
  font-size:33px;
  letter-spacing:-.04em;
}
.preparation {
  padding:20px;
  background:var(--soft);
  font-size:14px;
  line-height:1.7;
}
.preparation b {
  display:block;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:10px;
  color:var(--muted);
}
.reward {
  padding:18px 20px;
  background:var(--lime);
  font-size:18px;
  display:flex;
  justify-content:space-between;
}
.result-meta {
  font-size:11px;
  color:var(--muted);
}
.result-point {
  border:1px solid var(--line);
  padding:16px;
  text-align:left;
  background:white;
  font-size:12px;
  line-height:1.6;
}
.result-point b {
  display:block;
}
.error-box {
  color:var(--red);
  padding:20px;
  background:#fff0ed;
  border:1px solid #e9bfb6;
  font-size:13px;
  line-height:1.7;
}
.scan-line {
  position:absolute;
  inset-inline:0;
  height:2px;
  background:var(--blue);
  top:20%;
  animation:scan 1.3s ease-in-out infinite alternate;
}
@keyframes scan {
  to {
    top:80%;
  }
}
.demo-notice {
  padding:13px 17px;
  display:flex;
  gap:16px;
  align-items:center;
  background:#edf1e1;
  font-size:11px;
  line-height:1.6;
  margin-bottom:25px;
}
.demo-notice b {
  white-space:nowrap;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.demo-notice span {
  color:#5e6849;
}
.filter-row {
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:10px;
  scrollbar-width:thin;
}
.filter-button {
  padding:10px 15px;
  min-height:39px;
  background:white;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:11px;
  white-space:nowrap;
}
.filter-button[aria-pressed=true] {
  background:var(--blue);
  border-color:var(--blue);
  color:white;
}
.material-filters {
  margin-bottom:14px;
}
.material-filters .filter-button {
  background:transparent;
  font-size:10px;
  min-height:30px;
  padding:6px 11px;
}
.material-filters .filter-button[aria-pressed=true] {
  background:var(--lime);
  border-color:#b7d748;
  color:var(--ink);
}
.map-layout {
  display:grid;
  grid-template-columns:335px 1fr;
  height:570px;
  border:1px solid var(--line);
  background:white;
  border-radius:5px;
  overflow:hidden;
}
.map-sidebar {
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--line);
}
.list-heading {
  padding:20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.list-heading h2 {
  font-size:14px;
  letter-spacing:-.02em;
}
.list-heading h2 span {
  color:var(--blue);
  font-size:11px;
  margin-left:6px;
}
.list-heading>span {
  font-size:8px;
  color:var(--muted);
  letter-spacing:.08em;
}
.point-list {
  overflow:auto;
  padding:0 16px;
}
.point-card {
  display:block;
  border:0;
  border-bottom:1px solid var(--line);
  padding:19px 3px;
  text-align:left;
  background:white;
  width:100%;
  font-size:11px;
  line-height:1.6;
}
.point-card:hover,.point-card.selected {
  background:var(--soft);
}
.point-card b {
  font-size:13px;
  font-weight:600;
  display:block;
  margin-bottom:6px;
}
.point-card .address {
  display:block;
  color:var(--muted);
}
.point-card .point-materials {
  font-size:10px;
  color:var(--muted);
  margin-top:7px;
  display:block;
}
.point-card .point-bottom {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:9px;
  margin-top:9px;
}
.point-bottom>span:last-child {
  color:var(--blue);
  font-weight:700;
}
.map-frame {
  position:relative;
  min-width:0;
  min-height:0;
}
#map {
  position:absolute;
  inset:0;
  z-index:1;
  background:#e9eee2;
}
.map-note {
  position:absolute;
  top:15px;
  left:15px;
  z-index:400;
  background:white;
  padding:10px 14px;
  font-size:9px;
  letter-spacing:.08em;
  font-weight:700;
  box-shadow:0 1px 6px #0001;
}
.map-marker {
  width:30px;
  height:30px;
  background:var(--blue);
  border:3px solid white;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 2px 7px #0003;
  display:grid;
  place-items:center;
}
.map-marker span {
  transform:rotate(45deg);
  color:white;
  font-size:12px;
  line-height:1;
}
.map-marker.clothes {
  background:#87543c;
}
.map-marker.recycle {
  background:#6b8433;
}
.map-marker.hazardous {
  background:#c34c3a;
}
.leaflet-container {
  font-family:Arial,Helvetica,sans-serif;
}
.leaflet-popup-content {
  font-size:12px;
  line-height:1.7;
}
.leaflet-popup-content b {
  display:block;
  margin:6px 0;
}
.leaflet-popup-content a {
  color:var(--blue);
  font-weight:700;
  display:inline-block;
  margin-top:8px;
}
.leaflet-control-attribution {
  font-size:8px!important;
}
.empty-state {
  padding:50px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}
.chat-layout {
  display:grid;
  grid-template-columns:1fr 270px;
  gap:36px;
}
.chat-panel {
  border:1px solid var(--line);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  min-height:550px;
  height:620px;
  overflow:hidden;
  background:white;
}
.chat-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  border-bottom:1px solid var(--line);
  gap:15px;
}
.chat-header>div:first-child {
  display:flex;
  align-items:center;
  gap:10px;
}
.assistant-mark {
  font-size:32px;
  color:var(--blue);
}
.chat-header b {
  font-size:13px;
}
.chat-header small {
  font-size:9px;
  font-weight:400;
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.messages {
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px;
  background:var(--paper);
}
.message {
  padding:14px 17px;
  border:1px solid var(--line);
  background:white;
  font-size:13px;
  line-height:1.7;
  max-width:85%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border-radius:6px 6px 6px 0;
  align-self:flex-start;
}
.message.user {
  background:var(--blue);
  color:white;
  border-color:var(--blue);
  align-self:flex-end;
  border-radius:6px 6px 0 6px;
}
.message.error {
  color:var(--red);
  border-color:#e1bdb5;
}
.message-label {
  display:block;
  color:var(--blue);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.message .text-link {
  font-size:10px;
  display:flex;
  margin-top:8px;
  padding:4px 0;
  white-space:normal;
  text-align:left;
}
.suggestions {
  display:flex;
  gap:8px;
  padding:13px 17px 0;
  overflow:auto;
}
.suggestions>button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:3px;
  padding:8px 12px;
  font-size:10px;
  white-space:nowrap;
}
.suggestions>button:hover {
  border-color:var(--blue);
}
.chat-form {
  display:flex;
  gap:10px;
  padding:15px 17px 17px;
}
.chat-form input {
  flex:1;
  width:0;
  min-width:0;
  background:var(--paper);
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:12px;
}
.send-button {
  min-height:44px;
  padding:10px 18px;
  font-size:21px;
  border-radius:4px;
}
.chat-aside {
  padding-top:30px;
}
.chat-aside h2 {
  font-size:42px;
  line-height:1.04;
  letter-spacing:-.055em;
  margin-top:20px;
}
.chat-aside>p {
  font-size:13px;
  line-height:1.8;
  margin-top:22px;
  color:var(--muted);
}
.aside-note {
  font-size:11px;
  line-height:1.8;
  padding:20px 0;
  border-top:1px solid var(--line);
  margin-top:35px;
  color:var(--muted);
}
.chat-limit {
  font-size:10px;
  letter-spacing:.04em;
  color:var(--blue);
}
.profile-overview {
  display:grid;
  grid-template-columns:1.3fr repeat(3,1fr);
  border:1px solid var(--line);
  background:white;
}
.earn-panel { margin-top:28px; }
.earn-panel h2 { font-size:28px; letter-spacing:-.04em; margin-bottom:16px; }
.earn-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); background:white; }
.earn-grid article { padding:18px 16px; border-right:1px solid var(--line); }
.earn-grid article:last-child { border-right:0; }
.earn-grid b { display:block; font-size:14px; }
.earn-grid strong { display:block; margin:10px 0; font-size:22px; letter-spacing:-.04em; }
.earn-grid p,.proof-form .fine-print { color:var(--muted); font-size:12px; line-height:1.6; }
.proof-forms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; }
.proof-form,.event-checkin { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; padding:16px; border:1px solid var(--line); background:white; }
.proof-form { flex-direction:column; }
.proof-form p { margin:0; }
.proof-camera { display:grid; gap:10px; max-width:360px; margin-top:16px; }
.proof-camera video { width:100%; aspect-ratio:3/4; object-fit:cover; background:#111; }
.proof-camera-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.proof-form label,.event-checkin label { font-size:12px; }
.event-checkin { margin-top:18px; }
.event-checkin-box { margin-top:18px; padding:18px; border:1px solid var(--line); background:white; }
.event-checkin-box img,.host-qr img { display:block; width:220px; height:220px; background:white; cursor:zoom-in; }
#eventScanStage { display:grid; gap:8px; width:min(100%,320px); }
#eventScanVideo { width:100%; aspect-ratio:3/4; object-fit:cover; background:#111; }
.host-qr-list { display:flex; flex-wrap:wrap; gap:18px; }
.host-qr { margin:0; }
.host-qr figcaption { margin-top:8px; font-size:14px; }
.host-qr img { cursor:zoom-in; }
.host-qr-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.qr-dialog {
  padding:0;
  border:0;
  border-radius:8px;
  width:min(480px, calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 100px #13231726;
}
.qr-dialog::backdrop { background:#111c1899; backdrop-filter:blur(5px); }
.qr-dialog-inner { position:relative; padding:28px 28px 24px; }
.qr-dialog-title, .qr-dialog h2 { margin:0 36px 12px 0; font-size:28px; letter-spacing:-.04em; }
.qr-dialog p { margin:0; color:var(--muted); line-height:1.6; }
.qr-dialog img { display:block; width:min(100%, 420px); height:auto; margin:8px auto 0; background:white; }
.qr-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.leaderboard-month { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
.leaderboard-month .custom-select { min-width:168px; }
.leaderboard-month .custom-select-trigger { min-height:36px; padding:8px 12px; gap:12px; border-radius:10px; font-size:13px; font-weight:600; }
.leaderboard-month .custom-select-menu { min-width:200px; }
.profile-intro,.profile-stat {
  padding:30px;
}
.profile-intro h2 {
  font-size:30px;
  letter-spacing:-.045em;
  margin-top:13px;
}
.profile-intro>p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin-top:15px;
}
.profile-stat {
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile-stat>span {
  font-size:10px;
  color:var(--muted);
}
.profile-stat b {
  font-size:55px;
  color:var(--blue);
  letter-spacing:-.06em;
}
.profile-stat small {
  font-size:11px;
  color:var(--muted);
}
.history-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:40px;
  margin-bottom:20px;
}
.history-heading h2 {
  font-size:23px;
  letter-spacing:-.04em;
}
.history-row {
  padding:18px 0;
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:20px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.history-number {
  font-size:12px;
  color:var(--muted);
}
.history-row b {
  display:block;
  font-size:14px;
}
.history-row small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:6px;
  line-height:1.7;
}
.history-points {
  color:var(--blue);
  font-size:18px;
  font-weight:700;
}
.auth-dialog {
  padding:0;
  border:0;
  border-radius:8px;
  max-width:470px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 40px);
  overflow:auto;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 20px 100px #13231726;
}
.auth-dialog.is-signup { max-width:540px; }
.auth-dialog::backdrop {
  background:#111c1899;
  backdrop-filter:blur(5px);
}
.auth-dialog-inner {
  padding:35px;
  position:relative;
}
.dialog-close {
  position:absolute;
  right:16px;
  top:12px;
  background:transparent;
  font-size:28px;
  line-height:1;
  padding:8px;
  color:var(--muted);
}
.auth-dialog .brand {
  font-size:26px;
}
.auth-language-row {
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  margin-bottom:-15px;
}
.auth-switch {
  display:flex;
  margin-top:27px;
  border-bottom:1px solid var(--line);
  gap:25px;
}
.auth-switch>button {
  padding:12px 0;
  font-size:11px;
  font-weight:700;
  background:transparent;
  color:var(--muted);
  border-bottom:2px solid transparent;
}
.auth-switch>button[aria-pressed=true] {
  color:var(--blue);
  border-color:var(--blue);
}
.auth-dialog h2 {
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.05em;
  margin-top:27px;
}
.auth-description {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin-top:15px;
  margin-bottom:25px;
}
.form-field {
  margin-top:17px;
}
.form-field label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:700;
  margin-bottom:9px;
}
.form-field label span {
  font-weight:400;
  color:var(--muted);
  font-size:10px;
}
.form-field input {
  background:white;
  border:1px solid #cdd3c7;
  border-radius:4px;
  width:100%;
  padding:13px 14px;
  font-size:13px;
  min-height:45px;
}
.password-wrap {
  position:relative;
}
.password-wrap input {
  padding-right:85px;
}
.password-wrap button {
  position:absolute;
  right:11px;
  top:0;
  bottom:0;
  background:transparent;
  font-size:10px;
  color:var(--muted);
}
.auth-submit {
  width:100%;
  margin-top:23px;
}
.auth-privacy {
  font-size:9px;
  line-height:1.8;
  color:var(--muted);
  margin-top:20px;
}
.form-error {
  font-size:12px;
  line-height:1.6;
  color:var(--red);
  background:#fff0ec;
  padding:12px;
  margin-top:16px;
  border-left:2px solid var(--red);
}
.form-notice {
  font-size:12px;
  line-height:1.7;
  color:#3e571f;
  background:#edf4df;
  padding:12px;
  margin-top:16px;
  border-left:2px solid #718a40;
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:white;
  box-shadow:0 5px 20px #0002;
  padding:15px 22px;
  border-radius:5px;
  font-size:12px;
  line-height:1.6;
  max-width:calc(100% - 32px);
  z-index:3000;
}
@media(min-width:1500px) {
  .hero h1 {
    font-size:94px;
  }
  .hero {
    gap:80px;
    padding-block:120px 80px;
  }
  .hero-description {
    font-size:16px;
    max-width:430px;
  }
  .photo-type {
    font-size:90px;
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .hero {
    gap:35px;
  }
  .hero h1 {
    font-size:66px;
  }
  .hero-description {
    font-size:13px;
  }
  .hero-actions {
    gap:16px;
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:10px;
  }
  .hero-footnote {
    margin-top:30px;
  }
  .hero-stamp {
    right:-12px;
    width:115px;
    font-size:11px;
  }
  .photo-type {
    font-size:65px;
  }
  .tool-card {
    padding:18px;
  }
  .tool-card h3 {
    font-size:19px;
  }
  .tool-card>p {
    font-size:12px;
  }
  .principles-layout {
    gap:60px;
  }
  .auth-gate {
    padding:30px;
    gap:20px;
  }
  .auth-gate h2 {
    font-size:23px;
  }
  .gate-icon {
    width:70px;
    height:70px;
    font-size:50px;
  }
  .auth-gate>.button {
    font-size:12px;
    padding-inline:16px;
  }
  .chat-layout {
    grid-template-columns:1fr 230px;
    gap:24px;
  }
  .chat-aside h2 {
    font-size:35px;
  }
}
@media(max-width:800px) {
  .container {
    width:calc(100% - 40px);
  }
  .brand {
    font-size:25px;
  }
  .nav a {
    font-size:11px;
    padding:8px 9px;
  }
  .hero {
    padding-block:100px 43px;
    gap:30px;
    grid-template-columns:1fr 1fr;
  }
  .hero-copy {
    padding-top:0;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.09em;
  }
  .hero h1 {
    font-size:52px;
    margin-block:21px;
  }
  .hero-description {
    font-size:12px;
    line-height:1.8;
  }
  .highlight {
    white-space:normal;
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    margin-top:22px;
  }
  .hero-actions>.button {
    font-size:12px;
    min-height:44px;
  }
  .hero-footnote {
    font-size:9px;
    margin-top:20px;
  }
  .mini-symbol {
    font-size:32px;
  }
  .photo-type {
    font-size:clamp(38px,6.2vw,49px);
    left:36px;
    right:20px;
  }
  .city-mark b {
    font-size:18px;
  }
  .globe-stage {
    padding:20px 20px 20px 36px;
    aspect-ratio:1/1.5;
  }
  .photo-caption {
    font-size:7px;
  }
  .hero-stamp {
    bottom:55px;
    right:-8px;
    padding:12px;
    width:105px;
    font-size:10px;
  }
  .hero-stamp b {
    font-size:24px;
  }
  .visual-caption {
    font-size:7px;
  }
  .manifesto-group {
    font-size:13px;
    gap:15px;
    min-height:55px;
  }
  .manifesto-group span:nth-child(even) {
    font-size:23px;
  }
  .section {
    padding-block:55px;
  }
  .section-heading {
    gap:30px;
    align-items:start;
  }
  .section-heading h2,.principles-layout h2 {
    font-size:34px;
  }
  .section-heading>p {
    font-size:12px;
    max-width:250px;
  }
  .tool-grid {
    gap:12px;
  }
  .tool-card {
    padding:15px;
  }
  .tool-top {
    font-size:7px;
  }
  .tool-art {
    height:130px;
    margin-bottom:20px;
  }
  .scan-corners {
    inset:17px 28px;
  }
  .tool-card h3 {
    font-size:18px;
  }
  .tool-card>p {
    font-size:11px;
  }
  .tool-label {
    font-size:9px;
    flex-wrap:wrap;
  }
  .tool-label>span {
    font-size:8px;
  }
  .chat-bubble {
    font-size:16px;
    padding:16px 24px 16px 16px;
  }
  .chat-star {
    font-size:47px;
    right:0;
    top:15px;
  }
  .principles-section {
    padding-block:50px;
  }
  .principles-layout {
    gap:35px;
  }
  .principles-layout>div>p {
    font-size:12px;
  }
  .principles summary {
    font-size:23px;
    padding-block:17px;
  }
  .principles details>p {
    font-size:12px;
    padding-left:0;
  }
  .cleanup-approach { margin-top:18px; padding:16px; }
  .cleanup-approach h3 { font-size:16px; }
  .cleanup-approach p,.cleanup-approach b { font-size:12px; }
  .join-section {
    padding-block:60px;
  }
  .join-section h2 {
    font-size:43px;
  }
  .footer-top {
    min-height:90px;
  }
  .footer-top>span {
    display:none;
  }
  .footer-bottom {
    flex-wrap:wrap;
    font-size:8px;
    gap:10px;
  }
  .footer-bottom>span:nth-child(2) {
    display:none;
  }
  .workspace {
    padding-block:104px 55px;
  }
  .page-heading {
    gap:20px;
    align-items:start;
    flex-direction:column;
    margin-bottom:25px;
  }
  .page-heading h1 {
    font-size:38px;
  }
  .page-heading>p {
    max-width:450px;
    font-size:12px;
  }
  .auth-gate {
    flex-wrap:wrap;
    padding:25px;
  }
  .auth-gate>div {
    flex:1;
    min-width:220px;
  }
  .auth-gate>.button {
    margin-left:90px;
  }
  .scan-layout {
    gap:16px;
  }
  .panel {
    padding:18px;
  }
  .scan-actions {
    gap:8px;
  }
  .scan-actions>.button {
    font-size:11px;
    padding:12px;
    min-height:45px;
  }
  .drop-content strong {
    font-size:15px;
  }
  .drop-content {
    font-size:10px;
  }
  .upload-symbol {
    width:60px;
    height:60px;
    font-size:35px;
  }
  .result-empty {
    min-height:300px;
  }
  .result-empty h2 {
    font-size:28px;
  }
  .chat-layout {
    grid-template-columns:1fr;
  }
  .chat-aside {
    display:none;
  }
  .chat-panel {
    height:600px;
  }
  .map-layout {
    grid-template-columns:270px 1fr;
  }
  .demo-notice {
    align-items:start;
  }
  .profile-overview,.earn-grid,.proof-forms {
    grid-template-columns:1fr 1fr;
  }
  .earn-grid article:nth-child(2n) { border-right:0; }
  .earn-grid article:nth-child(-n+4) { border-bottom:1px solid var(--line); }
  .profile-intro {
    grid-column:1/-1;
    border-bottom:1px solid var(--line);
  }
  .profile-stat:nth-child(2n) {
    border-left:0;
  }
  .profile-stat b {
    font-size:45px;
  }
}
@media(max-width:560px) {
  .container {
    width:calc(100% - 36px);
  }
  .hero {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:96px;
  }
  .hero h1 {
    font-size:clamp(48px,14vw,76px);
    letter-spacing:-.025em;
    margin-block:22px;
  }
  .hero-description {
    max-width:360px;
    font-size:13px;
  }
  .hero-actions {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
  }
  .hero-actions .text-link {
    font-size:10px;
    white-space:nowrap;
  }
  .hero-footnote {
    margin-top:25px;
  }
  .hero-visual {
    margin-right:9px;
  }
  .globe-stage {
    aspect-ratio:1/1.3;
    padding:22px 18px 22px 40px;
  }
  .brand .brand-logo {
    width:34px;
    height:34px;
  }
  .photo-type {
    font-size:clamp(42px,14.3vw,56px);
    left:40px;
    right:18px;
  }
  .photo-caption {
    font-size:8px;
  }
  .hero-stamp {
    width:116px;
    right:-10px;
    font-size:11px;
    bottom:56px;
  }
  .visual-caption {
    font-size:8px;
  }
  .manifesto-group {
    font-size:12px;
    gap:8px;
    min-height:49px;
  }
  .manifesto-group span:nth-child(even) {
    font-size:18px;
  }
  .section-heading {
    flex-direction:column;
    gap:20px;
    margin-bottom:25px;
  }
  .section-heading>p {
    max-width:330px;
  }
  .section-heading h2,.principles-layout h2 {
    font-size:36px;
  }
  .eyebrow {
    font-size:9px;
  }
  .tool-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .tool-card {
    padding:22px;
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:0 20px;
  }
  .tool-top {
    grid-column:1/-1;
    font-size:8px;
  }
  .tool-art {
    grid-row:2/5;
    margin:18px 0 0;
    height:170px;
  }
  .tool-card h3 {
    font-size:21px;
    margin-top:24px;
  }
  .tool-card>p {
    font-size:12px;
    margin-top:10px;
    margin-bottom:18px;
    line-height:1.7;
  }
  .tool-label {
    grid-column:2;
    padding-top:12px;
    font-size:9px;
    gap:6px;
  }
  .tool-label>span {
    font-size:8px;
  }
  .scan-corners {
    inset:20px 25px;
  }
  .chat-star {
    font-size:40px;
    right:0;
  }
  .chat-bubble {
    font-size:17px;
  }
  .principles-layout {
    grid-template-columns:1fr;
    gap:30px;
  }
  .principles-layout>div>p {
    margin-top:18px;
  }
  .principles summary {
    font-size:28px;
  }
  .principles details>p {
    padding-left:30px;
  }
  .cleanup-approach { grid-template-columns:32px 1fr; }
  .join-section h2 {
    font-size:38px;
  }
  .join-section .button {
    font-size:12px;
    padding-inline:19px;
  }
  .join-section>p {
    font-size:10px;
  }
  .footer-top>.brand {
    font-size:24px;
  }
  .footer-top>a:last-child {
    font-size:10px;
  }
  .page-heading h1 {
    font-size:35px;
  }
  .auth-gate {
    padding:25px;
    gap:18px;
    display:block;
  }
  .gate-icon {
    width:58px;
    height:58px;
    font-size:40px;
    margin-bottom:24px;
  }
  .auth-gate h2 {
    font-size:24px;
  }
  .auth-gate p {
    font-size:12px;
  }
  .auth-gate>.button {
    margin:23px 0 0;
    min-height:45px;
  }
  .scan-layout {
    grid-template-columns:1fr;
  }
  .dropzone {
    aspect-ratio:1.15;
  }
  .drop-content strong {
    font-size:18px;
  }
  .drop-content {
    font-size:12px;
  }
  .scan-actions>.button {
    font-size:12px;
  }
  .result-empty {
    min-height:290px;
  }
  .demo-notice {
    flex-direction:column;
    gap:5px;
    font-size:10px;
  }
  .filter-button {
    font-size:10px;
    padding:10px 12px;
  }
  .map-layout {
    grid-template-columns:1fr;
    grid-template-rows:340px auto;
    height:auto;
  }
  .map-frame {
    grid-row:1;
  }
  .map-sidebar {
    border-right:0;
    border-top:1px solid var(--line);
    max-height:470px;
  }
  .point-list {
    max-height:400px;
  }
  .chat-panel {
    height:calc(100dvh - 210px);
    min-height:480px;
  }
  .chat-header {
    padding:15px;
  }
  .messages {
    padding:17px;
  }
  .message {
    font-size:12px;
    max-width:92%;
  }
  .chat-form {
    padding:12px;
  }
  .chat-form input {
    padding:12px;
    font-size:11px;
  }
  .profile-intro,.profile-stat {
    padding:23px;
  }
  .profile-intro h2 {
    font-size:28px;
  }
  .history-row {
    gap:10px;
    grid-template-columns:25px 1fr auto;
  }
  .history-row b {
    font-size:13px;
  }
  .auth-dialog-inner {
    padding:27px 24px;
  }
  .auth-dialog h2 {
    font-size:32px;
  }
  .toast {
    width:max-content;
    text-align:center;
    font-size:11px;
  }
  .profile-stat b {
    font-size:42px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

/* SVG arrows inherit the existing size and color, including large posters. */
.eco-icon {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.15em;
  flex-shrink:0;
  overflow:visible;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}
.camera-stage {
  position:relative;
  min-height:300px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
}
#cameraEmpty {
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:25px;
  text-align:center;
}
#cameraEmpty strong {
  font-size:22px;
  letter-spacing:-.5px;
}
#cameraEmpty p {
  font-size:12px;
  color:var(--muted);
}
#cameraVideo {
  width:100%;
  max-height:430px;
  object-fit:contain;
  background:var(--ink);
}
.camera-photos {
  display:flex;
  gap:8px;
  padding:8px;
}
.camera-photos:has(img:not([hidden])) {
  border-top:1px solid var(--line);
}
.camera-photos img {
  flex:1;
  width:calc(50% - 4px);
  min-width:0;
  max-height:200px;
  object-fit:contain;
}
.camera-status {
  min-height:3em;
  font-size:12px;
  line-height:1.7;
  margin:16px 0;
}
.scan-actions {
  flex-wrap:wrap;
}
.map-source-notice {
  display:flex;
  gap:18px;
  padding:17px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  margin-bottom:20px;
  line-height:1.7;
  font-size:12px;
}
.map-source-notice b {
  flex-shrink:0;
}
.map-source-notice span {
  color:var(--muted);
}
.map-search-label {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  font-weight:600;
  margin-bottom:20px;
  max-width:460px;
}
.map-search-label input {
  border:1px solid var(--line);
  border-radius:5px;
  padding:13px 16px;
  font:inherit;
  background:var(--white);
  width:100%;
}
.point-item {
  border-bottom:1px solid var(--line);
}
.point-source {
  display:block;
  padding:0 17px 14px;
  color:var(--blue);
  font-size:10px;
}
.cleanup-log { display:grid; gap:8px; margin-top:12px; }
.cleanup-log p { margin:0; font-size:13px; }
.cleanup-log small { display:block; color:var(--muted); line-height:1.45; }
.cleanup-dialog {
  padding:0; border:0; border-radius:8px; width:min(560px, calc(100% - 32px));
  max-height:calc(100dvh - 32px); overflow:auto; background:var(--paper); color:var(--ink);
  box-shadow:0 20px 100px #13231726;
}
.cleanup-dialog::backdrop { background:#111c1899; backdrop-filter:blur(5px); }
.cleanup-dialog-inner { position:relative; padding:28px 28px 24px; }
.cleanup-dialog h2 { margin:8px 36px 8px 0; font-size:32px; letter-spacing:-.045em; line-height:1; }
.cleanup-dialog-inner > p { margin:0 0 8px; color:var(--muted); }
.cleanup-stage {
  --fade-x:28px;
  --fade-y:24px;
  position:relative; height:220px; margin:8px -28px 4px; overflow:hidden;
  background:var(--paper); pointer-events:none;
}
.cleanup-instruction {
  position:absolute; inset:-4px -6px -4px; width:calc(100% + 12px); height:calc(100% + 8px);
  object-fit:cover; object-position:center 40%;
  background:transparent; border:0; outline:0; box-shadow:none; pointer-events:none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--fade-x) calc(100% - var(--fade-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade-y) calc(100% - var(--fade-y)), transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--fade-x) calc(100% - var(--fade-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade-y) calc(100% - var(--fade-y)), transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.cleanup-stage::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, var(--paper) 0 6px, transparent var(--fade-x)),
    linear-gradient(to left, var(--paper) 0 6px, transparent var(--fade-x)),
    linear-gradient(to top, var(--paper) 0 8px, transparent var(--fade-y)),
    linear-gradient(to bottom, var(--paper) 0 6px, transparent var(--fade-y));
  background-repeat:no-repeat;
  background-size:var(--fade-x) 100%, var(--fade-x) 100%, 100% var(--fade-y), 100% var(--fade-y);
  background-position:left center, right center, center bottom, center top;
}
@media(max-width:700px) {
  .cleanup-stage { --fade-x:20px; --fade-y:36px; }
}
@media(min-width:1100px) {
  .cleanup-stage { --fade-x:36px; --fade-y:22px; }
}
.cleanup-steps { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.cleanup-steps li { display:grid; gap:2px; }
.cleanup-steps b { font-size:14px; }
.cleanup-steps span, .cleanup-rules { color:var(--muted); font-size:13px; line-height:1.45; }
.cleanup-rules { margin:14px 0 0; padding-left:18px; }
.cleanup-recorder[hidden] { display:none; }
.cleanup-recorder:not([hidden]) {
  position:fixed; z-index:30; left:50%; bottom:24px; transform:translateX(-50%);
  width:min(420px, calc(100% - 24px)); display:grid; gap:10px; padding:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 50px #13231722;
}
.cleanup-recorder video { width:100%; aspect-ratio:3/4; object-fit:cover; background:#111; border-radius:6px; }
.points-award {
  padding:0; border:0; border-radius:8px; width:min(360px, calc(100% - 32px));
  background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #1323172e;
}
.points-award[open] { animation:points-award-in .55s cubic-bezier(.2,.8,.2,1); }
.points-award::backdrop { background:#111c1899; backdrop-filter:blur(6px); }
.points-award-inner { padding:8px 22px 22px; text-align:center; }
.points-award h2 { margin:6px 0 8px; font-size:34px; letter-spacing:-.05em; line-height:1; }
.points-award-inner > p { margin:0 0 16px; color:var(--muted); }
.award-stage {
  --fade-x:22px;
  --fade-y:18px;
  --film-inset:7%;
  position:relative; height:196px; margin:4px -22px 0; overflow:hidden;
  background:var(--paper); pointer-events:none;
}
.award-film {
  position:absolute; inset:var(--film-inset); width:calc(100% - 2 * var(--film-inset)); height:calc(100% - 2 * var(--film-inset));
  object-fit:cover; object-position:center 46%;
  border:0; outline:0; box-shadow:none; pointer-events:none; background:transparent;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--fade-x) calc(100% - var(--fade-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade-y) calc(100% - var(--fade-y)), transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--fade-x) calc(100% - var(--fade-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade-y) calc(100% - var(--fade-y)), transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.award-stage::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, var(--paper) 0 6px, transparent var(--fade-x)),
    linear-gradient(to left, var(--paper) 0 6px, transparent var(--fade-x)),
    linear-gradient(to top, var(--paper) 0 8px, transparent var(--fade-y)),
    linear-gradient(to bottom, var(--paper) 0 6px, transparent var(--fade-y));
  background-repeat:no-repeat;
  background-size:var(--fade-x) 100%, var(--fade-x) 100%, 100% var(--fade-y), 100% var(--fade-y);
  background-position:left center, right center, center bottom, center top;
}
@media(max-width:700px) {
  .award-stage { --fade-x:14px; --fade-y:16px; --film-inset:8%; height:180px; }
}
@media(min-width:1100px) {
  .award-stage { --fade-x:22px; --fade-y:16px; --film-inset:8%; height:200px; }
}
@keyframes points-award-in {
  from { opacity:0; transform:translateY(14px) scale(.96); }
  to { opacity:1; transform:none; }
}
.cleanup-reviews { display:grid; gap:10px; margin:8px 0 22px; }
.cleanup-reviews[hidden] { display:none; }
.cleanup-reviews h2 { margin:0; font-size:28px; letter-spacing:-.04em; }
.cleanup-review { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.cleanup-review video { width:100%; max-height:360px; border-radius:6px; background:#111; }
.cleanup-review p { margin:0; }
.cleanup-review-actions { display:flex; gap:8px; }
.cleanup-timer { margin:0; font-size:22px; letter-spacing:-.04em; }
#cleanupState.is-approved, #cleanupState.is-review { color:var(--ink); font-weight:700; }
#cleanupState.is-rejected, #cleanupState.is-error { color:var(--red); font-weight:700; }
@media(max-width:700px) {
  .proof-forms { grid-template-columns:1fr; }
  .cleanup-dialog-inner { padding:22px 18px 18px; }
  .cleanup-stage { margin-left:-18px; margin-right:-18px; height:190px; }
  .cleanup-dialog h2 { font-size:28px; }
  .cleanup-recorder { bottom:12px; }
  .map-source-notice {
    flex-direction:column;
    gap:6px;
  }
}