:root{--pink:#ef006d;--ink:#211a25;--plum:#2b1435;--cyan:#14c9eb;--paper:#fff7fb}
.design-page{overflow-x:hidden;background:radial-gradient(circle at 90% 7%,rgba(239,0,109,.14),transparent 25%),radial-gradient(circle at 4% 24%,rgba(20,201,235,.12),transparent 29%),var(--paper)}.design-page::before{display:none}
.design-intro{width:min(100%,1240px);margin:auto;padding:clamp(48px,8vw,105px) clamp(20px,5vw,64px) clamp(52px,7vw,88px)}.design-intro h1{max-width:1030px;margin:0;font-size:clamp(54px,9vw,126px);font-weight:650;line-height:.87;letter-spacing:-.073em}.design-intro h1 em{display:block;color:var(--pink);font-style:normal}.design-intro-bottom{display:grid;grid-template-columns:1fr minmax(260px,.6fr);gap:clamp(28px,7vw,92px);align-items:end;margin-top:35px}.design-intro-bottom p{max-width:720px;margin:0;color:rgba(33,26,37,.68);font-size:clamp(16px,2vw,22px);line-height:1.6}.design-intro-bottom strong{position:relative;display:block;padding:20px 21px 20px 48px;border:1px solid rgba(33,26,37,.12);border-radius:18px;background:rgba(255,255,255,.7);box-shadow:0 20px 60px rgba(77,22,54,.08);font-size:13px;line-height:1.55}.design-intro-bottom i{position:absolute;left:21px;top:25px;width:10px;height:10px;border-radius:50%;background:#32d28a;box-shadow:0 0 0 6px rgba(50,210,138,.12)}
.city-shell{padding:clamp(55px,7vw,90px) max(18px,calc((100vw - 1080px)/2));background:#211522;color:#fff}.city-section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}.city-section-head span{display:block;margin-bottom:7px;color:#ff5fab;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.city-section-head h2{max-width:730px;margin:0;font-size:clamp(35px,5vw,66px);font-weight:600;line-height:.98;letter-spacing:-.055em}.city-replay{display:flex;align-items:center;gap:9px;padding:10px 0;border:0;border-bottom:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.72);font:700 9px Poppins,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}.city-replay b{font-size:17px;transition:transform .35s ease}.city-replay:hover b{transform:rotate(-180deg)}
.city-square{position:relative;isolation:isolate;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:clamp(22px,4vw,42px);background:linear-gradient(145deg,#ffd9ee 0%,#edb8dc 50%,#d9b4ee 100%);box-shadow:0 42px 120px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.5)}.city-square::after{content:"";position:absolute;z-index:20;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 90px rgba(67,18,75,.12)}.city-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%}.city-sky-glow{position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 21%,rgba(255,255,255,.5),transparent 22%),radial-gradient(circle at 19% 73%,rgba(239,0,109,.18),transparent 28%);mix-blend-mode:screen}
.city-building{position:absolute;z-index:5;padding:0;border:0;background:transparent;font-family:Poppins,sans-serif;cursor:pointer;opacity:0;transform:translate(-50%,-100%);transform-origin:center bottom}.city-ready .city-building{animation:city-marker-in .55s ease forwards;animation-delay:calc(var(--delay) + .45s)}.building-sign{position:absolute;z-index:3;left:50%;top:var(--sign-top);display:flex;align-items:center;gap:clamp(4px,.6vw,9px);width:max-content;max-width:150%;padding:clamp(5px,.8vw,10px) clamp(7px,1vw,13px);border:2px solid #ff3c96;border-radius:clamp(4px,.6vw,8px);background:linear-gradient(180deg,#32133e,#21102c);box-shadow:0 6px 0 rgba(105,24,86,.5),0 0 18px rgba(239,0,109,.28);color:#fff;text-align:left;text-transform:uppercase;transform:translate(-50%,-50%) rotate(-1deg);transition:transform .35s ease,box-shadow .35s ease}.building-sign b{color:#ff4ea3;font-size:clamp(6px,.85vw,12px);line-height:1}.building-sign strong{font-size:clamp(5.5px,.78vw,11px);line-height:1.08;letter-spacing:.035em;white-space:nowrap}
.city-building.is-active .building-sign{transform:translate(-50%,-58%) scale(1.06) rotate(0);box-shadow:0 6px 0 rgba(105,24,86,.5),0 0 28px rgba(239,0,109,.75)}
.building-1 .building-sign{left:62%;width:max-content;min-width:178%;max-width:none;justify-content:center;padding-inline:clamp(12px,1.55vw,20px)}.building-1 .building-sign strong{letter-spacing:0}
.building-2 .building-sign{width:max-content;min-width:178%;max-width:none;justify-content:center;padding-inline:clamp(10px,1.25vw,16px)}.building-2 .building-sign strong{letter-spacing:0}
.city-status{position:absolute;z-index:17;left:3%;top:3%;display:grid;gap:3px;padding:10px 13px;border:1px solid rgba(54,20,55,.12);border-radius:11px;background:rgba(255,245,251,.79);box-shadow:0 12px 32px rgba(63,18,60,.11);color:var(--ink);backdrop-filter:blur(13px)}.city-status span{color:rgba(33,26,37,.48);font-size:clamp(5px,.62vw,8px);font-weight:800;letter-spacing:.09em;text-transform:uppercase}.city-status strong{font-size:clamp(7px,.86vw,12px)}.city-soundless-tip{position:absolute;z-index:17;right:3%;top:3%;display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid rgba(255,255,255,.28);border-radius:99px;background:rgba(43,20,53,.78);color:#fff;font:700 clamp(6px,.7vw,9px) Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(10px)}.city-soundless-tip span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--pink);font-size:12px}
.stage-details{position:absolute;z-index:18;left:3%;right:3%;bottom:3%;height:17%;overflow:hidden;border:1px solid rgba(73,24,68,.15);border-radius:clamp(12px,2vw,22px);background:rgba(255,247,251,.78);box-shadow:0 18px 45px rgba(72,21,64,.14);color:var(--ink);backdrop-filter:blur(16px)}.stage-detail{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(10px,1.8vw,22px);padding:clamp(10px,2vw,23px) clamp(14px,2.6vw,30px);opacity:0;pointer-events:none;transform:translateX(12%);transition:opacity .42s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.stage-detail>b{display:grid;place-items:center;width:clamp(30px,5vw,54px);aspect-ratio:1;border-radius:50%;background:var(--pink);color:#fff;font-size:clamp(8px,1.1vw,13px)}.stage-detail h3{margin:0 0 4px;font-size:clamp(12px,1.65vw,21px);line-height:1.12}.stage-detail p{margin:0;color:rgba(33,26,37,.62);font-size:clamp(7px,.95vw,11px);line-height:1.45}.stage-detail.is-active{opacity:1;pointer-events:auto;transform:translateX(0)}.stage-progress{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(8px,1.2vw,14px);display:flex;gap:4px}.stage-progress i{width:clamp(8px,1.2vw,15px);height:2px;background:rgba(33,26,37,.18);transition:background .3s ease,transform .3s ease}.stage-progress i.is-active{background:var(--pink);transform:scaleX(1.35)}
.city-closing{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:34px}.city-closing p{margin:0;color:rgba(255,255,255,.57);font-size:clamp(16px,2vw,23px)}.city-closing p strong{color:#fff}.city-closing a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 25px;background:var(--pink);color:#fff;box-shadow:0 17px 44px rgba(239,0,109,.25);font-size:10px;font-weight:800;letter-spacing:.07em;text-decoration:none;text-transform:uppercase}.city-closing a span{font-size:20px}
@keyframes city-marker-in{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.design-intro-bottom{grid-template-columns:1fr}.city-section-head{align-items:flex-start;flex-direction:column}.city-closing{align-items:flex-start;flex-direction:column}.city-closing a{width:100%}.building-sign{border-width:1px;box-shadow:0 3px 0 rgba(105,24,86,.5),0 0 10px rgba(239,0,109,.25)}.city-status{padding:7px 9px}.stage-details{height:19%}.stage-detail{padding:9px 12px;gap:9px}.stage-detail p{padding-right:6px}}
@media(max-width:480px){.design-intro{padding-top:38px}.design-intro h1{font-size:clamp(50px,15vw,69px)}.city-shell{padding-left:10px;padding-right:10px}.city-section-head{padding:0 10px}.city-square{border-radius:19px}.city-status{left:2%;top:2%}.city-soundless-tip{display:none}.stage-details{left:2.5%;right:2.5%;bottom:2.5%;height:22%}.stage-detail h3{font-size:11.5px}.stage-detail p{padding-right:18px;font-size:8.2px;line-height:1.38}.city-closing{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.city-building{opacity:1;transform:translate(-50%,-100%)}.city-ready .city-building{animation:none}.building-sign,.stage-detail{transition:none}}