@font-face{ font-family: "Adwaita Sans"; src: url("../fonts/adwaita-sans.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap;} @font-face{ font-family: "Adwaita Mono"; src: url("../fonts/adwaita-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;}:root{ color-scheme: dark; --page: #0b0d10; --card: #14171c; --raised: #171b21; --row: #1a1e24; --row-hover: #1f242b; --input: #0f1216; --edge: #252b33; --edge-strong: #323942; --edge-hover: #3a424d; --edge-head: #1e232a; --text: #f4f6f8; --text-bright: #cdd4dd; --text-secondary: #98a2b0; --text-muted: #8a94a3; --accent: #4ade80; --accent-hover: #6ee79a; --accent-active: #3cc972; --on-accent: #06170e; --accent-soft: rgba(74, 222, 128, 0.12); --accent-edge: rgba(74, 222, 128, 0.45); --danger: #f87171; --danger-edge: rgba(248, 113, 113, 0.5); --warn: #fbbf24; --warn-edge: rgba(251, 191, 36, 0.45); --sans: "Adwaita Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: "Adwaita Mono", ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --r-panel: 12px; --r-row: 10px; --r-control: 8px; --r-mark: 4px; --r-pill: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --t-display: 2.25rem; --t-title: 1.5rem; --t-section: 1.0625rem; --t-body: 0.9375rem; --t-meta: 0.8125rem; --t-micro: 0.75rem; --shell: 76rem; --gutter: clamp(1rem, 4vw, 2.5rem); --step: 110ms;} *{ box-sizing: border-box;} body{ margin: 0; min-height: 100vh; background: var(--page); color: var(--text); font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;}} .shell{ width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter);} .shell-site{ display: flex; flex-direction: column; min-height: 100vh;} .masthead{ position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--edge-head); background: var(--page);} .masthead-inner{ display: flex; align-items: center; gap: var(--s-3); position: relative; height: 60px;} .brand{ display: flex; align-items: baseline; order: 1; text-decoration: none; flex: 0 0 auto;} .brand-name{ font-size: var(--t-body); font-weight: 600; color: var(--text); white-space: nowrap;} .brand-dim{ font-weight: 400; color: var(--text-muted);} .brand:hover .brand-dim{ color: var(--text-secondary);} .masthead-nav{ display: flex; align-self: stretch; order: 2; flex: 1 1 auto; min-width: 0; margin-left: var(--s-4);} .nav-toggle{ position: absolute; order: 4; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;} .nav-toggle-button{ display: none; place-items: center; order: 4; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--edge-strong); border-radius: var(--r-control); background: var(--input); cursor: pointer;} .nav-toggle-button span, .nav-toggle-button span::before, .nav-toggle-button span::after{ display: block; width: 16px; height: 1px; background: var(--text-bright);} .nav-toggle-button span{ position: relative;} .nav-toggle-button span::before, .nav-toggle-button span::after{ content: ""; position: absolute; left: 0;} .nav-toggle-button span::before{ top: -5px;} .nav-toggle-button span::after{ top: 5px;} .nav-toggle:focus-visible+ .nav-toggle-button{ outline: 2px solid var(--accent); outline-offset: 2px;} .nav-link{ position: relative; display: flex; align-items: center; padding: 0 var(--s-3); color: var(--text-muted); font-size: var(--t-meta); text-decoration: none; white-space: nowrap; transition: color var(--step) linear, background-color var(--step) linear;} .nav-link:hover{ color: var(--text-bright); background: var(--card);} .nav-link.is-here{ color: var(--text);} .nav-link.is-here::after{ content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; background: var(--accent);} .nav-menu{ position: relative; display: flex; align-self: stretch;} .nav-menu-summary{ cursor: pointer; list-style: none; gap: var(--s-1);} .nav-menu-summary::-webkit-details-marker{ display: none;} .nav-menu-summary::before{ content: ""; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; order: 2;} .nav-menu[open] .nav-menu-summary{ color: var(--text-bright); background: var(--card);} .nav-menu-panel{ position: absolute; top: 100%; left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 168px; padding: var(--s-1) 0; border: 1px solid var(--edge); border-radius: 0 0 var(--r-panel) var(--r-panel); background: var(--card); box-shadow: 0 12px 24px rgb(0 0 0 / 45%);} .nav-menu-panel .nav-link{ height: 34px; padding: 0 var(--s-4);} .nav-menu-panel .nav-link.is-here::after{ display: none;} .masthead-side{ display: flex; align-items: center; gap: var(--s-3); order: 3; flex: 0 0 auto;} @media (max-width: 52rem){ .masthead-inner{ justify-content: space-between;} .masthead-side{ order: 2; margin-left: auto;} .nav-toggle-button{ display: grid; order: 3;} .masthead-nav{ display: none; position: absolute; order: 4; top: 60px; left: var(--gutter); right: var(--gutter); z-index: 30; flex-direction: column; align-self: auto; flex: none; margin-left: 0; overflow: hidden; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 var(--r-panel) var(--r-panel); background: var(--card); box-shadow: 0 var(--s-3) var(--s-6) rgb(0 0 0 / 45%);} .nav-toggle:checked ~ .masthead-nav{ display: flex;} .nav-link{ min-height: 42px; padding: 0 var(--s-4); border-top: 1px solid var(--edge-head);} .nav-link.is-here::after{ left: 0; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;} .nav-menu{ flex-direction: column; align-self: auto;} .nav-menu-panel{ position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;} .nav-menu-panel .nav-link{ min-height: 38px; padding-left: var(--s-7);} .nav-menu-panel .nav-link.is-here::after{ display: block;}} @media (max-width: 34rem){ .account{ padding-inline: var(--s-1); margin-right: 0;}} .account{ display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); margin-right: calc(var(--s-3) * -1); border-radius: var(--r-control); text-decoration: none; transition: background-color var(--step) linear;} .account:hover{ background: var(--card);} .account-name{ font-size: var(--t-meta); color: var(--text-secondary); white-space: nowrap; transition: color var(--step) linear;} .account:hover .account-name{ color: var(--text);} .account.is-here .account-name{ color: var(--text-bright);} .bell{ position: relative; flex: 0 0 auto;} .bell-button{ display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-2); border: 1px solid var(--edge-strong); border-radius: var(--r-control); color: var(--text-secondary); background: transparent; cursor: pointer; font-family: var(--sans); font-size: var(--t-micro); transition: color var(--step) linear, border-color var(--step) linear;} .bell-button:hover{ color: var(--text); border-color: var(--edge-hover);} .bell-open .bell-button{ color: var(--text); border-color: var(--edge-hover); background: var(--card);} .bell-glyph{ font-size: var(--t-micro); line-height: 1; color: var(--edge-strong);} .bell:has(.bell-badge) .bell-glyph{ color: var(--accent);} .bell-badge{ min-width: 16px; padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: var(--t-micro); font-variant-numeric: tabular-nums; line-height: 16px; text-align: center;} @media (max-width: 46rem){ .bell-label{ display: none;}} .bell-panel{ position: absolute; top: calc(100%+ 7px); right: 0; z-index: 20; width: min(22rem, calc(100vw - 2 * var(--gutter))); border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--card); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);} .bell-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--edge-head); background: var(--edge-head);} .bell-head-split{ border-top: 1px solid var(--edge-head);} .bell-title{ font-size: var(--t-micro); color: var(--text-bright);} .bell-note{ font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .bell-empty{ margin: 0; padding: var(--s-3); font-size: var(--t-micro); color: var(--text-muted);} .bell-rows{ margin: 0; padding: 0; list-style: none; max-height: 17rem; overflow-y: auto;} .bell-row{ display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--edge-head);} .bell-row:last-child{ border-bottom: 0;} .bell-row-quiet{ color: var(--text-secondary);} .bell-row-main{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: var(--t-micro);} .bell-row-name{ color: var(--text);} .bell-row-sub{ font-size: var(--t-micro); color: var(--text-muted);} .bell-row-actions{ display: flex; gap: var(--s-2); flex: 0 0 auto;} .bell-foot{ padding: var(--s-3) var(--s-3); border-top: 1px solid var(--edge-head); font-size: var(--t-micro);} .site-main{ flex: 1 1 auto; padding-block: var(--s-7) var(--s-10);} .site-main-bleed{ padding-top: 0;} .site-foot{ border-top: 1px solid var(--edge-head); padding-block: var(--s-5) var(--s-7);} .site-foot-inner{ display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3) var(--s-6);} .site-foot-inner .foot-socials{ margin-left: auto;} .foot-note{ font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums;} .face{ display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--edge-strong); border-radius: var(--r-row); background: var(--raised); color: var(--text-bright); font-family: var(--mono); text-transform: uppercase;} .face img{ display: block; width: 100%; height: 100%; object-fit: cover;} .face-sm{ width: 24px; height: 24px; font-size: var(--t-micro);} .face-lg{ width: 72px; height: 72px; font-size: 1.75rem;} .keyart{ position: relative; display: flex; align-items: flex-end; min-height: 25rem; margin-inline: calc(var(--gutter) * -1); padding: 32px var(--gutter); background-color: #0f1216; background-image: url("../img/hero.jpg"); background-size: cover; background-position: 50% 18%; background-repeat: no-repeat; border-bottom: 1px solid var(--edge);} .keyart::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to right, rgba(8, 10, 13, 0.94) 0%, rgba(8, 10, 13, 0.86) 30%, rgba(8, 10, 13, 0.5) 54%, rgba(8, 10, 13, 0.12) 78%, rgba(8, 10, 13, 0) 100% ), linear-gradient( to top, rgba(8, 10, 13, 0.6) 0%, rgba(8, 10, 13, 0.2) 26%, rgba(8, 10, 13, 0) 55% );} .keyart-body{ position: relative; z-index: 1; max-width: 39rem;} .keyart h1{ margin: 0; font-size: var(--t-display); font-weight: 700; line-height: 1.15; color: #fff;} .keyart-lead{ max-width: 31rem; margin-top: var(--s-3); font-size: var(--t-section); line-height: 1.55; color: var(--text-bright);} .keyart-actions{ display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);} .statline{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-block: var(--s-3); font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums;} .statline span{ display: inline-flex; align-items: center; gap: var(--s-2);} .statline b{ font-weight: inherit; color: var(--text);} .keyart+ .statline{ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--edge-head);} .home-download{ display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6); padding: var(--s-5) 0 var(--s-5); border-bottom: 1px solid var(--edge-head);} .download-main{ flex: 1 1 auto; min-width: 0;} .download-kicker{ margin-bottom: var(--s-1); font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .download-copy{ max-width: 68ch; margin-top: var(--s-2); font-size: var(--t-meta); line-height: 1.6;} .download-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); flex: 0 0 auto;} .home-panels{ align-items: start;} @media (max-width: 48rem){ .home-download{ align-items: flex-start; flex-direction: column;} .download-actions{ justify-content: flex-start;}} .identity{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--edge-head);} .identity-text{ flex: 1 1 16rem; min-width: 0;} .identity-text h1{ overflow-wrap: anywhere;} .identity-text .statline{ padding-bottom: 0;} .identity-actions{ display: flex; flex-wrap: wrap; gap: var(--s-3); flex: 0 0 auto;} .dot{ flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--edge-strong);} .dot-live{ background: var(--accent);} .dot-quiet{ background: var(--edge-strong);} .readout{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-7); border-block: 1px solid var(--edge-head);} .readout-cell{ padding: var(--s-4) var(--s-5) var(--s-5); border-left: 1px solid var(--edge-head);} .readout-cell:first-child{ padding-left: 0; border-left: 0;} .readout-label{ margin: 0; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .readout-value{ margin: var(--s-2) 0 0; font-family: var(--mono); font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;} .readout-note{ margin: var(--s-2) 0 0; font-size: var(--t-micro); line-height: 1.4; color: var(--text-muted);} @media (max-width: 58rem){ .readout{ grid-template-columns: repeat(2, minmax(0, 1fr));} .readout-cell:nth-child(odd){ padding-left: 0; border-left: 0;} .readout-cell:nth-child(n+ 3){ border-top: 1px solid var(--edge-head);}} @media (max-width: 30rem){ .readout{ grid-template-columns: minmax(0, 1fr);} .readout-cell{ padding-left: 0; border-left: 0;} .readout-cell+ .readout-cell{ border-top: 1px solid var(--edge-head);}} .panels{ display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-7);} @media (max-width: 54rem){ .panels{ grid-template-columns: minmax(0, 1fr);}} .panel{ display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--card);} .panel-wide{ grid-column: 1 / -1;} .panel-live{ border-left: 2px solid var(--accent);} .panel-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--edge-head);} .panel-title{ margin: 0; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.004em; color: var(--text);} .panel-note{ font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;} .panel-foot{ padding: var(--s-3) var(--s-5); border-top: 1px solid var(--edge-head); font-size: var(--t-micro); color: var(--text-muted);} .rows{ margin: 0; padding: 0; list-style: none;} .row{ display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--edge-head); transition: background-color var(--step) linear;} .row:first-child{ border-top: 0;} .row:has(.row-link):hover{ background: var(--row);} .row-main{ flex: 1 1 auto; min-width: 0;} .row-head{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);} .row-name{ font-size: var(--t-body); font-weight: 600; color: var(--text);} .row-sub{ margin-top: var(--s-1); font-size: var(--t-micro); line-height: 1.45; color: var(--text-secondary);} .row-address{ margin-top: var(--s-1); font-size: var(--t-micro); color: var(--text-secondary); overflow-wrap: anywhere;} .row-stats{ display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums;} .row-actions{ flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--s-2);} .row-figure{ flex: 0 0 auto; font-family: var(--mono); font-size: var(--t-meta); color: var(--text-bright); font-variant-numeric: tabular-nums; white-space: nowrap;} .rank{ flex: 0 0 1.25rem; font-family: var(--mono); font-size: var(--t-micro); text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums;} @media (max-width: 36rem){ .row{ flex-direction: column; align-items: flex-start;} .rank{ display: none;}} .toolbar{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6);} .search{ display: flex; flex: 0 1 24rem; min-width: 0; border: 1px solid var(--edge-strong); border-radius: var(--r-control); background: var(--input); transition: border-color var(--step) linear;} .search:focus-within{ border-color: var(--accent);} .search input{ flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control) 0 0 var(--r-control); background: transparent; color: var(--text); font-family: var(--sans); font-size: var(--t-meta); caret-color: var(--accent);} .search input:focus, .search input:focus-visible{ outline: none;} .search button{ flex: 0 0 auto; height: 34px; padding: 0 var(--s-4); border: 0; border-left: 1px solid var(--edge); border-radius: 0 var(--r-control) var(--r-control) 0; background: transparent; color: var(--text-secondary); font-family: var(--sans); font-size: var(--t-meta); font-weight: 600; cursor: pointer; transition: color var(--step) linear;} .search button:hover{ color: var(--text);} .search input::-webkit-search-cancel-button{ display: none;} .tiles{ display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); margin-top: var(--s-6);} .tile{ display: flex; flex-direction: column; padding: var(--s-4) var(--s-5); border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--card); transition: border-color var(--step) linear;} .tile:hover{ border-color: var(--edge-hover);} .tile-head{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);} .tile-name{ font-size: var(--t-section); font-weight: 600; color: var(--text);} .tile-sub{ margin: var(--s-2) 0 0; font-size: var(--t-meta); line-height: 1.45; color: var(--text-secondary);} .tile-stats{ display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: auto; padding-top: var(--s-4); font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums;} .tile-stats b{ font-weight: inherit; color: var(--text-bright);} .pager{ display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-6);} .pager-count{ margin-right: auto; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums;} .is-disabled{ opacity: 0.35; cursor: default; pointer-events: none;} .search-results{ margin-top: var(--s-6);} .status{ display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-secondary); font-size: var(--t-micro); line-height: 18px; white-space: nowrap;} .status::before{ content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor;} .status-live{ color: var(--accent);} .status-waiting{ color: var(--warn);} .status-quiet{ color: var(--danger);} .tag{ padding: 0 var(--s-2); border: 1px solid var(--edge); border-radius: var(--r-control); color: var(--text-secondary); font-family: var(--sans); font-size: var(--t-micro); line-height: 18px;} .tag-figure{ font-family: var(--mono); white-space: nowrap;} .chips{ display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none;} .chip{ padding: 0 var(--s-2); border: 1px solid var(--edge-strong); border-radius: var(--r-control); background: var(--input); color: var(--text-bright); font-family: var(--mono); font-size: var(--t-micro); line-height: 22px; white-space: nowrap;} .chips-inline{ margin-top: var(--s-2); gap: var(--s-1);} .chip-quiet{ border-style: dashed; background: transparent; color: var(--text-muted); font-family: var(--sans); white-space: normal;} .page-head{ max-width: 54rem;} h1{ margin: 0; font-size: var(--t-title); font-weight: 650; line-height: 1.15; letter-spacing: -0.012em; color: var(--text);} h2{ margin: 0; font-size: var(--t-section); font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; color: var(--text);} p{ margin: 0; color: var(--text-secondary);} .lead{ max-width: 64ch; margin-top: var(--s-3); font-size: var(--t-body); line-height: 1.6;} .note{ max-width: 78ch; margin-top: var(--s-6); font-size: var(--t-micro); line-height: 1.6; color: var(--text-muted);} .mono{ font-family: var(--mono); font-variant-numeric: tabular-nums;} .facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s-4) var(--s-6); margin: 0;} .facts div{ min-width: 0;} .facts dt{ color: var(--text-muted); font-size: var(--t-micro);} .facts dd{ margin: var(--s-1) 0 0; color: var(--text); overflow-wrap: anywhere;} .facts dd.mono{ font-size: var(--t-meta);} .panel-copy+ .facts, .facts+ .panel-copy{ margin-top: var(--s-5);} .managed-settings-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0;} .managed-settings-grid label{ display: grid; gap: .35rem;} .managed-settings-grid .check-field{ display: flex; align-items: center;} .managed-storage{ display: grid; gap: .4rem; margin: 1rem 0; color: var(--text-muted); font-size: var(--t-micro);} .managed-storage progress{ width: 100%; accent-color: var(--accent);} .managed-file-list{ display: grid; gap: .75rem; margin: 1rem 0;} .managed-file-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem 1rem; padding: .8rem; border: 1px solid var(--edge); border-radius: var(--r-row);} .managed-file-row> div:first-child{ display: grid; gap: .3rem; min-width: 0;} .managed-file-row span{ color: var(--text-muted); font-size: var(--t-micro);} .managed-confirm{ display: flex; align-items: center; gap: .45rem; grid-column: 1 / -1; font-size: var(--t-micro); color: var(--text-muted);} .managed-file-actions, .managed-danger-zone{ display: grid; gap: .7rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--edge);} .managed-file-actions label{ display: grid; gap: .35rem;} .managed-danger-zone p{ margin: 0; color: var(--text-muted);} @media (max-width: 680px){ .managed-settings-grid{ grid-template-columns: 1fr;} .managed-file-row{ grid-template-columns: 1fr;}} @media (max-width: 560px){ .facts{ grid-template-columns: 1fr;}} .text-link{ color: var(--text-bright); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px;} .text-link:hover{ color: var(--accent); text-decoration-color: var(--accent);} .text-link-sm{ font-size: var(--t-micro);} .head-link{ color: var(--text-muted); font-size: var(--t-micro); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px;} .head-link:hover{ color: var(--accent); text-decoration-color: var(--accent);} .chart{ display: flex; align-items: flex-end; gap: 2px; height: 8rem; padding: var(--s-4) var(--s-5) var(--s-3);} .chart-slot{ display: flex; align-items: flex-end; flex: 1 1 0; min-width: 0; height: 100%; border-radius: var(--r-mark); background: var(--raised);} .chart-slot-gap{ background: transparent; border-bottom: 1px solid var(--edge); border-radius: 0;} .chart-bar{ width: 100%; min-height: 2px; border-radius: var(--r-mark); background: var(--accent);} .chart-axis{ display: flex; justify-content: space-between; padding: 0 var(--s-5) var(--s-4); font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .row-link, .tile-link{ display: block; color: inherit; text-decoration: none;} .tile-link{ height: 100%;} .tile-link .tile{ height: 100%;} .tile-link:hover .tile, .tile-link:focus-visible .tile{ border-color: var(--edge-hover);} .row-link:hover, .row-link:focus-visible, .row-link:hover .row-name, .row-link:focus-visible .row-name{ color: var(--accent);} .row[id], .panel[id]{ scroll-margin-top: var(--s-10);} .progress-head{ margin-top: var(--s-6);} .progress-head .statline{ padding-top: 0;} .progress-track{ height: 4px; margin-top: var(--s-1); border-radius: var(--r-pill); background: var(--edge-head); overflow: hidden;} .progress-fill{ height: 100%; background: var(--accent);} .feature-rows .feature-row{ align-items: flex-start; gap: var(--s-3);} .feature-mark{ flex: 0 0 auto; width: 1.25rem; font-family: var(--mono); font-size: var(--t-section); line-height: 1.5; text-align: center;} .feature-name{ font-size: var(--t-meta); color: var(--text);} .feature-note{ margin-top: var(--s-1); max-width: 62ch; font-size: var(--t-micro); line-height: 1.5; color: var(--text-muted);} .feature-status{ flex: 0 0 auto; width: 7.5rem; font-family: var(--mono); font-size: var(--t-micro); text-align: right; white-space: nowrap;} .feature-working{ color: var(--accent);} .feature-partial{ color: var(--warn);} .feature-progress{ color: var(--text-bright);} .feature-planned{ color: var(--text-muted);} .feature-none{ color: var(--text-muted);} .foot-language{ display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3);} .foot-language-label{ font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .foot-language-form{ display: contents;} .foot-language-choice{ padding: 0; border: 0; background: none; color: var(--text-muted); font-family: inherit; font-size: var(--t-micro); line-height: inherit; text-decoration: none; cursor: pointer; transition: color var(--step) linear;} .foot-language-choice:hover{ color: var(--text-bright); text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 3px;} .foot-language-choice.is-here{ color: var(--text); font-weight: 600;} .foot-link{ color: var(--text-muted); font-size: var(--t-micro); text-decoration: none; transition: color var(--step) linear;} .foot-link:hover{ color: var(--text-bright);} .foot-link.is-here{ color: var(--text-bright);} .foot-socials{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4);} .foot-social{ display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--t-micro); text-decoration: none; transition: color var(--step) linear;} .foot-social:hover{ color: var(--text-bright);} .foot-social-icon{ width: 16px; height: 16px; opacity: 0.62;} .foot-social:hover .foot-social-icon{ opacity: 1;} .inline-form{ display: flex; align-items: center; gap: var(--s-2);} .inline-form input[type="text"]{ width: 16rem; max-width: 40vw; font-size: var(--t-micro);} .text-danger{ color: var(--danger);} .panel-body{ padding: var(--s-4) var(--s-5) var(--s-5);} .panel-copy{ max-width: 56ch; font-size: var(--t-meta); line-height: 1.6;} .panel-copy+ .panel-copy{ margin-top: var(--s-4);} .panel-copy+ .field, .panel-copy+ form, .confirm+ .panel-copy, .error+ .panel-copy{ margin-top: var(--s-5);} .profile-markdown{ max-width: 68ch; font-size: var(--t-meta); line-height: 1.65; color: var(--text-secondary);} .profile-markdown h2{ margin: var(--s-5) 0 var(--s-2); font-size: var(--t-section);} .profile-markdown h2:first-child{ margin-top: 0;} .profile-markdown p+ p, .profile-markdown ul+ p, .profile-markdown p+ ul{ margin-top: var(--s-3);} .profile-markdown ul{ margin: 0; padding-left: var(--s-5);} .profile-markdown a{ color: var(--text-bright); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px;} .profile-markdown a:hover{ color: var(--accent); text-decoration-color: var(--accent);} .profile-markdown code{ padding: 1px var(--s-1); border: 1px solid var(--edge); border-radius: var(--r-control); background: var(--input); color: var(--text-bright); font-family: var(--mono); font-size: var(--t-micro);} .profile-markdown-image{ display: block; max-width: 100%; max-height: 24rem; margin-top: var(--s-3); border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--input); object-fit: contain;} .identity-loose{ margin-top: var(--s-6);} .warning{ padding-left: var(--s-3); margin-bottom: var(--s-4); border-left: 2px solid var(--warn); font-size: var(--t-meta); line-height: 1.5; color: var(--warn);} .panel-copy+ .warning, .warning+ .panel-copy, .warning+ .snippet{ margin-top: var(--s-4);} .confirm{ padding-left: var(--s-3); margin-bottom: var(--s-4); border-left: 2px solid var(--accent); font-size: var(--t-meta); line-height: 1.5; color: var(--text-secondary);} .empty{ padding: var(--s-6) var(--s-5) var(--s-6);} .empty-title{ font-size: var(--t-body); font-weight: 600; color: var(--text-bright);} .empty-sub{ max-width: 52ch; margin-top: var(--s-2); font-size: var(--t-micro); line-height: 1.55; color: var(--text-muted);} .empty-boxed{ margin-top: var(--s-6); border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--card);} .bell-rows, .snippet-wide pre{ scrollbar-width: thin; scrollbar-color: var(--edge-strong) transparent;} .bell-rows::-webkit-scrollbar, .snippet-wide pre::-webkit-scrollbar{ width: 10px; height: 10px;} .bell-rows::-webkit-scrollbar-track, .snippet-wide pre::-webkit-scrollbar-track{ background: transparent;} .bell-rows::-webkit-scrollbar-thumb, .snippet-wide pre::-webkit-scrollbar-thumb{ border: 3px solid transparent; border-radius: var(--r-pill); background: var(--edge-strong); background-clip: content-box;} .bell-rows::-webkit-scrollbar-thumb:hover, .snippet-wide pre::-webkit-scrollbar-thumb:hover{ background: var(--edge-hover); background-clip: content-box;} .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-control); font-family: var(--sans); font-size: var(--t-meta); font-weight: 600; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--step) linear, color var(--step) linear, border-color var(--step) linear;} .btn-primary{ background: var(--accent); color: var(--on-accent);} .btn-primary:hover{ background: var(--accent-hover);} .btn-primary:active{ background: var(--accent-active);} .btn-secondary{ border-color: var(--edge-strong); background: transparent; color: var(--text-bright);} .btn-secondary:hover{ border-color: var(--edge-hover); background: var(--row); color: var(--text);} .btn-danger{ border-color: var(--edge-strong); background: transparent; color: var(--text-secondary);} .btn-danger:hover{ border-color: rgba(248, 113, 113, 0.55); color: var(--danger);} .btn-sm{ height: 28px; padding: 0 var(--s-3); font-size: var(--t-micro);} a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-mark);} .actions{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6);} .shell-narrow{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--s-6);} .shell-narrow main{ width: 100%; max-width: 27rem;} .card{ border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--card);} .card-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--edge-head);} .card-head .brand{ display: block; flex: 1 1 auto; min-width: 0;} .card-title{ font-size: var(--t-body); font-weight: 600; color: var(--text);} .card-sub{ margin-top: 2px; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .card-head .brand:hover .card-sub{ color: var(--text-secondary);} .card-body{ padding: var(--s-5) var(--s-5);} .card-body h1{ margin: 0 0 var(--s-2); font-size: 1.25rem;} .card-body .lead{ margin-top: 0; margin-bottom: var(--s-5);} .card-body .btn{ display: flex; width: 100%;} .card-body .btn+ .btn, .card-body form+ .btn, .card-body p+ .btn, .card-body p+ form{ margin-top: var(--s-3);} .card-body .empty{ padding: var(--s-5) 0;} form{ margin: 0;} .field{ margin-bottom: var(--s-4);} label{ display: block; margin-bottom: var(--s-2); font-size: var(--t-micro); color: var(--text-bright);} input[type="email"], input[type="password"], input[type="text"], input[type="url"], textarea{ width: 100%; border: 1px solid var(--edge-strong); border-radius: var(--r-control); background: var(--input); color: var(--text); font-family: var(--mono); font-size: var(--t-meta); caret-color: var(--accent); transition: border-color var(--step) linear;} input[type="email"], input[type="password"], input[type="text"], input[type="url"]{ height: 36px; padding: 0 var(--s-3);} textarea{ min-height: 8rem; padding: var(--s-2) var(--s-3); resize: vertical; line-height: 1.5;} input:hover{ border-color: var(--edge-hover);} input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="url"]:focus, textarea:focus{ outline: none; border-color: var(--accent);} input::selection{ color: var(--on-accent); background: var(--accent);} .helper{ margin-top: var(--s-2); font-size: var(--t-micro); line-height: 1.5; color: var(--text-muted);} .social-inputs{ display: grid; gap: var(--s-2);} .social-input{ display: grid; gap: var(--s-2); grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);} @media (max-width: 42rem){ .social-input{ grid-template-columns: minmax(0, 1fr);}} .error{ padding-left: var(--s-3); margin-bottom: var(--s-4); border-left: 2px solid var(--danger); font-size: var(--t-meta); line-height: 1.5; color: var(--danger);} .page-error{ margin-top: var(--s-6);} .captcha{ margin-bottom: var(--s-4);} .or-divider{ display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-muted);} .or-divider::before, .or-divider::after{ content: ""; flex: 1 1 auto; height: 1px; background: var(--edge);} .token{ padding: var(--s-4); margin-bottom: var(--s-4); border: 1px solid var(--edge); border-left: 2px solid var(--accent); border-radius: var(--r-panel); background: var(--input);} .token-label{ margin-bottom: var(--s-2); font-family: var(--mono); font-size: var(--t-micro); color: var(--accent);} .token-value{ font-family: var(--mono); font-size: var(--t-meta); line-height: 1.6; color: var(--text); word-break: break-all; user-select: all;} .snippet{ padding: var(--s-4); margin-bottom: var(--s-4); border: 1px solid var(--edge); border-radius: var(--r-panel); background: var(--input);} .snippet-label{ margin-bottom: var(--s-2); font-size: var(--t-micro); color: var(--text-muted);} .snippet pre{ margin: 0; font-family: var(--mono); font-size: var(--t-meta); line-height: 1.55; color: var(--text-bright); white-space: pre-wrap; overflow-wrap: anywhere;} .snippet-wide pre{ white-space: pre; overflow-wrap: normal; overflow-x: auto;} .notice{ padding: var(--s-3) var(--s-4); margin-top: var(--s-6); border-left: 2px solid var(--accent); background: var(--card); font-size: var(--t-meta); color: var(--text-bright);} @media (max-width: 46rem){ .account-name{ display: none;} .keyart{ min-height: 18rem; padding-block: var(--s-6);} .keyart::after{ background: linear-gradient( to top, rgba(8, 10, 13, 0.95) 0%, rgba(8, 10, 13, 0.88) 52%, rgba(8, 10, 13, 0.6) 100% );} .keyart h1{ font-size: 1.75rem;} .identity-actions, .keyart-actions{ flex-basis: 100%;} .identity-actions .btn, .keyart-actions .btn{ flex: 1 1 11rem;}}