#wx-flat-world-state {
  --wf-paper:light-dark(#fafaf7,#1b242b);
  --wf-ink:light-dark(#293842,#e6edf0);
  --wf-muted:light-dark(#697b85,#a7b8c2);
  --wf-grid:light-dark(#dce3e5,#33434d);
  --wf-outline:light-dark(#91a1a9,#778f9c);
  --wf-signal:light-dark(#63899f,#8eafc3);
  --wf-orange:light-dark(#fc7a25,#fc7a25);
  --wf-track:light-dark(#e0e5e7,#34454f);
  font:400 14px/1.5 Figtree,sans-serif;
  color:var(--wf-ink);
  color-scheme:light;
  width:100%;
  box-sizing:border-box;
}

#wx-flat-world-state * {
  box-sizing:border-box;
}

#wx-flat-world-state {
  --wf-building:light-dark(#f0f3f3,#2b3942);
}

#wx-flat-world-state {
  --wf-kaka:#fc7a25;
  --wf-road:light-dark(#e5eaec,#24343e);
  --wf-stone:light-dark(#eef1ef,#2b3840);
  --wf-glass:light-dark(#dfe9ed,#354e5d);
  --wf-leaf:light-dark(#e5ece7,#354941);
  --wf-water:light-dark(#e1ebef,#304b5b);
  --wf-warm:light-dark(#efebe4,#48423c);
}

#wx-flat-world-state .wf-surface {
  background:var(--wf-paper);
  position:relative;
  padding:8px 4px 6px;
}

#wx-flat-world-state .wf-stage {
  position:relative;
}

#wx-flat-world-state .wf-readout {
  position:absolute;
  display:block;
  pointer-events:none;
  white-space:nowrap;
  font:400 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  color:var(--wf-ink);
  background:var(--wf-paper);
  padding:3px 5px;
}

#wx-flat-world-state .wf-readout span {
  display:block;
}

#wx-flat-world-state #wf-speed {
  background:transparent;
}

#wx-flat-world-state canvas {
  display:block;
  width:100%;
  height:390px;
  touch-action:none;
  user-select:none;
  cursor:grab;
}

#wx-flat-world-state canvas:active {
  cursor:grabbing;
}

#wx-flat-world-state .wf-timeline {
  margin-top:2px;
}

#wx-flat-world-state input {
  display:block;
  width:100%;
  min-width:0;
  accent-color:var(--wf-kaka);
  height:24px;
  appearance:none;
  background:transparent;
}

#wx-flat-world-state input::-webkit-slider-runnable-track {
  height:3px;
  background:var(--wf-track);
  border-radius:2px;
}

#wx-flat-world-state input::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--wf-kaka);
  margin-top:-4.5px;
  border:0;
}

#wx-flat-world-state input::-moz-range-track {
  height:3px;
  background:var(--wf-track);
  border:0;
  border-radius:2px;
}

#wx-flat-world-state input::-moz-range-thumb {
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--wf-kaka);
  border:0;
}

#wx-flat-world-state .wf-resolve {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

@media(pointer:coarse) {
  #wx-flat-world-state input {
    min-height:44px;
  }

}

@media(max-width:480px) {
  #wx-flat-world-state .wf-surface {
    padding:8px 0 6px;
  }

  #wx-flat-world-state canvas {
    height:300px;
  }

}

/* The street scene replaces the Create illustration, using the approved palette. */

#wx-flat-world-state[hidden],#concept-scene[hidden] {
  display:none!important;
}

#wx-flat-world-state {
  margin:12px 0 8px;
  border-radius:11px;
  overflow:hidden;
  background:var(--wf-paper);
}

#wx-flat-world-state #wf-kaka[hidden] {
  display:none;
}

#wx-flat-world-state .wf-timeline {
  padding:0 10px;
}

#wx-flat-world-state .wf-timeline input {
  margin:0;
}

.world-panel[data-theme=create] {
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  background:#f3f4ef;
}

.world-panel[data-theme=create] .panel-visual {
  min-width:0;
  background:#fafaf7;
  box-shadow:0 0 0 1px #dce3e54d inset;
}

.world-panel[data-theme=create] .concept-bottom {
  justify-content:flex-end;
}

@media(max-width:760px) {
  .world-panel[data-theme=create] {
    grid-template-columns:1fr;
  }

  #wx-flat-world-state canvas {
    height:300px;
  }

}

.world-panel .concept-top[hidden] {
  display:none;
}

.world-panel[data-theme=create] #wx-flat-world-state {
  margin-top:0;
}

#wx-flat-world-state canvas:focus-visible {
  outline:2px solid var(--wf-signal);
  outline-offset:-2px;
}

/* Shared flat-world visual language; only the companion accent changes. */

#wx-flat-world-state {
  --wf-accent:#63899f;
  --wf-tint:#e5edf0;
  --wf-object:#e7d8be;
}

#wx-flat-world-state[data-mode=play] {
  --wf-accent:#9471cd;
  --wf-kaka:#9264fc;
  --wf-tint:#ece6f4;
  --wf-object:#eedba6;
}

#wx-flat-world-state[data-mode=act] {
  --wf-accent:#569ab5;
  --wf-kaka:#32ade4;
  --wf-tint:#e2edf1;
  --wf-object:#e4d1b5;
}

#wx-flat-world-state img[hidden],#wx-flat-world-state [hidden] {
  display:none!important;
}

#wx-flat-world-state[data-mode=play] .wf-readout,#wx-flat-world-state[data-mode=act] .wf-readout {
  background:transparent;
}

#wx-flat-world-state .wf-hotspot {
  position:absolute;
  z-index:2;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  touch-action:manipulation;
}

#wx-flat-world-state .wf-hotspot:focus-visible {
  outline:2px solid var(--wf-accent);
  outline-offset:2px;
  background:#ffffff44;
}

.world-panel {
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
}

.world-panel[data-theme=play] {
  background:#f2f0f5;
}

.world-panel[data-theme=act] {
  background:#eef3f4;
}

.world-panel[data-theme=play] .panel-visual,.world-panel[data-theme=act] .panel-visual {
  min-width:0;
  background:#fafaf7;
  box-shadow:0 0 0 1px #dce3e54d inset;
}

.world-panel .concept-bottom {
  justify-content:flex-end;
}

.world-panel #wx-flat-world-state {
  margin-top:0;
}

@media(max-width:760px) {
  .world-panel {
    grid-template-columns:1fr;
  }

}