/* Variant: City — an isometric night city, one lit tower per service. Dark. */
:root {
  --bg: #0b0e22; --surface: #141836; --muted: #0f1230; --ink: #eef0ff; --ink-2: #9ca2c8; --line: #232852;
  --accent: #ffc457; --accent-ink: #1a1206; --accent-soft: #2e2716; --green-soft: #1a1f40; --amber-soft: #2e2716;
  --night: #141836; --night-2: #1c2148; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #eef0ff; --night-ink-2: #9ca2c8;
  --ui-bg: #1a1f42; --ui-line: #272d5a; --ui-fill: #343b70; --ui-fill-2: #20264e; --ui-strong: #eef0ff; --ui-accent: #ffc457; --ui-img: #2e2716;
  --ui-tint-a: #3a3220; --ui-tint-b: #2a2f60; --ui-tint-c: #4a2a40;
  color-scheme: dark;
}
.ct { position: relative; display: grid; place-items: center; height: clamp(22rem, 38vw, 30rem); overflow: hidden; border-radius: 28px; background: radial-gradient(60% 50% at 70% 20%, #2a2f66, #0b0e22 70%); box-shadow: inset 0 0 0 1px var(--line); }
.ct-moon { position: absolute; right: 12%; top: 10%; width: 3.5rem; aspect-ratio: 1; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 40px rgba(255, 244, 214, 0.6); }
.ct-iso { --u: clamp(3.2rem, 5vw, 4.4rem); position: relative; width: calc(var(--u) * 5); height: calc(var(--u) * 2); margin-top: 5rem; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-45deg); }
.ct-b { --h: 4; --c: #5b6cff; position: absolute; width: var(--u); height: var(--u); transform-style: preserve-3d; }
.ct-f { position: absolute; }
.ct-f--top { inset: 0; transform: translateZ(calc(var(--h) * var(--u) * 0.5)); background: color-mix(in srgb, var(--c) 70%, #ffffff); }
.ct-f--front { left: 0; bottom: 0; width: 100%; height: calc(var(--h) * var(--u) * 0.5); transform-origin: bottom; transform: rotateX(-90deg); background: var(--c); background-image: repeating-linear-gradient(to bottom, transparent 0 10px, rgba(255, 220, 140, 0.85) 10px 14px), repeating-linear-gradient(to right, var(--c) 0 6px, transparent 6px 14px); background-blend-mode: normal; }
.ct-f--side { right: 0; bottom: 0; width: calc(var(--h) * var(--u) * 0.5); height: 100%; transform-origin: right; transform: rotateY(90deg); background: color-mix(in srgb, var(--c) 70%, #000000); background-image: repeating-linear-gradient(to left, transparent 0 10px, rgba(255, 200, 120, 0.55) 10px 13px); }
.ct-lbl { display: none; position: absolute; left: 50%; bottom: 100%; transform: translateZ(calc(var(--h) * var(--u) * 0.5 + 6px)) rotateZ(45deg) rotateX(-58deg); transform-origin: bottom center; translate: -50% 0; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(11, 14, 34, 0.85); color: #ffffff; font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.ct-b--web { --h: 6; --c: #4b62e6; left: 0; top: 0; }
.ct-b--crm { --h: 9; --c: #7a4fe0; left: calc(var(--u) * 1.3); top: 0; }
.ct-b--doc { --h: 5; --c: #d9468a; left: calc(var(--u) * 2.6); top: 0; }
.ct-b--con { --h: 7; --c: #3a7ad9; left: calc(var(--u) * 0.6); top: calc(var(--u) * 1.3); }
.ct-b--coa { --h: 4; --c: #e0763a; left: calc(var(--u) * 2); top: calc(var(--u) * 1.3); }
.tile--dark { background: linear-gradient(160deg, #2a2f66, #141836 70%); }
.ct-legend { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 0.75rem; font-weight: 600; color: #d9dcf5; }
.ct-leg::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 3px; vertical-align: -0.05em; }
.ct-leg--web::before { background: #4b62e6; } .ct-leg--crm::before { background: #7a4fe0; } .ct-leg--doc::before { background: #d9468a; } .ct-leg--con::before { background: #3a7ad9; } .ct-leg--coa::before { background: #e0763a; }
.ct { height: clamp(24rem, 40vw, 32rem); }