@media screen {
    :root {
        --paper: #e6d8c5;
        --paper-light: #e6d8c5;
        --ink: #17120d;
        --ink-warm: #21170f;
        --muted: #504537;
        --line: rgba(33, 23, 15, 0.42);
        --nav-line: rgba(33, 23, 15, 0.78);
        --line-soft: rgba(33, 23, 15, 0.2);
        --rust: #8b3f24;
        --blue: #2f5f9f;
        --amber: #d8912f;
        --paper-surface: var(--paper);
        --paper-texture:
            url("../img/blog-paper-texture.png");
        --paper-texture-size: 880px 460px;
        --paper-texture-position: 0 0;
        --paper-texture-repeat: repeat;
    }

    html, body {
        background: var(--paper-surface);
        color: var(--ink);
        font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", Arial, sans-serif;
        overflow-x: hidden;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 900;
        background: var(--paper-texture);
        background-size: var(--paper-texture-size);
        background-position: var(--paper-texture-position);
        background-repeat: var(--paper-texture-repeat);
        mix-blend-mode: multiply;
        opacity: 0.16;
    }

    a { color: inherit; }

    #content {
        min-height: 100%;
        height: auto;
        overflow: visible;
        background: var(--paper-surface);
        position: relative;
    }

    #center-wrapper {
        display: none;
    }

    #center {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        overflow: visible;
        z-index: 10;
        opacity: 1;
        margin: 0;
        background-color: var(--paper-surface);
    }

    .retro-topbar,
    #top-tab.retro-topbar {
        position: sticky;
        top: 0;
        z-index: 800;
        width: calc(100% - 200px);
        height: 96px;
        margin: 0 100px;
        padding: 0 0 0 28px;
        box-sizing: border-box;
        background-color: var(--paper-surface);
        border-bottom: 0;
        border-left: 1px solid var(--line);
        justify-content: space-between;
        backdrop-filter: none;
    }

    .retro-topbar::after,
    #top-tab.retro-topbar::after {
        content: "";
        position: absolute;
        left: 50px;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--nav-line);
        pointer-events: none;
    }

    .retro-mark-scale {
        position: absolute;
        left: -34px;
        top: 24px;
        width: 16px;
        height: 38px;
        display: grid;
        gap: 5px;
    }

    .retro-mark-scale span,
    .retro-barcode {
        background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px);
    }

    .retro-mark-scale span { height: 1px; }

    .retro-barcode {
        width: 18px;
        height: 56px;
        margin: 18px 0 0 22px;
    }

    #logo-link {
        display: flex;
        align-items: center;
        height: 96px;
        gap: 28px;
        text-decoration: none;
    }

    #logo {
        display: block;
        width: 1px;
        height: 34px;
        margin: 0;
        background: var(--ink);
        border-radius: 0;
    }

    #title {
        display: block;
        margin: 0;
        padding: 0;
        color: var(--ink);
        font-size: 34px;
        line-height: 1;
        font-weight: 900;
    }

    #top-tab-right.retro-nav-shell,
    .retro-nav-shell {
        align-items: center;
        gap: 54px;
    }

    #search-wrapper.retro-search,
    .retro-search {
        align-items: center;
        gap: 10px;
        width: 200px;
        height: 38px;
        border: 1.5px solid var(--nav-line);
        padding: 0 10px;
        box-sizing: border-box;
        margin: 0;
        transition: width 0.22s ease;
    }

    .retro-search:focus-within {
        width: 300px;
    }

    #search-wrapper.retro-search input,
    #search-wrapper input,
    #search-input {
        min-width: 0 !important;
        width: 76px !important;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        outline: 0;
        color: var(--ink-warm);
        font-size: 15px;
        font-weight: 600;
    }

    .retro-search:focus-within #search-input {
        width: 252px !important;
    }

    #search-wrapper.retro-search img,
    #search-wrapper img,
    #search-btn {
        width: 24px;
        height: 24px;
        margin: 0;
        opacity: 0.9;
        filter: grayscale(1) sepia(0.18) saturate(1.4) contrast(2.2) brightness(0.64);
    }

    .retro-nav {
        display: flex;
        align-items: center;
        gap: 54px;
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
    }

    .retro-nav a {
        position: relative;
        padding: 48px 0 44px;
        text-decoration: none;
    }

    .retro-nav a::after,
    #about-me::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        height: 2px;
        background: var(--rust);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.18s ease;
    }

    .retro-nav a:hover::after,
    .retro-nav a.active::after,
    #about-me:hover::after,
    #about-me.active::after {
        transform: scaleX(1);
    }

    .retro-nav span {
        color: var(--muted);
    }

    .retro-nav .retro-bili {
        border-left: 1px solid var(--line);
        padding-left: 32px !important;
        display: none;
    }

    .retro-nav-divider {
        display: block;
        width: 1px;
        flex: 0 0 1px;
        align-self: center;
        background: rgba(33, 23, 15, 0.62);
    }

    .retro-nav-divider-brand {
        height: 34px;
        margin-left: 34px;
    }

    .retro-nav-divider-search {
        height: 46px;
        margin-left: 18px;
    }

    .retro-home-reference {
        width: 100%;
        max-width: none;
        margin: 0;
        z-index: auto;
    }

    .retro-home-reference .retro-hero {
        min-height: 560px;
        display: block;
        padding: 0;
        border-bottom: 1px solid var(--line);
    }

    .retro-home-reference .retro-hero-copy {
        position: absolute;
        left: 7.2vw;
        top: 96px;
        z-index: 4;
        padding: 0;
        width: 520px;
    }

    .retro-home-reference .retro-hero h1 {
        font-size: clamp(92px, 8.4vw, 152px);
        line-height: 0.98;
        font-weight: 900;
        letter-spacing: 0;
        text-shadow: 2px 2px 0 rgba(17,17,17,0.08);
    }

    .retro-home-reference .retro-hero p {
        margin: 24px 0 18px;
        font-size: 28px;
        line-height: 1;
        color: var(--ink);
    }

    .retro-title-rule {
        display: grid;
        grid-template-columns: 180px 210px;
        gap: 28px;
        margin: 22px 0 62px;
    }

    .retro-title-rule i {
        height: 3px;
        background: var(--blue);
        border-bottom: 1px solid rgba(17,17,17,0.5);
    }

    .retro-title-rule i:last-child {
        background: transparent;
        border-bottom: 1px solid var(--line);
    }

    .retro-home-code {
        display: flex;
        align-items: center;
        gap: 20px;
        font-family: "Consolas", monospace;
        color: var(--muted);
        letter-spacing: 0.42em;
        margin-bottom: 26px;
    }

    .retro-home-code span {
        width: 44px;
        height: 12px;
        background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px);
        display: block;
    }

    .retro-home-code i {
        width: 240px;
        height: 1px;
        background: var(--line);
        display: block;
    }

    .retro-home-reference .retro-color-bars {
        gap: 14px;
    }

    .retro-home-reference .retro-color-bars i {
        width: 64px;
        height: 4px;
        background: var(--rust);
    }

    .retro-home-reference .retro-color-bars i:last-child {
        width: 350px;
        height: 1px;
        background: var(--line);
    }

    .retro-home-reference .retro-hero-art {
        position: absolute;
        inset: 0 0 0 0;
        z-index: 1;
    }

    .retro-home-reference .retro-hero-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(230, 216, 197, 0.98) 0%, rgba(230, 216, 197, 0.88) 27%, rgba(230, 216, 197, 0.1) 58%, rgba(230, 216, 197, 0.02) 100%);
        pointer-events: none;
    }

    .retro-home-reference .retro-hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        opacity: 0.92;
        mix-blend-mode: multiply;
    }

    .retro-side-rail {
        position: absolute;
        left: 24px;
        top: 38px;
        bottom: 40px;
        width: 34px;
        z-index: 5;
        color: var(--ink);
        font-family: "Consolas", monospace;
        display: grid;
        grid-template-rows: auto auto 1fr;
        align-items: start;
        justify-items: center;
    }

    .retro-side-rail span {
        width: 10px;
        height: 10px;
        background: var(--ink);
        display: block;
    }

    .retro-side-rail .retro-rail-lines {
        display: none;
    }

    .retro-side-rail b {
        writing-mode: vertical-rl;
        letter-spacing: 0.3em;
        font-weight: 400;
        margin-top: 40px;
    }

    .retro-side-rail i {
        width: 10px;
        height: 130px;
        margin-top: 28px;
        background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 5px);
        display: block;
    }

    .retro-side-rail em {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-style: normal;
        line-height: 1;
    }

    .retro-side-rail::before,
    .retro-side-rail em::after {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        background: var(--ink);
    }

    .retro-side-rail::before {
        left: 50%;
        top: -64px;
        transform: translateX(-50%);
    }

    .retro-side-rail em::after {
        left: 50%;
        top: 85px;
        transform: translateX(-50%);
    }

    .retro-vinyl {
        position: absolute;
        right: -12px;
        top: -10px;
        z-index: 5000;
        width: 210px;
        height: 210px;
        max-width: none;
        object-fit: contain;
        pointer-events: none;
    }

    .retro-home-reference .retro-film-note {
        right: 28px;
        top: 244px;
        writing-mode: vertical-rl;
        text-align: center;
        letter-spacing: 0.25em;
        font-size: 14px;
    }

    .retro-home-reference .retro-home-grid {
        position: relative;
        z-index: 8;
        display: grid;
        grid-template-columns: 2.2fr 0.9fr 1.38fr 1.55fr;
        gap: 0;
        width: calc(100% - 172px);
        margin: -1px auto 0;
        border: 1px solid var(--line);
        background-color: var(--paper-surface);
    }

    .retro-home-reference .retro-card {
        border: 0;
        border-right: 1px solid var(--line);
        border-radius: 0;
        background-color: var(--paper-surface);
        min-height: 262px;
    }

    .retro-home-reference .retro-card:last-child {
        border-right: 0;
    }

    .retro-home-reference .retro-card-title {
        border-bottom: 0;
        padding: 12px 16px 8px;
        font-size: 18px;
    }

    .retro-home-reference .retro-card-title span::after {
        content: "";
        display: block;
        width: 34px;
        height: 3px;
        background: var(--rust);
        margin-top: 8px;
    }

    .retro-home-reference .retro-feature-body {
        grid-template-columns: 240px 1fr;
        padding: 8px 12px 12px;
        gap: 28px;
        min-height: 208px;
    }

    .retro-home-reference .retro-feature-body img {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .retro-home-reference .retro-feature-body h2 {
        font-size: 24px;
        margin: 26px 0 56px;
        line-height: 1.42;
        max-width: 330px;
    }

    .retro-home-reference .retro-readline {
        gap: 18px;
        font-size: 13px;
        color: var(--muted);
    }

    .retro-home-reference .retro-readline b {
        margin-left: auto;
        font-size: 28px;
        font-weight: 400;
        color: var(--ink);
    }

    .retro-home-reference .retro-note-preview {
        grid-template-columns: 82px 1fr;
        gap: 14px;
        min-height: auto;
        padding: 16px 20px 12px;
        align-items: center;
    }

    .retro-home-reference .retro-note-preview div {
        display: grid;
        gap: 9px;
    }

    .retro-home-reference .retro-note-preview div i,
    .retro-home-reference .retro-note-preview div span {
        display: block;
        height: 2px;
        background: var(--line);
    }

    .retro-home-reference .retro-note-preview div i {
        width: 56px;
        background: var(--line);
        margin: 0;
    }

    .retro-home-reference .retro-note-preview div span {
        width: 68px;
    }

    .retro-home-reference .retro-note-preview div span:nth-child(3) {
        width: 42px;
        background: var(--ink);
    }

    .retro-home-reference .retro-note-preview small {
        margin-top: 52px;
        font-family: "Consolas", monospace;
        color: var(--ink);
    }

    .retro-home-reference .retro-note-preview img {
        max-height: none;
        height: 170px;
        object-fit: contain;
        filter: saturate(0.55) contrast(1.05);
    }

    .retro-home-reference .retro-photo-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 12px 22px 0;
        height: 174px;
    }

    .retro-home-reference .retro-photo-strip img {
        height: 174px;
        filter: saturate(0.7) contrast(1.05);
    }

    .retro-home-reference .retro-video-cover {
        margin: 12px 24px 0;
        height: 196px;
        background: #111;
        border-radius: 4px;
    }

    .retro-home-reference .retro-video-cover img {
        filter: grayscale(1) contrast(1.02);
        opacity: 0.86;
    }

    .retro-home-reference .retro-play {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .retro-video-controls {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 10px;
        display: grid;
        grid-template-columns: 14px 14px 14px 1fr 18px 18px 18px;
        gap: 12px;
        align-items: center;
    }

    .retro-video-controls i,
    .retro-video-controls b {
        height: 14px;
        background: rgba(230, 216, 197, 0.9);
        display: block;
    }

    .retro-video-controls span {
        height: 3px;
        background: linear-gradient(90deg, var(--rust) 0 28%, rgba(230, 216, 197, 0.78) 28%);
    }

    .retro-home-reference .retro-page-footer {
        width: calc(100% - 172px);
        margin: 36px auto 0;
        border-top: 1px solid var(--line);
        grid-template-columns: 80px 1fr 1fr 1fr 130px;
        padding: 20px 0 0;
        color: var(--ink);
    }

    a #about-me,
    #about-me {
        position: relative;
        display: none;
        height: auto;
        margin: 0;
        padding: 34px 0 30px;
        border-radius: 0;
        font-size: 17px;
        line-height: 1;
        color: var(--ink);
        font-weight: 700;
    }

    #menu {
        display: none;
        filter: grayscale(1) contrast(2);
    }

    .flow-list.retro-menu-list {
        background-color: var(--paper-surface);
        border: 1px solid var(--line);
        padding: 8px;
    }

    .flow-list.retro-menu-list li {
        width: 150px;
        font-size: 15px;
        padding: 9px;
    }

    .retro-page {
        width: min(1680px, calc(100% - 112px));
        margin: 0 auto;
        position: relative;
        z-index: 20;
    }

    .retro-page.retro-home-reference {
        position: relative;
        z-index: auto;
    }

    .retro-hero {
        min-height: 560px;
        display: grid;
        grid-template-columns: 34% 66%;
        align-items: center;
        position: relative;
        padding: 34px 0 6px;
    }

    .retro-hero-copy {
        position: relative;
        z-index: 2;
        padding-left: 28px;
    }

    .retro-kicker {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: "JetBrains Mono", "Consolas", monospace;
        font-size: 15px;
        color: var(--muted);
        margin-bottom: 70px;
    }

    .retro-kicker span {
        width: 86px;
        height: 2px;
        background: linear-gradient(90deg, var(--rust) 0 18px, transparent 18px 28px, var(--ink) 28px 72px);
    }

    .retro-hero h1,
    .retro-subpage h1,
    .retro-detail h1,
    .retro-video-hero h1 {
        margin: 0;
        font-size: clamp(58px, 6vw, 118px);
        line-height: 1.02;
        font-weight: 900;
    }

    .retro-hero p {
        margin: 20px 0 98px;
        font-size: clamp(22px, 2vw, 32px);
        color: var(--ink);
    }

    .retro-color-bars {
        display: flex;
        gap: 24px;
        align-items: center;
    }

    .retro-color-bars i {
        width: 34px;
        height: 3px;
        background: var(--ink);
        display: block;
    }

    .retro-color-bars i:first-child { background: var(--rust); }
    .retro-color-bars i:last-child { background: var(--blue); }

    .retro-hero-art {
        position: absolute;
        inset: 0 0 0 29%;
        z-index: 1;
        pointer-events: none;
    }

    .retro-hero-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 44%;
        mix-blend-mode: multiply;
        opacity: 0.88;
    }

    .retro-film-note {
        position: absolute;
        right: 0;
        top: 52%;
        z-index: 3;
        font-family: "Consolas", monospace;
        font-size: 14px;
        line-height: 2;
        text-align: right;
    }

    .retro-home-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.7fr 1.08fr 1fr;
        gap: 16px;
        margin-top: -72px;
        position: relative;
        z-index: 5;
    }

    .retro-card,
    .retro-article-card,
    .retro-note-tile,
    .retro-photo-grid figure,
    .retro-video-tile,
    .retro-about-grid article {
        background-color: var(--paper-surface);
        border: 1px solid var(--line);
        border-radius: 6px;
        text-decoration: none;
        color: var(--ink);
        box-sizing: border-box;
        transition: transform 0.16s ease, border-color 0.16s ease;
    }

    .retro-card:hover,
    .retro-article-card:hover,
    .retro-note-tile:hover,
    .retro-photo-grid figure:hover,
    .retro-video-tile:hover {
        transform: translateY(-2px);
        border-color: var(--ink);
    }

    .retro-card-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--line);
        padding: 14px 18px;
        font-size: 18px;
        font-weight: 900;
    }

    .retro-feature-body {
        display: grid;
        grid-template-columns: 45% 1fr;
        gap: 18px;
        padding: 14px;
        align-items: stretch;
    }

    .retro-feature-body img,
    .retro-note-preview img,
    .retro-photo-strip img,
    .retro-video-cover img,
    .retro-article-card img,
    .retro-player img,
    .retro-video-tile img,
    .retro-film-strip img,
    .retro-photo-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.55) contrast(1.06);
    }

    .retro-feature-body h2 {
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.28;
        margin: 22px 0 28px;
    }

    .retro-meta {
        color: var(--rust);
        font-weight: 700;
        margin: 0;
    }

    .retro-readline,
    .retro-video-meta {
        display: flex;
        gap: 24px;
        align-items: center;
        color: var(--muted);
        font-size: 14px;
    }

    .retro-note-preview {
        display: grid;
        grid-template-columns: 40% 1fr;
        gap: 18px;
        padding: 22px;
        min-height: 174px;
    }

    .retro-note-preview img {
        max-height: 154px;
    }

    .retro-note-preview i {
        display: block;
        width: 34px;
        height: 3px;
        background: var(--rust);
        margin: 6px 0 18px;
    }

    .retro-note-preview strong {
        display: block;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .retro-note-preview p {
        color: var(--muted);
        margin: 0;
        line-height: 1.6;
    }

    .retro-photo-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 22px 14px 8px;
        height: 142px;
    }

    .retro-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-bottom: 16px;
    }

    .retro-dots i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(17,17,17,0.28);
    }

    .retro-dots i:first-child {
        background: var(--rust);
    }

    .retro-video-cover {
        position: relative;
        margin: 14px;
        height: 196px;
        overflow: hidden;
        background: #111;
    }

    .retro-play {
        position: absolute;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(230, 216, 197, 0.78);
        font-size: 30px;
    }

    .retro-video-meta {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 10px;
        justify-content: space-between;
        color: white;
    }

    .retro-page-footer {
        display: grid;
        grid-template-columns: 1.4fr repeat(4, 1fr);
        gap: 16px;
        margin-top: 20px;
        padding: 24px 0;
        border-top: 1px solid var(--line);
        font-family: "Consolas", monospace;
        font-size: 16px;
    }

    .retro-subpage {
        padding-top: 50px;
        padding-bottom: 78px;
    }

    .retro-sub-hero {
        min-height: 220px;
        display: grid;
        grid-template-columns: 1fr 36%;
        gap: 24px;
        align-items: start;
        margin-bottom: 24px;
    }

    .retro-sub-hero img {
        width: 100%;
        max-height: 340px;
        object-fit: cover;
        object-position: right center;
        opacity: 0.82;
        mix-blend-mode: multiply;
    }

    .retro-search-panel {
        height: 62px;
        border: 1px solid var(--line);
        display: grid;
        grid-template-columns: 32px 1fr 40px;
        align-items: center;
        gap: 18px;
        padding: 0 22px;
        max-width: 1080px;
        margin-bottom: 28px;
    }

    .retro-search-panel img {
        width: 24px;
        filter: grayscale(1) contrast(2);
    }

    .retro-search-panel input,
    .retro-search-panel button {
        border: 0;
        background: transparent;
        outline: 0;
        font-size: 18px;
        color: var(--ink);
    }

    .retro-search-panel button {
        cursor: pointer;
    }

    .retro-filter-row {
        display: flex;
        align-items: center;
        gap: 34px;
        flex-wrap: wrap;
        margin: 22px 0 28px;
        font-size: 17px;
        font-weight: 700;
    }

    .retro-filter-row a {
        text-decoration: none;
        padding: 7px 12px;
        border-bottom: 2px solid transparent;
    }

    .retro-filter-row a.active {
        color: white;
        background: var(--ink);
        border-radius: 2px;
    }

    .retro-article-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        max-width: 1160px;
    }

    .retro-article-card {
        display: grid;
        grid-template-columns: 42% 1fr;
        min-height: 224px;
        padding: 12px;
        gap: 18px;
    }

    .retro-article-card h2,
    .retro-note-tile h2,
    .retro-about-grid h2 {
        margin: 8px 0 12px;
        line-height: 1.35;
        font-size: 24px;
    }

    .retro-article-card p {
        color: var(--muted);
        line-height: 1.6;
        margin: 0 0 12px;
    }

    mark {
        background: transparent;
        color: var(--rust);
        border-bottom: 2px solid var(--rust);
    }

    .retro-tagline {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .retro-tagline span {
        border: 1px solid var(--line);
        padding: 2px 7px;
        font-size: 13px;
        color: var(--muted);
    }

    .retro-article-card footer {
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 14px;
    }

    .retro-pagination {
        justify-content: flex-start;
        margin: 28px 0 0;
    }

    .retro-pagination .page-btn,
    .retro-pagination .page-disabled,
    .retro-pagination .page-sp {
        background: transparent;
        border: 1px solid var(--line);
        border-radius: 3px;
    }

    .retro-sub-title {
        margin-bottom: 22px;
    }

    .retro-sub-title .retro-kicker {
        margin-bottom: 32px;
    }

    .retro-notes-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 24px;
        max-width: 1380px;
    }

    .retro-note-tile {
        position: relative;
        min-height: 190px;
        padding: 22px 260px 22px 18px;
        overflow: hidden;
    }

    .retro-note-tile time {
        font-family: "Consolas", monospace;
        color: var(--muted);
    }

    .retro-note-tile p {
        color: var(--muted);
        line-height: 1.65;
        font-size: 17px;
    }

    .retro-note-tile blockquote {
        margin: 30px 0;
        padding: 20px 28px;
        background: rgba(17,17,17,0.05);
        font-size: 22px;
        line-height: 1.5;
    }

    .retro-note-tile img {
        position: absolute;
        right: 18px;
        top: 22px;
        width: 230px;
        height: 128px;
        object-fit: cover;
        filter: grayscale(0.75) contrast(1.05);
    }

    .retro-note-tile button {
        position: absolute;
        right: 18px;
        bottom: 14px;
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 15px;
        cursor: pointer;
    }

    .retro-film-strip {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 7px;
        padding: 24px 16px;
        background: #111;
        border: 1px solid var(--line);
        margin-bottom: 28px;
        overflow: hidden;
    }

    .retro-film-strip img {
        height: 150px;
        filter: saturate(0.62) contrast(1.1);
    }

    .retro-photo-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr 0.9fr 1fr;
        grid-auto-rows: 230px;
        gap: 12px;
    }

    .retro-photo-grid figure {
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    .retro-photo-grid figure:nth-child(1),
    .retro-photo-grid figure:nth-child(6) {
        grid-row: span 2;
    }

    .retro-photo-grid figcaption {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        background: rgba(230, 216, 197, 0.86);
        border: 1px solid var(--line-soft);
        padding: 10px;
        display: grid;
        gap: 4px;
    }

    .retro-photo-grid em {
        color: var(--rust);
        font-style: normal;
        font-size: 13px;
    }

    .retro-video-hero {
        display: grid;
        grid-template-columns: 220px 1fr 36%;
        gap: 34px;
        align-items: start;
        padding-top: 42px;
    }

    .retro-video-hero a {
        display: inline-block;
        margin: 22px 0;
        font-size: 22px;
        text-decoration: none;
    }

    .retro-player {
        position: relative;
        height: 430px;
        background: #111;
        overflow: hidden;
        border-radius: 4px;
    }

    .retro-player img {
        opacity: 0.82;
        filter: grayscale(1) contrast(1.05);
    }

    .retro-video-hero aside h2 {
        margin: 0 0 18px;
        border-bottom: 1px solid var(--line);
        padding-bottom: 14px;
    }

    .retro-video-hero aside a {
        display: grid;
        grid-template-columns: 136px 1fr;
        gap: 14px;
        margin: 0 0 14px;
        text-decoration: none;
        font-size: 16px;
    }

    .retro-video-hero aside img {
        width: 136px;
        height: 76px;
        object-fit: cover;
        filter: grayscale(0.75);
    }

    .retro-video-hero aside small {
        grid-column: 2;
        color: var(--muted);
    }

    .retro-video-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .retro-video-tile {
        position: relative;
        padding-bottom: 14px;
        overflow: hidden;
    }

    .retro-video-tile img {
        height: 158px;
        display: block;
    }

    .retro-video-tile > span {
        position: absolute;
        top: 124px;
        right: 8px;
        background: rgba(17,17,17,0.72);
        color: white;
        padding: 2px 6px;
    }

    .retro-video-tile h2 {
        margin: 12px 12px 8px;
        font-size: 18px;
    }

    .retro-video-tile p {
        margin: 0 12px;
        color: var(--muted);
    }

    .retro-detail-page {
        display: grid;
        grid-template-columns: minmax(0, 860px) 360px;
        gap: 90px;
        padding: 54px 0 28px;
    }

    .retro-detail {
        max-width: 860px;
        margin-left: 20%;
    }

    .retro-detail-head .retro-kicker {
        margin-bottom: 22px;
    }

    .retro-detail h1 {
        font-size: clamp(38px, 4.8vw, 58px);
        margin: 12px 0 18px;
    }

    .retro-detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        align-items: center;
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px;
        color: var(--muted);
    }

    .retro-detail-meta span:nth-last-child(-n+2) {
        border: 1px solid var(--line);
        padding: 2px 9px;
        color: var(--ink);
    }

    .retro-detail-intro {
        margin: 18px 0 28px;
        line-height: 1.8;
        color: var(--muted);
    }

    .retro-article-body {
        background-color: var(--paper-surface);
        color: var(--ink);
        line-height: 1.9;
        font-size: 17px;
    }

    .retro-article-body h1,
    .retro-article-body h2,
    .retro-article-body h3 {
        border-left: 5px solid var(--rust);
        padding-left: 14px;
        margin-top: 32px;
    }

    .retro-article-body pre {
        background-color: var(--paper-surface) !important;
        border: 1px solid var(--line);
        color: var(--ink);
        border-radius: 4px;
        padding: 18px;
        overflow-x: auto;
    }

    .retro-article-body code {
        color: var(--ink);
        background: rgba(17,17,17,0.05);
    }

    .retro-article-body img {
        filter: grayscale(0.78) contrast(1.02) saturate(0.55);
        mix-blend-mode: multiply;
    }

    .retro-toc {
        position: sticky;
        top: 128px;
        align-self: start;
        border-left: 1px solid var(--line);
        padding: 0 0 0 24px;
        background-color: var(--paper-surface);
    }

    .retro-toc h2 {
        margin: 0 0 22px;
        font-size: 20px;
    }

    .retro-toc a {
        display: block;
        margin: 20px 0;
        color: var(--muted);
        text-decoration: none;
    }

    .retro-toc img {
        width: 100%;
        margin-top: 28px;
        mix-blend-mode: multiply;
        opacity: 0.75;
    }

    .retro-related {
        margin-top: 42px;
        border-top: 1px solid var(--line);
        padding-top: 18px;
    }

    .retro-related > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .retro-related a {
        border: 1px solid var(--line);
        display: grid;
        grid-template-columns: 42% 1fr;
        text-decoration: none;
        min-height: 82px;
    }

    .retro-related img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .retro-related span,
    .retro-related small {
        padding: 8px;
    }

    .retro-license,
    .retro-comments {
        width: min(860px, calc(100% - 112px));
        margin: 0 auto 20px;
        background-color: var(--paper-surface);
        border: 1px solid var(--line);
        border-radius: 6px;
    }

    .retro-about-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .retro-about-grid article {
        padding: 24px;
        min-height: 230px;
    }

    #bottom {
        position: relative;
        z-index: 30;
        height: 54px;
        background-color: var(--paper-surface);
        border-top: 1px solid var(--line);
        color: var(--ink);
    }

    #bottom-text {
        color: inherit;
        line-height: 52px;
    }

    #bottom a {
        color: inherit;
    }

    #close-effects {
        display: none;
    }

    .search-shake {
        animation: retro-shake 0.32s linear;
    }

    @keyframes retro-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        75% { transform: translateX(4px); }
    }
}

@media screen and (max-width: 1180px) {
    .retro-topbar,
    #top-tab.retro-topbar {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    .retro-nav {
        gap: 14px;
        font-size: 15px;
    }

    .retro-home-grid,
    .retro-article-grid,
    .retro-video-grid,
    .retro-about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retro-video-hero {
        grid-template-columns: 180px 1fr;
    }

    .retro-video-hero aside {
        grid-column: 1 / -1;
    }

    .retro-detail {
        margin-left: 0;
    }
}

@media screen and (max-width: 760px) {
    .retro-topbar,
    #top-tab.retro-topbar {
        height: 76px;
        padding: 0 14px;
        width: calc(100% - 32px);
        margin: 0 16px;
    }

    #logo-link {
        height: 76px;
        gap: 10px;
    }

    #logo {
        height: 40px;
    }

    #title {
        font-size: 24px;
        white-space: nowrap;
    }

    .retro-nav,
    #about-me,
    .retro-barcode,
    .retro-nav-divider {
        display: none;
    }

    #menu {
        display: block;
        width: 26px;
        height: 26px;
        margin: 0;
    }

    .retro-nav-shell {
        gap: 16px;
    }

    #search-wrapper.retro-search,
    .retro-search {
        width: 78px;
    }

    #search-wrapper.retro-search:focus-within,
    .retro-search:focus-within {
        width: 150px;
    }

    .retro-search:focus-within #search-input {
        width: 112px !important;
    }

    .retro-page {
        width: calc(100% - 36px);
    }

    .retro-home-reference {
        width: calc(100% - 36px);
    }

    .retro-home-reference .retro-hero {
        min-height: 620px;
    }

    .retro-home-reference .retro-hero-copy {
        position: relative;
        left: auto;
        top: auto;
        width: min(100%, 520px);
        padding-top: 28px;
    }

    .retro-home-reference .retro-hero h1 {
        font-size: 56px;
    }

    .retro-home-reference .retro-hero p {
        font-size: 21px;
    }

    .retro-title-rule {
        grid-template-columns: 120px 1fr;
        margin-bottom: 34px;
    }

    .retro-home-code {
        letter-spacing: 0.24em;
    }

    .retro-home-code i,
    .retro-home-reference .retro-color-bars i:last-child {
        width: 130px;
    }

    .retro-side-rail,
    .retro-vinyl {
        display: none;
    }

    .retro-home-reference .retro-hero-art {
        inset: 116px -18px 0 -18px;
    }

    .retro-home-reference .retro-hero-art::after {
        background: linear-gradient(180deg, rgba(230, 216, 197, 0.98) 0%, rgba(230, 216, 197, 0.88) 30%, rgba(230, 216, 197, 0.08) 72%);
    }

    .retro-home-reference .retro-hero-art img {
        object-position: 64% bottom;
    }

    .retro-home-reference .retro-home-grid,
    .retro-home-reference .retro-page-footer {
        width: 100%;
    }

    .retro-home-reference .retro-home-grid {
        grid-template-columns: 1fr;
        margin-top: 18px;
        border-bottom: 0;
    }

    .retro-home-reference .retro-card {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .retro-home-reference .retro-feature-body,
    .retro-home-reference .retro-note-preview {
        grid-template-columns: 1fr;
    }

    .retro-home-reference .retro-feature-body {
        gap: 16px;
    }

    .retro-home-reference .retro-feature-body img {
        aspect-ratio: 16 / 9;
    }

    .retro-home-reference .retro-feature-body h2 {
        margin: 12px 0 22px;
        font-size: 23px;
    }

    .retro-home-reference .retro-note-preview img {
        width: min(220px, 100%);
        height: 150px;
        margin: 0 auto;
    }

    .retro-home-reference .retro-photo-strip {
        height: auto;
        padding-bottom: 18px;
    }

    .retro-home-reference .retro-photo-strip img {
        height: 150px;
    }

    .retro-home-reference .retro-video-cover {
        height: 210px;
        margin-bottom: 18px;
    }

    .retro-hero {
        display: block;
        min-height: 650px;
        padding-top: 34px;
    }

    .retro-hero-copy {
        padding-left: 0;
    }

    .retro-kicker {
        margin-bottom: 38px;
    }

    .retro-hero h1,
    .retro-subpage h1,
    .retro-video-hero h1 {
        font-size: 60px;
    }

    .retro-hero p {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .retro-hero-art {
        inset: 78px -18px 0 -18px;
        z-index: 0;
    }

    .retro-hero-art img {
        object-position: center top;
    }

    .retro-film-note {
        display: none;
    }

    .retro-home-grid {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .retro-feature-body,
    .retro-note-preview,
    .retro-article-card {
        grid-template-columns: 1fr;
    }

    .retro-feature-body img,
    .retro-article-card img {
        aspect-ratio: 16 / 9;
    }

    .retro-sub-hero,
    .retro-notes-grid,
    .retro-video-hero,
    .retro-video-grid,
    .retro-photo-grid,
    .retro-about-grid,
    .retro-detail-page,
    .retro-related > div {
        grid-template-columns: 1fr;
    }

    .retro-sub-hero img,
    .retro-toc {
        display: none;
    }

    .retro-filter-row {
        gap: 12px;
        font-size: 15px;
    }

    .retro-article-grid {
        grid-template-columns: 1fr;
    }

    .retro-note-tile {
        padding: 18px;
    }

    .retro-note-tile img {
        position: static;
        width: 100%;
        height: 150px;
        margin: 16px 0;
    }

    .retro-film-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .retro-film-strip img {
        height: 96px;
    }

    .retro-photo-grid {
        grid-auto-rows: 220px;
    }

    .retro-player {
        height: 240px;
    }

    .retro-detail {
        max-width: 100%;
    }

    .retro-license,
    .retro-comments {
        width: calc(100% - 36px);
    }
}

@media screen {
    .retro-home-reference {
        width: calc(100% - 172px);
        min-height: calc(100vh - 54px);
        margin: 0 auto 34px;
        border: 0;
        box-sizing: border-box;
        background-color: var(--paper-surface);
    }

    #top-tab.retro-topbar {
        height: 101px;
        width: calc(100% - 172px);
        margin: 0 86px;
        padding-left: 32px;
        border-left: 0;
        background-color: var(--paper-surface);
    }

    #logo-link {
        height: 101px;
        gap: 30px;
    }

    #logo {
        height: 32px;
        background: rgba(17, 17, 17, 0.62);
    }

    #title {
        font-size: 35px;
        letter-spacing: 0;
    }

    #top-tab-right.retro-nav-shell,
    .retro-nav-shell {
        flex: 1;
        justify-content: flex-start;
        gap: 0;
        padding-right: 220px;
    }

    .retro-nav {
        gap: 58px;
        margin: 0 auto 0 42px;
        font-size: 18px;
    }

    .retro-nav a {
        padding: 45px 0 31px;
    }

    .retro-nav a::after,
    #about-me::after {
        bottom: 20px;
        height: 3px;
    }

    #search-wrapper.retro-search,
    .retro-search {
        width: 200px;
        height: 38px;
        gap: 8px;
        margin: 0 52px 0 0;
        padding: 0 11px;
        background-color: var(--paper-surface);
    }

    #search-wrapper.retro-search input,
    #search-wrapper input,
    #search-input {
        width: 150px !important;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-warm);
    }

    #search-wrapper.retro-search img,
    #search-wrapper img,
    #search-btn {
        width: 22px;
        height: 22px;
    }

    .retro-search:focus-within {
        width: 280px;
    }

    .retro-search:focus-within #search-input {
        width: 230px !important;
    }

    .retro-mark-scale {
        left: -60px;
        top: 40px;
    }

    .retro-barcode {
        display: none;
    }

    .retro-topbar::before {
        display: none;
    }

    .retro-home-reference .retro-hero {
        height: 452px;
        min-height: 452px;
        overflow: hidden;
        border-bottom: 0;
        background-color: var(--paper-surface);
    }

    .retro-home-reference .retro-hero-copy {
        left: 7.25vw;
        top: 92px;
        width: 520px;
    }

    .retro-home-reference .retro-hero h1 {
        font-size: clamp(96px, 8.5vw, 148px);
        line-height: 0.92;
    }

    .retro-home-reference .retro-hero p {
        margin: 28px 0 18px;
        font-size: 26px;
        font-weight: 700;
    }

    .retro-title-rule {
        grid-template-columns: 180px 210px;
        gap: 28px;
        margin: 24px 0 62px;
    }

    .retro-title-rule i {
        height: 4px;
    }

    .retro-home-code {
        margin-bottom: 26px;
        font-size: 13px;
    }

    .retro-home-reference .retro-color-bars i {
        width: 62px;
        height: 5px;
    }

    .retro-home-reference .retro-color-bars i:last-child {
        width: 340px;
        height: 1px;
    }

    .retro-home-reference .retro-hero-art::after {
        background: rgba(230, 216, 197, 0.08);
    }

    .retro-home-reference .retro-hero-art img {
        object-fit: contain;
        object-position: right bottom;
        opacity: 0.94;
    }

    .retro-side-rail {
        left: -66px;
        top: 114px;
        bottom: 38px;
    }

    .retro-side-rail::before {
        top: -165px;
    }

    .retro-side-rail .retro-rail-lines {
        position: absolute;
        display: block;
        top: -120px;
        left: 12px;
        width: 10px;
        height: 120px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='120' viewBox='0 0 10 120' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='120' fill='%2317120d'/%3E%3Crect x='8' y='0' width='1' height='120' fill='%2317120d'/%3E%3C/svg%3E") 0 0 / 10px 120px no-repeat;
    }

    .retro-side-rail b::after {
        display: none;
    }

    .retro-side-rail b {
        margin-top: 40px;
        font-size: 15px;
    }

    .retro-side-rail i {
        height: 124px;
        margin-top: 122px;
    }

    .retro-side-rail em {
        top: 75%;
    }

    .retro-vinyl {
        position: fixed;
        right: -12px;
        top: -10px;
        width: 326px;
        height: 326px;
        max-width: none;
        object-fit: contain;
        display: block;
        background: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        filter: contrast(1.04) saturate(0.9);
        pointer-events: none;
        z-index: 5000;
    }

    .retro-home-reference .retro-film-note {
        right: 26px;
        top: 130px;
        font-size: 15px;
        line-height: 1.8;
    }

    .retro-home-reference .retro-home-grid {
        width: 100%;
        grid-template-columns: 2.2fr 0.9fr 1.38fr 1.55fr;
        min-height: 272px;
        background-color: var(--paper-surface);
        border-top: 1px solid var(--line);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
    }

    .retro-home-reference .retro-card {
        min-height: 272px;
        background-color: var(--paper-surface);
    }

    .retro-home-reference .retro-card-title {
        padding: 13px 16px 8px;
        font-size: 18px;
    }

    .retro-home-reference .retro-note-card,
    .retro-home-reference .retro-photo-card {
        position: relative;
    }

    .retro-home-reference .retro-note-card::after,
    .retro-home-reference .retro-photo-card::after {
        content: "→";
        position: absolute;
        right: 18px;
        bottom: 18px;
        font-size: 28px;
        line-height: 1;
        font-weight: 400;
        transition: transform 0.16s ease;
    }

    .retro-home-reference .retro-note-card:hover::after,
    .retro-home-reference .retro-photo-card:hover::after {
        transform: translateX(4px);
    }

    .retro-home-reference .retro-feature-body {
        grid-template-columns: 226px 1fr;
        gap: 28px;
        padding: 6px 12px 12px;
    }

    .retro-home-reference .retro-feature-body img {
        width: 226px;
        height: 210px;
    }

    .retro-home-reference .retro-feature-body h2 {
        margin: 28px 0 54px;
        font-size: 24px;
    }

    .retro-home-reference .retro-note-preview {
        grid-template-columns: 66px 1fr;
        padding: 18px 22px 12px;
    }

    .retro-home-reference .retro-note-preview img {
        height: 170px;
    }

    .retro-home-reference .retro-photo-strip {
        height: 174px;
        padding: 13px 22px 0;
    }

    .retro-home-reference .retro-photo-strip img {
        height: 172px;
    }

    .retro-home-reference .retro-video-cover {
        height: 205px;
        margin: 11px 24px 0;
    }

    .retro-home-reference .retro-page-footer {
        width: 100%;
        margin-top: 36px;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1720px) {
    .retro-nav {
        gap: 50px;
        margin-left: 38px;
        margin-right: auto;
    }

    #search-wrapper.retro-search,
    .retro-search {
        margin-right: 48px;
    }

    .retro-home-reference .retro-feature-body {
        grid-template-columns: 222px 1fr;
        gap: 24px;
    }

    .retro-home-reference .retro-feature-body img {
        width: 222px;
    }
}

@media screen and (max-width: 1180px) {
    #top-tab.retro-topbar {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    .retro-nav {
        margin-left: 22px;
        margin-right: auto;
        gap: 22px;
    }

    #top-tab-right.retro-nav-shell,
    .retro-nav-shell {
        padding-right: 0;
    }

    #search-wrapper.retro-search,
    .retro-search {
        margin-right: 20px;
    }

    .retro-nav-divider-brand {
        margin-left: 20px;
    }

    .retro-nav-divider-search {
        display: none;
    }

    .retro-home-reference .retro-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 760px) {
    #top-tab.retro-topbar {
        height: 76px;
        width: calc(100% - 32px);
        margin: 0 16px;
        padding: 0 12px;
    }

    .retro-topbar::before {
        display: none;
    }

    #logo-link {
        height: 76px;
    }

    #top-tab-right.retro-nav-shell,
    .retro-nav-shell {
        gap: 14px;
    }

    .retro-nav-divider {
        display: none;
    }

    #search-wrapper.retro-search,
    .retro-search {
        width: 78px;
        margin-right: 0;
    }

    #search-wrapper.retro-search input,
    #search-wrapper input,
    #search-input {
        width: 36px !important;
    }

    .retro-search:focus-within {
        width: 158px;
    }

    .retro-search:focus-within #search-input {
        width: 114px !important;
    }

    .retro-home-reference {
        width: calc(100% - 36px);
    }

    .retro-home-reference .retro-hero {
        height: 612px;
        min-height: 612px;
        overflow: hidden;
    }

    .retro-home-reference .retro-hero-copy {
        padding-top: 28px;
        left: auto;
        top: auto;
    }

    .retro-home-reference .retro-hero h1 {
        font-size: 58px;
        line-height: 0.98;
    }

    .retro-home-reference .retro-hero p {
        font-size: 21px;
    }

    .retro-home-reference .retro-hero-art {
        inset: 112px -18px 0 -18px;
    }

    .retro-home-reference .retro-hero-art::after {
        background: rgba(230, 216, 197, 0.08);
    }

    .retro-home-reference .retro-hero-art img {
        object-fit: cover;
        object-position: 58% 38%;
    }

    .retro-home-reference .retro-home-grid {
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 18px;
    }

    .retro-home-reference .retro-card {
        min-height: auto;
    }

    .retro-home-reference .retro-feature-body {
        grid-template-columns: 1fr;
    }

    .retro-home-reference .retro-feature-body img {
        width: 100%;
        height: auto;
    }
}

@media screen {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(33, 23, 15, 0.32) rgba(230, 216, 197, 0.42);
    }

    body,
    #center,
    .flow-list,
    .retro-article-body,
    .retro-detail-page {
        scrollbar-width: thin;
        scrollbar-color: rgba(33, 23, 15, 0.32) rgba(230, 216, 197, 0.42);
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    #center::-webkit-scrollbar,
    .flow-list::-webkit-scrollbar,
    .retro-article-body::-webkit-scrollbar,
    .retro-detail-page::-webkit-scrollbar {
        display: block;
        width: 6px;
        height: 6px;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    #center::-webkit-scrollbar-track,
    .flow-list::-webkit-scrollbar-track,
    .retro-article-body::-webkit-scrollbar-track,
    .retro-detail-page::-webkit-scrollbar-track {
        background:
            linear-gradient(90deg, transparent 0 2px, rgba(33, 23, 15, 0.12) 2px 3px, transparent 3px 100%),
            rgba(230, 216, 197, 0.42);
        border-radius: 0;
        box-shadow: none;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    #center::-webkit-scrollbar-thumb,
    .flow-list::-webkit-scrollbar-thumb,
    .retro-article-body::-webkit-scrollbar-thumb,
    .retro-detail-page::-webkit-scrollbar-thumb {
        min-height: 42px;
        border: 2px solid rgba(230, 216, 197, 0.58);
        border-radius: 0;
        background: rgba(33, 23, 15, 0.36);
        box-shadow: none;
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover,
    #center::-webkit-scrollbar-thumb:hover,
    .flow-list::-webkit-scrollbar-thumb:hover,
    .retro-article-body::-webkit-scrollbar-thumb:hover,
    .retro-detail-page::-webkit-scrollbar-thumb:hover {
        background: rgba(33, 23, 15, 0.54);
    }

    html::-webkit-scrollbar-button,
    body::-webkit-scrollbar-button,
    #center::-webkit-scrollbar-button,
    .flow-list::-webkit-scrollbar-button,
    .retro-article-body::-webkit-scrollbar-button,
    .retro-detail-page::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    html::-webkit-scrollbar-corner,
    body::-webkit-scrollbar-corner,
    #center::-webkit-scrollbar-corner,
    .flow-list::-webkit-scrollbar-corner,
    .retro-article-body::-webkit-scrollbar-corner,
    .retro-detail-page::-webkit-scrollbar-corner {
        background: transparent;
    }
}