/* Pocketlot v4: the original design tokens and both original font families are inherited. */
.city-story.pl-city{height:460svh;min-height:0;background:var(--canvas);overflow:visible;position:relative}
.pl-city .pl-stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:var(--canvas)}
.pl-atmosphere{position:absolute;inset:0;z-index:-1;background:var(--canvas);pointer-events:none}
.pl-scene{position:absolute;top:36px;bottom:70px;left:-7%;width:82%;cursor:grab;touch-action:pan-y;outline:0}
.pl-scene:active{cursor:grabbing}.pl-scene canvas{width:100%;height:100%;display:block;max-width:none}
.pl-loading{position:absolute;inset:48% 0 auto;text-align:center;font-size:13px;color:var(--mid);transition:opacity .4s}
.pl-loading>span{display:block;width:90px;height:2px;background:var(--line);margin:16px auto;overflow:hidden}.pl-loading>span:after{content:'';display:block;width:100%;height:100%;background:var(--deep);animation:pl-load 1.6s ease-in-out infinite;transform-origin:left}@keyframes pl-load{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
.pl-city[data-ready=true] .pl-loading{opacity:0;pointer-events:none}
.pl-section-caption{position:absolute;left:max(4%,calc((100% - 1152px)/2));top:38px;display:flex;gap:22px;align-items:center;pointer-events:none}
.pl-section-caption .eyebrow{margin:0}.pl-section-caption>span+span{font-size:12px;color:var(--mid)}
.pl-copy{position:absolute;right:max(4%,calc((100% - 1152px)/2));top:50%;width:320px;transform:translateY(-53%);z-index:3}
.pl-copy .eyebrow{margin:0 0 16px;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em}
.pl-copy .eyebrow:before{content:'';width:20px;height:1px;background:var(--mid)}
.pl-copy h2{font:700 clamp(30px,3.1vw,44px)/1.09 var(--font-accent);letter-spacing:-.025em;max-width:100%;margin:0 0 20px;color:var(--ink)}
.pl-copy .pl-description{font-size:14px;line-height:1.75;color:var(--mid);margin:0 0 24px;max-width:32ch}
.pl-data{display:flex;gap:26px;margin:0 0 20px}.pl-data>div{min-width:0}.pl-data strong{display:block;font:700 32px/1.1 var(--font-accent);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.pl-data strong small{font:500 12px var(--font-base);margin-left:5px;color:var(--mid)}.pl-data span{display:block;font-size:11px;color:var(--mid);margin-top:7px;line-height:1.4}
.pl-fact-link{font-size:12px;display:flex;gap:9px;align-items:center;border:0;background:none;padding:0;color:var(--deep);cursor:pointer;min-height:32px}.pl-fact-link:after{content:'↗';font-size:15px}
.pl-copy details{font-size:12px;color:var(--mid);line-height:1.7;margin:16px 0 0}.pl-copy summary{cursor:pointer;color:var(--deep);padding:5px 0;list-style:none;display:inline-block}.pl-copy summary:after{content:' +';margin-left:8px}.pl-copy details[open] summary:after{content:' −'}.pl-copy details p{margin:8px 0}
.pl-slider-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--mid);gap:10px;margin:4px 0 9px}.pl-slider-label strong{font-weight:500;color:var(--deep);white-space:nowrap}.pl-copy input[type=range]{width:100%;height:20px;accent-color:var(--deep);cursor:ew-resize;margin:0 0 8px}
.pl-copy .btn{margin-top:5px;min-height:42px}.pl-copy .pl-short-note{font-size:10px;color:var(--mid);line-height:1.6;margin-top:12px}
.pl-copy.is-changing{animation:pl-copy-in .5s var(--ease) both}@keyframes pl-copy-in{from{opacity:0;transform:translateY(calc(-53% + 13px))}to{opacity:1;transform:translateY(-53%)}}
.pl-building-name{position:absolute;display:flex;align-items:start;gap:8px;transform:translate(-3.5px,-9.5px);pointer-events:none;z-index:2;white-space:nowrap;text-shadow:0 1px 12px #fff,0 0 6px #fff;opacity:0;transition:opacity .3s}
.pl-city[data-ready=true] .pl-building-name{opacity:1}.pl-building-name i{width:7px;height:7px;background:var(--deep);border-radius:50%;margin-top:6px;box-shadow:0 0 0 4px #f6f9fb88}.pl-building-name strong{font-size:13px;font-weight:500;color:var(--ink)}.pl-building-name span{display:block;font-size:10px;color:var(--mid);margin-top:2px}.pl-hover-name{position:absolute;left:0;top:0;pointer-events:none;font-size:11px;color:var(--ink);background:#f6f9fbe6;padding:4px 9px;border-radius:4px;opacity:0;white-space:nowrap;z-index:3}
.pl-scene-tools{position:absolute;left:max(4%,calc((100% - 1152px)/2));right:38%;bottom:112px;display:flex;justify-content:space-between;align-items:center;z-index:3;font-size:11px;color:var(--mid);gap:20px}
.pl-style-label{font-size:10px;color:var(--mid)}
.pl-orbit-tools{display:flex;align-items:center;gap:5px}.pl-orbit-tools button{border:0;background:transparent;cursor:pointer;font-size:20px;min-width:26px;min-height:32px;color:var(--deep);padding:0}.pl-orbit-tools #pl-reset{font-size:10px;min-width:36px;font-variant-numeric:tabular-nums}.pl-drag-hint{font-size:10px;margin-left:10px}
.pl-bottom{position:absolute;left:0;right:0;bottom:28px;display:flex;align-items:center;justify-content:space-between;z-index:5;gap:20px}
.pl-chapters{display:flex;gap:32px}.pl-chapters button{border:0;border-radius:0;background:none;color:var(--mid);cursor:pointer;padding:15px 0;font-size:13px;position:relative;min-height:44px}.pl-chapters button span{font-size:10px;margin-right:8px;opacity:.7}.pl-chapters button[aria-current=step]{color:var(--ink)}.pl-chapters button:after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--deep);transform:scaleX(0);transform-origin:left;transition:transform .35s}.pl-chapters button[aria-current=step]:after{transform:scaleX(1)}
.pl-motion{border:0;background:none;color:var(--mid);cursor:pointer;font-size:10px;padding:10px 0}.pl-scroll-progress{position:absolute;left:24px;right:24px;bottom:-8px;height:1px;background:var(--hair)}.pl-scroll-progress span{display:block;height:100%;width:0;background:var(--mid);transform-origin:left;transition:none}.pl-demo-note{position:absolute;bottom:8px;right:max(4%,calc((100% - 1152px)/2));font-size:9px;color:var(--mid);letter-spacing:.02em;pointer-events:none}
#pl-proposal{padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--canvas);color:var(--ink);width:calc(100% - 32px);max-width:820px;max-height:90svh;box-shadow:0 24px 100px #09132228}#pl-proposal::backdrop{background:#09132266;backdrop-filter:blur(5px)}.pl-dialog-toolbar{display:flex;align-items:center;gap:16px;padding:16px 25px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--canvas);z-index:2}.pl-dialog-toolbar>span{font-size:12px;color:var(--mid);margin-right:auto}.pl-dialog-toolbar #pl-close{font-size:24px;padding:0 7px;border:0;background:none;cursor:pointer;min-height:36px}#pl-proposal-content{padding:40px 50px}#pl-proposal-content .brand{margin-bottom:30px}#pl-proposal-content h2{font:700 40px/1.12 var(--font-accent);margin:20px 0}#pl-proposal-content h3{font:700 22px var(--font-accent);margin-top:28px}#pl-proposal-content p{font-size:13px;line-height:1.8;color:var(--mid)}.pl-proposal-kpis{display:flex;gap:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:25px 0}.pl-proposal-kpis strong{font:700 30px var(--font-accent);display:block}.pl-proposal-kpis span{font-size:11px;color:var(--mid)}.pl-proposal-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair);gap:15px;font-size:13px}.pl-proposal-row>span{color:var(--mid)}
@media(min-width:1600px){.pl-copy{width:360px;right:8%}.pl-copy h2{font-size:48px}.pl-copy .pl-description{font-size:15px}.pl-scene{width:82%;left:-5%}.pl-section-caption{left:7%}.pl-scene-tools{left:7%}.pl-bottom{max-width:calc(86% + 48px)}}
@media(max-width:1100px){.pl-copy{right:5%;width:280px}.pl-copy h2{font-size:34px}.pl-data strong{font-size:29px}.pl-scene{left:-13%;width:88%}.pl-scene-tools{right:37%}.pl-drag-hint{display:none}.pl-copy .pl-description{font-size:13px}}
@media(max-width:800px) and (min-width:601px){.pl-city .pl-stage{min-height:760px}.pl-copy{width:240px;right:4%}.pl-copy h2{font-size:31px}.pl-copy .pl-description{font-size:12px}.pl-scene{left:-18%;width:90%}.pl-chapters{gap:23px}.pl-data{gap:18px}.pl-data strong{font-size:26px}.pl-data span{font-size:10px}.pl-scene-tools{right:39%}.pl-section-caption{left:24px}.pl-section-caption>span+span{display:none}}
@media(max-width:600px){.city-story.pl-city{height:420svh}.pl-city .pl-stage{height:100svh;min-height:700px}.pl-section-caption{top:20px;left:20px;right:20px;justify-content:space-between;gap:15px}.pl-section-caption .eyebrow{font-size:9px}.pl-section-caption>span+span{font-size:9px}.pl-scene{top:35px;left:-7%;width:114%;bottom:auto;height:43%}.pl-building-name strong{font-size:11px}.pl-building-name span{font-size:9px}.pl-building-name i{width:5px;height:5px;margin-top:5px}.pl-copy{left:24px;right:24px;width:auto;top:48%;transform:none}.pl-copy .eyebrow{font-size:9px;margin-bottom:10px}.pl-copy h2{font-size:28px;max-width:100%;margin-bottom:10px;line-height:1.08}.pl-copy .pl-description{font-size:12px;line-height:1.6;margin-bottom:13px;max-width:100%}.pl-data{gap:30px;margin-bottom:10px}.pl-data strong{font-size:28px}.pl-data span{font-size:10px;margin-top:4px}.pl-copy details{display:none}.pl-copy .pl-short-note{display:none}.pl-copy .btn{min-height:36px;font-size:12px;margin-top:0}.pl-slider-label{font-size:10px;margin:0 0 3px}.pl-copy input[type=range]{height:14px;margin:0}.pl-scene-tools{top:43%;bottom:auto;left:24px;right:24px;font-size:10px}.pl-style-label{font-size:9px}.pl-orbit-tools button{font-size:19px;min-height:26px}.pl-orbit-tools #pl-reset{font-size:10px}.pl-bottom{bottom:23px;gap:8px;padding:0 24px}.pl-chapters{gap:0;justify-content:space-between;width:100%}.pl-chapters button{font-size:11px;min-height:40px;padding:12px 0}.pl-chapters button span{font-size:8px;margin-right:4px}.pl-motion{position:absolute;right:24px;bottom:46px;font-size:9px;padding:3px 0;min-height:20px}.pl-scroll-progress{left:24px;right:24px;bottom:-4px}.pl-demo-note{font-size:7px;bottom:5px;left:24px;right:auto}.pl-copy.is-changing{animation-name:pl-copy-mobile}@keyframes pl-copy-mobile{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}#pl-proposal-content{padding:26px}#pl-proposal-content h2{font-size:31px}.pl-dialog-toolbar{padding:12px 16px;gap:8px}.pl-dialog-toolbar>span{font-size:10px}.pl-proposal-kpis{gap:22px}.pl-proposal-kpis strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){.pl-city *, .pl-city *:before,.pl-city *:after{animation:none!important;transition:none!important}}
.pl-city.is-reduced *, .pl-city.is-reduced *:before,.pl-city.is-reduced *:after{animation:none!important;transition:none!important}

@media(min-width:601px){.pl-section-caption{top:106px}}
@media(max-width:600px){.pl-section-caption{display:none}}
.pl-copy .pl-short-note{display:none}

#market.pl-city{scroll-margin-top:0}

.pl-freeze .top{visibility:hidden!important;transition:none!important}
/* A separate, bounded column for the model guarantees a clear text area at every azimuth. */
.pl-scene{left:2%;width:62%;top:120px;bottom:140px;overflow:hidden}
.pl-copy{left:70%;right:5%;width:auto;max-width:370px;top:50%;transform:translateY(-48%)}
.pl-copy h2{font-size:clamp(30px,3vw,46px)}
.pl-copy .pl-description{max-width:34ch}
.pl-scene-tools{left:5%;right:39%;bottom:110px}
.pl-play{border:0;background:none;color:var(--deep);font:500 12px var(--font-base);cursor:pointer;padding:10px 0;min-height:42px;display:flex;align-items:center;gap:9px}
.pl-play:before{content:'▷';font-size:17px}.pl-play[aria-pressed=true]:before{content:'Ⅱ'}
.pl-copy.is-changing{animation:pl-copy-v3 .45s var(--ease) both}@keyframes pl-copy-v3{from{opacity:0;transform:translateY(calc(-48% + 10px))}to{opacity:1;transform:translateY(-48%)}}
.pl-scene canvas:focus-visible{outline:1px solid var(--soft);outline-offset:-8px}
@media(min-width:1600px){.pl-scene{left:2%;width:63%}.pl-copy{left:71%;right:7%;max-width:370px}.pl-copy h2{font-size:48px}}
@media(max-width:1100px) and (min-width:901px){.pl-scene{left:1%;width:61%}.pl-copy{left:66%;right:4%;width:auto}.pl-copy h2{font-size:34px}.pl-scene-tools{left:4%;right:40%}}
@media(max-width:900px){.pl-city .pl-stage{min-height:760px}.pl-scene{left:4%;width:92%;top:70px;bottom:auto;height:44%}.pl-copy{left:8%;right:8%;max-width:none;width:auto;top:53%;transform:none}.pl-copy h2{font-size:32px;margin-bottom:12px}.pl-copy .pl-description{max-width:65ch;font-size:13px;margin-bottom:15px}.pl-copy details{display:none}.pl-data{margin-bottom:12px;gap:38px}.pl-scene-tools{left:8%;right:8%;top:48%;bottom:auto}.pl-section-caption{left:8%;top:86px}.pl-section-caption>span+span{display:none}.pl-bottom{padding-inline:8%}.pl-chapters{gap:25px}.pl-copy.is-changing{animation:pl-copy-mobile .4s var(--ease) both}.pl-motion{font-size:9px}.pl-drag-hint{display:none}}
@media(max-width:600px){.pl-city .pl-stage{min-height:700px}.pl-scene{left:3%;width:94%;top:45px;height:37%}.pl-copy{left:24px;right:24px;top:48%;max-width:none;transform:none}.pl-copy h2{font-size:28px}.pl-copy .pl-description{font-size:12px;margin-bottom:12px}.pl-scene-tools{top:41%;left:24px;right:24px}.pl-play{font-size:10px;padding:4px 0;min-height:32px}.pl-play:before{font-size:14px}.pl-bottom{padding-inline:24px}.pl-chapters{gap:0}.pl-data{gap:28px}.pl-section-caption{display:none}.pl-data strong{font-size:28px}.pl-motion{position:absolute;right:24px;bottom:46px}}
@media(min-width:901px) and (max-aspect-ratio:1/1){.pl-scene{left:3%;width:94%;top:110px;height:43%;bottom:auto}.pl-copy{left:8%;right:8%;width:auto;max-width:none;top:56%;transform:none}.pl-copy h2{font-size:40px}.pl-copy .pl-description{max-width:62ch;font-size:15px}.pl-copy details{display:none}.pl-scene-tools{left:8%;right:8%;top:50%;bottom:auto}.pl-copy.is-changing{animation:pl-copy-mobile .4s var(--ease) both}}
.pl-demo-note a{color:inherit;text-underline-offset:2px;pointer-events:auto}
.pl-view-actions{display:flex;align-items:center;gap:22px}
.pl-detail{border:0;background:none;color:var(--deep);font:500 12px var(--font-base);cursor:pointer;padding:10px 0;min-height:42px}
.pl-detail[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
@media(max-width:1100px){.pl-view-actions{gap:14px}.pl-detail{font-size:11px}}
@media(max-width:600px){.pl-view-actions{gap:12px}.pl-detail{font-size:10px;min-height:32px;padding:4px 0}}

/* Atelier composition: let the miniature occupy its available editorial column. */
@media(min-width:1101px) and (min-aspect-ratio:1/1){.pl-scene{left:0;width:68%}}

/* Calm editorial proportion for the sculpted miniature. */
@media(min-width:1101px) and (min-aspect-ratio:1/1){.pl-copy h2{font-size:43px;line-height:1.08}.pl-copy .pl-description{font-size:14px;line-height:1.75}.pl-scene{left:0;width:68%}}
.pl-city[data-stage="0"] .pl-data strong{font-size:31px}

/* Three complete art directions share the Pocketlot typography and interaction model. */
.pl-style-switch{position:absolute;right:max(4%,calc((100% - 1152px)/2));top:35px;display:flex;gap:18px;z-index:8;font-size:11px;color:var(--mid)}
.pl-style-switch a{color:inherit;text-decoration:none;padding:4px 0 7px;border-bottom:1px solid transparent;white-space:nowrap}.pl-style-switch a[aria-current=page]{color:var(--deep);border-color:var(--deep)}.pl-style-switch a:hover{color:var(--deep)}
html[data-visual-style=atelier] .pl-atmosphere{background:radial-gradient(ellipse at 34% 58%,#ede4d3 0,transparent 62%)}
html[data-visual-style=mineral] .pl-atmosphere{background:radial-gradient(ellipse at 32% 55%,#eae6da 0,transparent 60%)}
html[data-visual-style=optical] .pl-atmosphere{background:radial-gradient(ellipse at 30% 55%,#dce8eb 0,transparent 64%)}
@media(max-width:900px){.pl-style-switch{top:60px;left:5%;right:auto;gap:22px}.pl-section-caption{top:25px}.pl-scene{top:58px}}

@media(max-width:600px){.pl-style-switch{top:18px;left:24px;right:24px;justify-content:center;gap:26px}.pl-scene{top:55px}.pl-style-switch a{padding-block:7px}}
/* Selected optical direction: a calm frame around a richer river district. */
.pl-style-switch{top:106px;gap:15px;font-size:10px;letter-spacing:.02em;right:5%}.pl-style-switch span+span{border-left:1px solid #b7ccd0;padding-left:15px}
html[data-visual-style=optical] .pl-atmosphere{background:radial-gradient(ellipse at 31% 53%,#dae8eb 0,transparent 64%)}
.pl-scene{top:140px}.pl-copy .pl-description{max-width:34ch}
@media(max-width:900px){.pl-style-switch{left:7%;right:7%;top:86px;justify-content:center}.pl-section-caption{display:none}.pl-scene{top:130px;height:34%}.pl-copy{top:53%}.pl-scene-tools{top:48%}}
