/* The modern style of the page, which it opens in, over the classic one
     of lab.css that the settings can put it back in: the same page, its
     panels cards that float on the ground, its heads taller, and its
     controls rounded and raised, in Inter. Every rule is under
     [data-style="modern"], so that the classic style is lab.css alone. */

  @font-face {
    font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
    font-display: swap;
    src: url(vendor/inter/inter-latin-opsz-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
      U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root[data-style="modern"] {
    --bg: #eef0f4; --panel: #fff; --head: #fff; --fg: #0f172a;
    --muted: #64748b; --line: #e2e6ed; --sel: #f1f4f8;
    --ok: #059669; --bad: #dc2626; --warn: #b45309; --accent: #2563eb;
    --box: #fff; --box-line: #c9d1dd;
    --wire: #94a3b8;
    --trace: #7c3aed;
    --loop: #ea580c;
    --track: #eef1f5; --fill: #2563eb;
    /* What only this style has: the face of a control raised from its
       track, the ground the drawing is on and its dots, the rim of a
       control with the focus, the thumb of a scrollbar, the ground of a
       count, and the shadows of a card and of a window over it. */
    --raised: #fff;
    --canvas: #f8f9fb; --grid: #d5dbe4;
    --ring: color-mix(in srgb, var(--accent) 30%, transparent);
    --scroll: color-mix(in srgb, var(--fg) 20%, transparent);
    --chip: color-mix(in srgb, var(--fg) 6%, transparent);
    --shadow: 0 1px 2px rgb(15 23 42 / .04), 0 1px 3px rgb(15 23 42 / .05);
    --shadow-lg: 0 18px 40px -12px rgb(15 23 42 / .25),
      0 4px 12px -4px rgb(15 23 42 / .08);
    --sans: "Inter Variable", Inter, system-ui, sans-serif;
    --rail: 40px; --gutter: 8px;
    scrollbar-color: var(--scroll) transparent;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-style="modern"]:not([data-theme="light"]) {
      --bg: #07080b; --panel: #0f1116; --head: #0f1116; --fg: #e5e8ee;
      --muted: #8a93a3; --line: #1f232c; --sel: #191d25;
      --ok: #34d399; --bad: #f87171; --warn: #fbbf24; --accent: #60a5fa;
      --box: #161a22; --box-line: #2b3241;
      --wire: #4b5565;
      --trace: #a78bfa;
      --loop: #fb923c;
      --track: #08090d; --fill: #3b82f6;
      --raised: #252a35;
      --canvas: #0b0d11; --grid: #1d222b;
      --shadow: 0 1px 3px rgb(0 0 0 / .4);
      --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / .7),
        0 0 0 1px rgb(255 255 255 / .04);
    }
  }
  :root[data-style="modern"][data-theme="dark"] {
    --bg: #07080b; --panel: #0f1116; --head: #0f1116; --fg: #e5e8ee;
    --muted: #8a93a3; --line: #1f232c; --sel: #191d25;
    --ok: #34d399; --bad: #f87171; --warn: #fbbf24; --accent: #60a5fa;
    --box: #161a22; --box-line: #2b3241;
    --wire: #4b5565;
    --trace: #a78bfa;
    --loop: #fb923c;
    --track: #08090d; --fill: #3b82f6;
    --raised: #252a35;
    --canvas: #0b0d11; --grid: #1d222b;
    --shadow: 0 1px 3px rgb(0 0 0 / .4);
    --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / .7),
      0 0 0 1px rgb(255 255 255 / .04);
  }
  :root[data-style="modern"] body {
    font-family: var(--sans); -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  :root[data-style="modern"] ::selection {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
  }
  :root[data-style="modern"] :focus-visible {
    outline: 2px solid var(--ring); outline-offset: 1px;
  }
  :root[data-style="modern"] :is(.choices, #yang-list, #yang-text, .log,
    .notes, #loops-list, .download-body, .packets-body, #about-text, .empty,
    .bridge-body) { scrollbar-width: thin; }

  /* ===== panels ===== */

  /* The panels stand apart on the ground, the gutters between them showing
     where they are only once hovered, as a line down their middle. */
  :root[data-style="modern"] .app { padding: var(--gutter); }
  :root[data-style="modern"] .panel {
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow);
  }
  :root[data-style="modern"] .gutter { background: transparent; }
  :root[data-style="modern"] .gutter:hover,
  :root[data-style="modern"] .gutter.dragging {
    background: linear-gradient(var(--accent), var(--accent)) center / 2px 100%
      no-repeat;
  }
  :root[data-style="modern"] .gutter.horizontal:hover,
  :root[data-style="modern"] .gutter.horizontal.dragging {
    background-size: 100% 2px;
  }
  :root[data-style="modern"] .head,
  :root[data-style="modern"] .brand {
    height: 40px; gap: .5rem; padding: 0 .5rem 0 .75rem; font-size: 12px;
  }
  :root[data-style="modern"] .head .label {
    color: var(--fg); font-size: 13px; letter-spacing: 0; text-transform: none;
  }
  :root[data-style="modern"] button.fold {
    padding: .35rem; border-radius: 7px;
  }
  :root[data-style="modern"] button.fold:hover { background: var(--sel); }
  :root[data-style="modern"] #bottom-fold { margin-right: .4rem; }

  /* ===== side panel ===== */

  :root[data-style="modern"] .brand .home { gap: .55rem; }
  :root[data-style="modern"] .brand img { width: 20px; height: 20px; }
  :root[data-style="modern"] .brand .name {
    font-size: 14px; font-weight: 650; letter-spacing: -.015em;
  }
  :root[data-style="modern"] .choices { padding: .5rem; }
  :root[data-style="modern"] .folder-head {
    padding: .45rem .5rem; border-radius: 8px; font-size: 13px;
    letter-spacing: 0;
  }
  :root[data-style="modern"] .folder-head .count {
    min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--chip); font-size: 10.5px; font-weight: 500;
    line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  :root[data-style="modern"] .group-head .title { font-size: 12.5px; }
  :root[data-style="modern"] .choice {
    padding: .45rem .6rem .5rem; border-radius: 8px;
  }
  /* The name of a topology takes what is left of its row by the number of
     its routers, which stays on the row with it however long it is. */
  :root[data-style="modern"] .choice .title { flex: 1 1 0; min-width: 0; }
  :root[data-style="modern"] .choice .size { flex: none; }
  :root[data-style="modern"] .choice[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  :root[data-style="modern"] .rail-label { padding: 1rem 0; }

  /* ===== controls ===== */

  :root[data-style="modern"] button { border-radius: 7px; }
  /* The buttons that do what a window or form is for, and the one that
     starts the topology, lit from above. */
  :root[data-style="modern"] :is(#run, #download-go, #bridge-retry,
    .trace-form button[type="submit"]) {
    background-color: var(--fill);
    background-image: linear-gradient(rgb(255 255 255 / .14), transparent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18),
      0 1px 2px rgb(15 23 42 / .2),
      0 2px 8px -2px color-mix(in srgb, var(--fill) 50%, transparent);
  }
  :root[data-style="modern"] :is(#run, #download-go, #bridge-retry,
    .trace-form button[type="submit"]):hover:not(:disabled) {
    filter: brightness(1.08);
  }
  :root[data-style="modern"] :is(#download-go, #bridge-retry,
    .trace-form button[type="submit"]) {
    padding: .35rem .9rem; font-weight: 500;
  }
  :root[data-style="modern"] #run {
    height: 26px; margin-left: .4rem; padding: 0 .65rem 0 .55rem; gap: .4rem;
    font-size: 12px; font-weight: 600;
  }
  /* Stop takes the color of what it does to the topology, as a control of
     less weight than Start, which is the one to find. */
  :root[data-style="modern"] #run.running {
    border-color: color-mix(in srgb, var(--bad) 35%, transparent);
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    box-shadow: none; color: var(--bad);
  }
  :root[data-style="modern"] #pause {
    height: 26px; padding: 0 .65rem 0 .55rem; gap: .4rem; border-color: var(--line);
    background: var(--raised); box-shadow: var(--shadow); font-size: 12px;
  }
  :root[data-style="modern"] #pause.paused {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: var(--tint);
  }
  :root[data-style="modern"] button.ghost {
    background: var(--raised); box-shadow: var(--shadow);
  }
  :root[data-style="modern"] button.ghost:hover:not(:disabled) {
    background: var(--sel);
  }
  /* The close button of a window, and the others drawn as no more than a
     sign, take no frame until hovered. */
  :root[data-style="modern"] button.ghost.icon {
    justify-content: center; width: 26px; height: 26px; padding: 0;
    border-color: transparent; background: transparent; box-shadow: none;
    color: var(--muted); font-size: 18px; font-weight: 400;
  }
  :root[data-style="modern"] button.ghost.icon:hover:not(:disabled) {
    background: var(--sel); color: var(--fg);
  }
  :root[data-style="modern"] :is(#about-close, #settings-close, #download-close,
    #bridge-close, #packets-close, #loops-close, #yang-close) {
    margin-right: -.25rem;
  }
  :root[data-style="modern"] :is(#packet-types-reset, #loops-clear) {
    padding: .15rem .6rem; font-size: 11.5px;
  }
  /* The buttons of the page at the end of the head of the drawing, which
     take a ground once hovered. */
  :root[data-style="modern"] :is(#loops-open, #download, #about, #yang-open) {
    padding: .3rem .45rem; border-radius: 7px; color: var(--muted);
    font-size: 11.5px; font-weight: 500;
  }
  :root[data-style="modern"] :is(#loops-open, #download, #about,
    #yang-open):is(:hover, [aria-expanded="true"]) {
    background: var(--sel); color: var(--fg);
  }
  :root[data-style="modern"] :is(#theme, #settings-open, #repo) {
    justify-content: center; width: 26px; height: 26px; padding: 0;
    border-radius: 7px; color: var(--muted);
  }
  :root[data-style="modern"] :is(#theme, #settings-open, #repo):hover,
  :root[data-style="modern"] #settings-open[aria-expanded="true"] {
    background: var(--sel); color: var(--fg);
  }
  :root[data-style="modern"] :is(#theme, #settings-open, #repo) svg {
    width: 15px; height: 15px;
  }
  :root[data-style="modern"] #repo { align-items: center; margin-right: .1rem; }
  /* A switch in place of a box to tick, wherever a setting is turned on and
     off. */
  :root[data-style="modern"] :is(.setting, .toggle) input[type="checkbox"] {
    appearance: none; position: relative; flex: none; width: 30px;
    height: 18px; border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--fg) 18%, transparent);
    transition: background .15s;
  }
  :root[data-style="modern"] :is(.setting, .toggle) input[type="checkbox"]::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 14px;
    height: 14px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s;
  }
  :root[data-style="modern"] :is(.setting, .toggle) input[type="checkbox"]:checked {
    background: var(--fill);
  }
  :root[data-style="modern"] :is(.setting, .toggle) input[type="checkbox"]:checked::before {
    transform: translateX(12px);
  }
  :root[data-style="modern"] .toggle { gap: .45rem; margin-left: .5rem; }
  :root[data-style="modern"] .toggle input[type="checkbox"] {
    width: 26px; height: 16px;
  }
  :root[data-style="modern"] .toggle input[type="checkbox"]::before {
    width: 12px; height: 12px;
  }
  :root[data-style="modern"] .toggle input[type="checkbox"]:checked::before {
    transform: translateX(10px);
  }
  :root[data-style="modern"] :is(.setting select, .trace-form select,
    .trace-form input),
  :root[data-style="modern"] #yang-filter {
    height: 28px; padding: 0 .55rem; border: 1px solid var(--line);
    border-radius: 7px; background-color: var(--raised);
    box-shadow: var(--shadow); font-size: 12px;
  }
  :root[data-style="modern"] :is(.setting select, .trace-form select) {
    appearance: none; padding-right: 1.7rem; font-family: inherit;
    background: var(--raised) no-repeat right .55rem center / 10px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.75 5 6.75 8 3.75' fill='none' stroke='%238a93a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  :root[data-style="modern"] :is(.setting select, .trace-form select,
    .trace-form input):focus,
  :root[data-style="modern"] #yang-filter:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
  }
  /* A segmented control is a track with the segment picked raised from
     it. */
  :root[data-style="modern"] .seg,
  :root[data-style="modern"] #seg {
    gap: 2px; padding: 2px; border: 0; border-radius: 8px;
    background: var(--track);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  }
  :root[data-style="modern"] .seg button,
  :root[data-style="modern"] #seg button {
    padding: .2rem .65rem; border-radius: 6px; color: var(--muted);
    font-size: 11.5px; font-weight: 500;
  }
  :root[data-style="modern"] :is(.seg, #seg) button:hover:not([aria-pressed="true"]) {
    color: var(--fg);
  }
  :root[data-style="modern"] :is(.seg, #seg) button[aria-pressed="true"] {
    background: var(--raised); color: var(--fg); font-weight: 600;
    box-shadow: 0 1px 2px rgb(15 23 42 / .12),
      0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
  }

  /* ===== head of the drawing ===== */

  :root[data-style="modern"] #topology-head { gap: .35rem; }
  /* The head holds more than in the classic style, and gives up what it
     does when narrow sooner. */
  @container topology-head (max-width: 900px) {
    :root[data-style="modern"] #areas-label { display: none; }
    :root[data-style="modern"] #areas-short { display: inline; }
  }
  @container topology-head (max-width: 760px) {
    :root[data-style="modern"] #topology-title .variation { display: none; }
  }
  @container topology-head (max-width: 640px) {
    :root[data-style="modern"] #topology-summary { display: none; }
  }
  @container topology-head (max-width: 600px) {
    :root[data-style="modern"] #areas-toggle { display: none; }
  }
  @container topology-head (max-width: 570px) {
    :root[data-style="modern"] :is(#run, #pause) { padding: 0 .5rem; }
    :root[data-style="modern"] :is(#run-label, #pause-label) {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
  }
  /* The protocol is a badge before the name of the topology, and the
     variation a step after it. */
  :root[data-style="modern"] #topology-title { gap: .45rem; }
  :root[data-style="modern"] #topology-title .proto {
    padding: .1rem .4rem; border-radius: 5px; background: var(--tint);
    color: var(--accent); font-size: 10.5px; font-weight: 650;
    letter-spacing: .02em;
  }
  :root[data-style="modern"] #topology-title .name {
    font-size: 14px; letter-spacing: -.01em;
  }
  :root[data-style="modern"] #topology-title .variation {
    color: var(--muted); font-size: 12.5px;
  }
  :root[data-style="modern"] #topology-title .variation::before {
    content: "/"; margin-right: .45rem; color: var(--line);
  }
  :root[data-style="modern"] #topology-title .hint {
    width: 15px; height: 15px; font-size: 9.5px;
  }
  /* How many links are up, as a status pill with a light. */
  :root[data-style="modern"] #topology-summary > span {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .5rem .15rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, transparent);
    font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  }
  :root[data-style="modern"] #topology-summary > span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
  }
  /* The trace is cut short before the name of the topology is. */
  :root[data-style="modern"] .chip {
    flex-shrink: 4; height: 26px; margin-left: .4rem; border-color: var(--line);
    border-radius: 7px; background: var(--raised); box-shadow: var(--shadow);
  }
  :root[data-style="modern"] #trace-close {
    align-self: stretch; width: 24px; height: auto; border-radius: 0;
  }

  /* ===== topology ===== */

  /* The drawing stands on a ground of dots, a shade off the panel, which
     its routers stand out from as cards. */
  :root[data-style="modern"] #topology {
    background-color: var(--canvas);
    background-image: radial-gradient(var(--grid) 1px, transparent 1.5px);
    background-size: 18px 18px; background-position: center;
  }
  :root[data-style="modern"] .box { rx: 9px; }
  :root[data-style="modern"] .lan { fill: var(--box); stroke: var(--box-line); }
  :root[data-style="modern"] .dot.up {
    stroke: var(--ok); stroke-opacity: .25; stroke-width: 4;
  }
  :root[data-style="modern"] text.name {
    font: 600 13.5px var(--sans); letter-spacing: -.01em;
  }
  :root[data-style="modern"] .badge {
    font: 600 8px var(--sans); letter-spacing: .06em;
  }
  :root[data-style="modern"] .area .area-name { font-family: var(--sans); }
  :root[data-style="modern"] .area .ground {
    fill-opacity: .06; stroke-opacity: .45;
  }
  :root[data-style="modern"] .link { stroke-linecap: round; }
  :root[data-style="modern"] .area0 { color: #2563eb; }
  :root[data-style="modern"] .area1 { color: #7c3aed; }
  :root[data-style="modern"] .area2 { color: #059669; }
  :root[data-style="modern"] .area3 { color: #ea580c; }
  :root[data-style="modern"][data-theme="dark"] .area0 { color: #60a5fa; }
  :root[data-style="modern"][data-theme="dark"] .area1 { color: #a78bfa; }
  :root[data-style="modern"][data-theme="dark"] .area2 { color: #34d399; }
  :root[data-style="modern"][data-theme="dark"] .area3 { color: #fb923c; }
  /* The zoom, a floating bar of its own. */
  :root[data-style="modern"] #zoom {
    right: 10px; bottom: 10px; gap: 1px; padding: 3px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel); box-shadow: var(--shadow-lg); opacity: .9;
  }
  :root[data-style="modern"] #zoom button {
    border: 0; border-radius: 6px; background: transparent; box-shadow: none;
    color: var(--muted);
  }
  :root[data-style="modern"] #zoom button:hover:not(:disabled) {
    background: var(--sel); color: var(--fg);
  }
  /* What the lab is, while nothing is picked, as a card over the ground. */
  :root[data-style="modern"] .empty { padding: 1.5rem 0; }
  :root[data-style="modern"] .intro {
    max-width: 36rem; margin: 0 1rem; padding: 1.75rem 2rem;
    border: 1px solid var(--line); border-radius: 16px;
    background: radial-gradient(70% 40% at 50% 0%, rgb(138 92 240 / .1),
      transparent) var(--panel);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px; line-height: 1.6;
  }
  :root[data-style="modern"] .intro p,
  :root[data-style="modern"] .intro ul { margin-bottom: .75rem; }
  :root[data-style="modern"] .intro a,
  :root[data-style="modern"] #about-text a {
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    text-underline-offset: 2px;
  }
  :root[data-style="modern"] .about-logo {
    width: 80px; height: 80px; margin-bottom: 1rem;
    filter: drop-shadow(0 6px 18px rgb(138 92 240 / .35));
  }

  /* ===== windows ===== */

  :root[data-style="modern"] :is(#about-box, #settings-box, #packets-box,
    #download-box, #bridge-box, #loops-box, #yang-box) {
    border-color: var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg);
  }
  :root[data-style="modern"] :is(#about-box, #settings-box, #packets-box,
    #download-box, #bridge-box, #loops-box, #yang-box) > .head {
    height: 44px; padding: 0 .6rem 0 1rem;
  }
  :root[data-style="modern"] :is(#menu, #peek, #tip, #topology-help, #palette) {
    border-color: var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg);
  }
  :root[data-style="modern"] :is(#tip .hint, #yang-text .note) {
    font-family: var(--sans);
  }
  :root[data-style="modern"] #yang-backdrop { background: rgb(2 6 23 / .5); }
  :root[data-style="modern"] #yang-list { padding: .4rem; }
  :root[data-style="modern"] :is(#yang-list button, #menu > button) {
    padding: .3rem .55rem; border-radius: 6px; font-weight: 400;
  }
  :root[data-style="modern"] #yang-list button[aria-pressed="true"] {
    background: var(--tint); box-shadow: none; color: var(--accent);
  }
  :root[data-style="modern"] #menu { padding: .3rem; }
  :root[data-style="modern"] #menu .what {
    padding: .35rem .55rem .45rem; margin-bottom: .25rem;
  }
  :root[data-style="modern"] #menu > button { padding: .4rem .55rem; }
  :root[data-style="modern"] .setting { gap: 1.25rem; padding: .85rem 1rem; }
  :root[data-style="modern"] .setting .name { font-weight: 550; }
  :root[data-style="modern"] #packets-open { margin-top: .55rem; }
  :root[data-style="modern"] .download-body { padding: .4rem 1rem; }
  :root[data-style="modern"] .download-foot,
  :root[data-style="modern"] .bridge-foot { padding: .65rem 1rem; }
  :root[data-style="modern"] #about-text { padding: 1rem 1.25rem 1.1rem; }
  :root[data-style="modern"] .bridge-body code.command { border-radius: 6px; }

  /* ===== tabs ===== */

  :root[data-style="modern"] .tabs { padding: 0; gap: 0; }
  :root[data-style="modern"] .strip { padding-left: .25rem; }
  :root[data-style="modern"] .step { border-radius: 0; }
  :root[data-style="modern"] .tab {
    gap: .4rem; padding: 0 .65rem; border-right: 0; border-radius: 0;
    font-size: 12.5px; font-weight: 500;
  }
  :root[data-style="modern"] .tab:hover { background: transparent; color: var(--fg); }
  :root[data-style="modern"] .tab[aria-pressed="true"] {
    background: transparent; font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  :root[data-style="modern"] .tab .pip.up {
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ok) 22%, transparent);
  }
  :root[data-style="modern"] #seg { margin-right: .4rem; }
  :root[data-style="modern"] .term { padding: 6px 0 4px 10px; }
  :root[data-style="modern"] :is(.log, .notes) { padding: 6px 10px; }