.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    display: block;
    content: "";
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

/* Sidebar icon: force dark in light mode, light in dark mode.
   The SVG's internal prefers-color-scheme doesn't track class-based toggles,
   so we override with CSS filter. */
.sidebar .app-name-link img.sidebar-icon {
    vertical-align: -3px;
    margin-right: 6px;
    filter: brightness(0);
}

.docsify-dark-mode .sidebar .app-name-link img.sidebar-icon {
    filter: brightness(0) invert(1);
}

/* Override vue.css green theme with blue across both themes */
:root {
    --theme-color: #58a6ff;
    --docs-video-max-width: 1280px;
}

.markdown-section video {
    display: block;
    width: min(100%, var(--docs-video-max-width)) !important;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
}

.markdown-section .docs-home-video {
    width: min(100%, var(--docs-video-max-width));
    margin: 1.5rem auto 0.75rem;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}

.markdown-section .docs-home-video-note {
    width: min(100%, var(--docs-video-max-width));
    margin: 0 auto 1.5rem;
    color: #57606a;
    font-size: 0.95rem;
    text-align: center;
}

.markdown-section .fr-term {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.fr-tooltips-enhanced .markdown-section .fr-term::before,
.fr-tooltips-enhanced .markdown-section .fr-term::after {
    display: none;
    content: none;
}

.markdown-section .fr-term::before,
.markdown-section .fr-term::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 120ms ease;
    z-index: 20;
}

.markdown-section .fr-term::before {
    content: "";
    bottom: calc(100% + 4px);
    border: 6px solid transparent;
    border-top-color: #1f2328;
}

.markdown-section .fr-term::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: min(22rem, 75vw);
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: #1f2328;
    color: #f6f8fa;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.markdown-section .fr-term:hover::before,
.markdown-section .fr-term:hover::after,
.markdown-section .fr-term:focus-visible::before,
.markdown-section .fr-term:focus-visible::after {
    opacity: 1;
}

.markdown-section .fr-term:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.28);
    border-radius: 2px;
}

.fr-tooltip-layer {
    position: fixed;
    z-index: 1000;
    width: max-content;
    max-width: min(22rem, 75vw);
    pointer-events: none;
}

.fr-tooltip-layer[data-visible="true"] {
    pointer-events: auto;
}

.fr-tooltip-content {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: #1f2328;
    color: #f6f8fa;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.fr-tooltip-content a {
    color: #79c0ff;
    text-decoration: underline;
}

.fr-tooltip-arrow {
    position: absolute;
    left: var(--fr-tooltip-arrow-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
}

.fr-tooltip-layer[data-placement="top"] .fr-tooltip-arrow {
    top: calc(100% - 1px);
    border-top-color: #1f2328;
}

.fr-tooltip-layer[data-placement="bottom"] .fr-tooltip-arrow {
    bottom: calc(100% - 1px);
    border-bottom-color: #1f2328;
}

/* Dark mode toggle button (moon / sun) */
:root {
    --dark-moon-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786m1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678'/%3E%3C/svg%3E");
    --dark-sun-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 12a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-1.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5m5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326a.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0M8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0M3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8m13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8m-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13m3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061M2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E");
}

button[onclick="docsifyDarkSwitcher()"] {
    position: absolute;
    right: 10px;
    top: 15px;
    border: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
    background: #555;
    mask-image: var(--dark-moon-icon);
    mask-size: 18px 18px;
}

.docsify-dark-mode button[onclick="docsifyDarkSwitcher()"] {
    background: #c9d1d9;
    mask-image: var(--dark-sun-icon);
}

/* Dark mode: base backgrounds and text */
.docsify-dark-mode,
.docsify-dark-mode .sidebar,
.docsify-dark-mode .app-nav li ul {
    background: #0d1117;
    color: #c9d1d9;
}

.docsify-dark-mode .sidebar {
    border-right: 1px solid #30363d;
}

.docsify-dark-mode .sidebar ul li a {
    color: #c9d1d9;
}

.docsify-dark-mode .sidebar ul li a:hover,
.docsify-dark-mode .sidebar ul li a.active,
.docsify-dark-mode .sidebar ul li.active > a {
    color: #58a6ff;
    border-color: #58a6ff;
}

.docsify-dark-mode .sidebar-toggle {
    background-color: #0d1117;
}

.docsify-dark-mode .sidebar-toggle span {
    background-color: #58a6ff;
}

.docsify-dark-mode .content {
    background-color: #0d1117;
}

.docsify-dark-mode .cover .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
}

/* Dark mode: links */
.docsify-dark-mode .markdown-section a {
    color: #58a6ff;
}

.docsify-dark-mode .markdown-section a:hover {
    color: #79c0ff;
}

/* Dark mode: headings */
.docsify-dark-mode .markdown-section h1,
.docsify-dark-mode .markdown-section h2,
.docsify-dark-mode .markdown-section h3,
.docsify-dark-mode .markdown-section h4,
.docsify-dark-mode .markdown-section h5,
.docsify-dark-mode .markdown-section h6,
.docsify-dark-mode .anchor span {
    color: #f0f6fc;
}

.docsify-dark-mode .markdown-section h2 {
    border-bottom-color: #30363d;
}

/* Dark mode: code */
.docsify-dark-mode .markdown-section code,
.docsify-dark-mode .markdown-section p.tip code {
    background-color: #30363d;
    color: #e6edf3;
}

.docsify-dark-mode .markdown-section pre {
    background-color: #161b22;
}

.docsify-dark-mode .markdown-section pre > code {
    color: #c9d1d9;
    background-color: #161b22;
}

/* Dark mode: tables */
.docsify-dark-mode .markdown-section table {
    display: table;
    border-collapse: collapse;
}

.docsify-dark-mode .markdown-section table th,
.docsify-dark-mode .markdown-section table td {
    border-color: #30363d;
}

.docsify-dark-mode .markdown-section table th {
    background-color: #21262d;
    color: #e6edf3;
}

.docsify-dark-mode .markdown-section table tr:nth-child(2n) {
    background-color: #161b22;
}

/* Dark mode: blockquotes, hr, strong */
.docsify-dark-mode .markdown-section blockquote {
    border-left-color: #3fb950;
    color: #8b949e;
}

.docsify-dark-mode .markdown-section blockquote p {
    color: #8b949e;
}

.docsify-dark-mode .markdown-section hr {
    border-color: #30363d;
}

.docsify-dark-mode .markdown-section strong {
    color: #e6edf3;
}

.docsify-dark-mode .markdown-section img {
    border-radius: 4px;
}

.docsify-dark-mode .markdown-section .docs-home-video-note {
    color: #8b949e;
}

/* Dark mode: search */
.docsify-dark-mode .search {
    border-bottom-color: #30363d;
}

.docsify-dark-mode .search input {
    background-color: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
}

.docsify-dark-mode .search input::placeholder {
    color: #8b949e;
}

.docsify-dark-mode .search .matching-post {
    border-bottom-color: #30363d;
}

.docsify-dark-mode .search a {
    color: #58a6ff;
}

.docsify-dark-mode .search a:hover {
    color: #79c0ff;
}

.docsify-dark-mode .search .search-keyword {
    color: #3fb950;
}

/* Dark mode: tip/warn callouts */
.docsify-dark-mode .markdown-section p.tip {
    background-color: #1c2d1c;
    border-color: #3fb950;
}

.docsify-dark-mode .markdown-section p.warn {
    background-color: #2d2a1c;
    border-color: #d29922;
}