@layer reset, tokens, base, components, utilities;
/* #ref https://m3.material.io/components/lists/overview */
/* #insight Scoped semantic styles for accordion item */

@layer components {
  @scope (.accordion-item, details.accordion-item) {
    summary {
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
    }

    .accordion-content {
      display: none;
      opacity: 0;
      translate: 0 -4px;
      overflow: hidden;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  translate var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  display var(--motion-duration-short, 200ms) allow-discrete;
    }

    .accordion-content > .accordion-content-inner {
      overflow: hidden;
    }

    :scope[open] > .accordion-content {
      display: block;
      opacity: 1;
      translate: 0 0;

      @starting-style {
        opacity: 0;
        translate: 0 -4px;
      }
    }

    :scope:not([open]) > .accordion-content {
      pointer-events: none;
    }
  }
}

/* #insight Scoped semantic styles for breadcrumbs navigation */

@layer components {
  @scope (.breadcrumbs) {
    :scope {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .breadcrumbs-item {
      display: flex;
      align-items: center;
      height: 32px;
      border-radius: var(--radius-xs, 4px);
    }

    .breadcrumbs-item::after {
      content: "/";
      margin: 0 0.5em;
      color: var(--color-outline-variant);
    }

    .breadcrumbs-item:last-child::after {
      display: none;
    }

    .breadcrumbs-item-current {
      display: flex;
      align-items: center;
      height: 32px;
      color: var(--color-on-surface);
      font-weight: var(--font-weight-medium, 500);
    }
  }
}

/* #ref https://m3.material.io/components/buttons/overview */
/* #ref https://m3.material.io/components/icon-buttons/overview */
/* #insight Scoped semantic CSS avoids 15-20 utility classes per element, cutting DOM token weight by ~75% for AI agents while providing stable semantic selectors */

@layer components {
  @scope (.button) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      gap: var(--space-2);
      height: 40px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-full, 9999px);
      border: none;
      font-family: var(--font-family-plain);
      font-size: 0.875rem;
      font-weight: var(--font-weight-medium);
      line-height: 1.25rem;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short) linear;
      z-index: 0;
    }

    &:hover::before { opacity: 0.08; }
    &:active::before { opacity: 0.12; }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    & > .label {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      text-box: trim-both cap alphabetic;
    }

    /* Standard Variants */
    &.button-primary {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }
    &.button-primary-container {
      background-color: var(--color-primary-container);
      color: var(--color-on-primary-container);
    }
    &.button-secondary {
      background-color: var(--color-secondary);
      color: var(--color-on-secondary);
    }
    &.button-secondary-container {
      background-color: var(--color-secondary-container);
      color: var(--color-on-secondary-container);
    }
    &.button-tertiary {
      background-color: var(--color-tertiary);
      color: var(--color-on-tertiary);
    }
    &.button-tertiary-container {
      background-color: var(--color-tertiary-container);
      color: var(--color-on-tertiary-container);
    }
    &.button-outlined {
      background-color: transparent;
      border: 1px solid var(--color-outline);
      color: var(--color-primary);

      &.button-error,
      &.color-error {
        background-color: transparent !important;
        border-color: var(--color-error);
        color: var(--color-error) !important;
      }

      &.button-error:hover,
      &.color-error:hover {
        background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
      }
    }
    &.button-outlined-error {
      background-color: transparent !important;
      border: 1px solid var(--color-error);
      color: var(--color-error) !important;
    }
    &.button-outlined-error:hover {
      background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
    }
    &.button-text {
      background-color: transparent;
      color: var(--color-primary);
      padding: 0 var(--space-3);

      &.color-error,
      &.button-error {
        background-color: transparent !important;
        color: var(--color-error) !important;
      }

      &.color-error:hover,
      &.button-error:hover {
        background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
      }
    }
    &.button-text-error {
      background-color: transparent !important;
      color: var(--color-error) !important;
      padding: 0 var(--space-3);
    }
    &.button-text-error:hover {
      background-color: color-mix(in srgb, var(--color-error) 12%, transparent) !important;
    }
    &.button-ghost {
      background-color: transparent;
      color: var(--color-on-surface);
      padding: 0 var(--space-3);
    }
    &.button-ghost:hover {
      background-color: var(--color-surface-container-high);
    }
    &.button-error {
      background-color: var(--color-error);
      color: var(--color-on-error);
    }
    &.button-error-container {
      background-color: var(--color-error-container);
      color: var(--color-on-error-container);
    }

    /* Adaptive Width: full-width on mobile (<600px), natural fit-content on desktop (>=600px) */
    &.w-full-mobile,
    &.button-full-mobile {
      width: 100%;

      @media (min-width: 600px) {
        width: fit-content;
      }
    }
  }

  @scope (.icon-button) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: var(--space-2);
      border-radius: var(--radius-full, 9999px);
      border: none;
      color: var(--color-on-surface-variant);
      background-color: transparent;
      position: relative;
      overflow: visible;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
    }

    &:hover {
      background-color: var(--color-surface-container-high);
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-duration-short) linear;
      z-index: 0;
    }

    &::after {
      content: "";
      position: absolute;
      inset: min(0px, calc((100% - 48px) / 2));
    }

    &:hover::before { opacity: 0.08; }
    &:active::before { opacity: 0.12; }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
      pointer-events: none;
    }

    & > .icon-button-icon {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* #ref https://m3.material.io/components/cards/overview */
/* #insight Scoped semantic styles for Material 3 Card */

@layer components {
  @scope (.card) {
    :scope {
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      color: var(--color-on-surface);
      background-color: var(--color-surface-container-highest);
    }

    &.corner-s { border-radius: var(--radius-sm); }
    &.corner-m { border-radius: var(--radius-md); }
    &.corner-l { border-radius: var(--radius-lg); }
    &.corner-xl { border-radius: var(--radius-xl); }

    &.card-elevated {
      background-color: var(--color-surface-container-low);
      box-shadow: var(--shadow-1);
    }

    &.card-outlined {
      background-color: var(--color-surface);
      border: 1px solid var(--color-outline-variant);
    }

    h2, .card-title {
      font-family: var(--font-family-plain);
      font-size: 1.375rem;
      line-height: 1.75rem;
      font-weight: var(--font-weight-regular, 400);
      letter-spacing: 0;
      margin: 0;
      color: var(--color-on-surface);
      text-box: trim-both cap alphabetic;
    }

    form {
      margin: 0;
    }

    .card-resize-handle {
      margin-top: var(--space-4);
      padding-top: var(--space-1);
      width: 100%;
      display: flex;
      justify-content: center;
      border: none;
      background: transparent;
      touch-action: none;
      user-select: none;
      cursor: ns-resize;
    }

    .card-resize-pill {
      width: 2rem;
      height: 0.25rem;
      border-radius: var(--radius-full);
      background: var(--color-outline-variant);
      cursor: inherit;
    }
  }
}

/* #insight Scoped semantic styles for clipboard copy button */

@layer components {
  @scope (.copy-button) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full, 9999px);
      border: none;
      background: transparent;
      color: var(--color-on-surface-variant);
      cursor: pointer;
    }

    :scope:hover {
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
    }
  }
}

/* #ref https://m3.material.io/components/divider/overview */
/* #insight Scoped semantic styles for horizontal and vertical dividers */

@layer components {
  @scope (.divider, hr.divider) {
    :scope {
      border: none;
      height: 1px;
      background-color: var(--color-outline-variant);
      width: 100%;
      margin: var(--space-2, 8px) 0;
    }

    &.divider-vertical {
      width: 1px;
      height: 100%;
      min-height: 1rem;
      margin: 0 var(--space-2, 8px);
      display: inline-block;
    }
  }
}

/* #ref https://m3.material.io/components/navigation-drawer/overview */
/* #insight Scoped semantic styles for sidebar navigation drawer */

@layer components {
  @scope (.sidebar) {
    :scope {
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
      padding: var(--space-4, 16px) 0;
      background-color: var(--color-surface-container);
      color: var(--color-on-surface);
      border-right: 1px solid var(--color-outline-variant);
      transition: transform var(--motion-duration-short, 200ms) var(--motion-easing-standard);
      width: 280px;
      min-width: 240px;
      min-height: 100vh;
    }

    .sidebar-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
      padding: 0 var(--space-2, 8px);
    }

    .sidebar-leading {
      padding: 0 var(--space-4, 16px) var(--space-4, 16px);
      display: flex;
      align-items: center;
      gap: var(--space-2, 8px);
    }

    .sidebar-trailing {
      padding: var(--space-4, 16px) var(--space-4, 16px) 0;
      display: flex;
      align-items: center;
      gap: var(--space-2, 8px);
    }

    .sidebar-section {
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
      margin-top: var(--space-2, 8px);
    }

    .sidebar-section-title {
      padding: 0 var(--space-4, 16px);
      font-size: 0.75rem;
      color: var(--color-on-surface-variant);
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  transform var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: var(--space-3, 12px);
      padding: var(--space-2, 8px) var(--space-3, 12px);
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      text-decoration: none;
    }

    .sidebar-item:hover {
      background-color: var(--color-surface-container-high);
    }

    .sidebar-item.active {
      background-color: var(--color-secondary-container);
      margin-left: -8px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--radius-full, 9999px);
      border-bottom-right-radius: var(--radius-full, 9999px);
      padding-left: 20px;
    }

    .sidebar-item.disabled {
      pointer-events: none;
      opacity: 0.5;
    }

    .sidebar-item-leading {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-item-trailing {
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-item-text {
      display: flex;
      flex-direction: column;
      gap: var(--space-1, 4px);
      min-width: 0;
      transition: opacity var(--motion-duration-short, 200ms) var(--motion-easing-standard),
                  transform var(--motion-duration-short, 200ms) var(--motion-easing-standard);
    }

    .sidebar-item-label {
      font-size: 0.875rem;
      color: var(--color-on-surface);
    }

    .sidebar-item-supporting {
      font-size: 0.75rem;
      color: var(--color-on-surface-variant);
    }

    .sidebar-item-icon {
      color: var(--color-on-surface-variant);
      line-height: 1;
      display: block;
    }

    .sidebar-item.active .sidebar-item-label,
    .sidebar-item.active .sidebar-item-icon {
      color: var(--color-on-secondary-container);
    }

    &.sidebar-compact {
      width: 88px;
      min-width: 88px;
    }
  }
}

/* #insight Scoped semantic styles for code snippet block */

@layer components {
  @scope (.code-snippet) {
    :scope {
      position: relative;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-outline-variant);
      background-color: var(--color-surface-container-low);
      color: var(--color-on-surface);
      overflow: hidden;
      font-family: var(--font-family-mono);
    }

    .code-snippet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-4);
      border-bottom: 1px solid var(--color-outline-variant);
      background-color: var(--color-surface);
    }

    pre {
      margin: 0;
      padding: var(--space-4);
      overflow: auto;
      font-family: var(--font-family-mono);
      font-size: 0.875rem;
      line-height: 1.375rem;
    }

    .tok-comment {
      color: var(--color-on-surface-variant);
      font-style: italic;
    }

    .tok-string {
      color: var(--tok-string, var(--color-tertiary));
    }

    .tok-tag {
      color: var(--tok-tag, var(--color-primary));
      font-weight: 500;
    }

    .tok-key {
      color: var(--tok-key, var(--color-tertiary));
    }

    .tok-kw {
      color: var(--tok-kw, var(--color-primary));
      font-weight: 600;
    }

    .tok-num {
      color: var(--tok-num, var(--color-secondary));
    }

    .tok-punct {
      color: var(--color-on-surface-variant);
    }

    .tok-type {
      color: var(--tok-type, var(--color-tertiary));
      font-weight: 500;
    }

    .tok-fn {
      color: var(--tok-fn, var(--color-primary));
    }

    .tok-op {
      color: var(--tok-op, var(--color-secondary));
    }

    .tok-doc {
      color: var(--color-on-surface-variant);
      font-style: italic;
    }

    .tok-mut {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .tok-static {
      font-weight: 600;
    }

    .tok-effectful {
      font-weight: 500;
    }

    .tok-deprecated {
      text-decoration: line-through;
      opacity: 0.75;
    }
  }
}

/* #insight Scoped semantic styles for cookie consent popup */

@layer components {
  @scope ([data-cookie-consent], section#cookie-consent-dialog, .cookie-consent-dialog) {
    :scope:not(:popover-open),
    :scope[hidden] {
      display: none !important;
    }

    :scope {
      position: fixed;
      margin: 0;
      top: auto;
      right: auto;
      left: 50%;
      bottom: calc(var(--stage-bottom-offset, 0px) + max(1rem, calc(env(safe-area-inset-bottom) + 1rem)));
      transform: translateX(-50%);
      width: min(40rem, calc(100vw - 2rem));
      max-width: calc(100vw - 2rem);
      padding: var(--space-6);
      border-radius: var(--radius-xl);
      background-color: var(--color-surface-container-high);
      color: var(--color-on-surface);
      box-shadow: var(--shadow-4);
      z-index: 100;
      border: none;
    }
  }
}

/* #insight Scoped floating scroll-to / scroll-to-top button styles */

@layer components {
  @scope (.scroll-to, .scroll-to-top) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: var(--radius-full);
      background-color: color-mix(in srgb, var(--color-surface-container-high) var(--surface-glass-opacity), transparent);
      backdrop-filter: blur(var(--surface-glass-blur));
      border: var(--surface-glass-border);
      box-shadow: var(--surface-glass-shadow);
      color: var(--color-on-surface);
      cursor: pointer;
      text-decoration: none;
      touch-action: manipulation;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
      transition: opacity var(--motion-duration-short) var(--motion-easing-standard),
                  transform var(--motion-duration-short) var(--motion-easing-standard);
    }

    :scope.fixed {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 50;
    }

    :scope.visible {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    :scope.invisible {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    :scope:hover {
      background-color: color-mix(in srgb, var(--color-surface-container-highest) 75%, transparent);
      transform: scale(1.05);
      text-decoration: none;
    }

    :scope:active {
      transform: scale(0.95);
    }
  }
}

/* #insight Scoped semantic styles for theme switch button */

@layer components {
  @scope (.theme-switch) {
    :scope {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      cursor: pointer;
      padding: var(--space-2);
      background: transparent;
      border: none;
      color: var(--color-on-surface-variant);
    }

    :scope:hover {
      background-color: var(--color-surface-container-high);
    }
  }
}

@font-face{font-family: Google Sans; font-style: normal; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans/google-sans-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0102, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 400; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-400-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 400; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-400-italic.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: normal; font-weight: 700; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-700-normal.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans; font-style: italic; font-weight: 700; font-display: swap; src: url('https://rngsc.net/fonts/google-sans/google-sans-greek-700-italic.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face{font-family: Google Sans Code; font-style: normal; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: italic; font-weight: 400; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: normal; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Google Sans Code; font-style: italic; font-weight: 700; font-display: optional; src: url('https://rngsc.net/fonts/google-sans-code/google-sans-code-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family: Material Symbols Rounded; font-style: normal; font-weight: 100 700; font-display: block; src: url('https://rngsc.net/fonts/material-symbols/material-symbols-rounded-subset.woff2') format('woff2');}.material-symbols-rounded{font-family: Material Symbols Rounded, sans-serif; font-weight: normal; font-style: normal; font-size: 24px; width: 1em; height: 1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; overflow: hidden; flex-shrink: 0; vertical-align: middle; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: liga; font-variation-settings: 'wght' 400, 'opsz' 24, 'GRAD' 0, 'FILL' 0;}:root{scrollbar-color: var(--color-surface-variant) transparent; scrollbar-width: thin;}::-webkit-scrollbar, ::-webkit-scrollbar-corner{background: transparent; height: 12px; width: 12px;}::-webkit-scrollbar-track{display: none;}::-webkit-scrollbar-thumb{background: content-box currentColor; border: 2px solid transparent; border-radius: 8px; color: var(--color-surface-variant); min-height: 48px; min-width: 48px;}:root{color-scheme: light dark; --corner-none: 0px; --corner-xs: 0px; --corner-s: 0px; --corner-m: 0px; --corner-l: 0px; --corner-xl: 0px; --corner-full: 0px; --radius-xs: var(--corner-xs); --radius-sm: var(--corner-s); --radius-md: var(--corner-m); --radius-lg: var(--corner-l); --radius-xl: var(--corner-xl); --radius-full: var(--corner-full); --color-primary: #c41b59; --color-on-primary: #ffffff; --color-primary-container: #ffd9e2; --color-on-primary-container: #3e0019; --color-secondary: #334155; --color-on-secondary: #ffffff; --color-secondary-container: #e2e8f0; --color-on-secondary-container: #0f172a; --color-tertiary: #0f766e; --color-on-tertiary: #ffffff; --color-tertiary-container: #ccfbf1; --color-on-tertiary-container: #042f2e; --color-surface: #fbfcfe; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f1f5f9; --color-surface-container: #e8eef6; --color-surface-container-high: #e2e8f0; --color-surface-container-highest: #cbd5e1; --color-on-surface: #0f172a; --color-on-surface-variant: #475569; --color-outline: #64748b; --color-outline-variant: #cbd5e1; --tok-kw: #6d28d9; --tok-tag: #c41b59; --tok-key: #0369a1; --tok-string: #0f766e; --tok-num: #b45309; --tok-type: #4f46e5; --tok-fn: #1d4ed8; --tok-op: #be185d; background-color: var(--color-surface);}:root.dark, :root .dark{--color-primary: #ff6b9b; --color-on-primary: #5e0027; --color-primary-container: #8c0d42; --color-on-primary-container: #ffd9e2; --color-secondary: #94a3b8; --color-on-secondary: #0f172a; --color-secondary-container: #1e293b; --color-on-secondary-container: #e2e8f0; --color-tertiary: #5eead4; --color-on-tertiary: #042f2e; --color-tertiary-container: #115e59; --color-on-tertiary-container: #ccfbf1; --color-surface: #0d1117; --color-surface-container-lowest: #080b10; --color-surface-container-low: #131820; --color-surface-container: #171e29; --color-surface-container-high: #1f2937; --color-surface-container-highest: #283446; --color-on-surface: #f1f5f9; --color-on-surface-variant: #94a3b8; --color-outline: #64748b; --color-outline-variant: #263142; --tok-kw: #c084fc; --tok-tag: #ff6b9b; --tok-key: #38bdf8; --tok-string: #5eead4; --tok-num: #fbbf24; --tok-type: #a5b4fc; --tok-fn: #60a5fa; --tok-op: #f472b6;}:root{--font-family-brand: Google Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-plain: Google Sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: Google Sans Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-family-code: Google Sans Code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}.corner-none{border-radius: 0;}.corner-xs{border-radius: var(--corner-xs, 0px);}.corner-s{border-radius: var(--corner-s, 0px);}.corner-m{border-radius: var(--corner-m, 0px);}.corner-l{border-radius: var(--corner-l, 0px);}.corner-xl{border-radius: var(--corner-xl, 0px);}.corner-full{border-radius: var(--corner-full, 0px);}[hidden]{display: none !important;}body{font-family: var(--font-family-plain); background-color: var(--color-surface);}:root, html{view-transition-name: none !important; background-color: var(--color-surface) !important;}.site-header{position: sticky; top: 0; z-index: 30; height: 64px; background-color: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-outline-variant);}.site-header-inner{max-width: var(--breakpoint-expanded, 1200px); margin: 0 auto; padding: 0 16px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;}.site-nav-links{display: none; align-items: center; gap: 4px; height: 100%;}.site-nav-link{display: inline-flex; align-items: center; height: 100%; padding: 0 12px; font-family: var(--font-family-plain); font-size: 0.875rem; font-weight: 500; color: var(--color-on-surface-variant); text-decoration: none; border-bottom: 2px solid transparent; text-box: trim-both cap alphabetic;&:hover, &:focus-visible{color: var(--color-on-surface); text-decoration: none;}&.is-active{color: var(--color-on-surface); border-bottom-color: var(--color-primary);}}.version-badge{display: inline-flex; align-items: center; padding: 2px 6px; font-family: var(--font-family-mono); font-size: 0.75rem; line-height: 1rem; color: var(--color-on-surface-variant); background-color: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-xs, 0px);}.mobile-nav-trigger{display: inline-flex;}#tangu-mobile-nav:not(:popover-open){display: none !important;}#tangu-mobile-nav:popover-open{position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); height: 100dvh; margin: 0; padding: 16px 0; border: none; border-right: 1px solid var(--color-outline-variant); background-color: var(--color-surface); color: var(--color-on-surface); box-shadow: var(--shadow-4); overflow-y: auto; z-index: 60; opacity: 1; transform: translateX(0); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms cubic-bezier(0.2, 0, 0, 1), display 200ms allow-discrete, overlay 200ms allow-discrete;@starting-style{opacity: 0; transform: translateX(-16px);}}#tangu-mobile-nav::backdrop{background-color: rgba(0, 0, 0, 0.45);}.doc-filter-wrap{position: relative; width: clamp(7.5rem, 32vw, 19rem);}.doc-filter-box{height: 36px; padding: 0 10px; background-color: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-s, 0px); display: flex; align-items: center; gap: 8px;&:focus-within{border-color: var(--color-primary);}}.doc-filter-input{background: transparent; border: none; outline: none; color: var(--color-on-surface); font-family: var(--font-family-plain); font-size: 0.875rem; line-height: 1.25rem; width: 100%; min-width: 0;}.doc-filter-input::placeholder{color: var(--color-on-surface-variant); opacity: 0.85;}.doc-filter-input::-webkit-search-cancel-button, .doc-filter-input::-webkit-search-decoration{-webkit-appearance: none; appearance: none; display: none;}#tangu-doc-filter-clear{width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0;}.doc-filter-kbd{display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--corner-xs, 0px); background-color: var(--color-surface-container-high); border: 1px solid var(--color-outline-variant); color: var(--color-on-surface-variant); font-family: var(--font-family-mono); font-size: 0.75rem; user-select: none; flex-shrink: 0;}.doc-filter-results{position: absolute; top: calc(100% + 6px); right: 0; width: min(36rem, calc(100vw - 32px)); max-height: 24rem; overflow-y: auto; z-index: 50; background-color: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-m, 0px); box-shadow: var(--shadow-3); padding: 6px;}.doc-filter-result-item{display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--corner-s, 0px); text-decoration: none; color: var(--color-on-surface);&:hover, &:focus-visible, &[data-active="true"]{background-color: var(--color-surface-container-high); text-decoration: none; outline: none;}}.hero-section{border-bottom: 1px solid var(--color-outline-variant); background-color: var(--color-surface-container-low);}.hero-code-window{border: 1px solid var(--color-outline-variant); border-radius: var(--corner-m, 0px); background-color: var(--color-surface-container-lowest); display: flex; flex-direction: column; min-width: 0;}.hero-tab-radio{position: absolute; opacity: 0; pointer-events: none;}.hero-tab-bar{display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--color-outline-variant); background-color: var(--color-surface);}.hero-tab-label{display: inline-flex; align-items: center; height: 44px; padding: 0 16px; font-family: var(--font-family-mono); font-size: 0.8125rem; font-weight: 500; color: var(--color-on-surface-variant); border-bottom: 2px solid transparent; border-right: 1px solid var(--color-outline-variant); cursor: pointer; user-select: none; white-space: nowrap;&:hover{color: var(--color-on-surface); background-color: var(--color-surface-container-low);}}.hero-tab-panel{display: none;}#hero-tab-code:checked ~ .hero-tab-bar label[for="hero-tab-code"], #hero-tab-data:checked ~ .hero-tab-bar label[for="hero-tab-data"], #hero-tab-ui:checked ~ .hero-tab-bar label[for="hero-tab-ui"], #hero-tab-sql:checked ~ .hero-tab-bar label[for="hero-tab-sql"]{color: var(--color-primary); background-color: var(--color-surface-container-lowest); border-bottom-color: var(--color-primary);}#hero-tab-code:checked ~ .hero-tab-panels #hero-panel-code, #hero-tab-data:checked ~ .hero-tab-panels #hero-panel-data, #hero-tab-ui:checked ~ .hero-tab-panels #hero-panel-ui, #hero-tab-sql:checked ~ .hero-tab-panels #hero-panel-sql{display: block;}.hero-code-window .code-snippet{border: none; background-color: var(--color-surface-container-lowest);}.hero-code-window .code-snippet-header{padding: 6px 16px; background-color: var(--color-surface-container-lowest); border-bottom: 1px dashed var(--color-outline-variant);}.tok-comment{color: var(--color-on-surface-variant); font-style: italic;}.tok-string{color: var(--tok-string);}.tok-tag{color: var(--tok-tag); font-weight: 500;}.tok-key{color: var(--tok-key);}.tok-kw{color: var(--tok-kw); font-weight: 600;}.tok-num{color: var(--tok-num);}.tok-punct{color: var(--color-on-surface-variant);}.tok-type{color: var(--tok-type); font-weight: 500;}.tok-fn{color: var(--tok-fn);}.tok-op{color: var(--tok-op);}.tok-doc{color: var(--color-on-surface-variant); font-style: italic;}.tok-mut{text-decoration: underline; text-underline-offset: 2px;}.tok-static{font-weight: 600;}.tok-effectful{font-weight: 500;}.tok-deprecated{text-decoration: line-through; opacity: 0.75;}.tech-card{background-color: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-m, 0px); padding: 20px; display: flex; flex-direction: column; gap: 12px;}a.tech-card-link{text-decoration: none; color: inherit; display: block; height: 100%;&:hover .tech-card, &:focus-visible .tech-card{border-color: var(--color-primary); background-color: var(--color-surface-container);}}.mod-tag{display: inline-flex; align-items: center; padding: 2px 6px; font-family: var(--font-family-mono); font-size: 0.75rem; line-height: 1.125rem; color: var(--color-on-surface-variant); background-color: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-xs, 0px);}.tech-table{width: 100%; border-collapse: collapse; font-size: 0.875rem;th, td{padding: 10px 12px; border-bottom: 1px solid var(--color-outline-variant); text-align: left; vertical-align: top;}th{font-weight: 600; color: var(--color-on-surface); background-color: var(--color-surface-container);}tr:last-child td{border-bottom: none;}}.docs-shell{max-width: var(--breakpoint-expanded, 1200px); margin: 0 auto; padding: 0 16px; width: 100%;}.doc-sidebar-col{display: none;}.sidebar.doc-sidebar{width: 100%; min-width: 0; min-height: auto; background-color: transparent; border-right: none; padding: 0;.sidebar-body{padding: 0;}.sidebar-section{margin-top: 16px; gap: 2px;}.sidebar-section:first-child{margin-top: 0;}.sidebar-section-title{padding: 4px 12px; font-family: var(--font-family-mono); font-size: 0.75rem; font-weight: 600; color: var(--color-on-surface);}.sidebar-item{padding: 6px 12px; border-radius: var(--corner-s, 0px); border-left: 2px solid transparent;}.sidebar-item.active{margin-left: 0; padding-left: 12px; background-color: var(--color-surface-container-low); border-left: 2px solid var(--color-primary);}.sidebar-item.active .sidebar-item-label{color: var(--color-primary); font-weight: 600;}}.doc-content-grid{display: block; padding: 28px 0 48px; min-width: 0;}.doc-article-col{max-width: 48rem; min-width: 0;}.doc-page-header{padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--color-outline-variant);}.doc-toc-mobile{margin-bottom: 24px; border: 1px solid var(--color-outline-variant); background-color: var(--color-surface-container-low); padding: 12px 16px;}.doc-toc-rail{display: none;}.doc-toc-list{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;a{display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--color-on-surface-variant); text-decoration: none; font-family: var(--font-family-mono);}a:hover, a:focus-visible{color: var(--color-primary); text-decoration: underline;}}.prose h2{font-family: var(--font-family-brand); font-size: 1.625rem; line-height: 2.125rem; font-weight: var(--font-weight-medium, 500); padding-bottom: 8px; border-bottom: 1px solid var(--color-outline-variant); margin-bottom: 16px; scroll-margin-top: 88px;}.prose h2:not(:first-child){margin-top: 2.25em;}.prose h3{font-family: var(--font-family-mono); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; padding-left: 10px; border-left: 3px solid var(--color-primary); scroll-margin-top: 88px;}.prose .heading-anchor{margin-left: 6px; color: var(--color-primary); text-decoration: none; font-family: var(--font-family-mono); font-weight: 500; opacity: 0; transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);}.prose h2:hover .heading-anchor, .prose h2:focus-within .heading-anchor, .prose h3:hover .heading-anchor, .prose h3:focus-within .heading-anchor, .prose .heading-anchor:focus-visible{opacity: 1;}@media (prefers-reduced-motion: reduce){.prose .heading-anchor{transition: none;}}.prose h4{scroll-margin-top: 88px;}.prose blockquote{background-color: var(--color-surface-container-low); border-radius: var(--corner-m, 0px); padding: 12px 16px;}.prose blockquote p:last-child{margin-bottom: 0;}.prose pre{background-color: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--corner-m, 0px); padding: 14px 16px; overflow-x: auto;}.prose code{font-family: var(--font-family-mono);}.doc-module-group{scroll-margin-top: 88px;}.doc-module-group:not(:first-of-type){content-visibility: auto; contain-intrinsic-size: auto none auto 300px;}.doc-symbol-group{padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 50%, transparent);}.doc-symbol-group:last-child{border-bottom: none;}.site-footer{border-top: 1px solid var(--color-outline-variant); background-color: var(--color-surface-container-low);}.social-button{display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.8; transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);&:hover, &:focus-visible{opacity: 1; color: var(--color-on-surface); text-decoration: none;}&.ringu-social-button:hover, &.ringu-social-button:focus-visible{color: #ff0000;}@media (prefers-reduced-motion: reduce){.social-button{transition: none;}}}@media (max-width: 600px){.prose table{display: block; overflow-x: auto; max-width: 100%;}.doc-filter-kbd{display: none;}.site-header .version-badge{display: none;}}@media (min-width: 840px){.mobile-nav-trigger{display: none !important;}#tangu-mobile-nav:popover-open{display: none !important;}.site-nav-links{display: flex;}.docs-shell{display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 36px; align-items: start;}.doc-sidebar-col{display: block; position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 28px 16px 32px 0; border-right: 1px solid var(--color-outline-variant);}}@media (min-width: 1200px){.doc-content-grid{display: grid; grid-template-columns: minmax(0, 48rem) 216px; gap: 40px; align-items: start; justify-content: space-between;}.doc-toc-mobile{display: none;}.doc-toc-rail{display: block; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; border-left: 1px solid var(--color-outline-variant); padding-left: 16px;}}@media (max-width: 839px){.scroll-to-top.fixed{position: sticky; bottom: 16px; right: auto; align-self: flex-end; margin-top: 24px; margin-bottom: 16px;}}