@layer reset, base, layout, components, states;

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

    html {
        color-scheme: light;
    }

    body,
    h1,
    h2,
    h3,
    p,
    ul,
    ol {
        margin: 0;
    }

    ul,
    ol {
        padding: 0;
    }

    img,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    button,
    input {
        font: inherit;
    }
}

@layer base {
    :root {
        --bg-deep: #1f2d2f;
        --bg-mid: #42565a;
        --bg-warm: #f4ead8;
        --surface: rgba(255, 248, 238, 0.88);
        --surface-strong: #fff9ee;
        --ink-strong: #1b2023;
        --ink-soft: #485558;
        --border-soft: rgba(38, 42, 45, 0.14);
        --shadow-soft: 0 12px 24px rgba(18, 22, 24, 0.1);
        --shadow-note: 0 8px 16px rgba(43, 34, 18, 0.12);
        --shadow-note-hover: 0 10px 18px rgba(33, 25, 13, 0.14);
        --radius-panel: 1.15rem;
        --radius-note: 0.38rem 0.45rem 0.34rem 0.5rem;
        --space-1: 0.32rem;
        --space-2: 0.6rem;
        --space-3: 0.85rem;
        --space-4: 1.05rem;
        --space-5: 1.45rem;
        --space-6: 2rem;
        --space-7: 2.7rem;
        --max-shell: 92rem;
        --focus-ring: #0d5d73;
        --paper-emergency: #fff0b6;
        --paper-emergency-alt: #ffd8a8;
        --paper-mobility: #dff4ff;
        --paper-mobility-alt: #cde7ff;
        --paper-health: #e5f4d8;
        --paper-health-alt: #d5efcf;
        --paper-civic: #f5e6cb;
        --paper-civic-alt: #f2dbb8;
        --paper-environment: #d9f1e7;
        --paper-environment-alt: #d7ecf5;
        --font-heading: "Palatino Linotype", "Book Antiqua", "Iowan Old Style", Georgia, serif;
        --font-body: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
        --font-ui: ui-rounded, "Trebuchet MS", "Avenir Next", sans-serif;
    }

    html {
        font-family: var(--font-body);
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 248, 233, 0.16), transparent 28%),
            radial-gradient(circle at 80% 0%, rgba(255, 246, 220, 0.11), transparent 22%),
            linear-gradient(180deg, #243336 0%, #3d5053 52%, #516568 100%);
        min-block-size: 100%;
    }

    body {
        color: var(--ink-strong);
        min-block-size: 100vh;
    }

    a {
        color: #0d4e6b;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

    a:hover {
        text-decoration-thickness: 0.12em;
    }

    :focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

    .visually-hidden {
        block-size: 1px;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }
}

@layer layout {
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-3);
        inset-inline-start: var(--space-3);
        z-index: 50;
        padding: 0.65rem 0.9rem;
        background: var(--surface-strong);
        border-radius: 999px;
        box-shadow: var(--shadow-soft);
        transform: translateY(-180%);
        transition: transform 160ms ease;
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }

    .page-shell {
        inline-size: min(100% - 2rem, var(--max-shell));
        margin-inline: auto;
        padding-block: clamp(0.8rem, 1.6vw, 1.2rem) clamp(2.2rem, 3.2vw, 3.2rem);
    }

    .hero,
    .control-bar,
    .search-results,
    .board {
        position: relative;
        overflow: clip;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: var(--shadow-soft);
    }

    .hero,
    .control-bar,
    .search-results {
        border-radius: var(--radius-panel);
        background:
            linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(245, 236, 224, 0.92)),
            linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%);
    }

    .hero {
        padding: clamp(1rem, 1.7vw, 1.55rem);
        margin-block-end: var(--space-4);
    }

    .control-bar {
        padding: clamp(0.8rem, 1.4vw, 1rem);
        margin-block-end: var(--space-4);
    }

    .controls-grid {
        display: grid;
        gap: var(--space-4);
    }

    .live-row {
        display: grid;
        gap: var(--space-2);
        margin-block-start: var(--space-3);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid rgba(93, 79, 52, 0.12);
    }

    .search-results {
        padding: 0.85rem 1rem;
        margin-block-end: var(--space-4);
    }

    .board {
        padding: clamp(0.95rem, 1.7vw, 1.4rem);
        border-radius: calc(var(--radius-panel) + 0.3rem);
        background:
            radial-gradient(circle at 24% 20%, rgba(255, 244, 219, 0.34), transparent 16%),
            radial-gradient(circle at 78% 15%, rgba(255, 248, 228, 0.22), transparent 18%),
            repeating-linear-gradient(
                135deg,
                rgba(84, 63, 24, 0.028) 0,
                rgba(84, 63, 24, 0.028) 4px,
                rgba(255, 255, 255, 0.03) 4px,
                rgba(255, 255, 255, 0.03) 10px
            ),
            linear-gradient(180deg, #ead8b8 0%, #dfcca9 100%);
        border-color: rgba(123, 96, 47, 0.18);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            inset 0 -10px 26px rgba(121, 90, 28, 0.08),
            var(--shadow-soft);
    }

    .board-section + .board-section {
        margin-block-start: calc(var(--space-7) - 0.2rem);
    }

    .notes-grid {
        display: grid;
        gap: 0.95rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.6rem), 1fr));
        align-items: start;
    }

    .control-cluster {
        display: grid;
        gap: 0.7rem;
        padding: 0.8rem 0.9rem;
        border: 1px solid rgba(47, 58, 61, 0.12);
        border-radius: 0.95rem;
        background: rgba(255, 252, 247, 0.82);
    }

    .scope-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .results-head {
        display: grid;
        gap: var(--space-1);
        margin-block-end: var(--space-3);
    }

    .results-list {
        display: grid;
        gap: 0.5rem;
        list-style: decimal;
        padding-inline-start: 1.2rem;
    }
}

@layer components {
    .hero::before,
    .control-bar::before,
    .search-results::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 55%);
        pointer-events: none;
    }

    .hero-kicker,
    .section-kicker,
    .note-eyebrow {
        font-family: var(--font-ui);
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #5c4c39;
    }

    .hero h1,
    .section-header h2,
    .results-head h2 {
        font-family: var(--font-heading);
        letter-spacing: -0.02em;
    }

    .hero h1 {
        font-size: clamp(2.1rem, 4vw, 3.25rem);
        line-height: 0.98;
        max-inline-size: 14ch;
        margin-block: 0.28rem 0.55rem;
    }

    .hero-summary {
        max-inline-size: 44ch;
        font-size: 1.08rem;
        line-height: 1.5;
        color: #3f4b4f;
    }

    .hero-main {
        display: grid;
        gap: 1rem;
        align-items: start;
    }

    .hero-copy {
        display: grid;
        gap: 0.15rem;
    }

    .hero-card {
        display: grid;
        gap: 0.7rem;
        padding: 0.9rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(63, 76, 79, 0.12);
        background:
            linear-gradient(180deg, rgba(255, 252, 248, 0.88), rgba(250, 243, 233, 0.82));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .hero-card-title {
        font-family: var(--font-ui);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #5b4b3a;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .hero-stats div {
        display: grid;
        gap: 0.12rem;
    }

    .hero-stats dt {
        font-size: 0.82rem;
        color: #5b6a6d;
    }

    .hero-stats dd {
        font-family: var(--font-heading);
        font-size: 1.15rem;
        font-weight: 700;
    }

    .hero-card-copy {
        font-size: 0.94rem;
        line-height: 1.45;
        color: #4b585c;
    }

    .fallback-note,
    .cluster-head p,
    .section-summary,
    .scope-summary,
    .results-head p,
    .app-message,
    .board-empty {
        line-height: 1.55;
        color: var(--ink-soft);
    }

    .fallback-note,
    .scope-summary,
    .results-head p,
    .app-message,
    .board-empty {
        font-size: 0.96rem;
    }

    .cluster-head {
        display: grid;
        gap: 0.12rem;
    }

    .cluster-head--row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.7rem;
    }

    .cluster-head h2 {
        font-size: 0.96rem;
        font-family: var(--font-ui);
        line-height: 1.1;
    }

    .cluster-head p {
        font-size: 0.94rem;
        color: #556366;
    }

    .focus-strip {
        display: grid;
        gap: 0.68rem;
    }

    .control-cluster--search {
        background: linear-gradient(180deg, rgba(255, 251, 246, 0.92), rgba(248, 241, 231, 0.82));
    }

    .scope-actions--search,
    .scope-actions--utility {
        align-items: center;
    }

    .toolbar-button,
    .note-button,
    .filter-chip,
    .filter-option,
    .check-row {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        border-radius: 999px;
        border: 1px solid rgba(39, 51, 54, 0.16);
        background: rgba(255, 251, 244, 0.92);
        color: var(--ink-strong);
    }

    .toolbar-button,
    .note-button,
    .filter-chip {
        cursor: pointer;
    }

    .toolbar-button,
    .note-button {
        padding: 0.48rem 0.76rem;
        min-block-size: 2.15rem;
        font-size: 0.94rem;
    }

    .toolbar-button--ghost {
        background: rgba(255, 255, 255, 0.5);
    }

    .toolbar-button[aria-pressed="true"] {
        background: rgba(22, 86, 108, 0.12);
        border-color: rgba(13, 78, 107, 0.36);
    }

    .search-field input {
        inline-size: 100%;
        min-block-size: 2.7rem;
        padding: 0.72rem 0.9rem;
        border: 1px solid rgba(39, 51, 54, 0.16);
        border-radius: 0.95rem;
        background: rgba(255, 252, 248, 0.96);
        font-size: 1rem;
    }

    .check-row {
        padding: 0.5rem 0.74rem;
        cursor: pointer;
        user-select: none;
        font-size: 0.93rem;
    }

    .check-row input {
        inline-size: 1rem;
        block-size: 1rem;
        accent-color: #0d4e6b;
    }

    .filter-panel {
        border: 1px solid rgba(39, 51, 54, 0.16);
        border-radius: 0.95rem;
        background: rgba(255, 251, 244, 0.92);
    }

    .filter-panel summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.7rem 0.9rem;
        list-style: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .filter-panel summary::-webkit-details-marker {
        display: none;
    }

    .filter-panel-body {
        display: grid;
        gap: 0.48rem;
        padding: 0 0.85rem 0.85rem;
    }

    .filter-option {
        justify-content: space-between;
        padding: 0.52rem 0.7rem;
        font-size: 0.94rem;
    }

    .filter-option label {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        inline-size: 100%;
        cursor: pointer;
    }

    .filter-option input {
        accent-color: #0d4e6b;
    }

    .filter-count {
        color: #566568;
        font-size: 0.92rem;
    }

    .filter-chip {
        padding: 0.42rem 0.68rem;
        font-size: 0.92rem;
        background: rgba(255, 249, 239, 0.94);
    }

    .filter-chip button {
        border: 0;
        padding: 0 0 0 0.1rem;
        background: transparent;
        cursor: pointer;
        color: #6f3c21;
    }

    .section-header {
        display: grid;
        gap: 0.28rem;
        margin-block-end: 0.9rem;
        max-inline-size: 44rem;
    }

    .section-kicker {
        font-size: 0.92rem;
        color: #604d34;
    }

    .section-header h2 {
        font-size: clamp(1.72rem, 2.75vw, 2.2rem);
    }

    .section-summary {
        font-size: 1rem;
        line-height: 1.5;
        color: #4a585b;
    }

    .note {
        position: relative;
        container-type: inline-size;
        transform: rotate(var(--note-rotate, 0deg));
    }

    .note::after {
        content: "";
        position: absolute;
        inset-inline: 15%;
        inset-block-end: -0.45rem;
        block-size: 0.85rem;
        background: rgba(69, 51, 20, 0.12);
        filter: blur(6px);
        border-radius: 999px;
        z-index: 0;
    }

    .note-surface {
        position: relative;
        display: grid;
        gap: var(--space-3);
        min-block-size: 100%;
        padding: 0.95rem 0.92rem 0.88rem;
        border: 1px solid rgba(89, 69, 30, 0.12);
        border-radius: var(--radius-note);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 20%),
            linear-gradient(135deg, color-mix(in srgb, var(--note-paper) 87%, white 13%), var(--note-paper-alt));
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.42) inset,
            var(--shadow-note);
        z-index: 1;
    }

    .note-surface::before {
        content: "";
        position: absolute;
        inset-block-start: 0.48rem;
        inset-inline-start: 50%;
        inline-size: 3.55rem;
        block-size: 0.78rem;
        transform: translateX(-50%) rotate(var(--tape-rotate, 0deg));
        background: linear-gradient(180deg, rgba(254, 248, 240, 0.68), rgba(221, 206, 188, 0.38));
        border: 1px solid rgba(176, 154, 130, 0.26);
        box-shadow: 0 2px 5px rgba(74, 61, 41, 0.08);
        opacity: 0.9;
        pointer-events: none;
    }

    .note-head {
        display: grid;
        gap: 0.22rem;
        padding-block-start: 0.58rem;
    }

    .note-title {
        font-family: var(--font-heading);
        font-size: clamp(1.24rem, 1.15rem + 0.68vw, 1.52rem);
        line-height: 1.06;
        text-wrap: balance;
    }

    .note-body {
        font-size: 1.02rem;
        line-height: 1.55;
        color: #283134;
    }

    .note-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .note-links a {
        display: inline-flex;
        align-items: center;
        min-block-size: 1.9rem;
        padding: 0.28rem 0.64rem;
        border-radius: 999px;
        background: rgba(255, 252, 244, 0.7);
        border: 1px solid rgba(53, 66, 69, 0.12);
        text-decoration: none;
        font-size: 0.94rem;
    }

    .note-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .note-button {
        background: rgba(255, 251, 243, 0.72);
    }

    .note-button[aria-pressed="true"],
    .note.is-expanded .expand-toggle {
        background: rgba(23, 95, 121, 0.12);
        border-color: rgba(13, 78, 107, 0.35);
    }

    .note-details {
        display: grid;
        gap: 0.6rem;
        padding-block-start: 0.74rem;
        border-block-start: 1px dashed rgba(67, 80, 83, 0.25);
        font-size: 0.98rem;
        line-height: 1.5;
        color: #394648;
    }

    .note-details ul {
        list-style: disc;
        padding-inline-start: 1.1rem;
    }

    .board-section[data-category-key="emergency"] {
        --note-paper: var(--paper-emergency);
        --note-paper-alt: var(--paper-emergency-alt);
    }

    .board-section[data-category-key="mobility"] {
        --note-paper: var(--paper-mobility);
        --note-paper-alt: var(--paper-mobility-alt);
    }

    .board-section[data-category-key="health"] {
        --note-paper: var(--paper-health);
        --note-paper-alt: var(--paper-health-alt);
    }

    .board-section[data-category-key="civic"] {
        --note-paper: var(--paper-civic);
        --note-paper-alt: var(--paper-civic-alt);
    }

    .board-section[data-category-key="environment"] {
        --note-paper: var(--paper-environment);
        --note-paper-alt: var(--paper-environment-alt);
    }

    .notes-grid > .note:nth-child(6n + 1) {
        --note-rotate: -1.4deg;
        --tape-rotate: -5deg;
    }

    .notes-grid > .note:nth-child(6n + 2) {
        --note-rotate: 0.7deg;
        --tape-rotate: 3deg;
    }

    .notes-grid > .note:nth-child(6n + 3) {
        --note-rotate: -0.2deg;
        --tape-rotate: -2deg;
    }

    .notes-grid > .note:nth-child(6n + 4) {
        --note-rotate: 1.6deg;
        --tape-rotate: 4deg;
    }

    .notes-grid > .note:nth-child(6n + 5) {
        --note-rotate: -0.85deg;
        --tape-rotate: 1deg;
    }

    .notes-grid > .note:nth-child(6n + 6) {
        --note-rotate: 1.1deg;
        --tape-rotate: -4deg;
    }

    .note--compact .note-body {
        font-size: 1.05rem;
    }

    .note--large .note-surface {
        min-block-size: 19rem;
    }

    .note--wide .note-surface {
        min-block-size: 16.8rem;
    }

    .board-empty,
    .app-message {
        padding: 0.9rem 1rem;
        border-radius: 1rem;
        border: 1px solid rgba(45, 57, 60, 0.14);
        background: rgba(255, 248, 237, 0.84);
    }

    .preview-window {
        position: fixed;
        inset: auto auto 1rem 1rem;
        display: flex;
        flex-direction: column;
        inline-size: min(clamp(30rem, 36vw, 42rem), calc(100vw - 2rem));
        block-size: min(clamp(22rem, 48vh, 32rem), calc(100vh - 2rem));
        border: 1px solid rgba(63, 75, 79, 0.22);
        border-radius: 1rem;
        background:
            linear-gradient(180deg, rgba(251, 247, 239, 0.94), rgba(242, 234, 220, 0.9));
        box-shadow: 0 18px 34px rgba(18, 24, 27, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: clip;
        z-index: 60;
        transform: rotate(-0.65deg);
        transition: opacity 140ms ease, visibility 140ms ease;
    }

    .preview-window.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .preview-window.is-dragging {
        transition: none;
        transform: none;
    }

    .preview-window__bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.9rem;
        align-items: center;
        min-block-size: 3.25rem;
        padding: 0.72rem 0.9rem;
        border-block-end: 1px solid rgba(76, 88, 91, 0.14);
        background:
            linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(241, 232, 216, 0.84));
        cursor: grab;
        user-select: none;
        touch-action: none;
    }

    .preview-window.is-dragging .preview-window__bar {
        cursor: grabbing;
    }

    .preview-window__titles {
        display: grid;
        gap: 0.08rem;
        min-inline-size: 0;
    }

    .preview-window__eyebrow {
        font-family: var(--font-ui);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #62533f;
    }

    .preview-window__title,
    .preview-window__host {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-window__title {
        font-family: var(--font-heading);
        font-size: 1.06rem;
        line-height: 1.1;
        color: #1d2427;
    }

    .preview-window__host {
        font-size: 0.86rem;
        color: #5b6a6d;
    }

    .preview-window__actions {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .preview-window__link,
    .preview-window__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 2rem;
        padding: 0.4rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(63, 75, 79, 0.16);
        background: rgba(255, 252, 247, 0.84);
        color: #183f52;
        font-size: 0.9rem;
        text-decoration: none;
    }

    .preview-window__close {
        cursor: pointer;
    }

    .preview-window__body {
        position: relative;
        flex: 1;
        min-block-size: 0;
        background: rgba(255, 255, 255, 0.92);
    }

    .preview-window__body iframe {
        inline-size: 100%;
        block-size: 100%;
        border: 0;
        background: #ffffff;
    }
}

@layer states {
    .js-only {
        display: none;
    }

    .js .controls-grid.js-only,
    .js .live-row.js-only {
        display: grid;
    }

    .js .note-actions.js-only {
        display: flex;
    }

    .js .search-results.js-only,
    .js .app-message.js-only,
    .js .board-empty.js-only {
        display: block;
    }

    .js .preview-window.js-only {
        display: flex;
    }

    .js .fallback-note {
        display: none;
    }

    .js .note-details {
        display: none;
    }

    .js .note.is-expanded .note-details {
        display: grid;
    }

    .note.is-bookmarked .note-surface {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.42) inset,
            0 0 0 2px rgba(13, 78, 107, 0.14),
            var(--shadow-note);
    }

    .note.is-dimmed {
        opacity: 0.33;
        filter: saturate(0.72);
    }

    .note.is-match .note-surface {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.42) inset,
            0 0 0 2px rgba(13, 78, 107, 0.18),
            var(--shadow-note);
    }

    .board[data-search-active="true"] .note.is-match {
        z-index: 2;
    }

    .note:focus-within .note-surface,
    .note:focus-visible .note-surface {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.42) inset,
            0 0 0 2px rgba(13, 93, 115, 0.22),
            var(--shadow-note);
    }

    @media (hover: hover) and (pointer: fine) {
        .note,
        .note-surface {
            transition: box-shadow 140ms ease, opacity 140ms ease, filter 140ms ease, border-color 140ms ease;
        }

        .note:hover .note-surface {
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.42) inset,
                var(--shadow-note-hover);
            border-color: rgba(82, 68, 42, 0.18);
        }
    }

    @container (min-width: 20rem) {
        .note-body {
            font-size: 1rem;
        }

        .note-actions {
            justify-content: flex-start;
        }
    }

    @media (min-width: 48rem) {
        .controls-grid {
            grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) auto;
            align-items: start;
        }

        .hero-main {
            grid-template-columns: minmax(0, 1.9fr) minmax(16rem, 0.9fr);
            align-items: end;
        }

        .control-cluster--utility {
            align-self: stretch;
        }

    }

    @media (min-width: 70rem) {
        .note--wide {
            grid-column: span 2;
        }
    }

    @media (max-width: 47.99rem) {
        .page-shell {
            inline-size: min(100% - 1rem, var(--max-shell));
        }

        .board {
            padding-inline: 0.85rem;
        }

        .hero-stats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .preview-window {
            transition: none;
        }
    }
}