/* =========================

Reset

========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================

Layout

========================= */


.container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 2rem;

}

/* =========================

Variables

========================= */

:root {
    
    color-scheme: dark;

    /* Core colors */

    --color-background: #0f1115;

    --color-surface: #181b22;
    --color-surface-hover: #1f232c;

    --color-border: #2a2f3a;

    --color-text-primary: #f7f8fa;
    --color-text-secondary: #9ca3af;
    --color-text-muted: #6b7280;

    --color-accent: #4f8cff;
    --color-accent-hover: #6da0ff;


    /* Theme-aware supporting colors */

    --color-header-background:
        rgba(15, 17, 21, 0.86);

    --color-surface-soft:
        rgba(255, 255, 255, 0.04);

    --color-surface-soft-strong:
        rgba(255, 255, 255, 0.06);

    --color-section-tint:
        rgba(255, 255, 255, 0.012);

    --color-panel-overlay:
        rgba(10, 13, 19, 0.38);

    --color-grid-line:
        rgba(255, 255, 255, 0.025);

    --color-code-background: #101318;

    --color-shadow:
        rgba(0, 0, 0, 0.35);

    --color-selection:
        rgba(79, 140, 255, 0.3);

    /* Layout */
    --container-width: 1200px;
    --header-height: 70px;
    --toc-height: 58px;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    /* Border radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;

    /* Animation */
    --transition-fast: 180ms ease;
    --transition-normal: 300ms ease;
}

html[data-theme="light"] {
    
    color-scheme: light;

    --color-background: #f5f7fb;

    --color-surface: #ffffff;
    --color-surface-hover: #eef2f8;

    --color-border: #d8dee9;

    --color-text-primary: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;

    --color-accent: #2563eb;
    --color-accent-hover: #1d4ed8;


    --color-header-background:
        rgba(245, 247, 251, 0.88);

    --color-surface-soft:
        rgba(15, 23, 42, 0.045);

    --color-surface-soft-strong:
        rgba(15, 23, 42, 0.07);

    --color-section-tint:
        rgba(15, 23, 42, 0.025);

    --color-panel-overlay:
        rgb(255, 255, 255);

    --color-grid-line:
        rgba(15, 23, 42, 0.065);

    --color-code-background: #f1f5f9;

    --color-shadow:
        rgba(15, 23, 42, 0.12);

    --color-selection:
        rgba(37, 99, 235, 0.2);
}

html[data-theme="light"]
.markdown-image-diagram {
    filter: none;

    opacity: 1;
}

html[data-theme="dark"]
.markdown-image-diagram {
    filter:
        invert(1)
        brightness(1.15);

    opacity: 0.92;
}

/* =========================
   Buttons
========================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.65rem;

    min-height: 48px;

    padding: 0.9rem 1.5rem;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.button-primary {
    background: var(--color-accent);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
}

.button-secondary {
    background: transparent;

    color: var(--color-text-primary);

    border-color: var(--color-border);
}

.button-secondary:hover {
    background: var(--color-surface-hover);
    border-color: #3a4250;

    transform: translateY(-2px);
}

.button:focus-visible {
    outline: 3px solid rgba(79, 140, 255, 0.35);
    outline-offset: 4px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(79, 140, 255, 0.45);
    outline-offset: 4px;
}

/* =========================
   Icons
========================= */

.icon {
    width: 1.1em;
    height: 1.1em;

    flex-shrink: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button .icon {
    transition: transform var(--transition-fast);
}

.button:hover .icon {
    transform: translateX(3px);
}

/* =========================

Base

========================= */

html {
    min-height: 100%;

    background:
        var(--color-background);
}

body {
    min-height: 100vh;

    background:
        var(--color-background);

    color:
        var(--color-text-primary);

    accent-color:
        var(--color-accent);
}

::selection {
    background:
        var(--color-selection);

    color:
        var(--color-text-primary);
}

body {
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
}

section {
    padding: 6rem 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}

[hidden] {
    display: none !important;
}

input,
button,
textarea,
select {
    color-scheme: inherit;
}

/* =========================
   Navigation
========================= */

.nav-menu a[aria-current="page"] {
    color: var(--color-text-primary);
}

.nav-menu a[aria-current="page"]::after {
    content: "";

    display: block;

    width: 4px;
    height: 4px;

    margin: 0.35rem auto 0;

    background: var(--color-accent);

    border-radius: var(--radius-pill);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background:
        var(--color-header-background);

    border-bottom: 1px solid var(--color-border);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.navbar {
    position: relative;

    height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    color: var(--color-text-primary);

    font-size: 1.25rem;
    font-weight: 700;

    text-decoration: none;
    letter-spacing: -0.03em;
}

.nav-menu {
    display: flex;
    align-items: center;

    gap: var(--space-lg);

    list-style: none;
}

.nav-menu a {
    color: var(--color-text-secondary);

    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;

    transition: color var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--color-text-primary);
}

.nav-menu a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 5px;
    border-radius: 2px;
}

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 4px;

    background: transparent;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    cursor: pointer;
}

.nav-toggle-line {
    width: 21px;
    height: 2px;

    background: var(--color-text-primary);

    border-radius: var(--radius-pill);

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.nav-toggle.is-active .nav-toggle-line:first-child {
    transform: translateY(3px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-line:last-child {
    transform: translateY(-3px) rotate(-45deg);
}

/* =========================
   Theme Toggle
========================= */

.nav-theme-item {
    display: flex;
    align-items: center;
}

.theme-toggle {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    padding: 0;

    background:
        var(--color-surface);

    color:
        var(--color-text-secondary);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-pill);

    font: inherit;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast),
        transform
            var(--transition-fast);
}

.theme-toggle:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);

    border-color:
        rgba(79, 140, 255, 0.42);

    transform:
        translateY(-1px);
}

.theme-toggle:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset: 3px;
}

.theme-toggle-icon {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-icon-sun {
    display: block;
}

.theme-toggle-icon-moon {
    display: none;
}

html[data-theme="light"]
.theme-toggle-icon-sun {
    display: none;
}

html[data-theme="light"]
.theme-toggle-icon-moon {
    display: block;
}

.theme-toggle-label {
    display: none;

    font-size: 0.9rem;
    font-weight: 500;
}

/* =========================
   Hero
========================= */

.hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));

    display: flex;
    align-items: center;

    padding: var(--space-xl) 0;

    text-align: center;
}

.hero-content {
    max-width: 900px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-eyebrow {
    color: var(--color-accent);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    margin-bottom: var(--space-md);
}

.hero-title {
    max-width: 12ch;

    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 700;

    line-height: 0.98;
    letter-spacing: -0.06em;

    margin-bottom: var(--space-md);
}

.hero-title span {
    color: var(--color-accent);
}

.hero-description {
    max-width: 650px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.75;

    margin-bottom: var(--space-lg);
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: var(--space-sm);
}

/* =========================
   Page Hero
========================= */

.page-hero {
    padding: var(--space-2xl) 0 var(--space-xl);

    border-bottom: 1px solid var(--color-border);
}

.page-hero-content {
    max-width: 760px;
}

.page-eyebrow {
    color: var(--color-accent);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.page-title {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.page-description {
    color: var(--color-text-secondary);

    max-width: 680px;

    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.75;
}

/* =========================
   Projects Page
========================= */

.projects-section {
    padding-top: var(--space-xl);
}

/* =========================
   Project Filters
========================= */

.project-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-xl);
}

.project-filters {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);
}

.filter-status {
    flex-shrink: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    font-weight: 500;

    white-space: nowrap;
}

.filter-button {
    padding: 0.7rem 1.1rem;

    background: transparent;
    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.filter-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);

    transform: translateY(-1px);
}

.filter-button.is-active {
    background: var(--color-accent);
    color: #ffffff;

    border-color: var(--color-accent);
}

.project-link-muted {
    color: var(--color-text-muted);

    cursor: default;
}

.project-card-header
.project-category {
    margin-bottom: 0;
}

/* =========================
   Markdown Navigation Toggle
========================= */

.markdown-navigation-layout {
    position: relative;

    display: flex;
    align-items: center;

    gap: var(--space-sm);
}


.markdown-navigation-content {
    min-width: 0;

    flex: 1;
}


.markdown-navigation-toggle {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-height: 36px;

    padding:
        0.45rem
        0.75rem;

    background:
        var(--color-surface);

    color:
        var(--color-text-secondary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast);
}


.markdown-navigation-toggle:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);

    border-color:
        rgba(
            79,
            140,
            255,
            0.35
        );
}


.markdown-navigation-toggle-icon {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
            var(--transition-fast);
}

.project-toc.is-collapsed {
    min-height: 0;

    background:
        transparent;

    border-bottom:
        0;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    pointer-events:
        none;
}


.project-toc.is-collapsed
.markdown-navigation-layout {
    min-height: 0;

    justify-content:
        flex-end;
}


.project-toc.is-collapsed
.markdown-navigation-content {
    display: none;
}


.project-toc.is-collapsed
.markdown-navigation-toggle {
    pointer-events:
        auto;

    margin-top:
        0.45rem;
}

.project-toc.is-collapsed
.markdown-navigation-toggle-label {
    display: none;
}

.project-toc.is-collapsed
.markdown-navigation-toggle-icon {
    transform:
        rotate(180deg);
}

.project-toc.is-collapsed
.markdown-navigation-toggle {
    opacity: 0.72;
}


.project-toc.is-collapsed
.markdown-navigation-toggle:hover,
.project-toc.is-collapsed
.markdown-navigation-toggle:focus-visible {
    opacity: 1;
}

/* =========================
   Project Table of Contents
========================= */

.project-toc {
    position: sticky;

    top: var(--header-height);
    z-index: 900;

    min-height: var(--toc-height);

    background:
        var(--color-header-background);

    border-bottom: 1px solid var(--color-border);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.project-toc-list {
    display: flex;
    align-items: center;

    gap: var(--space-xs);

    min-height: var(--toc-height);

    overflow-x: auto;

    list-style: none;

    scrollbar-width: none;
}

.project-toc-list::-webkit-scrollbar {
    display: none;
}

.project-toc-link {
    display: inline-flex;
    align-items: center;

    padding: 0.55rem 0.9rem;

    color: var(--color-text-secondary);

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 0.88rem;
    font-weight: 500;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.project-toc-link:hover {
    color: var(--color-text-primary);

    background: var(--color-surface-hover);
}

.project-toc-link[aria-current="location"] {
    color: var(--color-text-primary);

    background: rgba(79, 140, 255, 0.12);

    border-color: rgba(79, 140, 255, 0.3);
}

.case-study-section[id],
.markdown-document h2[id] {
    scroll-margin-top:
        calc(
            var(--header-height) +
            var(
                --markdown-toc-offset,
                var(--toc-height)
            ) +
            var(--space-sm)
        );
}

/* =========================
   Project Media
========================= */

.project-media-frame {
    margin-top: var(--space-xl);

    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.project-media-placeholder {
    min-height: clamp(320px, 52vw, 620px);

    display: grid;
    place-items: center;

    padding: var(--space-lg);

    background:
        radial-gradient(
            circle at center,
            rgba(79, 140, 255, 0.14),
            transparent 55%
        ),
        linear-gradient(
            var(--color-grid-line) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--color-grid-line) 1px,
            transparent 1px
        ),
        var(--color-surface);

    background-size:
        auto,
        32px 32px,
        32px 32px,
        auto;
}

.media-placeholder-content {
    max-width: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.media-placeholder-icon {
    width: 58px;
    height: 58px;

    margin-bottom: var(--space-md);

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.media-placeholder-label {
    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.media-placeholder-title {
    color: var(--color-text-primary);

    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 600;

    letter-spacing: -0.025em;

    margin-bottom: var(--space-xs);
}

.media-placeholder-description {
    color: var(--color-text-secondary);

    line-height: 1.7;
}

/* =========================
   Development Media
========================= */

.project-media-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-md);
}

.media-plan-card {
    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.media-plan-card-wide {
    grid-column: 1 / -1;
}

.media-plan-visual {
    min-height: 240px;

    display: grid;
    place-items: center;

    padding: var(--space-lg);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.1),
            transparent
        ),
        var(--color-background);

    border-bottom: 1px solid var(--color-border);
}

.media-plan-card-wide .media-plan-visual {
    min-height: 360px;
}

.media-plan-icon {
    width: 58px;
    height: 58px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        stroke var(--transition-normal),
        transform var(--transition-normal);
}

.media-plan-card:hover .media-plan-icon {
    stroke: var(--color-accent);

    transform: scale(1.05);
}

.media-plan-content {
    padding: var(--space-lg);
}

.media-plan-label {
    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.media-plan-content h3 {
    font-size: 1.25rem;

    margin-bottom: var(--space-xs);
}

.media-plan-content p:last-child {
    color: var(--color-text-secondary);

    line-height: 1.7;
}


/* =========================
   Empty State
========================= */

.empty-state {
    padding: var(--space-xl);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    text-align: center;
}

.empty-state-icon {
    width: 48px;
    height: 48px;

    margin-bottom: var(--space-md);

    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.empty-state-title {
    font-size: 1.4rem;

    margin-bottom: var(--space-xs);
}

.empty-state-description {
    color: var(--color-text-secondary);
}


/* =========================
   Section Heading
========================= */

.section-heading {
    max-width: 680px;
    margin-bottom: var(--space-xl);
}

.section-label {
    color: var(--color-accent);

    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;

    margin-bottom: var(--space-sm);
}

.section-description {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
}

/* =========================
   Featured Projects
========================= */

.featured-projects {
    border-top: 1px solid var(--color-border);
}

.project-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.project-card {
    min-height: 320px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    overflow: hidden;

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.project-card:hover {
    background: var(--color-surface-hover);
    border-color: #3a4250;
    transform: translateY(-6px);
}

.project-card-content {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);
}

.project-category {
    color: var(--color-accent);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.project-title {
    font-size: 1.5rem;
    line-height: 1.25;

    margin-bottom: var(--space-sm);
}

.project-description {
    color: var(--color-text-secondary);

    margin-bottom: var(--space-lg);
}

.project-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    width: fit-content;

    color: var(--color-text-primary);

    font-weight: 500;
    text-decoration: none;

    transition: color var(--transition-fast);
}

.project-link .icon {
    transition: transform var(--transition-fast);
}

.project-link:hover {
    color: var(--color-accent);
}

.project-link:hover .icon {
    transform: translateX(4px);
}

/* =========================
   Project Tags
========================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-bottom: var(--space-lg);

    list-style: none;
}

.project-tags li {
    padding: 0.35rem 0.75rem;

    background: var(--color-surface-soft);

    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-size: 0.78rem;
    font-weight: 500;
}

/* =========================
   Footer
========================= */

.site-footer {
    padding: var(--space-2xl) 0 var(--space-lg);

    background: var(--color-surface);

    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(140px, 0.75fr)
        minmax(140px, 0.75fr);

    gap: var(--space-xl);

    padding-bottom: var(--space-xl);
}

.footer-brand {
    max-width: 480px;
}

.footer-logo {
    display: inline-block;

    color: var(--color-text-primary);

    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    text-decoration: none;

    margin-bottom: var(--space-sm);
}

.footer-description {
    color: var(--color-text-secondary);

    line-height: 1.75;
}

.footer-heading {
    color: var(--color-text-primary);

    font-size: 0.85rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.footer-links {
    display: grid;

    gap: 0.75rem;

    list-style: none;
}

.footer-links a {
    color: var(--color-text-secondary);

    text-decoration: none;

    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-text-primary);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding-top: var(--space-lg);

    color: var(--color-text-muted);

    border-top: 1px solid var(--color-border);

    font-size: 0.9rem;
}

.back-to-top {
    display: inline-flex;
    align-items: center;

    gap: 0.5rem;

    flex-shrink: 0;

    color: var(--color-text-secondary);

    font-weight: 500;
    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.back-to-top:hover {
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.back-to-top .icon {
    transition: transform var(--transition-fast);
}

.back-to-top:hover .icon {
    transform: translateY(-3px);
}

/* =========================
   Breadcrumb
========================= */

.breadcrumb {
    margin-bottom: var(--space-xl);
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.65rem;

    list-style: none;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    color: var(--color-text-muted);

    font-size: 0.9rem;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";

    color: var(--color-border);
}

.breadcrumb a {
    color: var(--color-text-secondary);

    text-decoration: none;

    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--color-text-primary);
}


/* =========================
   Markdown Documents
========================= */

.markdown-image {
    display: block;
    max-width: 50%;
    height: auto;

    margin-inline: auto;
}

/* =========================
   Markdown Callouts
========================= */

.markdown-callout {
    --markdown-callout-accent:
        var(--color-accent);

    --markdown-callout-tint:
        rgba(
            79,
            140,
            255,
            0.08
        );


    width: 100%;
    min-width: 0;

    padding:
        var(--space-md);

    background:
        linear-gradient(
            135deg,
            var(--markdown-callout-tint),
            var(--color-surface)
        );

    border:
        1px solid
        var(--color-border);

    border-left:
        4px solid
        var(--markdown-callout-accent);

    border-radius:
        var(--radius-md);
}


.markdown-callout-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.65rem;
}


.markdown-callout-label {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    padding:
        0.3rem
        0.65rem;

    background:
        var(--markdown-callout-tint);

    color:
        var(--color-text-primary);

    border:
        1px solid
        var(--markdown-callout-accent);

    border-radius:
        var(--radius-pill);

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.markdown-document
.markdown-callout-title {
    min-width: 0;

    margin: 0;

    color:
        var(--color-text-primary);

    font-size:
        1.05rem;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        -0.015em;
}


.markdown-document
.markdown-callout-body {
    max-width: none;

    margin-top:
        var(--space-sm);

    color:
        var(--color-text-secondary);

    line-height:
        1.7;
}

.markdown-callout-note {
    --markdown-callout-accent:
        var(--color-accent);

    --markdown-callout-tint:
        rgba(
            79,
            140,
            255,
            0.08
        );
}


.markdown-callout-implemented {
    --markdown-callout-accent:
        #6ee7b7;

    --markdown-callout-tint:
        rgba(
            54,
            211,
            153,
            0.08
        );
}


.markdown-callout-prototype {
    --markdown-callout-accent:
        #8bb4ff;

    --markdown-callout-tint:
        rgba(
            79,
            140,
            255,
            0.08
        );
}


.markdown-callout-testing,
.markdown-callout-warning {
    --markdown-callout-accent:
        #f7cb70;

    --markdown-callout-tint:
        rgba(
            247,
            203,
            112,
            0.08
        );
}


.markdown-callout-planned {
    --markdown-callout-accent:
        var(--color-text-muted);

    --markdown-callout-tint:
        var(--color-surface-soft);
}

/* =========================
   Markdown Tables
========================= */

.markdown-table-wrapper {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    -webkit-overflow-scrolling:
        touch;
}


.markdown-table-wrapper:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset:
        3px;
}


.markdown-table {
    width: 100%;
    min-width: 560px;

    border-collapse:
        collapse;

    text-align:
        left;
}


.markdown-table th,
.markdown-table td {
    padding:
        0.9rem
        1rem;

    border-bottom:
        1px solid
        var(--color-border);

    vertical-align:
        top;

    line-height:
        1.6;
}


.markdown-table th {
    background:
        var(--color-surface-soft-strong);

    color:
        var(--color-text-primary);

    font-size:
        0.8rem;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.markdown-table td {
    color:
        var(--color-text-secondary);

    font-size:
        0.92rem;
}

.markdown-table td code,
.markdown-table th code {
    white-space: nowrap;

    overflow-wrap: normal;
    word-break: normal;
}


.markdown-table tbody
tr:last-child
td {
    border-bottom: 0;
}


.markdown-table tbody
tr:hover {
    background:
        var(--color-surface-soft);
}


.markdown-table-align-left {
    text-align: left;
}


.markdown-table-align-center {
    text-align: center;
}


.markdown-table-align-right {
    text-align: right;
}

/* Engineering diagrams */

.markdown-image-diagram {
    transition:
        filter var(--transition-normal),
        opacity var(--transition-normal);
}

.markdown-figure {
    margin:
        var(--space-lg)
        0;

    padding:
        var(--space-sm);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    overflow: hidden;
}

.markdown-figure img {
    display: block;

    max-width: 50%;
    height: auto;

    margin-inline: auto;

    border-radius:
        var(--radius-sm);
}

.markdown-figure figcaption {
    max-width: 70ch;

    margin:
        var(--space-sm)
        auto
        0;

    color:
        var(--color-text-muted);

    font-size: 0.82rem;
    line-height: 1.6;

    text-align: center;
}

.markdown-image-error {
    padding:
        var(--space-sm);

    color:
        var(--color-text-secondary);

    border:
        1px dashed
        var(--color-border);

    border-radius:
        var(--radius-sm);
}

.markdown-document {
    min-width: 0;
}

.markdown-document > * + * {
    margin-top: var(--space-md);
}

.markdown-document h2 {
    margin-bottom: 50px;

    position: relative;
    
    width: 80%;
    max-width: 80%;

    margin-top:
        var(--space-2xl);

    margin-inline:
        auto;

    padding:
        0.7rem
        1.2rem;

    background:
        var(--color-code-background);

    color:
        var(--color-text-primary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    font-size:
        clamp(
            1.4rem,
            4vw,
            1.85rem
        );

    font-weight: 600;

    line-height: 1.25;

    letter-spacing:
        -0.025em;

    text-align: center;

    text-wrap: balance;
}


.markdown-document h2:first-child {
    margin-top: 0;
}




.markdown-document h2::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 10%;
    height: 2px;

    background:
        var(--color-accent);

    border-radius:
        var(--radius-pill);

    transform:
        translateX(-50%);

    opacity: 0.7;
}

.markdown-document h3 {
    margin-top: var(--space-lg);

    color:
        var(--color-text-primary);

    font-size: 1.15rem;
    line-height: 1.35;
}

.markdown-document p {
    max-width: 74ch;

    color:
        var(--color-text-secondary);

    line-height: 1.8;
}

.markdown-document ul,
.markdown-document ol {
    display: grid;

    gap: 0.65rem;

    margin-left: 1.25rem;

    color:
        var(--color-text-secondary);
}

.markdown-document li {
    padding-left: 0.25rem;

    line-height: 1.7;
}

.markdown-document strong {
    color:
        var(--color-text-primary);
}

.markdown-document a {
    color:
        var(--color-accent);

    text-underline-offset: 0.18em;
}

.markdown-document a:hover {
    color:
        var(--color-accent-hover);
}

.markdown-document :not(pre) > code {
    padding:
        0.15rem
        0.4rem;

    background:
        var(--color-code-background);

    color:
        var(--color-text-primary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-sm);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.88em;
}

.markdown-document pre {
    max-width: 100%;

    overflow-x: auto;

    padding: var(--space-md);

    background:
        var(--color-code-background);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);
}

.markdown-document pre code {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.84rem;
    line-height: 1.65;

    white-space: pre;
}

.markdown-document blockquote {
    padding:
        var(--space-sm)
        var(--space-md);

    background:
        var(--color-surface-soft);

    border-left:
        3px solid
        var(--color-accent);

    border-radius:
        0
        var(--radius-sm)
        var(--radius-sm)
        0;
}

.markdown-document blockquote p {
    margin: 0;

    color:
        var(--color-text-secondary);
}

.markdown-equation {
    max-width: 100%;

    overflow-x: auto;

    padding:
        var(--space-md);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    text-align: center;
}

.markdown-loading,
.markdown-load-error {
    padding:
        var(--space-lg);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    color:
        var(--color-text-secondary);
}


/* =========================
   Project Hero
========================= */

.project-hero {
    padding: var(--space-xl) 0 var(--space-2xl);

    border-bottom: 1px solid var(--color-border);
}

.project-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap: var(--space-xl);
}

.project-hero-content {
    max-width: 820px;
}

.project-page-eyebrow {
    color: var(--color-accent);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.17em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.project-page-title {
    max-width: 15ch;

    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700;

    line-height: 0.98;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.project-page-description {
    max-width: 720px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.75;

    margin-bottom: var(--space-lg);
}

.project-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-sm);
}


/* =========================
   Project Summary
========================= */

.project-summary {
    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.project-meta {
    display: grid;

    gap: var(--space-md);
}

.project-meta div {
    display: grid;

    gap: 0.3rem;

    padding-bottom: var(--space-md);

    border-bottom: 1px solid var(--color-border);
}

.project-meta div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.project-meta dt {
    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-meta dd {
    display: flex;
    align-items: center;

    gap: 0.5rem;

    color: var(--color-text-primary);

    font-weight: 500;
}

.status-indicator {
    width: 8px;
    height: 8px;

    background: #f4b942;

    border-radius: var(--radius-pill);

    box-shadow: 0 0 0 4px rgba(244, 185, 66, 0.12);
}


/* =========================
   Case Study Layout
========================= */

.case-study-section {
    padding: var(--space-2xl) 0;
}

.section-surface {
    background: var(--color-surface);
}

.case-study-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, 0.65fr);

    align-items: start;

    gap: var(--space-xl);
}

.case-study-content {
    max-width: 760px;
}

.case-study-title {
    font-size: clamp(2rem, 4vw, 3.25rem);

    line-height: 1.1;
    letter-spacing: -0.04em;

    margin-bottom: var(--space-md);
}

.case-study-content p:not(.section-label) {
    color: var(--color-text-secondary);

    font-size: 1.05rem;
    line-height: 1.85;

    margin-bottom: var(--space-md);
}

.case-study-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   Project Highlights
========================= */

.project-highlights {
    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.project-highlights-title {
    font-size: 1.1rem;

    margin-bottom: var(--space-md);
}

.highlight-list {
    display: grid;

    gap: var(--space-sm);

    list-style: none;
}

.highlight-list li {
    position: relative;

    padding-left: 1.5rem;

    color: var(--color-text-secondary);
}

.highlight-list li::before {
    content: "";

    position: absolute;

    top: 0.65em;
    left: 0;

    width: 7px;
    height: 7px;

    background: var(--color-accent);

    border-radius: var(--radius-pill);

    transform: translateY(-50%);
}


/* =========================
   Feature Status
========================= */

.feature-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: var(--space-md);
}

.feature-status-card {
    padding: var(--space-lg);

    background: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.feature-status-card h3 {
    margin: var(--space-md) 0 var(--space-sm);

    font-size: 1.2rem;
}

.feature-status-card p {
    color: var(--color-text-secondary);

    line-height: 1.7;
}

.status-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.7rem;

    border: 1px solid;
    border-radius: var(--radius-pill);

    font-size: 0.75rem;
    font-weight: 600;
}

.status-complete {
    background: rgba(54, 211, 153, 0.08);
    color: #6ee7b7;

    border-color: rgba(54, 211, 153, 0.25);
}

.status-prototype {
    background: rgba(79, 140, 255, 0.08);
    color: #8bb4ff;

    border-color: rgba(79, 140, 255, 0.25);
}

.status-planned {
    background: rgba(156, 163, 175, 0.08);
    color: var(--color-text-secondary);

    border-color: var(--color-border);
}


/* =========================
   Architecture
========================= */

.architecture-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: stretch;

    gap: var(--space-md);
}

.architecture-node {
    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.architecture-node-primary {
    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.15),
            var(--color-surface)
        );

    border-color: rgba(79, 140, 255, 0.35);
}

.architecture-node-label {
    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.architecture-node h3 {
    margin-bottom: var(--space-md);

    font-size: 1.2rem;
}

.architecture-node ul {
    display: grid;

    gap: 0.65rem;

    color: var(--color-text-secondary);

    list-style-position: inside;
}

.architecture-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-accent);

    font-size: 1.5rem;
}


/* =========================
   Pin Table
========================= */

.table-wrapper {

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}

.pin-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    background: var(--color-background);

    text-align: left;
}

.pin-table caption {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pin-table th,
.pin-table td {
    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--color-border);
}

.pin-table th {
    color: var(--color-text-primary);

    background: var(--color-grid-line);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pin-table td {
    color: var(--color-text-secondary);
}

.pin-table tbody tr:last-child td {
    border-bottom: 0;
}

.pin-table code {
    display: inline-flex;
    align-items: center;

    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;

    padding: 0.25rem 0.5rem;

    background: var(--color-surface);

    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.85rem;
}


/* =========================
   Roadmap
========================= */

.roadmap-list {
    display: grid;

    gap: var(--space-md);

    list-style: none;
}

.roadmap-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    gap: var(--space-lg);

    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.roadmap-number {
    color: var(--color-accent);

    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.roadmap-item h3 {
    margin-bottom: var(--space-xs);

    font-size: 1.2rem;
}

.roadmap-item p {
    color: var(--color-text-secondary);

    line-height: 1.7;
}

/* =========================
   Project Markdown Case Study
========================= */

.project-markdown-section {
    padding:
        var(--space-2xl)
        0;
}


.project-markdown-article {
    width: 100%;
    max-width: 900px;

    margin-inline: auto;

    min-width: 0;
}

/* =========================
   Project CTA
========================= */

.project-cta {
    padding: var(--space-xl) 0;

    border-top: 1px solid var(--color-border);
}

.project-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-lg);
}

.project-cta-content h2 {
    max-width: 650px;

    font-size: clamp(1.75rem, 4vw, 3rem);

    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* =========================
   About Page
========================= */

.about-intro,
.about-focus,
.engineering-journey {
    padding: var(--space-2xl) 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.65fr);

    align-items: start;

    gap: var(--space-xl);
}


/* =========================
   About Story
========================= */

.about-story {
    max-width: 760px;
}

.about-section-title {
    max-width: 680px;

    font-size: clamp(2rem, 4vw, 3.5rem);

    line-height: 1.08;
    letter-spacing: -0.045em;

    margin-bottom: var(--space-md);
}

.about-story p:not(.section-label) {
    color: var(--color-text-secondary);

    font-size: 1.05rem;
    line-height: 1.85;

    margin-bottom: var(--space-md);
}

.about-story p:last-child {
    margin-bottom: 0;
}


/* =========================
   Engineering Profile
========================= */

.engineering-profile {
    position: sticky;

    top: calc(
        var(--header-height) +
        var(--space-lg)
    );

    padding: var(--space-lg);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-lg);
}

.profile-monogram {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin-bottom: var(--space-md);

    background: var(--color-accent);
    color: #ffffff;

    border-radius: var(--radius-md);

    font-size: 1.25rem;
    font-weight: 700;

    letter-spacing: -0.03em;
}

.profile-title {
    font-size: 1.25rem;

    margin-bottom: var(--space-lg);
}

.profile-facts {
    display: grid;

    gap: var(--space-md);
}

.profile-facts div {
    display: grid;

    gap: 0.35rem;

    padding-bottom: var(--space-md);

    border-bottom: 1px solid var(--color-border);
}

.profile-facts div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.profile-facts dt {
    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-facts dd {
    color: var(--color-text-primary);

    font-weight: 500;
    line-height: 1.6;
}


/* =========================
   Focus Areas
========================= */

.focus-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.focus-card {
    position: relative;

    min-height: 360px;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);

    background: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    transition:
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.focus-card:hover {
    border-color: rgba(79, 140, 255, 0.4);

    transform: translateY(-5px);
}

.focus-icon-wrapper {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: var(--space-xl);

    background: rgba(79, 140, 255, 0.1);

    border: 1px solid rgba(79, 140, 255, 0.22);
    border-radius: var(--radius-md);
}

.focus-icon {
    width: 26px;
    height: 26px;

    fill: none;
    stroke: var(--color-accent);

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.focus-number {
    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;

    margin-bottom: var(--space-xs);
}

.focus-card h3 {
    font-size: 1.35rem;

    margin-bottom: var(--space-sm);
}

.focus-card > p:last-child {
    color: var(--color-text-secondary);

    line-height: 1.75;
}


/* =========================
   Engineering Journey
========================= */

.journey-timeline {
    display: grid;

    max-width: 900px;

    list-style: none;
}

.journey-item {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    gap: var(--space-lg);

    padding-bottom: var(--space-xl);
}

.journey-item:last-child {
    padding-bottom: 0;
}

.journey-item:not(:last-child)::before {
    content: "";

    position: absolute;

    top: 48px;
    bottom: 0;
    left: 23px;

    width: 1px;

    background: var(--color-border);
}

.journey-marker {
    position: relative;
    z-index: 1;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: var(--color-surface);
    color: var(--color-accent);

    border: 1px solid rgba(79, 140, 255, 0.35);
    border-radius: var(--radius-pill);

    font-size: 0.75rem;
    font-weight: 700;
}

.journey-content {
    padding: var(--space-md) var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.journey-stage {
    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.journey-content h3 {
    font-size: 1.25rem;

    margin-bottom: var(--space-xs);
}

.journey-content > p:last-child {
    color: var(--color-text-secondary);

    line-height: 1.75;
}


/* =========================
   About CTA
========================= */

.about-cta {
    padding: var(--space-xl) 0;

    border-top: 1px solid var(--color-border);
}

.about-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.14),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.28);
    border-radius: var(--radius-lg);
}

.about-cta-content h2 {
    max-width: 700px;

    font-size: clamp(1.75rem, 4vw, 3rem);

    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* =========================
   Lab Notes Page
========================= */

.lab-notes-section {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* =========================
   Notes Search
========================= */

.notes-search {
    max-width: 720px;

    margin-bottom: var(--space-md);
}

.notes-search-label {
    display: inline-block;

    color: var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 600;

    margin-bottom: 0.55rem;
}

.notes-search-field {
    position: relative;

    width: 100%;
}

.notes-search-input {
    width: 100%;
    height: 52px;

    padding:
        0.8rem
        3.2rem
        0.8rem
        2.9rem;

    background: var(--color-surface);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    font: inherit;
    font-size: 0.95rem;

    outline: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.notes-search-input::placeholder {
    color: var(--color-text-muted);
}

.notes-search-input:hover {
    background: var(--color-surface-hover);
}

.notes-search-input:focus {
    background: var(--color-surface);

    border-color: var(--color-accent);

    box-shadow:
        0 0 0 4px rgba(79, 140, 255, 0.12);
}

.notes-search-input::-webkit-search-cancel-button {
    appearance: none;
}

.notes-search-icon {
    position: absolute;

    top: 50%;
    left: 1rem;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;

    transform: translateY(-50%);
}

.notes-search-field:focus-within
.notes-search-icon {
    stroke: var(--color-accent);
}

.notes-search-clear {
    position: absolute;

    top: 50%;
    right: 0.75rem;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    background: transparent;
    color: var(--color-text-muted);

    border: 0;
    border-radius: var(--radius-pill);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.notes-search-clear:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.notes-search-clear:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.notes-search-clear svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
}


/* =========================
   Notes Toolbar
========================= */

.notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-xl);
}

.note-filters {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);
}

.note-filter-button {
    padding: 0.7rem 1.1rem;

    background: transparent;
    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.note-filter-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);

    transform: translateY(-1px);
}

.note-filter-button.is-active {
    background: var(--color-accent);
    color: #ffffff;

    border-color: var(--color-accent);
}

.notes-status {
    flex-shrink: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    font-weight: 500;

    white-space: nowrap;
}


/* =========================
   Notes Grid
========================= */

.notes-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.note-card {
    min-height: 360px;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.note-card:hover {
    background: var(--color-surface-hover);
    border-color: rgba(79, 140, 255, 0.35);

    transform: translateY(-5px);
}

.note-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    margin-bottom: var(--space-md);
}

.note-type {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.7rem;

    border: 1px solid;
    border-radius: var(--radius-pill);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.note-type-lab {
    background: rgba(54, 211, 153, 0.08);
    color: #6ee7b7;

    border-color: rgba(54, 211, 153, 0.25);
}

.note-type-circuit {
    background: rgba(244, 185, 66, 0.08);
    color: #f7cb70;

    border-color: rgba(244, 185, 66, 0.25);
}

.note-type-formula {
    background: rgba(139, 124, 255, 0.1);
    color: #b7acff;

    border-color: rgba(139, 124, 255, 0.3);
}

.note-date {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.note-category {
    color: var(--color-accent);

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: var(--space-xs);
}

.note-title {
    font-size: 1.35rem;
    line-height: 1.25;

    margin-bottom: var(--space-sm);
}

.note-summary {
    color: var(--color-text-secondary);

    line-height: 1.7;

    margin-bottom: var(--space-md);
}


/* =========================
   Formula Preview
========================= */

.note-formula {
    width: 100%;
    max-width: 100%;

    padding: var(--space-md);

    margin-bottom: var(--space-md);

    overflow-x: auto;
    overflow-y: hidden;

    background: var(--color-background);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    text-align: center;

    -webkit-overflow-scrolling: touch;
}

.note-formula .katex-display {
    min-width: max-content;

    margin: 0;
}

.note-formula .katex {
    font-size: 1rem;
}

.tech-note-summary-math {
    display: block;

    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 0.15rem;

    -webkit-overflow-scrolling: touch;
}

.tech-note-summary-math .katex {
    font-size: 0.9rem;
}

.tech-note-result strong {
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;
}

/* =========================
   Note Tags
========================= */

.note-tags {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-bottom: var(--space-md);

    list-style: none;
}

.note-tags li {
    padding: 0.3rem 0.65rem;

    background: var(--color-surface-soft);
    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-size: 0.75rem;
}


/* =========================
   Note Footer
========================= */

.note-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    margin-top: auto;

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-border);
}

.note-status {
    color: var(--color-text-muted);

    font-size: 0.8rem;
    font-weight: 500;
}

.note-link {
    color: var(--color-text-primary);

    font-size: 0.9rem;
    font-weight: 500;

    text-decoration: none;

    transition: color var(--transition-fast);
}

.note-link:hover {
    color: var(--color-accent);
}


/* =========================
   Notes Empty State
========================= */

.notes-empty-state {
    padding: var(--space-xl);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    text-align: center;
}

.notes-empty-icon {
    width: 48px;
    height: 48px;

    margin-bottom: var(--space-md);

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-empty-state h2 {
    font-size: 1.4rem;

    margin-bottom: var(--space-xs);
}

.notes-empty-state p {
    color: var(--color-text-secondary);
}

/* =========================
   Lab Note Detail Page
========================= */

.note-page-hero {
    padding: var(--space-xl) 0 var(--space-2xl);

    border-bottom: 1px solid var(--color-border);
}

.note-page-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, 0.7fr);

    align-items: start;

    gap: var(--space-xl);
}

.note-page-eyebrow {
    color: var(--color-accent);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.note-page-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.05em;

    margin-bottom: var(--space-md);
}

.note-page-description {
    max-width: 720px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.75;
}


/* =========================
   Note Summary Card
========================= */

.note-summary-card {
    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.note-summary-list {
    display: grid;

    gap: var(--space-md);
}

.note-summary-list div {
    display: grid;

    gap: 0.35rem;

    padding-bottom: var(--space-md);

    border-bottom: 1px solid var(--color-border);
}

.note-summary-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.note-summary-list dt {
    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.note-summary-list dd {
    color: var(--color-text-primary);

    line-height: 1.6;
    font-weight: 500;
}


/* =========================
   Note Content Layout
========================= */

.note-page-description,
.note-summary-list dd,
.note-block p,
.note-block li,
.note-sidebar-list strong {
    overflow-wrap: anywhere;
}

.note-content-section {
    padding: var(--space-2xl) 0;
}

.note-content-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(240px, 0.65fr);

    align-items: start;

    gap: var(--space-xl);
}

.note-page-hero-grid > *,
.note-content-layout > * {
    min-width: 0;
}

.note-main-content,
.note-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.note-main-content {
    max-width: 760px;
}

.note-block {
    margin-bottom: var(--space-2xl);
}

.note-block:last-child {
    margin-bottom: 0;
}

.note-section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);

    line-height: 1.1;
    letter-spacing: -0.04em;

    margin-bottom: var(--space-md);
}

.note-block p:not(.section-label) {
    color: var(--color-text-secondary);

    line-height: 1.8;

    margin-bottom: var(--space-md);
}

.note-list {
    display: grid;

    gap: 0.6rem;

    margin-bottom: var(--space-md);
    padding-left: 1.25rem;

    color: var(--color-text-secondary);
}

.note-formula-panel {
    padding: var(--space-lg);

    margin-bottom: var(--space-md);

    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    background: var(--color-surface);

    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 1.05rem;
    font-weight: 600;

    line-height: 1.6;
    text-align: center;

    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.note-table {
    width: 100%;
    min-width: 520px;

    border-collapse: collapse;

    background: var(--color-background);
    text-align: left;
}

.note-table caption {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.note-table th,
.note-table td {
    padding: 1rem 1.1rem;

    border-bottom: 1px solid var(--color-border);
}

.note-table th {
    background: var(--color-grid-line);

    color: var(--color-text-primary);

    font-size: 0.8rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.note-table td {
    color: var(--color-text-secondary);
}

.note-table tbody tr:last-child td {
    border-bottom: 0;
}

.note-table code {
    padding: 0.25rem 0.5rem;

    background: var(--color-surface);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.85rem;

    white-space: nowrap;
}


/* =========================
   Note Sidebar
========================= */

.note-sidebar {
    position: sticky;

    top: calc(
        var(--header-height) +
        var(--space-lg)
    );
}

.note-sidebar-card {
    padding: var(--space-lg);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-lg);
}

.note-sidebar-title {
    font-size: 1.1rem;

    margin-bottom: var(--space-md);
}

.note-sidebar-list {
    display: grid;

    gap: var(--space-sm);

    list-style: none;
}

.note-sidebar-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    padding-bottom: var(--space-sm);

    border-bottom: 1px solid var(--color-border);
}

.note-sidebar-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.note-sidebar-list span {
    color: var(--color-text-muted);

    font-size: 0.85rem;
}

.note-sidebar-list strong {
    color: var(--color-text-primary);

    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================
   Note Page CTA
========================= */

.note-page-cta {
    padding: var(--space-xl) 0;

    border-top: 1px solid var(--color-border);
}

.note-page-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.14),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.28);
    border-radius: var(--radius-lg);
}

.note-page-cta-content h2 {
    max-width: 700px;

    font-size: clamp(1.75rem, 4vw, 3rem);

    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* =========================
   Technical Note Detail
========================= */

.tech-note-shell {
    width: min(
        100% - (var(--space-md) * 2),
        1000px
    );

    margin-inline: auto;

    min-width: 0;
}

/* =========================
   Technical Note References
========================= */

.tech-note-reference-list {
    display: grid;

    gap: var(--space-sm);

    padding-left: 1.3rem;

    color: var(--color-text-secondary);

    line-height: 1.7;
}

.tech-note-reference-list li {
    padding-left: 0.35rem;
}

.tech-note-reference-list li::marker {
    color: var(--color-accent);

    font-weight: 700;
}

.tech-note-reference-list a {
    color: var(--color-accent);

    text-underline-offset: 0.2em;
}

.tech-note-reference-list a:hover {
    color: var(--color-accent-hover);
}


/* =========================
   Technical Note Hero
========================= */

.tech-note-hero {
    padding: var(--space-xl) 0 var(--space-2xl);

    border-bottom: 1px solid var(--color-border);
}

.tech-note-heading {
    max-width: 900px;

    margin-top: var(--space-lg);
}

.tech-note-eyebrow {
    color: var(--color-accent);

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.tech-note-title {
    max-width: 900px;

    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.tech-note-lead {
    max-width: 760px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.75;
}


/* =========================
   Technical Note Summary
========================= */

.tech-note-summary {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: var(--space-xl);

    overflow: hidden;

    background: var(--color-border);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    gap: 1px;
}

.tech-note-summary > div {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);
}

.tech-note-summary dt {
    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.tech-note-summary dd {
    color: var(--color-text-primary);

    font-weight: 500;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* =========================
   Technical Note Article
========================= */

.tech-note-body {
    padding-bottom: var(--space-2xl);
}

.tech-note-article {
    width: 100%;
    max-width: 900px;

    margin-inline: auto;

    min-width: 0;
}

.tech-note-section {
    padding: clamp(
        2.5rem,
        6vw,
        4.75rem
    ) 0;

    border-top: 1px solid var(--color-border);
}

.tech-note-section:first-child {
    border-top: 0;
}

.tech-note-section-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);

    align-items: start;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);
}

.tech-note-section-number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: rgba(79, 140, 255, 0.09);
    color: var(--color-accent);

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-pill);

    font-size: 0.75rem;
    font-weight: 700;
}

.tech-note-section-label {
    color: var(--color-accent);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    margin-bottom: 0.35rem;
}

.tech-note-section-title {
    max-width: 760px;

    font-size: clamp(1.9rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.tech-note-section-content {
    min-width: 0;

    padding-left:
        calc(
            48px +
            var(--space-md)
        );
}

.tech-note-section-content > p {
    max-width: 760px;

    color: var(--color-text-secondary);

    line-height: 1.8;

    margin-bottom: var(--space-md);
}

.tech-note-section-content > p:last-child {
    margin-bottom: 0;
}


/* =========================
   Note Highlights
========================= */

.tech-note-highlight-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.tech-note-highlight {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tech-note-highlight span {
    display: block;

    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.tech-note-highlight strong {
    color: var(--color-text-primary);

    font-size: 0.95rem;
    font-weight: 600;
}


/* =========================
   Equation
========================= */

.tech-note-equation {
    width: 100%;
    max-width: 100%;

    margin: var(--space-lg) 0;

    padding: clamp(
        1.25rem,
        4vw,
        2rem
    );

    overflow-x: auto;
    overflow-y: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.1),
            var(--color-surface)
        );

    color: var(--color-text-primary);

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-lg);

    text-align: center;

    -webkit-overflow-scrolling: touch;
}

.tech-note-equation .katex-display {
    min-width: max-content;

    margin: 0;
}

.tech-note-equation .katex {
    font-size: clamp(
        1.1rem,
        3vw,
        1.55rem
    );
}



/* =========================
   Variables
========================= */

.tech-note-variable-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-sm);
}

.tech-note-variable-grid > div {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tech-note-variable-grid dt {
    color: var(--color-text-primary);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 1rem;
    font-weight: 700;

    margin-bottom: 0.5rem;
}

.tech-note-variable-grid dd {
    color: var(--color-text-secondary);

    line-height: 1.65;
}


/* =========================
   Given Values
========================= */

.tech-note-given-values {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-sm);

    margin: var(--space-lg) 0;
}

.tech-note-given-values > div {
    padding: var(--space-md);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tech-note-given-values span {
    display: block;

    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.tech-note-given-values strong {
    color: var(--color-text-primary);

    font-size: 1.1rem;
}


/* =========================
   Calculation Steps
========================= */

.tech-note-steps {
    display: grid;

    gap: var(--space-sm);

    margin: var(--space-lg) 0;

    list-style: none;
}

.tech-note-steps li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);

    align-items: start;

    gap: var(--space-md);

    padding: var(--space-md);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tech-note-step-number {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background: rgba(79, 140, 255, 0.1);
    color: var(--color-accent);

    border-radius: var(--radius-pill);

    font-size: 0.8rem;
    font-weight: 700;
}

.tech-note-steps h3 {
    font-size: 1rem;

    margin-bottom: 0.35rem;
}

.tech-note-steps p {
    color: var(--color-text-secondary);

    line-height: 1.65;
}


/* =========================
   Result
========================= */

.tech-note-result {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding: var(--space-md) var(--space-lg);

    background: rgba(54, 211, 153, 0.08);

    border: 1px solid rgba(54, 211, 153, 0.25);
    border-radius: var(--radius-md);
}

.tech-note-result span {
    color: var(--color-text-secondary);
}

.tech-note-result strong {
    color: #6ee7b7;

    font-size: 1.15rem;
}


/* =========================
   Callouts
========================= */

.tech-note-callout-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-md);

    margin-bottom: var(--space-lg);
}

.tech-note-callout {
    padding: var(--space-lg);

    background: rgba(54, 211, 153, 0.06);

    border: 1px solid rgba(54, 211, 153, 0.2);
    border-radius: var(--radius-lg);
}

.tech-note-callout-warning {
    background: rgba(244, 185, 66, 0.06);

    border-color: rgba(244, 185, 66, 0.22);
}

.tech-note-callout-label {
    color: #6ee7b7;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.tech-note-callout-warning
.tech-note-callout-label {
    color: #f7cb70;
}

.tech-note-callout ul {
    display: grid;

    gap: 0.55rem;

    padding-left: 1.1rem;

    color: var(--color-text-secondary);

    line-height: 1.6;
}


/* =========================
   Technical Note Media
========================= */

.tech-note-media-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-md);

    margin-top: var(--space-lg);
}

.tech-note-media-placeholder {
    min-width: 0;
    min-height: 260px;

    display: grid;
    place-items: center;

    gap: var(--space-md);

    padding: var(--space-lg);

    background:
        linear-gradient(
            var(--color-grid-line) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--color-grid-line) 1px,
            transparent 1px
        ),
        var(--color-surface);

    background-size:
        28px 28px,
        28px 28px,
        auto;

    color: var(--color-text-secondary);

    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);

    text-align: center;
}

.tech-note-media-icon {
    width: 48px;
    height: 48px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tech-note-media-placeholder h3 {
    color: var(--color-text-primary);

    font-size: 1rem;

    margin-bottom: 0.35rem;
}

.tech-note-media-placeholder p {
    max-width: 320px;

    color: var(--color-text-muted);

    font-size: 0.88rem;
    line-height: 1.6;
}


/* Real images and videos added later */

.tech-note-media {
    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tech-note-media img,
.tech-note-media video {
    display: block;

    width: 100%;
    height: auto;

    background: var(--color-background);

    object-fit: contain;
}

.tech-note-media figcaption {
    padding: 0.85rem 1rem;

    color: var(--color-text-muted);

    border-top: 1px solid var(--color-border);

    font-size: 0.82rem;
    line-height: 1.6;
}


/* =========================
   Technical Note CTA
========================= */

.tech-note-cta {
    padding: var(--space-xl) 0;

    border-top: 1px solid var(--color-border);
}

.tech-note-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border: 1px solid rgba(79, 140, 255, 0.25);
    border-radius: var(--radius-lg);
}

.tech-note-cta-content h2 {
    max-width: 650px;

    font-size: clamp(1.6rem, 4vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* =========================
   Components Page
========================= */

.component-library-section {
    padding:
        var(--space-xl)
        0
        var(--space-2xl);
}

.component-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--space-sm);
}


.component-card-actions {
    justify-content:
        flex-end;
}

/* =========================
   Component Search
========================= */

.component-search {
    max-width: 720px;

    margin-bottom: var(--space-md);
}

.component-search-label {
    display: inline-block;

    color: var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 600;

    margin-bottom: 0.55rem;
}

.component-search-field {
    position: relative;

    width: 100%;
}

.component-search-input {
    width: 100%;
    height: 52px;

    padding:
        0.8rem
        1rem
        0.8rem
        2.9rem;

    background: var(--color-surface);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    font: inherit;
    font-size: 0.95rem;

    outline: none;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        box-shadow
            var(--transition-fast);
}

.component-search-input::placeholder {
    color: var(--color-text-muted);
}

.component-search-input:hover {
    background:
        var(--color-surface-hover);
}

.component-search-input:focus {
    background: var(--color-surface);

    border-color: var(--color-accent);

    box-shadow:
        0 0 0 4px
        rgba(79, 140, 255, 0.12);
}

.component-search-icon {
    position: absolute;

    top: 50%;
    left: 1rem;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;

    transform: translateY(-50%);
}

.component-search-field:focus-within
.component-search-icon {
    stroke: var(--color-accent);
}


/* =========================
   Component Toolbar
========================= */

.component-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-xl);
}

.component-filters {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);
}

.component-filter-button {
    padding: 0.7rem 1.1rem;

    background: transparent;
    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast),
        transform
            var(--transition-fast);
}

.component-filter-button:hover {
    background:
        var(--color-surface-hover);

    color: var(--color-text-primary);

    transform: translateY(-1px);
}

.component-filter-button.is-active {
    background: var(--color-accent);
    color: #ffffff;

    border-color: var(--color-accent);
}

.component-status {
    flex-shrink: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    font-weight: 500;

    white-space: nowrap;
}


/* =========================
   Component Grid
========================= */

.components-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.component-card {
    min-width: 0;
    min-height: 460px;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    transition:
        background-color
            var(--transition-normal),
        border-color
            var(--transition-normal),
        transform
            var(--transition-normal);
}

.component-card:hover {
    background:
        var(--color-surface-hover);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform: translateY(-5px);
}


/* =========================
   Component Header
========================= */

.component-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    margin-bottom: var(--space-md);
}

.component-category {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.7rem;

    border: 1px solid;
    border-radius: var(--radius-pill);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.component-category-controller {
    background:
        rgba(79, 140, 255, 0.1);

    color: #8bb4ff;

    border-color:
        rgba(79, 140, 255, 0.28);
}

.component-category-display {
    background:
        rgba(139, 124, 255, 0.1);

    color: #b7acff;

    border-color:
        rgba(139, 124, 255, 0.28);
}

.component-category-communication {
    background:
        rgba(54, 211, 153, 0.08);

    color: #6ee7b7;

    border-color:
        rgba(54, 211, 153, 0.25);
}

.component-category-digital-logic {
    background:
        rgba(244, 185, 66, 0.08);

    color: #f7cb70;

    border-color:
        rgba(244, 185, 66, 0.25);
}

.component-card-status {
    color: var(--color-text-muted);

    font-size: 0.78rem;
    font-weight: 500;
}


/* =========================
   Component Content
========================= */

.component-model {
    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.component-name {
    font-size: 1.4rem;
    line-height: 1.2;

    margin-bottom: var(--space-sm);
}

.component-summary {
    color: var(--color-text-secondary);

    line-height: 1.7;

    margin-bottom: var(--space-md);
}

.component-spec-list {
    display: grid;

    gap: var(--space-sm);

    margin-bottom: var(--space-md);
}

.component-spec-list > div {
    min-width: 0;

    padding: var(--space-sm);

    background: var(--color-background);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.component-spec-list dt {
    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.35rem;
}

.component-spec-list dd {
    color: var(--color-text-primary);

    font-size: 0.88rem;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* =========================
   Component Tags
========================= */

.component-tags {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-bottom: var(--space-md);

    list-style: none;
}

.component-tags li {
    padding: 0.3rem 0.65rem;

    background:
        var(--color-surface-soft);

    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-size: 0.72rem;
}


/* =========================
   Component Footer
========================= */

.component-card-footer {
    margin-top: auto;

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-border);
}

.component-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.7rem 1rem;
}

.component-card-link-secondary {
    color: var(--color-text-secondary);
}

.component-card-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    color: var(--color-text-primary);

    font-size: 0.88rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        color var(--transition-fast);
}

.component-card-link:hover {
    color: var(--color-accent);
}

.component-card-link svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.component-reference-status {
    color: var(--color-text-muted);

    font-size: 0.82rem;
}


/* =========================
   Components Empty State
========================= */

.components-empty-state {
    padding: var(--space-xl);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    text-align: center;
}

.components-empty-icon {
    width: 50px;
    height: 50px;

    margin-bottom: var(--space-md);

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.components-empty-state h2 {
    font-size: 1.4rem;

    margin-bottom: var(--space-xs);
}

.components-empty-state p {
    color: var(--color-text-secondary);
}

/* =========================
   Component Detail Page
========================= */

.component-detail-shell {
    width: min(
        100% - (var(--space-md) * 2),
        1000px
    );

    margin-inline: auto;

    min-width: 0;
}


/* =========================
   Component Detail Hero
========================= */

.component-detail-hero {
    padding:
        var(--space-xl)
        0
        var(--space-2xl);

    border-bottom:
        1px solid var(--color-border);
}

.component-detail-heading {
    max-width: 880px;

    margin-top: var(--space-lg);
}

.component-detail-eyebrow {
    color: var(--color-accent);

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    margin-bottom: var(--space-sm);
}

.component-detail-title {
    max-width: 900px;

    font-size: clamp(
        3rem,
        7vw,
        5.5rem
    );

    line-height: 0.98;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.component-detail-lead {
    max-width: 760px;

    color: var(--color-text-secondary);

    font-size: clamp(
        1rem,
        2vw,
        1.16rem
    );

    line-height: 1.75;
}

.component-detail-tags {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-top: var(--space-lg);

    list-style: none;
}

.component-detail-tags li {
    padding: 0.4rem 0.75rem;

    background:
        var(--color-surface-soft);

    color: var(--color-text-secondary);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-pill);

    font-size: 0.78rem;
}


/* =========================
   Component Summary
========================= */

.component-detail-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: var(--space-xl);

    overflow: hidden;

    background: var(--color-border);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-lg);

    gap: 1px;
}

.component-detail-summary > div {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);
}

.component-detail-summary dt {
    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.component-detail-summary dd {
    color: var(--color-text-primary);

    font-weight: 500;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* =========================
   Component Article
========================= */

.component-detail-body {
    padding-bottom: var(--space-2xl);
}

.component-detail-article {
    width: 100%;
    max-width: 900px;

    margin-inline: auto;

    min-width: 0;
}

.component-detail-section {
    padding: clamp(
        2.5rem,
        6vw,
        4.75rem
    ) 0;

    border-top:
        1px solid var(--color-border);
}

.component-detail-section:first-child {
    border-top: 0;
}

.component-detail-section-head {
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr);

    align-items: start;

    gap: var(--space-md);

    margin-bottom: var(--space-lg);
}

.component-detail-section-number {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background:
        rgba(79, 140, 255, 0.09);

    color: var(--color-accent);

    border:
        1px solid
        rgba(79, 140, 255, 0.25);

    border-radius: var(--radius-pill);

    font-size: 0.75rem;
    font-weight: 700;
}

.component-detail-section-label {
    color: var(--color-accent);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    margin-bottom: 0.35rem;
}

.component-detail-section-title {
    max-width: 760px;

    font-size: clamp(
        1.9rem,
        4vw,
        3.25rem
    );

    line-height: 1.08;
    letter-spacing: -0.04em;
}

.component-detail-section-content {
    min-width: 0;

    padding-left:
        calc(
            48px +
            var(--space-md)
        );
}

.component-detail-section-content > p {
    max-width: 760px;

    color: var(--color-text-secondary);

    line-height: 1.8;

    margin-bottom: var(--space-md);
}

.component-detail-section-content > p:last-child {
    margin-bottom: 0;
}


/* =========================
   Component Role Cards
========================= */

.component-detail-role-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.component-detail-role-grid > div {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.component-detail-role-grid span {
    display: block;

    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.component-detail-role-grid strong {
    color: var(--color-text-primary);

    font-size: 0.94rem;
}


/* =========================
   Component Specification Grid
========================= */

.component-detail-spec-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.component-detail-spec-grid > div {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.component-detail-spec-grid dt {
    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.45rem;
}

.component-detail-spec-grid dd {
    color: var(--color-text-primary);

    line-height: 1.6;

    overflow-wrap: anywhere;
}


/* =========================
   Electrical Warning
========================= */

.component-detail-warning {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr);

    align-items: start;

    gap: var(--space-md);

    padding: var(--space-lg);

    margin-bottom: var(--space-lg);

    background:
        rgba(244, 185, 66, 0.07);

    border:
        1px solid
        rgba(244, 185, 66, 0.24);

    border-radius: var(--radius-lg);
}

.component-detail-warning svg {
    width: 44px;
    height: 44px;

    fill: none;
    stroke: #f7cb70;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.component-detail-warning h3 {
    color: #f7cb70;

    font-size: 1.05rem;

    margin-bottom: 0.45rem;
}

.component-detail-warning p {
    color: var(--color-text-secondary);

    line-height: 1.7;
}

.component-detail-check-list {
    display: grid;

    gap: 0.75rem;

    padding-left: 1.25rem;

    color: var(--color-text-secondary);

    line-height: 1.7;
}

.component-detail-check-list li::marker {
    color: var(--color-accent);
}


/* =========================
   Component Interfaces
========================= */

.component-detail-interface-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.component-detail-interface-grid article {
    min-width: 0;

    padding: var(--space-md);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.component-detail-interface-grid h3 {
    color: var(--color-text-primary);

    font-size: 1rem;

    margin-bottom: 0.45rem;
}

.component-detail-interface-grid p {
    color: var(--color-text-secondary);

    font-size: 0.88rem;
    line-height: 1.65;
}


/* =========================
   Component Pin Assignment
========================= */

.component-detail-pin-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-sm);

    margin-top: var(--space-lg);
}

.component-detail-pin-grid > div {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    padding: var(--space-md);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.component-detail-pin-grid dt {
    color: var(--color-text-secondary);

    font-size: 0.88rem;
    line-height: 1.4;
}

.component-detail-pin-grid dd {
    flex-shrink: 0;
}

.component-detail-pin-grid code {
    display: inline-flex;

    padding: 0.3rem 0.55rem;

    background: var(--color-background);
    color: var(--color-text-primary);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-sm);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.82rem;

    white-space: nowrap;
}

.component-detail-tbd {
    color: #f7cb70;

    font-size: 0.8rem;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================
   Related Project Panel
========================= */

.component-detail-project-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-lg);

    margin-bottom: var(--space-lg);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border:
        1px solid
        rgba(79, 140, 255, 0.25);

    border-radius: var(--radius-lg);
}

.component-detail-project-panel > div {
    min-width: 0;
}

.component-detail-project-label {
    color: var(--color-accent);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.component-detail-project-panel h3 {
    font-size: 1.35rem;

    margin-bottom: 0.5rem;
}

.component-detail-project-panel p:not(
    .component-detail-project-label
) {
    max-width: 580px;

    color: var(--color-text-secondary);

    line-height: 1.7;
}


/* =========================
   Practical Notes
========================= */

.component-detail-notes-grid {
    display: grid;

    gap: var(--space-sm);
}

.component-detail-notes-grid article {
    display: grid;
    grid-template-columns:
        40px
        minmax(0, 1fr);

    align-items: start;

    gap: var(--space-md);

    padding: var(--space-md);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.component-detail-notes-grid article > span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background:
        rgba(79, 140, 255, 0.1);

    color: var(--color-accent);

    border-radius: var(--radius-pill);

    font-size: 0.72rem;
    font-weight: 700;
}

.component-detail-notes-grid h3 {
    font-size: 1rem;

    margin-bottom: 0.35rem;
}

.component-detail-notes-grid p {
    color: var(--color-text-secondary);

    line-height: 1.65;
}


/* =========================
   Component Media
========================= */

.component-detail-media-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-md);

    margin-top: var(--space-lg);
}

.component-detail-media-placeholder {
    min-width: 0;
    min-height: 260px;

    display: grid;
    place-items: center;

    gap: var(--space-md);

    padding: var(--space-lg);

    background:
        linear-gradient(
            var(--color-grid-line)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--color-grid-line)
            1px,
            transparent 1px
        ),
        var(--color-surface);

    background-size:
        28px 28px,
        28px 28px,
        auto;

    border:
        1px dashed var(--color-border);

    border-radius: var(--radius-lg);

    text-align: center;
}

.component-detail-media-placeholder svg {
    width: 48px;
    height: 48px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.component-detail-media-placeholder h3 {
    font-size: 1rem;

    margin-bottom: 0.35rem;
}

.component-detail-media-placeholder p {
    max-width: 320px;

    color: var(--color-text-muted);

    font-size: 0.86rem;
    line-height: 1.6;
}


/* Real component media */

.component-detail-media {
    overflow: hidden;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-lg);
}

.component-detail-media img,
.component-detail-media video {
    display: block;

    width: 100%;
    height: auto;

    background: var(--color-background);

    object-fit: contain;
}

.component-detail-media figcaption {
    padding: 0.85rem 1rem;

    color: var(--color-text-muted);

    border-top:
        1px solid var(--color-border);

    font-size: 0.82rem;
    line-height: 1.6;
}


/* =========================
   Component References
========================= */

.component-detail-reference-list {
    display: grid;

    gap: var(--space-sm);

    padding-left: 1.3rem;

    color: var(--color-text-secondary);

    line-height: 1.7;
}

.component-detail-reference-list li::marker {
    color: var(--color-accent);

    font-weight: 700;
}

.component-detail-reference-note {
    margin-top: var(--space-md);

    color: var(--color-text-muted);

    font-size: 0.85rem;
}


/* =========================
   Component Detail CTA
========================= */

.component-detail-cta {
    padding: var(--space-xl) 0;

    border-top:
        1px solid var(--color-border);
}

.component-detail-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-xl);

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.12),
            var(--color-surface)
        );

    border:
        1px solid
        rgba(79, 140, 255, 0.25);

    border-radius: var(--radius-lg);
}

.component-detail-cta-content h2 {
    max-width: 650px;

    font-size: clamp(
        1.6rem,
        4vw,
        2.7rem
    );

    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* =========================
   Resources Page
========================= */

.resource-library-section {
    padding:
        var(--space-xl)
        0
        var(--space-2xl);
}

.resource-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--space-sm);
}


.resource-card-footer
.resource-type {
    text-align: left;
}

/* =========================
   Resource Search
========================= */

.resource-search {
    max-width: 720px;

    margin-bottom: var(--space-md);
}

.resource-search-label {
    display: inline-block;

    color: var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 600;

    margin-bottom: 0.55rem;
}

.resource-search-field {
    position: relative;

    width: 100%;
}

.resource-search-input {
    width: 100%;
    height: 52px;

    padding:
        0.8rem
        3.2rem
        0.8rem
        2.9rem;

    background: var(--color-surface);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    font: inherit;
    font-size: 0.95rem;

    outline: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.resource-search-input::placeholder {
    color: var(--color-text-muted);
}

.resource-search-input:hover {
    background: var(--color-surface-hover);
}

.resource-search-input:focus {
    background: var(--color-surface);

    border-color: var(--color-accent);

    box-shadow:
        0 0 0 4px
        rgba(79, 140, 255, 0.12);
}

.resource-search-input::-webkit-search-cancel-button {
    appearance: none;
}

.resource-search-icon {
    position: absolute;

    top: 50%;
    left: 1rem;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;

    transform: translateY(-50%);
}

.resource-search-field:focus-within
.resource-search-icon {
    stroke: var(--color-accent);
}

.resource-search-clear {
    position: absolute;

    top: 50%;
    right: 0.75rem;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    background: transparent;
    color: var(--color-text-muted);

    border: 0;
    border-radius: var(--radius-pill);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.resource-search-clear:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.resource-search-clear:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.resource-search-clear svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
}


/* =========================
   Resource Toolbar
========================= */

.resource-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-xl);
}

.resource-filters {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);
}

.resource-filter-button {
    padding: 0.7rem 1.1rem;

    background: transparent;
    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.resource-filter-button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);

    transform: translateY(-1px);
}

.resource-filter-button.is-active {
    background: var(--color-accent);
    color: #ffffff;

    border-color: var(--color-accent);
}

.resource-status {
    flex-shrink: 0;

    color: var(--color-text-muted);

    font-size: 0.88rem;
    font-weight: 500;

    white-space: nowrap;
}


/* =========================
   Resource Grid
========================= */

.resources-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.resource-card {
    min-width: 0;
    min-height: 390px;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.resource-card:hover {
    background: var(--color-surface-hover);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform: translateY(-5px);
}


/* =========================
   Resource Card Header
========================= */

.resource-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-sm);

    margin-bottom: var(--space-md);
}

.resource-category {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.7rem;

    border: 1px solid;
    border-radius: var(--radius-pill);

    font-size: 0.68rem;
    font-weight: 600;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.resource-category-official-docs {
    background: rgba(79, 140, 255, 0.1);
    color: #8bb4ff;

    border-color:
        rgba(79, 140, 255, 0.28);
}

.resource-category-embedded {
    background: rgba(54, 211, 153, 0.08);
    color: #6ee7b7;

    border-color:
        rgba(54, 211, 153, 0.25);
}

.resource-category-fpga {
    background: rgba(139, 124, 255, 0.1);
    color: #b7acff;

    border-color:
        rgba(139, 124, 255, 0.28);
}

.resource-category-circuits {
    background: rgba(244, 185, 66, 0.08);
    color: #f7cb70;

    border-color:
        rgba(244, 185, 66, 0.25);
}

.resource-category-pcb {
    background: rgba(240, 107, 107, 0.08);
    color: #f5a3a3;

    border-color:
        rgba(240, 107, 107, 0.25);
}

.resource-category-tools {
    background: rgba(83, 193, 223, 0.08);
    color: #86d7eb;

    border-color:
        rgba(83, 193, 223, 0.25);
}

.resource-type {
    color: var(--color-text-muted);

    font-size: 0.75rem;
    font-weight: 500;

    text-align: right;
}


/* =========================
   Resource Content
========================= */

.resource-provider {
    color: var(--color-accent);

    font-size: 0.73rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.resource-title {
    font-size: 1.35rem;
    line-height: 1.25;

    margin-bottom: var(--space-sm);
}

.resource-description {
    color: var(--color-text-secondary);

    line-height: 1.7;

    margin-bottom: var(--space-md);
}


/* =========================
   Resource Tags
========================= */

.resource-tags {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-bottom: var(--space-md);

    list-style: none;
}

.resource-tags li {
    padding: 0.3rem 0.65rem;

    background:
        var(--color-surface-soft);

    color: var(--color-text-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-size: 0.72rem;
}


/* =========================
   Resource Footer
========================= */

.resource-card-footer {
    margin-top: auto;

    padding-top: var(--space-md);

    border-top: 1px solid var(--color-border);
}

.resource-card-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    color: var(--color-text-primary);

    font-size: 0.88rem;
    font-weight: 600;

    text-decoration: none;

    transition: color var(--transition-fast);
}

.resource-card-link:hover {
    color: var(--color-accent);
}

.resource-card-link svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resource-link-pending {
    color: var(--color-text-muted);

    font-size: 0.82rem;
}


/* =========================
   Resources Empty State
========================= */

.resources-empty-state {
    padding: var(--space-xl);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    text-align: center;
}

.resources-empty-icon {
    width: 48px;
    height: 48px;

    margin-bottom: var(--space-md);

    fill: none;
    stroke: var(--color-text-muted);

    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.resources-empty-state h2 {
    font-size: 1.4rem;

    margin-bottom: var(--space-xs);
}

.resources-empty-state p {
    color: var(--color-text-secondary);
}

/* =========================
   Home Data Sections
========================= */

.home-focus-section,
.home-dashboard-section {
    padding:
        var(--space-2xl)
        0;
}

.home-focus-section {
    border-top:
        1px solid var(--color-border);
}

.home-dashboard-section {
    background:
        var(--color-section-tint);

    border-top:
        1px solid var(--color-border);
}


/* =========================
   Current Focus
========================= */

.home-focus-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, 0.8fr);

    align-items: stretch;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(79, 140, 255, 0.13),
            var(--color-surface) 55%
        );

    border:
        1px solid
        rgba(79, 140, 255, 0.28);

    border-radius: var(--radius-lg);
}

.home-focus-content,
.home-progress-panel {
    min-width: 0;

    padding: var(--space-xl);
}

.home-progress-panel {
    background:
        var(--color-panel-overlay);

    border-left:
        1px solid var(--color-border);
}

.home-focus-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: var(--space-sm);
}

.home-focus-eyebrow,
.home-progress-label,
.home-preview-eyebrow {
    color: var(--color-accent);

    font-size: 0.73rem;
    font-weight: 600;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.home-focus-status {
    padding: 0.35rem 0.7rem;

    background:
        rgba(54, 211, 153, 0.08);

    color: #6ee7b7;

    border:
        1px solid
        rgba(54, 211, 153, 0.25);

    border-radius: var(--radius-pill);

    font-size: 0.72rem;
    font-weight: 600;

    white-space: nowrap;
}

.home-focus-content h2 {
    max-width: 700px;

    font-size: clamp(
        2rem,
        5vw,
        4rem
    );

    line-height: 1.04;
    letter-spacing: -0.045em;

    margin-bottom: var(--space-md);
}

.home-focus-description {
    max-width: 680px;

    color: var(--color-text-secondary);

    line-height: 1.75;

    margin-bottom: var(--space-lg);
}

.home-progress-panel h3 {
    font-size: 1.3rem;

    margin:
        0.45rem
        0
        var(--space-lg);
}


/* =========================
   Milestones
========================= */

.home-milestone-list {
    display: grid;

    gap: var(--space-sm);

    list-style: none;
}

.home-milestone {
    display: grid;
    grid-template-columns:
        10px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.75rem;

    padding: var(--space-sm);

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

.home-milestone-indicator {
    width: 10px;
    height: 10px;

    border-radius: var(--radius-pill);
}

.home-milestone-indicator-implemented {
    background: #6ee7b7;
}

.home-milestone-indicator-prototype {
    background: #8bb4ff;
}

.home-milestone-indicator-testing {
    background: #f7cb70;
}

.home-milestone-indicator-planned {
    background: var(--color-text-muted);
}

.home-milestone-label {
    min-width: 0;

    color: var(--color-text-primary);

    font-size: 0.9rem;

    overflow-wrap: anywhere;
}

.home-milestone-status {
    font-size: 0.72rem;
    font-weight: 600;

    white-space: nowrap;
}

.home-milestone-status-implemented {
    color: #6ee7b7;
}

.home-milestone-status-prototype {
    color: #8bb4ff;
}

.home-milestone-status-testing {
    color: #f7cb70;
}

.home-milestone-status-planned {
    color: var(--color-text-muted);
}


/* =========================
   Dashboard Header
========================= */

.home-dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-xl);

    margin-bottom: var(--space-2xl);
}

.home-dashboard-header h2 {
    font-size: clamp(
        2rem,
        5vw,
        3.8rem
    );

    line-height: 1.05;
    letter-spacing: -0.045em;
}

.home-dashboard-header > p {
    max-width: 480px;

    color: var(--color-text-secondary);

    line-height: 1.7;
}


/* =========================
   Home Preview Sections
========================= */

.home-preview-section {
    padding:
        var(--space-xl)
        0;

    border-top:
        1px solid var(--color-border);
}

.home-preview-section:first-of-type {
    padding-top: 0;

    border-top: 0;
}

.home-preview-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-lg);

    margin-bottom: var(--space-lg);
}

.home-preview-header h3 {
    font-size: clamp(
        1.7rem,
        4vw,
        2.8rem
    );

    line-height: 1.1;
    letter-spacing: -0.035em;

    margin-top: 0.35rem;
}

.home-preview-view-all {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    color: var(--color-text-secondary);

    font-size: 0.88rem;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast);
}

.home-preview-view-all:hover {
    color: var(--color-accent);
}

.home-preview-view-all svg,
.home-preview-link svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================
   Home Preview Grid
========================= */

.home-preview-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-md);
}

.home-preview-card {
    min-width: 0;
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: var(--space-lg);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-lg);

    transition:
        background-color
            var(--transition-normal),
        border-color
            var(--transition-normal),
        transform
            var(--transition-normal);
}

.home-preview-card:hover {
    background:
        var(--color-surface-hover);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform: translateY(-4px);
}

.home-preview-card-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-sm);

    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    margin-bottom: var(--space-md);
}

.home-preview-card-meta span,
.home-preview-card-meta time {
    overflow-wrap: anywhere;
}

.home-preview-kicker {
    color: var(--color-accent);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.home-preview-card h4 {
    font-size: 1.3rem;
    line-height: 1.25;

    margin-bottom: var(--space-sm);
}

.home-preview-card > p:not(
    .home-preview-kicker
) {
    color: var(--color-text-secondary);

    line-height: 1.7;

    margin-bottom: var(--space-md);
}

.home-preview-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-sm);

    margin-top: auto;

    padding-top: var(--space-md);

    border-top:
        1px solid var(--color-border);
}

.home-preview-state {
    max-width: 62%;

    color: var(--color-text-muted);

    font-size: 0.76rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.home-preview-link {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    color: var(--color-text-primary);

    font-size: 0.84rem;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast);
}

.home-preview-link:hover {
    color: var(--color-accent);
}

.home-preview-pending,
.home-preview-empty,
.home-data-loading {
    color: var(--color-text-muted);

    font-size: 0.82rem;
}

.home-preview-empty,
.home-data-loading {
    grid-column: 1 / -1;

    padding: var(--space-lg);

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);
}

/* =========================
   Shared Date Sort Control
========================= */

.content-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;

    gap: var(--space-sm);

    margin-left: auto;
}

.content-sort-button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    padding:
        0.55rem
        0.9rem;

    background:
        var(--color-surface);

    color:
        var(--color-text-secondary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast),
        transform
            var(--transition-fast);
}


.content-sort-button:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);

    border-color:
        rgba(
            79,
            140,
            255,
            0.35
        );

    transform:
        translateY(-1px);
}


.content-sort-button:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset:
        3px;
}


.content-sort-icon {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
            var(--transition-fast);
}

.content-sort-button[
    data-sort-order="oldest"
]
.content-sort-icon {
    transform:
        rotate(180deg);
}


/* =========================
   Shared Content Card System
========================= */

.content-card {
    min-width: 0;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-lg);

    transition:
        background-color
            var(--transition-normal),
        border-color
            var(--transition-normal),
        transform
            var(--transition-normal);
}


.content-card:hover {
    background:
        var(--color-surface-hover);

    border-color:
        rgba(79, 140, 255, 0.35);

    transform:
        translateY(-5px);
}


/* Shared card header */

.content-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-sm);

    margin-bottom:
        var(--space-md);
}


/* Shared date */

.content-card-date {
    flex-shrink: 0;

    color:
        var(--color-text-muted);

    font-size:
        0.8rem;

    font-weight:
        500;

    line-height:
        1.4;

    white-space:
        nowrap;
}


/* Shared footer */

.content-card-footer {
    margin-top:
        auto;

    padding-top:
        var(--space-md);

    border-top:
        1px solid var(--color-border);
}


/* Unavailable action */

.content-card-link-muted {
    color:
        var(--color-text-muted);

    cursor:
        default;

    pointer-events:
        none;

    text-decoration:
        none;

    transition:
        none;
}


.content-card-link-muted:hover {
    color:
        var(--color-text-muted);

    transform:
        none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 var(--space-md);
    }

    .hero h1 {
        font-size: 2.75rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }
    
}

/* =========================
   Reading Progress
========================= */

.project-toc > .container,
.reading-progress-anchor {
    position: relative;
}

.reading-progress,
.markdown-reading-progress {
    position: absolute;

    left: var(--space-lg);
    right: var(--space-lg);
    bottom: -1px;

    height: 2px;

    overflow: hidden;

    background: var(--color-surface-soft-strong);

    border-radius: var(--radius-pill);

    pointer-events: none;
}

.reading-progress-bar,
.markdown-reading-progress-bar {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--color-accent),
            #8bb4ff
        );

    border-radius: inherit;

    box-shadow:
        0 0 10px rgba(79, 140, 255, 0.35);

    transform: scaleX(0);
    transform-origin: left center;

    will-change: transform;
}



/* =========================
   Site Audit
========================= */

.site-audit-page {
    min-height: 100vh;

    padding:
        var(--space-xl)
        0
        var(--space-2xl);
}

.site-audit-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-xl);

    padding-bottom: var(--space-xl);

    border-bottom:
        1px solid var(--color-border);
}

.site-audit-header > div {
    max-width: 760px;
}

.site-audit-header h1 {
    font-size: clamp(
        2.7rem,
        7vw,
        5.2rem
    );

    line-height: 0.98;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.site-audit-header p:not(
    .section-label
) {
    color:
        var(--color-text-secondary);

    line-height: 1.75;
}


/* Audit notice */

.site-audit-notice {
    margin:
        var(--space-lg)
        0;

    padding: var(--space-md);

    background:
        rgba(79, 140, 255, 0.08);

    border:
        1px solid
        rgba(79, 140, 255, 0.24);

    border-radius:
        var(--radius-md);
}

.site-audit-notice strong {
    display: block;

    color:
        var(--color-text-primary);

    margin-bottom: 0.35rem;
}

.site-audit-notice p {
    color:
        var(--color-text-secondary);

    line-height: 1.65;
}


/* Summary */

.site-audit-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: var(--space-sm);

    margin:
        var(--space-xl)
        0
        var(--space-md);
}

.site-audit-summary-card {
    padding: var(--space-md);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);
}

.site-audit-summary-card span {
    display: block;

    color:
        var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 0.45rem;
}

.site-audit-summary-card strong {
    font-size: 1.8rem;
}


/* Status */

.site-audit-status {
    padding:
        var(--space-sm)
        0
        var(--space-xl);

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


/* Results */

.site-audit-results {
    padding-top: var(--space-lg);

    border-top:
        1px solid
        var(--color-border);
}

.site-audit-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-lg);

    margin-bottom: var(--space-lg);
}

.site-audit-results-header h2 {
    font-size: clamp(
        1.8rem,
        4vw,
        2.8rem
    );

    margin-top: 0.35rem;
}

.site-audit-filter {
    padding:
        0.65rem
        1rem;

    background:
        transparent;

    color:
        var(--color-text-secondary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast);
}

.site-audit-filter:hover:not(
    :disabled
) {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);
}

.site-audit-filter.is-active:not(
    :disabled
) {
    background:
        var(--color-accent);

    color: #ffffff;

    border-color:
        var(--color-accent);
}

.site-audit-filter:disabled {
    opacity: 0.45;

    cursor: not-allowed;
}


/* Report list */

.site-audit-report-list {
    display: grid;

    gap: var(--space-md);
}

.site-audit-report {
    overflow: hidden;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);
}

.site-audit-report.is-passed {
    border-color:
        rgba(54, 211, 153, 0.25);
}

.site-audit-report.has-issues {
    border-color:
        rgba(244, 185, 66, 0.26);
}

.site-audit-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding: var(--space-md);
}

.site-audit-report-path {
    color:
        var(--color-text-primary);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.88rem;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.site-audit-report-meta {
    color:
        var(--color-text-muted);

    font-size: 0.75rem;

    margin-top: 0.3rem;
}

.site-audit-report-state {
    flex-shrink: 0;

    padding:
        0.35rem
        0.65rem;

    border-radius:
        var(--radius-pill);

    font-size: 0.7rem;
    font-weight: 700;

    white-space: nowrap;
}

.site-audit-report-state.is-passed {
    background:
        rgba(54, 211, 153, 0.08);

    color: #6ee7b7;

    border:
        1px solid
        rgba(54, 211, 153, 0.25);
}

.site-audit-report-state.has-issues {
    background:
        rgba(244, 185, 66, 0.08);

    color: #f7cb70;

    border:
        1px solid
        rgba(244, 185, 66, 0.25);
}


/* Issues */

.site-audit-issue-list {
    display: grid;

    gap: 1px;

    background:
        var(--color-border);

    border-top:
        1px solid
        var(--color-border);

    list-style: none;
}

.site-audit-issue {
    padding: var(--space-md);

    background:
        var(--color-background);
}

.site-audit-issue-type {
    display: inline-block;

    margin-bottom: 0.35rem;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-audit-issue-warning
.site-audit-issue-type {
    color: #f7cb70;
}

.site-audit-issue-error
.site-audit-issue-type {
    color: #f59b9b;
}

.site-audit-issue p {
    color:
        var(--color-text-secondary);

    line-height: 1.55;
}

.site-audit-issue code {
    display: block;

    max-width: 100%;

    margin-top: 0.55rem;

    padding:
        0.5rem
        0.65rem;

    overflow-x: auto;

    background:
        var(--color-code-background);

    color:
        var(--color-text-primary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-sm);

    font-size: 0.75rem;

    white-space: nowrap;
}


/* Passed */

.site-audit-passed-message {
    padding: var(--space-md);

    color:
        var(--color-text-secondary);

    border-top:
        1px solid
        var(--color-border);
}


/* Empty state */

.site-audit-empty {
    padding: var(--space-xl);

    background:
        var(--color-surface);

    border:
        1px dashed
        var(--color-border);

    border-radius:
        var(--radius-lg);

    text-align: center;
}

.site-audit-empty h3 {
    margin-bottom: 0.4rem;
}

.site-audit-empty p {
    color:
        var(--color-text-secondary);

    line-height: 1.6;
}

/* =========================
   Responsive Test Lab
========================= */

.responsive-test-page {
    min-height: 100vh;

    padding:
        var(--space-xl)
        0
        var(--space-2xl);
}


/* Header */

.responsive-test-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-xl);

    padding-bottom: var(--space-xl);

    border-bottom:
        1px solid var(--color-border);
}

.responsive-test-header > div {
    max-width: 760px;
}

.responsive-test-header h1 {
    font-size: clamp(
        2.7rem,
        7vw,
        5.2rem
    );

    line-height: 0.98;
    letter-spacing: -0.055em;

    margin-bottom: var(--space-md);
}

.responsive-test-header p:not(
    .section-label
) {
    color: var(--color-text-secondary);

    line-height: 1.75;
}


/* Controls */

.responsive-test-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-lg);

    padding:
        var(--space-lg)
        0;
}

.responsive-page-control {
    min-width: min(100%, 300px);
}

.responsive-page-control label {
    display: block;

    margin-bottom: 0.5rem;

    color: var(--color-text-secondary);

    font-size: 0.78rem;
    font-weight: 600;
}

.responsive-page-control select {
    width: 100%;
    min-height: 46px;

    padding:
        0.7rem
        2.4rem
        0.7rem
        0.9rem;

    background: var(--color-surface);
    color: var(--color-text-primary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    font: inherit;

    cursor: pointer;
}

.responsive-page-control select:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset: 2px;
}

.responsive-width-controls {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-xs);
}

.responsive-width-button,
.responsive-check-button {
    min-height: 42px;

    padding:
        0.6rem
        0.9rem;

    background: transparent;
    color: var(--color-text-secondary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color
            var(--transition-fast),
        border-color
            var(--transition-fast),
        color
            var(--transition-fast);
}

.responsive-width-button:hover,
.responsive-check-button:hover {
    background:
        var(--color-surface-hover);

    color:
        var(--color-text-primary);
}

.responsive-width-button.is-active {
    background:
        var(--color-accent);

    color: #ffffff;

    border-color:
        var(--color-accent);
}


/* Preview info */

.responsive-preview-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding:
        var(--space-sm)
        var(--space-md);

    margin-bottom: var(--space-sm);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);
}

.responsive-preview-info > div {
    display: flex;
    align-items: center;

    gap: 0.6rem;
}

.responsive-preview-info span,
.responsive-preview-info p {
    color:
        var(--color-text-muted);

    font-size: 0.8rem;
}

.responsive-preview-info strong {
    color:
        var(--color-text-primary);

    font-size: 0.85rem;
}


/* Preview */

.responsive-preview-section {
    margin-bottom:
        var(--space-xl);
}

.responsive-preview-stage {
    width: 100%;

    padding:
        var(--space-lg);

    overflow-x: auto;
    overflow-y: hidden;

    background:
        var(--color-code-background);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);
}

.responsive-device-frame {
    box-sizing: content-box;

    width: 390px;
    height: 720px;

    margin-inline: auto;

    overflow: hidden;

    background: #ffffff;

    border:
        8px solid
        var(--color-border);

    border-radius:
        22px;

    box-shadow:
        0 20px 60px
        var(--color-shadow);

}

.responsive-device-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 0;
}


/* Diagnostics */

.responsive-diagnostics,
.responsive-audit-results {
    padding:
        var(--space-xl)
        0;

    border-top:
        1px solid
        var(--color-border);
}

.responsive-diagnostics > header,
.responsive-audit-results > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-lg);

    margin-bottom:
        var(--space-lg);
}

.responsive-diagnostics h2,
.responsive-audit-results h2 {
    margin-top: 0.35rem;

    font-size: clamp(
        1.8rem,
        4vw,
        2.8rem
    );
}

.responsive-current-results {
    padding:
        var(--space-md);

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);
}

.responsive-current-results > p {
    color:
        var(--color-text-secondary);
}


/* Current report */

.responsive-current-report-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding-bottom:
        var(--space-md);

    border-bottom:
        1px solid
        var(--color-border);
}

.responsive-current-report-heading strong {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    overflow-wrap: anywhere;
}

.responsive-current-report-heading span {
    flex-shrink: 0;

    color:
        var(--color-text-muted);

    font-size: 0.8rem;
}


/* Checks */

.responsive-check-list {
    display: grid;

    gap: var(--space-xs);

    padding-top:
        var(--space-sm);
}

.responsive-check-result {
    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1fr);

    align-items: start;

    gap: var(--space-sm);

    padding:
        var(--space-sm);

    border-radius:
        var(--radius-md);
}

.responsive-check-result.is-passed {
    background:
        rgba(54, 211, 153, 0.06);
}

.responsive-check-result.has-error {
    background:
        rgba(240, 107, 107, 0.07);
}

.responsive-check-icon {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius:
        var(--radius-pill);

    font-size: 0.9rem;
    font-weight: 800;
}

.is-passed
.responsive-check-icon {
    background:
        rgba(54, 211, 153, 0.12);

    color: #6ee7b7;
}

.has-error
.responsive-check-icon {
    background:
        rgba(240, 107, 107, 0.12);

    color: #f59b9b;
}

.responsive-check-result p {
    color:
        var(--color-text-secondary);

    line-height: 1.55;
}

.responsive-check-result ul {
    display: grid;

    gap: 0.35rem;

    margin-top: 0.55rem;

    list-style: none;
}

.responsive-check-result code {
    display: block;

    max-width: 100%;

    padding:
        0.4rem
        0.55rem;

    overflow-x: auto;

    background:
        var(--color-code-background);

    color:
        var(--color-text-primary);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-sm);

    font-size: 0.74rem;

    white-space: nowrap;
}


/* Automated audit */

.responsive-audit-status {
    margin-bottom:
        var(--space-lg);

    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}

.responsive-report-list {
    display: grid;

    gap: var(--space-md);
}

.responsive-audit-report {
    overflow: hidden;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);
}

.responsive-audit-report.is-passed {
    border-color:
        rgba(54, 211, 153, 0.25);
}

.responsive-audit-report.has-error {
    border-color:
        rgba(240, 107, 107, 0.28);
}

.responsive-audit-report > header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);

    padding:
        var(--space-md);

    border-bottom:
        1px solid
        var(--color-border);
}

.responsive-audit-report header p {
    color:
        var(--color-text-primary);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.84rem;

    overflow-wrap: anywhere;
}

.responsive-audit-report header span {
    display: block;

    margin-top: 0.25rem;

    color:
        var(--color-text-muted);

    font-size: 0.75rem;
}

.responsive-audit-report header strong {
    flex-shrink: 0;

    font-size: 0.75rem;
}

.responsive-audit-report.is-passed
header strong {
    color: #6ee7b7;
}

.responsive-audit-report.has-error
header strong {
    color: #f59b9b;
}


/* Empty */

.responsive-empty-state {
    padding:
        var(--space-xl);

    background:
        var(--color-surface);

    border:
        1px dashed
        var(--color-border);

    border-radius:
        var(--radius-lg);

    text-align: center;
}

.responsive-empty-state h3 {
    margin-bottom: 0.4rem;
}

.responsive-empty-state p {
    color:
        var(--color-text-secondary);
}

/* =========================
   Mobile Navigation
========================= */

@media (max-width: 768px) {

    .content-toolbar-actions {
        width: 100%;

        justify-content:
            space-between;

        flex-wrap: wrap;

        margin-left: 0;
    }


    .content-toolbar-actions
    .filter-status,

    .content-toolbar-actions
    .notes-status,

    .content-toolbar-actions
    .component-status,

    .content-toolbar-actions
    .resource-status {
        width: auto;

        white-space: normal;
    }

    .responsive-test-page {
        padding:
            var(--space-lg)
            0
            var(--space-xl);
    }

    .responsive-test-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-lg);
    }

    .responsive-test-header .button {
        width: 100%;
    }

    .responsive-width-controls {
        flex-wrap: nowrap;

        padding-bottom: 0.25rem;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .responsive-width-controls::-webkit-scrollbar {
        display: none;
    }

    .responsive-width-button {
        flex: 0 0 auto;
    }

    .responsive-preview-info {
        align-items: flex-start;
        flex-direction: column;
    }

    .responsive-preview-stage {
        padding:
            var(--space-sm);
    }

    .responsive-device-frame {
        margin-inline: 0;
    }

    .responsive-diagnostics > header,
    .responsive-audit-results > header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-sm);
    }

    .responsive-check-button {
        width: 100%;
    }

    .responsive-audit-report > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-audit-page {
        padding:
            var(--space-lg)
            0
            var(--space-xl);
    }

    .site-audit-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-lg);

        padding-bottom:
            var(--space-lg);
    }

    .site-audit-header .button {
        width: 100%;
    }

    .site-audit-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: var(--space-xs);
    }

    .site-audit-summary-card {
        padding: var(--space-sm);
    }

    .site-audit-summary-card strong {
        font-size: 1.5rem;
    }

    .site-audit-results-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-sm);
    }

    .site-audit-filter {
        width: 100%;
    }

    .site-audit-report-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-sm);
    }

    .site-audit-report-state {
        align-self: flex-start;
    }

    .site-audit-issue {
        padding: var(--space-sm);
    }

    .nav-theme-item {
        width: 100%;
    }

    .theme-toggle {
        width: 100%;
        height: auto;

        justify-content: flex-start;

        padding:
            0.8rem
            1rem;

        border-radius:
            var(--radius-md);
    }

    .theme-toggle-label {
        display: inline;
    }

    .home-focus-section,
    .home-dashboard-section {
        padding:
            var(--space-xl)
            0;
    }

    .home-focus-content,
    .home-progress-panel {
        padding: var(--space-lg);
    }

    .home-focus-status-row {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-xs);
    }

    .home-focus-content h2 {
        font-size: clamp(
            2rem,
            11vw,
            3.2rem
        );
    }

    .home-milestone {
        grid-template-columns:
            10px
            minmax(0, 1fr);

        gap: 0.65rem;
    }

    .home-milestone-status {
        grid-column: 2;
    }

    .home-dashboard-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-md);

        margin-bottom: var(--space-xl);
    }

    .home-preview-section {
        padding:
            var(--space-lg)
            0;
    }

    .home-preview-header {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-sm);
    }

    .home-preview-grid {
        gap: var(--space-sm);
    }

    .home-preview-card {
        min-height: auto;

        padding: var(--space-md);

        border-radius: var(--radius-md);
    }

    .home-preview-card-meta {
        font-size: 0.68rem;
    }

    .home-preview-card h4 {
        font-size: 1.16rem;
    }

    .home-preview-card-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.5rem;
    }

    .home-preview-state {
        max-width: none;
    }

    .home-preview-link {
        white-space: normal;
    }

    .resource-search {
        max-width: none;

        margin-bottom: var(--space-sm);
    }

    .resource-search-input {
        height: 48px;

        padding-left: 2.75rem;

        font-size: 0.9rem;

        border-radius: var(--radius-md);
    }

    .resource-toolbar {
        align-items: stretch;
        flex-direction: column;

        gap: var(--space-sm);

        margin-bottom: var(--space-lg);
    }

    .resource-filters {
        flex-wrap: nowrap;

        width: 100%;

        padding-bottom: 0.35rem;

        overflow-x: auto;
        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        scroll-snap-type: inline proximity;
    }

    .resource-filters::-webkit-scrollbar {
        display: none;
    }

    .resource-filter-button {
        flex: 0 0 auto;

        padding: 0.65rem 1rem;

        font-size: 0.82rem;

        white-space: nowrap;

        scroll-snap-align: start;
    }

    .resource-status {
        width: 100%;

        font-size: 0.82rem;

        white-space: normal;
    }

    .resources-grid {
        gap: var(--space-sm);
    }

    .resource-card {
        min-height: auto;

        padding: var(--space-md);

        border-radius: var(--radius-md);
    }

    .resource-card-header {
        align-items: flex-start;
    }

    .resource-title {
        font-size: 1.18rem;
    }

    .resource-description {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .resource-type {
        font-size: 0.7rem;
    }

    .component-detail-shell {
        width: min(
            100% - 2rem,
            1000px
        );
    }

    .component-detail-hero {
        padding:
            var(--space-lg)
            0
            var(--space-xl);
    }

    .component-detail-heading {
        margin-top: var(--space-md);
    }

    .component-detail-title {
        font-size: clamp(
            2.65rem,
            13vw,
            4.3rem
        );
    }

    .component-detail-summary {
        grid-template-columns: 1fr;

        margin-top: var(--space-lg);
    }

    .component-detail-section {
        padding: 2.1rem 0;
    }

    .component-detail-section-head {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 0.8rem;

        margin-bottom: var(--space-md);
    }

    .component-detail-section-number {
        width: 38px;
        height: 38px;

        font-size: 0.68rem;
    }

    .component-detail-section-title {
        font-size: clamp(
            1.65rem,
            8vw,
            2.35rem
        );
    }

    .component-detail-section-content {
        padding-left: 0;
    }

    .component-detail-section-content > p {
        line-height: 1.7;

        margin-bottom: var(--space-sm);
    }

    .component-detail-role-grid,
    .component-detail-spec-grid,
    .component-detail-interface-grid,
    .component-detail-pin-grid,
    .component-detail-media-grid {
        grid-template-columns: 1fr;
    }

    .component-detail-warning {
        grid-template-columns: 36px minmax(0, 1fr);

        gap: var(--space-sm);

        padding: var(--space-md);
    }

    .component-detail-warning svg {
        width: 36px;
        height: 36px;
    }

    .component-detail-pin-grid > div {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.45rem;
    }

    .component-detail-project-panel {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-md);
    }

    .component-detail-project-panel .button {
        width: 100%;
    }

    .component-detail-notes-grid article {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: var(--space-sm);

        padding: var(--space-md);
    }

    .component-detail-notes-grid article > span {
        width: 34px;
        height: 34px;
    }

    .component-detail-media-placeholder {
        min-height: 220px;

        padding: var(--space-md);
    }

    .component-detail-cta-content {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-lg);
    }

    .component-detail-cta-content .button {
        width: 100%;
    }

    .component-search {
        max-width: none;

        margin-bottom: var(--space-sm);
    }

    .component-search-input {
        height: 48px;

        padding-left: 2.75rem;

        font-size: 0.9rem;

        border-radius: var(--radius-md);
    }

    .component-toolbar {
        align-items: stretch;
        flex-direction: column;

        gap: var(--space-sm);

        margin-bottom: var(--space-lg);
    }

    .component-filters {
        flex-wrap: nowrap;

        width: 100%;

        padding-bottom: 0.35rem;

        overflow-x: auto;

        scrollbar-width: none;

        scroll-snap-type: inline proximity;
    }

    .component-filters::-webkit-scrollbar {
        display: none;
    }

    .component-filter-button {
        flex: 0 0 auto;

        padding: 0.65rem 1rem;

        font-size: 0.84rem;

        white-space: nowrap;

        scroll-snap-align: start;
    }

    .component-status {
        width: 100%;

        font-size: 0.82rem;

        white-space: normal;
    }

    .components-grid {
        grid-template-columns: 1fr;

        gap: var(--space-sm);
    }

    .component-card {
        min-height: auto;

        padding: var(--space-md);

        border-radius: var(--radius-md);
    }

    .component-name {
        font-size: 1.2rem;
    }

    .component-summary {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .tech-note-equation {
        margin: var(--space-md) 0;

        padding: var(--space-md);

        text-align: left;
    }

    .tech-note-equation .katex-display {
        text-align: left;
    }

    .tech-note-equation .katex {
        font-size: 1rem;
    }

    .note-formula {
        padding: 0.85rem 1rem;

        text-align: left;
    }

    .note-formula .katex-display {
        text-align: left;
    }

    .note-formula .katex {
        font-size: 0.9rem;
    }

    .notes-search {
        max-width: none;

        margin-bottom: var(--space-sm);
    }

    .notes-search-label {
        font-size: 0.78rem;
    }

    .notes-search-input {
        height: 48px;

        padding-left: 2.75rem;

        font-size: 0.9rem;

        border-radius: var(--radius-md);
    }

    .notes-search-icon {
        left: 0.95rem;

        width: 18px;
        height: 18px;
    }

    .tech-note-shell {
        width: min(
            100% - 2rem,
            1000px
        );
    }

    .tech-note-hero {
        padding:
            var(--space-lg)
            0
            var(--space-xl);
    }

    .tech-note-heading {
        margin-top: var(--space-md);
    }

    .tech-note-title {
        font-size: clamp(
            2.65rem,
            13vw,
            4.3rem
        );
    }

    .tech-note-summary {
        grid-template-columns: 1fr;

        margin-top: var(--space-lg);
    }

    .tech-note-section {
        padding: 2.1rem 0;
    }

    .tech-note-section-head {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 0.8rem;

        margin-bottom: var(--space-md);
    }

    .tech-note-section-number {
        width: 38px;
        height: 38px;

        font-size: 0.68rem;
    }

    .tech-note-section-title {
        font-size: clamp(
            1.65rem,
            8vw,
            2.35rem
        );
    }

    .tech-note-section-content {
        padding-left: 0;
    }

    .tech-note-section-content > p {
        line-height: 1.7;

        margin-bottom: var(--space-sm);
    }

    .tech-note-highlight-grid,
    .tech-note-variable-grid,
    .tech-note-given-values,
    .tech-note-callout-grid,
    .tech-note-media-grid {
        grid-template-columns: 1fr;
    }


    .tech-note-steps {
        margin: var(--space-md) 0;
    }

    .tech-note-steps li {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: var(--space-sm);

        padding: var(--space-md);
    }

    .tech-note-step-number {
        width: 34px;
        height: 34px;
    }

    .tech-note-result {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.35rem;

        padding: var(--space-md);
    }

    .tech-note-callout {
        padding: var(--space-md);
    }

    .tech-note-media-placeholder {
        min-height: 220px;

        padding: var(--space-md);
    }

    .tech-note-cta-content {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-lg);
    }

    .tech-note-cta-content .button {
        width: 100%;
    }


    .note-content-section {
        padding: var(--space-xl) 0;
    }

    .note-block {
        margin-bottom: var(--space-xl);
    }

    .note-block .section-label {
        margin-bottom: 0.35rem;
    }

    .note-section-title {
        margin-bottom: var(--space-sm);
    }

    .note-block p:not(.section-label) {
        margin-bottom: var(--space-sm);

        line-height: 1.7;
    }

    .note-list {
        margin-bottom: var(--space-sm);
    }

    .breadcrumb {
        max-width: 100%;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .note-page-title {
        font-size: clamp(2.6rem, 13vw, 4.3rem);
    }

    .note-formula-panel {
        padding: var(--space-md);

        font-size: 0.95rem;
        text-align: left;
    }

    .note-page-cta-content {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-lg);
    }

    .note-page-cta-content .button {
        width: 100%;
    }

    .notes-toolbar {
        align-items: stretch;
        flex-direction: column;

        gap: var(--space-sm);

        margin-bottom: var(--space-lg);
    }

    .note-filters {
        flex-wrap: nowrap;

        width: 100%;

        gap: 0.5rem;

        padding-bottom: 0.35rem;

        overflow-x: auto;
        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        scroll-snap-type: inline proximity;
    }

    .note-filters::-webkit-scrollbar {
        display: none;
    }

    .note-filter-button {
        flex: 0 0 auto;

        padding: 0.65rem 1rem;

        font-size: 0.85rem;

        white-space: nowrap;

        scroll-snap-align: start;
    }

    .notes-status {
        width: 100%;

        font-size: 0.82rem;

        white-space: normal;
    }

    .notes-grid {
        grid-template-columns: 1fr;

        gap: var(--space-sm);
    }

    .note-card {
        min-height: auto;

        padding: var(--space-md);

        border-radius: var(--radius-md);
    }

    .note-card-header {
        margin-bottom: var(--space-sm);
    }

    .note-title {
        font-size: 1.2rem;
        line-height: 1.3;

        margin-bottom: var(--space-xs);
    }

    .note-summary {
        font-size: 0.94rem;
        line-height: 1.65;

        margin-bottom: var(--space-sm);
    }

    .note-type {
        padding: 0.3rem 0.6rem;

        font-size: 0.68rem;
    }

    .note-date {
        font-size: 0.75rem;
    }

    .note-category {
        font-size: 0.7rem;

        margin-bottom: 0.4rem;
    }

    .note-type {
        padding: 0.3rem 0.6rem;

        font-size: 0.68rem;
    }

    .note-date {
        font-size: 0.75rem;
    }

    .note-category {
        font-size: 0.7rem;

        margin-bottom: 0.4rem;
    }

    .note-formula {
        margin-bottom: var(--space-sm);

        padding: 0.85rem 1rem;

        font-size: 0.9rem;
        text-align: left;

        scrollbar-width: thin;
    }

    .note-tags {
        gap: 0.4rem;

        margin-bottom: var(--space-sm);
    }

    .note-tags li {
        padding: 0.28rem 0.55rem;

        font-size: 0.7rem;
    }

    .note-card-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.35rem;

        padding-top: var(--space-sm);
    }

    .note-status,
    .note-link {
        font-size: 0.8rem;
    }

    .focus-grid {
        grid-template-columns: 1fr;
    }

    .focus-card {
        min-height: auto;
    }

    .journey-item {
        gap: var(--space-md);
    }

    .journey-content {
        padding: var(--space-md);
    }

    .about-cta-content {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-lg);
    }

    .about-cta-content .button {
        width: 100%;
    }

    .reading-progress {
        left: var(--space-md);
        right: var(--space-md);
    }

    .project-media-grid {
        grid-template-columns: 1fr;
    }

    .media-plan-card-wide {
        grid-column: auto;
    }

    .media-plan-card-wide .media-plan-visual {
        min-height: 240px;
    }

    .project-media-placeholder {
        min-height: 320px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;

        top: calc(100% + 0.75rem);
        right: 0;

        width: min(320px, calc(100vw - 3rem));

        display: grid;

        gap: 0.25rem;

        padding: 0.75rem;

        background: var(--color-surface);

        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);

        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-0.5rem);

        transition:
            opacity var(--transition-fast),
            visibility var(--transition-fast),
            transform var(--transition-fast);
    }

    .nav-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }

    .nav-menu a {
        display: block;

        padding: 0.85rem 1rem;

        border-radius: var(--radius-sm);
    }

    .nav-menu a:hover {
        background: var(--color-surface-hover);
    }

    .hero-actions {
        width: 100%;
        max-width: 320px;

        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: var(--space-lg);
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-menu a[aria-current="page"] {
        background: var(--color-surface-hover);
    }

    .nav-menu a[aria-current="page"]::after {
        display: none;
    }

    .project-toolbar {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-sm);
    }

    .project-page-title {
        font-size: clamp(2.75rem, 14vw, 4.5rem);
    }

    .project-hero-actions {
        width: 100%;

        flex-direction: column;
    }

    .project-hero-actions .button {
        width: 100%;
    }

    .feature-status-grid {
        grid-template-columns: 1fr;
    }

    .roadmap-item {
        grid-template-columns: 1fr;

        gap: var(--space-sm);
    }

    .project-cta-content {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--space-lg);
    }
}

@media (max-width: 900px) {
    
    .home-focus-card {
        grid-template-columns: 1fr;
    }

    .home-progress-panel {
        border-top:
            1px solid var(--color-border);

        border-left: 0;
    }

    .home-preview-grid {
        grid-template-columns:
            minmax(0, 1fr);

        max-width: 760px;

        margin-inline: auto;
    }

    .resources-grid {
        grid-template-columns:
            minmax(0, 1fr);

        max-width: 760px;

        margin-inline: auto;
    }

    .components-grid {
        grid-template-columns: 1fr;

        gap: var(--space-sm);
    }

    .note-page-hero-grid,
    .note-content-layout {
        grid-template-columns: 1fr;
    }

    .note-page-hero-grid > *,
    .note-content-layout > * {
        min-width: 0;
    }

    .note-main-content,
    .note-block {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .note-summary-card,
    .note-sidebar {
        max-width: 620px;
    }

    .note-sidebar {
        position: static;
    }

    .notes-grid {
        grid-template-columns: 1fr;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;
    }

    .engineering-profile {
        position: static;

        max-width: 620px;
    }

    .focus-grid {
        grid-template-columns:
            repeat(1, minmax(0, 1fr));
    }

    .project-hero-grid,
    .case-study-layout {
        grid-template-columns: 1fr;
    }

    .project-summary,
    .project-highlights {
        max-width: 600px;
    }

    .feature-status-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .architecture-flow {
        grid-template-columns: 1fr;
    }

    .architecture-arrow {
        transform: rotate(90deg);
    }

}

@media (max-width: 480px) {

    .lab-notes-section {
        padding-top: var(--space-lg);
    }

    .note-filter-button {
        padding: 0.6rem 0.85rem;
    }

    .note-card {
        padding: 1rem;
    }

    .note-card-header {
        align-items: flex-start;
    }

    .note-title {
        font-size: 1.12rem;
    }

    .note-summary {
        font-size: 0.9rem;
    }

    .note-formula {
        margin-inline: -0.15rem;

        font-size: 0.85rem;
    }
}

@media (hover: none) {

    .theme-toggle:hover {
        background:
            var(--color-surface);

        color:
            var(--color-text-secondary);

        border-color:
            var(--color-border);

        transform: none;
    }

    .home-preview-card:hover {
        background: var(--color-surface);

        border-color:
            var(--color-border);

        transform: none;
    }
    
    .resource-card:hover {
        background: var(--color-surface);

        border-color: var(--color-border);

        transform: none;
    }

    .resource-filter-button:hover {
        background: transparent;
        color: var(--color-text-secondary);

        transform: none;
    }

    .resource-filter-button.is-active:hover {
        background: var(--color-accent);
        color: #ffffff;

        border-color: var(--color-accent);
    }

    .component-card:hover {
        background: var(--color-surface);

        border-color: var(--color-border);

        transform: none;
    }

    .component-filter-button:hover {
        background: transparent;
        color: var(--color-text-secondary);

        transform: none;
    }

    .component-filter-button.is-active:hover {
        background: var(--color-accent);
        color: #ffffff;

        border-color: var(--color-accent);
    }
    
    .note-card:hover {
        background: var(--color-surface);
        border-color: var(--color-border);

        transform: none;
    }

    .note-filter-button:hover {
        background: transparent;
        color: var(--color-text-secondary);

        transform: none;
    }

    .note-filter-button.is-active:hover {
        background: var(--color-accent);
        color: #ffffff;

        border-color: var(--color-accent);
    }
}

/* =========================
   Accessibility
========================= */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.skip-link {
    position: fixed;

    top: 1rem;
    left: 1rem;
    z-index: 2000;

    padding: 0.75rem 1rem;

    background: var(--color-accent);
    color: #ffffff;

    border-radius: var(--radius-sm);

    font-weight: 600;
    text-decoration: none;

    transform: translateY(-200%);

    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

}