/**
 * Material Design 3 theme for Hybula Looking Glass.
 *
 * Color roles generated with @material/material-color-utilities 0.3.0
 * (SchemeTonalSpot, seed #1565C0). To rebrand, regenerate the role values
 * from a new seed; every component below only consumes --md-sys-* tokens.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
    color-scheme: light dark;

    --md-sys-color-primary: light-dark(#405f90, #a9c7ff);
    --md-sys-color-on-primary: light-dark(#ffffff, #08305f);
    --md-sys-color-primary-container: light-dark(#d6e3ff, #274777);
    --md-sys-color-on-primary-container: light-dark(#274777, #d6e3ff);
    --md-sys-color-secondary: light-dark(#555f71, #bdc7dc);
    --md-sys-color-on-secondary: light-dark(#ffffff, #283141);
    --md-sys-color-secondary-container: light-dark(#dae2f9, #3e4758);
    --md-sys-color-on-secondary-container: light-dark(#3e4758, #dae2f9);
    --md-sys-color-tertiary: light-dark(#6f5575, #dcbce1);
    --md-sys-color-on-tertiary: light-dark(#ffffff, #3f2845);
    --md-sys-color-tertiary-container: light-dark(#f9d8fd, #563e5c);
    --md-sys-color-on-tertiary-container: light-dark(#563e5c, #f9d8fd);
    --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
    --md-sys-color-on-error: light-dark(#ffffff, #690005);
    --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
    --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
    --md-sys-color-surface: light-dark(#f9f9ff, #111318);
    --md-sys-color-on-surface: light-dark(#191c20, #e2e2e9);
    --md-sys-color-on-surface-variant: light-dark(#44474e, #c4c6cf);
    --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e13);
    --md-sys-color-surface-container-low: light-dark(#f3f3fa, #191c20);
    --md-sys-color-surface-container: light-dark(#ededf4, #1d2024);
    --md-sys-color-surface-container-high: light-dark(#e7e8ee, #282a2f);
    --md-sys-color-surface-container-highest: light-dark(#e2e2e9, #33353a);
    --md-sys-color-outline: light-dark(#74777f, #8e9099);
    --md-sys-color-outline-variant: light-dark(#c4c6cf, #44474e);
    --md-sys-color-inverse-surface: light-dark(#2e3036, #e2e2e9);
    --md-sys-color-inverse-on-surface: light-dark(#f0f0f7, #2e3036);
    --md-sys-color-inverse-primary: light-dark(#a9c7ff, #405f90);
    --md-sys-color-shadow: #000000;

    /* Roboto has no CJK glyphs, so Chinese text falls through to the platform's CJK face. */
    --md-ref-typeface-brand: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
    --md-ref-typeface-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
    --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
    --md-sys-elevation-3: 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);

    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium2: 300ms;

    --md-sys-state-hover: .08;
    --md-sys-state-focus: .10;
    --md-sys-state-pressed: .10;
}

/* Traditional Chinese prefers TC faces: shared characters such as 骨 and 說 have different standard glyph shapes. */
:root:lang(zh-TW) {
    --md-ref-typeface-brand: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
    --md-ref-typeface-plain: 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 1rem/1.5rem var(--md-ref-typeface-plain);
    letter-spacing: .03125rem;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--md-sys-color-primary);
    text-underline-offset: .15em;
}

:focus-visible {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

code, pre, .md-mono { font-family: var(--md-ref-typeface-mono); }

.material-symbols-rounded {
    font-size: 1.5rem;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    flex-shrink: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Logos from config are swapped per color scheme without JS, so there is no flash on load. */
.logo-dark { display: none !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-light { display: none !important; }
    :root:not([data-theme="light"]) .logo-dark { display: flex !important; }
}

:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: flex !important; }

/* ------------------------------------------------------------------ */
/* Top app bar                                                         */
/* ------------------------------------------------------------------ */

.md-top-app-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--md-sys-color-surface);
    transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* MD3 top app bars switch to a container tone instead of casting a shadow when content scrolls under them. */
.md-top-app-bar.is-scrolled { background: var(--md-sys-color-surface-container); }

.md-top-app-bar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    max-width: 66rem;
    margin: 0 auto;
    padding: .5rem 1rem;
}

.md-top-app-bar__brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.md-top-app-bar__brand a {
    align-items: center;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    min-width: 0;
}

.md-top-app-bar__brand :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font: 400 1.375rem/1.75rem var(--md-ref-typeface-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-top-app-bar__brand img { display: block; max-height: 2.5rem; width: auto; }

.md-select { min-width: 0; max-width: 50%; }
.md-select select { max-width: 100%; }

/* Segmented button: each segment links to the looking glass of another routing profile. */
/* Equal columns: the selected segment's check icon must not make it wider than the others. */
.md-segmented-button {
    position: relative;
    display: inline-grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    flex-shrink: 0;
    border-radius: var(--md-sys-shape-corner-full);
}

/* Outline drawn above the segments so the selected fill doesn't cover it. */
.md-segmented-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    pointer-events: none;
}

.md-segmented-button__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* Fits the widest selected label (✓ Plus), so the pill is the same size on every profile's site. */
    min-width: 5.5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    color: var(--md-sys-color-on-surface);
    font: 500 .875rem/1.25rem var(--md-ref-typeface-plain);
    letter-spacing: .00625rem;
    text-decoration: none;
    white-space: nowrap;
}

.md-segmented-button__segment:first-child { border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); }
.md-segmented-button__segment:last-child { border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; }
.md-segmented-button__segment + .md-segmented-button__segment { border-left: 1px solid var(--md-sys-color-outline); }
.md-segmented-button__segment .material-symbols-rounded { font-size: 1.125rem; }

.md-segmented-button__segment.is-selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.md-main {
    display: grid;
    gap: 1.5rem;
    max-width: 66rem;
    margin: 0 auto;
    padding: .5rem 1rem 2rem;
}

@media (min-width: 600px) {
    .md-top-app-bar__inner { padding-inline: 1.5rem; }
    .md-main { padding-inline: 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.md-card {
    --md-field-container: var(--md-sys-color-surface-container-low);
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-1);
    padding: 1.25rem;
}

@media (min-width: 600px) {
    .md-card { padding: 1.5rem; }
}

.md-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.md-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-card__title {
    margin: 0;
    font: 400 1.375rem/1.75rem var(--md-ref-typeface-brand);
}

.md-card__subtitle {
    margin: .125rem 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .015625rem;
}

/* ------------------------------------------------------------------ */
/* Info tiles (read-only network facts)                                */
/* ------------------------------------------------------------------ */

.md-tile-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .md-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Six tracks divide into both thirds (span 2) and halves (span 3), so a row can hold three tiles or two. */
@media (min-width: 840px) {
    .md-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md-tile-grid > .md-tile { grid-column: span 2; }
    .md-tile-grid > .md-tile--half { grid-column: span 3; }
    .md-tile-grid > .md-tile--wide { grid-column: span 4; }
}

.md-tile {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .75rem .5rem .75rem 1rem;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-highest);
}

.md-tile__body { flex: 1; min-width: 0; }

.md-tile__label {
    display: block;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: .03125rem;
}

.md-tile__value {
    display: block;
    margin-top: .125rem;
    font-size: 1rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-tile__value.md-mono {
    font-size: .9375rem;
    letter-spacing: 0;
    user-select: all;
}

.md-tile__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* State layer (shared by every interactive component)                 */
/* ------------------------------------------------------------------ */

.md-state {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
}

.md-state::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-duration-short2) linear;
}

@media (hover: hover) {
    .md-state:hover::before { opacity: var(--md-sys-state-hover); }
}

.md-state:focus-visible::before { opacity: var(--md-sys-state-focus); }
.md-state:active::before { opacity: var(--md-sys-state-pressed); }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.5rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    font: 500 .875rem/1.25rem var(--md-ref-typeface-plain);
    letter-spacing: .00625rem;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-button .material-symbols-rounded { font-size: 1.125rem; }
.md-button:has(> .material-symbols-rounded:first-child) { padding-inline-start: 1rem; }

.md-button--filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

@media (hover: hover) {
    .md-button--filled:hover:not(:disabled) { box-shadow: var(--md-sys-elevation-1); }
}

.md-button--tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-button--outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}

.md-button:disabled {
    cursor: default;
    box-shadow: none;
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

.md-button:disabled::before { opacity: 0 !important; }

.md-icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.md-icon-button.is-done { color: var(--md-sys-color-primary); }

/* ------------------------------------------------------------------ */
/* Outlined text field                                                 */
/* ------------------------------------------------------------------ */

.md-text-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    border-radius: var(--md-sys-shape-corner-extra-small);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface-variant);
    transition: box-shadow var(--md-sys-motion-duration-short2) linear;
}

@media (hover: hover) {
    .md-text-field:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
}

.md-text-field:focus-within {
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.md-text-field__leading {
    margin-inline-start: .75rem;
}

.md-text-field__input {
    flex: 1;
    min-width: 0;
    height: 3.5rem;
    padding: 0 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 400 1rem/1.5rem var(--md-ref-typeface-plain);
    letter-spacing: .03125rem;
    caret-color: var(--md-sys-color-primary);
}

.md-text-field__leading + .md-text-field__input { padding-inline-start: .75rem; }

.md-text-field__input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0;
    transition: opacity var(--md-sys-motion-duration-short2) linear;
}

.md-text-field__input:focus::placeholder { opacity: 1; }

/* The label sits in the field until focus or content, then floats into the notch on the outline. */
.md-text-field__label {
    position: absolute;
    left: 1rem;
    top: 50%;
    padding: 0 .25rem;
    margin-left: -.25rem;
    background: var(--md-field-container, var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1rem;
    line-height: 1.5rem;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition:
        top var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        font-size var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        color var(--md-sys-motion-duration-short2) linear;
}

.md-text-field__leading ~ .md-text-field__label { left: 3.25rem; }

.md-text-field:focus-within .md-text-field__label,
.md-text-field__input:not(:placeholder-shown) ~ .md-text-field__label {
    top: 0;
    left: 1rem;
    font-size: .75rem;
    line-height: 1rem;
}

.md-text-field:focus-within .md-text-field__label { color: var(--md-sys-color-primary); }

.md-text-field__supporting {
    margin: .25rem 1rem 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .025rem;
}

/* ------------------------------------------------------------------ */
/* Select (header location switcher)                                   */
/* ------------------------------------------------------------------ */

.md-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--md-sys-color-on-surface-variant);
}

.md-select > .material-symbols-rounded {
    position: absolute;
    pointer-events: none;
}

.md-select > .material-symbols-rounded:first-child { left: .5rem; font-size: 1.125rem; }
.md-select > .material-symbols-rounded:last-child { right: .5rem; }

.md-select select {
    appearance: none;
    height: 2.5rem;
    max-width: 16rem;
    padding: 0 2.5rem 0 2rem;
    border: 0;
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 500 .875rem/1.25rem var(--md-ref-typeface-plain);
    letter-spacing: .00625rem;
    text-overflow: ellipsis;
    cursor: pointer;
}

.md-select select option { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); }

@media (hover: hover) {
    .md-select select:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
}

/* ------------------------------------------------------------------ */
/* Chips                                                               */
/* ------------------------------------------------------------------ */

.md-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2rem;
    padding: 0 1rem;
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    font: 500 .875rem/1.25rem var(--md-ref-typeface-plain);
    letter-spacing: .00625rem;
    white-space: nowrap;
}

.md-chip .material-symbols-rounded { font-size: 1.125rem; color: var(--md-sys-color-primary); }
.md-chip:has(> .material-symbols-rounded:first-child) { padding-inline-start: .5rem; }

.md-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.md-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.md-chip-set__legend {
    padding: 0;
    margin-bottom: .5rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: .00625rem;
}

/* Filter chips back the method choice with real radio inputs, so the form posts exactly as before. */
.md-filter-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.md-filter-chip label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2rem;
    padding: 0 1rem;
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    font: 500 .875rem/1.25rem var(--md-ref-typeface-plain);
    letter-spacing: .00625rem;
    white-space: nowrap;
    transition:
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        padding var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.md-filter-chip .material-symbols-rounded {
    width: 0;
    font-size: 1.125rem;
    opacity: 0;
    transition:
        width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        opacity var(--md-sys-motion-duration-short2) linear;
    margin-inline-end: -.5rem;
}

.md-filter-chip input:checked + label {
    padding-inline-start: .5rem;
    box-shadow: none;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-filter-chip input:checked + label .material-symbols-rounded {
    width: 1.125rem;
    opacity: 1;
    margin-inline-end: 0;
}

.md-filter-chip input:focus-visible + label {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

.md-filter-chip input:focus-visible + label::before { opacity: var(--md-sys-state-focus); }

/* ------------------------------------------------------------------ */
/* Checkbox                                                            */
/* ------------------------------------------------------------------ */

.md-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .015625rem;
}

.md-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 40px touch target with the 18px box centered inside it. */
.md-checkbox__box {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-start: -.6875rem;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
}

.md-checkbox__box::after {
    content: '';
    grid-area: 1 / 1;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px currentColor;
    transition: background-color var(--md-sys-motion-duration-short2) linear;
}

.md-checkbox__box .material-symbols-rounded {
    grid-area: 1 / 1;
    z-index: 1;
    font-size: 1rem;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
    color: var(--md-sys-color-on-primary);
    transform: scale(0);
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-checkbox input:checked + .md-checkbox__box { color: var(--md-sys-color-primary); }
.md-checkbox input:checked + .md-checkbox__box::after { background: currentColor; }
.md-checkbox input:checked + .md-checkbox__box .material-symbols-rounded { transform: scale(1); }

.md-checkbox input:focus-visible + .md-checkbox__box {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: -2px;
}

@media (hover: hover) {
    .md-checkbox:hover .md-checkbox__box { background: color-mix(in srgb, currentColor 8%, transparent); }
}

/* ------------------------------------------------------------------ */
/* Looking glass form                                                  */
/* ------------------------------------------------------------------ */

.lg-form {
    display: grid;
    gap: 1.25rem;
}

.lg-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.lg-form__actions .md-button { margin-inline-start: auto; }

.md-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .015625rem;
}

.md-banner .material-symbols-rounded { font-size: 1.25rem; }

/* ------------------------------------------------------------------ */
/* Command output                                                      */
/* ------------------------------------------------------------------ */

.lg-output {
    overflow: hidden;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-highest);
    animation: md-enter var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
}

.lg-output__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem .25rem .25rem 1rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.lg-output__header .material-symbols-rounded:first-child { font-size: 1.25rem; }
.lg-output__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lg-output pre {
    margin: 0;
    padding: .75rem 1rem 1rem;
    overflow-x: auto;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface);
    font-size: .8125rem;
    line-height: 1.25rem;
    white-space: pre;
    word-wrap: normal;
    min-height: 3.25rem;
}

.md-linear-progress:not([hidden]) + pre { border-top-color: transparent; }

.lg-output__empty {
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--md-ref-typeface-plain);
    white-space: normal;
}

/* Indeterminate linear progress: two bars at different rates, per the MD3 spec. */
.md-linear-progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    background: var(--md-sys-color-secondary-container);
}

.md-linear-progress::before,
.md-linear-progress::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--md-sys-color-primary);
    border-radius: 2px;
}

.md-linear-progress::before { animation: md-progress-primary 2s infinite linear; }
.md-linear-progress::after { animation: md-progress-secondary 2s infinite linear; }

@keyframes md-progress-primary {
    0% { left: -35%; width: 35%; }
    60% { left: 100%; width: 35%; }
    100% { left: 100%; width: 35%; }
}

@keyframes md-progress-secondary {
    0%, 40% { left: -60%; width: 60%; }
    100% { left: 110%; width: 10%; }
}

@keyframes md-enter {
    from { opacity: 0; transform: translateY(8px); }
}

/* ------------------------------------------------------------------ */
/* Speedtest                                                           */
/* ------------------------------------------------------------------ */

.lg-speedtest {
    display: grid;
    gap: 1.25rem;
}

.lg-command-grid {
    display: grid;
    gap: .75rem;
}

@media (min-width: 840px) {
    .lg-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lg-command code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .875rem;
}

.lg-section-label {
    display: block;
    margin-bottom: .5rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: .00625rem;
}

.lg-file-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ------------------------------------------------------------------ */
/* Menu (secondary location list)                                      */
/* ------------------------------------------------------------------ */

.md-menu { position: relative; }

.md-menu > summary { list-style: none; }
.md-menu > summary::-webkit-details-marker { display: none; }

.md-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    z-index: 20;
    min-width: 12rem;
    max-height: 20rem;
    overflow-y: auto;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-2);
    animation: md-enter var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
}

.md-menu__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 3rem;
    padding: 0 1rem;
    color: var(--md-sys-color-on-surface);
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Selectable menu items keep a check slot so labels stay aligned whether or not they're selected. */
.md-menu__item .material-symbols-rounded {
    font-size: 1.25rem;
    color: var(--md-sys-color-primary);
    visibility: hidden;
}

.md-menu__item.is-selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-menu__item.is-selected .material-symbols-rounded { visibility: visible; color: inherit; }

.md-top-app-bar .md-menu { flex-shrink: 0; }

/* Latin letter-spacing reads as gaps between CJK characters. */
:lang(zh) body, :lang(zh) .md-button, :lang(zh) .md-chip, :lang(zh) .md-filter-chip label { letter-spacing: normal; }

/* ------------------------------------------------------------------ */
/* Snackbar                                                            */
/* ------------------------------------------------------------------ */

.md-snackbar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 30;
    max-width: calc(100vw - 2rem);
    padding: .875rem 1rem;
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    box-shadow: var(--md-sys-elevation-3);
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .015625rem;
    opacity: 0;
    transform: translate(-50%, 1rem);
    pointer-events: none;
    transition:
        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
        transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate);
}

.md-snackbar.is-open {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-duration: var(--md-sys-motion-duration-medium2);
    transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.md-footer {
    max-width: 66rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .025rem;
}

@media (min-width: 600px) {
    .md-footer { padding-inline: 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    /* A frozen indeterminate bar would look like a stuck determinate one, so pulse instead. */
    .md-linear-progress::before { left: 0 !important; width: 100% !important; animation: md-pulse 1.6s ease-in-out infinite !important; }
    .md-linear-progress::after { display: none; }

    @keyframes md-pulse {
        50% { opacity: .35; }
    }
}