@layer reset, base, layout, components, pages, responsive;

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

    html {
        scroll-behavior: smooth;
    }

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

    button,
    input,
    select {
        color: inherit;
        font: inherit;
    }

    button,
    select {
        cursor: pointer;
    }

    a {
        color: inherit;
    }
}

@layer base {
    :root {
        color-scheme: light;
        --canvas: #f1eee4;
        --canvas-deep: #e6e0d2;
        --surface: #faf8f1;
        --surface-strong: #ffffff;
        --ink: #18201b;
        --ink-soft: #5f6b63;
        --ink-faint: #89928b;
        --line: rgba(24, 32, 27, 0.14);
        --line-strong: rgba(24, 32, 27, 0.28);
        --accent: #f15c3f;
        --accent-soft: #ffd9ce;
        --signal: #c9ef3f;
        --signal-ink: #26340d;
        --blue: #4d68e8;
        --blue-soft: #dfe4ff;
        --success: #2f8b57;
        --danger: #b93b32;
        --shadow: 0 18px 50px rgba(37, 40, 31, 0.09);
        --radius-sm: 10px;
        --radius-md: 18px;
        --radius-lg: 28px;
        --page: min(1180px, calc(100vw - 40px));
        --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        --display: "Iowan Old Style", "Baskerville", "Songti SC", "STSong", serif;
        --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --canvas: #111511;
        --canvas-deep: #0b0e0c;
        --surface: #181d19;
        --surface-strong: #202620;
        --ink: #edf0e8;
        --ink-soft: #a8b1aa;
        --ink-faint: #737d76;
        --line: rgba(237, 240, 232, 0.13);
        --line-strong: rgba(237, 240, 232, 0.26);
        --accent: #ff7358;
        --accent-soft: #4c2922;
        --signal: #caed48;
        --signal-ink: #1a210a;
        --blue: #8295ff;
        --blue-soft: #28305a;
        --success: #67c38a;
        --danger: #ff8177;
        --shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
    }

    body {
        min-width: 320px;
        min-height: 100vh;
        background:
            radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--signal) 15%, transparent), transparent 25rem),
            linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--line) 42%, transparent) 50%, transparent 50.2%),
            var(--canvas);
        background-size: auto, 72px 72px, auto;
        color: var(--ink);
        font-family: var(--sans);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
    }

    ::selection {
        background: var(--signal);
        color: var(--signal-ink);
    }

    :focus-visible {
        outline: 3px solid color-mix(in srgb, var(--blue) 60%, transparent);
        outline-offset: 3px;
    }

    [hidden] {
        display: none !important;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@layer layout {
    site-header,
    site-footer {
        display: block;
    }

    .site-header-wrap {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid transparent;
        background: color-mix(in srgb, var(--canvas) 86%, transparent);
        backdrop-filter: blur(18px);
    }

    .site-header {
        width: var(--page);
        min-height: 82px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .site-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: max-content;
        text-decoration: none;
    }

    .brand-mark {
        position: relative;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--ink);
        border-radius: 50%;
        font-family: var(--display);
        font-size: 19px;
        font-style: italic;
        font-weight: 700;
    }

    .brand-mark::after {
        content: "";
        position: absolute;
        right: -5px;
        bottom: -7px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--signal);
        mix-blend-mode: multiply;
    }

    :root[data-theme="dark"] .brand-mark::after {
        mix-blend-mode: screen;
    }

    .brand-copy {
        display: grid;
        line-height: 1.05;
    }

    .brand-copy strong {
        font-size: 13px;
        letter-spacing: 0.13em;
    }

    .brand-copy small {
        margin-top: 6px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .site-nav-wrap,
    .site-nav,
    .nav-actions {
        display: flex;
        align-items: center;
    }

    .site-nav-wrap {
        gap: 10px;
    }

    .site-nav {
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 70%, transparent);
    }

    .site-nav a {
        padding: 8px 13px;
        border-radius: 999px;
        color: var(--ink-soft);
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
        transition: background 160ms ease, color 160ms ease;
    }

    .site-nav a:hover {
        color: var(--ink);
    }

    .site-nav a[aria-current="page"] {
        background: var(--ink);
        color: var(--canvas);
    }

    .nav-actions {
        gap: 8px;
    }

    .page-main {
        width: var(--page);
        margin: 0 auto;
        padding: 28px 0 100px;
    }

    .site-footer {
        width: var(--page);
        margin: 0 auto;
        padding: 28px 0 36px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        border-top: 1px solid var(--line);
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

@layer components {
    .icon-button,
    .menu-button {
        width: 40px;
        height: 40px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
    }

    .icon-button:hover,
    .menu-button:hover {
        border-color: var(--line-strong);
        background: var(--surface-strong);
    }

    .icon-button svg,
    .menu-button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
    }

    .menu-button {
        display: none;
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--ink-soft);
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;
    }

    .section-heading h2 {
        font-family: var(--display);
        font-size: clamp(29px, 4vw, 43px);
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .section-heading p,
    .section-note {
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .panel {
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        box-shadow: var(--shadow);
    }

    .button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 10px 18px;
        border: 1px solid var(--ink);
        border-radius: 999px;
        background: var(--ink);
        color: var(--canvas);
        font-size: 12px;
        font-weight: 750;
        letter-spacing: 0.02em;
        text-decoration: none;
        transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    }

    .button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 16%, transparent);
    }

    .button:disabled {
        cursor: not-allowed;
        opacity: 0.45;
    }

    .button.secondary {
        border-color: var(--line-strong);
        background: transparent;
        color: var(--ink);
    }

    .button.signal {
        border-color: var(--signal);
        background: var(--signal);
        color: var(--signal-ink);
    }

    .field,
    .select {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        outline: 0;
        background: var(--surface-strong);
        color: var(--ink);
        transition: border 160ms ease, box-shadow 160ms ease;
    }

    .field,
    .select {
        min-height: 48px;
        padding: 10px 14px;
    }

    .field:focus,
    .select:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
    }

    .field-label {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
        color: var(--ink-soft);
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .status-line {
        min-height: 22px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .status-line[data-tone="error"] {
        color: var(--danger);
    }

    .loading-dots::after {
        content: "";
        animation: loading-dots 1.2s steps(4, end) infinite;
    }

    @keyframes loading-dots {
        0% { content: ""; }
        25% { content: "."; }
        50% { content: ".."; }
        75%, 100% { content: "..."; }
    }

    .empty-state {
        padding: 60px 24px;
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius-md);
        color: var(--ink-soft);
        text-align: center;
    }
}

@layer pages {
    /* Home */
    .app-view {
        animation: view-enter 220ms ease both;
    }

    @keyframes view-enter {
        from { opacity: 0; transform: translateY(7px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .quick-section {
        padding: 72px 0 10px;
    }

    .quick-stack {
        display: grid;
        gap: 10px;
    }

    .quick-card {
        min-height: 128px;
        padding: 22px 24px;
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr) 40px;
        align-items: center;
        gap: 24px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        text-decoration: none;
        transition: transform 180ms ease, border 180ms ease, background 180ms ease;
    }

    .quick-card:hover {
        transform: translateX(5px);
        border-color: var(--line-strong);
        background: var(--surface-strong);
    }

    .quick-index,
    .quick-arrow {
        font-family: var(--mono);
        font-size: 11px;
    }

    .quick-arrow {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        transition: transform 180ms ease;
    }

    .quick-card:hover .quick-arrow {
        transform: rotate(-35deg);
    }

    .quick-card h3 {
        font-family: var(--display);
        font-size: 30px;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .quick-card p {
        max-width: 62ch;
        margin-top: 7px;
        color: var(--ink-soft);
        font-size: 13px;
    }

    .quick-card:nth-child(1) .quick-index { color: var(--accent); }
    .quick-card:nth-child(2) .quick-index { color: var(--success); }

    .running-panel {
        padding: clamp(22px, 4vw, 42px);
    }

    .running-top {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 24px;
    }

    .running-top h1 {
        margin-top: 10px;
        font-family: var(--display);
        font-size: clamp(36px, 5vw, 58px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .year-switcher {
        min-width: 150px;
        padding: 4px;
        display: grid;
        grid-template-columns: 36px minmax(64px, 1fr) 36px;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--canvas);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .year-switcher strong {
        text-align: center;
    }

    .year-switcher button {
        width: 36px;
        height: 36px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
    }

    .year-switcher button:hover:not(:disabled) {
        background: var(--ink);
        color: var(--canvas);
    }

    .year-switcher button:disabled {
        cursor: not-allowed;
        opacity: 0.28;
    }

    .metrics {
        margin: 38px 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-block: 1px solid var(--line);
    }

    .metric {
        padding: 22px 18px;
        border-right: 1px solid var(--line);
    }

    .metric:first-child { padding-left: 0; }
    .metric:last-child { border-right: 0; }

    .metric strong {
        display: block;
        font-family: var(--display);
        font-size: clamp(29px, 4vw, 43px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .metric span {
        display: block;
        margin-top: 8px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .activity-toolbar {
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .activity-toolbar p {
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .metric-switch {
        flex: 0 0 auto;
        padding: 3px;
        display: inline-grid;
        grid-template-columns: repeat(2, 1fr);
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--canvas-deep);
    }

    .metric-switch button {
        min-width: 66px;
        padding: 7px 12px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
    }

    .metric-switch button[aria-pressed="true"] {
        background: var(--surface-strong);
        color: var(--ink);
        box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 9%, transparent);
    }

    .activity-board {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 14px;
        align-items: stretch;
    }

    .calendar-pane {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .calendar-scroll {
        overflow-x: auto;
        padding: 22px 18px 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background:
            linear-gradient(120deg, color-mix(in srgb, var(--signal) 6%, transparent), transparent 36%),
            var(--canvas);
        scrollbar-color: var(--line-strong) transparent;
    }

    .calendar-inner {
        min-width: 900px;
    }

    .month-row {
        position: relative;
        height: 28px;
        margin-left: 34px;
        display: grid;
        grid-template-columns: repeat(var(--weeks, 53), 12px);
        gap: 4px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        text-transform: uppercase;
    }

    .month-row span {
        white-space: nowrap;
    }

    .calendar-body {
        display: grid;
        grid-template-columns: 29px 1fr;
        gap: 5px;
    }

    .weekday-axis {
        height: 108px;
        display: grid;
        grid-template-rows: repeat(7, 12px);
        gap: 4px;
        align-items: center;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 8px;
    }

    .heatmap {
        display: grid;
        grid-template-rows: repeat(7, 12px);
        grid-auto-columns: 12px;
        grid-auto-flow: column;
        gap: 4px;
        transition: opacity 160ms ease;
    }

    .heatmap.is-loading { opacity: 0.42; }

    .heat-cell {
        position: relative;
        width: 12px;
        height: 12px;
        padding: 0;
        appearance: none;
        border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
        border-radius: 3px;
        background: color-mix(in srgb, var(--ink) 5%, transparent);
        transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 160ms ease;
    }

    .heatmap button.heat-cell:hover,
    .heatmap button.heat-cell:focus-visible {
        z-index: 2;
        border-color: var(--ink);
        transform: scale(1.65);
        box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 24%, transparent);
    }

    .heatmap button.heat-cell.is-selected {
        z-index: 3;
        border-color: var(--surface-strong);
        outline: 2px solid var(--ink);
        outline-offset: 2px;
        transform: scale(1.2);
    }

    .heat-cell.is-today {
        outline: 1px solid var(--accent);
        outline-offset: 2px;
    }

    .heat-cell.is-outside,
    .heat-cell.is-future { opacity: 0.2; }
    .heat-cell[data-level="1"] { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
    .heat-cell[data-level="2"] { background: color-mix(in srgb, var(--signal) 55%, var(--surface)); }
    .heat-cell[data-level="3"] { background: color-mix(in srgb, var(--signal) 76%, #6b8f2d); }
    .heat-cell[data-level="4"] { background: color-mix(in srgb, var(--signal) 50%, #263b19); }

    .heatmap[data-metric="intensity"] .heat-cell[data-level="1"],
    .legend[data-metric="intensity"] .heat-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
    .heatmap[data-metric="intensity"] .heat-cell[data-level="2"],
    .legend[data-metric="intensity"] .heat-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 48%, var(--surface)); }
    .heatmap[data-metric="intensity"] .heat-cell[data-level="3"],
    .legend[data-metric="intensity"] .heat-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 72%, #9d3325); }
    .heatmap[data-metric="intensity"] .heat-cell[data-level="4"],
    .legend[data-metric="intensity"] .heat-cell[data-level="4"] { background: color-mix(in srgb, var(--accent) 56%, #4b1511); }

    .calendar-foot {
        margin-top: auto;
        padding-top: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .legend {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 8px;
        text-transform: uppercase;
    }

    .legend .heat-cell {
        display: inline-block;
    }

    .activity-inspector {
        position: relative;
        min-height: 272px;
        padding: 22px;
        overflow: hidden;
        border-radius: var(--radius-md);
        background:
            radial-gradient(circle at 100% 0, color-mix(in srgb, var(--signal) 24%, transparent), transparent 42%),
            var(--ink);
        color: var(--canvas);
    }

    .activity-inspector::after {
        content: "";
        position: absolute;
        right: -34px;
        bottom: -52px;
        width: 130px;
        height: 130px;
        border: 1px solid color-mix(in srgb, var(--canvas) 14%, transparent);
        border-radius: 50%;
        pointer-events: none;
    }

    .inspector-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: color-mix(in srgb, var(--canvas) 68%, transparent);
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .inspector-badge {
        padding: 4px 7px;
        border: 1px solid color-mix(in srgb, var(--canvas) 18%, transparent);
        border-radius: 999px;
        color: var(--signal);
        white-space: nowrap;
    }

    .activity-inspector h3 {
        position: relative;
        z-index: 1;
        margin-top: 22px;
        font-family: var(--display);
        font-size: clamp(31px, 3.4vw, 43px);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .activity-inspector > p {
        position: relative;
        z-index: 1;
        min-height: 42px;
        margin-top: 9px;
        color: color-mix(in srgb, var(--canvas) 66%, transparent);
        font-size: 11px;
        line-height: 1.65;
    }

    .day-metrics {
        position: relative;
        z-index: 1;
        margin-top: 19px;
        padding-block: 15px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-block: 1px solid color-mix(in srgb, var(--canvas) 15%, transparent);
    }

    .day-metrics > div {
        min-width: 0;
        padding-inline: 10px;
        border-right: 1px solid color-mix(in srgb, var(--canvas) 12%, transparent);
    }

    .day-metrics > div:first-child { padding-left: 0; }
    .day-metrics > div:last-child { padding-right: 0; border-right: 0; }

    .day-metrics strong {
        display: block;
        overflow: hidden;
        color: var(--signal);
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .day-metrics span {
        display: block;
        margin-top: 5px;
        overflow: hidden;
        color: color-mix(in srgb, var(--canvas) 52%, transparent);
        font-family: var(--mono);
        font-size: 7px;
        letter-spacing: 0.04em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .day-activities {
        position: relative;
        z-index: 1;
        margin-top: 8px;
        display: grid;
    }

    .day-activity {
        padding: 10px 0;
        display: grid;
        gap: 7px;
        border-bottom: 1px solid color-mix(in srgb, var(--canvas) 10%, transparent);
    }

    .day-activity:last-child { border-bottom: 0; }

    .day-activity > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .day-activity strong {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .day-activity > div:first-child span {
        color: color-mix(in srgb, var(--canvas) 54%, transparent);
        font-family: var(--mono);
        font-size: 8px;
    }

    .day-activity-details {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .day-activity-details span {
        padding: 3px 6px;
        border-radius: 5px;
        background: color-mix(in srgb, var(--canvas) 9%, transparent);
        color: color-mix(in srgb, var(--canvas) 72%, transparent);
        font-family: var(--mono);
        font-size: 7px;
        white-space: nowrap;
    }

    .day-empty {
        padding-top: 13px;
        color: color-mix(in srgb, var(--canvas) 40%, transparent);
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .activity-tooltip {
        position: fixed;
        z-index: 80;
        width: 200px;
        padding: 11px 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        border: 1px solid color-mix(in srgb, var(--canvas) 15%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--ink) 94%, transparent);
        box-shadow: 0 12px 34px color-mix(in srgb, #000 28%, transparent);
        color: var(--canvas);
        font-family: var(--mono);
        font-size: 8px;
        pointer-events: none;
        backdrop-filter: blur(12px);
    }

    .activity-tooltip strong {
        grid-column: 1 / -1;
        padding-bottom: 6px;
        border-bottom: 1px solid color-mix(in srgb, var(--canvas) 13%, transparent);
        color: var(--signal);
        font-size: 9px;
        font-weight: 700;
    }

    .activity-tooltip span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Stories */
    .stories-toolbar {
        margin-bottom: 30px;
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .search-wrap {
        position: relative;
    }

    .search-wrap .field {
        padding-right: 48px;
    }

    .clear-search {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        transform: translateY(-50%);
        background: transparent;
        color: var(--ink-faint);
    }

    .clear-search:hover { background: var(--canvas-deep); color: var(--ink); }

    .feed-head {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .story-feed {
        display: grid;
        gap: 12px;
    }

    .story-card {
        padding: clamp(20px, 3vw, 32px);
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        transition: border 170ms ease, transform 170ms ease, background 170ms ease;
    }

    .story-card:hover {
        transform: translateY(-3px);
        border-color: var(--line-strong);
        background: var(--surface-strong);
    }

    .story-index {
        padding-top: 5px;
        color: var(--accent);
        font-family: var(--mono);
        font-size: 11px;
    }

    .story-title {
        max-width: 820px;
        font-family: var(--display);
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.1;
    }

    .story-title a {
        text-decoration: none;
    }

    .story-title a:hover { color: var(--accent); }

    .story-meta {
        margin: 13px 0 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .story-meta a { color: var(--blue); text-underline-offset: 3px; }

    .story-summary {
        max-width: 90ch;
        color: var(--ink-soft);
        font-size: 14px;
        line-height: 1.85;
        overflow-wrap: anywhere;
    }

    .story-summary > :first-child { margin-top: 0; }
    .story-summary > :last-child { margin-bottom: 0; }

    .story-summary p,
    .story-summary ul,
    .story-summary ol,
    .story-summary blockquote,
    .story-summary pre,
    .story-summary table,
    .story-summary hr {
        margin: 0 0 14px;
    }

    .story-summary h3,
    .story-summary h4,
    .story-summary h5,
    .story-summary h6 {
        margin: 22px 0 8px;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 780;
        letter-spacing: 0.02em;
        line-height: 1.4;
    }

    .story-summary ul,
    .story-summary ol {
        padding-left: 1.5em;
    }

    .story-summary li {
        padding-left: 0.25em;
    }

    .story-summary li + li {
        margin-top: 5px;
    }

    .story-summary li::marker {
        color: var(--accent);
        font-family: var(--mono);
        font-weight: 700;
    }

    .story-summary strong {
        color: var(--ink);
        font-weight: 750;
    }

    .story-summary a {
        color: var(--blue);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .story-summary a:hover {
        color: var(--accent);
    }

    .story-summary blockquote {
        padding: 10px 14px;
        border-left: 3px solid var(--signal);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background: color-mix(in srgb, var(--signal) 8%, transparent);
        color: var(--ink);
    }

    .story-summary blockquote > :last-child {
        margin-bottom: 0;
    }

    .story-summary code {
        padding: 0.15em 0.4em;
        border: 1px solid var(--line);
        border-radius: 5px;
        background: var(--canvas-deep);
        color: var(--ink);
        font-family: var(--mono);
        font-size: 0.88em;
    }

    .story-summary pre {
        padding: 14px 16px;
        overflow-x: auto;
        border-radius: var(--radius-sm);
        background: var(--ink);
        color: var(--canvas);
        line-height: 1.65;
        scrollbar-width: thin;
    }

    .story-summary pre code {
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 11px;
    }

    .story-summary table {
        width: 100%;
        display: block;
        overflow-x: auto;
        border-collapse: collapse;
        font-size: 12px;
    }

    .story-summary th,
    .story-summary td {
        min-width: 120px;
        padding: 8px 10px;
        border: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

    .story-summary th {
        background: var(--canvas-deep);
        color: var(--ink);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .story-summary hr {
        border: 0;
        border-top: 1px solid var(--line);
    }

    .feed-actions {
        padding-top: 28px;
        display: grid;
        place-items: center;
    }

    /* Mixer */
    .mixer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .channel-card {
        min-height: 510px;
        padding: clamp(22px, 3vw, 34px);
        display: flex;
        flex-direction: column;
    }

    .channel-top {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .channel-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: var(--blue-soft);
        font-family: var(--mono);
        font-size: 17px;
        font-weight: 800;
    }

    .channel-card.atc .channel-icon {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .channel-title { flex: 1; }

    .channel-title h2 {
        font-family: var(--display);
        font-size: 29px;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .channel-title p {
        margin-top: 6px;
        color: var(--ink-faint);
        font-size: 11px;
    }

    .live-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 8px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .live-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ink-faint);
    }

    .live-pill.is-live { color: var(--success); }
    .live-pill.is-live::before { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }

    .track-display {
        min-height: 104px;
        margin: 34px 0 24px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--canvas);
    }

    .track-display strong {
        font-family: var(--display);
        font-size: 25px;
        font-weight: 500;
        line-height: 1.1;
    }

    .track-display span {
        margin-top: 7px;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .visualizer {
        height: 64px;
        display: flex;
        align-items: end;
        gap: 4px;
        overflow: hidden;
    }

    .visualizer .bar {
        min-width: 3px;
        flex: 1;
        height: 5px;
        border-radius: 999px;
        background: var(--blue);
        transition: height 130ms ease;
    }

    .channel-card.atc .visualizer .bar { background: var(--accent); }

    .atc-channel-picker {
        margin: 28px 0 14px;
    }

    .atc-channel-picker .field-label {
        display: block;
        margin-bottom: 8px;
    }

    .atc-player-shell {
        position: relative;
        width: 100%;
        min-height: 200px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--canvas-deep);
    }

    .atc-dock-head { display: none; }

    #atc-player,
    .atc-player-shell iframe {
        width: 100%;
        height: 100%;
        min-height: 200px;
        display: block;
        border: 0;
    }

    .atc-player-placeholder {
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background:
            radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%),
            var(--canvas-deep);
    }

    .atc-player-placeholder[hidden] { display: none; }

    .atc-player-placeholder span,
    .atc-player-placeholder small,
    .atc-source-line {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.05em;
    }

    .atc-player-placeholder span {
        color: var(--accent);
        font-weight: 800;
    }

    .atc-player-placeholder strong {
        margin: 12px 0 8px;
        font-family: var(--display);
        font-size: clamp(20px, 2.3vw, 27px);
        font-weight: 500;
        line-height: 1.1;
    }

    .atc-player-placeholder small { color: var(--ink-faint); }

    .atc-source-line {
        min-height: 34px;
        padding-top: 10px;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 14px;
        color: var(--ink-faint);
    }

    .atc-source-line a {
        color: var(--accent);
        white-space: nowrap;
    }

    .channel-card.atc .channel-controls { margin-top: 18px; }

    .app-view[data-background-view="true"],
    .app-view[data-background-view="true"] .mixer-grid,
    .app-view[data-background-view="true"] .channel-card.atc {
        display: contents;
    }

    .app-view[data-background-view="true"] > :not(.mixer-grid),
    .app-view[data-background-view="true"] .channel-card.lofi,
    .app-view[data-background-view="true"] .channel-card.atc > :not(.atc-player-shell) {
        display: none !important;
    }

    .app-view[data-background-view="true"] .atc-player-shell {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 70;
        width: min(376px, calc(100vw - 24px));
        min-height: 0;
        padding: 42px 6px 6px;
        aspect-ratio: auto;
        border-color: var(--line-strong);
        background: var(--surface-strong);
        box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 24%, transparent);
    }

    .app-view[data-background-view="true"] .atc-dock-head {
        position: absolute;
        inset: 0 0 auto;
        z-index: 2;
        height: 42px;
        padding: 0 11px 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.05em;
    }

    .atc-dock-head a { color: var(--ink); }
    .atc-dock-head strong { color: var(--accent); }

    .atc-dock-head button {
        border: 0;
        color: var(--ink-faint);
        font: inherit;
        cursor: pointer;
        background: transparent;
    }

    .atc-dock-head button:hover { color: var(--ink); }

    .app-view[data-background-view="true"] #atc-player,
    .app-view[data-background-view="true"] .atc-player-shell iframe {
        height: 200px;
        min-height: 200px;
        border-radius: calc(var(--radius-md) - 5px);
    }

    .channel-controls {
        margin-top: auto;
        display: grid;
        gap: 20px;
    }

    .volume-head {
        margin-bottom: 9px;
        display: flex;
        justify-content: space-between;
        color: var(--ink-faint);
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    input[type="range"] {
        width: 100%;
        height: 5px;
        appearance: none;
        border-radius: 999px;
        outline: 0;
        background: var(--canvas-deep);
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        appearance: none;
        border: 4px solid var(--surface-strong);
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 0 1px var(--line-strong);
    }

    input[type="range"]::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border: 4px solid var(--surface-strong);
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 0 1px var(--line-strong);
    }

    .channel-card.atc input[type="range"]::-webkit-slider-thumb { background: var(--accent); }
    .channel-card.atc input[type="range"]::-moz-range-thumb { background: var(--accent); }

    .control-buttons {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .control-buttons.single { grid-template-columns: 1fr; }

    .mixer-message { margin-top: 18px; }
}

@layer responsive {
    @media (max-width: 1050px) {
        .activity-board {
            grid-template-columns: 1fr;
        }

        .activity-inspector {
            min-height: 0;
        }
    }

    @media (max-width: 850px) {
        :root { --page: min(100% - 28px, 1180px); }

        .menu-button { display: inline-grid; }

        .site-nav-wrap {
            position: absolute;
            top: calc(100% + 1px);
            left: 0;
            right: 0;
            padding: 14px;
            display: none;
            align-items: stretch;
            border-bottom: 1px solid var(--line);
            background: var(--canvas);
        }

        .site-header-wrap[data-menu-open="true"] .site-nav-wrap {
            display: grid;
        }

        .site-nav {
            display: grid;
            border-radius: var(--radius-md);
        }

        .site-nav a { padding: 12px 15px; border-radius: var(--radius-sm); }

        .nav-actions { justify-content: end; }

        .metrics { grid-template-columns: repeat(2, 1fr); }
        .metric:nth-child(2) { border-right: 0; }
        .metric:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

        .mixer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
        body[data-atc-docked="true"] { padding-bottom: 246px; }

        .app-view[data-background-view="true"] .atc-player-shell {
            right: 12px;
            bottom: 12px;
        }

        .brand-copy small { display: none; }
        .page-main { padding-top: 20px; }

        .quick-section { padding-top: 54px; }

        .quick-card {
            min-height: 0;
            padding: 19px;
            grid-template-columns: minmax(0, 1fr) 36px;
            gap: 13px;
        }

        .quick-index { grid-column: 1; grid-row: 1; }
        .quick-card-copy { grid-column: 1 / -1; grid-row: 2; }
        .quick-arrow { grid-column: 2; grid-row: 1; }
        .quick-card:hover { transform: translateY(-3px); }

        .running-top,
        .activity-toolbar,
        .section-heading,
        .calendar-foot,
        .site-footer { align-items: flex-start; flex-direction: column; }

        .year-switcher,
        .metric-switch { width: 100%; }

        .activity-toolbar { gap: 12px; }

        .metric-switch button { min-width: 0; }

        .metric { padding: 18px 11px; }
        .metric:first-child { padding-left: 11px; }

        .activity-inspector { padding: 19px; }
        .day-metrics > div { padding-inline: 7px; }
        .day-metrics strong { font-size: 13px; }

        .stories-toolbar { grid-template-columns: 1fr; }
        .story-card { grid-template-columns: 1fr; gap: 9px; }

        .channel-top { align-items: flex-start; flex-wrap: wrap; }
        .live-pill { margin-left: 67px; }
    }

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