/* "Website as a city" page (/website-stadt/): domain form, holo-scanner loader, futuristic isometric SVG night city with HUD grade
   panel, HUD stats, typewriter city guide, text city map ("Stadtplan"), legend, share row, wall of recent cities.
   The city panel uses fixed colours so it reads the same in light and dark theme. */
.cty { --bg: #05070d; --ink-2: #0a1222; --ink-3: #101c34; --line-c: rgba(62, 240, 255, .22); --cream: #e6f3ff; --soft: #93a9c9;
  --cy: #3ef0ff; --mg: #ff3ea5; --am: #ffb454; --gr: #5ce8c8; --red: #ff3b5c; --mono: ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace; }
.cty .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cty-fun { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 4px; font: 700 13px var(--font-m); letter-spacing: .08em; text-transform: uppercase;
  color: #05070d; background: linear-gradient(135deg, #3ef0ff, #ff3ea5); }
.cty-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }

/* ---- form */
.cty-ask { margin: 22px 0 6px; max-width: 640px; }
.cty-label { display: block; margin: 0 0 8px; font: 600 15px var(--font-m); color: var(--muted); }
.cty-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cty-in { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45));
  background: var(--panel, transparent); color: var(--text); font: 500 17px var(--font-m); }
.cty-in::placeholder { color: var(--dim, #888); }
.cty-go { flex: 0 0 auto; min-height: 56px; padding: 0 28px; border: 1px solid #3ef0ff; border-radius: 10px; color: #e9fdff; font: 700 18px var(--font-b); cursor: pointer;
  background: linear-gradient(135deg, #0b2a44, #2a0d3a); box-shadow: 0 0 0 1px rgba(62, 240, 255, .25), 0 0 18px rgba(62, 240, 255, .35);
  animation: cty-glow 2.6s infinite; transition: transform .2s, filter .2s; }
.cty-go:hover { filter: brightness(1.2); transform: translateY(-2px); }
.cty-go[disabled] { opacity: .6; cursor: wait; animation: none; transform: none; }
.cty-demo { margin: 10px 0 0; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--line-2, rgba(127, 127, 127, .45));
  background: transparent; color: var(--muted); font: 500 14px var(--font-m); cursor: pointer; }
.cty-demo:hover { color: var(--text); border-style: solid; }
.cty-in:focus-visible, .cty-go:focus-visible, .cty-demo:focus-visible, .cty-share a:focus-visible, .cty-share button:focus-visible,
.ctw-list a:focus-visible, .cty-pr:focus-visible, .cty-pr-s a:focus-visible { outline: 3px solid #3ef0ff; outline-offset: 3px; }
.cty-msg { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.cty-msg:empty { display: none; }
.cty-msg.ok { color: var(--ok); font-weight: 600; }
.cty-msg.warn { color: var(--accent); font-weight: 500; }
@keyframes cty-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(62, 240, 255, .25), 0 0 12px rgba(62, 240, 255, .25); } 50% { box-shadow: 0 0 0 1px rgba(255, 62, 165, .4), 0 0 24px rgba(255, 62, 165, .4); } }

/* ---- loader: holo scanner */
.cyl { margin: 18px 0 8px; padding: 22px 16px 20px; border-radius: var(--radius); text-align: center; color: var(--cream);
  background: radial-gradient(520px 260px at 50% 40%, #0d2440, var(--bg) 72%); border: 1px solid var(--line-c); }
.cyl-scan { display: block; width: min(260px, 78%); height: auto; margin: 0 auto; }
.cyl-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: cyl-spin 6s linear infinite; }
.cyl-ring.r2 { animation-duration: 9s; animation-direction: reverse; }
.cyl-b { transform-box: fill-box; transform-origin: 50% 100%; animation: cyl-bar 1.8s ease-in-out infinite alternate; }
.cyl-b.b1 { animation-delay: -.4s; } .cyl-b.b2 { animation-delay: -.9s; } .cyl-b.b3 { animation-delay: -1.3s; }
.cyl-line { animation: cyl-sweep 2.4s ease-in-out infinite; }
.cyl-step { margin: 14px 0 0; font: 500 15px var(--mono); color: #bff8ff; min-height: 1.6em; transition: opacity .3s; }
.cyl-step.out { opacity: 0; }
@keyframes cyl-spin { to { transform: rotate(360deg); } }
@keyframes cyl-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes cyl-sweep { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(110px); opacity: 0; } }

/* ---- result panel */
.cty-r { margin: 22px 0 8px; padding: 18px clamp(10px, 3vw, 26px) 22px; border-radius: var(--radius); color: var(--cream);
  background: radial-gradient(900px 420px at 50% 0, #0c1d38, var(--bg) 72%); border: 1px solid var(--line-c); scroll-margin-top: 80px; }
.cty-head { margin: 0 0 12px; }
.cty-title { margin: 0; font: 700 clamp(22px, 3.4vw, 32px)/1.15 var(--font-d, var(--font-b)); color: #fff; overflow-wrap: anywhere; }
.cty-meta { margin: 4px 0 0; font: 500 13px var(--mono); color: var(--soft); overflow-wrap: anywhere; }

.cty-stage { position: relative; border-radius: 12px; overflow: hidden; background: #05070d;
  box-shadow: inset 0 0 0 1px rgba(62, 240, 255, .25), 0 0 30px rgba(62, 240, 255, .08); }
.cty-svg svg { display: block; width: 100%; height: auto; }
.cty-city text { font-family: var(--mono); }

/* HUD tooltip for links */
.cty-tip { position: absolute; left: 50%; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 12px; transform: translate(-50%, 6px);
  font: 700 13px var(--mono); color: #e9fdff; background: rgba(5, 9, 18, .9); border: 1px solid #3ef0ff; border-radius: 3px;
  box-shadow: 0 0 14px rgba(62, 240, 255, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  opacity: 0; transition: opacity .15s, transform .15s; }
.cty-tip.on { opacity: 1; transform: translate(-50%, 0); }

/* links in the city (overlays never catch the pointer) */
.cty-domeg, .cty-labels, .cty-sky, .cty-grid, .cty-bridges, .cty-rings, .cty-scan, .cty-ant, .cty-tls, .cty-emit { pointer-events: none; }
.cty-link { cursor: pointer; outline: none; }
.cty-link .cty-top, .cty-link .cty-hex { transition: stroke-width .15s, fill-opacity .15s; }
.cty-link:hover .cty-top, .cty-link:focus-visible .cty-top { stroke-width: 2.4; fill: #1d4a7a; }
.cty-link:hover .cty-hex, .cty-link:focus-visible .cty-hex { stroke-width: 3; fill-opacity: .2; }
.cty-link:focus-visible .cty-hex { stroke: #ffffff; stroke-dasharray: 5 3; }
.cty-sub:focus-visible .cty-top { stroke: #ffffff; }
.cty-home:hover .cty-top, .cty-home:focus-visible .cty-top { stroke: #ffffff; }
.has-hot .cty-d:not(.hot) > * { opacity: .28; transition: opacity .2s; }
.cty-lbl.lbl-x { display: none; }
.cty-lbl.lbl-x.show { display: inline; }
.cty-d.hot .cty-hex { fill-opacity: .18; stroke-width: 2.6; }

/* continuous life */
.cty-pk { stroke-dasharray: 2 22; animation: cty-flow 1.4s linear infinite; }
.cty-pk.v-fast { animation-duration: .5s; }
.cty-pk.v-mid { animation-duration: 1.4s; }
.cty-pk.v-jam { stroke-dasharray: 5 5; animation: cty-flow10 6s linear infinite, cty-blink 1s steps(1) infinite; }
.cty-star { animation: cty-twinkle 3s ease-in-out infinite; }
.cty-star.t1 { animation-delay: -1s; animation-duration: 2.4s; } .cty-star.t2 { animation-delay: -2s; animation-duration: 3.8s; }
.cty-streak { animation: cty-streak 22s linear infinite; }
.cty-streak.k1 { animation-duration: 31s; animation-delay: -12s; } .cty-streak.k2 { animation-duration: 27s; animation-delay: -20s; }
.cty-beacon { transform-box: fill-box; transform-origin: 50% 50%; animation: cty-beacon 2s ease-out infinite; }
.cty-pulse { animation: cty-pulse 3.2s ease-in-out infinite; }
.cty-flick { animation: cty-flick 1.3s steps(1) infinite; }
.cty-blink { animation: cty-blink 1.8s steps(1) infinite; }
.cty-win { opacity: .55; }
.cty-win.bl0 { animation: cty-win 3.1s steps(1) infinite; } .cty-win.bl1 { animation: cty-win 4.3s steps(1) -1s infinite; }
.cty-win.bl2 { animation: cty-win 5.2s steps(1) -2s infinite; } .cty-win.bl3 { animation: cty-win 3.7s steps(1) -3s infinite; }
.cty-ring { animation: cty-flow20 8s linear infinite; } .cty-ring.r1 { animation-direction: reverse; animation-duration: 11s; }
.cty-sig { animation: cty-sig 2s ease-out infinite; } .cty-sig.s1 { animation-delay: .3s; } .cty-sig.s2 { animation-delay: .6s; }
.cty-dome.breach { animation: cty-flick 2.2s steps(1) infinite; }
.cty-lbl.jam { animation: cty-jam 1.2s steps(1) infinite; }
@keyframes cty-jam { 50% { opacity: .6; } }
.cty-stage.paused * { animation-play-state: paused !important; }
@keyframes cty-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes cty-flow10 { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes cty-flow20 { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes cty-twinkle { 50% { opacity: .15; } }
@keyframes cty-streak { 0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; } 40% { transform: translate(1040px, -160px); opacity: 0; } 100% { transform: translate(1040px, -160px); opacity: 0; } }
@keyframes cty-beacon { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes cty-pulse { 50% { opacity: .45; } }
@keyframes cty-flick { 0% { opacity: 1; } 10% { opacity: .2; } 14% { opacity: 1; } 52% { opacity: .5; } 56% { opacity: 1; } }
@keyframes cty-blink { 50% { opacity: .2; } }
@keyframes cty-win { 0% { opacity: .55; } 40% { opacity: 1; } 70% { opacity: .2; } }
@keyframes cty-sig { from { opacity: 1; } to { opacity: .1; } }

/* intro: grid → spire → bridges → districts one by one → dome closes */
.intro .cty-grid { animation: cty-in .9s ease-out both; }
.intro .cty-scan { transform-box: fill-box; transform-origin: 50% 50%; animation: cty-scanr 1.4s ease-out both; }
.intro .cty-rings { animation: cty-in .6s .9s both; }
.intro .cty-spire { transform-box: fill-box; transform-origin: 50% 100%; animation: cty-rise .9s .5s cubic-bezier(.2, .9, .3, 1.15) both; }
.intro .cty-beam { stroke-dasharray: 1; animation: cty-draw .7s 1.3s ease-out both; }
.intro .cty-br > polygon { animation: cty-in .5s 1.4s both; }
.intro .cty-pkg { animation: cty-in .4s 2s both; }
.intro .cty-d { animation: cty-mat .7s both; }
.intro .cty-d.d0 { animation-delay: 1.9s; } .intro .cty-d.d1 { animation-delay: 2.08s; } .intro .cty-d.d2 { animation-delay: 2.26s; }
.intro .cty-d.d3 { animation-delay: 2.44s; } .intro .cty-d.d4 { animation-delay: 2.62s; } .intro .cty-d.d5 { animation-delay: 2.8s; }
.intro .cty-d.d6 { animation-delay: 2.98s; } .intro .cty-d.d7 { animation-delay: 3.16s; } .intro .cty-d.d8 { animation-delay: 3.34s; }
.intro .cty-d.d9 { animation-delay: 3.52s; }
.intro .cty-ant, .intro .cty-tls { animation: cty-in .6s 2.2s both; }
.intro .cty-emit { animation: cty-in .5s 3.6s both; }
.intro .cty-dome { animation: cty-dome .7s both; }
.intro .cty-dome.s0 { animation-delay: 3.9s; } .intro .cty-dome.s1 { animation-delay: 4s; } .intro .cty-dome.s2 { animation-delay: 4.1s; }
.intro .cty-dome.s3 { animation-delay: 4.2s; } .intro .cty-dome.s4 { animation-delay: 4.3s; } .intro .cty-dome.s5 { animation-delay: 4.4s; }
.intro .cty-dome.breach { animation: cty-dome .7s 4.2s both, cty-flick 2.2s steps(1) 5s infinite; }
.intro .cty-labels { animation: cty-in .6s 4.4s both; }
@keyframes cty-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cty-scanr { from { transform: scale(.2); opacity: 1; } to { transform: scale(14); opacity: 0; } }
@keyframes cty-rise { from { transform: scaleY(.02); opacity: 0; } 30% { opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes cty-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cty-mat { 0% { opacity: 0; transform: translateY(-16px); } 35% { opacity: .8; } 50% { opacity: .25; } 65% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cty-dome { from { opacity: 0; } to { opacity: 1; } }

/* HUD grade panel */
.cty-stamp { position: absolute; top: clamp(8px, 2vw, 16px); left: clamp(8px, 2vw, 16px); display: grid; place-items: center; align-content: center;
  width: clamp(62px, 14vw, 112px); aspect-ratio: 1; color: var(--c, #fff); border: 1px solid var(--c, #fff);
  background: rgba(5, 9, 18, .78); box-shadow: 0 0 16px color-mix(in srgb, var(--c, #fff) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--c, #fff) 25%, transparent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); pointer-events: none; }
.cty-stamp b { font: 800 clamp(30px, 7.5vw, 60px)/.95 var(--mono); text-shadow: 0 0 14px var(--c, #fff); }
.cty-stamp-l, .cty-stamp-s { font: 700 clamp(8px, 1.4vw, 11px) var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.cty-stamp.hit { animation: cty-hud .6s steps(6) 4.6s both; }
@keyframes cty-hud { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .2; } 60%, 100% { opacity: 1; } }
.g-a { --c: #5ce8c8; } .g-b { --c: #3ef0ff; } .g-c { --c: #ffb454; } .g-d { --c: #ff8a3d; } .g-e, .g-f { --c: #ff3b5c; } .g-x { --c: #93a9c9; }

/* HUD stats */
.cty-stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cty-stats li { position: relative; padding: 8px 12px; background: rgba(10, 18, 34, .9); border: 1px solid var(--line-c); border-left: 2px solid var(--cy); min-width: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.cty-stats li:nth-child(4n+2) { border-left-color: var(--mg); } .cty-stats li:nth-child(4n+3) { border-left-color: var(--am); } .cty-stats li:nth-child(4n) { border-left-color: var(--gr); }
.cty-stats span { display: block; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.cty-stats b { display: block; margin-top: 2px; font: 700 14px var(--mono); color: #fff; overflow-wrap: anywhere; }

/* guide */
.cty-guide { margin: 16px 0 0; padding: 14px 18px 16px; background: rgba(10, 18, 34, .9); color: #d9ecff; border: 1px solid rgba(255, 62, 165, .45);
  box-shadow: 0 0 18px rgba(255, 62, 165, .12); }
.cty-guide h3 { margin: 0 0 6px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mg); }
.cty-guide-t { margin: 0; min-height: 3em; font: 400 clamp(15px, 2vw, 17px)/1.6 var(--mono); white-space: pre-line; }
.cty-caret { color: var(--cy); animation: cty-blink .8s steps(1) infinite; }

/* city map (text) + legend */
.cty-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
@media (min-width: 900px) { .cty-info { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cty-leg-h { margin: 22px 0 10px; font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); }
.cty-plan-meta { margin: 0 0 10px; font: 600 12.5px var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.cty-plan-na { margin: 0; padding: 12px 14px; font: 600 14px var(--mono); color: var(--am); border: 1px dashed rgba(255, 180, 84, .55); }
.cty-plan-na span { display: block; margin-top: 4px; font: 400 13px/1.5 var(--font-b); color: var(--soft); }
.cty-plan-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cty-pr { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-rows: auto 6px; gap: 4px 8px; align-items: center; padding: 7px 10px;
  background: rgba(10, 18, 34, .9); border: 1px solid var(--line-c); color: var(--cream); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.cty-pr:hover, .cty-pr.hot { border-color: var(--cy); box-shadow: 0 0 12px rgba(62, 240, 255, .3); }
.cty-pr-dot { width: 12px; height: 12px; }
.cty-pr-p { font: 700 13.5px var(--mono); overflow-wrap: anywhere; }
.cty-pr-n { font: 700 13.5px var(--mono); color: #fff; }
.cty-pr-bar { grid-column: 1 / -1; width: 100%; height: 6px; }
.cty-pr-s { margin: 3px 0 0 20px; font: 500 12px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.cty-pr-s a { color: var(--soft); text-decoration: underline; text-decoration-color: rgba(62, 240, 255, .4); }
.cty-pr-s a:hover { color: var(--cy); }
.cty-leg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.cty-leg li { display: flex; gap: 12px; padding: 10px 12px; background: rgba(10, 18, 34, .9); border: 1px solid var(--line-c); min-width: 0; }
.cty-leg svg { flex: 0 0 40px; width: 40px; height: 36px; }
.cty-leg div { min-width: 0; }
.cty-leg b { display: block; font: 700 14px var(--font-b); color: #fff; }
.cty-lv { display: block; margin: 2px 0 0; font: 600 12px var(--mono); color: var(--gr); overflow-wrap: anywhere; }
.cty-lv:empty { display: none; }
.cty-leg p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.cty-leg li.click { border-color: rgba(255, 62, 165, .5); }

/* share */
.cty-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.cty-share a, .cty-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 6px; font: 600 14px var(--font-b);
  color: var(--cream); background: rgba(62, 240, 255, .06); border: 1px solid rgba(62, 240, 255, .45); text-decoration: none; cursor: pointer; }
.cty-share a:hover, .cty-share button:hover { background: rgba(62, 240, 255, .16); }
.cty-share .cty-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.cty-clip { position: fixed; opacity: 0; left: 0; top: 0; }

/* ---- wall */
.ctw { margin-top: 36px; }
.ctw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ctw-list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 8px; text-decoration: none;
  background: #0a1222; color: #e6f3ff; border: 1px solid rgba(62, 240, 255, .22); transition: border-color .2s, transform .2s, box-shadow .2s; }
.ctw-list a:hover, .ctw-list a.cur { border-color: #3ef0ff; box-shadow: 0 0 14px rgba(62, 240, 255, .25); transform: translateY(-2px); }
.ctw-g { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--c); color: var(--c); background: rgba(5, 9, 18, .8);
  font: 800 22px ui-monospace, Menlo, monospace; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.ctw-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctw-t { font: 700 15px/1.3 var(--font-b); overflow-wrap: anywhere; }
.ctw-d { font: 12px ui-monospace, Menlo, monospace; color: #93a9c9; overflow-wrap: anywhere; }

/* ---- how it works */
.cth { margin-top: 40px; }
.cth-steps { margin: 14px 0 18px; padding-left: 1.3em; }
.cth-steps li { margin: 0 0 10px; }
.cth-steps b { display: block; }
.cth-steps span { color: var(--muted); }

@media (max-width: 560px) {
  .cty-go { flex: 1 1 100%; }
  .cty-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cty-tip { font-size: 12px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cty-go, .cyl-ring, .cyl-b, .cyl-line, .cty-caret, .cty-stamp.hit, .cty *, .cty *::before { animation: none !important; }
  .cyl-step, .cty-tip { transition: none; }
  .cty-pk { stroke-dasharray: 2 22; }
}