/* The existing demo runtime and access flow are retained, with the new CITY-AI art direction. */
:root{color-scheme:light;background:#f8f8f7}
body.cityai-demo{font-family:"DM Sans","Noto Sans KR",sans-serif!important;background:#111214;color:#f3f4f5;-webkit-font-smoothing:antialiased;letter-spacing:-.025em}
.cityai-demo #root{font-family:inherit}
.cityai-demo #root>div{background:#111214!important}
.cityai-demo #root>div>.absolute{display:none!important}
.cityai-demo #root>div:has(form){background:linear-gradient(90deg,#111214d9,#11121444),url('/assets/city-dimensions.webp') center/cover!important}
.cityai-demo #root>div:has(form) .max-w-md{max-width:480px;border-radius:12px;background:#191b1eea!important;border-color:#ffffff2e;box-shadow:0 20px 90px #0006!important}
.cityai-demo #root form{padding:30px}
.cityai-demo #root form input{border-radius:6px;font-size:16px;padding:15px 16px;border:1px solid #60656c;background:#ffffff08!important}
.cityai-demo #root form input:focus{outline:2px solid #b3d8f4;outline-offset:3px}
.cityai-demo #root form button{background:#f1f4f7!important;color:#191b1e!important;border:0;border-radius:40px;min-height:46px;padding-inline:25px}
.cityai-demo #root form a{border-radius:40px;padding-inline:22px}
.cityai-demo #root header{background:#101214f5!important;backdrop-filter:blur(20px);border:0!important;border-bottom:1px solid #30353c!important;color:#f2f4f7}
.cityai-demo #root header [class*="text-white"]{color:#bdc4ce!important}
.cityai-demo #root header img{height:32px}
.cityai-demo #root header button,.cityai-demo #root header a[class*="rounded"]{border:1px solid #48515b!important;background:transparent!important;color:#f2f4f7!important;border-radius:30px;font-size:13px;padding:9px 17px}
.cityai-demo #root header span[class*="tracking"]{font-size:11px;letter-spacing:.13em;font-weight:500}
.cityai-demo #root header>div{padding:22px clamp(24px,5.3vw,100px);max-width:1640px}
.cityai-demo #root main{max-width:1640px;padding:64px clamp(24px,5.3vw,100px) 80px}
.cityai-demo #root h1{font-size:clamp(30px,4vw,64px);letter-spacing:-.055em;line-height:1.2;font-weight:500;text-transform:none}
.cityai-demo #root h2{font-weight:500;letter-spacing:-.035em}
.cityai-demo #root [class*="tracking-"]{letter-spacing:.09em}
.cityai-demo #root [class*="text-white/40"],.cityai-demo #root [class*="text-white/45"]{color:#a4abb4!important}
.cityai-demo #root [class*="text-white/60"],.cityai-demo #root [class*="text-white/65"]{color:#b6bdc5!important}
.cityai-demo #root button.group{border-radius:9px;border:1px solid #434850;box-shadow:none!important;background:#1c1f23!important;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s}
.cityai-demo #root button.group:hover{transform:translateY(-5px);border-color:#a0afbd}
.cityai-demo #root button.group>.absolute:first-child{opacity:.85!important;filter:saturate(.7)}
.cityai-demo #root button.group>.absolute:nth-child(2){background:linear-gradient(180deg,#10121412,#101214a1)!important}
.cityai-demo #root button.group>.absolute.h-px{display:none}
.cityai-demo #root button.group>div.relative{min-height:350px}
.cityai-demo #root button.group>div.relative>div:first-child{padding:22px}
.cityai-demo #root button.group>div.relative>div:last-child{padding:18px}
.cityai-demo #root button.group div.rounded-2xl{background:#16191cef!important;border:1px solid #ffffff21;border-radius:7px;padding:20px;box-shadow:none!important;backdrop-filter:blur(20px)}
.cityai-demo #root button.group .text-xl{font-size:23px;font-weight:500;line-height:1.4;letter-spacing:-.045em;text-transform:none;word-break:keep-all}
.cityai-demo #root button.group .text-xs{font-size:13px;line-height:1.8;color:#b3bac3!important;letter-spacing:-.025em}
.cityai-demo #root button.group .text-sm{font-size:14px;letter-spacing:-.025em}
.cityai-demo #root main>.mt-8{margin-top:48px}
.cityai-demo #root main [class*="grid"]{gap:25px}
.cityai-demo #root section>div[class*="rounded-"]{border-radius:10px;background:#1a1c20!important;box-shadow:none!important}
.cityai-demo #root section h1{font-size:clamp(27px,2.5vw,40px)}
.cityai-demo #root section button,.cityai-demo #root section a[class*="rounded"]{border-radius:30px;font-size:13px}
.cityai-demo #root section [class*="bg-[#9fd8ff]"],.cityai-demo #root section [class*="bg-[#98f554]"]{background:#e0ebf3!important;color:#182028!important;border-color:#e0ebf3!important}
.cityai-demo #root section [class*="bg-[#091018]"]{background:#202329f5!important}
.cityai-demo #root section [class*="rounded-[22px]"]{border-radius:6px;background:#1b1e22!important;font-size:14px}
.cityai-demo #root a:focus-visible,.cityai-demo #root button:focus-visible{outline:2px solid #b3d8f4;outline-offset:5px}
@media(max-width:767px){.cityai-demo #root main{padding-top:35px;padding-bottom:45px}.cityai-demo #root header>div{padding-block:17px}.cityai-demo #root header img{height:28px}.cityai-demo #root header button,.cityai-demo #root header a[class*="rounded"]{font-size:12px;padding:8px 12px}.cityai-demo #root button.group>div.relative{min-height:330px}.cityai-demo #root main [class*="grid"]{gap:22px}.cityai-demo #root section [class*="min-h-[420px]"]{min-height:300px}.cityai-demo #root form{padding:25px}}
@media(prefers-reduced-motion:reduce){.cityai-demo *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@media not all and (prefers-color-scheme:dark){
  .cityai-demo #root button.group,.cityai-demo #root section{color:#f3f4f5;color-scheme:dark}
  body.cityai-demo,.cityai-demo #root>div{background:#f8f8f7!important;color:#18191b}
  .cityai-demo #root header{background:#f8f8f7f5!important;color:#18191b;border-bottom-color:#dedfdf!important}
  .cityai-demo #root header [class*="text-white"]{color:#4b4c4e!important}
  .cityai-demo #root header button,.cityai-demo #root header a[class*="rounded"]{color:#18191b!important;border-color:#c6c7c7!important}
  .cityai-demo #root main>[class*="text-white"],.cityai-demo #root main>div>[class*="text-white"]{color:#4b4c4e!important}
  .cityai-demo #root>div:has(form){background:linear-gradient(90deg,#f8f8f7dd,#f8f8f755),url('/assets/city-dimensions.webp') center/cover!important}
  .cityai-demo #root>div:has(form) .max-w-md{background:#fffffff2!important;color:#18191b;border-color:#dedfdf}
  .cityai-demo #root>div:has(form) .max-w-md [class*="text-white"]{color:#4b4c4e!important}
  .cityai-demo #root form input{background:#fff!important;color:#18191b;border-color:#8b919a}
  .cityai-demo #root form input::placeholder{color:#666a70}
  .cityai-demo #root form button{background:#182028!important;color:#fff!important}
  .cityai-demo #root form input:focus,.cityai-demo #root a:focus-visible,.cityai-demo #root button:focus-visible{outline-color:#357ca8}
}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;background:#101214}}