/* Shared colours of the learning desk. The simulator artwork keeps its own palette. */
:root {
  color-scheme: dark;
  --street-bg: #091525;
  --street-panel: #102137;
  --street-raised: #172e48;
  --street-text: #eff7ff;
  --street-muted: #aec2d8;
  --street-line: #344d69;
  --street-ice: #79d9ff;
  --street-lime: #d1fd71;
  --street-active: #d1fd71;
  --street-active-ink: #182b0f;
  --street-glow: #153456;
  --street-grid: #375c802e;
  --street-warn: #ffbf89;
  --street-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --street-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --street-bg: #eef5fb;
  --street-panel: #fff;
  --street-raised: #e4effa;
  --street-text: #142b43;
  --street-muted: #496075;
  --street-line: #acbfd0;
  --street-ice: #095c85;
  --street-lime: #416509;
  --street-glow: #daebfb;
  --street-grid: #446b8c14;
  --street-warn: #913d16;
}
body.street-world {
  color: var(--street-text);
  font-family: var(--street-sans);
  min-height: 100vh;
  background-color: var(--street-bg);
  background-image: radial-gradient(ellipse 90% 540px at 18% -140px, var(--street-glow), transparent),
    linear-gradient(var(--street-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--street-grid) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.street-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--street-text);
  font-weight: 720;
  text-decoration: none;
}
.street-brand-mark {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: none;
  background: #79d9ff;
  clip-path: polygon(12% 9%, 78% 9%, 78% 21%, 91% 21%, 91% 75%, 78% 75%, 78% 91%, 56% 91%, 56% 72%, 40% 72%, 40% 81%, 19% 81%, 19% 69%, 6% 69%, 6% 22%, 12% 22%);
}
.street-brand-mark::before {
  content: "";
  position: absolute;
  inset: 26% 23% 40% 19%;
  background: #131e2c;
}
.street-brand-mark::after {
  content: "";
  position: absolute;
  inset: 35% 33% 52% 25%;
  background: linear-gradient(90deg, #d1fd71 0 31%, transparent 31% 69%, #d1fd71 69%);
}
.street-world :focus-visible { outline-color: var(--street-ice); }