/* Ynix PS2 Recomp: site shell, page modules, and responsive states. */
:root {
    color-scheme: dark;
    --bg: #10151d;
    --surface: #171f2b;
    --surface-raised: #1e2938;
    --surface-soft: #141b26;
    --line: #303d50;
    --line-strong: #4d617a;
    --text: #e9eef6;
    --muted: #a9b5c6;
    --subtle: #8592a5;
    --green: #a8c7ff;
    --mint: #83c9da;
    --amber: #ffd27a;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-card: 0 18px 50px rgb(0 0 0 / 18%);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scrollbar-color: #7293bd var(--bg);
    scrollbar-width: thin;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(ellipse at 12% -12%, rgb(64 101 153 / 18%), transparent 38rem), radial-gradient(ellipse at 86% 14%, rgb(67 103 153 / 12%), transparent 32rem), var(--bg);
    color: var(--text);
    font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
::selection { background: var(--green); color: #10151d; }
.shell { width: min(100% - 48px, 1260px); margin-inline: auto; padding: 0 0 40px; }
.shell--wide { width: min(100% - 48px, 1360px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--green); color: #10151d; }
.skip-link:focus { top: 16px; }

/* Header and responsive navigation */
.topbar { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; margin: 12px 0 20px; padding: 9px 12px 9px 14px; border: 1px solid rgb(111 137 171 / 28%); border-radius: 18px; background: rgb(20 27 38 / 91%); box-shadow: 0 14px 36px rgb(0 0 0 / 24%); backdrop-filter: blur(18px); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; text-decoration: none; font-weight: 780; letter-spacing: .035em; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #627fa7; border-radius: 13px; background: linear-gradient(145deg, #324b6c, #1b293b); color: var(--green); font: 800 17px ui-monospace, monospace; box-shadow: 0 0 28px rgb(145 183 237 / 18%); }
.brand-name { font-size: 13px; }
.brand-name span { color: var(--green); }
.main-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgb(111 137 171 / 18%); border-radius: 14px; background: rgb(13 19 28 / 68%); }
.main-nav a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; color: #b4c0d0; text-decoration: none; font-size: 13px; font-weight: 620; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-color: #405a7c; background: linear-gradient(145deg, #293d59, #202e43); color: #c5d9fa; box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); }
.main-nav a:hover { transform: translateY(-1px); }
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid #40536d; border-radius: 12px; background: linear-gradient(145deg, #202d3f, #171f2b); color: #d7e4f6; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: #7898c2; background: #263750; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-close { display: none; }

/* Landing hero and project summary */
.hero { padding: clamp(46px, 7vw, 82px) 0 clamp(34px, 5vw, 56px); }
.hero--home { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(32px, 7vw, 92px); align-items: center; }
.hero-copy { max-width: 750px; }
.eyebrow, .meta, .kind, .side-kicker, .visual-label { color: var(--muted); font: 650 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--green); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgb(131 201 218 / 75%); }
.eyebrow-divider { color: #7088a8; }
h1 { margin: 17px 0 19px; font-size: clamp(40px, 6vw, 70px); line-height: 1.03; letter-spacing: -.06em; text-wrap: balance; }
.hero p { max-width: 690px; margin: 0; color: #c2cddd; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 11px; text-decoration: none; font-size: 14px; font-weight: 680; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { border-color: #a8c7ff; background: var(--green); color: #182333; box-shadow: 0 8px 26px rgb(145 183 237 / 16%); }
.button--primary:hover { background: #c0d7ff; }
.button--quiet { background: rgb(31 44 63 / 72%); color: var(--text); }
.button--quiet:hover { border-color: #799bc8; background: #253549; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--subtle); font-size: 12px; }
.note-icon { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #43566e; border-radius: 50%; color: var(--green); font: 700 11px ui-monospace, monospace; }
.hero-visual { position: relative; min-width: 0; overflow: hidden; padding: 20px; border: 1px solid #3d4c64; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(34 49 70 / 96%), rgb(20 27 38 / 98%)); box-shadow: var(--shadow-card); }
.hero-visual::before { position: absolute; top: -80px; right: -70px; width: 240px; height: 240px; border: 1px solid rgb(145 183 237 / 10%); border-radius: 50%; content: ""; box-shadow: 0 0 0 28px rgb(145 183 237 / 2%), 0 0 0 56px rgb(145 183 237 / 2%); }
.visual-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #506580; border-radius: 99px; background: #29384e; color: var(--green); font: 600 11px ui-monospace, monospace; white-space: nowrap; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.chip-art { position: relative; display: grid; min-height: 210px; place-items: center; margin: 10px 0 0; }
.chip-core { position: relative; z-index: 2; display: grid; width: 104px; height: 104px; align-content: center; justify-items: center; border: 1px solid #92b6e8; border-radius: 20px; background: linear-gradient(145deg, #30435c, #202d3d); box-shadow: 0 0 0 10px rgb(145 183 237 / 4%), 0 0 40px rgb(145 183 237 / 14%); }
.chip-core span { color: var(--green); font: 800 30px ui-monospace, monospace; letter-spacing: -.08em; }
.chip-core small { color: #c5d5ea; font: 600 9px ui-monospace, monospace; letter-spacing: .16em; }
.chip-line { position: absolute; z-index: 1; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, #799bcd, transparent); }
.chip-line--one { transform: rotate(29deg); }.chip-line--two { transform: rotate(-29deg); }.chip-line--three { width: 225px; }
.chip-node { position: absolute; z-index: 3; padding: 5px 8px; border: 1px solid #41536b; border-radius: 7px; background: #192231; color: #bac8dc; font: 600 9px ui-monospace, monospace; letter-spacing: .1em; }
.chip-node--a { top: 30px; left: 14%; }.chip-node--b { top: 40px; right: 12%; color: var(--mint); }.chip-node--c { right: 19%; bottom: 14px; color: var(--green); }
.visual-caption { display: grid; gap: 2px; padding: 13px 0 15px; border-top: 1px solid #344257; }
.visual-caption strong { font-size: 14px; }.visual-caption span { color: var(--muted); font-size: 12px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #344257; }
.hero-stats > div { display: grid; gap: 3px; padding: 13px 10px 2px; }.hero-stats > div:first-child { padding-left: 0; }.hero-stats > div + div { border-left: 1px solid #344257; padding-left: 14px; }
.hero-stats strong { color: var(--text); font: 700 17px ui-monospace, monospace; }.hero-stats span { color: var(--subtle); font-size: 10px; line-height: 1.35; }
.hero--wide { max-width: 850px; }.hero--wide h1 { font-size: clamp(38px, 5.4vw, 60px); }

/* Diary and shared content */
.diary { scroll-margin-top: 100px; padding-top: 23px; border-top: 1px solid #2c394a; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading .eyebrow { margin-bottom: 5px; }.section-title { margin: 0; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.25; letter-spacing: -.04em; }
.record-count { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 11px ui-monospace, monospace; white-space: nowrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }.feed { display: grid; gap: 13px; min-width: 0; }
.update-card, .side-card, .content-panel, .info-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, #1c2634, #151d28); box-shadow: 0 12px 34px rgb(0 0 0 / 12%); }
.update-card { min-width: 0; padding: clamp(17px, 2.2vw, 23px); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.update-card:hover { transform: translateY(-2px); border-color: #526a86; box-shadow: 0 18px 40px rgb(0 0 0 / 22%); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #3b4a60; border-radius: 7px; background: #202b3b; color: var(--mint); font-size: 10px; letter-spacing: .07em; }
.kind--marco { border-color: #5a7290; color: var(--green); }.kind--bloqueio { border-color: #5e6070; background: #292d37; color: var(--amber); }.kind--previsao { color: #b7c8ff; }
time, .date { color: var(--subtle); font: 11px ui-monospace, Consolas, monospace; }
.update-card h3 { margin: 12px 0 8px; font-size: clamp(17px, 2vw, 20px); line-height: 1.35; letter-spacing: -.025em; }.update-card h3 a { text-decoration-color: #7293bd; text-decoration-thickness: 1px; text-underline-offset: 4px; }.update-card h3 a:hover { color: var(--green); text-decoration-color: currentColor; }
.body, .prose { margin: 0; color: #c3cedd; white-space: pre-line; overflow-wrap: anywhere; }.update-summary { margin: 0; color: #e1e7f0; font-size: 14px; }
.update-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 18px 0; }.update-point { padding: 16px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }.update-point--solution { border-color: #475d7a; }.update-points--compact { margin: 13px 0 0; gap: 8px; }.update-points--compact > div { min-width: 0; padding: 8px 10px; border-left: 2px solid #5a708a; background: #151d28; }.update-points dt { color: var(--green); font: 650 10px ui-monospace, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }.update-points dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.phase { display: inline-flex; margin-top: 14px; padding: 4px 9px; border: 1px solid #3a4a60; border-radius: 99px; color: #b6c2d3; font: 10px ui-monospace, Consolas, monospace; }.forecast { margin-top: 14px; padding: 11px 13px; border-left: 2px solid var(--amber); border-radius: 0 9px 9px 0; background: #292d37; color: #e5d8b8; font-size: 13px; overflow-wrap: anywhere; }.forecast strong { display: block; margin-bottom: 3px; color: var(--amber); font: 650 10px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--green); font-size: 13px; font-weight: 680; text-decoration: none; }.card-link:hover { gap: 12px; }
.side { position: sticky; top: 102px; display: grid; gap: 12px; min-width: 0; }.side-card { padding: 18px; }.side-card--featured { border-color: #425673; background: linear-gradient(145deg, #27364b, #171f2b); }.side-kicker { margin-bottom: 7px; color: var(--green); font-size: 9px; }.side-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.02em; }.side-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }.side-link { display: inline-flex; gap: 8px; align-items: flex-start; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.5; text-decoration: none; }.side-link:hover { color: var(--green); }.side-meta { margin-top: 9px !important; color: var(--subtle) !important; font: 10px ui-monospace, monospace; }.side-card--links { display: grid; gap: 0; }.side-card--links h3 { margin-bottom: 8px; }.side-card--links a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid #2c394a; color: #c8d2e0; font-size: 12px; text-decoration: none; }.side-card--links a:hover { color: var(--green); }
.empty { padding: 32px 22px; border: 1px dashed #435167; border-radius: 14px; color: var(--muted); text-align: center; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 17px; }.filter-link { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #b8c5d8; text-decoration: none; font-size: 12px; transition: border-color .16s ease, color .16s ease, background .16s ease; }.filter-link:hover, .filter-link[aria-current="page"] { border-color: #7599ca; background: #2a3c55; color: var(--green); }.filter-count { color: var(--subtle); font: 10px ui-monospace, monospace; }
.pagination { display: grid; gap: 12px; margin-top: 18px; }.pagination-summary { color: var(--muted); font-size: 12px; text-align: center; }.pagination-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }.pagination-links a, .pagination-links span { display: inline-grid; min-width: 40px; min-height: 40px; place-items: center; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); text-decoration: none; }.pagination-links a:hover, .pagination-links [aria-current="page"] { border-color: #7599ca; background: #2a3c55; color: var(--green); }.pagination-links .disabled { opacity: .42; }
.content-panel { padding: clamp(20px, 4vw, 38px); }.update-summary-block { margin-bottom: 22px; padding: 19px 21px; border: 1px solid #475d7a; border-radius: 13px; background: #243247; }.update-summary-block h2, .update-point h2, .update-details h2 { margin: 0 0 8px; font-size: 16px; }.update-summary-block p, .update-point p { margin: 0; color: #d7dfeb; white-space: pre-line; overflow-wrap: anywhere; }.update-details { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }.update-details h2 { margin-bottom: 10px; }
.prose { max-width: 78ch; }.prose p, .prose li { color: #c8d1df; }.prose h2 { margin-top: 30px; }.prose a, .text-link { color: var(--green); }
.info-grid, .site-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.info-card { min-width: 0; padding: 21px; transition: border-color .18s ease, transform .18s ease; }.info-card:hover { transform: translateY(-2px); border-color: #50647c; }.info-card h2, .info-card h3 { margin: 0 0 9px; font-size: 16px; }.info-card p { margin: 0; color: #c8d1df; }.info-card a { color: var(--green); overflow-wrap: anywhere; }.info-card ul { margin: 0; padding-left: 20px; }.info-card li + li { margin-top: 7px; }.contact-value { display: inline-block; font-size: clamp(16px, 2vw, 21px); font-weight: 650; }
.archive-panel { margin-top: 18px; }.archive-year { margin: 25px 0 10px; color: var(--green); font: 650 13px ui-monospace, Consolas, monospace; letter-spacing: .04em; }.archive-year:first-child { margin-top: 0; }.link-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.link-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #1c2431; }.link-list a { text-decoration: none; }.link-list a:hover { color: var(--green); }
.page-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }.page-nav a { color: var(--green); text-decoration: none; }.page-nav span { max-width: 48%; overflow-wrap: anywhere; }

/* Footer */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 11px; }.footer-copy { display: grid; }.footer-brand { color: #d3dbe7; font-weight: 700; text-decoration: none; }.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }.footer a { color: #b4bfd0; text-decoration: none; }.footer a:hover { color: var(--green); }

/* Responsive breakpoints */
@media (max-width: 980px) { .hero--home { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 30px; }.layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }.side { top: 96px; } }
@media (max-width: 760px) {
    .shell, .shell--wide { width: min(100% - 36px, 680px); }.topbar { min-height: 70px; gap: 14px; padding-inline: 11px; }.nav-toggle { display: grid; }
    .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
    .main-nav { position: absolute; top: calc(100% + 10px); right: 0; left: auto; display: none; width: min(320px, calc(100vw - 36px)); align-items: stretch; padding: 8px; border: 1px solid #40536d; border-radius: 16px; background: rgb(20 27 38 / 98%); box-shadow: 0 20px 48px rgb(0 0 0 / 42%); }
    .main-nav.is-open { display: grid; }.main-nav a { min-height: 45px; padding: 12px 13px; }.hero--home { grid-template-columns: 1fr; gap: 24px; padding-top: 47px; }.hero-copy { max-width: 640px; }.hero-visual { max-width: 580px; }
    .layout { grid-template-columns: 1fr; }.side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }.side-card--links { grid-column: 1 / -1; }.contact-grid { grid-template-columns: 1fr; }.info-grid, .site-map-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .shell, .shell--wide { width: min(100% - 28px, 460px); padding-bottom: 28px; }.topbar { top: 8px; min-height: 62px; margin-top: 8px; margin-bottom: 16px; border-radius: 15px; }.brand-mark { width: 36px; height: 36px; border-radius: 11px; }.brand-name { font-size: 11px; }
    .hero { padding: 38px 0 31px; }.hero--home { padding-top: 36px; gap: 20px; }h1 { font-size: clamp(38px, 11vw, 54px); }.hero p { font-size: 15px; line-height: 1.7; }
    .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 20px; }.button { width: 100%; }.hero-note { align-items: flex-start; margin-top: 19px; font-size: 11px; }
    .hero-visual { padding: 16px; border-radius: 16px; }.chip-art { min-height: 180px; }.chip-core { width: 90px; height: 90px; }.chip-core span { font-size: 26px; }.chip-line { width: 120px; }.chip-line--three { width: 180px; }.chip-node--a { left: 4%; }.chip-node--b { right: 3%; }.chip-node--c { right: 8%; }
    .hero-stats > div { padding-right: 6px; padding-left: 7px; }.hero-stats > div + div { padding-left: 9px; }.hero-stats strong { font-size: 15px; }.hero-stats span { font-size: 9px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.record-count { align-self: flex-start; }.filters { gap: 6px; }.filter-link { min-height: 35px; padding: 6px 9px; font-size: 11px; }
    .update-card { padding: 16px; }.card-top { align-items: flex-start; flex-wrap: wrap; }.card-top time { max-width: 100%; }.update-card h3 { font-size: 17px; }.update-points--compact { grid-template-columns: 1fr; }
    .side, .info-grid, .site-map-grid, .update-points { grid-template-columns: 1fr; }.side-card--links { grid-column: auto; }.footer { align-items: flex-start; flex-direction: column; margin-top: 38px; }.footer-links { gap: 12px; }
    .page-nav { flex-direction: column; }.page-nav span { max-width: none; }.content-panel { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
::-webkit-scrollbar { width: 10px; height: 10px; }::-webkit-scrollbar-track { background: var(--bg); }::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 99px; background: #7293bd; }::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* Shared page width, full-bleed navigation, search, and new content modules */
.shell--wide { width: min(100% - 48px, 1260px); }
.topbar { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; top: 0; padding-inline: clamp(18px, 3vw, 42px); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: rgb(16 21 29 / 95%); box-shadow: 0 10px 28px rgb(0 0 0 / 18%); }
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 14px; }
.search-form input { flex: 1 1 300px; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface-soft); color: var(--text); font: inherit; }
.search-form input::placeholder { color: var(--subtle); }
.search-form input:focus { outline: 2px solid #7898c2; outline-offset: 2px; }
.search-submit, .search-clear { min-height: 44px; padding-inline: 15px; }
.search-summary { margin: -2px 0 15px; color: var(--muted); font-size: 13px; }
.search-summary strong { color: var(--text); overflow-wrap: anywhere; }
.page-hero { padding: clamp(32px, 6vw, 70px) 0 26px; }
.page-hero .eyebrow { margin-bottom: 10px; }
.page-hero h1 { max-width: 900px; margin: 0; font-size: clamp(38px, 6vw, 66px); line-height: 1.04; letter-spacing: -.055em; }
.page-hero p { max-width: 740px; margin: 14px 0 0; color: var(--muted); font-size: clamp(15px, 2vw, 18px); }
.project-feature { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); overflow: hidden; }
.project-art { position: relative; display: grid; min-height: 360px; place-items: center; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at center, #314663 0, #1c2b40 32%, #141c28 74%); }
.project-art-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(#829bb522 1px, transparent 1px), linear-gradient(90deg, #829bb522 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse, #000 5%, transparent 78%); }
.project-art::before, .project-art::after { position: absolute; width: 290px; height: 290px; border: 1px solid #7798c555; border-radius: 50%; content: ''; }
.project-art::after { width: 220px; height: 220px; border-style: dashed; }
.project-chip { position: relative; z-index: 1; display: grid; width: 154px; height: 154px; align-content: center; justify-items: center; border: 1px solid #89a9d1; border-radius: 27px; background: linear-gradient(145deg,#2c4260,#172335); box-shadow: 0 0 60px #759bd133,inset 0 1px #ffffff22; color: #d6e5fb; }
.project-chip span { font: 800 48px/1 ui-monospace,monospace; }.project-chip small { margin-top: 10px; color: #9eb2ce; font: 11px ui-monospace,monospace; letter-spacing: .12em; }
.project-art-tag { position: absolute; z-index: 1; padding: 5px 8px; border: 1px solid #7089a755; border-radius: 7px; background: #121b28cc; color: #c7d7ee; font: 10px ui-monospace,monospace; letter-spacing: .08em; }.project-art-tag--one { top: 22%; left: 17%; }.project-art-tag--two { top: 25%; right: 16%; }.project-art-tag--three { right: 18%; bottom: 20%; }
.project-copy { align-self: center; padding: clamp(24px, 4vw, 48px); }.project-copy h2 { margin: 14px 0 9px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.04em; }.project-copy p { color: var(--muted); }.project-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 22px 0; }.project-facts div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.project-facts dt { color: var(--subtle); font: 10px ui-monospace,monospace; text-transform: uppercase; }.project-facts dd { margin: 5px 0 0; color: var(--text); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: #202b3b; color: #c8d8ed; font: 650 11px ui-monospace,monospace; }.badge--active { border-color: #4d7180; background: #1c3039; color: #9bd6e5; }
.gallery-section, .library-section { margin-top: 34px; }.gallery-empty { display: flex; align-items: flex-start; gap: 15px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px; background: rgb(23 31 43 / 72%); }.gallery-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #26364d; color: #b9d0f2; font-size: 22px; }.gallery-empty strong { color: var(--text); }.gallery-empty p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.library-card { display: flex; gap: 14px; padding: 20px; }.library-mark { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border: 1px solid #526d91; border-radius: 14px; background: #26364d; color: #c4d8f5; font: 800 20px ui-monospace,monospace; }.library-card > div:last-child { min-width: 0; }.library-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.library-title-row h3 { margin: 0; font-size: 17px; }.library-card p, .library-note { color: var(--muted); font-size: 13px; }.library-card a { color: var(--green); font-size: 12px; text-decoration: none; }.library-card a:hover { text-decoration: underline; }.dev-dependencies { padding: 16px 20px; }.dev-dependencies summary { color: var(--text); font-weight: 650; cursor: pointer; }.dev-dependencies p { margin-bottom: 0; color: var(--muted); font-size: 13px; }.library-note { margin-top: 12px; }
@media (max-width: 760px) { .topbar { min-height: 70px; gap: 14px; padding-inline: 18px; }.main-nav { right: 18px; }.project-feature { grid-template-columns: 1fr; }.project-art { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }.project-facts { grid-template-columns: 1fr; }.library-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .topbar { top: 0; min-height: 62px; margin-top: 0; margin-bottom: 16px; border-radius: 0; }.search-form { align-items: stretch; }.search-form input { flex-basis: 100%; }.search-submit, .search-clear { flex: 1; justify-content: center; }.page-hero { padding-top: 28px; }.project-art { min-height: 220px; }.project-copy { padding: 21px; }.gallery-empty { padding: 16px; } }
.project-feature, .library-card, .dev-dependencies { border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, #1c2634, #151d28); box-shadow: var(--shadow-card); }

.nav-search { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.nav-search input { width: clamp(128px, 13vw, 190px); min-width: 0; height: 34px; padding: 5px 8px; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 12px; line-height: 1.2; }
.nav-search input::placeholder { color: var(--subtle); }.nav-search:focus-within { outline: 2px solid #7898c2; outline-offset: 2px; }
.nav-search button { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: #26364d; color: #d1e1f7; font-size: 20px; cursor: pointer; }
@media (max-width: 760px) { .nav-search { margin: 7px 4px 3px; padding: 4px; }.nav-search input { width: 100%; height: 38px; font-size: 14px; }.nav-search button { flex-basis: 38px; width: 38px; height: 38px; } }

@media (min-width: 761px) and (max-width: 1100px) { .topbar { gap: 8px; }.main-nav { gap: 0; }.main-nav a { padding-inline: 9px; font-size: 12px; }.nav-search input { width: 105px; } }