:root {
  --card-head-bg: #33251a;

  --chrome-bg: #33251a;
  --card-head-fg: #f2e6d2;
  --card-gold: #b9a05e;
  --poi-near: #6d9410;
  --map-bg: #0e1726;

  --ground-color: #141d2e;
  --sky-top: #070d1a;
  --sky-horizon: #22364f;

  --sun-color: #ffe7c4;
  --sun-intensity: 1.6;
  --sun-azimuth: 135;
  --sun-elevation: 46;
  --hemi-sky: #8fb0d6;
  --hemi-ground: #2a3450;
  --hemi-intensity: 1.6;
  --ambient-intensity: .35;

  --road-width-scale: 2.4;
  --road-min-px: 1.7;
  --building-height-scale: 1;
  --wall-shade: .68;
  --roof-shade: 1.28;

  --panel-bg: #1e2128;
  --panel-fg: #d8dce3;
  --panel-muted: #8b93a2;
  --accent: #4b9fff;
  --border: #333844;
  --hud-bg: #0e1726cc;
  --field-bg: #14171d;
  --btn-bg: #2b3039;
  --err-color: #ff8a80;
  --code-bg: #2a2f38;
  --ui-font: system-ui, "Segoe UI", Roboto, sans-serif;
  --ui-radius: 8px;
  --compass-color: #e35c5c;
  --compass-ring: #48546a;
  --compass-dial: #97a2b5;
  --compass-size: 46px;
  --parchment-bg: #d9cdb4;
  --parchment-roll: #b9a988;
  --parchment-ink: #5a5140;

  --texture: none;

  --marker-color: #2ea3ff;
  --marker-size: 46px;
  --marker-border: 3px;
  --marker-tail: 10px;
  --marker-ring: #ffffff;
  --marker-shadow: 0 5px 14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35);

  --label-outline: rgba(0, 0, 0, .8);

  --label-font: system-ui, "Segoe UI", Roboto, sans-serif;
}

.mf {
  stroke: #43506a;
  stroke-width: 1;
  fill: #1b2740;
  fill-opacity: .6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.mf-water            { fill: #21486e; fill-opacity: .9; stroke: #2e5c88; stroke-width: 1; }
.mf-water--river,
.mf-water--stream,
.mf-water--canal     { fill: none; stroke: #3d7fb8; stroke-width: 2.5; }

.mf-water--sea       { --y: 0.33; }
.mf-water--coastline { fill: none; stroke-width: 1; }
.mf-water--wetland   { fill: #2a5568; fill-opacity: .5; stroke: none; }

.mf-nature           { fill: #24422b; fill-opacity: .8; stroke: none; }
.mf-nature--forest   { fill: #1f3d29; }
.mf-nature--park,
.mf-nature--garden   { fill: #2c5233; }

.mf-landuse              { fill: #2a2f3d; fill-opacity: .55; stroke: none; }
.mf-landuse--residential { fill: #2b2c33; }
.mf-landuse--industrial  { fill: #38323d; }
.mf-landuse--commercial  { fill: #3a3630; }
.mf-landuse--farmland    { fill: #33352b; }
.mf-landuse--cemetery    { fill: #263528; }

.mf-buildings        { fill: #454e66; fill-opacity: 1; stroke: #4c566f; stroke-width: .5; --h: 9; }
.mf-buildings--house,
.mf-buildings--detached,
.mf-buildings--bungalow  { fill: #3f4557; --h: 6; }
.mf-buildings--apartments,
.mf-buildings--residential { fill: #414a63; --h: 15; }
.mf-buildings--commercial,
.mf-buildings--retail    { fill: #4a4658; --h: 11; }
.mf-buildings--industrial,
.mf-buildings--warehouse { fill: #3f4450; --h: 8; }
.mf-buildings--school,
.mf-buildings--hospital,
.mf-buildings--university { fill: #45506b; --h: 13; }
.mf-buildings--church,
.mf-buildings--cathedral,
.mf-buildings--chapel    { fill: #5a5266; --h: 24; }
.mf-buildings--tower,
.mf-buildings--skyscraper { fill: #4d5872; --h: 45; }
.mf-buildings--garage,
.mf-buildings--garages,
.mf-buildings--shed,
.mf-buildings--hut       { fill: #383e4d; --h: 3.5; }

.mf-roads            { fill: none; stroke: #6b7488; stroke-width: 1.5;
                       --casing: #3a4150; --casing-w: .45; }
.mf-roads--motorway,
.mf-roads--trunk     { stroke: #e8935f; stroke-width: 4; }
.mf-roads--primary   { stroke: #e6b15c; stroke-width: 3.5; }
.mf-roads--secondary { stroke: #e8d18a; stroke-width: 3; }
.mf-roads--tertiary  { stroke: #cfd6e4; stroke-width: 2.5; }
.mf-roads--residential,
.mf-roads--living-street,
.mf-roads--unclassified,
.mf-roads--service   { stroke: #9aa3b7; stroke-width: 2; }
.mf-roads--footway,
.mf-roads--path,
.mf-roads--pedestrian,
.mf-roads--track,
.mf-roads--cycleway  { stroke: #8a7f74; stroke-width: 1; stroke-dasharray: 3 3;
                       --casing: #4a4238; --casing-w: .26; }

.mf-railway          { fill: none; stroke: #aeb4c0; stroke-width: 1.8;
                       --casing: #15171c; --casing-w: .26;
                       --tie-gap: 4.5; --tie-len: 1; --tie-w: .42;
                       --tie-color: #15171c; }
.mf-railway--subway  { stroke: #c78ce8; --casing: #1d1226; --tie-color: #1d1226; }

.mf-boundary         { fill: none; stroke: #7d5c9c; stroke-width: 1; stroke-dasharray: 8 3 2 3; opacity: .6; }

.mf-poi              { fill: #ffd166; stroke: #1e2128; stroke-width: 1.5; }
.mf-poi--restaurant,
.mf-poi--cafe,
.mf-poi--fast-food   { fill: #ff8c69; }
.mf-poi--parking     { fill: #6ea8ff; }
.mf-places           { fill: #ffffff; stroke: #000; stroke-width: 2; }

.mf-other            { fill: none; stroke: #4a5266; stroke-width: 1; opacity: .5; }

.mf-here             { fill: #2ea3ff; stroke: #ffffff; stroke-width: 3;
                       filter: drop-shadow(0 0 4px #2ea3ff); animation: mf-pulse 2s ease-out infinite; }
.mf-here-accuracy    { fill: #2ea3ff; fill-opacity: .12; stroke: #2ea3ff; stroke-opacity: .5; stroke-width: 1; }
@keyframes mf-pulse {
  0%   { stroke-width: 3; }
  50%  { stroke-width: 8; }
  100% { stroke-width: 3; }
}

html[data-daytime="day"] {
  --compass-ring: #b6bfcc;
  --compass-dial: #6b7686;
  --map-bg: #e6ecf3;
  --ground-color: #eef1f5;
  --sky-top: #4c8ed4;
  --sky-horizon: #cfe2f4;

  --sky-top-overcast: #6a737c;
  --sky-horizon-overcast: #b9c0c6;
  --hemi-sky-overcast: #c9ced3;
  --sun-overcast: .45;

  --sun-color: #fff6e2;
  --sun-intensity: 2;
  --sun-elevation: 58;
  --hemi-sky: #dcebff;
  --hemi-ground: #c9d1da;
  --hemi-intensity: 2;
  --ambient-intensity: .55;

  --wall-shade: .8;
  --roof-shade: 1.08;

  --marker-color: #1a73e8;
  --marker-ring: #ffffff;
  --marker-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .12);

  --label-outline: rgba(255, 255, 255, .95);

  --panel-bg: #ffffffee;
  --panel-fg: #1f2530;
  --panel-muted: #5d6675;
  --border: #c6cfda;
  --accent: #1a73e8;
  --hud-bg: #ffffffcc;
  --field-bg: #f2f5f9;
  --btn-bg: #eef1f6;
  --err-color: #c0392b;
  --code-bg: #e6eaf0;
}

html:not([data-daytime="night"]) .mf { stroke: #b9c1cd; fill: #dfe4ea; --label-color: #39404e; }

html:not([data-daytime="night"]) .mf-water           { fill: #a8cae9; fill-opacity: 1; stroke: #8fb6d8; --label-color: #2a6ea8; }
html:not([data-daytime="night"]) .mf-water--river,
html:not([data-daytime="night"]) .mf-water--stream,
html:not([data-daytime="night"]) .mf-water--canal    { fill: none; stroke: #86b8e0; }
html:not([data-daytime="night"]) .mf-water--wetland  { fill: #bcd6dd; }

html:not([data-daytime="night"]) .mf-nature          { fill: #cbe0b6; --label-color: #4a6b39; }
html:not([data-daytime="night"]) .mf-nature--forest  { fill: #bcd5a4; }
html:not([data-daytime="night"]) .mf-nature--park,
html:not([data-daytime="night"]) .mf-nature--garden  { fill: #cfe7bb; }

html:not([data-daytime="night"]) .mf-landuse             { fill: #e4e6e3; }
html:not([data-daytime="night"]) .mf-landuse--residential { fill: #e8e6e3; }
html:not([data-daytime="night"]) .mf-landuse--industrial { fill: #e2dee6; }
html:not([data-daytime="night"]) .mf-landuse--commercial { fill: #efe7db; }
html:not([data-daytime="night"]) .mf-landuse--farmland   { fill: #ebe9da; }
html:not([data-daytime="night"]) .mf-landuse--cemetery   { fill: #dbe5db; }

html:not([data-daytime="night"]) .mf-buildings           { fill: #d3d7de; stroke: #bcc3cd; }
html:not([data-daytime="night"]) .mf-buildings--house,
html:not([data-daytime="night"]) .mf-buildings--detached,
html:not([data-daytime="night"]) .mf-buildings--bungalow { fill: #d8d9dd; }
html:not([data-daytime="night"]) .mf-buildings--apartments,
html:not([data-daytime="night"]) .mf-buildings--residential { fill: #cfd4dd; }
html:not([data-daytime="night"]) .mf-buildings--commercial,
html:not([data-daytime="night"]) .mf-buildings--retail   { fill: #ded6d8; }
html:not([data-daytime="night"]) .mf-buildings--church,
html:not([data-daytime="night"]) .mf-buildings--cathedral,
html:not([data-daytime="night"]) .mf-buildings--chapel   { fill: #d9d1dd; }
html:not([data-daytime="night"]) .mf-buildings--tower,
html:not([data-daytime="night"]) .mf-buildings--skyscraper { fill: #c9d2df; }

html:not([data-daytime="night"]) .mf-roads               { stroke: #ffffff; --label-color: #4a5262;
                                                           --casing: #b9c0cc; }
html:not([data-daytime="night"]) .mf-roads--motorway,
html:not([data-daytime="night"]) .mf-roads--trunk        { stroke: #f0a06a; --label-color: #a95b23; }
html:not([data-daytime="night"]) .mf-roads--primary      { stroke: #f5c877; --label-color: #a37a1e; }
html:not([data-daytime="night"]) .mf-roads--secondary    { stroke: #f2e28d; --label-color: #8c7a1c; }
html:not([data-daytime="night"]) .mf-roads--tertiary     { stroke: #ffffff; }
html:not([data-daytime="night"]) .mf-roads--residential,
html:not([data-daytime="night"]) .mf-roads--living-street,
html:not([data-daytime="night"]) .mf-roads--unclassified,
html:not([data-daytime="night"]) .mf-roads--service      { stroke: #ffffff; }
html:not([data-daytime="night"]) .mf-roads--footway,
html:not([data-daytime="night"]) .mf-roads--path,
html:not([data-daytime="night"]) .mf-roads--pedestrian,
html:not([data-daytime="night"]) .mf-roads--track,
html:not([data-daytime="night"]) .mf-roads--cycleway     { stroke: #b3a08c; --casing: #7d6e5c; }

html:not([data-daytime="night"]) .mf-railway             { stroke: #c9cdd6;
                                                           --casing: #1a1d24; --tie-color: #1a1d24; }
html:not([data-daytime="night"]) .mf-railway--subway     { stroke: #9a6cc0; }
html:not([data-daytime="night"]) .mf-boundary            { stroke: #9a7bbd; }
html:not([data-daytime="night"]) .mf-poi                 { fill: #e39a2c; stroke: #ffffff; --label-color: #8a5a10; }
html:not([data-daytime="night"]) .mf-poi--restaurant,
html:not([data-daytime="night"]) .mf-poi--cafe,
html:not([data-daytime="night"]) .mf-poi--fast-food      { fill: #e2714a; }
html:not([data-daytime="night"]) .mf-poi--parking        { fill: #4a86d8; }
html:not([data-daytime="night"]) .mf-places              { fill: #2b3242; stroke: #ffffff; --label-color: #222a38; }
html:not([data-daytime="night"]) .mf-other               { stroke: #c2c8d2; }

:root {
  --rain-color: #b9d4f0;
  --rain-opacity: .45;
  --snow-color: #ffffff;
  --snow-opacity: .85;
}

html[data-daytime="day"] {
  --rain-color: #dcebfa;
  --rain-opacity: .5;
}

html[data-daytime="dusk"] {
  --compass-ring: #c3b3a6;
  --compass-dial: #7b6f64;
  --map-bg: #d9cfc6;
  --ground-color: #cfc4bd;
  --sky-top: #35406b;
  --sky-horizon: #e79a5c;

  --sky-top-overcast: #3a3e48;
  --sky-horizon-overcast: #79767b;
  --hemi-sky-overcast: #8d8a8c;
  --sun-overcast: .5;

  --sun-color: #ffb56b;
  --sun-intensity: 1.5;
  --sun-elevation: 12;
  --hemi-sky: #cba98f;
  --hemi-ground: #7d7266;
  --hemi-intensity: 1.3;
  --ambient-intensity: .4;

  --wall-shade: .7;
  --roof-shade: 1.22;

  --label-outline: rgba(255, 246, 235, .85);

  --rain-color: #e8d3c0;

  --panel-bg: #f6efe9;
  --panel-fg: #2b2620;
  --panel-muted: #6b6058;
  --accent: #c2662a;
  --border: #cbbcb0;
  --hud-bg: #f6efe9cc;
  --field-bg: #efe6de;
  --btn-bg: #ece2d9;
  --err-color: #b3402a;
  --code-bg: #e6dbd1;
  --compass-color: #c2402a;

  --marker-color: #c2662a;
  --marker-ring: #fff6ec;
  --marker-shadow: 0 4px 12px rgba(60, 40, 25, .35), 0 0 0 1px rgba(90, 60, 40, .2);
}

html:not([data-daytime="night"]) #poi-screen[data-esti] {
  --panel-bg: #1e2128;
  --panel-fg: #d8dce3;
  --panel-muted: #8b93a2;
  --accent: #4b9fff;
  --border: #333844;
  --field-bg: #14171d;
  --btn-bg: #2b3039;
  --err-color: #ff8a80;
  background: var(--panel-bg);
  color: var(--panel-fg);
}