/* Google Material inspired presentation. Local fonts; no external requests. */
:root {
  --bg: #f8fafd;
  --panel: #f0f4f9;
  --soft: #e8f0fe;
  --ink: #202124;
  --muted: #5f6368;
  --line: #e0e3e7;
  --primary: #0b57d0;
  --hover: #d3e3fd;
  --green: #188038;
  --card: #fff;
  --shadow: 0 2px 6px #3c404326, 0 8px 24px #3c404310;
  --sans: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
  --hero-bg: #eaf2ff;
}
:root[data-theme="dark"] {
  --bg: #131314;
  --panel: #1e1f20;
  --soft: #23344e;
  --ink: #e3e3e3;
  --muted: #b4b8bf;
  --line: #3c4043;
  --primary: #a8c7fa;
  --hover: #293e5c;
  --green: #81c995;
  --card: #1e1f20;
  --shadow: 0 4px 20px #0005;
  --hero-bg: #202f46;
}
body {font-size: 14px; letter-spacing: .05px;}
::selection {background: var(--hover); color: var(--ink);}
:focus-visible {outline: 2px solid var(--primary); outline-offset: 3px;}
.sidebar {background: var(--bg); border: 0; width: 264px;}
.brand {padding: 27px 24px 25px; font-size: 21px; font-weight: 500; letter-spacing: -.6px;}
.brand img {width: 38px; height: 38px;}
.brand span small {font-size: 9px; letter-spacing: 1.65px; margin-top: 5px;}
.sidebar-search {background: var(--panel); border: 0; border-radius: 28px; padding: 13px 15px; margin: 0 16px 20px; font-size: 12px;}
.sidebar-search kbd {background: var(--card); padding: 1px 5px; border: 0;}
.nav-primary {padding: 0 12px;}
.nav-item {min-height: 46px; border-radius: 28px; padding: 11px 18px; color: var(--muted); font-size: 13px; margin-bottom: 3px;}
.nav-item.active {background: var(--hover); color: var(--primary); font-weight: 600;}
.nav-item .badge {background: transparent; color: inherit; font-size: 11px;}
.side-divider {margin: 21px 26px 18px;}
.side-heading {font-size: 11px; letter-spacing: .5px; padding: 0 27px;}
.side-scroll {padding: 0 12px 18px;}
.category-label {font-size: 11px; margin: 17px 15px 7px;}
.doc-nav {border-radius: 22px; color: var(--muted); padding: 9px 15px 9px 20px;}
.doc-nav svg {color: var(--muted);}
.side-bottom {margin: 0 25px; padding: 18px 0;}
.side-bottom small {font-size: 11px;}
.workspace {margin-left: 264px; padding: 0 16px 16px 0;}
.topbar {background: var(--bg); border: 0; height: 80px; padding: 0 30px;}
.breadcrumbs {font-size: 13px;}
.header-actions {gap: 14px;}
.local-label {font-size: 12px;}
.icon-button, .search-trigger {width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;}
.mobile-menu {display: none;}
.avatar {width: 34px; height: 34px; background: var(--hover); color: var(--primary); font-size: 14px;}
main {background: var(--card); border-radius: 28px; min-height: calc(100vh - 96px); padding: 38px 40px 70px; max-width: 1500px;}
.overline {font-size: 10px; letter-spacing: 1.6px; font-weight: 600; margin-bottom: 12px;}
.overline .line {height: 4px; width: 24px; border-radius: 8px;}
.page-heading {margin-bottom: 28px; gap: 24px;}
.page-heading h1 {font-size: 32px; font-weight: 500; letter-spacing: -.9px; line-height: 1.45;}
.page-heading p {font-size: 13px; line-height: 1.8; margin-top: 9px;}
.page-heading .actions {padding-top: 28px;}
.button {border-radius: 24px; border-color: var(--line); padding: 10px 18px; font-size: 12px; font-weight: 600; min-height: 40px;}
.button:hover {background: var(--soft); border-color: var(--primary);}
.button.primary {background: var(--primary); border-color: var(--primary); color: #fff;}
.button.primary:hover {background: #0842a0; border-color: #0842a0; box-shadow: 0 2px 5px #0b57d033;}
.button.small {padding: 8px 14px; font-size: 11px; min-height: 36px;}
.hero, :root[data-theme="dark"] .hero {background: var(--hero-bg); border: 0; border-radius: 24px; padding: 32px 36px; min-height: 238px; margin-bottom: 24px;}
.hero h2, :root[data-theme="dark"] .hero h2 {color: var(--ink); font-size: 29px; font-weight: 500; line-height: 1.6; letter-spacing: -.6px;}
.hero p, :root[data-theme="dark"] .hero p {color: var(--muted); font-size: 13px;}
.hero a {color: var(--primary); font-size: 13px;}
.hero .pill, :root[data-theme="dark"] .hero .pill {background: var(--card); color: var(--primary); border: 0; padding: 5px 11px; font-size: 11px;}
.hero-art {width: 240px; height: 174px;}
.orb {width: 164px; height: 164px; border-color: #8ab4f8; left: 40px;}
.orb:before {border-color: #a8c7fa;}
.orb:after {border-color: #669df6;}
.art-card {background: var(--card); border: 0; box-shadow: var(--shadow); border-radius: 18px; width: 137px; height: 100px; top: 40px; left: 52px; padding: 18px;}
.art-card svg {color: var(--primary);}
.art-card i {background: var(--hover); height: 5px;}
.art-node {border: 0; border-radius: 50%; width: 35px; height: 35px; box-shadow: var(--shadow);}
.art-node.n1 {background: #fce8e6; top: 14px;}
.art-node.n1 svg {color: #c5221f;}
.art-node.n2 {background: #fef7e0; right: 4px; top: 49px;}
.art-node.n2 svg {color: #b06000;}
.art-node.n3 {background: #e6f4ea; left: 156px;}
.art-node.n3 svg {color: #137333;}
.hero-art .sparkle {color: #4285f4;}
.stats-row {gap: 14px; margin-bottom: 30px;}
.stat {background: var(--bg); border: 0; border-radius: 20px; padding: 20px 17px; gap: 12px;}
.stat-icon {width: 40px; height: 40px; border-radius: 50%;}
.stat:nth-child(2) .stat-icon {background: #e6f4ea; color: #137333;}
.stat:nth-child(3) .stat-icon {background: #fef7e0; color: #b06000;}
.stat:nth-child(4) .stat-icon {background: #fce8e6; color: #c5221f;}
.stat strong {font-size: 25px; font-weight: 500;}
.stat p {font-size: 11px;}
.section-header h2 {font-size: 20px; font-weight: 500;}
.section-header a {font-size: 12px; color: var(--primary);}
.filter {font-size: 12px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 20px; margin: 3px 0; color: var(--muted);}
.filter.active {background: var(--hover); border-color: var(--hover); color: var(--primary); font-weight: 600;}
.filter:hover {border-color: var(--primary);}
#category-filters {display: flex; gap: 6px; flex-wrap: wrap;}
.inline-search {background: var(--panel); border: 0; border-radius: 24px; padding: 11px 15px;}
.inline-search input {font-size: 12px;}
.resource-grid, .model-grid {gap: 18px;}
.resource-card, .model-card {border-radius: 20px; padding: 24px; border-color: var(--line);}
.resource-card:hover, .model-card:hover {transform: none; box-shadow: var(--shadow); border-color: #a8c7fa;}
.resource-icon {border-radius: 12px; width: 40px; height: 40px;}
.resource-card h3 {font-size: 16px; font-weight: 600;}
.resource-card .description, .model-card .description {font-size: 12px; line-height: 1.9;}
.bookmark {border-radius: 50%; width: 30px; height: 30px;}
.bookmark.saved svg {fill: var(--hover);}
.tag {padding: 3px 8px; border-radius: 7px; font-size: 10px;}
.card-bottom {font-size: 11px; padding-top: 15px;}
.card-bottom .read-link {font-size: 11px;}
.learning-banner, .model-intro, .calculator {background: var(--panel); border: 0; border-radius: 20px; padding: 22px 24px;}
.learning-banner h3 {font-size: 14px;}
.learning-banner p, .model-intro p {font-size: 12px;}
.model-intro strong {font-size: 13px; font-weight: 600;}
.model-intro .date-chip {border: 0; border-radius: 20px; padding: 7px 11px;}
.model-filters {padding: 6px 0 20px;}
.model-filters .row {gap: 7px; margin-top: 7px;}
.filter-title {font-size: 11px; width: 36px;}
.currency-filters {gap: 7px;}
.currency-filters small {font-size: 11px;}
.result-info {font-size: 12px; margin-bottom: 20px; gap: 12px; flex-wrap: wrap;}
.result-info select {font-size: 11px; padding: 8px 12px; border-radius: 20px; color: var(--ink); max-width: 100%;}
.model-card.selected {background: var(--bg); box-shadow: 0 0 0 1px var(--primary);}
.model-logo {width: 34px; height: 34px; border-radius: 11px;}
.model-brand {font-size: 12px; gap: 10px; margin-bottom: 18px;}
.model-brand .status {border-radius: 16px; padding: 3px 8px; font-size: 10px;}
.status.preview {background: #fef7e0; color: #8c5400; border-color: transparent;}
.model-card h3 {font-size: 20px; font-weight: 500; letter-spacing: -.3px;}
.model-card .tier {font-size: 11px; margin-bottom: 12px;}
.model-specs {padding-top: 17px; gap: 12px;}
.model-specs span {font-size: 10px;}
.model-specs strong {font-size: 19px; font-weight: 500; line-height: 1.9;}
.model-card-footer {margin-top: 18px; gap: 7px;}
.model-card-footer .button {font-size: 11px; min-height: 36px; padding: 8px 9px;}
.model-card-footer .selected-button {background: var(--hover); border-color: var(--hover); color: var(--primary);}
.source-note {font-size: 11px; margin-top: 26px;}
.comparison-floating {left: calc(264px + (100% - 280px)/2); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 14px 20px;}
.compare-chip {border-color: var(--line); background: var(--card); border-radius: 20px; padding: 6px 11px;}
.table-wrap {border-radius: 20px;}
.compare-table {font-size: 12px;}
.compare-table th:first-child, .compare-table td:first-child {background: var(--bg);}
.compare-table th {background: var(--panel);}
.compare-table th h3 {font-size: 18px; font-weight: 500;}
.compare-table .model-brand {margin-bottom: 10px;}
.calculator h2 {font-size: 20px; font-weight: 500;}
.calculator>p, .calculator label {font-size: 12px;}
.calculator input {border-radius: 12px; padding: 12px; font-size: 14px;}
.cost-result {border: 0; border-radius: 16px; padding: 18px;}
.cost-result span, .cost-result small {font-size: 11px;}
.article-header h1 {font-size: 32px; font-weight: 500;}
.article-body {font-size: 15px; line-height: 2;}
.article-body h2 {font-size: 23px; font-weight: 500;}
.article-body h3 {font-size: 19px;}
.article-body pre {border-radius: 16px; font-size: 13px;}
.article-table-wrap {max-width: 100%; overflow-x: auto; margin: 20px 0 28px; border: 1px solid var(--line); border-radius: 16px;}
.article-table {width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; line-height: 1.8;}
.article-table caption {text-align: left; padding: 14px 18px; font-weight: 600; color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--line);}
.article-table th, .article-table td {padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);}
.article-table thead th {color: var(--muted); font-size: 12px; background: var(--bg); white-space: nowrap;}
.article-table tbody th {font-weight: 600; min-width: 95px;}
.article-table tr:last-child th, .article-table tr:last-child td {border-bottom: 0;}
.article-table tr>*:last-child {border-right: 0;}
.article-table tbody tr:hover {background: var(--bg);}
.article-code {margin: 18px 0 24px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel);}
.article-code figcaption {padding: 10px 18px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line);}
.article-body .article-code pre {margin: 0; border: 0; border-radius: 0;}
.article-body blockquote {border-radius: 0 14px 14px 0;}
.article-notice {background: var(--panel); border: 0; border-radius: 14px; font-size: 12px; padding: 15px 18px;}
.article-meta {font-size: 11px;}
.article-toc a, .article-toc h3 {font-size: 12px;}
.article-toc a.active {background: var(--soft); border-radius: 12px; padding: 4px 8px;}
.source-card, .sources-details {border-radius: 20px; background: var(--card);}
.source-card {font-size: 14px; padding: 22px;}
.source-card p, .sources-details p, .sources-details li {font-size: 12px;}
.sources-details h2 {font-size: 18px;}
dialog {border: 0; border-radius: 28px;}
dialog::backdrop {background: #20212466;}
.model-dialog-content {padding: 32px;}
.model-dialog-content h2 {font-size: 28px; font-weight: 500;}
.model-dialog-content h3 {font-size: 14px;}
.model-dialog-content p, .model-dialog-content li {font-size: 13px;}
.search-result {border-radius: 16px;}
.search-result h3 {font-size: 13px;}
.search-result p {font-size: 11px;}
.search-result mark {background: var(--hover); color: var(--primary);}
.toast {border-radius: 24px;}
:root[data-theme="dark"] .button.primary {color: #062e6f;}
:root[data-theme="dark"] .button.primary:hover {background: #c2d7fb; border-color: #c2d7fb;}
:root[data-theme="dark"] .hero-art {opacity: 1;}
:root[data-theme="dark"] .model-logo {background: var(--soft); color: var(--primary);}
:root[data-theme="dark"] .status.preview {background: #443719; color: #fdd663;}
@media (min-width: 1600px) {main {padding: 44px 56px 80px;}}
@media (max-width: 1180px) {
  main {padding: 30px 28px 80px;}
  .page-heading h1 {font-size: 28px;}
  .hero {padding: 28px;}
  .hero h2 {font-size: 26px;}
  .hero-art {width: 200px;}
  .stat {padding: 17px 12px; gap: 9px;}
  .stat-icon {width: 34px; height: 34px;}
}
@media (max-width: 900px) {
  .sidebar {width: 230px;}
  .workspace {margin-left: 230px; padding-right: 12px;}
  .brand {padding-left: 19px; font-size: 19px;}
  .topbar {height: 70px; padding: 0 20px;}
  .page-heading .actions {padding-top: 0;}
  .comparison-floating {left: calc(230px + (100% - 242px)/2); width: calc(100% - 260px);}
}
@media (max-width: 700px) {
  .sidebar {width: 264px;}
  .workspace {margin-left: 0; padding: 0 8px 8px;}
  .topbar {height: 64px; padding: 0 8px;}
  .mobile-menu {display: inline-flex; flex-shrink: 0;}
  .breadcrumbs {font-size: 12px;}
  .header-actions {gap: 2px;}
  main {border-radius: 22px; min-height: calc(100vh - 72px); padding: 26px 20px 105px;}
  .page-heading {gap: 18px; margin-bottom: 24px;}
  .page-heading h1 {font-size: 27px;}
  .page-heading p {font-size: 12px;}
  .page-heading .actions {padding-top: 0; flex-wrap: wrap;}
  .hero, :root[data-theme="dark"] .hero {padding: 24px; min-height: auto; border-radius: 20px;}
  .hero h2 {font-size: 25px;}
  .hero p {font-size: 12px;}
  .hero p br {display: none;}
  .stats-row {gap: 10px;}
  .stat {padding: 16px 11px;}
  .stat strong {font-size: 23px;}
  .stat p {font-size: 10px;}
  .stat-icon {width: 32px; height: 32px; flex-shrink: 0;}
  .section-header {gap: 12px; align-items: flex-start;}
  .section-header h2 {font-size: 18px;}
  .section-header a {font-size: 11px;}
  .filter {font-size: 11px; padding: 7px 11px;}
  .model-filters .row {gap: 5px;}
  .filter-title {width: 30px; margin-right: 2px;}
  .currency-filters small {flex-basis: 100%; margin: 4px 0 0 34px;}
  .resource-card, .model-card {padding: 22px;}
  .model-intro {padding: 18px; gap: 10px;}
  .model-intro p {flex: 1 1 calc(100% - 35px); min-width: 0;}
  .model-intro .date-chip {margin-left: 35px;}
  .model-card h3 {font-size: 22px;}
  .model-card-footer .button {font-size: 12px;}
  .learning-banner, .calculator {padding: 20px;}
  .comparison-floating {left: 50%; width: calc(100% - 20px); bottom: 10px; border-radius: 22px; padding: 12px;}
  .comparison-floating .compare-chip {font-size: 9px; border-radius: 16px;}
  .comparison-floating .button.primary {font-size: 11px;}
  .article-header h1 {font-size: 27px;}
  .article-body {font-size: 14px;}
  .article-body h2 {font-size: 21px;}
  .model-dialog-content {padding: 24px;}
  .footer {font-size: 10px;}
}
@media print {
  .workspace {margin: 0; padding: 0;}
  main {padding: 0; border-radius: 0;}
  body, main {background: #fff; color: #000;}
}