: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: #353f4a;

  






























  --device-endpoint: #353f4a;
  --device-server: #424c57;
  --device-router: #2c3641;
  --device-switch: #242e39;
  --device-terminal: #3b4550;
  --device-edge: #161c24;
  --device-mark: #e8edf2;
  --device-screen: #2f7ccb;
  





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














  



























  




  --shape-label-ink: #17181a;
  --shape-label-ink-on-solid: #ffffff;

  





  --shape-black: #111111;
  --shape-black-fill: rgba(17, 17, 17, 0.12);
  --shape-gray: #767676;
  --shape-gray-fill: rgba(118, 118, 118, 0.12);
  --shape-white: #ffffff;
  --shape-white-fill: rgba(255, 255, 255, 0.12);
  --shape-red: #e72323;
  --shape-red-fill: rgba(231, 35, 35, 0.12);
  --shape-orange: #bb5c08;
  --shape-orange-fill: rgba(187, 92, 8, 0.12);
  



  --shape-yellow: #a88c05;
  --shape-yellow-fill: rgba(168, 140, 5, 0.12);
  --shape-green: #188734;
  --shape-green-fill: rgba(24, 135, 52, 0.12);
  --shape-blue: #2073e6;
  --shape-blue-fill: rgba(32, 115, 230, 0.12);
  --shape-purple: #9f51d6;
  --shape-purple-fill: rgba(159, 81, 214, 0.12);
  --shape-cyan: #0c8198;
  --shape-cyan-fill: rgba(12, 129, 152, 0.12);
  --shape-magenta: #d8239c;
  --shape-magenta-fill: rgba(216, 35, 156, 0.12);
  --shape-brown: #a4683e;
  --shape-brown-fill: rgba(164, 104, 62, 0.12);

  








  





  --shape-ink-on-black: #ffffff;
  --shape-ink-on-gray: #ffffff;
  --shape-ink-on-white: #111111;
  --shape-ink-on-red: #ffffff;
  --shape-ink-on-orange: #ffffff;
  --shape-ink-on-yellow: #111111;
  --shape-ink-on-green: #ffffff;
  --shape-ink-on-blue: #ffffff;
  --shape-ink-on-purple: #ffffff;
  --shape-ink-on-cyan: #ffffff;
  --shape-ink-on-magenta: #ffffff;
  --shape-ink-on-brown: #ffffff;
  --shape-ink-on-slate: #ffffff;
  --shape-ink-on-amber: #ffffff;
  --shape-ink-on-violet: #ffffff;
  --shape-ink-on-teal: #ffffff;
  --shape-ink-on-pink: #ffffff;
  --shape-ink-on-lime: #ffffff;

  




  --shape-slate: #5b6673;
  --shape-slate-fill: rgba(91, 102, 115, 0.12);
  --shape-amber: #885b12;
  --shape-amber-fill: rgba(136, 91, 18, 0.12);
  --shape-violet: #6f4aa8;
  --shape-violet-fill: rgba(111, 74, 168, 0.12);
  --shape-teal: #1d706c;
  --shape-teal-fill: rgba(29, 112, 108, 0.12);
  --shape-pink: #a63a74;
  --shape-pink-fill: rgba(166, 58, 116, 0.12);
  --shape-lime: #516d19;
  --shape-lime-fill: rgba(81, 109, 25, 0.12);
  --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-label-ink: #ededeb;

  

  --shape-yellow: #f5cc00;

  






  --shape-black-fill: rgba(17, 17, 17, 0.16);
  --shape-gray-fill: rgba(118, 118, 118, 0.16);
  --shape-white-fill: rgba(255, 255, 255, 0.16);
  --shape-red-fill: rgba(231, 35, 35, 0.16);
  --shape-orange-fill: rgba(187, 92, 8, 0.16);
  --shape-green-fill: rgba(24, 135, 52, 0.16);
  --shape-blue-fill: rgba(32, 115, 230, 0.16);
  --shape-purple-fill: rgba(159, 81, 214, 0.16);
  --shape-cyan-fill: rgba(12, 129, 152, 0.16);
  --shape-magenta-fill: rgba(216, 35, 156, 0.16);
  --shape-brown-fill: rgba(164, 104, 62, 0.16);
  --shape-slate-fill: rgba(126, 139, 153, 0.16);
  --shape-amber-fill: rgba(186, 125, 24, 0.16);
  --shape-violet-fill: rgba(152, 123, 197, 0.16);
  --shape-teal-fill: rgba(39, 153, 147, 0.16);
  --shape-pink-fill: rgba(202, 104, 156, 0.16);
  --shape-lime-fill: rgba(111, 149, 35, 0.16);
  --shape-yellow-fill: rgba(245, 204, 0, 0.16);

  

  --shape-ink-on-amber: #111111;
  --shape-ink-on-lime: #111111;
  --shape-ink-on-pink: #111111;
  --shape-ink-on-slate: #111111;
  --shape-ink-on-teal: #111111;
  --shape-ink-on-violet: #111111;

  
  --shape-slate: #7e8b99;
  --shape-slate-fill: rgba(126, 139, 153, 0.12);
  --shape-amber: #ba7d18;
  --shape-amber-fill: rgba(186, 125, 24, 0.12);
  --shape-violet: #987bc5;
  --shape-violet-fill: rgba(152, 123, 197, 0.12);
  --shape-teal: #279993;
  --shape-teal-fill: rgba(39, 153, 147, 0.12);
  --shape-pink: #ca689c;
  --shape-pink-fill: rgba(202, 104, 156, 0.12);
  --shape-lime: #6f9523;
  --shape-lime-fill: rgba(111, 149, 35, 0.12);

  



  --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: #727c87;

  






























  








  --device-endpoint: #727c87;
  --device-server: #808a95;
  --device-router: #68727d;
  --device-switch: #5e6873;
  --device-terminal: #7a848f;
  --device-edge: #cad0d8;
  



  --device-mark: #f1f5f8;
  --device-screen: #3a79b0;
  --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;
}