@tellegen/svelte 0.3.0 → 0.4.1

package/dist/colors.d.ts

@@ -1,4 +1,4 @@
-import type { DisplayMode } from './state.svelte.js';
+import type { BusSizing, DisplayMode } from './state.svelte.js';
 export type RGBA = [number, number, number, number];
 export interface SensitivityDomain {
     min: number;
@@ -10,6 +10,13 @@ export interface SensitivityDomain {
 }
 export declare const priceColor: (t: number) => RGBA;
 export declare const priceGradient: string;
+/** Demand colour for a fraction `t` of the demand domain, on a square-root
+ * scale: bus demand is heavy tailed (a few large cities, many small towns),
+ * and a linear scale would paint everything but the largest buses one hue. */
+export declare const demandColor: (t: number) => RGBA;
+/** The demand ramp as a CSS gradient whose stops sit where the square-root
+ * scale puts them, so a legend bar reads linearly from its low to high label. */
+export declare const demandGradient: string;
 /** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
  * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
@@ -20,6 +27,14 @@ export declare function priceDomain(values: number[]): {
     lo: number;
     hi: number;
 };
+/** Demand colour domain: zero to the 98th percentile, at least 1 MW. Zero
+ * anchors the scale so a bus without load reads as none; the percentile keeps
+ * one metropolis from washing out every other bus, and the few above it clamp
+ * to the top of the ramp. */
+export declare function demandDomain(values: number[]): {
+    lo: number;
+    hi: number;
+};
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
  * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
@@ -32,6 +47,24 @@ export declare const sensColor: (t: number) => RGBA;
 export declare const sensGradient: string;
 export declare const sensNeutral: RGBA;
 export declare const busNeutral: RGBA;
+/** Overlay colours that depend on the basemap's lightness: bus outlines,
+ * hover highlights, the selected outline, the "not yet solved" grey, and
+ * the `.pwd` substation marker. The selection blue is the same in both. */
+export interface MapPalette {
+    outline: RGBA;
+    /** The multiconductor view's bus outline, a shade stronger. */
+    outlineStrong: RGBA;
+    highlight: RGBA;
+    highlightSoft: RGBA;
+    selected: RGBA;
+    grey: RGBA;
+    greyLine: RGBA;
+    substation: RGBA;
+    substationLine: RGBA;
+    /** Fill of a neutral (non-phase) terminal in the multiconductor detail. */
+    neutral: RGBA;
+}
+export declare const MAP_PALETTE: Record<'light' | 'dark', MapPalette>;
 export declare function sensFlatColor(domain: Pick<SensitivityDomain, 'mean'>): RGBA;
 /** The fixed normalization for a slider drag: predicted nodal value change divides by
  * scale × maxAbsStep, so color intensity is linear in the step and saturates at
@@ -48,3 +81,24 @@ export declare function branchWidth(loading: number): number;
 /** Bus radius in px; area tracks max(load, gen) so big plants and big loads
  * both read at a glance. Shared by the map layers and the size legend. */
 export declare function busRadius(maxMw: number): number;
+/** Radius in px of every bus marker under `uniform` sizing, and the most a
+ * uniform marker grows to on the map. */
+export declare const UNIFORM_BUS_RADIUS = 4.5;
+/** The least a uniform marker shrinks to on the map, in px. */
+export declare const UNIFORM_BUS_MIN_RADIUS = 2;
+/** The ground radius of a uniform marker on the map, in metres. */
+export declare const UNIFORM_BUS_GROUND_RADIUS = 9000;
+/** Bus radius in px under a sizing choice: `power` scales with max(load, gen)
+ * through `busRadius`, `uniform` draws every bus alike. */
+export declare function busRadiusFor(sizing: BusSizing, maxMw: number): number;
+/** Radius settings for the map's bus markers under a sizing choice. `power`
+ * sizes in pixels through `busRadius`. `uniform` gives every bus one ground
+ * radius, drawn between `UNIFORM_BUS_MIN_RADIUS` and `UNIFORM_BUS_RADIUS`
+ * pixels, so a whole country reads as a mesh of dots with its lines showing
+ * and a closer view as distinct buses. */
+export declare function busMarkerRadius(sizing: BusSizing): {
+    radius: (maxMw: number) => number;
+    radiusUnits: 'meters' | 'pixels';
+    radiusMinPixels: number;
+    radiusMaxPixels: number;
+};

package/dist/colors.js

@@ -31,6 +31,24 @@ const PRICE_STOPS = [
 ];
 export const priceColor = (t) => ramp(PRICE_STOPS, t);
 export const priceGradient = cssGradient(PRICE_STOPS);
+/** Sequential demand ramp: the upper three quarters of viridis, slate blue
+ * through teal and green to yellow. Lightness rises monotonically, the dimmest
+ * stop still reads on a dark basemap, and the cool hues cannot be mistaken for
+ * the warm nodal value ramp. */
+const DEMAND_STOPS = [
+    [59, 82, 139, 235],
+    [44, 114, 142, 235],
+    [33, 145, 140, 240],
+    [94, 201, 98, 245],
+    [253, 231, 37, 250]
+];
+/** Demand colour for a fraction `t` of the demand domain, on a square-root
+ * scale: bus demand is heavy tailed (a few large cities, many small towns),
+ * and a linear scale would paint everything but the largest buses one hue. */
+export const demandColor = (t) => ramp(DEMAND_STOPS, Math.sqrt(Math.max(0, t)));
+/** The demand ramp as a CSS gradient whose stops sit where the square-root
+ * scale puts them, so a legend bar reads linearly from its low to high label. */
+export const demandGradient = `linear-gradient(90deg, ${DEMAND_STOPS.map((s, i) => `rgb(${s[0]} ${s[1]} ${s[2]}) ${((i / (DEMAND_STOPS.length - 1)) ** 2 * 100).toFixed(2)}%`).join(', ')})`;
 /** Trimmed nodal value color domain: 5th to 95th percentile, with a one-unit
  * minimum span. Nodal values are heavy tailed when one binding line pins a
  * handful of buses far from the pack) so min-max scaling compresses the pack
@@ -48,12 +66,25 @@ export function priceDomain(values) {
     const span = Math.max(hi - lo, 1);
     return { lo: mid - span / 2, hi: mid + span / 2 };
 }
+/** Demand colour domain: zero to the 98th percentile, at least 1 MW. Zero
+ * anchors the scale so a bus without load reads as none; the percentile keeps
+ * one metropolis from washing out every other bus, and the few above it clamp
+ * to the top of the ramp. */
+export function demandDomain(values) {
+    if (values.length === 0)
+        return { lo: 0, hi: 1 };
+    const sorted = [...values].sort((a, b) => a - b);
+    const hi = sorted[Math.min(sorted.length - 1, Math.floor(0.98 * sorted.length))];
+    return { lo: 0, hi: Math.max(hi, 1) };
+}
 /** Center a scalar display variable (bus voltage angle, |V|) on a symmetric domain
  * with a per-mode minimum span; nodal values keep their own robust quantile domain. Shared by
  * the control panel readout and the map color scale. */
 export function scalarDomain(mode, values) {
     if (mode === 'price')
         return priceDomain(values);
+    if (mode === 'demand')
+        return demandDomain(values);
     if (values.length === 0)
         return { lo: 0, hi: 1 };
     const { min: rawLo, max: rawHi } = extent(values);
@@ -78,6 +109,32 @@ export const sensColor = (t) => ramp(SENS_STOPS, (t + 1) / 2);
 export const sensGradient = cssGradient(SENS_STOPS);
 export const sensNeutral = SENS_STOPS[2];
 export const busNeutral = [180, 175, 165, 200];
+export const MAP_PALETTE = {
+    light: {
+        outline: [46, 42, 34, 110],
+        outlineStrong: [46, 42, 34, 120],
+        highlight: [32, 36, 43, 90],
+        highlightSoft: [32, 36, 43, 70],
+        selected: [32, 36, 43, 255],
+        grey: [110, 115, 120, 200],
+        greyLine: [138, 131, 117, 150],
+        substation: [70, 92, 124, 190],
+        substationLine: [38, 52, 78, 220],
+        neutral: [120, 114, 102, 255]
+    },
+    dark: {
+        outline: [232, 238, 244, 120],
+        outlineStrong: [232, 238, 244, 130],
+        highlight: [232, 238, 244, 90],
+        highlightSoft: [232, 238, 244, 70],
+        selected: [255, 255, 255, 255],
+        grey: [150, 160, 170, 200],
+        greyLine: [150, 160, 170, 150],
+        substation: [120, 150, 200, 190],
+        substationLine: [180, 205, 235, 220],
+        neutral: [150, 160, 170, 255]
+    }
+};
 const FLAT_SENSITIVITY_TINT = 0.55;
 export function sensFlatColor(domain) {
     if (domain.mean === 0)
@@ -138,3 +195,35 @@ export function branchWidth(loading) {
 export function busRadius(maxMw) {
     return 3.2 + 0.45 * Math.sqrt(Math.max(maxMw, 1));
 }
+/** Radius in px of every bus marker under `uniform` sizing, and the most a
+ * uniform marker grows to on the map. */
+export const UNIFORM_BUS_RADIUS = 4.5;
+/** The least a uniform marker shrinks to on the map, in px. */
+export const UNIFORM_BUS_MIN_RADIUS = 2;
+/** The ground radius of a uniform marker on the map, in metres. */
+export const UNIFORM_BUS_GROUND_RADIUS = 9000;
+/** Bus radius in px under a sizing choice: `power` scales with max(load, gen)
+ * through `busRadius`, `uniform` draws every bus alike. */
+export function busRadiusFor(sizing, maxMw) {
+    return sizing === 'uniform' ? UNIFORM_BUS_RADIUS : busRadius(maxMw);
+}
+/** Radius settings for the map's bus markers under a sizing choice. `power`
+ * sizes in pixels through `busRadius`. `uniform` gives every bus one ground
+ * radius, drawn between `UNIFORM_BUS_MIN_RADIUS` and `UNIFORM_BUS_RADIUS`
+ * pixels, so a whole country reads as a mesh of dots with its lines showing
+ * and a closer view as distinct buses. */
+export function busMarkerRadius(sizing) {
+    return sizing === 'uniform'
+        ? {
+            radius: () => UNIFORM_BUS_GROUND_RADIUS,
+            radiusUnits: 'meters',
+            radiusMinPixels: UNIFORM_BUS_MIN_RADIUS,
+            radiusMaxPixels: UNIFORM_BUS_RADIUS
+        }
+        : {
+            radius: busRadius,
+            radiusUnits: 'pixels',
+            radiusMinPixels: 0,
+            radiusMaxPixels: Number.MAX_SAFE_INTEGER
+        };
+}

package/dist/components/AppFooter.svelte

@@ -31,7 +31,7 @@
 		padding: 8px 20px;
 		font-size: 10.5px;
 		color: var(--text-secondary);
-		background: linear-gradient(rgba(236, 233, 226, 0), rgba(236, 233, 226, 0.9));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb) / 0.9));
 		animation: rise 0.5s 0.24s ease-out both;
 		pointer-events: none;
 	}
@@ -53,10 +53,12 @@
 		color: var(--text-accent);
 	}
 
+	/* Inside the Network panel on narrow screens, panel text size applies. */
 	footer.inline {
 		position: static;
 		margin-top: 14px;
 		padding: 0;
+		font-size: 12px;
 		background: none;
 		animation: none;
 		pointer-events: auto;
@@ -71,7 +73,6 @@
 
 		footer.inline {
 			margin-top: 4px;
-			font-size: 11px;
 		}
 	}
 

package/dist/components/AppHeader.svelte

@@ -26,10 +26,10 @@
 <header bind:this={headerEl}>
 	<div class="brand">
 		<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
-			<path d="M4 18 L12 6 L20 18" stroke="#b25e00" stroke-width="1.6" fill="none" />
-			<circle cx="4" cy="18" r="2.4" fill="#b25e00" />
-			<circle cx="12" cy="6" r="2.4" fill="#20242b" />
-			<circle cx="20" cy="18" r="2.4" fill="#b25e00" />
+			<path class="brand-accent-stroke" d="M4 18 L12 6 L20 18" stroke-width="1.6" fill="none" />
+			<circle class="brand-accent" cx="4" cy="18" r="2.4" />
+			<circle class="brand-ink" cx="12" cy="6" r="2.4" />
+			<circle class="brand-accent" cx="20" cy="18" r="2.4" />
 		</svg>
 		<h1>tellegen</h1>
 	</div>
@@ -130,7 +130,7 @@
 		justify-content: space-between;
 		gap: 16px;
 		padding: 10px 20px;
-		background: linear-gradient(rgba(236, 233, 226, 0.95), rgba(236, 233, 226, 0));
+		background: linear-gradient(rgb(var(--bg-rgb) / 0.95), rgb(var(--bg-rgb) / 0));
 		animation: drop 0.5s ease-out both;
 	}
 
@@ -141,6 +141,19 @@
 		gap: 10px;
 	}
 
+	/* The brand mark follows the theme: accent legs, ink apex. */
+	.brand-accent {
+		fill: var(--accent);
+	}
+
+	.brand-accent-stroke {
+		stroke: var(--accent);
+	}
+
+	.brand-ink {
+		fill: var(--ink);
+	}
+
 	h1 {
 		margin: 0;
 		font-size: 22px;
@@ -305,8 +318,8 @@
 
 	/* Ghost chip: standing invitation to drop or pick a case file. */
 	.cases > button.ghost {
-		background: rgba(252, 251, 247, 0.36);
-		border: 1px dashed rgba(178, 94, 0, 0.55);
+		background: rgb(var(--paper-rgb) / 0.36);
+		border: 1px dashed rgb(var(--accent-rgb) / 0.55);
 		color: var(--text-secondary);
 		box-shadow: inset 0 0 0 1px rgba(212, 116, 34, 0.08);
 	}
@@ -351,7 +364,7 @@
 			flex-wrap: wrap;
 			gap: 8px;
 			padding: 8px 10px 12px;
-			background: linear-gradient(rgba(236, 233, 226, 0.97), rgba(236, 233, 226, 0.72));
+			background: linear-gradient(rgb(var(--bg-rgb) / 0.97), rgb(var(--bg-rgb) / 0.72));
 		}
 
 		.brand {

package/dist/components/BindingLines.svelte

@@ -59,7 +59,7 @@
 	}
 
 	.head {
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 0 0 4px;
 	}
 

package/dist/components/BusPicker.svelte

@@ -155,7 +155,7 @@
 
 	label {
 		display: block;
-		font-size: 10px;
+		font-size: 12px;
 		text-transform: uppercase;
 		margin-bottom: 3px;
 	}
@@ -220,7 +220,7 @@
 		background: var(--panel);
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
-		box-shadow: 0 4px 18px rgba(32, 36, 43, 0.14);
+		box-shadow: var(--elev-menu);
 	}
 
 	li {
@@ -244,7 +244,7 @@
 		border: 1px solid var(--line);
 		border-radius: var(--radius-xs, 2px);
 		box-shadow: var(--elev-1);
-		font-size: 10.5px;
+		font-size: 12.5px;
 		margin: 4px 0 0;
 	}
 

package/dist/components/ControlPanel.svelte

@@ -157,9 +157,11 @@
 					{@render selectionBlock()}
 				{/if}
 
-				<hr />
+				{#if app.busSizing === 'power'}
+					<hr />
 
-				<SizeLegend />
+					<SizeLegend />
+				{/if}
 			{/if}
 		{/if}
 		{#if app.compactLayout && config.showFooter}

package/dist/components/DemandSlider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getAppState, getController } from '../context.svelte.js';
 	import { fmt, signed } from '../format.js';
+	import { sliderKeyValue } from '../slider.js';
 
 	const app = getAppState();
 	const ctrl = getController();
@@ -37,7 +38,7 @@
 			<span class="val">{signed(ctrl.sliderValue)} MW</span>
 		</div>
 		<div class="range-mode">
-			<div class="segment mono" aria-label="demand range">
+			<div class="segment mono" role="group" aria-label="demand range">
 				<button
 					type="button"
 					class:active={app.demandRangeMode === 'local'}
@@ -51,7 +52,7 @@
 					type="button"
 					class:active={app.demandRangeMode === 'full'}
 					aria-pressed={app.demandRangeMode === 'full'}
-					aria-label="full demand range"
+					aria-label="full range of demand"
 					{disabled}
 					title="range from zero load to the local physical limit"
 					onclick={() => ctrl.setDemandRangeMode('full')}>full range</button
@@ -79,7 +80,15 @@
 				bind:value={ctrl.sliderCurrent, ctrl.setSliderPreview}
 				aria-label="demand delta at selected bus"
 				onpointerdown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
-				onkeydown={() => ctrl.setSliderPreview(ctrl.sliderValue)}
+				onkeydown={(e) => {
+					const next = sliderKeyValue(e.key, ctrl.sliderValue, ctrl.sliderMin, ctrl.sliderMax);
+					if (next === null) {
+						ctrl.setSliderPreview(ctrl.sliderValue);
+						return;
+					}
+					e.preventDefault();
+					ctrl.setSliderPreview(next);
+				}}
 				onpointerup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onkeyup={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
 				onchange={(e) => ctrl.finishDemandInput(Number(e.currentTarget.value))}
@@ -120,7 +129,7 @@
 	.slider-head {
 		display: flex;
 		justify-content: space-between;
-		font-size: 11.5px;
+		font-size: 13.5px;
 		color: var(--text-secondary);
 		margin-bottom: 4px;
 	}
@@ -135,7 +144,7 @@
 		justify-content: space-between;
 		gap: 8px;
 		margin: 6px 0 7px;
-		font-size: 10.5px;
+		font-size: 12.5px;
 	}
 
 	.slider-track {
@@ -256,13 +265,13 @@
 
 	.pred {
 		margin: 2px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		min-height: 16px;
 	}
 
 	.score {
 		margin: 8px 0 0;
-		font-size: 11px;
+		font-size: 13px;
 		color: var(--ink);
 		min-height: 16px;
 	}

package/dist/components/DiagramCanvas.svelte

@@ -4,7 +4,14 @@
 	import type { Network, NetworkBus } from '../api.js';
 	import { getAppState, getController } from '../context.svelte.js';
 	import { getPanelLayout } from '../panels.svelte.js';
-	import { branchColor, busNeutral, busRadius, priceColor, scalarDomain } from '../colors.js';
+	import {
+		branchColor,
+		busNeutral,
+		busRadiusFor,
+		demandColor,
+		priceColor,
+		scalarDomain
+	} from '../colors.js';
 	import { rgbaCss } from '../format.js';
 	import type { MulticonductorCase } from '../state.svelte.js';
 	import { edgeColor, attachmentColor } from '../multiconductor.js';
@@ -66,6 +73,8 @@
 		if (multiconductor) return [];
 		if (!app.studyView) return ctrl.activeDisplay?.values ?? [];
 		const solution = app.studyView.solution;
+		if (app.displayMode === 'demand')
+			return app.studyView.network.buses.map((bus) => ({ bus: bus.id, value: bus.demand_mw }));
 		if (app.displayMode === 'angle') return solution?.va ?? [];
 		if (app.displayMode === 'voltage')
 			return (
@@ -107,7 +116,9 @@
 		return rgbaCss(
 			value === undefined
 				? busNeutral
-				: priceColor((value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12))
+				: (displayMode === 'demand' ? demandColor : priceColor)(
+						(value - domain.lo) / Math.max(domain.hi - domain.lo, 1e-12)
+					)
 		);
 	}
 	function branchLabel(id: number) {
@@ -348,9 +359,10 @@
 						<circle
 							cx={bus.lon}
 							cy={bus.lat}
-							r={Math.max(5, busRadius(Math.max(bus.demand_mw, bus.gen_mw))) / scale}
+							r={Math.max(5, busRadiusFor(app.busSizing, Math.max(bus.demand_mw, bus.gen_mw))) /
+								scale}
 							fill={color(bus)}
-							stroke={selectedBus === bus.id ? '#2f6fbb' : '#756a5b'}
+							style:stroke={selectedBus === bus.id ? '#2f6fbb' : 'var(--diagram-bus-stroke)'}
 							stroke-width={selectedBus === bus.id ? 3 : 1}
 							vector-effect="non-scaling-stroke"
 						/>
@@ -364,7 +376,7 @@
 							>Bus {multiconductor ? bus.uid : bus.id}{!multiconductor && bus.name
 								? `, ${bus.name}`
 								: ''}, {(bus.demand_mw * (multiconductor ? 1000 : 1)).toFixed(1)}
-							{multiconductor ? 'kW' : 'MW'} demand{values.has(bus.id)
+							{multiconductor ? 'kW' : 'MW'} demand{displayMode !== 'demand' && values.has(bus.id)
 								? `, ${values.get(bus.id)!.toFixed(4)} ${displayMode === 'price' ? 'objective units/MW LMP' : displayMode === 'voltage' ? 'pu voltage' : 'rad voltage angle'}`
 								: ''}</title
 						>

package/dist/components/DisplayControls.svelte

@@ -59,10 +59,14 @@
 			</span>
 		{/if}
 	</div>
-{:else}
+{:else if ctrl.activeSolvable?.solving}
 	<p class="dim small blink">
 		Solving {formulationLabel(ctrl.activeFormulation)}&hellip;
 	</p>
+{:else}
+	<p class="dim small">
+		No {formulationLabel(ctrl.activeFormulation)} results available.
+	</p>
 {/if}
 
 <style>

package/dist/components/DropZone.svelte

@@ -19,7 +19,7 @@
 		inset: 0;
 		z-index: 20;
 		pointer-events: none;
-		background: rgba(236, 233, 226, 0.75);
+		background: rgb(var(--bg-rgb) / 0.75);
 	}
 
 	.dropframe {

package/dist/components/FormulationSelector.svelte

@@ -53,7 +53,7 @@
 
 	.formulation-row select {
 		font-family: var(--font-mono);
-		font-size: 11px;
+		font-size: 13px;
 		padding: 3px 22px 3px 8px;
 		border: 1px solid var(--line);
 		border-radius: 2px;

package/dist/components/LocalCaseDetails.svelte

@@ -11,6 +11,7 @@
 	const EXPORT_FORMATS = [
 		{ token: 'matpower', label: 'MATPOWER (.m)' },
 		{ token: 'psse', label: 'PSS/E (.raw)' },
+		{ token: 'psse35', label: 'PSS/E v35 (.raw)' },
 		{ token: 'powerworld', label: 'PowerWorld (.aux)' },
 		{ token: 'pslf', label: 'PSLF (.epc)' },
 		{ token: 'powermodels-json', label: 'PowerModels (.json)' },
@@ -117,6 +118,8 @@
 			<p class="footnote mono">
 				no coordinates in this file: click the map or drop a geographic file
 			</p>
+		{:else if lc.coordsKind === 'synthetic' && lc.summary.coords_method === 'generated'}
+			<p class="footnote mono">coordinates: synthetic grid sited on real geography</p>
 		{:else if lc.coordsKind === 'synthetic' || lc.coordsKind === 'manual'}
 			<p class="footnote mono">
 				coordinates: {lc.coordsKind} topology layout centered where it was placed
@@ -222,7 +225,7 @@
 
 	.footnote {
 		margin: 8px 0 0;
-		font-size: 10px;
+		font-size: 12px;
 		color: var(--text-tertiary);
 		letter-spacing: 0;
 	}
@@ -231,7 +234,7 @@
 		margin: 8px 0 0;
 		padding: 0;
 		list-style: none;
-		font-size: 10.5px;
+		font-size: 12.5px;
 		line-height: 1.5;
 		color: var(--text-accent);
 	}
@@ -254,7 +257,7 @@
 		padding: 4px;
 		list-style: none;
 		min-width: 100%;
-		background: var(--surface, #fff);
+		background: var(--surface, var(--surface-menu));
 		border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
 		border-radius: 6px;
 		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);