@a2f0/skyline 0.2.17 → 0.2.19

package/lib/models/blue-cross-geographic.js

@@ -38,6 +38,7 @@ const messageTopFloors = zones.map(([, , count], zone) => h.floors.slice(0, zone
     + Math.floor((count + 5) / 2) - 1).reverse().slice(0, 3);
 export const blueCrossFloors = [...zones.flatMap(([from, to, count]) => Array.from({ length: count }, (_, i) => from + (to - from) * i / count)), h.occupied];
 const spandrelBelow = 0.3, spandrelAbove = 0.9;
+const southInfillFront = 0.52, emblemClearance = 0.1;
 const color = (hex) => new THREE.Color(hex);
 const glassTones = [0x414141, 0x464646, 0x3c3c3c, 0x4a4a4a].map(color);
 const litGlass = color(0x8a8a8a), dimGlass = color(0x5c5c5c);
@@ -81,6 +82,9 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     const wall = kit.batch("Blue Cross · glass, spandrels and bands", kit.material(0xffffff, { vertexColors: true }));
     const mullions = kit.batch("Blue Cross · mullions", kit.material(0x2c2c2c));
     const bars = kit.batch("Blue Cross · band columns and emblems", kit.material(0xb4b4b4));
+    const infill = kit.batch("Blue Cross · south band infill", kit.material(0xffffff, { vertexColors: true }));
+    const transoms = kit.batch("Blue Cross · south transoms", kit.material(0xb4b4b4));
+    const aluminium = color(0xb4b4b4);
     const windows = [];
     let windowColumns = 0;
     const outline = (way) => orient(polygonOf(projectPlan(record.parts.find((part) => part.way === way).coordinates)));
@@ -197,20 +201,22 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
         skin(bay, h.lobbyTop, middle[0], i + 1, (run) => !lies(run, block));
         skin(bay, middle[1], h.wings, i + 1, (run) => !lies(run, block));
     });
-    // An emblem: a plate standing 7 to 30 cm off the screen, cut to an outline given across and
+    // An emblem: a plate standing ahead of the screen infill, cut to an outline given across and
     // up from its centre. Its faces fan from the centre, which sees the whole outline, and its
     // sides follow the outline's edges.
     const emblem = (centre, t, n, y, shape) => {
+        // The corrected screen panels stand ahead of the old backing plane.
         const point = ([u, v], depth) => [centre[0] + t[0] * u + n[0] * depth, y + v, centre[1] + t[1] * u + n[1] * depth];
+        const backDepth = southInfillFront + emblemClearance, frontDepth = backDepth + 0.23;
         const out = [n[0], 0, n[1]], back = [-n[0], 0, -n[1]];
         shape.forEach((p, i) => {
             const q = shape[(i + 1) % shape.length];
-            kit.triangle(bars, [point([0, 0], 0.3), point(p, 0.3), point(q, 0.3)], [out, out, out]);
-            kit.triangle(bars, [point([0, 0], 0.07), point(q, 0.07), point(p, 0.07)], [back, back, back]);
+            kit.triangle(bars, [point([0, 0], frontDepth), point(p, frontDepth), point(q, frontDepth)], [out, out, out]);
+            kit.triangle(bars, [point([0, 0], backDepth), point(q, backDepth), point(p, backDepth)], [back, back, back]);
             // The edge's side faces away from the centre.
             const sign = Math.sign((q[1] - p[1]) * (p[0] + q[0]) - (q[0] - p[0]) * (p[1] + q[1])), length = Math.hypot(q[0] - p[0], q[1] - p[1]);
             const [across, up] = [sign * (q[1] - p[1]) / length, -sign * (q[0] - p[0]) / length];
-            kit.quad(bars, [point(p, 0.07), point(q, 0.07), point(q, 0.3), point(p, 0.3)], [[t[0] * across, up, t[1] * across]]);
+            kit.quad(bars, [point(p, backDepth), point(q, backDepth), point(q, frontDepth), point(p, frontDepth)], [[t[0] * across, up, t[1] * across]]);
         });
     };
     // The company's emblems, 4.2 m tall: a cross, its arms a third of its span, and a shield,
@@ -232,9 +238,54 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
             for (const [lo, hi] of [...h.bands, [h.roof + 0.4, h.top - 0.3]])
                 kit.box(bars, at((i + 0.5) * pitch), n, 0.45, 0.07, 0.4, lo + 0.1, hi - 0.1);
         }
-        // The south face runs west to east; the emblems stand in its first two bays.
-        if (n[1] > 0.9)
+        if (n[1] > 0.9) {
+            // FID-BCBS-002: the 2010 south elevation has eight narrow column slots,
+            // with curtain-wall panels between them, not an uninterrupted dark band.
+            // Restrict this reconstruction to the photographed face: the north atrium
+            // has a different structural rhythm. Keep the mapped chain's small bends.
+            const panel = (target, s0, s1, levels, columns, back, front, paint, sides) => {
+                const k0 = chain.starts.findLastIndex((s) => s <= s0);
+                const k1 = chain.starts.findLastIndex((s) => s < s1);
+                chainSkin(kit, target, plan, chain, k0, k1, s0, s1, columns, levels, back, front, paint, sides);
+            };
+            // Two, three and two glazed rows in the mechanical bands; nine shallow
+            // courses in the crown. The 1.9 m slots and thin framing are photo ratios,
+            // not surveyed dimensions (docs/blue-cross-reference.md).
+            const bands = [
+                ...h.bands.map(([lo, hi], i) => [lo, hi, i === 1 ? 3 : 2, false]),
+                [h.roof, h.top, 9, true],
+            ];
+            for (const [lo, hi, count, crown] of bands) {
+                const levels = [lo + 0.02], paints = [];
+                const append = (height, paint) => { levels.push(height); paints.push(paint); };
+                append(lo + 0.18, aluminium);
+                for (let row = 1; row < count; row += 1) {
+                    const y = lo + (hi - lo) * row / count;
+                    append(y - (crown ? 0.08 : 0.55), crown ? screen : glassTones[1]);
+                    if (!crown) {
+                        append(y - 0.4, aluminium);
+                        append(y + 0.4, spandrel);
+                    }
+                    append(y + (crown ? 0.08 : 0.55), aluminium);
+                }
+                append(hi - 0.18, crown ? screen : glassTones[1]);
+                append(hi - 0.02, aluminium);
+                for (let bay = 0; bay <= 8; bay += 1) {
+                    const s0 = bay === 0 ? 0.02 : (bay - 0.5) * pitch + 0.95;
+                    const s1 = bay === 8 ? chain.length - 0.02 : (bay + 0.5) * pitch - 0.95;
+                    panel(infill, s0, s1, levels, [s0, s0 + 0.12, s1 - 0.12, s1], 0.2, southInfillFront, (cell, row) => cell === 1 || cell === 3 ? aluminium : paints[row], aluminium);
+                }
+            }
+            // Pale rails frame the office ribbons. They sit just ahead of the vertical
+            // mullions and never cross the exposed column slots or celebration panes.
+            for (const row of rows.filter(({ kind }) => kind === "glass")) {
+                for (const [lo, hi] of [[row.lo - 0.18, row.lo], [row.hi, row.hi + 0.18]]) {
+                    panel(transoms, 0.02, chain.length - 0.02, [lo, hi], [], 0.17, 0.22, () => aluminium, aluminium);
+                }
+            }
+            // The south face runs west to east; the emblems stand in its first two bays.
             [cross, shield].forEach((shape, i) => emblem(at((i + 1) * pitch), t, n, h.roof + 6.7, shape));
+        }
     });
     const model = kit.finish({ height: h.top, outlines: [shell, mullions], opacity: 0.16 });
     const glass = model.building.getObjectByName(wall.name);

package/lib/models/colour-materials.js

@@ -113,10 +113,12 @@ export const colourMaterials = {
         "antenna mast": ["stainless"],
     },
     "building-blue-cross-blue-shield": {
-        shell: ["glass", { 0x3a3a3a: "neutral" }],
-        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
+        shell: ["glass", { 0x3a3a3a: "neutral", 0x383838: "opaque spandrel" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x383838: "opaque spandrel", 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
         mullions: ["dark metal"],
         "band columns and emblems": ["band lights"],
+        "south band infill": ["glass", { 0x383838: "opaque spandrel", 0x3e3e3e: "screen", 0xb4b4b4: "aluminium" }],
+        "south transoms": ["aluminium"],
     },
     // Blue-green glass, and the south face's white concrete frame.
     "building-340-on-the-park": {
@@ -271,7 +273,7 @@ export function batchOf(buildingId, meshName) {
 }
 // A grey's tone: the hex the model wrote it as, from its linear channel.
 export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
-// Historical comparisons below predate sky reflections and FID-KEM-002/003.
+// Historical comparisons below predate sky reflections, FID-KEM-002/003 and FID-BCBS-003.
 // The measured colours scale to the scene by this factor in linear light, so the skyline view's
 // faces show about the photograph's brightness under the day's lights. At 1.4 the skyline view's
 // 1600 x 900 render, its pixels chosen by each photograph sample's rule, reaches 0.97 (Two

package/lib/models/colour-palette.js

@@ -62,8 +62,14 @@ export const measuredColours = {
     // docs/blue-cross-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg and a close-up.
     "building-blue-cross-blue-shield": {
         ...glass(0x7d8992),
+        // FID-BCBS-003: the panorama mixes panes and opaque spandrels. Retain its
+        // measured hue provisionally for both, keeping their grey contrast and
+        // separate reflection masks through the shared glass swatch.
+        "opaque spandrel": "glass",
         screen: 0x334a60,
         "band lights": 0xb0bdcd,
+        // Inferred same pale metal as the columns; independent calibration is open.
+        aluminium: "band lights",
         "dark metal": null,
         neutral: null,
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
   "license": "UNLICENSED",
   "repository": {

package/site/models/blue-cross-geographic.js

@@ -38,6 +38,7 @@ const messageTopFloors = zones.map(([, , count], zone) => h.floors.slice(0, zone
     + Math.floor((count + 5) / 2) - 1).reverse().slice(0, 3);
 export const blueCrossFloors = [...zones.flatMap(([from, to, count]) => Array.from({ length: count }, (_, i) => from + (to - from) * i / count)), h.occupied];
 const spandrelBelow = 0.3, spandrelAbove = 0.9;
+const southInfillFront = 0.52, emblemClearance = 0.1;
 const color = (hex) => new THREE.Color(hex);
 const glassTones = [0x414141, 0x464646, 0x3c3c3c, 0x4a4a4a].map(color);
 const litGlass = color(0x8a8a8a), dimGlass = color(0x5c5c5c);
@@ -81,6 +82,9 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
     const wall = kit.batch("Blue Cross · glass, spandrels and bands", kit.material(0xffffff, { vertexColors: true }));
     const mullions = kit.batch("Blue Cross · mullions", kit.material(0x2c2c2c));
     const bars = kit.batch("Blue Cross · band columns and emblems", kit.material(0xb4b4b4));
+    const infill = kit.batch("Blue Cross · south band infill", kit.material(0xffffff, { vertexColors: true }));
+    const transoms = kit.batch("Blue Cross · south transoms", kit.material(0xb4b4b4));
+    const aluminium = color(0xb4b4b4);
     const windows = [];
     let windowColumns = 0;
     const outline = (way) => orient(polygonOf(projectPlan(record.parts.find((part) => part.way === way).coordinates)));
@@ -197,20 +201,22 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
         skin(bay, h.lobbyTop, middle[0], i + 1, (run) => !lies(run, block));
         skin(bay, middle[1], h.wings, i + 1, (run) => !lies(run, block));
     });
-    // An emblem: a plate standing 7 to 30 cm off the screen, cut to an outline given across and
+    // An emblem: a plate standing ahead of the screen infill, cut to an outline given across and
     // up from its centre. Its faces fan from the centre, which sees the whole outline, and its
     // sides follow the outline's edges.
     const emblem = (centre, t, n, y, shape) => {
+        // The corrected screen panels stand ahead of the old backing plane.
         const point = ([u, v], depth) => [centre[0] + t[0] * u + n[0] * depth, y + v, centre[1] + t[1] * u + n[1] * depth];
+        const backDepth = southInfillFront + emblemClearance, frontDepth = backDepth + 0.23;
         const out = [n[0], 0, n[1]], back = [-n[0], 0, -n[1]];
         shape.forEach((p, i) => {
             const q = shape[(i + 1) % shape.length];
-            kit.triangle(bars, [point([0, 0], 0.3), point(p, 0.3), point(q, 0.3)], [out, out, out]);
-            kit.triangle(bars, [point([0, 0], 0.07), point(q, 0.07), point(p, 0.07)], [back, back, back]);
+            kit.triangle(bars, [point([0, 0], frontDepth), point(p, frontDepth), point(q, frontDepth)], [out, out, out]);
+            kit.triangle(bars, [point([0, 0], backDepth), point(q, backDepth), point(p, backDepth)], [back, back, back]);
             // The edge's side faces away from the centre.
             const sign = Math.sign((q[1] - p[1]) * (p[0] + q[0]) - (q[0] - p[0]) * (p[1] + q[1])), length = Math.hypot(q[0] - p[0], q[1] - p[1]);
             const [across, up] = [sign * (q[1] - p[1]) / length, -sign * (q[0] - p[0]) / length];
-            kit.quad(bars, [point(p, 0.07), point(q, 0.07), point(q, 0.3), point(p, 0.3)], [[t[0] * across, up, t[1] * across]]);
+            kit.quad(bars, [point(p, backDepth), point(q, backDepth), point(q, frontDepth), point(p, frontDepth)], [[t[0] * across, up, t[1] * across]]);
         });
     };
     // The company's emblems, 4.2 m tall: a cross, its arms a third of its span, and a shield,
@@ -232,9 +238,54 @@ export function createBlueCrossGeographicBuilding(record, projectPlan, offset) {
             for (const [lo, hi] of [...h.bands, [h.roof + 0.4, h.top - 0.3]])
                 kit.box(bars, at((i + 0.5) * pitch), n, 0.45, 0.07, 0.4, lo + 0.1, hi - 0.1);
         }
-        // The south face runs west to east; the emblems stand in its first two bays.
-        if (n[1] > 0.9)
+        if (n[1] > 0.9) {
+            // FID-BCBS-002: the 2010 south elevation has eight narrow column slots,
+            // with curtain-wall panels between them, not an uninterrupted dark band.
+            // Restrict this reconstruction to the photographed face: the north atrium
+            // has a different structural rhythm. Keep the mapped chain's small bends.
+            const panel = (target, s0, s1, levels, columns, back, front, paint, sides) => {
+                const k0 = chain.starts.findLastIndex((s) => s <= s0);
+                const k1 = chain.starts.findLastIndex((s) => s < s1);
+                chainSkin(kit, target, plan, chain, k0, k1, s0, s1, columns, levels, back, front, paint, sides);
+            };
+            // Two, three and two glazed rows in the mechanical bands; nine shallow
+            // courses in the crown. The 1.9 m slots and thin framing are photo ratios,
+            // not surveyed dimensions (docs/blue-cross-reference.md).
+            const bands = [
+                ...h.bands.map(([lo, hi], i) => [lo, hi, i === 1 ? 3 : 2, false]),
+                [h.roof, h.top, 9, true],
+            ];
+            for (const [lo, hi, count, crown] of bands) {
+                const levels = [lo + 0.02], paints = [];
+                const append = (height, paint) => { levels.push(height); paints.push(paint); };
+                append(lo + 0.18, aluminium);
+                for (let row = 1; row < count; row += 1) {
+                    const y = lo + (hi - lo) * row / count;
+                    append(y - (crown ? 0.08 : 0.55), crown ? screen : glassTones[1]);
+                    if (!crown) {
+                        append(y - 0.4, aluminium);
+                        append(y + 0.4, spandrel);
+                    }
+                    append(y + (crown ? 0.08 : 0.55), aluminium);
+                }
+                append(hi - 0.18, crown ? screen : glassTones[1]);
+                append(hi - 0.02, aluminium);
+                for (let bay = 0; bay <= 8; bay += 1) {
+                    const s0 = bay === 0 ? 0.02 : (bay - 0.5) * pitch + 0.95;
+                    const s1 = bay === 8 ? chain.length - 0.02 : (bay + 0.5) * pitch - 0.95;
+                    panel(infill, s0, s1, levels, [s0, s0 + 0.12, s1 - 0.12, s1], 0.2, southInfillFront, (cell, row) => cell === 1 || cell === 3 ? aluminium : paints[row], aluminium);
+                }
+            }
+            // Pale rails frame the office ribbons. They sit just ahead of the vertical
+            // mullions and never cross the exposed column slots or celebration panes.
+            for (const row of rows.filter(({ kind }) => kind === "glass")) {
+                for (const [lo, hi] of [[row.lo - 0.18, row.lo], [row.hi, row.hi + 0.18]]) {
+                    panel(transoms, 0.02, chain.length - 0.02, [lo, hi], [], 0.17, 0.22, () => aluminium, aluminium);
+                }
+            }
+            // The south face runs west to east; the emblems stand in its first two bays.
             [cross, shield].forEach((shape, i) => emblem(at((i + 1) * pitch), t, n, h.roof + 6.7, shape));
+        }
     });
     const model = kit.finish({ height: h.top, outlines: [shell, mullions], opacity: 0.16 });
     const glass = model.building.getObjectByName(wall.name);

package/site/models/colour-materials.js

@@ -113,10 +113,12 @@ export const colourMaterials = {
         "antenna mast": ["stainless"],
     },
     "building-blue-cross-blue-shield": {
-        shell: ["glass", { 0x3a3a3a: "neutral" }],
-        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
+        shell: ["glass", { 0x3a3a3a: "neutral", 0x383838: "opaque spandrel" }],
+        "glass, spandrels and bands": ["glass", { ...windows(0x8a8a8a, 0x5c5c5c), 0x383838: "opaque spandrel", 0x2a2a2a: "neutral", 0x3e3e3e: "screen" }],
         mullions: ["dark metal"],
         "band columns and emblems": ["band lights"],
+        "south band infill": ["glass", { 0x383838: "opaque spandrel", 0x3e3e3e: "screen", 0xb4b4b4: "aluminium" }],
+        "south transoms": ["aluminium"],
     },
     // Blue-green glass, and the south face's white concrete frame.
     "building-340-on-the-park": {
@@ -271,7 +273,7 @@ export function batchOf(buildingId, meshName) {
 }
 // A grey's tone: the hex the model wrote it as, from its linear channel.
 export const toneOf = (grey) => new THREE.Color(grey, grey, grey).getHex();
-// Historical comparisons below predate sky reflections and FID-KEM-002/003.
+// Historical comparisons below predate sky reflections, FID-KEM-002/003 and FID-BCBS-003.
 // The measured colours scale to the scene by this factor in linear light, so the skyline view's
 // faces show about the photograph's brightness under the day's lights. At 1.4 the skyline view's
 // 1600 x 900 render, its pixels chosen by each photograph sample's rule, reaches 0.97 (Two

package/site/models/colour-palette.js

@@ -62,8 +62,14 @@ export const measuredColours = {
     // docs/blue-cross-reference.md, 2026-10-09 — Daytime colours from Chicago.jpg and a close-up.
     "building-blue-cross-blue-shield": {
         ...glass(0x7d8992),
+        // FID-BCBS-003: the panorama mixes panes and opaque spandrels. Retain its
+        // measured hue provisionally for both, keeping their grey contrast and
+        // separate reflection masks through the shared glass swatch.
+        "opaque spandrel": "glass",
         screen: 0x334a60,
         "band lights": 0xb0bdcd,
+        // Inferred same pale metal as the columns; independent calibration is open.
+        aluminium: "band lights",
         "dark metal": null,
         neutral: null,
     },

package/site/skyline-3d.html

@@ -16,7 +16,7 @@
         <span class="visually-hidden">Preparing the skyline…</span>
         <!-- skyline-loading:start -->
         <svg class="skyline-trace" viewBox="0 0 1000 390.01" aria-hidden="true" focusable="false">
-          <defs><path id="skyline-loading-outline" pathLength="1" d="M0 390.01 L24 390.01 L24 326.71 L36.78 320.28 L76.29 320.28 L78.85 321.63 L79.08 320.54 L87.68 320.54 L87.92 316.21 L133.24 316.74 L133.47 317.75 L133.94 317.75 L134.17 316.74 L164.38 316.74 L164.85 317.75 L165.08 321.6 L181.12 321.6 L181.35 329.03 L189.48 329.03 L190.41 330.18 L207.85 330.18 L208.08 328.36 L208.54 328.36 L209.01 331.14 L212.26 338.16 L212.49 334.77 L213.89 334.77 L214.12 344.27 L216.21 344.27 L216.45 348.52 L234.57 348.52 L234.81 318.86 L238.53 318.86 L238.76 308.7 L242.48 308.7 L242.71 280.86 L244.57 280.86 L244.8 273.62 L245.03 272.91 L245.73 272.91 L245.96 272.02 L249.68 272.02 L249.91 273.17 L251.54 273.17 L251.77 272.02 L253.87 272.02 L254.1 273.17 L255.26 272.91 L255.49 272.02 L257.58 272.02 L257.82 272.91 L258.75 272.91 L258.98 280.86 L260.84 280.86 L261.07 318.86 L261.3 316.21 L263.63 316.21 L263.86 318.86 L265.02 318.86 L265.25 316.21 L268.04 316.21 L268.28 333.8 L272.69 333.8 L272.92 321.07 L274.55 321.07 L274.78 314 L288.96 314 L289.19 317.54 L300.58 317.54 L300.81 310.9 L311.51 310.9 L311.74 229.87 L323.13 229.87 L323.36 222.27 L330.8 222.27 L331.03 219.97 L349.39 220.16 L349.62 229.87 L352.41 229.87 L352.64 249.49 L382.16 249.49 L382.39 383.11 L386.81 383.11 L387.04 262.54 L406.57 233.23 L407.26 233.23 L410.05 252.75 L410.52 252.78 L410.75 233.23 L411.21 233.23 L439.11 263.31 L439.34 313.74 L444.22 313.74 L444.45 202.79 L513.71 202.79 L513.95 228.1 L528.36 228.1 L528.59 76.89 L548.34 76.8 L548.58 67.61 L561.59 67.52 L562.29 16 L563.68 16 L564.61 67.52 L571.82 67.61 L572.05 83.08 L572.98 83.08 L573.21 152.98 L579.49 143.92 L580.88 121.96 L582.04 143.91 L595.53 163.38 L598.55 173.04 L598.78 176.62 L600.41 176.62 L600.64 180.12 L602.03 180.12 L602.27 183.62 L603.66 183.62 L603.89 187.12 L605.52 187.12 L605.75 336.98 L606.22 379.83 L608.77 379.83 L609.01 89.53 L622.72 89.53 L622.95 83.96 L641.78 83.96 L642.01 69.64 L642.71 69.64 L642.94 83.96 L661.77 83.96 L662 89.53 L675.25 89.53 L675.48 202.65 L675.94 189.66 L748.46 189.66 L748.69 202.65 L755.43 202.65 L755.66 208.92 L800.75 208.92 L801.22 295.71 L806.33 295.71 L806.56 284.84 L818.42 284.84 L818.65 282.28 L837.48 282.28 L837.71 284.84 L848.17 284.84 L848.4 291.4 L848.87 291.4 L849.1 295.71 L854.91 295.71 L855.14 266.9 L894.19 266.9 L894.42 390.01 L937.42 390.01 L937.65 306.26 L939.51 306.26 L939.74 290.76 L953.69 290.76 L953.92 306.26 L958.57 306.26 L958.8 295.48 L974.14 295.48 L974.37 306.26 L976 306.26 L976 390.01 L1000 390.01" /></defs>
+          <defs><path id="skyline-loading-outline" pathLength="1" d="M0 390.01 L24 390.01 L24 326.71 L36.78 320.28 L76.29 320.28 L78.85 321.63 L79.08 320.54 L87.68 320.54 L87.92 316.21 L133.24 316.74 L133.47 317.75 L133.94 317.75 L134.17 316.74 L164.38 316.74 L164.85 317.75 L165.08 321.6 L181.12 321.6 L181.35 329.03 L189.48 329.03 L190.41 330.18 L207.85 330.18 L208.08 328.36 L208.54 328.36 L209.01 331.14 L212.26 338.16 L212.49 334.77 L213.89 334.77 L214.12 344.27 L216.21 344.27 L216.45 348.52 L234.57 348.52 L234.81 318.86 L238.53 318.86 L238.76 308.7 L242.48 308.7 L242.71 280.86 L244.57 280.86 L244.8 273.62 L245.03 272.91 L245.73 272.91 L245.96 272.02 L249.68 272.02 L249.91 273.17 L251.54 273.17 L251.77 272.02 L253.87 272.02 L254.1 273.17 L255.26 272.91 L255.49 272.02 L257.58 272.02 L257.82 272.91 L258.75 272.91 L258.98 280.86 L260.84 280.86 L261.07 318.86 L261.3 316.21 L263.63 316.21 L263.86 318.86 L265.02 318.86 L265.25 316.21 L268.04 316.21 L268.28 333.8 L272.69 333.8 L272.92 321.07 L274.55 321.07 L274.78 314 L288.96 314 L289.19 317.54 L300.58 317.54 L300.81 310.9 L311.51 310.9 L311.74 229.87 L323.13 229.87 L323.36 222.27 L330.8 222.27 L331.03 219.97 L349.39 220.16 L349.62 229.87 L352.41 229.87 L352.64 249.49 L382.16 249.49 L382.39 383.11 L386.81 383.11 L387.04 262.54 L406.57 233.23 L407.26 233.23 L410.05 252.75 L410.52 252.78 L410.75 233.23 L411.21 233.23 L439.11 263.31 L439.34 313.74 L444.22 313.74 L444.45 202.79 L513.71 202.79 L513.95 228.1 L528.36 228.1 L528.59 76.89 L548.34 76.8 L548.58 67.61 L561.59 67.52 L562.29 16 L563.68 16 L564.61 67.52 L571.82 67.61 L572.05 83.08 L572.98 83.08 L573.21 152.98 L579.49 143.92 L580.88 121.96 L582.04 143.91 L595.53 163.38 L598.55 173.04 L598.78 176.62 L600.41 176.62 L600.64 180.12 L602.03 180.12 L602.27 183.62 L603.66 183.62 L603.89 187.12 L605.52 187.12 L605.75 336.98 L606.22 379.83 L608.77 379.83 L609.01 89.53 L622.72 89.53 L622.95 83.96 L641.78 83.96 L642.01 69.64 L642.71 69.64 L642.94 83.96 L661.77 83.96 L662 89.53 L675.25 89.53 L675.48 202.65 L675.71 189.68 L748.46 189.66 L748.69 202.65 L755.43 202.65 L755.66 208.92 L800.75 208.92 L801.22 295.71 L806.33 295.71 L806.56 284.84 L818.42 284.84 L818.65 282.28 L837.48 282.28 L837.71 284.84 L848.17 284.84 L848.4 291.4 L848.87 291.4 L849.1 295.71 L854.91 295.71 L855.14 266.9 L894.19 266.9 L894.42 390.01 L937.42 390.01 L937.65 306.26 L939.51 306.26 L939.74 290.76 L953.69 290.76 L953.92 306.26 L958.57 306.26 L958.8 295.48 L974.14 295.48 L974.37 306.26 L976 306.26 L976 390.01 L1000 390.01" /></defs>
           <use class="skyline-trace-rail" href="#skyline-loading-outline" />
           <use class="skyline-trace-line" href="#skyline-loading-outline" />
           <use class="skyline-trace-tip" href="#skyline-loading-outline" />