/* GAME UI/UX Community design system skin. */
:root {
    --primary-color: #111;
    --primary-text-color: #111;
    --secondary-text-color: #53636d;
    --white-color: #fff;
    --lighter-gray-color: #eef6fa;
    --light-gray-color: #e3edf3;
    --mid-gray-color: #cbd8df;
    --dark-gray-color: #151515;
    --black-color: #000;
    --ds-bg: #eaf3f8;
    --ds-ink: #080808;
    --ds-orange: #ff8c63;
    --ds-orange-dark: #bd602f;
    --ds-green: #75dc48;
    --ds-green-dark: #3da82e;
    --ds-purple: #8657ef;
    --ds-purple-dark: #5933bb;
    --ds-blue: #58b7ef;
    --ds-pink: #ff6689;
    --ds-yellow: #ffc94f;
    --ds-radius: 28px;
}

html { overflow-x: clip; background: var(--ds-bg); }
body { color: var(--ds-ink); background: var(--ds-bg); font-family: Arial, Helvetica, sans-serif !important; }
::selection { color: white; background: var(--ds-purple); }
a { color: var(--ds-ink); text-underline-offset: 3px; }
a:hover { color: var(--ds-purple-dark); }

.site { width: 100%; min-height: 100vh; margin: 0; overflow: hidden; background: var(--ds-bg); }
.gh-inner { width: calc(100% - clamp(36px, 7vw, 130px)); max-width: none; }

.gh-head { z-index: 100; color: var(--ds-ink); border: 0; background: rgba(234,243,248,.9); box-shadow: 0 1px 0 rgba(0,0,0,.09); backdrop-filter: blur(14px); }
.home-template .gh-head { position: absolute; top: 0; left: 0; width: 100%; background: transparent; box-shadow: none; backdrop-filter: none; }
.gh-head-inner { min-height: 86px; }
.gh-head-logo { display: flex; align-items: center; width: clamp(190px, 17vw, 290px); }
.gh-head-logo::before { display: none; }
.gh-head-logo img { width: 100%; max-width: none; max-height: 54px; object-fit: contain; object-position: left center; }
.gh-head-menu, .gh-head-link { font-size: 1.4rem; font-weight: 700; }
.gh-head-menu a { color: var(--ds-ink); text-decoration: none; }
.gh-head-menu a:hover { color: var(--ds-purple); }
.gh-btn, .gh-icon-btn, .gh-burger, button { color: white !important; border: 0 !important; border-radius: 999px !important; background: var(--ds-ink) !important; box-shadow: none; }
.gh-btn:hover, .gh-icon-btn:hover, button:hover { color: white !important; background: var(--app-accent, var(--ds-purple)) !important; }

.home-template .site-cover { position: relative; display: flex; width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--ds-ink); border: 0; background-color: var(--ds-bg) !important; background-image: linear-gradient(rgba(234,243,248,.12),rgba(234,243,248,.12)),url("../images/brand-hero.png") !important; background-position: center !important; background-size: cover !important; scroll-snap-align: start; }
.home-template .site-cover::before, .home-template .site-cover::after { display: none !important; }
.site-cover .cover-image { z-index: -2; opacity: .07; filter: grayscale(1); }
.home-template .site-cover .cover-content { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; min-height: 100svh; padding: 130px clamp(28px, 7vw, 140px) 70px; margin: 0; color: var(--ds-ink); text-align: center; }
.cover-description { max-width: min(920px, 78vw); color: var(--ds-ink); font-family: inherit !important; font-size: clamp(4.4rem, 7.2vw, 10rem); font-weight: 950; line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.cover-description::after { display: block; max-width: 610px; margin-top: 32px; content: "Практика, разборы и знания о дизайне игровых интерфейсов — в одном сообществе."; color: #26353d; font-size: clamp(1.6rem, 1.7vw, 2.2rem); font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.site-cover .search { width: min(570px, 78vw); margin: 42px auto 0; }
.site-cover .search-form { position: relative; z-index: 21; padding: 6px; border: 3px solid var(--ds-ink); border-radius: 999px; background: white; box-shadow: 8px 8px 0 var(--ds-purple); }
.site-cover .search-field { color: var(--ds-ink) !important; border-radius: 999px !important; background: transparent !important; font-weight: 700; }
.site-cover .form-button { border-radius: 50% !important; }

.site-content { padding: 78px 0 35px; background: var(--ds-bg); scroll-snap-align: start; }
.home-template .site-content { position: relative; border-top: 2px solid rgba(0,0,0,.12); }
.home-template .site-content::before { display: none; }
h1,h2,h3,h4,h5,h6 { color: var(--ds-ink); font-family: inherit !important; font-weight: 950; line-height: .96; letter-spacing: -.055em; text-transform: uppercase; }

.gh-feed { gap: 28px; }
.gh-feed > *, .gh-featured > *, .gh-related > * { position: relative; overflow: hidden; border: 3px solid var(--ds-ink) !important; border-radius: var(--ds-radius) !important; background: white; box-shadow: 8px 8px 0 var(--ds-ink); transition: transform .2s ease, box-shadow .2s ease; }
.gh-feed > *::after, .gh-featured > *::after { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; content: ""; border: 5px solid white; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; }
.gh-feed > *:nth-child(4n+1), .gh-featured > *:nth-child(4n+1) { color: var(--ds-orange-dark); background: linear-gradient(145deg, #ffd06e, var(--ds-orange)); }
.gh-feed > *:nth-child(4n+2), .gh-featured > *:nth-child(4n+2) { color: var(--ds-green-dark); background: linear-gradient(145deg, #a4ef69, var(--ds-green)); }
.gh-feed > *:nth-child(4n+3), .gh-featured > *:nth-child(4n+3) { color: var(--ds-purple-dark); background: linear-gradient(145deg, #ac82ff, var(--ds-purple)); }
.gh-feed > *:nth-child(4n), .gh-featured > *:nth-child(4n) { color: #146f95; background: linear-gradient(145deg, #75dded, var(--ds-blue)); }
.gh-feed > *:hover, .gh-featured > *:hover { transform: translate(-4px,-4px); box-shadow: 13px 13px 0 var(--ds-ink); }
.gh-card-title, .gh-card-link, .gh-card-excerpt { color: var(--ds-ink) !important; }
.gh-card-date, .gh-article-meta { color: var(--ds-ink) !important; opacity: .65; }
.gh-feed img, .gh-featured img { filter: saturate(.9) contrast(1.04); }

.gh-article { width: calc(100% - clamp(36px, 7vw, 130px)); max-width: none; margin-inline: auto; }
.gh-article-header { position: relative; padding: clamp(42px, 7vw, 120px); border-top: 3px solid var(--ds-ink); border-bottom: 3px solid var(--ds-ink); background: white; box-shadow: 0 10px 0 var(--ds-orange); }
.gh-article-header::after { display: none; }
.gh-article-title { position: relative; z-index: 1; max-width: 1050px; font-size: clamp(4.2rem, 8vw, 10rem); }
.gh-article-excerpt { position: relative; z-index: 1; color: #35444c !important; }
.gh-article-image { overflow: hidden; border: 3px solid var(--ds-ink); border-radius: var(--ds-radius); box-shadow: 10px 10px 0 var(--ds-green); }
.gh-content { color: #26353d; }
.gh-content a { text-decoration-color: var(--ds-purple); text-decoration-thickness: 4px; }
.gh-content blockquote { padding: 30px 36px; color: var(--ds-ink); border: 3px solid var(--ds-ink); border-radius: 22px; background: var(--ds-yellow); box-shadow: 7px 7px 0 var(--ds-ink); }
.gh-content pre, .gh-content code { color: white; border-radius: 14px; background: var(--ds-ink); }
.gh-content hr { border-color: var(--ds-ink); }

.pagination, .gh-loadmore { color: var(--ds-ink); }
.gh-foot { margin-top: 80px; color: white; border-top: 0; background: var(--ds-ink); }
.gh-foot::before { display: block; width: 100%; height: 10px; content: ""; background: linear-gradient(90deg, var(--ds-orange), var(--ds-yellow), var(--ds-green), var(--ds-blue), var(--ds-purple), var(--ds-pink)); }
.gh-foot a { color: var(--ds-green); }
input,textarea,select { color: var(--ds-ink) !important; border: 2px solid var(--ds-ink) !important; border-radius: 14px !important; background: white !important; font-family: inherit !important; }

@supports (scroll-snap-type: y proximity) { html:has(body.home-template) { scroll-snap-type: y proximity; } }
@media (max-width: 767px) {
    .gh-inner, .gh-article { width: calc(100% - 28px); }
    .gh-head-inner { min-height: 70px; }
    .gh-head-logo { width: 170px; }
    .home-template .site-cover .cover-content { align-items: center; padding: 110px 20px 55px; text-align: center; }
    .cover-description { max-width: 100%; font-size: clamp(4rem, 15vw, 6.5rem); }
    .cover-description::after { font-size: 1.55rem; }
    .site-cover .search { width: 100%; margin-top: 36px; }
    .site-content { padding-top: 52px; }
    .gh-feed > *, .gh-featured > * { border-radius: 22px !important; box-shadow: 5px 5px 0 var(--ds-ink); }
    .gh-article-header { padding: 38px 22px; }
    .gh-article-header::after { opacity: .18; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }

/* Three-column application shell */
:root,
:root[data-color-theme="light"] {
    --app-bg: #151014;
    --app-panel: #21181e;
    --app-panel-soft: #2d2027;
    --app-text: #f2e4ca;
    --app-muted: #b8a58d;
    --app-line: #5b4138;
    --app-accent: #d94b36;
    --app-accent-2: #d4a94f;
    color-scheme: dark;
}
:root[data-color-theme="reading"] { --app-bg:#f4ecd8; --app-panel:#f8f1df; --app-panel-soft:#eee5cf; --app-text:#3b2f2f; --app-muted:#786b5f; --app-line:#d8cdb5; --app-accent:#c96a2b; --app-accent-2:#b58947; }
:root[data-color-theme="dark"] { --app-bg:#1e1f22; --app-panel:#313338; --app-panel-soft:#2b2d31; --app-text:#f2f3f5; --app-muted:#b5bac1; --app-line:#3f4147; --app-accent:#5865f2; --app-accent-2:#23a559; color-scheme:dark; }

html, body { background: var(--app-bg); }
body { color: var(--app-text); }
.site {
    display: grid;
    grid-template-columns: 64px 280px minmax(0, 1fr) 310px;
    align-items: start;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--app-panel);
    box-shadow: none;
}
.ds-kb-rail { position: sticky; z-index: 120; top: 0; display: flex; height: 100vh; flex-direction: column; align-items: center; gap: 10px; padding: 14px 8px; border-right: 1px solid var(--app-line); background: var(--app-panel-soft); }
.ds-kb-rail a { position: relative; display: grid; width: 40px; height: 40px; place-items: center; color: var(--app-muted); border-radius: 10px; text-decoration: none; }
.ds-kb-rail a:hover { color: var(--app-text); background: var(--app-panel); }
.ds-kb-rail-brand { margin-bottom: 10px; color: white !important; background: var(--app-text) !important; font-size: 1.7rem; font-weight: 950; }
.ds-kb-rail-home span { font-size: 2rem; transform: translateY(-1px); }
.ds-kb-rail-link span::before { display: block; font-size: 1.8rem; line-height: 1; }
.ds-kb-rail-link:nth-of-type(3) span::before { content: "▦"; }
.ds-kb-rail-link:nth-of-type(4) span::before { content: "◉"; }
.ds-kb-rail-link:nth-of-type(5) span::before { content: "◇"; }
.ds-kb-rail-link:nth-of-type(6) span::before { content: "▤"; }
.ds-kb-rail-link:nth-of-type(7) span::before { content: "⌘"; }
.ds-kb-rail-link:nth-of-type(8) span::before { content: "△"; }
.ds-kb-rail-link:nth-of-type(9) span::before { content: "✦"; }
.ds-kb-rail a[data-tooltip]::after { position: absolute; z-index: 200; top: 50%; left: calc(100% + 10px); padding: 6px 9px; content: attr(data-tooltip); color: white; border-radius: 7px; background: var(--app-text); box-shadow: 0 5px 18px rgba(0,0,0,.15); font-size: 1.1rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-5px,-50%); transition: opacity .15s ease,transform .15s ease; white-space: nowrap; }
.ds-kb-rail a[data-tooltip]:hover::after { opacity: 1; transform: translate(0,-50%); }
.ds-main { min-width: 0; overflow: visible; background: var(--app-panel); }
.ds-sidebar { position: sticky; top: 0; display: flex; min-width: 0; height: 100vh; flex-direction: column; padding: 38px 28px 20px; overflow: hidden; color: var(--app-text); background: var(--app-panel); }
.ds-sidebar-left { border-right: 1px solid var(--app-line); }
.ds-sidebar-right { border-left: 1px solid var(--app-line); }
.ds-brand { display: block; width: 185px; margin-bottom: 34px; }
.ds-brand img { display: block; width: 100%; filter: none; }
:root[data-color-theme="dark"] .ds-brand img,
:root[data-color-theme="dark"] .gh-head-logo img { filter: invert(1); }
.ds-search-button { position: absolute; top: 34px; right: 20px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: var(--app-text) !important; border: 1px solid var(--app-line) !important; border-radius: 10px !important; background: var(--app-panel-soft) !important; }
.ds-primary-nav .nav { display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; list-style: none; }
.ds-primary-nav a, .ds-nav-group a { display: flex; min-height: 42px; align-items: center; padding: 9px 12px; color: var(--app-text); border-radius: 10px; font-size: 1.45rem; font-weight: 650; text-decoration: none; }
.ds-primary-nav a:hover, .ds-nav-group a:hover { color: var(--app-text); background: var(--app-panel-soft); }
.ds-primary-nav a::before, .ds-nav-group a::before { width: 22px; margin-right: 10px; content: "◈"; color: var(--app-muted); text-align: center; }
.ds-nav-group { display: flex; flex-direction: column; margin-top: 28px; }
.ds-nav-label { padding: 0 12px 9px; color: var(--app-muted); font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ds-join { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; margin-top: auto; color: white; border-radius: 10px; background: var(--app-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--app-accent), transparent 65%); font-weight: 800; text-decoration: none; }
.ds-join:hover { color: white; transform: translateY(-1px); }
.ds-join-right { margin-top: 0; margin-bottom: 26px; }

.ds-main .gh-head { position: sticky !important; top: 0; left: auto; width: 100%; background: color-mix(in srgb, var(--app-panel), transparent 8%); border-bottom: 1px solid var(--app-line); backdrop-filter: blur(14px); }
.ds-main .gh-head-brand .gh-head-logo { display: none; }
.ds-main .gh-head-menu { margin-left: 0; }
.ds-main .gh-head-actions { display: flex; }
.ds-main .gh-head-inner, .ds-main .gh-inner { width: calc(100% - 56px); }
.ds-main .site-cover { min-height: calc(100vh - 126px); background-color: var(--app-panel) !important; }
.ds-main .site-cover .cover-content { min-height: calc(100vh - 126px); padding-inline: 46px; }
.ds-main .site-content { padding-top: 48px; background: var(--app-panel); }
.ds-main .gh-article { width: calc(100% - 72px); }
.ds-main .gh-article-header { border-radius: 18px; background: var(--app-panel-soft); }
.ds-main .gh-content { color: var(--app-text); }
.ds-main .gh-foot { display: none; }

.ds-side-card h3 { margin: 0 0 16px; color: var(--app-text); font-size: 1.65rem; line-height: 1.25; letter-spacing: -.02em; text-transform: none; }
.ds-subscribe { display: block; padding: 11px 14px; color: white; border-radius: 9px; background: var(--app-accent); font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--app-accent), transparent 65%); }
.ds-subscribe:hover { color: white; }
.ds-side-card p { color: var(--app-muted); font-size: 1.25rem; }
.ds-side-note { padding: 14px; margin-top: 24px; color: var(--app-text); border: 2px solid var(--app-accent-2); border-radius: 12px; font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.ds-popular-tags { margin-top: 30px; }
.ds-popular-tags h4 { color: var(--app-muted); font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.ds-popular-tags a { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; color: var(--app-text); font-weight: 700; text-decoration: none; }
.ds-popular-tags a::before { width: 28px; height: 28px; margin-right: 10px; content: ""; border-radius: 50%; background: linear-gradient(135deg,var(--app-accent),var(--app-accent-2)); }
.ds-popular-tags a span { margin-right: auto; }
.ds-popular-tags small { color: var(--app-muted); }
.ds-side-footer { display: flex; flex-direction: column; gap: 14px; margin-top: auto; color: var(--app-muted); font-size: 1.15rem; }
.ds-theme-switcher { display: grid; grid-template-columns: repeat(3,1fr); padding: 4px; border-radius: 11px; background: var(--app-panel-soft); }
.ds-theme-switcher button { min-width: 0; padding: 7px 4px; color: var(--app-muted) !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; font-size: 1rem; }
.ds-theme-switcher button.is-active { color: white !important; background: var(--app-text) !important; }

@media (max-width: 1180px) {
    .site { grid-template-columns: 64px 240px minmax(0,1fr); }
    .ds-sidebar-right { display: none; }
}
@media (max-width: 760px) {
    .site { display: block; width: 100%; height: auto; min-height: 100vh; margin: 0; overflow: visible; border: 0; border-radius: 0; }
    .ds-kb-rail, .ds-sidebar-left { display: none; }
    .ds-main { overflow: visible; }
    .ds-main .gh-head-brand .gh-head-logo { display: flex; }
    .ds-main .gh-head-inner, .ds-main .gh-inner, .ds-main .gh-article { width: calc(100% - 28px); }
    .ds-main .site-cover, .ds-main .site-cover .cover-content { min-height: 100svh; }
}

/* Article detail structure */
.ds-post-page { color: var(--app-text); background: var(--app-panel); }
.ds-post { width: 100%; }
.ds-breadcrumbs { display: flex; min-height: 62px; align-items: center; gap: 13px; padding: 0 36px; overflow: hidden; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 1.25rem; white-space: nowrap; }
.ds-breadcrumbs a { color: var(--app-text); text-decoration: none; }
.ds-breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ds-post-header { width: min(900px, calc(100% - 72px)); padding: 38px 0 36px; margin: 0 auto; }
.ds-post-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 7px 11px; margin-bottom: 20px; border-radius: 10px; color: var(--app-text); background: var(--app-panel-soft); font-size: 1.2rem; }
.ds-post-meta > * { color: inherit; text-decoration: none; }
.ds-post-meta > * + *::before { margin: 0 10px; content: "|"; color: var(--app-line); }
.ds-post-title { max-width: 850px; margin: 0; color: var(--app-text); font-size: clamp(3.4rem, 5vw, 6.2rem); line-height: 1; letter-spacing: -.055em; text-transform: none; }
.ds-post-excerpt { max-width: 800px; margin: 14px 0 0; color: var(--app-muted); font-size: clamp(1.65rem, 2vw, 2.05rem); line-height: 1.45; }
.ds-post-image { margin: 32px 0 0; }
.ds-post-image img { display: block; width: 100%; max-height: 620px; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,25,35,.09); }
.ds-post-image figcaption { margin-top: 9px; color: var(--app-muted); font-size: 1.15rem; text-align: center; }
.ds-post-content { width: min(900px, calc(100% - 72px)); max-width: none; padding: 44px 0; margin: 0 auto; border-top: 1px solid var(--app-line); color: var(--app-text); font-size: 1.75rem; line-height: 1.8; }
.ds-post-content > * { max-width: 760px; margin-inline: auto; }
.ds-post-content > .kg-width-wide { max-width: 900px; }
.ds-post-content > .kg-width-full { width: 100%; max-width: none; }

.ds-post-tags, .ds-related, .ds-discussion, .ds-post-pagination { width: min(900px, calc(100% - 72px)); padding: 34px 0; margin: 0 auto; border-top: 1px solid var(--app-line); }
.ds-post-tags h2, .ds-related > h2, .ds-section-heading h2 { margin: 0 0 20px; color: var(--app-muted); font-size: 1.25rem; letter-spacing: 0; text-transform: none; }
.ds-post-tags div { display: flex; flex-wrap: wrap; gap: 9px; }
.ds-post-tags a { padding: 8px 13px; color: var(--app-text); border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel); font-weight: 700; text-decoration: none; }
.ds-post-tags a:hover { border-color: var(--app-accent); }
.ds-related-list { display: flex; flex-direction: column; }
.ds-related-item { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; padding: 18px 0; border-bottom: 1px dotted var(--app-line); }
.ds-related-item:last-child { border-bottom: 0; }
.ds-related-image { display: block; min-height: 96px; overflow: hidden; border-radius: 13px; background: var(--app-panel-soft); }
.ds-related-image img { width: 100%; height: 100%; object-fit: cover; }
.ds-related-item h3 { margin: 2px 0 7px; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.025em; text-transform: none; }
.ds-related-item h3 a { color: var(--app-text); text-decoration: none; }
.ds-related-item p { margin: 0 0 8px; overflow: hidden; color: var(--app-muted); font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; }
.ds-related-item span { color: var(--app-muted); font-size: 1.15rem; }
.ds-post-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ds-post-pagination a { display: flex; min-height: 90px; flex-direction: column; justify-content: center; padding: 16px; color: var(--app-text); border: 1px solid var(--app-line); border-radius: 12px; text-decoration: none; }
.ds-post-pagination a:last-child { text-align: right; }
.ds-post-pagination small { color: var(--app-muted); }
.ds-post-pagination span { margin-top: 5px; font-weight: 800; }
.ds-discussion { padding-bottom: 70px; }
.ds-section-heading { display: flex; align-items: center; justify-content: space-between; }
.ds-discussion .gh-comments { width: 100%; }

@media (max-width: 760px) {
    .ds-breadcrumbs { padding-inline: 14px; }
    .ds-post-header, .ds-post-content, .ds-post-tags, .ds-related, .ds-discussion, .ds-post-pagination { width: calc(100% - 28px); }
    .ds-post-title { font-size: clamp(3.2rem, 11vw, 4.6rem); }
    .ds-post-content { font-size: 1.6rem; }
    .ds-related-item { grid-template-columns: 105px minmax(0,1fr); gap: 14px; }
    .ds-related-item p { display: none; }
    .ds-post-pagination { grid-template-columns: 1fr; }
    .ds-post-pagination a:last-child { text-align: left; }
}

/* Header search and editorial home hero */
.ds-article-hero { display: none !important; }
.ds-main .gh-head-inner { display: flex; gap: 24px; align-items: center; }
.ds-header-search {
    display: flex;
    width: min(680px, 100%);
    min-width: 220px;
    height: 44px;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    margin-right: auto;
    color: var(--app-muted) !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 11px !important;
    background: var(--app-panel-soft) !important;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
}
.ds-header-search:hover { color: var(--app-text) !important; border-color: var(--app-accent) !important; background: var(--app-panel) !important; }
.ds-header-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ds-header-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-header-search kbd { padding: 3px 7px; margin-left: auto; color: var(--app-muted); border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); font: inherit; font-size: 1rem; white-space: nowrap; }
.ds-main .gh-head-actions { flex: 0 0 auto; }
.ds-main .gh-head-actions { margin-left: auto; }

.ds-article-hero { padding: 38px 36px 54px; color: var(--app-text); background: var(--app-panel); }
.ds-article-hero-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.ds-article-hero-heading > div > span { color: var(--app-muted); font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ds-article-hero-heading h1 { margin: 5px 0 0; color: var(--app-text); font-size: clamp(3.4rem, 5vw, 6rem); letter-spacing: -.055em; text-transform: none; }
.ds-article-hero-heading > a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; color: var(--app-text); border: 1px solid var(--app-line); border-radius: 10px; font-weight: 750; text-decoration: none; }
.ds-hero-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ds-hero-card { display: grid; grid-template-columns: 160px minmax(0,1fr); min-height: 190px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel-soft); }
.ds-hero-card:first-child { grid-column: 1/-1; grid-template-columns: minmax(0,1.35fr) minmax(300px,.9fr); min-height: 380px; }
.ds-hero-card-image { display: block; min-height: 100%; overflow: hidden; background: color-mix(in srgb,var(--app-accent),transparent 82%); }
.ds-hero-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ds-hero-card:hover .ds-hero-card-image img { transform: scale(1.025); }
.ds-hero-card-body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 20px; }
.ds-hero-card:first-child .ds-hero-card-body { justify-content: center; padding: clamp(24px,4vw,48px); }
.ds-hero-tag { padding: 5px 9px; color: white; border-radius: 7px; background: var(--app-accent); font-size: 1rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.ds-hero-card h2 { margin: 13px 0 8px; font-size: clamp(1.8rem,2.1vw,3.2rem); line-height: 1.02; letter-spacing: -.035em; text-transform: none; }
.ds-hero-card h2 a { color: var(--app-text); text-decoration: none; }
.ds-hero-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--app-muted); font-size: 1.3rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ds-hero-card:first-child p { font-size: 1.5rem; -webkit-line-clamp: 4; }
.ds-hero-card-body > div:last-child { display: flex; gap: 14px; margin-top: auto; padding-top: 14px; color: var(--app-muted); font-size: 1.05rem; }
.home-template .ds-main .site-content { padding-top: 0; }

@media (max-width: 900px) {
    .ds-header-search { width: 100%; }
    .ds-header-search kbd { display: none; }
    .ds-hero-grid { grid-template-columns: 1fr; }
    .ds-hero-card:first-child { grid-column: auto; grid-template-columns: 1fr; }
    .ds-hero-card:first-child .ds-hero-card-image { min-height: 320px; }
}
@media (max-width: 760px) {
    .ds-main .gh-head-inner { gap: 10px; }
    .ds-header-search { order: 2; height: 40px; min-width: 0; }
    .ds-header-search span { display: none; }
    .ds-main .gh-head-actions { display: none; }
    .ds-article-hero { padding: 28px 14px 38px; }
    .ds-article-hero-heading h1 { font-size: 4rem; }
    .ds-article-hero-heading > a { display: none; }
    .ds-hero-card, .ds-hero-card:first-child { grid-template-columns: 1fr; min-height: 0; }
    .ds-hero-card-image, .ds-hero-card:first-child .ds-hero-card-image { min-height: 220px; }
}

/* Compact home article feed */
.ds-home-list { padding-top: 34px; padding-bottom: 60px; }
.ds-home-list-header { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--app-line); }
.ds-home-list-header > div > span { color: var(--app-muted); font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ds-home-list-header h2 { margin: 4px 0 0; color: var(--app-text); font-size: 3rem; letter-spacing: -.04em; text-transform: none; }
.ds-home-list-header > span { color: var(--app-muted); font-size: 1.15rem; }
.ds-home-feed { display: flex; flex-direction: column; }
.ds-home-item { position: relative; display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 20px; min-height: 126px; padding: 18px 0; border-bottom: 1px dotted var(--app-line); }
.ds-home-item-image { display: block; min-height: 94px; overflow: hidden; border-radius: 13px; background: var(--app-panel-soft); }
.ds-home-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ds-home-item:hover .ds-home-item-image img { transform: scale(1.035); }
.ds-home-item-body { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.ds-home-item h3 { margin: 0 0 7px; overflow: hidden; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.025em; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.ds-home-item h3 a { color: var(--app-text); text-decoration: none; }
.ds-home-item p { margin: 0; overflow: hidden; color: var(--app-muted); font-size: 1.35rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ds-home-item-body > div { display: flex; gap: 16px; margin-top: 10px; color: var(--app-muted); font-size: 1.1rem; }
.ds-load-more { display: flex; align-items: center; gap: 12px; padding: 10px 15px; margin: 32px auto 0; color: var(--app-text) !important; border: 1px solid var(--app-line) !important; border-radius: 10px !important; background: var(--app-panel-soft) !important; font-weight: 750; }
.ds-load-more small { padding-left: 12px; border-left: 1px solid var(--app-line); color: var(--app-muted); }
.ds-load-more.is-loading { cursor: wait; opacity: .6; }

@media (max-width: 760px) {
    .ds-home-list { padding-top: 22px; }
    .ds-home-item { grid-template-columns: 110px minmax(0,1fr); gap: 14px; min-height: 110px; }
    .ds-home-item h3 { font-size: 1.5rem; white-space: normal; }
    .ds-home-item p { display: none; }
}

/* Unified typography scale */
body { font-size: 1.6rem; line-height: 1.55; }
.ds-sidebar, .ds-main, .ds-kb-rail { font-family: Arial, Helvetica, sans-serif; }
.ds-primary-nav a, .ds-nav-group a { font-size: 1.4rem; line-height: 1.35; }
.ds-nav-label, .ds-popular-tags h4, .ds-home-list-header > div > span,
.ds-post-tags h2, .ds-related > h2, .ds-section-heading h2 { font-size: 1.1rem; line-height: 1.3; }
.ds-header-search { font-size: 1.35rem; line-height: 1.3; }
.ds-side-card h3 { font-size: 1.7rem; line-height: 1.3; }
.ds-side-card p, .ds-side-note, .ds-popular-tags a { font-size: 1.3rem; line-height: 1.45; }
.ds-home-list-header h2 { font-size: clamp(2.6rem, 3vw, 3.4rem); line-height: 1.08; }
.ds-home-item h3 { font-size: 1.7rem; line-height: 1.25; }
.ds-home-item p { font-size: 1.35rem; line-height: 1.45; }
.ds-home-item-body > div, .ds-related-item span, .ds-post-image figcaption { font-size: 1.15rem; }
.ds-post-title { font-size: clamp(3.4rem, 4.4vw, 5.6rem); line-height: 1.03; }
.ds-post-excerpt { font-size: clamp(1.65rem, 1.8vw, 1.95rem); line-height: 1.5; }
.ds-post-content { font-size: 1.7rem; line-height: 1.8; }
.ds-related-item h3 { font-size: 1.7rem; line-height: 1.25; }
.ds-related-item p { font-size: 1.3rem; line-height: 1.45; }
.ds-theme-switcher button { font-size: 1.1rem; line-height: 1.2; }

@media (max-width: 760px) {
    body { font-size: 1.5rem; }
    .ds-post-title { font-size: clamp(3rem, 10vw, 4.2rem); }
    .ds-post-content { font-size: 1.6rem; line-height: 1.72; }
    .ds-home-item h3 { font-size: 1.5rem; }
}

/* Knowledge-base directory home */
.ds-kb-home { padding-top: 42px; padding-bottom: 70px; }
.ds-kb-home-header { max-width: 720px; margin-bottom: 30px; }
.ds-kb-home-header > span { color: var(--app-accent); font-size: 1.1rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ds-kb-home-header h1 { margin: 5px 0 10px; color: var(--app-text); font-size: clamp(3.4rem, 4.5vw, 5.4rem); line-height: 1; letter-spacing: -.055em; text-transform: none; }
.ds-kb-home-header p { margin: 0; color: var(--app-muted); font-size: 1.45rem; line-height: 1.5; }
.ds-kb-home-header:has(+ .ds-kb-search) { margin-bottom: 16px; }
.ds-kb-search { display: flex; width: min(860px,100%); height: 56px; align-items: center; gap: 14px; padding: 0 18px; margin: 0 0 26px; color: var(--app-muted) !important; border: 1px solid var(--app-line) !important; border-radius: 13px !important; background: var(--app-panel-soft) !important; box-shadow: 0 3px 10px rgba(30,20,70,.05); font-size: 1.45rem; font-weight: 600; text-align: left; }
.ds-kb-search:hover { color: var(--app-text) !important; border-color: var(--app-accent) !important; background: var(--app-panel) !important; }
.ds-kb-search svg { width: 21px; height: 21px; flex: 0 0 auto; }
.ds-kb-search kbd { padding: 4px 8px; margin-left: auto; color: var(--app-muted); border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel); font: inherit; font-size: 1.05rem; white-space: nowrap; }
.ds-kb-sections { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr); gap: 14px 18px; align-items: start; }
.ds-kb-section { --section-color: var(--app-accent); overflow: hidden; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-panel); }
.ds-kb-section h2 { display: flex; min-height: 52px; align-items: center; gap: 10px; padding: 12px 16px; margin: 0; color: var(--app-text); border-bottom: 1px solid var(--app-line); font-size: 1.55rem; line-height: 1.2; letter-spacing: -.015em; text-transform: none; }
.ds-kb-section h2 > span { display: grid; width: 24px; height: 24px; place-items: center; font-size: 1.5rem; }
.ds-kb-section nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 15px 50px; }
.ds-kb-section nav a, .ds-kb-coming { position: relative; width: fit-content; padding: 5px 0; color: var(--app-text); font-size: 1.4rem; font-weight: 750; line-height: 1.25; text-decoration: none; }
.ds-kb-section nav a::before, .ds-kb-coming::before { position: absolute; top: 8px; right: calc(100% + 10px); width: 14px; height: 14px; content: ""; border-radius: 2px; background: var(--section-color); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--section-color),black 20%); }
.ds-kb-section nav a::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: var(--app-line); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.ds-kb-section nav a:hover { color: var(--section-color); }
.ds-kb-section nav a:hover::after { transform: scaleX(1); }
.ds-kb-green { --section-color:#68c944; }
.ds-kb-teal { --section-color:#2fa477; }
.ds-kb-orange { --section-color:#e88224; }
.ds-kb-purple { --section-color:#8c56c7; }
.ds-kb-brown { --section-color:#b27d68; }
.ds-kb-pink { --section-color:#d43d79; }
.ds-figma-icon { color: white; border-radius: 8px; background: linear-gradient(180deg,#ff6656 0 33%,#a25ff2 33% 66%,#36c6b3 66%); font-weight: 900; }
.ds-kb-coming { color: var(--app-muted); }

@media (min-width: 901px) {
    .ds-kb-orange { grid-row: span 2; }
}
@media (max-width: 900px) {
    .ds-kb-sections { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .ds-kb-home { padding-top: 28px; padding-bottom: 45px; }
    .ds-kb-home-header h1 { font-size: 3.8rem; }
    .ds-kb-section nav { padding-left: 46px; }
}

/* Hades-inspired mythic art direction */
body { background: radial-gradient(circle at 50% -20%, color-mix(in srgb,var(--app-accent),transparent 82%),transparent 42%),var(--app-bg); font-family: "Trebuchet MS",Arial,sans-serif !important; }
h1,h2,h3,h4,h5,h6,.ds-post-title,.ds-kb-home-header h1 { font-family: Georgia,"Times New Roman",serif !important; font-weight: 900; }
.site { position: relative; background: var(--app-panel); }
.site::before { position: fixed; z-index: 500; top: 0; right: 0; left: 0; height: 5px; content: ""; pointer-events: none; background: linear-gradient(90deg,var(--app-accent),var(--app-accent-2),var(--app-accent)); box-shadow: 0 2px 12px color-mix(in srgb,var(--app-accent),transparent 35%); }
.ds-kb-rail { border-right-color: var(--app-accent-2); background: color-mix(in srgb,var(--app-panel-soft),black 16%); }
.ds-kb-rail-brand { color: var(--app-panel) !important; border: 1px solid var(--app-accent-2); border-radius: 50% 50% 45% 55% !important; background: var(--app-accent-2) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--app-accent-2),transparent 68%); font-family: Georgia,serif; }
.ds-kb-rail a:not(.ds-kb-rail-brand):hover { color: var(--app-accent-2); box-shadow: inset 3px 0 0 var(--app-accent); }
.ds-sidebar-left,.ds-sidebar-right { background: linear-gradient(180deg,color-mix(in srgb,var(--app-panel),white 2%),var(--app-panel)); }
.ds-sidebar-left { border-right-color: var(--app-line); }
.ds-sidebar-right { border-left-color: var(--app-line); }
.ds-brand { padding-bottom: 18px; border-bottom: 1px solid var(--app-accent-2); }
:root[data-color-theme="light"] .ds-brand img,
:root:not([data-color-theme]) .ds-brand img,
:root[data-color-theme="light"] .gh-head-logo img,
:root:not([data-color-theme]) .gh-head-logo img { filter: invert(1) sepia(.18); }
.ds-primary-nav a,.ds-nav-group a { position: relative; border-radius: 2px; }
.ds-primary-nav a::after,.ds-nav-group a::after { position: absolute; right: 9px; content: "◆"; color: var(--app-accent-2); font-size: .75rem; opacity: 0; transform: translateX(-5px); transition: .15s ease; }
.ds-primary-nav a:hover,.ds-nav-group a:hover { color: var(--app-text); background: linear-gradient(90deg,color-mix(in srgb,var(--app-accent),transparent 76%),transparent); }
.ds-primary-nav a:hover::after,.ds-nav-group a:hover::after { opacity: 1; transform: none; }
.ds-nav-label { color: var(--app-accent-2); }
.ds-main .gh-head { border-bottom: 1px solid var(--app-accent-2); background: color-mix(in srgb,var(--app-panel),transparent 4%); }
.gh-btn,.ds-join,.ds-subscribe { border: 1px solid var(--app-accent-2) !important; border-radius: 2px !important; background: linear-gradient(180deg,color-mix(in srgb,var(--app-accent),white 8%),var(--app-accent)) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--app-panel),transparent 35%),0 4px 0 color-mix(in srgb,var(--app-accent),black 30%); clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.ds-kb-search { border-color: var(--app-accent-2) !important; border-radius: 2px !important; background: linear-gradient(90deg,var(--app-panel-soft),color-mix(in srgb,var(--app-panel-soft),var(--app-accent) 8%)) !important; box-shadow: inset 0 0 0 2px var(--app-panel),0 4px 0 color-mix(in srgb,var(--app-accent-2),black 30%); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.ds-kb-search svg { color: var(--app-accent-2); }
.ds-kb-home-header > span { color: var(--app-accent-2); }
.ds-kb-sections { gap: 18px; }
.ds-kb-section { position: relative; border-color: var(--app-line); border-radius: 2px; background: linear-gradient(145deg,var(--app-panel),color-mix(in srgb,var(--app-panel-soft),black 5%)); box-shadow: 0 7px 18px rgba(0,0,0,.18); clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.ds-kb-section::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: var(--section-color); box-shadow: 0 0 12px var(--section-color); }
.ds-kb-section h2 { color: var(--app-text); border-bottom-color: var(--app-line); background: linear-gradient(90deg,color-mix(in srgb,var(--section-color),transparent 82%),transparent 70%); }
.ds-kb-section nav a::before,.ds-kb-coming::before { transform: rotate(45deg) scale(.72); border-radius: 0; }
.ds-kb-section nav a:hover { color: var(--app-accent-2); text-shadow: 0 0 8px color-mix(in srgb,var(--app-accent-2),transparent 55%); }
.ds-theme-switcher { border: 1px solid var(--app-line); border-radius: 2px; }
.ds-theme-switcher button { border-radius: 1px !important; }
.ds-theme-switcher button.is-active { color: var(--app-panel) !important; background: var(--app-accent-2) !important; }
.ds-post-header,.ds-post-tags,.ds-related,.ds-discussion { position: relative; }
.ds-post-title { color: var(--app-text); text-shadow: 2px 2px 0 color-mix(in srgb,var(--app-accent),transparent 35%); }
.ds-post-meta { border-left: 3px solid var(--app-accent); border-radius: 0; }
.ds-post-image img { border: 1px solid var(--app-accent-2); border-radius: 2px; box-shadow: 8px 8px 0 color-mix(in srgb,var(--app-accent),black 25%); clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.ds-post-content blockquote { border-color: var(--app-accent-2); border-radius: 0; background: color-mix(in srgb,var(--app-accent),transparent 84%); }
.ds-related-item { border-bottom-color: var(--app-line); }
.ds-related-image { border-radius: 2px; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }

@media (max-width:760px) {
    .ds-kb-section,.ds-kb-search,.gh-btn,.ds-join { clip-path:none; }
}

/* Cyberpunk 2077-inspired interface direction */
:root,
:root[data-color-theme="light"] {
    --app-bg:#05090d;
    --app-panel:#0b1116;
    --app-panel-soft:#111b22;
    --app-text:#e8f7f7;
    --app-muted:#809aa2;
    --app-line:#263943;
    --app-accent:#fcee0a;
    --app-accent-2:#00f0ff;
    color-scheme:dark;
}
body { background: repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(0,240,255,.025) 80px),linear-gradient(135deg,#05090d,#091117); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; }
h1,h2,h3,h4,h5,h6,.ds-post-title,.ds-kb-home-header h1 { font-family:"Arial Black","Segoe UI",Arial,sans-serif !important; font-weight:900; letter-spacing:-.045em; }
.site::before { height:3px; background:linear-gradient(90deg,var(--app-accent) 0 58%,#ff003c 58% 73%,var(--app-accent-2) 73%); box-shadow:0 0 15px color-mix(in srgb,var(--app-accent-2),transparent 35%); }
.ds-kb-rail { border-right:1px solid var(--app-accent-2); background:#070c10; }
.ds-kb-rail-brand { color:#06090c !important; border:0; border-radius:2px !important; background:var(--app-accent) !important; box-shadow:5px 5px 0 #ff003c; font-family:"Arial Black",sans-serif; transform:skew(-4deg); }
.ds-kb-rail a:not(.ds-kb-rail-brand) { border:1px solid transparent; border-radius:2px; }
.ds-kb-rail a:not(.ds-kb-rail-brand):hover { color:var(--app-accent-2); border-color:var(--app-accent-2); box-shadow:0 0 12px rgba(0,240,255,.16); }
.ds-kb-rail-link span::before { color:currentColor; font-family:"Arial Black",sans-serif; font-size:1.45rem; }
.ds-kb-rail-link:nth-of-type(3) span::before { content:"DB"; }
.ds-kb-rail-link:nth-of-type(4) span::before { content:"//"; }
.ds-kb-rail-link:nth-of-type(5) span::before { content:"IO"; }
.ds-kb-rail-link:nth-of-type(6) span::before { content:"<>"; }
.ds-kb-rail-link:nth-of-type(7) span::before { content:"UX"; }
.ds-kb-rail-link:nth-of-type(8) span::before { content:"AI"; }
.ds-kb-rail-link:nth-of-type(9) span::before { content:"+"; }
.ds-kb-rail a[data-tooltip]::after { color:#070b0f; border:1px solid var(--app-accent); border-radius:0; background:var(--app-accent); font-family:"Arial Narrow",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.ds-sidebar-left,.ds-sidebar-right { background:linear-gradient(180deg,#0d141a,#080d12); }
.ds-brand { border-bottom:2px solid var(--app-accent); }
:root[data-color-theme="light"] .ds-brand img,
:root:not([data-color-theme]) .ds-brand img,
:root[data-color-theme="light"] .gh-head-logo img,
:root:not([data-color-theme]) .gh-head-logo img { filter:invert(1) brightness(1.25); }
.ds-nav-label { color:var(--app-accent); font-family:"Arial Black",sans-serif; letter-spacing:.12em; }
.ds-primary-nav a,.ds-nav-group a { border-radius:0; text-transform:uppercase; letter-spacing:.025em; }
.ds-primary-nav a::before,.ds-nav-group a::before { content:"›"; color:var(--app-accent-2); font-size:2rem; }
.ds-primary-nav a::after,.ds-nav-group a::after { content:"[LINK]"; color:var(--app-accent); font:700 .75rem monospace; }
.ds-primary-nav a:hover,.ds-nav-group a:hover { background:linear-gradient(90deg,rgba(0,240,255,.14),transparent); box-shadow:inset 3px 0 0 var(--app-accent-2); }
.ds-main .gh-head { border-bottom:1px solid var(--app-line); background:rgba(8,13,18,.94); }
.gh-btn,.ds-join,.ds-subscribe { color:#05090d !important; border:0 !important; border-radius:0 !important; background:var(--app-accent) !important; box-shadow:6px 6px 0 #ff003c; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); font-family:"Arial Black",sans-serif; text-transform:uppercase; }
.gh-btn:hover,.ds-join:hover,.ds-subscribe:hover { color:#05090d !important; background:var(--app-accent-2) !important; box-shadow:6px 6px 0 var(--app-accent); }
.ds-kb-search { color:var(--app-muted) !important; border:1px solid var(--app-accent-2) !important; border-radius:0 !important; background:rgba(0,240,255,.045) !important; box-shadow:inset 0 0 20px rgba(0,240,255,.04),6px 6px 0 rgba(252,238,10,.45); clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); font-family:monospace; text-transform:uppercase; }
.ds-kb-search svg { color:var(--app-accent-2); filter:drop-shadow(0 0 4px var(--app-accent-2)); }
.ds-kb-search kbd { color:#05090d; border:0; border-radius:0; background:var(--app-accent); font-family:monospace; }
.ds-kb-home-header > span { color:var(--app-accent); font-family:monospace; }
.ds-kb-home-header > span::before { content:"// "; color:var(--app-accent-2); }
.ds-kb-section { border:1px solid var(--app-line); border-radius:0; background:linear-gradient(145deg,#0e161c,#091015); box-shadow:7px 7px 0 rgba(0,0,0,.5); clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.ds-kb-section::before { width:3px; background:var(--section-color); box-shadow:0 0 14px var(--section-color); }
.ds-kb-section h2 { border-bottom:1px solid var(--section-color); background:linear-gradient(90deg,color-mix(in srgb,var(--section-color),transparent 82%),transparent); font-family:"Arial Black",sans-serif !important; letter-spacing:.015em; text-transform:uppercase; }
.ds-cyber-icon { position:relative; display:grid !important; width:27px !important; height:27px !important; place-items:center; overflow:hidden; color:#061014; border:1px solid currentColor; border-radius:2px !important; background:var(--section-color); font:900 1rem/1 monospace !important; box-shadow:3px 3px 0 color-mix(in srgb,var(--section-color),black 40%); transform:skew(-5deg); }
.ds-cyber-icon::before,.ds-cyber-icon::after { position:absolute; content:""; }
.ds-icon-resources::before { width:13px; height:9px; border:2px solid #061014; border-top-width:5px; }
.ds-icon-community::before { width:13px; height:9px; border:2px solid #061014; clip-path:polygon(0 0,100% 0,100% 75%,65% 75%,50% 100%,40% 75%,0 75%); }
.ds-icon-learning::before { width:13px; height:15px; border:2px solid #061014; box-shadow:4px 0 0 -2px var(--section-color),4px 0 0 0 #061014; }
.ds-icon-career::before { width:14px; height:10px; border:2px solid #061014; }
.ds-icon-career::after { top:6px; width:7px; height:3px; border:2px solid #061014; border-bottom:0; }
.ds-icon-figma,.ds-icon-adobe { color:#061014 !important; font-size:1rem !important; }
.ds-kb-section nav a::before,.ds-kb-coming::before { width:12px; height:12px; border:1px solid color-mix(in srgb,var(--section-color),white 40%); border-radius:0; background:var(--section-color); box-shadow:0 0 7px color-mix(in srgb,var(--section-color),transparent 35%); transform:none; }
.ds-kb-section nav a { font-family:"Arial Narrow","Segoe UI",sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.ds-kb-section nav a:hover { color:var(--app-accent); text-shadow:0 0 8px rgba(252,238,10,.38); }
.ds-theme-switcher { border:1px solid var(--app-line); border-radius:0; background:#090f14; }
.ds-theme-switcher button { border-radius:0 !important; font-family:monospace; text-transform:uppercase; }
.ds-theme-switcher button.is-active { color:#05090d !important; background:var(--app-accent) !important; }
.ds-post-title { color:var(--app-text); font-family:"Arial Black",sans-serif !important; text-transform:uppercase; text-shadow:3px 3px 0 #ff003c; }
.ds-post-meta { color:var(--app-accent-2); border-left:3px solid var(--app-accent); background:rgba(0,240,255,.05); font-family:monospace; }
.ds-post-image img { border:1px solid var(--app-accent-2); border-radius:0; box-shadow:8px 8px 0 #ff003c; clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px); }
.ds-post-content blockquote { border:1px solid var(--app-accent); border-left:5px solid var(--app-accent); background:rgba(252,238,10,.055); }
.ds-post-content code,.ds-post-content pre { border:1px solid var(--app-accent-2); background:#05090d; font-family:"Consolas",monospace; }
.ds-related-image { border:1px solid var(--app-line); border-radius:0; }

@media (max-width:760px) {
    .ds-kb-section,.ds-kb-search,.gh-btn,.ds-join,.ds-post-image img { clip-path:none; }
}

/* Restore the pre-Hades visual system */
:root,
:root[data-color-theme="light"] { --app-bg:#e9e3ff; --app-panel:#f8f5ff; --app-panel-soft:#eee8ff; --app-text:#28164f; --app-muted:#75659b; --app-line:#d7cdf3; --app-accent:#6637dd; --app-accent-2:#ff6689; color-scheme:light; }
body { background:var(--app-bg); font-family:Arial,Helvetica,sans-serif !important; }
h1,h2,h3,h4,h5,h6,.ds-post-title,.ds-kb-home-header h1 { font-family:Arial,Helvetica,sans-serif !important; letter-spacing:-.045em; }
.site::before { display:none; }
.ds-kb-rail { border-right:1px solid var(--app-line); background:var(--app-panel-soft); }
.ds-kb-rail-brand { color:white !important; border:0; border-radius:10px !important; background:var(--app-text) !important; box-shadow:none; font-family:Arial,sans-serif; transform:none; }
.ds-kb-rail a:not(.ds-kb-rail-brand) { border:0; border-radius:10px; }
.ds-kb-rail a:not(.ds-kb-rail-brand):hover { color:var(--app-text); border:0; background:var(--app-panel); box-shadow:none; }
.ds-kb-rail-link span::before { color:currentColor; font-family:Arial,sans-serif; font-size:1.8rem; }
.ds-kb-rail-link:nth-of-type(3) span::before { content:"▦"; }
.ds-kb-rail-link:nth-of-type(4) span::before { content:"◉"; }
.ds-kb-rail-link:nth-of-type(5) span::before { content:"◇"; }
.ds-kb-rail-link:nth-of-type(6) span::before { content:"▤"; }
.ds-kb-rail-link:nth-of-type(7) span::before { content:"⌘"; }
.ds-kb-rail-link:nth-of-type(8) span::before { content:"△"; }
.ds-kb-rail-link:nth-of-type(9) span::before { content:"✦"; }
.ds-kb-rail a[data-tooltip]::after { color:white; border:0; border-radius:7px; background:var(--app-text); font-family:Arial,sans-serif; letter-spacing:0; text-transform:none; }
.ds-sidebar-left,.ds-sidebar-right { background:var(--app-panel); }
.ds-brand { padding-bottom:0; border-bottom:0; }
:root[data-color-theme="light"] .ds-brand img,
:root:not([data-color-theme]) .ds-brand img,
:root[data-color-theme="light"] .gh-head-logo img,
:root:not([data-color-theme]) .gh-head-logo img { filter:none; }
.ds-nav-label { color:var(--app-muted); font-family:Arial,sans-serif; letter-spacing:.08em; }
.ds-primary-nav a,.ds-nav-group a { border-radius:10px; text-transform:none; letter-spacing:0; }
.ds-primary-nav a::before,.ds-nav-group a::before { content:"◈"; color:var(--app-muted); font-size:inherit; }
.ds-primary-nav a::after,.ds-nav-group a::after { display:none; }
.ds-primary-nav a:hover,.ds-nav-group a:hover { background:var(--app-panel-soft); box-shadow:none; }
.ds-main .gh-head { border-bottom:1px solid var(--app-line); background:color-mix(in srgb,var(--app-panel),transparent 8%); }
.gh-btn,.ds-join,.ds-subscribe { color:white !important; border:0 !important; border-radius:10px !important; background:var(--app-accent) !important; box-shadow:0 4px 12px color-mix(in srgb,var(--app-accent),transparent 65%); clip-path:none; font-family:Arial,sans-serif; text-transform:none; }
.gh-btn:hover,.ds-join:hover,.ds-subscribe:hover { color:white !important; background:var(--app-accent) !important; box-shadow:0 4px 12px color-mix(in srgb,var(--app-accent),transparent 55%); }
.ds-kb-search { color:var(--app-muted) !important; border:1px solid var(--app-line) !important; border-radius:13px !important; background:var(--app-panel-soft) !important; box-shadow:0 3px 10px rgba(30,20,70,.05); clip-path:none; font-family:Arial,sans-serif; text-transform:none; }
.ds-kb-search svg { color:var(--app-muted); filter:none; }
.ds-kb-search kbd { color:var(--app-muted); border:1px solid var(--app-line); border-radius:7px; background:var(--app-panel); font-family:inherit; }
.ds-kb-home-header > span { color:var(--app-accent); font-family:Arial,sans-serif; }
.ds-kb-home-header > span::before { content:none; }
.ds-kb-section { border:1px solid var(--app-line); border-radius:14px; background:var(--app-panel); box-shadow:none; clip-path:none; }
.ds-kb-section::before { display:none; }
.ds-kb-section h2 { border-bottom:1px solid var(--app-line); background:transparent; font-family:Arial,sans-serif !important; letter-spacing:-.015em; text-transform:none; }
.ds-cyber-icon { display:grid !important; width:24px !important; height:24px !important; color:white; border:0; border-radius:8px !important; background:var(--section-color); box-shadow:none; font:900 1rem/1 Arial,sans-serif !important; transform:none; }
.ds-cyber-icon::before,.ds-cyber-icon::after { display:none; }
.ds-icon-resources::before { display:block; width:auto; height:auto; content:"◆"; border:0; }
.ds-icon-community::before { display:block; width:auto; height:auto; content:"●"; border:0; clip-path:none; }
.ds-icon-learning::before { display:block; width:auto; height:auto; content:"▤"; border:0; box-shadow:none; }
.ds-icon-career::before { display:block; width:auto; height:auto; content:"■"; border:0; }
.ds-icon-career::after { display:none; }
.ds-icon-figma,.ds-icon-adobe { color:white !important; }
.ds-kb-section nav a::before,.ds-kb-coming::before { width:14px; height:14px; border:0; border-radius:2px; background:var(--section-color); box-shadow:none; transform:none; }
.ds-kb-section nav a { font-family:Arial,sans-serif; letter-spacing:0; text-transform:none; }
.ds-kb-section nav a:hover { color:var(--section-color); text-shadow:none; }
.ds-theme-switcher { border:0; border-radius:11px; background:var(--app-panel-soft); }
.ds-theme-switcher button { border-radius:8px !important; font-family:Arial,sans-serif; text-transform:none; }
.ds-theme-switcher button.is-active { color:white !important; background:var(--app-text) !important; }
.ds-post-title { color:var(--app-text); font-family:Arial,sans-serif !important; text-transform:none; text-shadow:none; }
.ds-post-meta { color:var(--app-text); border-left:0; background:var(--app-panel-soft); font-family:Arial,sans-serif; }
.ds-post-image img { border:0; border-radius:18px; box-shadow:0 10px 30px rgba(15,25,35,.09); clip-path:none; }
.ds-post-content blockquote { border:3px solid var(--ds-ink); border-left:3px solid var(--ds-ink); border-radius:22px; background:var(--ds-yellow); }
.ds-post-content code,.ds-post-content pre { border:0; background:var(--ds-ink); font-family:monospace; }
.ds-related-image { border:0; border-radius:13px; }

/* Article table of contents in the existing right sidebar */
.ds-sidebar-toc { padding-top: 38px; }
.ds-post-toc {
    width: 100%;
    padding: 0;
}
.ds-post-toc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 0;
    color: var(--app-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 500 1.45rem/1.4 Arial, Helvetica, sans-serif;
    text-align: left;
}
.ds-post-toc-toggle:hover,
.ds-post-toc-toggle:focus {
    color: var(--app-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ds-post-toc-icon {
    color: var(--app-muted);
    font-size: 1.35rem;
    line-height: 1;
}
.ds-post-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 14px;
}
.ds-post-toc-link {
    display: block;
    padding: 8px 4px 8px 0;
    color: var(--app-muted);
    font-size: 1.4rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color .15s ease;
}
.ds-post-toc-link[data-level="3"] { padding-left: 0; font-size: 1.4rem; }
.ds-post-toc-link:hover,
.ds-post-toc-link.is-active {
    color: var(--app-text);
    transform: none;
}
.ds-post-toc-link.is-active { font-weight: 800; }
.ds-post-content :is(h2, h3)[id] { scroll-margin-top: 96px; }

@media (max-width: 1180px) and (min-width: 761px) {
    .post-template .site { grid-template-columns: 64px 240px minmax(0,1fr) 250px; }
    .post-template .ds-sidebar-right { display: flex; padding-inline: 20px; }
}

/* Page transition loader */
.ds-page-loader {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: var(--app-text);
    background: var(--app-panel);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
html.is-page-loading .ds-page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.ds-page-loader-mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: white;
    border-radius: 18px;
    background: var(--app-text);
    box-shadow: 0 9px 24px color-mix(in srgb,var(--app-accent),transparent 68%);
    font-size: 2.4rem;
    font-weight: 950;
    animation: ds-loader-pulse 1s ease-in-out infinite alternate;
}
.ds-page-loader-track {
    width: 124px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--app-panel-soft);
}
.ds-page-loader-track span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--app-accent);
    animation: ds-loader-slide .9s ease-in-out infinite;
}
.ds-page-loader-label {
    color: var(--app-muted);
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}
@keyframes ds-loader-pulse {
    from { transform: scale(.94) rotate(-2deg); }
    to { transform: scale(1.04) rotate(2deg); }
}
@keyframes ds-loader-slide {
    0% { transform: translateX(-110%); }
    50% { transform: translateX(95%); }
    100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
    .ds-page-loader-mark, .ds-page-loader-track span { animation: none; }
}