@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;450;500;550;600;650;700&display=swap');

:root{font-family:'Hanken Grotesk',Arial,sans-serif;color:#eeeae1;background:#080d0e;font-synthesis:none;--accent:#c3db9b;--muted:#8a9490;scrollbar-color:#4f594a #080d0e;scrollbar-width:thin}
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden}
a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}
#chapters button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
#world,.vignette{position:fixed;inset:0}
#world{opacity:0;transition:opacity 1.8s ease}
.city-ready #world,.started #world{opacity:1}
#world canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.vignette{pointer-events:none;background:linear-gradient(180deg,#080d0e66,transparent 25%,transparent 65%,#080d0ecc),radial-gradient(ellipse at 55% 55%,transparent 30%,#080d0e88 100%)}
header,footer{position:fixed;z-index:5;left:4.1%;right:4.1%;display:flex;align-items:center;justify-content:space-between}
header{top:34px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#eeeae1;font-size:27px;font-weight:650;letter-spacing:-1.4px}
.wordmark svg{width:28px;height:28px;color:var(--accent)}
.wordmark img{display:block;width:93.5px;height:auto}
.brand-dot{color:var(--accent)}
.header-scroll{font-size:10px;color:#96a093}
.header-scroll span{margin-left:17px;color:var(--accent)}
.started .header-scroll{display:none}
.back-to-top{display:inline-flex;align-items:center;gap:13px;padding:12px 0;border:0;border-radius:0;background:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer}
.back-to-top:hover{color:#eeeae1}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
footer{bottom:27px;gap:16px;font-size:9px;letter-spacing:1.8px;color:#8b968e}
.footer-left{display:flex;align-items:center;gap:10px}
.status-dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:var(--accent);box-shadow:0 0 8px #b4d88a55}
.footer-plus{margin-left:20px;font-size:17px;color:var(--accent)}
main{position:relative;z-index:2}
#intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;pointer-events:none}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:3.2px;color:#a2b39b}
.intro-eyebrow{margin:0 0 34px;opacity:0;transition:opacity 1.6s}
.question-ready .intro-eyebrow{opacity:1}
h1{font-size:clamp(36px,5.4vw,82px);font-weight:450;line-height:1.12;letter-spacing:-3.5px;margin:0;max-width:1100px;text-wrap:balance}
.what-if{animation:fade-in 1s both}
.intro-rest{display:none}
.question-ready .intro-rest{display:inline}
.question-ready h1{text-wrap:wrap}
.intro-rest.typing::after{content:'';display:inline-block;width:1px;height:.8em;margin-left:3px;vertical-align:-.04em;background:var(--accent);animation:caret .8s steps(1) infinite}
em{font-weight:450;font-style:normal;color:var(--accent)}
.begin{position:absolute;top:calc(50% + 185px);color:#b5bfb0;font-size:11px;letter-spacing:1.5px;display:flex;align-items:center;gap:14px;margin:0;padding:15px;opacity:0;transition:opacity 1s}
.begin.ready{opacity:1}
.begin span:last-child{font-size:17px;margin-left:10px}
.scroll-mark{display:block;width:13px;height:20px;border:1px solid #a8bd8d88;border-radius:8px;position:relative}
.scroll-mark::after{content:'';position:absolute;left:5px;top:4px;height:4px;width:1px;background:var(--accent)}
.started #intro{visibility:hidden}
#tour{position:fixed;top:27%;left:7.2%;width:340px}
.chapter-meta{display:flex;align-items:center;gap:13px;color:#a3b696;font-size:9px;letter-spacing:2.2px}
.meta-rule{width:30px;height:1px;background:#65715e}
#chapter-number{font-size:12px}
h2{font-size:clamp(34px,3.3vw,52px);letter-spacing:-1.8px;font-weight:450;line-height:1.08;margin:25px 0 20px;text-wrap:balance}
#description{color:#abb3ac;font-size:14px;line-height:1.85;max-width:320px;min-height:104px}
.mapping{display:flex;gap:15px;align-items:center;border-top:1px solid #73806b40;padding-top:19px;margin-top:27px;font-size:11px;color:#d2d8c8}
.mapping>span:nth-child(2){color:#7b8e6b}
.mapping>span:first-child{color:#9aa699}
.tour-scroll{display:flex;align-items:center;gap:19px;margin:33px 0 0;color:#a8ba97;font-size:8px;letter-spacing:2px}
.tour-scroll span:last-child{font-size:16px}
#floor-hint{font-size:10px;color:#bfd1a4;margin:23px 0 0;line-height:1.6}
#signup{margin-top:27px}
#download{margin-top:27px}
#city-styles{margin-top:22px;padding:14px;background:rgba(8,13,14,.76)}
.style-current{font-size:11px;color:#aab7a1;margin:0 0 12px;line-height:1.5}
.style-current strong{display:block;font-weight:500;color:#dce9c9;font-size:14px;margin-top:4px}
#style-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
#style-options button,#styles-cycle{border:0;border-radius:0;background:transparent;text-align:left;color:#aeb8ac;font:inherit;font-size:11px;line-height:1.4;cursor:pointer;padding:7px 0}
#style-options button{border-left:2px solid transparent;padding-left:9px;min-height:36px}
#style-options button[aria-pressed=true]{border-color:var(--accent);color:#e0eccd}
#style-options button:hover,#styles-cycle:hover{color:#f0f4e8}
#style-options button:focus-visible,#styles-cycle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#styles-cycle{margin-top:9px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.download-meta{font-size:11px;color:#c1cbb9;margin:16px 0 8px}
.download-cancel{border:0;background:none;color:var(--accent);font:inherit;font-size:11px;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.download-cancel:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#download-status{font-size:11px;line-height:1.6;color:#aebaa5}
#download-status:empty{display:none}
#download-status.error{color:#eab6a3}
.closing #description{min-height:0}
.signup-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:44px;padding:11px 19px;border:1px solid #c3db9b99;border-radius:0;background:#c3db9b;color:#111a12;font:inherit;font-size:13px;cursor:pointer}
.signup-button:hover{background:#d7e8b9}
.signup-button:focus-visible,#signup-email:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.signup-button:disabled{cursor:wait;opacity:.6}
#signup-form label{display:block;margin-bottom:9px;font-size:11px;color:#c1cbb9}
.signup-fields{display:flex;gap:8px}
#signup-email{min-width:0;width:100%;min-height:44px;padding:11px 12px;border:1px solid #a0b18c66;border-radius:0;background:#080d0edb;color:#eeeae1;font:inherit;font-size:14px}
#signup-email::placeholder{color:#8e9c8c}
.signup-fields .signup-button{flex-shrink:0;padding:10px 14px}
.signup-note,#signup-status{font-size:11px;line-height:1.6;color:#aebaa5}
#signup-status:empty{display:none}
#signup-status.error{color:#eab6a3}
#annotation{position:fixed;left:77%;top:35%;display:flex;gap:12px;align-items:flex-start;pointer-events:none;max-width:210px;padding:12px 14px;background:rgba(8,13,14,.76);border-radius:0}
#annotation-label{font-size:12px;color:#dce9c9}
#annotation-detail{display:block;margin-top:6px;font-size:10px;color:#a5b29f;line-height:1.6}
.annotation-dot{margin-top:5px;width:5px;height:5px;border:1px solid var(--accent);border-radius:50%}
#leader{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#leader path{fill:none;stroke:#aec393;stroke-width:1;opacity:.55}
#leader circle{fill:#c3db9b}
#scene-caption{position:fixed;bottom:15%;left:60%;font-size:8px;letter-spacing:2px;color:#a0ad94;display:flex;align-items:center;gap:9px}
#chapters{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:10px}
#chapters li{width:25px;height:24px;position:relative}
#chapters button{display:block;width:100%;height:44px;margin-top:-10px;padding:21px 0;position:relative;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
#chapters button::after{content:'';display:block;width:100%;height:2px;background:#5b695666;transition:background .2s}
#chapters button:hover::after{background:#a8ba91}
#chapters .chapter-progress{position:absolute;left:0;bottom:21px;height:2px;width:100%;transform:scaleX(var(--progress,0));transform-origin:left bottom;background:var(--accent);pointer-events:none;transition:height .38s cubic-bezier(.45,0,.35,1.3),transform .32s ease-in-out}
#chapters button.active::before,#chapters button:hover::before,#chapters button:focus-visible::before{content:attr(data-number);position:absolute;bottom:40px;left:0;right:0;text-align:center;font-size:9px;color:var(--accent);transition:bottom .32s ease-in-out,transform .32s ease-in-out}
#chapters .chapter-name{position:absolute;left:calc(100% + 12px + var(--preview-shift,0px));bottom:21px;display:flex;align-items:center;min-height:30px;width:max-content;max-width:180px;padding:6px 8px;background:rgba(8,13,14,.9);color:#dce9c9;font-size:9px;line-height:1.5;letter-spacing:1.2px;text-align:left;opacity:0;visibility:hidden;transform:translateX(-6px);pointer-events:none;transition:opacity .28s ease-in-out,transform .32s ease-in-out,visibility .28s}
#chapters button:is(:hover,:focus-visible) .chapter-progress{height:30px;transform:translateX(var(--preview-shift,0px)) scaleX(1)}
#chapters button:is(:hover,:focus-visible) .chapter-name{opacity:1;visibility:visible;transform:translateX(0)}
#chapters button:is(:hover,:focus-visible)::before{bottom:58px;transform:translateX(var(--preview-shift,0px))}
#chapters:has(button:focus-visible) button:hover:not(:focus-visible) .chapter-progress{height:2px;transform:scaleX(var(--progress,0))}
#chapters:has(button:focus-visible) button:hover:not(:focus-visible) .chapter-name{opacity:0;visibility:hidden}
#chapters:has(button:focus-visible) button:hover:not(:focus-visible)::before{content:none}
#chapters:has(button:focus-visible) button.active:hover:not(:focus-visible)::before{content:attr(data-number);bottom:40px;transform:none}
#error{position:fixed;bottom:90px;left:7%;max-width:340px;background:#131a17;padding:20px}
#error h2{font-size:23px;margin:0 0 12px}
#error p{font-size:12px;color:#aab3a8;line-height:1.6}
.no-script{position:fixed;top:40%;left:20%;right:20%;z-index:10}
body.no-webgl #tour{top:20%}
body.no-webgl #annotation,body.no-webgl #leader{display:none!important}
body.no-webgl #error{left:auto;right:7%;bottom:30%}
.started .vignette{background:linear-gradient(90deg,#080d0ef5 0%,#080d0ed4 28%,transparent 56%),linear-gradient(180deg,#080d0e44,transparent 25%,transparent 70%,#080d0eaa)}
@keyframes fade-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes caret{50%{opacity:0}}
@media(min-width:1500px){#tour{width:390px}#description{max-width:350px;font-size:15px}}
@media(max-width:850px){
  header{top:24px;left:6%;right:6%}.header-scroll{display:none}
  footer{left:6%;right:6%;font-size:8px;letter-spacing:1px;justify-content:center}#footer-right,.footer-left{display:none}
  h1{letter-spacing:-2px}#tour{left:7%;top:auto;bottom:112px;width:86%;max-width:420px}
  h2{font-size:35px;margin:16px 0 10px}#description{font-size:13px;line-height:1.65;min-height:0;max-width:370px;margin:10px 0}
  .mapping{margin-top:17px;padding-top:13px}.tour-scroll{margin-top:20px}.chapter-meta{font-size:8px}
  #annotation{left:65%;top:23%;max-width:128px;padding:10px 11px;gap:8px}#annotation-label{font-size:10px}#annotation-detail{font-size:9px}
  #scene-caption{left:auto;right:7%;bottom:75px;font-size:7px}.started .vignette{background:linear-gradient(0deg,#080d0e 5%,#080d0ef5 30%,#080d0ec7 44%,transparent 65%,#080d0e55)}
  body:has(#chapters button:is(:hover,:focus-visible)) #scene-caption{opacity:0}
  #floor-hint{margin-top:15px}#chapters{gap:8px}#chapters li{width:19px}
  #city-styles{margin-top:13px;padding:10px 12px}.style-current{margin-bottom:6px}.style-current strong{display:inline;font-size:12px;margin-left:7px}#style-options button{font-size:10px;min-height:31px;padding-top:5px;padding-bottom:5px}#styles-cycle{margin-top:3px;padding:5px 0}
  body.no-webgl #tour{top:130px;bottom:auto}body.no-webgl #error{right:7%;left:7%;bottom:80px;max-width:none}
}
@media(max-height:680px) and (min-width:851px){#tour{top:20%}h2{font-size:38px;margin-top:18px}#description{min-height:0}.mapping{margin-top:16px}.tour-scroll{margin-top:20px}}
@media(max-height:850px) and (min-width:851px){
  .customizing #tour{top:14%}.customizing h2{font-size:38px;margin:16px 0 14px}.customizing #description{font-size:13px;line-height:1.65;min-height:0}
  .customizing #city-styles{margin-top:15px;padding:11px 12px}.customizing .style-current strong{display:inline;margin-left:7px;font-size:12px}
  .customizing #style-options button{min-height:31px;padding-top:5px;padding-bottom:5px}.customizing #styles-cycle{margin-top:3px;padding:5px 0}.customizing .tour-scroll{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

#environment-labels{position:fixed;inset:0;pointer-events:none}
#environment-labels span{position:absolute;transform:translate(-50%,-100%);background:rgba(8,13,14,.84);color:#dce9c9;padding:6px 9px;font-size:9px;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid #a8ba97}
@media(max-width:850px){#environment-labels span{font-size:6.5px;padding:4px 5px;letter-spacing:0}}

.activity-view #annotation-label{color:#f2aa98}
.activity-view .annotation-dot{border-color:#ec8d77}
.activity-view #leader path{stroke:#d68b79}
.activity-view #leader circle{fill:#f2aa98}