:root {
  color-scheme: light;

  









  --room: #ffffff;
  --room-line: #e4e4e4;
  





















  




  --overlay-backdrop: rgba(0, 0, 0, 0.38);
  --overlay-keyline: #c8c8c8;
  --overlay-shadow: rgba(0, 0, 0, 0.22);
  --overlay-tile: #f7f7f7;
  --overlay-tile-edge: #dedede;
  --overlay-tile-hover: #efefef;
  

  --overlay-tile-selected: #e6e6e6;
  --surface: #f7f7f7;
  --surface-raised: #ffffff;
  --paper: #ffffff;

  


  --text: #141414;
  --text-muted: #5e5e5e;

  





  --navy: #16283d;

  








  --structure: #ffffff;
  --structure-ink: #141414;
  --structure-muted: #5e5e5e;
  --structure-line: #e4e4e4;
  



  --structure-accent: #1a1a1a;
  --structure-accent-ink: #ffffff;

  











  --accent: #1a1a1a;
  --accent-soft: #f0f0f0;
  --accent-ink: #ffffff;

  











  --select-field: #d4d4d4;

  


















  --select-ink: #ffffff;
  



















  --ok: #2f7d43;
  --ok-soft: #e4f0e5;
  --warn: #b0541c;
  --warn-soft: #f7e8dd;
  --bad: #a83232;
  --bad-soft: #f7e4e1;

  




  --field: #fcfcfc;

  




















  --device-fill: #3f3f3f;

  






























  --device-endpoint: #3f3f3f;
  --device-server: #4c4c4c;
  --device-router: #363636;
  --device-switch: #2e2e2e;
  --device-terminal: #454545;
  --device-edge: #1c1c1c;
  --device-mark: #ededed;
  --device-screen: #2a2a2a;
  





  --note-ink: var(--text);
  














  --shape-slate: #5b6673;
  --shape-slate-fill: rgba(91, 102, 115, 0.18);
  --shape-blue: #2f6fb8;
  --shape-blue-fill: rgba(47, 111, 184, 0.18);
  --shape-green: #2f7d43;
  --shape-green-fill: rgba(47, 125, 67, 0.18);
  --shape-amber: #9a6714;
  --shape-amber-fill: rgba(154, 103, 20, 0.18);
  --shape-red: #a83232;
  --shape-red-fill: rgba(168, 50, 50, 0.18);
  --shape-violet: #6f4aa8;
  --shape-violet-fill: rgba(111, 74, 168, 0.18);
  --shape-teal: #1f7a75;
  --shape-teal-fill: rgba(31, 122, 117, 0.18);
  --shape-cyan: #1f6f99;
  --shape-cyan-fill: rgba(31, 111, 153, 0.18);
  --shape-orange: #9e571a;
  --shape-orange-fill: rgba(158, 87, 26, 0.18);
  --shape-pink: #a63a74;
  --shape-pink-fill: rgba(166, 58, 116, 0.18);
  --shape-lime: #56741b;
  --shape-lime-fill: rgba(86, 116, 27, 0.18);
  --shape-brown: #945d38;
  --shape-brown-fill: rgba(148, 93, 56, 0.18);
  --field-line: #e4e4e4;

  







  --well: #f2f2f2;
  --well-line: #d8d8d8;
  --well-shadow: rgba(0, 0, 0, 0.10);

  






  --proto-arp: #d98c2b;
  --proto-icmp: #2f7d43;
  --proto-ospf: #6b4fbb;
  --proto-stp: #8a8a8a;
  --proto-cdp: #4c8fb8;
  --proto-hsrp: #c2507a;
  --proto-lacp: #2f8a84;
  --proto-pagp: #9a6a2c;
  --proto-dhcp: #b0872a;
  --proto-udp: #5f8f6a;
  --proto-tcp: #245fa8;
  






  --proto-ipv4: #4a6b86;
  --proto-ethernet: #7a746a;
  --proto-ink: #ffffff;
}

html[data-appearance="dark"] {
  color-scheme: dark;

  



















  --room: #0b0b0b;
  --room-line: #2a2a2a;
  




  --overlay-backdrop: rgba(0, 0, 0, 0.58);
  --overlay-keyline: #404040;
  --overlay-shadow: rgba(0, 0, 0, 0.66);
  --overlay-tile: #222222;
  --overlay-tile-edge: #353535;
  --overlay-tile-hover: #292929;
  


  --overlay-tile-selected: #303030;
  --surface: #151515;
  --surface-raised: #1d1d1d;
  --paper: #222222;

  

  --proto-arp: #e5a04a;
  --proto-icmp: #4c9d62;
  --proto-ospf: #8b73d6;
  --proto-stp: #9c9c9c;
  --proto-cdp: #63a5cf;
  --proto-hsrp: #d46a93;
  --proto-lacp: #46a49d;
  --proto-pagp: #b5823f;
  --proto-dhcp: #c99a3f;
  --proto-udp: #74a883;
  --proto-tcp: #4b82c8;
  --proto-ipv4: #6d90ad;
  --proto-ethernet: #8f887d;
  --proto-ink: #ffffff;

  


  --text: #ebebeb;
  --text-muted: #a0a0a0;
  
  --note-ink: var(--text);
  







  --shape-slate: #5b6673;
  --shape-slate-fill: rgba(91, 102, 115, 0.18);
  --shape-blue: #2f6fb8;
  --shape-blue-fill: rgba(47, 111, 184, 0.18);
  --shape-green: #2f7d43;
  --shape-green-fill: rgba(47, 125, 67, 0.18);
  --shape-amber: #9a6714;
  --shape-amber-fill: rgba(154, 103, 20, 0.18);
  --shape-red: #a83232;
  --shape-red-fill: rgba(168, 50, 50, 0.18);
  --shape-violet: #6f4aa8;
  --shape-violet-fill: rgba(111, 74, 168, 0.18);
  --shape-teal: #1f7a75;
  --shape-teal-fill: rgba(31, 122, 117, 0.18);
  --shape-cyan: #1f6f99;
  --shape-cyan-fill: rgba(31, 111, 153, 0.18);
  --shape-orange: #9e571a;
  --shape-orange-fill: rgba(158, 87, 26, 0.18);
  --shape-pink: #a63a74;
  --shape-pink-fill: rgba(166, 58, 116, 0.18);
  --shape-lime: #56741b;
  --shape-lime-fill: rgba(86, 116, 27, 0.18);
  --shape-brown: #945d38;
  --shape-brown-fill: rgba(148, 93, 56, 0.18);

  



  --navy: #e8e3d8;

  


  --structure: #161616;
  --structure-ink: #ebebeb;
  --structure-muted: #a0a0a0;
  --structure-line: #2a2a2a;
  --structure-accent: #ebebeb;
  --structure-accent-ink: #121212;

  




  



  --accent: #ebebeb;
  --accent-soft: #1d1d1d;
  --accent-ink: #121212;
  

  --select-field: #3d3d3d;
  


  --select-ink: #ffffff;
  



  --ok: #7cc98c;
  --ok-soft: #1e3325;
  --warn: #e08a3c;
  --warn-soft: #2c1d10;
  --bad: #ef8a80;
  --bad-soft: #38221f;

  --field: #101010;

  



  --device-fill: #7c7c7c;

  






























  








  --device-endpoint: #7c7c7c;
  --device-server: #8a8a8a;
  --device-router: #727272;
  --device-switch: #686868;
  --device-terminal: #848484;
  --device-edge: #cfcfcf;
  



  --device-mark: #f4f4f4;
  --device-screen: #585858;
  --field-line: #2b2b2b;

  --well: #0e0e0e;
  --well-line: #272727;
  --well-shadow: rgba(0, 0, 0, 0.35);
}










#appearance.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 18, 16, 0.45);
}

#appearance.sheet-backdrop[hidden] {
  display: none;
}

#appearance .sheet {
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 18px 20px 16px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--room-line);
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#appearance h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

#appearance .appearance-note {
  margin: 0 0 12px;
  color: var(--text-muted);
}

#appearance .appearance-group {
  margin: 0 0 12px;
  padding: 8px 12px 10px;
  border: 1px solid var(--room-line);
  border-radius: 8px;
}

#appearance legend {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#appearance .appearance-option {
  display: block;
  padding: 4px 0;
}

#appearance .lang-select {
  display: block;
  min-height: 36px;
  margin: 2px 0 0;
  padding: 4px 8px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--room-line);
  border-radius: 6px;
}

#appearance .sheet-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#appearance button {
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--room-line);
  border-radius: 6px;
  cursor: pointer;
}

#appearance button:focus-visible,
#appearance input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



.appearance-open {
  display: inline-block;
  margin-top: 18px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}