/* Canonical CoyLin tokens; native Opengist consumes the same theme. */
:root {
  color-scheme: light;
  --hub-background: #fafafa;
  --hub-surface: #fff;
  --hub-text: #1d1d1f;
  --hub-muted: #68686e;
  --hub-primary: #0068d8;
  --hub-primary-hover: #0058b8;
  --hub-surface-hover: #e9eaf0;
  --hub-border: #e3e3e8;
  --hub-on-primary: #fff;
  --hub-scrollbar: #b5b5bd;
  --hub-rail: #f2f2f5;
  --hub-toolbar: #ffffffd9;
  --hub-selected: #e1e3e9;
  --hub-shadow: 0 2px 8px #1d1d1f04;
  --hub-sidebar-material: #f2f2f5cc;
  --hub-glass-edge: #ffffffb8;
  --hub-font:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --hub-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --hub-radius: 16px;
  --hub-sidebar: 288px;
  --hub-header: 80px;
}
:root.dark {
  color-scheme: dark;
  --hub-background: #1c1c1e;
  --hub-surface: #28282b;
  --hub-text: #f5f5f7;
  --hub-muted: #b0b0b8;
  --hub-primary: #83baff;
  --hub-primary-hover: #a7ceff;
  --hub-surface-hover: #363639;
  --hub-border: #414145;
  --hub-on-primary: #082850;
  --hub-scrollbar: #67676f;
  --hub-rail: #232325;
  --hub-toolbar: #28282be6;
  --hub-selected: #39393d;
  --hub-shadow: none;
  --hub-sidebar-material: #232325d9;
  --hub-glass-edge: #ffffff1c;
}
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--hub-scrollbar) var(--hub-background);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--hub-background);
}
*::-webkit-scrollbar-thumb {
  background: var(--hub-scrollbar);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--hub-muted);
}
body {
  margin: 0;
  font-family: var(--hub-font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 3px solid var(--hub-primary);
  outline-offset: 3px;
}
.hub-directory {
  color: var(--hub-text);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 86% -10%, #007aff18, transparent 30rem),
    radial-gradient(circle at 54% 112%, #af64ff12, transparent 34rem),
    var(--hub-background);
  font-size: 16px;
  line-height: 1.65;
}
.hub-directory::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 12%, #ffffff9c, transparent 28rem),
    radial-gradient(ellipse at 96% 72%, #ffffff32, transparent 30rem);
  mix-blend-mode: screen;
}
.hub-directory a {
  color: inherit;
  text-decoration: none;
}
.hub-directory a:hover {
  color: var(--hub-primary);
}
.hub-directory button,
.hub-directory input {
  font: inherit;
}
.hub-directory a,
.hub-directory button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hub-directory svg {
  flex-shrink: 0;
}
.hub-directory [hidden] {
  display: none !important;
}
.hub-directory .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -90px;
  left: 20px;
  padding: 10px 20px;
  color: var(--hub-text);
  background: var(--hub-surface);
  z-index: 100;
}
.skip-link:focus {
  top: 12px;
}
.hub-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--hub-sidebar);
  background: var(--hub-sidebar-material);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid var(--hub-glass-edge);
  box-shadow: 14px 0 38px #1d1d1f0c;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--hub-header);
  padding: 18px 32px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.65px;
  white-space: nowrap;
}
.brand svg {
  width: 32px;
  height: 32px;
  color: var(--hub-primary);
}
.hub-nav {
  flex: 1;
  overflow-y: auto;
  padding: 32px 12px;
}
.hub-nav a {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  margin-bottom: 8px;
  border-radius: 10px;
  font-size: 17px;
  transition: background-color 120ms ease;
}
.hub-nav a svg {
  width: 24px;
  height: 24px;
  color: var(--hub-primary);
}
.hub-nav a[aria-current] {
  background: var(--hub-selected);
  color: var(--hub-text);
}
.hub-nav a[aria-current] {
  font-weight: 650;
}
.nav-label {
  padding: 26px 8px 14px;
  margin: 36px 12px 0;
  border-top: 1px solid var(--hub-border);
  color: var(--hub-muted);
  font-size: 14px;
}
.site-footer {
  padding: 12px 30px 24px;
  color: var(--hub-muted);
  font-size: 12px;
}
.site-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.site-footer svg {
  width: 18px;
  height: 18px;
}
.hub-workspace {
  margin-left: var(--hub-sidebar);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--hub-toolbar);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 0 var(--hub-glass-edge), 0 8px 20px #1d1d1f0a;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(var(--hub-glass-edge), transparent);
  opacity: 0.7;
}
.header-inner {
  min-height: var(--hub-header);
  padding: 14px 28px 14px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-title {
  font-size: 19px;
  font-weight: 600;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.account-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--hub-primary) !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 550;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 120ms ease, background-color 120ms ease;
}
.button svg {
  width: 22px;
  height: 22px;
}
.hub-directory .button-primary {
  color: var(--hub-on-primary);
  background: var(--hub-primary);
}
.hub-directory .button-primary:hover {
  color: var(--hub-on-primary);
  background: var(--hub-primary-hover);
}
.button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 64px 64px 72px;
}
.main h1 {
  font-size: 2.375rem;
  line-height: 1.3;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
  font-weight: 650;
}
.intro {
  font-size: 20px;
  color: var(--hub-muted);
  margin: 0 0 30px;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 10px 12px 10px 22px;
  border: 1px solid var(--hub-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--hub-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--hub-shadow);
}
.search-form:focus-within {
  border-color: var(--hub-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-primary) 12%, transparent);
}
.search-icon {
  width: 26px;
  height: 26px;
  color: var(--hub-muted);
}
.search-form input {
  min-width: 0;
  flex: 1;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--hub-text);
  outline: none;
  font-size: 19px;
}
.search-form input::placeholder {
  color: var(--hub-muted);
  opacity: 1;
}
.search-form input::-webkit-search-cancel-button {
  display: none;
}
.search-submit {
  min-width: 90px;
  min-height: 48px;
}
.clear-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--hub-muted);
  border: 0;
  border-radius: 6px;
}
.clear-search svg {
  width: 20px;
  height: 20px;
}
.clear-search:hover {
  background: var(--hub-surface-hover);
}
.search-feedback {
  min-height: 0;
  margin: 0;
  color: var(--hub-primary);
  font-size: 14px;
}
.search-feedback:not(:empty) {
  padding-top: 8px;
}
.search-scope {
  margin: 10px 0 0;
  color: var(--hub-muted);
  font-size: 13px;
}
.quick-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  margin: 10px 0 34px;
  color: var(--hub-muted);
  font-size: 16px;
}
.quick-search a {
  display: inline-flex;
  align-items: center;
  color: var(--hub-primary);
  min-height: 44px;
}
.quick-search a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.section-heading h2 {
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin: 0;
  font-weight: 650;
}
.browse-all {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hub-primary) !important;
  min-height: 44px;
  font-size: 15px;
}
.browse-all svg {
  width: 18px;
  height: 18px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.category {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 228px;
  padding: 24px;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  background: var(--hub-surface);
  box-shadow: var(--hub-shadow);
  touch-action: manipulation;
  transition: transform 120ms ease, border-color 160ms ease, background-color 160ms ease;
}
.category::before {
  content: "";
  position: absolute;
  inset: 1px 16px auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--hub-glass-edge), transparent);
  pointer-events: none;
}

.category-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--category-color, var(--hub-primary));
  background: color-mix(in srgb, var(--category-color, var(--hub-primary)) 11%, var(--hub-surface));
  border-radius: 12px;
  flex-shrink: 0;
}
.category-icon svg {
  width: 32px;
  height: 32px;
}
.category > div:not(.category-icon) {
  min-width: 0;
}
.category h3 {
  margin: 0 0 4px;
  font: 700 22px/1.3 var(--hub-font);
  letter-spacing: -0.025em;
  color: var(--hub-text);
}
.category p {
  margin: 0;
  color: var(--hub-muted);
  font-size: 16px;
  line-height: 1.65;
}
.file-types {
  display: block;
  margin-top: 12px;
  font: 14px/1.7 var(--hub-mono);
  color: var(--hub-muted);
}
.category-arrow {
  position: absolute;
  top: 28px;
  right: 22px;
  width: 18px;
  height: 18px;
  color: var(--hub-muted);
}
.mobile-nav-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  background: var(--hub-surface);
  color: var(--hub-text);
}
.mobile-nav-button svg {
  width: 22px;
  height: 22px;
}
.hub-backdrop {
  display: none;
}
/* Upstream adapter: semantic component colors, layout and preview density only. */
:root:has(.coylin-native) {
  --font-sans: var(--hub-font);
  --background: var(--hub-surface);
  --foreground: var(--hub-text);
  --content: var(--hub-background);
  --card: var(--hub-surface);
  --card-foreground: var(--hub-text);
  --popover: var(--hub-surface);
  --popover-foreground: var(--hub-text);
  --muted: var(--hub-background);
  --muted-foreground: var(--hub-muted);
  --secondary: var(--hub-surface-hover);
  --secondary-foreground: var(--hub-text);
  --accent: var(--hub-surface-hover);
  --accent-foreground: var(--hub-text);
  --border: var(--hub-border);
  --input: var(--hub-border);
  --ring: var(--hub-primary);
  --sidebar: var(--hub-rail);
  --sidebar-foreground: var(--hub-text);
  --sidebar-hover: var(--hub-background);
  --sidebar-accent: var(--hub-selected);
  --sidebar-accent-foreground: var(--hub-text);
  --sidebar-border: var(--hub-border);
  --radius: 8px;
}
.coylin-native #sidebar {
  width: var(--hub-sidebar);
  background: var(--hub-sidebar-material);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 14px 0 38px #1d1d1f0c;
}
.coylin-native #sidebar nav > header {
  min-height: var(--hub-header);
  padding: 18px 24px;
  justify-content: center;
}
.coylin-native #sidebar nav > header a {
  font-size: 24px;
  gap: 12px;
  padding: 0;
  letter-spacing: -0.65px;
}
.coylin-native #sidebar nav > header img {
  width: 36px;
  height: 36px;
}
.coylin-native #sidebar nav > section {
  padding: 18px 12px;
  flex: 0 1 auto;
}
.coylin-native #sidebar nav {
  overflow-y: auto;
}
.coylin-native #sidebar nav > footer {
  margin-top: auto;
  padding: 12px 20px;
}
.coylin-native #sidebar nav > section a,
.coylin-native .coylin-static a {
  min-height: 44px;
  gap: 16px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 8px;
}
.coylin-native #sidebar nav > section a svg,
.coylin-native .coylin-static a svg {
  width: 21px;
  height: 21px;
}
.coylin-native .coylin-static {
  margin: 0 12px;
  padding: 16px 0;
  border-top: 1px solid var(--hub-border);
}
.coylin-native #content-wrapper > header {
  min-height: var(--hub-header);
  height: auto;
  padding: 14px 28px;
  background: var(--hub-toolbar);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--hub-glass-edge), 0 8px 20px #1d1d1f0a;
}
.coylin-native #content-wrapper > header::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(var(--hub-glass-edge), transparent);
  opacity: 0.7;
}
.coylin-native #content > div {
  max-width: 1240px;
  padding: 34px 40px 56px;
}
.coylin-native h1 {
  letter-spacing: -0.5px;
}
.coylin-native
  :is(
    .btn,
    .btn-sm,
    .btn-outline,
    .btn-sm-outline,
    .btn-secondary,
    .btn-sm-secondary,
    .btn-ghost,
    .btn-sm-ghost,
    .btn-icon-ghost
  ) {
  min-height: 44px;
  border-radius: 8px;
}
.coylin-native :is(.input, .select, [data-filter-box]) {
  min-height: 44px;
  border-radius: 8px;
}
.coylin-native :is(.input, textarea) {
  font-size: 15px;
}
.coylin-native .coylin-gist {
  border-radius: var(--hub-radius);
  overflow: clip;
  box-shadow: var(--hub-shadow);
}
.coylin-native .coylin-gist > header {
  padding: 20px 24px;
}
.coylin-native .coylin-gist h3 {
  font-size: 17px;
  line-height: 1.6;
}
.coylin-native .coylin-preview {
  max-height: 108px;
  overflow: hidden;
  position: relative;
  background: var(--hub-background);
}
.coylin-native .coylin-preview::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: auto 0 0;
  height: 22px;
  background: linear-gradient(transparent, var(--hub-background));
}
.coylin-native .coylin-preview .markdown-body {
  font-size: 13px;
}
.coylin-native .coylin-preview .markdown-body h1 {
  margin: 0 0 8px;
  font-size: 18px;
  border: 0;
}
.coylin-native .code {
  font-size: 13px;
  line-height: 1.8;
}
.coylin-native .markdown-body {
  line-height: 1.85;
}
.coylin-native #editors .cm-editor {
  font-size: 14px;
  line-height: 1.8;
}
.coylin-native #editors {
  min-width: 0;
}
.coylin-native .coylin-nav-home {
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .coylin-native #content-wrapper {
    margin-left: var(--hub-sidebar);
  }
  .sidebar-collapsed .coylin-native #sidebar {
    width: 64px;
  }
  .sidebar-collapsed .coylin-native #content-wrapper {
    margin-left: 64px;
  }
  .sidebar-collapsed .coylin-native #sidebar nav > header {
    padding: 16px 12px;
  }
  .sidebar-collapsed .coylin-native #sidebar nav > section {
    padding: 12px 6px;
  }
  .sidebar-collapsed .coylin-native #sidebar nav > section a {
    padding: 10px;
  }
  .sidebar-collapsed .coylin-native .coylin-static {
    margin: 0 6px;
  }
  .sidebar-collapsed .coylin-native .coylin-static a {
    padding: 10px;
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  :root { --hub-sidebar: 232px; }
  .brand { font-size: 21px; padding-inline: 20px; gap: 10px; }
  .hub-nav a { gap: 16px; padding-inline: 16px; font-size: 16px; }
  .main { padding: 40px 32px 56px; }
  .main h1 { font-size: 2.125rem; }
  .intro { font-size: 17px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .category { padding: 20px; min-height: 208px; }
  .category-icon { width: 48px; height: 48px; }
  .category-icon svg { width: 28px; height: 28px; }
  .category h3 { font-size: 20px; }
  .category p { font-size: 14px; }
  .coylin-native #sidebar nav > header a { font-size: 20px; }
  .coylin-native #content > div { padding-inline: 28px; }
}
@media (max-width: 767px) {
  :root {
    --hub-sidebar: 288px;
    --hub-header: 68px;
  }
  .hub-sidebar {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--hub-border);
  }
  .hub-sidebar .brand {
    min-height: 64px;
    font-size: 22px;
    padding: 12px 20px;
  }
  .hub-nav {
    padding: 8px 12px;
  }
  .hub-nav a {
    font-size: 16px;
  }
  .site-footer {
    padding: 8px 28px;
  }
  .js .hub-sidebar {
    position: fixed;
    width: min(300px, 85vw);
    visibility: hidden;
    transform: translateX(-100%);
  }
  .js .hub-sidebar.is-open {
    visibility: visible;
    transform: none;
  }
  .js .hub-sidebar .site-footer {
    margin-top: auto;
    padding-bottom: 20px;
  }
  .js .hub-nav {
    flex: 1;
  }
  .js .mobile-nav-button {
    display: inline-flex;
  }
.js .hub-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: #10152766;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    border: 0;
    z-index: 40;
  }
  .hub-workspace {
    margin-left: 0;
  }
  .header-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .header-title {
    display: none;
  }
  .header-actions {
    gap: 16px;
  }
  .button {
    min-height: 44px;
    font-size: 14px;
    padding: 8px 14px;
    gap: 6px;
  }
  .button svg {
    width: 20px;
    height: 20px;
  }
  .account-link {
    font-size: 14px;
  }
  .main {
    padding: 32px 20px 48px;
  }
  .main h1 {
    font-size: 2rem;
    letter-spacing: -0.035em;
  }
  .intro {
    font-size: 16px;
    margin: 8px 0 22px;
  }
  .search-form {
    min-height: 62px;
    padding: 8px;
    gap: 8px;
  }
  .search-icon {
    width: 20px;
    height: 20px;
    margin-left: 4px;
  }
  .search-form input {
    font-size: 16px;
  }
  .search-submit {
    min-width: 58px;
    min-height: 44px;
    padding: 8px 12px;
  }
  .clear-search {
    width: 32px;
    padding: 4px;
    flex-shrink: 0;
  }
  .quick-search {
    gap: 0 18px;
    margin: 10px 0 26px;
    font-size: 14px;
  }
  .section-heading {
    gap: 8px;
    margin-bottom: 12px;
  }
  .section-heading h2 {
    font-size: 23px;
    letter-spacing: -0.6px;
  }
  .browse-all {
    font-size: 13px;
    gap: 4px;
  }
  .browse-all svg {
    width: 16px;
    height: 16px;
  }
  .category-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .category {
    min-height: 112px;
    flex-direction: row;
    align-items: center;
    padding: 18px 32px 18px 18px;
    gap: 16px;
  }
  .category-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
  }
  .category-icon svg {
    width: 29px;
    height: 29px;
  }
  .category h3 {
    font-size: 21px;
  }
  .category p,
  .file-types {
    font-size: 13px;
  }
  .category-arrow {
    width: 16px;
    top: calc(50% - 8px);
    right: 12px;
  }
  .coylin-native #content-wrapper > header {
    padding: 12px;
    gap: 8px;
  }
  .coylin-native #content-wrapper > header form {
    min-width: 0;
  }
  .coylin-native #content-wrapper > header > div {
    flex-shrink: 0;
  }
  .coylin-native #content > div {
    padding: 24px 16px 40px;
  }
  .coylin-native .coylin-gist > header {
    padding: 16px;
    flex-wrap: wrap;
  }
  .coylin-native .coylin-gist > header > div:last-child {
    margin-left: auto;
  }
  .coylin-native .coylin-gist h3 {
    font-size: 16px;
  }
}
@media (max-width: 359px) {
  .main {
    padding-inline: 16px;
  }
  .category {
    gap: 12px;
    padding: 16px 28px 16px 12px;
  }
  .category-icon {
    width: 42px;
    height: 48px;
  }
  .category-arrow {
    width: 14px;
  }
  .section-heading h2 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .category,
  .button,
  .search-form,
  .mobile-nav-button {
    border: 1px solid ButtonText;
  }
  .category-icon {
    border: 1px solid currentColor;
  }
}
.coylin-brand-icon {
  display: flex;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.coylin-brand-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  html.sidebar-collapsed .coylin-native #sidebar span.coylin-brand-icon {
    display: flex;
  }
}

.drawer-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 8px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: var(--hub-muted);
  background: transparent;
}
.drawer-close svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 767px) {
  .js .drawer-close {
    display: flex;
  }
  .js .hub-sidebar .brand {
    padding-right: 52px;
    font-size: 20px;
    gap: 8px;
  }
  .js .hub-sidebar .brand svg {
    width: 30px;
    height: 30px;
  }
}

/* Category color conveys type; every type also has a distinct icon and text. */
.category[href$="type-code"] { --category-color: #0068d8; }
.category[href$="type-ui"] { --category-color: #5856d6; }
.category[href$="type-prompt"] { --category-color: #8845d7; }
.category[href$="type-template"] { --category-color: #d97405; }
.category[href$="type-config"] { --category-color: #68686e; }
.category[href$="type-skill"] { --category-color: #14874e; }
.dark .category[href$="type-code"] { --category-color: #83baff; }
.dark .category[href$="type-ui"] { --category-color: #a3a1ff; }
.dark .category[href$="type-prompt"] { --category-color: #c7a0ff; }
.dark .category[href$="type-template"] { --category-color: #fbb16c; }
.dark .category[href$="type-config"] { --category-color: #b0b0b8; }
.dark .category[href$="type-skill"] { --category-color: #71d7a0; }
.coylin-brand-icon { color: var(--hub-primary); }
.coylin-native #sidebar nav > section a svg,
.coylin-native .coylin-static a svg { color: var(--hub-primary); }
.coylin-native :is(.btn, .btn-sm, .btn-outline, .btn-sm-outline, .btn-secondary, .btn-sm-secondary, .btn-ghost, .btn-sm-ghost, .btn-icon-ghost) {
  touch-action: manipulation;
  transition: transform 120ms ease, background-color 120ms ease;
}
/* Feedback begins on press; browser click still commits on release. */
.hub-directory .button:not(:disabled):active,
.coylin-native :is(.btn, .btn-sm, .btn-outline, .btn-sm-outline, .btn-secondary, .btn-sm-secondary, .btn-ghost, .btn-sm-ghost, .btn-icon-ghost):not(:disabled):active {
  transform: scale(0.97);
  transition-duration: 60ms;
}
.hub-directory .category:active {
  transform: scale(0.99);
  background: var(--hub-surface-hover);
  transition-duration: 60ms;
}
.hub-nav a:active { background: var(--hub-selected); }
.coylin-native .code tbody { line-height: 1.8; }
.coylin-native #editors > article { border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .hub-nav a:hover { background: var(--hub-surface-hover); }
  .category:hover {
    border-color: color-mix(in srgb, var(--hub-primary) 35%, var(--hub-border));
    background: color-mix(in srgb, var(--hub-background) 45%, var(--hub-surface));
  }
}
@media (max-width: 767px) {
  .js .hub-sidebar {
    transition: none;
    will-change: transform;
  }
  .hub-nav a { min-height: 44px; margin-bottom: 4px; }
  .nav-label { margin-top: 16px; padding-top: 18px; }
  .file-types { margin-top: 4px; }
  .category h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-directory .category:active,
  .hub-directory .button:active,
  .coylin-native :is(.btn, .btn-sm, .btn-outline, .btn-sm-outline, .btn-secondary, .btn-sm-secondary, .btn-ghost, .btn-sm-ghost, .btn-icon-ghost):active {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .hub-sidebar,
  .coylin-native #sidebar,
  .site-header, .coylin-native #content-wrapper > header,
  .search-form {
    background: var(--hub-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hub-directory::before {
    display: none;
  }
}
@media (prefers-contrast: more) {
  :root { --hub-border: #76767c; --hub-muted: #49494f; }
  :root.dark { --hub-border: #9c9ca4; --hub-muted: #d0d0d6; }
  .hub-sidebar,
  .coylin-native #sidebar,
  .site-header, .coylin-native #content-wrapper > header,
  .search-form {
    background: var(--hub-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--hub-border);
  }
}