:root {
  --ink: #17231d;
  --ink-2: #26352c;
  --paper: #f3ead7;
  --muted: #7e837a;
  --line: #d8c9ad;
  --red: #b74635;
  --gold: #d2ad62;
  --white: #fffaf1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.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; }

.public-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; padding: 0 32px;
  background: rgba(243, 234, 215, .94);
  border-bottom: 1px solid var(--line);
}

.brand-lockup, .private-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; }
.brand-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--white); background: var(--red); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.public-nav { display: flex; align-items: center; gap: 24px; color: var(--ink-2); font-weight: 700; }

.hero { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; background: #121812; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 13, .9), rgba(11, 16, 13, .52), rgba(11, 16, 13, .16)); }
.hero-content { position: relative; z-index: 1; max-width: 760px; padding: 72px 32px 112px clamp(32px, 8vw, 128px); color: var(--white); }
.eyebrow, .section-heading span, .topbar-kicker { display: inline-block; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 18px 0; font-size: clamp(54px, 8vw, 108px); line-height: .9; }
.hero p { max-width: 620px; font-size: 20px; line-height: 1.55; }
.hero-actions, .public-footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; font-weight: 900; cursor: pointer; }
.button-primary { color: var(--white); background: var(--red); }
.button-secondary { color: var(--white); border: 1px solid rgba(255, 250, 241, .65); }
.text-link { display: inline-flex; margin-top: 14px; color: var(--red); font-weight: 900; }
.text-link.light { color: var(--gold); }

.news-band, .products-section, .upcoming-section, .studio-section { padding: 78px clamp(20px, 5vw, 72px); }
.news-band.compact, .products-section.compact { padding-top: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2, .upcoming-section h2, .studio-section h2 { margin: 6px 0 0; font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.section-link-row { display: flex; justify-content: flex-end; margin-top: 24px; }
.news-grid, .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-card, .metric-card, .admin-panel, .status-tile { background: var(--white); border: 1px solid var(--line); }
.news-card { min-height: 250px; padding: 24px; }
.news-card span, .product-card span, .record-row span, .metric-card span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.news-card h3, .product-card h3 { font-size: 26px; line-height: 1.05; }
.product-card { background: var(--ink); color: var(--white); }
.product-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #f1efe7; }
.product-card div { padding: 22px; }
.product-card p { color: #d8d6cc; line-height: 1.5; }

.upcoming-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr); gap: 48px; background: var(--ink); color: var(--white); }
.upcoming-section p, .studio-section p, .public-footer p { line-height: 1.6; }
.timeline { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 58px 1fr; gap: 8px 18px; padding: 18px; border: 1px solid rgba(255, 250, 241, .18); }
.timeline span { grid-row: span 2; color: var(--gold); font-size: 32px; font-weight: 900; }
.timeline p { margin: 0; color: #d8d6cc; }
.studio-section { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: center; gap: 44px; }
.studio-section img { width: 100%; height: auto; display: block; }
.public-footer { display: flex; justify-content: space-between; gap: 24px; padding: 36px clamp(20px, 5vw, 72px); color: var(--white); background: #0e1512; }
.public-page-head { padding: 82px clamp(20px, 5vw, 72px) 52px; color: var(--white); background: #121812; }
.public-page-head h1 { max-width: 980px; margin: 10px 0 0; font-size: clamp(46px, 7vw, 88px); line-height: .92; }
.product-head { background: #26352c; }
.news-list { display: grid; gap: 16px; max-width: 980px; }
.news-list-item { padding: 22px 24px; border: 1px solid var(--line); background: var(--white); }
.news-list-item span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.news-list-item h2 { margin: 8px 0; font-size: clamp(28px, 4vw, 46px); line-height: 1; }
.news-list-item p { max-width: 720px; color: var(--ink-2); line-height: 1.55; }
.article-hero { position: relative; display: grid; min-height: 520px; align-items: end; padding: 82px clamp(20px, 7vw, 96px); color: var(--white); background: #121812; overflow: hidden; }
.article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 24, 18, .94), rgba(18, 24, 18, .22)); }
.article-hero div { position: relative; z-index: 1; max-width: 900px; }
.article-hero h1, .product-detail h1 { margin: 14px 0; font-size: clamp(46px, 7vw, 86px); line-height: .94; }
.article-hero p, .product-detail .lead { max-width: 760px; font-size: 21px; line-height: 1.5; }
.article-body { max-width: 860px; padding: 54px clamp(20px, 7vw, 96px) 80px; }
.article-body p { color: var(--ink-2); font-size: 19px; line-height: 1.75; white-space: pre-line; }
.product-detail { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr); gap: 48px; align-items: start; padding: 72px clamp(20px, 5vw, 72px); }
.product-detail > img { width: 100%; border: 1px solid var(--line); background: var(--ink); }
.product-detail p { color: var(--ink-2); line-height: 1.65; white-space: pre-line; }
.product-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.product-facts div { padding: 14px; border: 1px solid var(--line); background: var(--white); }
.product-facts dt { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.product-facts dd { margin: 6px 0 0; font-weight: 900; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
.login-art { padding: clamp(32px, 7vw, 96px); color: var(--white); background: linear-gradient(135deg, #15231b, #3c3124 50%, #a43c2f); }
.login-art h1 { max-width: 560px; margin-top: 140px; font-size: clamp(48px, 7vw, 88px); line-height: .94; }
.login-art p { max-width: 520px; font-size: 19px; line-height: 1.55; }
.login-form { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 42px; background: var(--white); }
.login-form h2 { margin: 0; font-size: 44px; }
.login-form label { display: grid; gap: 8px; font-weight: 800; }
.login-form input { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); background: #fff; }
.error-message { padding: 12px; color: #842f24; background: #f7ddd7; border: 1px solid #e0aaa0; }

.private-shell { min-height: 100vh; display: grid; grid-template-columns: 265px 1fr; background: #f4f6f9; color: #212529; }
.private-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 0 10px 22px; color: #c2c7d0; background: #343a40; border-right: 1px solid #252a2e; box-shadow: 0 0 16px rgba(0, 0, 0, .16); }
.private-sidebar .private-brand { width: calc(100% + 20px); min-height: 57px; margin: 0 -10px; padding: 9px 14px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 400; }
.private-sidebar .brand-mark { width: 36px; height: 36px; border-radius: 50%; color: #fff; background: #0d6efd; letter-spacing: 0; }
.private-sidebar .brand-text { font-size: 19px; font-weight: 300; }
.private-sidebar nav { display: grid; gap: 4px; margin-top: 12px; }
.sidebar-link.primary, .sidebar-group { border: 0; background: transparent; }
.sidebar-link.primary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; color: #c2c7d0; border-radius: 4px; font-weight: 400; }
.sidebar-link.primary:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.sidebar-group { padding: 0; }
.sidebar-group-title { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 32px 0 10px; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 400; text-transform: none; cursor: pointer; list-style: none; }
.sidebar-group-title::-webkit-details-marker { display: none; }
.sidebar-group-title::after { content: "\203A"; position: absolute; right: 12px; top: 50%; color: #adb5bd; font-size: 18px; line-height: 1; transform: translateY(-50%) rotate(90deg); transition: transform .15s ease; }
.sidebar-group:not([open]) .sidebar-group-title::after { transform: translateY(-50%); }
.sidebar-group-title:hover { background: rgba(255, 255, 255, .1); }
.nav-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; color: #adb5bd; background: transparent; font-size: 12px; font-weight: 700; }
.sidebar-submenu { display: grid; gap: 2px; margin: 2px 0 8px; }
.sidebar-submenu a { display: block; min-height: 34px; padding: 8px 10px 8px 44px; color: #c2c7d0; border-radius: 4px; font-size: 14px; font-weight: 400; }
.sidebar-submenu a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.private-main { min-width: 0; }
.private-topbar { display: flex; justify-content: space-between; align-items: center; min-height: 57px; padding: 0 18px; background: #fff; border-bottom: 1px solid #dee2e6; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-kicker { color: #6c757d; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
.link-button { min-height: 34px; padding: 0 10px; border: 1px solid #ced4da; border-radius: 4px; color: #495057; background: #fff; font-weight: 400; cursor: pointer; }
.link-button:hover { color: #212529; background: #f8f9fa; }
.topbar-account-menu { position: relative; margin-left: auto; }
.topbar-account-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 57px; padding: 0 12px; color: #495057; list-style: none; cursor: pointer; }
.topbar-account-toggle::-webkit-details-marker { display: none; }
.topbar-account-toggle:hover, .topbar-account-menu[open] .topbar-account-toggle { color: #212529; background: #f8f9fa; }
.topbar-account-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #0d6efd; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.topbar-account-avatar.large { width: 68px; height: 68px; margin-bottom: 8px; border: 3px solid rgba(255, 255, 255, .55); font-size: 26px; }
.topbar-account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; }
.topbar-account-caret { color: #6c757d; font-size: 11px; line-height: 1; }
.topbar-account-options { position: absolute; right: 0; top: 100%; z-index: 40; display: grid; min-width: 280px; overflow: hidden; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
.topbar-account-card { display: grid; justify-items: center; gap: 2px; padding: 18px; color: #fff; background: #0d6efd; text-align: center; }
.topbar-account-card strong { max-width: 100%; overflow-wrap: anywhere; font-size: 17px; font-weight: 400; }
.topbar-account-card span:last-child { max-width: 100%; overflow-wrap: anywhere; color: rgba(255, 255, 255, .82); font-size: 13px; }
.topbar-account-options a, .topbar-account-options button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 14px; border: 0; border-top: 1px solid #f1f3f5; color: #343a40; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.topbar-account-options a span, .topbar-account-options button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #6c757d; background: #f1f3f5; font-size: 11px; font-weight: 700; }
.topbar-account-options a:hover, .topbar-account-options button:hover { color: #212529; background: #f8f9fa; }
.workspace-page { padding: 20px; }
.workspace-heading { max-width: 840px; margin-bottom: 16px; }
.private-main .eyebrow { color: #6c757d; letter-spacing: 0; }
.workspace-heading h1 { margin: 4px 0; font-size: 28px; font-weight: 400; }
.workspace-heading p { color: #6c757d; }
.private-main .button-primary { min-height: 38px; padding: 0 12px; border-radius: 4px; color: #fff; background: #0d6efd; font-weight: 400; }
.private-main .button-primary:hover { background: #0b5ed7; }
.private-main .button-secondary { min-height: 38px; padding: 0 12px; border-radius: 4px; font-weight: 400; }
.status-grid, .preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.news-card, .metric-card, .admin-panel, .status-tile { background: #fff; border: 1px solid #dee2e6; border-radius: 4px; box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2); }
.status-tile, .metric-card, .admin-panel { padding: 18px; }
.status-tile { border-left: 4px solid #0d6efd; }
.metric-info-tile { position: relative; padding-right: 48px; }
.metric-info-button { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #0dcaf0; border-radius: 4px; color: #087990; background: #cff4fc; cursor: pointer; font-family: Georgia, serif; font-size: 16px; font-style: italic; font-weight: 700; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.metric-info-button:hover, .metric-info-button:focus { color: #052c35; background: #9eeaf9; border-color: #087990; outline: 0; }
.status-tile strong { display: block; margin-top: 10px; font-size: 24px; color: #198754; font-weight: 500; }
.status-tile p { overflow-wrap: anywhere; color: #6c757d; }
.player-diagnostic-card { display: grid; align-content: start; gap: 12px; }
.player-diagnostic-card > strong { margin-top: 0; }
.diagnostic-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.diagnostic-metric { min-width: 0; padding: 10px; border: 1px solid #e9ecef; border-radius: 4px; background: #f8f9fa; }
.diagnostic-metric span { display: block; overflow-wrap: anywhere; color: #6c757d; font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: help; }
.diagnostic-metric strong { margin-top: 4px; color: #212529; font-size: 16px; font-weight: 500; }
.diagnostic-interaction { margin: 0; padding: 9px 10px; border-left: 3px solid #20c997; border-radius: 4px; background: #e9f7f3; font-size: 13px; cursor: help; }
.diagnostic-highlights { display: grid; gap: 7px; padding-top: 2px; }
.diagnostic-highlights > span { color: #6c757d; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.diagnostic-highlight-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-panel { min-height: 240px; }
.panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: -18px -18px 14px; padding: 12px 18px; border-bottom: 1px solid #dee2e6; }
.panel-heading h2 { margin: 0; font-size: 18px; font-weight: 400; }
.record-list { display: grid; gap: 10px; }
.record-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; }
.muted { color: #6c757d; }
.resource-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding-bottom: 1px; border-bottom: 1px solid #dee2e6; }
.resource-tabs a { margin-bottom: -1px; padding: 9px 12px; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #0d6efd; background: transparent; font-weight: 400; }
.resource-tabs a.active { color: #495057; background: #fff; border-color: #dee2e6 #dee2e6 #fff; }
.notice { margin: 12px 0; padding: 12px 14px; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; font-weight: 400; }
.notice.success { color: #0f5132; border-color: #badbcc; background: #d1e7dd; }
.notice.error { color: #842029; border-color: #f5c2c7; background: #f8d7da; }
.table-actions { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.data-table-wrap { overflow-x: auto; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 860px; color: #212529; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid #edf0f2; text-align: left; vertical-align: middle; }
.data-table th { position: sticky; top: 0; z-index: 1; color: #495057; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: #f8f9fa; border-bottom: 2px solid #dee2e6; }
.sortable-header { display: inline-flex; align-items: center; gap: 6px; color: #495057; }
.sortable-header:hover { color: #0d6efd; }
.table-sort-button { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; text-align: left; text-transform: inherit; cursor: pointer; }
.table-sort-button::after { content: "\2195"; color: #adb5bd; font-size: 10px; }
.table-sort-button.sorted-asc::after { content: "\2191"; color: #0d6efd; }
.table-sort-button.sorted-desc::after { content: "\2193"; color: #0d6efd; }
.table-sort-button:hover, .table-sort-button:focus { color: #0d6efd; outline: 0; }
.sort-indicator { display: inline-grid; place-items: center; width: 14px; height: 14px; color: #adb5bd; font-size: 10px; }
.sort-indicator::before { content: "\2195"; }
.sort-indicator.asc::before { content: "\2191"; color: #0d6efd; }
.sort-indicator.desc::before { content: "\2193"; color: #0d6efd; }
.data-table th:first-child { border-top-left-radius: 4px; }
.data-table th:last-child { border-top-right-radius: 4px; }
.data-table tbody tr:nth-child(even) { background: #fbfcfd; }
.data-table tbody tr:hover { background: #eef5ff; }
.data-table tbody tr.inactive-row,
.data-table tbody tr.inactive-row:nth-child(even) { background: #f5c2c7; }
.data-table tbody tr.inactive-row:hover { background: #f1aeb5; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.data-table td:last-child, .data-table th:last-child { width: 1%; white-space: nowrap; }
.row-actions { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 196px; }
.row-action-group { display: inline-flex; align-items: center; gap: 6px; }
.row-action-group form { margin: 0; }
.row-action-button { display: inline-grid; place-items: center; width: 32px; height: 31px; border: 1px solid transparent; border-radius: 4px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1; }
.row-action-button .action-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 14px; font-weight: 800; }
.row-action-button.view .action-icon::before { content: "\25CE"; }
.row-action-button.edit .action-icon::before { content: "\270E"; }
.row-action-button.activate .action-icon::before { content: "\2713"; }
.row-action-button.refresh .action-icon::before { content: "\21BB"; }
.row-action-button.deactivate .action-icon::before { content: "\2013"; }
.row-action-button.duplicate .action-icon::before { content: "\29C9"; }
.row-action-button.delete .action-icon::before { content: "\00D7"; }
.row-action-button.public-toggle .action-icon::before { content: "\25CE"; }
.row-action-button.private-toggle .action-icon::before { content: "\25CF"; }
.row-action-button.generate .action-icon::before { content: "\21E7"; }
.row-action-button.publish .action-icon::before { content: "\21A5"; }
.row-action-button.unpublish .action-icon::before { content: "\21A7"; }
.row-action-button.view { background: #0dcaf0; border-color: #0dcaf0; color: #052c35; }
.row-action-button.edit { background: #0d6efd; border-color: #0d6efd; }
.row-action-button.generate { background: #6f42c1; border-color: #6f42c1; }
.row-action-button.duplicate { background: #6f42c1; border-color: #6f42c1; }
.row-action-button.publish { background: #198754; border-color: #198754; }
.row-action-button.unpublish { color: #332701; background: #ffc107; border-color: #ffc107; }
.row-action-button.activate { background: #198754; border-color: #198754; }
.row-action-button.refresh { background: #0d6efd; border-color: #0d6efd; }
.row-action-button.deactivate { background: #ffc107; border-color: #ffc107; color: #332701; }
.row-action-button.delete { background: #dc3545; border-color: #dc3545; }
.row-action-button.public-toggle { background: #0d6efd; border-color: #0d6efd; }
.row-action-button.private-toggle { color: #495057; background: #e9ecef; border-color: #ced4da; }
.row-action-button:hover { filter: brightness(.94); }
.state-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 94px; min-height: 31px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.state-action-button .action-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; font-size: 13px; font-weight: 800; }
.state-action-button.activate { background: #198754; border-color: #198754; }
.state-action-button.deactivate { color: #332701; background: #ffc107; border-color: #ffc107; }
.state-action-button.view { color: #052c35; background: #0dcaf0; border-color: #0dcaf0; text-decoration: none; }
.state-action-button.add { background: #0d6efd; border-color: #0d6efd; }
.state-action-button.public-toggle { background: #0d6efd; border-color: #0d6efd; }
.state-action-button.private-toggle { color: #495057; background: #e9ecef; border-color: #ced4da; }
.state-action-button.activate .action-icon::before { content: "\2713"; }
.state-action-button.deactivate .action-icon::before { content: "\2013"; }
.state-action-button.view .action-icon::before { content: "\25CE"; }
.state-action-button.add .action-icon::before { content: "+"; }
.state-action-button.public-toggle .action-icon::before { content: "\25CE"; }
.state-action-button.private-toggle .action-icon::before { content: "\25CF"; }
.state-action-button:hover { filter: brightness(.94); }
.row-actions form { margin: 0; }
.admin-form { display: grid; gap: 16px; max-width: 760px; padding: 18px; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2); }
.admin-form label { display: grid; gap: 8px; color: #495057; font-weight: 600; }
.admin-form input, .admin-form select { min-height: 38px; padding: 0 12px; border: 1px solid #ced4da; border-radius: 4px; background: #fff; }
.admin-form .checkbox-field { display: flex; align-items: center; gap: 10px; }
.admin-form .checkbox-field input { width: 18px; height: 18px; min-height: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-secondary.dark { color: #495057; border-color: #ced4da; background: #fff; }
.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: none; }
.detail-heading p { margin: 0; color: #6c757d; font-weight: 400; overflow-wrap: anywhere; }
.page-action-row { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.result-insight-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.result-insight-grid .detail-card { height: 100%; margin-bottom: 0; }
.detail-card { margin-bottom: 18px; padding: 18px; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2); }
.detail-card-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -18px -18px 18px; padding: 12px 18px; border-bottom: 1px solid #dee2e6; }
.detail-card-title h2 { margin: 0; font-size: 18px; font-weight: 400; }
.card-title-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.plain-data { display: grid; gap: 8px; min-width: 0; }
.plain-data.metric-info-tile { padding: 0 44px 0 0; }
.plain-data .metric-info-button { top: 0; right: 0; }
.plain-data span { color: #6c757d; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.plain-data strong { color: #212529; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.helper-copy { margin: 0 0 14px; color: #6c757d; font-size: 14px; line-height: 1.45; }
.turn-distribution-panel { position: relative; margin-top: 22px; padding: 16px 16px 12px 44px; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.turn-distribution-panel.standalone { margin-top: 0; }
.turn-distribution-chart { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; min-height: 260px; }
.turn-distribution-y-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 20px 0 24px; color: #6c757d; font-size: 12px; font-weight: 700; }
.turn-distribution-plot { display: flex; align-items: end; gap: 8px; min-width: 0; min-height: 240px; padding: 8px 8px 0; overflow-x: auto; border-left: 1px solid #adb5bd; border-bottom: 1px solid #adb5bd; background: repeating-linear-gradient(to top, transparent 0, transparent 47px, #e9ecef 48px); }
.turn-distribution-column { display: grid; grid-template-rows: 20px 1fr 20px; justify-items: center; align-items: end; flex: 1 0 34px; min-width: 34px; max-width: 72px; height: 100%; color: #495057; font-size: 12px; font-weight: 700; }
.turn-distribution-column strong { align-self: start; color: #212529; font-size: 11px; font-weight: 700; }
.turn-distribution-column span { color: #6c757d; font-size: 12px; }
.turn-distribution-bar-wrap { display: flex; align-items: end; width: 100%; height: 180px; }
.turn-distribution-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #0d6efd; }
.turn-distribution-axis-label { color: #6c757d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.turn-distribution-axis-label.y-axis { position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.turn-distribution-axis-label.x-axis { margin: 8px 0 0 52px; text-align: center; }
.group-highlight { display: inline-flex; width: fit-content; margin-top: 0; padding: 3px 7px; border-radius: 4px; color: #0a3622; background: #d1e7dd; font-size: 12px; font-weight: 600; }
.grouped-run-banner { border-color: #9ec5fe; background: #f8fbff; }
.article-body-card { padding-bottom: 0; }
.body-tab-actions { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid #ced4da; border-radius: 4px; background: #f8f9fa; }
.body-tab-button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 3px; color: #495057; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; }
.body-tab-button.active { color: #fff; background: #0d6efd; }
.article-body-preview { min-height: 220px; margin: 0 -18px; padding: 18px 22px 22px; color: #212529; background: #fff; line-height: 1.65; }
.article-body-preview h2, .article-body-preview h3, .article-body-preview h4 { margin: 20px 0 10px; line-height: 1.2; font-weight: 500; }
.article-body-preview h2:first-child, .article-body-preview h3:first-child, .article-body-preview h4:first-child { margin-top: 0; }
.article-body-preview p { margin: 0 0 14px; max-width: 860px; }
.article-body-preview blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid #0d6efd; color: #495057; background: #f8f9fa; }
.article-body-preview code { padding: 2px 5px; border-radius: 3px; color: #d63384; background: #f8f9fa; }
.article-body-preview a { color: #0d6efd; text-decoration: underline; }
.article-body-preview img { display: block; max-width: 100%; height: auto; margin: 16px 0; border: 1px solid #dee2e6; border-radius: 4px; }
.article-body-raw { min-height: 220px; margin: 0 -18px; padding: 18px 22px 22px; overflow: auto; border: 0; border-radius: 0 0 4px 4px; color: #212529; background: #f8f9fa; white-space: pre-wrap; }
.article-body-raw code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.6; }
.role-list, .feature-access-list { display: grid; gap: 10px; }
.role-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.role-item p { margin: 5px 0 0; color: #6c757d; }
.detail-card-title .button-primary:disabled { cursor: not-allowed; opacity: .65; }
.role-item-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.role-item-actions form { margin: 0; }
.modal-dialog { width: min(500px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 3px; color: #212529; background: transparent; box-shadow: none; }
.deck-duplicate-modal { width: min(900px, calc(100vw - 32px)); }
.image-modal-dialog { width: min(960px, calc(100vw - 32px)); }
.queue-run-modal { width: min(760px, calc(100vw - 32px)); }
.modal-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.admin-modal-content { overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 3px 9px rgba(0, 0, 0, .5); }
.admin-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.admin-modal-header h3 { margin: 0; color: #212529; font-size: 18px; font-weight: 400; line-height: 1.4; }
.admin-modal-close { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; color: #000; background: transparent; cursor: pointer; font-size: 28px; font-weight: 700; line-height: 1; opacity: .45; }
.admin-modal-close:hover { opacity: .75; }
.admin-modal-body { padding: 15px; }
.modal-help-list { margin: 8px 0 12px; padding-left: 20px; color: #495057; }
.modal-help-list li { margin: 5px 0; }
.product-media-detail { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 18px; padding: 14px; border: 1px solid #e5e5e5; border-radius: 4px; background: #f8f9fa; }
.product-media-detail span { display: block; margin-bottom: 4px; color: #6c757d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.product-thumbnail-button { display: block; width: 160px; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid #dee2e6; border-radius: 4px; background: #fff; cursor: zoom-in; }
.product-thumbnail-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-image-modal-body { padding: 0; background: #111; }
.product-image-modal-body img { display: block; width: 100%; max-height: calc(100vh - 160px); object-fit: contain; background: #111; }
.form-group { display: grid; gap: 7px; margin: 0; color: #212529; font-weight: 700; }
.form-group span { font-size: 14px; }
.form-control { display: block; width: 100%; min-height: 38px; padding: 6px 12px; border: 1px solid #ced4da; border-radius: 4px; color: #495057; background: #fff; background-clip: padding-box; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-control:focus { border-color: #80bdff; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(0, 123, 255, .25); }
.select2-lite { position: relative; display: block; }
.select2-lite-search { padding-right: 34px; }
.select2-lite::after { content: "\25BE"; position: absolute; top: 10px; right: 12px; color: #6c757d; font-size: 12px; pointer-events: none; }
.select2-lite-menu { position: absolute; z-index: 30; display: none; width: 100%; max-height: 240px; overflow: auto; border: 1px solid #80bdff; border-top: 0; border-radius: 0 0 4px 4px; background: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.select2-lite-menu.open { display: grid; }
.select2-lite-option { min-height: 34px; padding: 7px 12px; border: 0; color: #212529; background: #fff; text-align: left; cursor: pointer; }
.select2-lite-option:hover { color: #fff; background: #0d6efd; }
.select2-lite-empty { padding: 9px 12px; color: #6c757d; font-weight: 400; }
.queue-run-modal .select2-lite-menu { max-height: 310px; }
.queue-run-modal .select2-lite-option { align-items: center; width: 100%; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.upload-field { display: grid; gap: 8px; }
.upload-field img { width: min(280px, 100%); height: auto; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #495057; }
.form-grid input, .form-grid select { min-width: 0; }
.compact-form-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.modal-field-wide { grid-column: 1 / -1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; color: #495057; font-weight: 600; }
.checkbox-field input { width: 16px; height: 16px; }
.admin-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 15px; border-top: 1px solid #e5e5e5; background: #fff; }
.duplicate-version-list { display: grid; gap: 12px; margin-top: 16px; }
.duplicate-version-card { display: grid; gap: 12px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px; background: #f8f9fa; }
.duplicate-version-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #495057; font-size: 12px; }
.duplicate-version-summary strong { color: #212529; font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; color: #fff; background: #198754; font-size: 12px; font-weight: 600; }
.status-pill.inactive { color: #332701; background: #ffc107; }
.status-pill.revoked { background: #dc3545; }
.status-pill.neutral { color: #495057; background: #e9ecef; }
.status-pill.public-access { background: #0d6efd; }
.status-pill.private-access { color: #495057; background: #e9ecef; }
.empty-state { margin: 0; padding: 18px; color: #6c757d; border: 1px dashed #ced4da; border-radius: 4px; background: #f8f9fa; }
.section-copy { max-width: 920px; margin: 0 0 14px; color: #6c757d; line-height: 1.5; }
.interaction-section { display: grid; gap: 10px; margin-top: 18px; }
.interaction-section h3 { margin: 0; color: #343a40; font-size: 16px; font-weight: 600; }
.interaction-table { min-width: 980px; }
.watchlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.watchlist-grid > div { min-width: 0; padding: 14px; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.per-card-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.per-card-metric-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; height: 100%; padding: 14px; border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.per-card-metric-card header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; }
.per-card-metric-card h3 { margin: 0 0 4px; color: #212529; font-size: 18px; font-weight: 600; }
.per-card-metric-card code, .per-card-list code { color: #6c757d; font-size: 12px; overflow-wrap: anywhere; }
.per-card-chip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.per-card-chip-row span { display: grid; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid #e9ecef; border-radius: 4px; background: #fff; color: #6c757d; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.per-card-chip-row strong { color: #212529; font-size: 14px; font-weight: 700; }
.per-card-list { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; }
.per-card-list h4 { margin: 0; color: #343a40; font-size: 14px; font-weight: 700; }
.per-card-mini-table-wrap { max-height: 255px; min-height: 0; overflow: auto; border: 1px solid #e9ecef; border-radius: 4px; background: #fff; }
.per-card-mini-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.per-card-mini-table th, .per-card-mini-table td { padding: 8px 10px; border-bottom: 1px solid #edf0f2; text-align: left; vertical-align: top; }
.per-card-mini-table th { position: sticky; top: 0; z-index: 1; color: #6c757d; background: #f8f9fa; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.per-card-mini-table th:first-child, .per-card-mini-table td:first-child { width: 56%; }
.per-card-mini-table th:not(:first-child), .per-card-mini-table td:not(:first-child) { width: 22%; text-align: right; }
.per-card-mini-table tr:last-child td { border-bottom: 0; }
.per-card-mini-table td strong { display: block; color: #212529; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.per-card-mini-table td code { display: block; margin-top: 2px; }
.watchlist-grid p { color: #495057; line-height: 1.5; }
.watchlist-grid ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 18px; }
.watchlist-grid li { overflow-wrap: anywhere; }
.feature-access { border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; }
.feature-access.inactive-feature { border-color: #dc3545; background: #f5c2c7; }
.feature-access.inactive-feature summary { background: #f5c2c7; }
.feature-access summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 0 14px; cursor: pointer; font-weight: 900; }
.feature-access summary small { color: #6c757d; font-size: 12px; text-transform: uppercase; }
.feature-summary-title, .feature-summary-meta { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.feature-summary-title { flex-wrap: wrap; }
.feature-summary-title strong { overflow-wrap: anywhere; }
.feature-summary-meta { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.feature-summary-actions { display: inline-flex; align-items: center; gap: 6px; }
.feature-summary-actions form { margin: 0; }
.icon-action-button { display: inline-grid; place-items: center; width: 31px; height: 31px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; line-height: 1; }
.icon-action-button .action-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 16px; font-weight: 700; }
.icon-action-button.refresh { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.icon-action-button.trash { color: #fff; background: #dc3545; border-color: #dc3545; }
.icon-action-button.add { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.icon-action-button.activate { color: #fff; background: #198754; border-color: #198754; }
.icon-action-button.deactivate { color: #332701; background: #ffc107; border-color: #ffc107; }
.icon-action-button.refresh .action-icon::before { content: "\21BB"; }
.icon-action-button.add .action-icon::before { content: "+"; }
.icon-action-button.activate .action-icon::before { content: "\2713"; }
.icon-action-button.deactivate .action-icon::before { content: "\2013"; }
.icon-action-button.trash .action-icon { position: relative; width: 14px; height: 16px; }
.icon-action-button.trash .action-icon::before { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; bottom: 1px; border: 2px solid #fff; border-top: 0; border-radius: 0 0 2px 2px; }
.icon-action-button.trash .action-icon::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 2px; background: #fff; box-shadow: 4px -2px 0 -1px #fff; }
.icon-action-button:hover { filter: brightness(.94); }
.feature-panel-actions { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid #dee2e6; background: #fff; }
.feature-panel-actions form { margin: 0; }
.feature-table-wrap { overflow-x: auto; border-top: 1px solid #dee2e6; background: #fff; }
.data-table.compact { min-width: 620px; }
.data-table.outcome-rate-table { min-width: 420px; }
.data-table.compact th, .data-table.compact td { padding: 10px 12px; }
.table-subtext { display: block; margin-top: 3px; color: #6c757d; font-size: 12px; }
.acl-actions { min-width: 220px; }
.inline-power-form { display: flex; align-items: center; width: min(100%, 260px); margin: 0; }
.inline-power-form input[name="powers"] { width: 100%; min-height: 32px; padding: 0 9px; border: 1px solid #ced4da; border-radius: 4px; background: #fff; color: #212529; font: inherit; }
.inline-power-form input[name="powers"][readonly] { color: #6c757d; background: #f8f9fa; }
.list-command-row { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.list-command-row > .button-primary { flex-shrink: 0; }
.list-command-row .tanuki-list-tools { flex: 1; margin: 0; }
.tanuki-list-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.tanuki-filter-button { flex-shrink: 0; min-height: 38px; }
.tanuki-search-form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tanuki-search-input { flex: 1; min-width: 240px; max-width: none; }
.tanuki-filter-dialog { width: min(720px, calc(100vw - 32px)); }
.tanuki-filter-dialog .admin-modal-content { width: 100%; max-height: calc(100vh - 64px); overflow-x: hidden; overflow-y: auto; }
.tanuki-filter-dialog .button-primary,
.tanuki-filter-dialog .button-secondary { min-height: 38px; border-radius: 4px; }
.tanuki-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 0; }
.tanuki-pagination-summary { display: flex; gap: 10px; color: #6c757d; font-size: 13px; font-weight: 700; }
.tanuki-pagination-actions { display: flex; align-items: center; gap: 6px; }
.pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid #ced4da; border-radius: 4px; color: #495057; background: #fff; font-weight: 800; text-decoration: none; }
.pagination-page.active { color: #fff; border-color: #212529; background: #212529; }
.tanuki-pagination .disabled { pointer-events: none; opacity: .45; }
.checkbox-option { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #343a40; }
.checkbox-option input { width: 16px; height: 16px; }
.pb-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pb-info-grid div { display: grid; gap: 5px; min-width: 0; padding: 10px 12px; border: 1px solid #e9ecef; border-radius: 4px; background: #f8f9fa; }
.pb-info-grid span:first-child { color: #6c757d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.pb-info-grid strong, .pb-info-grid code { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .public-header, .public-footer { align-items: flex-start; flex-direction: column; }
  .public-nav { width: 100%; overflow-x: auto; gap: 18px; }
  .news-grid, .product-grid, .upcoming-section, .studio-section, .login-page, .private-shell, .status-grid, .preview-grid, .detail-grid, .result-insight-grid, .product-detail, .product-facts { grid-template-columns: 1fr; }
  .detail-heading, .role-item { flex-direction: column; align-items: stretch; }
  .detail-card-title { align-items: stretch; flex-direction: column; }
  .card-title-actions { align-items: stretch; flex-direction: column; }
  .role-item-actions { justify-content: space-between; }
  .admin-modal-footer { flex-direction: column-reverse; }
  .list-command-row, .tanuki-list-tools, .tanuki-search-form { align-items: stretch; flex-direction: column; }
  .tanuki-pagination { align-items: stretch; flex-direction: column; }
  .tanuki-pagination-actions { flex-wrap: wrap; }
  .tanuki-search-input { max-width: none; }
  .modal-form-grid, .form-grid, .pb-info-grid, .watchlist-grid, .per-card-metric-grid, .per-card-chip-row { grid-template-columns: 1fr; }
  .product-media-detail { grid-template-columns: 1fr; }
  .product-thumbnail-button { width: 100%; }
  .private-sidebar { position: static; height: auto; }
  .private-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 720px; }
}