/* Copyright (c) Meta Platforms, Inc. and affiliates. */

/**
 * Astryx Reset Stylesheet
 *
 * An opinionated CSS reset that provides a clean, predictable base for
 * Astryx applications. Built on the same principles as Tailwind Preflight
 * and modern-normalize, adapted for the Astryx design system.
 *
 * This reset:
 * - Normalizes cross-browser inconsistencies
 * - Sets box-sizing: border-box universally
 * - Removes default margins, padding, and list styles
 * - Makes images block-level and responsive
 * - Resets form elements to inherit font styles
 * - Uses :where() for zero specificity (pseudo-elements go outside it)
 *
 * Usage:
 *
 * 1. Import directly (global reset):
 *    import '@astryxdesign/core/reset.css';
 *
 * 2. Combine with base styles and theme:
 *    import '@astryxdesign/core/reset.css';        // @layer reset  — clean slate
 *    import '@astryxdesign/core/astryx.css';        // @layer astryx-base — component styles
 *    import '@astryxdesign/theme-neutral/theme.css'; // @layer astryx-theme — theme overrides
 *
 * Layer order: reset → astryx-base → astryx-theme. This file registers that
 * order itself, like every Astryx stylesheet, so it holds in any load order.
 * Consumer styles (unlayered) always override all Astryx layers.
 * The reset has the lowest priority and can be overridden by any other layer.
 *
 * Similar to:
 * - Tailwind CSS Preflight
 * - Chakra UI's preflight (v3)
 * - Bootstrap Reboot
 * - modern-normalize
 */

@layer reset, astryx-base, astryx-theme;

@layer reset {

  /* ===========================================================================
     Box Model
     =========================================================================== */

  /*
   * Use border-box globally. Prevents padding/border from affecting
   * element dimensions — the single most impactful reset.
   */
  :where(*), :where(*)::before, :where(*)::after {
    box-sizing: border-box;
  }

  /*
   * Reset borders to 0-width solid. This lets you add a border by just
   * setting border-width — no need to also specify border-style.
   */
  :where(*), :where(*)::before, :where(*)::after {
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
  }

  /* ===========================================================================
     Document
     =========================================================================== */

  /*
   * Consistent line-height, prevent text size adjustment on orientation
   * change in iOS, and set a readable tab size.
   *
   * color-scheme: light dark — declares that this page supports both modes,
   * enabling CSS light-dark() to resolve correctly. Also ensures that CSS
   * tools (e.g. LightningCSS) which polyfill light-dark() for older browsers
   * inject their toggle-variable initialization in the same CSS bundle.
   * XDSTheme overrides color-scheme per-wrapper as needed.
   */
  :where(html) {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    color-scheme: light dark;
  }

  /*
   * Remove default body margin and set font smoothing for sharper text
   * rendering on macOS/iOS.
   */
  :where(body) {
    margin: 0;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ===========================================================================
     Typography
     =========================================================================== */

  /*
   * Reset headings to inherit size and weight. Headings should be styled
   * intentionally — not rely on browser defaults that vary across browsers.
   */
  :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
  }

  /*
   * Remove default margins on all block-level text elements.
   */
  :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd) {
    margin: 0;
  }

  /*
   * Links inherit color and text-decoration. Style them intentionally
   * rather than relying on browser-default blue/purple.
   */
  :where(a) {
    color: inherit;
    text-decoration: inherit;
  }

  /*
   * Correct font-weight rendering in Chrome and Safari.
   */
  :where(b, strong) {
    font-weight: bolder;
  }

  /*
   * Use the configured monospace font stack and fix the odd em sizing
   * that browsers apply to code elements.
   */
  :where(code, kbd, samp, pre) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      'Liberation Mono', 'Courier New', monospace;
    font-size: 1em;
  }

  /*
   * Correct font-size for small elements.
   */
  :where(small) {
    font-size: 80%;
  }

  /*
   * Prevent sub and sup from affecting line-height.
   */
  :where(sub, sup) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  :where(sub) {
    bottom: -0.25em;
  }

  :where(sup) {
    top: -0.5em;
  }

  /* ===========================================================================
     Lists
     =========================================================================== */

  /*
   * Remove default list styles, margin, and padding. Lists used for
   * navigation or layout shouldn't carry prose styling by default.
   * Use explicit styles for prose lists.
   */
  :where(ol, ul, menu) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ===========================================================================
     Media
     =========================================================================== */

  /*
   * Make replaced elements block-level. Eliminates the "mystery gap"
   * below inline images and aligns with how these elements are
   * actually used in modern layouts.
   */
  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }

  /*
   * Constrain images and video to their container. Responsive by default.
   */
  :where(img, video) {
    max-width: 100%;
    height: auto;
  }

  /* ===========================================================================
     Forms
     =========================================================================== */

  /*
   * Form elements should inherit font styles from their parent rather
   * than using the browser's default font stack.
   */
  :where(button, input, optgroup, select, textarea) {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  /*
   * Remove default button styling. Buttons should be styled intentionally.
   */
  :where(button, [type='button'], [type='reset'], [type='submit']) {
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
  }

  /*
   * Pointer cursor for interactive elements.
   */
  :where(button, [role='button']) {
    cursor: pointer;
  }

  /*
   * Disabled elements take back any interactive cursor: a control that will
   * not respond must not answer the pointer as though it will. `default`
   * rather than `not-allowed` — a disabled control sealed behind
   * `pointer-events: none` shows whatever its ancestor shows, and one cursor
   * everywhere beats a stronger one we can only paint on half of them.
   * Covers [aria-disabled] too: astryx keeps a disabled control focusable
   * that way wherever its reason must stay discoverable (Button with a
   * tooltip, Selector's trigger, SideNavItem).
   */
  :where(:disabled, [aria-disabled='true']) {
    cursor: default;
  }

  /*
   * Only allow vertical resizing of textareas to prevent layout breakage.
   */
  :where(textarea) {
    resize: vertical;
  }

  /*
   * Normalize placeholder opacity (Firefox renders at reduced opacity)
   * and color it with the --color-text-secondary token, or its default.
   */
  :where(input, textarea)::placeholder {
    opacity: 1;
    color: var(--color-text-secondary, light-dark(#4E606F, #AAAFB5));
  }

  /*
   * Chromium draws the dropdown marker of a field with a `list` as a glyph
   * set on the line-height the field inherits, so with any line-height above
   * 1 the marker sits below the middle of the field.
   */
  :where([list])::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  /*
   * Remove the inner padding and cancel buttons in search inputs
   * for Chrome and Safari.
   */
  :where([type='search'])::-webkit-search-decoration,
  :where([type='search'])::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  /*
   * Remove default fieldset styles.
   */
  :where(fieldset) {
    margin: 0;
    padding: 0;
  }

  :where(legend) {
    padding: 0;
  }

  /* ===========================================================================
     Tables
     =========================================================================== */

  /*
   * Collapse table borders and fix text-indent/border-color inheritance.
   */
  :where(table) {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  /* ===========================================================================
     Misc
     =========================================================================== */

  /*
   * Simplify hr to a single border-top line.
   */
  :where(hr) {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  /*
   * Correct display for summary elements.
   */
  :where(summary) {
    display: list-item;
  }

  /*
   * Reset dialog padding and outline.
   */
  :where(dialog) {
    padding: 0;
    outline: none;
  }

  /*
   * Ensure hidden elements are actually hidden. `hidden="until-found"` keeps
   * the browser's own rendering, `content-visibility: hidden`, so find in page
   * and text fragment links can still find its content and reveal it.
   */
  :where([hidden]:not([hidden='until-found' i])) {
    display: none;
  }

  /*
   * Remove tap highlight on iOS.
   */
  :where(html) {
    -webkit-tap-highlight-color: transparent;
  }

  /* ===========================================================================
     Color Scheme
     =========================================================================== */

  /*
   * Map data-theme attribute to CSS color-scheme.
   *
   * Setting data-theme on <html> tells the browser which color scheme
   * to use for native UI elements (scrollbars, form controls, date
   * pickers) and enables CSS light-dark() to resolve correctly.
   *
   * XDSTheme auto-detects when it's the root provider and syncs this
   * attribute on the client. For RSC / SSR, set it on <html> in your
   * root layout to avoid a flash of wrong theme:
   *
   *   <html lang="en" data-theme="dark">
   *
   * Values: "light" | "dark" | omitted (defaults to light dark = system)
   */
  :where(html[data-theme="light"]) {
    color-scheme: light;
  }

  :where(html[data-theme="dark"]) {
    color-scheme: dark;
  }

  :where(html:not([data-theme])) {
    color-scheme: light dark;
  }

  /* ===========================================================================
     Media Theme Baseline
     =========================================================================== */

  /*
   * color-scheme flip for [data-*-media] — makes light-dark() base
   * tokens resolve correctly on inverted surfaces without a theme.
   * Token overrides (text/icon/accent) are theme-level (generateOnMediaCSS).
   * Dual-prefix (astryx + legacy xds) during the compat window.
   */
  :where([data-astryx-media="dark"]) {
    color-scheme: dark;
  }

  :where([data-astryx-media="light"]) {
    color-scheme: light;
  }
}

/* Astryx Pre-compiled StyleX CSS — all components */
/* Auto-generated. Do not edit manually. */

@layer reset, astryx-base, astryx-theme;

@layer astryx-base {
  @property --x---_avatar-group-overlap { syntax: "*"; inherits: false;}
  @property --x---_codeblock-gutter-width { syntax: "*"; inherits: false;}
  @property --x---_hover-delay { syntax: "*"; inherits: false;}
  @property --x---_layer-keyboard-inset-block-end { syntax: "*"; inherits: false;}
  @property --x---_layer-keyboard-max-block-size { syntax: "*"; inherits: false;}
  @property --x---_layer-keyboard-overflow { syntax: "*"; inherits: false;}
  @property --x---_tab-indicator-bottom { syntax: "*"; inherits: false;}
  @property --x---container-max-height { syntax: "*"; inherits: false;}
  @property --x---layout-alignment-width { syntax: "*"; inherits: false;}
  @property --x---layout-content-width { syntax: "*"; inherits: false;}
  @property --x-126w13d { syntax: "*"; inherits: false;}
  @property --x-1xmrurk { syntax: "*"; inherits: false;}
  @property --x-4drmnv { syntax: "*"; inherits: false;}
  @property --x-animationDelay { syntax: "*"; inherits: false;}
  @property --x-aspectRatio { syntax: "*"; inherits: false;}
  @property --x-backgroundColor { syntax: "*"; inherits: false;}
  @property --x-borderWidth { syntax: "*"; inherits: false;}
  @property --x-bottom { syntax: "*"; inherits: false;}
  @property --x-color { syntax: "*"; inherits: false;}
  @property --x-counterReset { syntax: "*"; inherits: false;}
  @property --x-fontSize { syntax: "*"; inherits: false;}
  @property --x-fqzwsx { syntax: "*"; inherits: false;}
  @property --x-gap { syntax: "*"; inherits: false;}
  @property --x-gridAutoRows { syntax: "*"; inherits: false;}
  @property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
  @property --x-height { syntax: "*"; inherits: false;}
  @property --x-inlineSize { syntax: "*"; inherits: false;}
  @property --x-insetBlockStart { syntax: "*"; inherits: false;}
  @property --x-insetInlineEnd { syntax: "*"; inherits: false;}
  @property --x-insetInlineStart { syntax: "*"; inherits: false;}
  @property --x-marginBlock { syntax: "*"; inherits: false;}
  @property --x-marginBlockEnd { syntax: "*"; inherits: false;}
  @property --x-marginBlockStart { syntax: "*"; inherits: false;}
  @property --x-marginInline { syntax: "*"; inherits: false;}
  @property --x-marginInlineEnd { syntax: "*"; inherits: false;}
  @property --x-marginInlineStart { syntax: "*"; inherits: false;}
  @property --x-maxBlockSize { syntax: "*"; inherits: false;}
  @property --x-maxHeight { syntax: "*"; inherits: false;}
  @property --x-maxWidth { syntax: "*"; inherits: false;}
  @property --x-minHeight { syntax: "*"; inherits: false;}
  @property --x-minWidth { syntax: "*"; inherits: false;}
  @property --x-overflowX { syntax: "*"; inherits: false;}
  @property --x-overflowY { syntax: "*"; inherits: false;}
  @property --x-paddingBlock { syntax: "*"; inherits: false;}
  @property --x-paddingInline { syntax: "*"; inherits: false;}
  @property --x-paddingInlineEnd { syntax: "*"; inherits: false;}
  @property --x-paddingInlineStart { syntax: "*"; inherits: false;}
  @property --x-top { syntax: "*"; inherits: false;}
  @property --x-transform { syntax: "*"; inherits: false;}
  @property --x-WebkitLineClamp { syntax: "*"; inherits: false;}
  @property --x-width { syntax: "*"; inherits: false;}
  @property --x-1dd27dc { syntax: "*"; inherits: true;}
  @property --x-nsbhg8 { syntax: "*"; inherits: true;}
  @property --x-owu7oy { syntax: "*"; inherits: true;}
  @property --astryx-press-alpha { syntax: "<number>"; inherits: true; initial-value: 0 }
  @keyframes x10jkm1t-B{from{--astryx-press-alpha:1;}to{--astryx-press-alpha:0;}}
  @keyframes x1ofkhwi-B{0%{color:color-mix(in oklab,var(--color-text-primary),var(--color-text-secondary));}50%{color:var(--color-text-primary);}100%{color:color-mix(in oklab,var(--color-text-primary),var(--color-text-secondary));}}
  @keyframes x188b6p3-B{from{color:inherit;}to{color:transparent;}}
  @keyframes xuvekqa-B{0%{opacity:.3;}50%{opacity:1;}100%{opacity:.3;}}
  @keyframes x1tut0r7-B{0%{opacity:.3;transform:rotateX(52deg) scale(.86);}50%{opacity:1;transform:rotateX(0deg) scale(1);}100%{opacity:.3;transform:rotateX(-52deg) scale(.86);}}
  @keyframes x13kz0yu-B{0%, 100%{opacity:1;}50%{opacity:.5;}}
  @keyframes x132z07p-B{0%{opacity:.25;}9.99%{opacity:.25;}10%{opacity:.325;}19.99%{opacity:.325;}20%{opacity:.4;}29.99%{opacity:.4;}30%{opacity:.475;}39.99%{opacity:.475;}40%{opacity:.55;}49.99%{opacity:.55;}50%{opacity:.625;}59.99%{opacity:.625;}60%{opacity:.7;}69.99%{opacity:.7;}70%{opacity:.775;}79.99%{opacity:.775;}80%{opacity:.85;}89.99%{opacity:.85;}90%{opacity:.925;}100%{opacity:.925;}}
  @keyframes x1jn504y-B{from{opacity:1;}to{opacity:0;}}
  @keyframes x12p7u8f-B{from{opacity:0;animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1);}to{opacity:1;}}
  @keyframes x18re5ia-B{from{opacity:0;}to{opacity:1;}}
  @keyframes xtut5q7-B{0%{opacity:1;}50%{opacity:.5;}100%{opacity:1;}}
  @keyframes x1k48ry3-B{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
  @keyframes x11lauxq-B{from{opacity:0;transform:translate(var(--dialog-dir-x,0px),var(--dialog-dir-y,16px)) scale(.95);}to{opacity:1;transform:translate(0,0) scale(1);}}
  @keyframes xu7jd1z-B{from{opacity:0;transform:translateX(var(--spacing-2)) scale(.95);}to{opacity:1;transform:translateX(0) scale(1);}}
  @keyframes xwmkjkf-B{from{opacity:0;transform:translateX(calc(-1 * var(--spacing-2))) scale(.95);}to{opacity:1;transform:translateX(0) scale(1);}}
  @keyframes x1ahk7ht-B{from{opacity:0;transform:translateY(var(--spacing-2)) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
  @keyframes xv1hr86-B{from{opacity:0;transform:translateY(calc(-1 * var(--spacing-2))) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
  @keyframes x1b6yrix-B{from{opacity:0;transform:translateY(var(--spacing-2));}to{opacity:1;transform:translateY(0);}}
  @keyframes xiylxmw-B{from{opacity:0;transform:translateY(calc(-1 * var(--spacing-2)));}to{opacity:1;transform:translateY(0);}}
  @keyframes xml828b-B{from{opacity:1;}to{opacity:var(--_progress-bar-pulse-floor);}}
  @keyframes x11cqc53-B{0%{transform:rotate(0deg);}100%{transform:rotate(36000deg);}}
  @keyframes x18sn2u9-B{0%{transform:rotateX(52deg) scale(.86);}50%{transform:rotateX(0deg) scale(1);}100%{transform:rotateX(-52deg) scale(.86);}}
  @keyframes x1c2q33o-B{0%{transform:translateX(100%);}100%{transform:translateX(-250%);}}
  @keyframes xr3m334-B{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}
  @keyframes x1xhkexc-B{from{width:0;margin-inline-end:0;opacity:0;}to{width:14px;margin-inline-end:var(--spacing-1);opacity:1;}}
  :root {--_chat-avatar-offset:0px;}
  :root {--astryx-press-alpha:0;}
  :root {--border-width:1px;}
  :root {--color-accent:light-dark(#0064E0, #0171E3);--color-accent-muted:light-dark(#0082FB33, #0082FB3F);--color-on-accent:light-dark(#FFFFFF, #FFFFFF);--color-neutral:light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2));--color-background-surface:light-dark(#FFFFFF, #1F1F22);--color-background-body:light-dark(#F1F4F7, #111112);--color-overlay:light-dark(#01122866, #11111299);--color-overlay-hover:light-dark(#0536590C, #FFFFFF0C);--color-overlay-pressed:light-dark(#05365919, #FFFFFF19);--color-background-muted:light-dark(#0536590C, #1111127F);--color-text-primary:light-dark(#0A1317, #DFE2E5);--color-text-secondary:light-dark(#4E606F, #AAAFB5);--color-text-disabled:light-dark(#A4B0BC, #6F747C);--color-text-accent:light-dark(#0064E0, #3E9EFB);--color-on-dark:light-dark(#FFFFFF, #FFFFFF);--color-on-light:light-dark(#000000, #000000);--color-icon-accent:light-dark(#0064E0, #2694FE);--color-icon-primary:light-dark(#0A1317, #DFE2E5);--color-icon-secondary:light-dark(#4E606F, #AAAFB5);--color-icon-disabled:light-dark(#A4B0BC, #6F747C);--color-background-card:light-dark(#FFFFFF, #1F1F22);--color-background-popover:light-dark(#FFFFFF, #28292C);--color-background-inverted:light-dark(#0A1317, #FFFFFF);--color-background-error-inverted:light-dark(#AA071E, #E3193B);--color-info:light-dark(#0064E0, #0064E0);--color-info-muted:light-dark(#0082FB33, #0082FB3F);--color-on-info:light-dark(#FFFFFF, #FFFFFF);--color-success:light-dark(#0D8626, #0D8626);--color-success-muted:light-dark(#0B991F33, #0B991F3F);--color-on-success:light-dark(#FFFFFF, #FFFFFF);--color-error:light-dark(#E3193B, #F5394F);--color-error-muted:light-dark(#E3193B33, #F5394F3F);--color-on-error:light-dark(#FFFFFF, #0A1317);--color-warning:light-dark(#E9AF08, #F2C00B);--color-warning-muted:light-dark(#E2A40033, #E2A4003F);--color-on-warning:light-dark(#0A1317, #0A1317);--color-text-info:var(--color-text-blue);--color-text-success:var(--color-text-green);--color-text-warning:var(--color-text-yellow);--color-text-error:var(--color-text-red);--color-icon-info:var(--color-text-info);--color-icon-success:var(--color-text-success);--color-icon-warning:var(--color-text-warning);--color-icon-error:var(--color-text-error);--color-border-info:var(--color-text-info);--color-border-success:var(--color-text-success);--color-border-warning:var(--color-text-warning);--color-border-error:var(--color-text-error);--color-on-info-muted:var(--color-text-blue);--color-on-success-muted:var(--color-text-green);--color-on-warning-muted:var(--color-text-yellow);--color-on-error-muted:var(--color-text-red);--color-border:light-dark(#05365919, #F2F4F619);--color-border-emphasized:light-dark(#CCD3DB, #494D53);--color-skeleton:light-dark(#CCD3DB, #5A5E66);--color-track:light-dark(#CCD3DB, #5A5E66);--color-shadow:light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3));--color-tint-hover:light-dark(black, white);--color-background-blue:light-dark(#0171E333, #0171E333);--color-border-blue:light-dark(#0064E0, #2694FE);--color-icon-blue:light-dark(#0064E0, #2694FE);--color-text-blue:light-dark(#042F97, #AFD7FF);--color-background-cyan:light-dark(#03A7D733, #03A7D733);--color-border-cyan:light-dark(#089DD0, #0171A4);--color-icon-cyan:light-dark(#00ACC1, #26C6DA);--color-text-cyan:light-dark(#014975, #A1EEF9);--color-background-gray:light-dark(#0A131733, #666A724C);--color-border-gray:light-dark(#647685, #748695);--color-icon-gray:light-dark(#4E606F, #AAAFB5);--color-text-gray:light-dark(#0A1317, #E7EAED);--color-background-green:light-dark(#24BB5E33, #24BB5E33);--color-border-green:light-dark(#0D8626, #0B991F);--color-icon-green:light-dark(#0D8626, #26A756);--color-text-green:light-dark(#09441F, #A5F690);--color-background-orange:light-dark(#F2790233, #F2790233);--color-border-orange:light-dark(#EB6E00, #B34A01);--color-icon-orange:light-dark(#E9690B, #FB8C00);--color-text-orange:light-dark(#6B2203, #FDB876);--color-background-pink:light-dark(#E638B333, #E638B333);--color-border-pink:light-dark(#F351C0, #C02294);--color-icon-pink:light-dark(#C2185B, #EC407A);--color-text-pink:light-dark(#650053, #FEADE3);--color-background-purple:light-dark(#7952FF33, #7952FF33);--color-border-purple:light-dark(#9081FF, #7340FE);--color-icon-purple:light-dark(#5B08D8, #7952FF);--color-text-purple:light-dark(#3E0697, #B3B0FE);--color-background-red:light-dark(#E3193B33, #E3193B33);--color-border-red:light-dark(#E3193B, #F5394F);--color-icon-red:light-dark(#D31130, #E3193B);--color-text-red:light-dark(#7B0210, #FFB2B8);--color-background-teal:light-dark(#0DB7AF33, #0DB7AF33);--color-border-teal:light-dark(#08A3A3, #08767D);--color-icon-teal:light-dark(#009688, #26A69A);--color-text-teal:light-dark(#083943, #40DCCD);--color-background-yellow:light-dark(#E2A40033, #E2A40033);--color-border-yellow:light-dark(#C58600, #B47700);--color-icon-yellow:light-dark(#FBC02D, #FFEE58);--color-text-yellow:light-dark(#753F07, #FBCE03);}
  :root {--color-data-categorical-blue:light-dark(#0171E3, #0171E3);--color-data-categorical-orange:light-dark(#EB6E00, #EB6E00);--color-data-categorical-purple:light-dark(#6B1EFD, #6B1EFD);--color-data-categorical-green:light-dark(#0B991F, #0B991F);--color-data-categorical-pink:light-dark(#F351C0, #F351C0);--color-data-categorical-cyan:light-dark(#0171A4, #0171A4);--color-data-categorical-red:light-dark(#F5394F, #F5394F);--color-data-categorical-teal:light-dark(#08A3A3, #08A3A3);--color-data-categorical-brown:light-dark(#965E03, #965E03);--color-data-categorical-indigo:light-dark(#6F8AFF, #6F8AFF);--color-data-neutral:light-dark(#8494A3, #8C939B);--color-data-blue-5:light-dark(#02165E, #02165E);--color-data-blue-4:light-dark(#004CBC, #004CBC);--color-data-blue-3:light-dark(#2694FE, #2694FE);--color-data-blue-2:light-dark(#78BEFF, #78BEFF);--color-data-blue-1:light-dark(#DBECFF, #DBECFF);--color-data-shamrock-5:light-dark(#0B603D, #0B603D);--color-data-shamrock-4:light-dark(#138546, #138546);--color-data-shamrock-3:light-dark(#24BB5E, #24BB5E);--color-data-shamrock-2:light-dark(#8EF7AA, #8EF7AA);--color-data-shamrock-1:light-dark(#D6FEE4, #D6FEE4);--color-data-orange-5:light-dark(#A13F04, #A13F04);--color-data-orange-4:light-dark(#D66100, #D66100);--color-data-orange-3:light-dark(#FD9537, #FD9537);--color-data-orange-2:light-dark(#FDB876, #FDB876);--color-data-orange-1:light-dark(#FFE6CF, #FFE6CF);--color-data-pink-5:light-dark(#8E1073, #8E1073);--color-data-pink-4:light-dark(#D123A1, #D123A1);--color-data-pink-3:light-dark(#F989D3, #F989D3);--color-data-pink-2:light-dark(#FEADE3, #FEADE3);--color-data-pink-1:light-dark(#FCE3F4, #FCE3F4);--color-data-purple-5:light-dark(#3E0697, #3E0697);--color-data-purple-4:light-dark(#6B1EFD, #6B1EFD);--color-data-purple-3:light-dark(#9081FF, #9081FF);--color-data-purple-2:light-dark(#B3B0FE, #B3B0FE);--color-data-purple-1:light-dark(#E8E8FB, #E8E8FB);--color-data-red-5:light-dark(#9D0519, #9D0519);--color-data-red-4:light-dark(#D31130, #D31130);--color-data-red-3:light-dark(#FB7D87, #FB7D87);--color-data-red-2:light-dark(#FFB2B8, #FFB2B8);--color-data-red-1:light-dark(#FEE4E6, #FEE4E6);--color-data-teal-5:light-dark(#08767D, #08767D);--color-data-teal-4:light-dark(#0C9293, #0C9293);--color-data-teal-3:light-dark(#0DB7AF, #0DB7AF);--color-data-teal-2:light-dark(#6CE6D8, #6CE6D8);--color-data-teal-1:light-dark(#D7FCF8, #D7FCF8);--color-data-yellow-5:light-dark(#8A5001, #8A5001);--color-data-yellow-4:light-dark(#D69804, #D69804);--color-data-yellow-3:light-dark(#FBCE03, #FBCE03);--color-data-yellow-2:light-dark(#FCEC85, #FCEC85);--color-data-yellow-1:light-dark(#FDF6BA, #FDF6BA);--color-data-gray-5:light-dark(#25363F, #333338);--color-data-gray-4:light-dark(#5D6C7B, #666A72);--color-data-gray-3:light-dark(#AFB9C4, #B2B8BE);--color-data-gray-2:light-dark(#CCD3DB, #D0D3D6);--color-data-gray-1:light-dark(#F1F4F7, #F2F4F6);}
  :root {--duration-fast-min:130ms;--duration-fast:175ms;--duration-fast-max:230ms;--duration-medium-min:310ms;--duration-medium:410ms;--duration-medium-max:550ms;--duration-slow-min:730ms;--duration-slow:975ms;--duration-slow-max:1300ms;--duration-exit:var(--duration-fast);}
  :root {--ease-standard:cubic-bezier(0.24, 1, 0.4, 1);--ease-entrance:cubic-bezier(0.24, 1, 0.4, 1);--ease-move:cubic-bezier(0.24, 1, 0.4, 1);--ease-exit:cubic-bezier(0.3, 0, 0.6, 0.6);}
  :root {--focus-outline-width:2px;--focus-outline-style:solid;--focus-outline-color:var(--color-accent);--focus-outline-offset:3px;}
  :root {--font-family-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-family-code:"SF Mono", Monaco, Consolas, monospace;--font-family-heading:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
  :root {--font-size-4xs:0.375rem;--font-size-3xs:0.4375rem;--font-size-2xs:0.5rem;--font-size-xs:0.625rem;--font-size-sm:0.75rem;--font-size-base:0.875rem;--font-size-lg:1.0625rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.8125rem;--font-size-4xl:2.1875rem;--font-size-5xl:2.625rem;}
  :root {--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;}
  :root {--radius-none:0px;--radius-inner:4px;--radius-element:8px;--radius-container:12px;--radius-page:28px;--radius-chat:28px;--radius-full:9999px;}
  :root {--shadow-low:0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));--shadow-med:0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));--shadow-high:0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));--shadow-inset-hover:inset 0px 0px 0px 2px light-dark(rgba(5, 54, 89, 0.15), rgba(223, 226, 229, 0.2));--shadow-inset-selected:inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5);--shadow-inset-success:inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3);--shadow-inset-warning:inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3);--shadow-inset-error:inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3);}
  :root {--size-element-sm:28px;--size-element-md:32px;--size-element-lg:36px;}
  :root {--spacing-0:0rem;--spacing-0-5:0.125rem;--spacing-1:0.25rem;--spacing-1-5:0.375rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;}
  :root {--text-heading-1-size:var(--font-size-2xl);--text-heading-1-weight:var(--font-weight-semibold);--text-heading-1-leading:1.3333;--text-heading-2-size:var(--font-size-xl);--text-heading-2-weight:var(--font-weight-semibold);--text-heading-2-leading:1.4;--text-heading-3-size:var(--font-size-lg);--text-heading-3-weight:var(--font-weight-semibold);--text-heading-3-leading:1.4118;--text-heading-4-size:var(--font-size-base);--text-heading-4-weight:var(--font-weight-semibold);--text-heading-4-leading:1.4286;--text-heading-5-size:var(--font-size-sm);--text-heading-5-weight:var(--font-weight-semibold);--text-heading-5-leading:1.6667;--text-heading-6-size:var(--font-size-xs);--text-heading-6-weight:var(--font-weight-semibold);--text-heading-6-leading:1.6;--text-body-size:var(--font-size-base);--text-body-weight:var(--font-weight-normal);--text-body-leading:1.4286;--text-large-size:var(--font-size-lg);--text-large-weight:var(--font-weight-semibold);--text-large-leading:1.4118;--text-label-size:var(--font-size-base);--text-label-weight:var(--font-weight-medium);--text-label-leading:1.4286;--text-code-size:var(--font-size-base);--text-code-weight:var(--font-weight-normal);--text-code-leading:1.4286;--text-supporting-size:var(--font-size-sm);--text-supporting-weight:var(--font-weight-normal);--text-supporting-leading:1.6667;--text-display-1-size:var(--font-size-5xl);--text-display-1-weight:var(--font-weight-normal);--text-display-1-leading:1.2381;--text-display-2-size:var(--font-size-4xl);--text-display-2-weight:var(--font-weight-normal);--text-display-2-leading:1.2571;--text-display-3-size:var(--font-size-3xl);--text-display-3-weight:var(--font-weight-normal);--text-display-3-leading:1.2414;}
  .x1nwg5ib{--_item-inset-inline:0px}
  .x1l7afqf{--_press-paint-image:linear-gradient(var(--_press-paint),var(--_press-paint))}
  .xz2mauf{--_press-paint:color-mix(in srgb,var(--color-overlay-pressed) calc(var(--astryx-press-alpha) * 100%),transparent)}
  .x16bblx1{--button-focus-offset:var(--focus-outline-offset)}
  .xkdpibf:not(#\#){margin:-1px}
  .x1ghz6dp:not(#\#){margin:0}
  .x1717udv:not(#\#){padding:0}
  .xlsj2fj:not(#\#){padding:var(--spacing-2)}
  .x2u8bby:not(#\#):not(#\#){border-radius:0}
  .x1jxw6zd:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-element))}
  .xh6dtrn:not(#\#):not(#\#){border-radius:var(--radius-element)}
  .xng3xce:not(#\#):not(#\#){border-style:none}
  .xc342km:not(#\#):not(#\#){border-width:0}
  .x845mor:not(#\#):not(#\#){flex:1 1 0%}
  .x98rzlu:not(#\#):not(#\#){flex:1}
  .xxhr3t:not(#\#):not(#\#){gap:0}
  .x14kbac9:not(#\#):not(#\#){gap:inherit}
  .x1lsbc85:not(#\#):not(#\#){gap:var(--spacing-0-5)}
  .xzye2dw:not(#\#):not(#\#){gap:var(--spacing-1)}
  .x1txdalj:not(#\#):not(#\#){gap:var(--spacing-2)}
  .x18g69wz:not(#\#):not(#\#){gap:var(--spacing-4)}
  .x4t41sb:not(#\#):not(#\#){gap:var(--spacing-8)}
  .x1a2a7pz:not(#\#):not(#\#){outline:none}
  .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
  .xt970qd:not(#\#):not(#\#){padding-block:0}
  .x1vofgu7:not(#\#):not(#\#){padding-block:var(--spacing-1-5)}
  .xce4md1:not(#\#):not(#\#){padding-block:var(--spacing-2)}
  .x8o8v82:not(#\#):not(#\#){padding-block:var(--spacing-3)}
  .xaip428:not(#\#):not(#\#){padding-inline:var(--_item-inset-inline)}
  .xrrkdod:not(#\#):not(#\#){padding-inline:var(--spacing-3)}
  .x1hl2dhg:not(#\#):not(#\#){text-decoration:none}
  .x1bvjpef:not(#\#):not(#\#){text-decoration:underline}
  @media (hover: hover){.x13nosk6.x13nosk6.x13nosk6:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){text-decoration:underline}}
  .x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
  .x1h91t0o:not(#\#):not(#\#):not(#\#){align-items:inherit}
  .xkh2ocl:not(#\#):not(#\#):not(#\#){align-self:stretch}
  .xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
  .x1ewilqj:not(#\#):not(#\#):not(#\#){background-color:var(--color-accent)}
  .x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
  .x9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
  .xzpqnlu:not(#\#):not(#\#):not(#\#){clip:rect(0,0,0,0)}
  .x19aimcq:not(#\#):not(#\#):not(#\#){color-scheme:light}
  .x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
  .x1gb3s7i:not(#\#):not(#\#):not(#\#){color:var(--_item-description-color,var(--color-text-secondary))}
  .x5tbw38:not(#\#):not(#\#):not(#\#){color:var(--_item-label-color,var(--color-text-primary))}
  .x17wrial:not(#\#):not(#\#):not(#\#){color:var(--color-on-accent)}
  .xjse4m1:not(#\#):not(#\#):not(#\#){color:var(--color-text-accent)}
  .x1tgivj0:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}
  .xv1l7n4:not(#\#):not(#\#):not(#\#){color:var(--color-text-secondary)}
  .x1lfs0n9:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-1)}
  .xak3so:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-2)}
  .xewh9hi:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-3)}
  .xty4p9g:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-4)}
  .x1eqhezk:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-5)}
  .x3qlgwd:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-6)}
  .xmper1u:not(#\#):not(#\#):not(#\#){cursor:inherit}
  .x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
  .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
  .xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
  .x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
  .xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
  .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
  .xt0psk2:not(#\#):not(#\#):not(#\#){display:inline}
  .xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
  .xdt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
  .x1beo9mf:not(#\#):not(#\#):not(#\#){flex-direction:inherit}
  .x1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
  .x1iyjqo2:not(#\#):not(#\#):not(#\#){flex-grow:1}
  .x2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}
  .xs83m0k:not(#\#):not(#\#):not(#\#){flex-shrink:1}
  .x18qz0cn:not(#\#):not(#\#):not(#\#){flex-wrap:inherit}
  .x1a02dak:not(#\#):not(#\#):not(#\#){flex-wrap:wrap}
  .xjb2p0i:not(#\#):not(#\#):not(#\#){font-family:inherit}
  .x9ynric:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-body)}
  .x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit}
  .xjm74w1:not(#\#):not(#\#):not(#\#){font-size:var(--text-body-size)}
  .x1yego12:not(#\#):not(#\#):not(#\#){font-size:var(--text-display-2-size)}
  .x1xvnhcw:not(#\#):not(#\#):not(#\#){font-size:var(--text-heading-2-size)}
  .xii13ha:not(#\#):not(#\#):not(#\#){font-size:var(--text-heading-3-size)}
  .xcr08ib:not(#\#):not(#\#):not(#\#){font-size:var(--text-label-size)}
  .x18juvz8:not(#\#):not(#\#):not(#\#){font-size:var(--text-large-size)}
  .x141an7d:not(#\#):not(#\#):not(#\#){font-size:var(--text-supporting-size)}
  .x1pd3egz:not(#\#):not(#\#):not(#\#){font-weight:inherit}
  .x1e4wzip:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-medium)}
  .x1sodnla:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-normal)}
  .x2mo6ok:not(#\#):not(#\#):not(#\#){font-weight:var(--font-weight-semibold)}
  .xxovm9e:not(#\#):not(#\#):not(#\#){font-weight:var(--text-body-weight)}
  .x1y36c3f:not(#\#):not(#\#):not(#\#){font-weight:var(--text-display-2-weight)}
  .x12yy4cs:not(#\#):not(#\#):not(#\#){font-weight:var(--text-heading-2-weight)}
  .x1jcxfy8:not(#\#):not(#\#):not(#\#){font-weight:var(--text-heading-3-weight)}
  .x149oux8:not(#\#):not(#\#):not(#\#){font-weight:var(--text-large-weight)}
  .xv8on6e:not(#\#):not(#\#):not(#\#){font-weight:var(--text-supporting-weight)}
  .xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
  .x1o0tod:not(#\#):not(#\#):not(#\#){inset-inline-start:0}
  .xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
  .xarpa2k:not(#\#):not(#\#):not(#\#){justify-content:inherit}
  .x1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
  .x15bjb6t:not(#\#):not(#\#):not(#\#){line-height:inherit}
  .xw6l6zx:not(#\#):not(#\#):not(#\#){line-height:var(--text-body-leading)}
  .xh0iwvy:not(#\#):not(#\#):not(#\#){line-height:var(--text-display-2-leading)}
  .x1cpk1wn:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-2-leading)}
  .xwjzt0u:not(#\#):not(#\#):not(#\#){line-height:var(--text-heading-3-leading)}
  .x1kq96og:not(#\#):not(#\#):not(#\#){line-height:var(--text-label-leading)}
  .xf74fhv:not(#\#):not(#\#):not(#\#){line-height:var(--text-large-leading)}
  .x1ltkj2j:not(#\#):not(#\#):not(#\#){line-height:var(--text-supporting-leading)}
  .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
  .xvc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}
  .x1wfwxd8:not(#\#):not(#\#):not(#\#){outline-offset:0}
  .x1t137rt:not(#\#):not(#\#):not(#\#){outline-style:none}
  .x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
  .xh015us:not(#\#):not(#\#):not(#\#){overflow-wrap:var(--_astryx-text-overflow-wrap,break-word)}
  .x1djylfy:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--spacing-2)}
  .x1c1uobl:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
  .x12gdq22:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-2)}
  .x47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}
  .x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
  .x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
  .x1ngg2t4:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-1)}
  .x1x7z4sm:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-2)}
  .x4olc9o:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-3)}
  .xtx9w7w:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-4)}
  .x1iu6piu:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-5)}
  .xczp1bk:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-6)}
  .x2b8uid:not(#\#):not(#\#):not(#\#){text-align:center}
  .x1yc453h:not(#\#):not(#\#):not(#\#){text-align:start}
  .xlyipyv:not(#\#):not(#\#):not(#\#){text-overflow:ellipsis}
  .x3oybdh:not(#\#):not(#\#):not(#\#){transform:scale(1)}
  .xkvfbh3:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-min)}
  .xuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}
  .xs2xxs2:not(#\#):not(#\#):not(#\#){transition-property:background-color,color}
  .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
  .xrafxwg:not(#\#):not(#\#):not(#\#){transition-property:background-image,background-color,color,opacity,transform}
  .x1mpt4pi:not(#\#):not(#\#):not(#\#){transition-property:color,text-decoration}
  .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
  .x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
  .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
  .x11z29ks[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
  .xli5ek3[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
  .x16khyan:is(:disabled,[aria-disabled="true"]):not(#\#):not(#\#):not(#\#){cursor:default}
  .xx47ajj:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
  .x13aywxo:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--button-focus-offset)}
  .x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
  .x1jhp3zv:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
  .x1vidyx5:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
  .x8ppqj.x8ppqj:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(.98)}
  .x1uy843r:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
  .x1jumodi:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
  .xciu248:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
  .x11j6mr8:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
  .xmnmr5y:has(.astryx-nav-icon):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
  @media (pointer: coarse){.xsmms64.xsmms64:not(#\#):not(#\#):not(#\#){isolation:isolate}}
  @media (prefers-reduced-motion: reduce){.x12w9bfk.x12w9bfk:not(#\#):not(#\#):not(#\#){transition-duration:0s}}
  .x1anq1lc.x1anq1lc:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
  .x7uyq82.x7uyq82:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}
  @media (hover: hover){.xoevpu5.xoevpu5.xoevpu5:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
  @media (hover: hover){.xmvprkv.xmvprkv.xmvprkv:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-hover),var(--color-overlay-hover))}}
  @media (hover: hover){.x1rfoswn.x1rfoswn.x1rfoswn:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-accent),var(--color-tint-hover) 15%)}}
  @media (pointer: coarse){.xif6eam.xif6eam:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#){isolation:isolate}}
  @media (((pointer: coarse) and (not (prefers-reduced-motion: reduce)) and (not (prefers-reduced-motion: reduce))) or ((pointer: coarse) and (not (prefers-reduced-motion: reduce)) and (not ((not (pointer: coarse)))))) or (((pointer: coarse) and (not (pointer: coarse)) and (not (prefers-reduced-motion: reduce))) or ((pointer: coarse) and (not (pointer: coarse)) and (not ((not (pointer: coarse)))))){.x1249l8d.x1249l8d.x1249l8d:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
  @media ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not (prefers-reduced-motion: reduce))) or ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not ((not (pointer: coarse))))){.xbht4k1.xbht4k1.xbht4k1:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
  @media (prefers-reduced-motion: reduce) and (not (pointer: coarse)){.x1ex9uxt.x1ex9uxt.x1ex9uxt:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
  @media (pointer: coarse){.x1mrddfy.x1mrddfy:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#){will-change:transform}}
  .xz086lz.xz086lz:active:not(:first-child):where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){box-shadow:0 calc(-1 * var(--border-width)) 0 0 var(--color-overlay-pressed)}
  @media (pointer: coarse){.x1s5nr2v.x1s5nr2v.x1s5nr2v:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:transparent}}
  @media (hover: hover){.xprvw0a.xprvw0a.xprvw0a:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}}
  @media (hover: hover){.xetgvay.xetgvay.xetgvay:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}}
  @media (pointer: coarse){.x3f84ok.x3f84ok.x3f84ok:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:none}}
  @media (hover: hover){.xt6htfo.xt6htfo.xt6htfo:hover:not(:first-child):where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){box-shadow:0 calc(-1 * var(--border-width)) 0 0 var(--color-overlay-hover)}}
  @media (hover: hover){.x162bwuq.x162bwuq.x162bwuq:active:not(:first-child):where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){box-shadow:0 calc(-1 * var(--border-width)) 0 0 var(--color-overlay-pressed)}}
  @media (pointer: coarse){.xw0vxdm.xw0vxdm.xw0vxdm:active:not(:first-child):where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){box-shadow:none}}
  .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
  .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
  .x92x3c3:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--border-width)}
  .xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
  .xssyfek:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-lg)}
  .x1ueg155:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--size-element-md)}
  .x193iq5w:not(#\#):not(#\#):not(#\#):not(#\#){max-width:100%}
  .xkoleio:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--spacing-8)}
  .xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
  .x101abm8:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:clip}
  .x13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
  .xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
  .x1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
  .x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
  .x1tadims:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{--_hit-border-bottom:var(--border-width)}
  .x1vz82uj:last-child:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{--_hit-border-bottom:0px}
  .xem8lmn[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-duration:var(--duration-exit)}
  .xziyay6[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-fill-mode:both}
  .x14e4jsf[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-name:x10jkm1t-B}
  .x1t1ddl7[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-timing-function:var(--ease-exit)}
  .x3y5scg[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:scale(.98)}
  .x13ugjdw.x13ugjdw:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:transparent}
  .xl8sb5e.xl8sb5e:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:transparent}
  .x7ngsy6.x7ngsy6:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:var(--_press-paint-image)}
  .xubczrd.xubczrd:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:var(--_press-paint-image)}
  .x17vbu6w.x17vbu6w:not(:first-child):where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:0 calc(-1 * var(--border-width)) 0 0 var(--_press-paint)}
  .x1bauv0c.x1bauv0c:not(:first-child):where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:0 calc(-1 * var(--border-width)) 0 0 var(--_press-paint)}
  @media (prefers-reduced-motion: reduce){.xogcwkh.xogcwkh[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-duration:min(var(--duration-exit),200ms)}}
  @media (pointer: coarse){.x6su2wr.x6su2wr[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){animation-name:none}}
  @media (pointer: coarse){.x1ukc1h5.x1ukc1h5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:calc((var(--astryx-hit-inset-top,0px) + var(--_hit-border-top,0px)) * -1) calc((var(--astryx-hit-inset-right,0px) + var(--_hit-border-right,0px)) * -1) calc((var(--astryx-hit-inset-bottom,0px) + var(--_hit-border-bottom,0px)) * -1) calc((var(--astryx-hit-inset-left,0px) + var(--_hit-border-left,0px)) * -1)}}
  @media ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not (prefers-reduced-motion: reduce))) or ((prefers-reduced-motion: reduce) and (pointer: coarse) and (not ((not (pointer: coarse))))){.xg3abmg.xg3abmg[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
  @media (prefers-reduced-motion: reduce) and (not (pointer: coarse)){.xoigjuk.xoigjuk[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:scale(1)}}
  @media (pointer: coarse){.x10ogxw0.x10ogxw0.x10ogxw0:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:none}}
  @media (pointer: coarse){.x18xnkjv.x18xnkjv.x18xnkjv:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-image:none}}
  @media (pointer: coarse){.xrkptjy.xrkptjy:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:0}}
  @media (pointer: coarse){.xqq0hxb.xqq0hxb.xqq0hxb:not(:first-child):where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:none}}
  @media (pointer: coarse){.xrizkk6.xrizkk6.xrizkk6:not(:first-child):where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:none}}
  @media (pointer: coarse){.x1kec4ew.x1kec4ew:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:inherit}}
  @media (pointer: coarse){.x1c440c0.x1c440c0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--astryx-hit-inset-left,0px) var(--astryx-hit-inset-top,0px),calc(100% - var(--astryx-hit-inset-right,0px)) var(--astryx-hit-inset-top,0px),calc(100% - var(--astryx-hit-inset-right,0px)) calc(100% - var(--astryx-hit-inset-bottom,0px)),var(--astryx-hit-inset-left,0px) calc(100% - var(--astryx-hit-inset-bottom,0px)),var(--astryx-hit-inset-left,0px) var(--astryx-hit-inset-top,0px))}}
  @media (pointer: coarse){.x1fjtqre.x1fjtqre:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}}
  @media (pointer: coarse){.x7b72wb.x7b72wb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}}
  @media (pointer: coarse){.xx13w5u.xx13w5u:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{z-index:1}}
  @media (pointer: coarse){.x1dn949c.x1dn949c:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--color-overlay-pressed)}}
  @media (pointer: coarse){.x13r5q6d.x13r5q6d:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{pointer-events:none}}
  @media (pointer: coarse){.x1ukh9kf.x1ukh9kf:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}}
  @media (pointer: coarse){.xjscm90.xjscm90:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}}
  @media (pointer: coarse){.x1ocadqd.x1ocadqd.x1ocadqd:is([data-astryx-press="on"],[data-astryx-press="fading"]):where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:""}}
  @media (pointer: coarse){.x1rj2gwv.x1rj2gwv:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:calc(-1 * var(--border-width))}}
  @media (pointer: coarse){.x1v1ro1q.x1v1ro1q:is([data-astryx-press="on"],[data-astryx-press="fading"]):not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:calc(-1 * var(--border-width))}}
  @media (pointer: coarse){.x1osot8d.x1osot8d[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-duration:var(--duration-exit)}}
  @media (pointer: coarse){.x1dn5vsf.x1dn5vsf[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-fill-mode:both}}
  @media (pointer: coarse){.x10t12yn.x10t12yn[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-timing-function:var(--ease-exit)}}
  @media (pointer: coarse){.xr9xsjc.xr9xsjc[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{opacity:0}}
  @media (pointer: coarse){.xw7rim2.xw7rim2[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{opacity:1}}
  @media (pointer: coarse){.x1bxn267.x1bxn267.x1bxn267:where(:not(:disabled,[aria-disabled="true"]))[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-name:x1jn504y-B}}
  @media (prefers-reduced-motion: reduce){@media (pointer: coarse){.xbkwwzw.xbkwwzw.xbkwwzw[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{animation-duration:min(var(--duration-exit),200ms)}}}
}

/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: src/themes/cacc/caccTheme.ts
 * Command: astryx theme build src/themes/cacc/caccTheme.ts
 * CLI: @astryxdesign/cli@0.7.11
 * Core: @astryxdesign/core@0.7.11
 */

@layer reset, astryx-base, astryx-theme;

@layer reset {
/* @scope に対応しないブラウザ向けの写し（tools/css.mjs） */
:where([data-astryx-theme="cacc"]) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-heading);
    color: var(--color-text-primary);
  }
:where([data-astryx-theme="cacc"]) :where(h1) {
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }
:where([data-astryx-theme="cacc"]) :where(h2) {
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }
:where([data-astryx-theme="cacc"]) :where(h3) {
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }
:where([data-astryx-theme="cacc"]) :where(h4) {
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }
:where([data-astryx-theme="cacc"]) :where(h5) {
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }
:where([data-astryx-theme="cacc"]) :where(h6) {
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }
:where([data-astryx-theme="cacc"]) :where(p) {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    color: var(--color-text-primary);
  }
:where([data-astryx-theme="cacc"]) :where(small) {
    font-size: var(--text-supporting-size);
    font-weight: var(--text-supporting-weight);
    line-height: var(--text-supporting-leading);
    color: var(--color-text-secondary);
  }
:where([data-astryx-theme="cacc"]) :where(code, pre) {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }
:where([data-astryx-theme="cacc"]) :where(hr) {
    border: none;
    border-top: 1px solid var(--color-border);
  }
@scope ([data-astryx-theme="cacc"]) to ([data-astryx-theme]) {
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-heading);
    color: var(--color-text-primary);
  }

  :where(h1) {
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }

  :where(h2) {
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }

  :where(h3) {
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }

  :where(h4) {
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }

  :where(h5) {
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }

  :where(h6) {
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }

  :where(p) {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    color: var(--color-text-primary);
  }

  :where(small) {
    font-size: var(--text-supporting-size);
    font-weight: var(--text-supporting-weight);
    line-height: var(--text-supporting-leading);
    color: var(--color-text-secondary);
  }

  :where(code, pre) {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }

  :where(hr) {
    border: none;
    border-top: 1px solid var(--color-border);
  }
}
}

@layer astryx-theme {
  :root { color-scheme: light dark; }
  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }

/* @scope に対応しないブラウザ向けの写し（tools/css.mjs） */
[data-astryx-theme="cacc"] {
    --font-size-4xs: 0.375rem;
    --font-size-3xs: 0.5rem;
    --font-size-2xs: 0.5625rem;
    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.4375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.0625rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.4286;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.3913;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-semibold);
    --text-heading-3-leading: 1.4737;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-semibold);
    --text-heading-4-leading: 1.5;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.5385;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.4545;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.5;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.4737;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.5;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.5;
    --text-supporting-size: var(--font-size-sm);
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.5385;
    --text-display-1-size: var(--font-size-5xl);
    --text-display-1-weight: var(--font-weight-normal);
    --text-display-1-leading: 1.25;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.3;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2121;
    --duration-fast-min: 95ms;
    --duration-fast: 125ms;
    --duration-fast-max: 165ms;
    --duration-medium-min: 225ms;
    --duration-medium: 300ms;
    --duration-medium-max: 400ms;
    --duration-slow-min: 525ms;
    --duration-slow: 700ms;
    --duration-slow-max: 935ms;
    --_astryx-pre-tempo-duration-fast-min: 95ms;
    --_astryx-pre-tempo-duration-fast: 125ms;
    --_astryx-pre-tempo-duration-fast-max: 165ms;
    --_astryx-pre-tempo-duration-medium-min: 225ms;
    --_astryx-pre-tempo-duration-medium: 300ms;
    --_astryx-pre-tempo-duration-medium-max: 400ms;
    --_astryx-pre-tempo-duration-slow-min: 525ms;
    --_astryx-pre-tempo-duration-slow: 700ms;
    --_astryx-pre-tempo-duration-slow-max: 935ms;
    --_astryx-motion-tempo: 1;
    --font-family-body: "Kiwi Maru", sans-serif;
    --font-family-heading: "Kiwi Maru", sans-serif;
    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-syntax-keyword: light-dark(#6b187c, #efa8ff);
    --color-syntax-string: light-dark(#0b5615, #a4d6a3);
    --color-syntax-comment: light-dark(#525252, #b9b9b9);
    --color-syntax-number: light-dark(#733100, #ffb37e);
    --color-syntax-function: light-dark(#00458c, #a1caff);
    --color-syntax-type: light-dark(#6b187c, #efa8ff);
    --color-syntax-variable: light-dark(#111111, #e2e2e2);
    --color-syntax-operator: light-dark(#525252, #b9b9b9);
    --color-syntax-constant: light-dark(#733100, #ffb37e);
    --color-syntax-tag: light-dark(#8a0011, #ffaea7);
    --color-syntax-attribute: light-dark(#584400, #eec448);
    --color-syntax-property: light-dark(#005348, #90d7c8);
    --color-syntax-punctuation: light-dark(#525252, #b9b9b9);
    --color-syntax-background: light-dark(#ffffff, #111111);
    --color-syntax-added: color-mix(in srgb, var(--color-success-muted) 25%, transparent);
    --color-syntax-removed: color-mix(in srgb, var(--color-error-muted) 25%, transparent);
    --color-syntax-diff-header: transparent;
    --color-syntax-added-marker: var(--color-syntax-punctuation);
    --color-syntax-removed-marker: var(--color-syntax-punctuation);
    --color-background-surface: #FFFFFF;
    --color-background-body: #FFFFFF;
    --color-background-card: #FFFFFF;
    --color-background-popover: light-dark(#ffffff, #1b1b1b);
    --color-background-muted: #3B3B6B0B;
    --color-accent: #D24848;
    --color-accent-muted: #3B3B6B14;
    --color-neutral: #3B3B6B1A;
    --color-overlay: light-dark(#00000080, #000000CC);
    --color-overlay-hover: #3B3B6B0C;
    --color-overlay-pressed: #3B3B6B19;
    --color-text-primary: #191919;
    --color-text-secondary: #3B3B6B;
    --color-text-disabled: light-dark(#919191, #525252);
    --color-text-accent: #3B3B6B;
    --color-on-dark: #ffffff;
    --color-on-light: #111111;
    --color-on-accent: #FFFFFF;
    --color-on-success: light-dark(#ffffff, #111111);
    --color-on-error: light-dark(#ffffff, #111111);
    --color-on-warning: #111111;
    --color-info: light-dark(#0074e2, #6d9cfe);
    --color-info-muted: light-dark(#b9d7ff, #88bcff3D);
    --color-on-info: light-dark(#ffffff, #111111);
    --color-text-info: light-dark(#0067ce, #a1caff);
    --color-text-success: light-dark(#2f7d33, #90ca90);
    --color-text-warning: light-dark(#836700, #eec448);
    --color-text-error: light-dark(#c0262c, #ffaea7);
    --color-on-info-muted: light-dark(#003978, #a1caff);
    --color-on-success-muted: light-dark(#00490b, #90ca90);
    --color-on-warning-muted: light-dark(#4b3900, #eec448);
    --color-on-error-muted: light-dark(#76000c, #ffaea7);
    --color-icon-accent: #3B3B6B;
    --color-icon-primary: #3B3B6B;
    --color-icon-secondary: #3B3B6B;
    --color-icon-disabled: light-dark(#919191, #525252);
    --color-success: light-dark(#198100, #64af4c);
    --color-warning: #ffce2f;
    --color-error: light-dark(#c9303a, #ff705d);
    --color-success-muted: light-dark(#bce0bb, #90ca903D);
    --color-error-muted: light-dark(#ffc4be, #ff98903D);
    --color-warning-muted: light-dark(#fae19e, #e2b6233D);
    --color-border: #3B3B6B33;
    --color-border-emphasized: #3B3B6B66;
    --color-skeleton: light-dark(#f1f1f1, #525252);
    --color-shadow: light-dark(#0000001A, #0000004D);
    --color-tint-hover: #3B3B6B;
    --color-background-red: light-dark(#ffc4be, #5b2b28);
    --color-border-red: light-dark(#ffaea7, #fa6762);
    --color-icon-red: light-dark(#76000c, #ff9890);
    --color-text-red: light-dark(#76000c, #ffaea7);
    --color-background-orange: light-dark(#ffc7a1, #503424);
    --color-border-orange: light-dark(#ffc7a1, #df843f);
    --color-icon-orange: light-dark(#622700, #ff9e55);
    --color-text-orange: light-dark(#622700, #ffb37e);
    --color-background-yellow: light-dark(#fae19e, #453a1c);
    --color-border-yellow: light-dark(#e3c36c, #c29900);
    --color-icon-yellow: light-dark(#4b3900, #e2b623);
    --color-text-yellow: light-dark(#4b3900, #eec448);
    --color-background-green: light-dark(#bce0bb, #2b422b);
    --color-border-green: light-dark(#aad4a9, #6ab26b);
    --color-icon-green: light-dark(#00490b, #90ca90);
    --color-text-green: light-dark(#00490b, #90ca90);
    --color-background-teal: light-dark(#a9e2d6, #28413c);
    --color-border-teal: light-dark(#90d7c8, #4fb1a0);
    --color-icon-teal: light-dark(#00463d, #81c9bb);
    --color-text-teal: light-dark(#00463d, #90d7c8);
    --color-background-cyan: light-dark(#9ae2f4, #274046);
    --color-border-cyan: light-dark(#85d5e9, #49adc4);
    --color-icon-cyan: light-dark(#004351, #71c7dd);
    --color-text-cyan: light-dark(#004351, #85d5e9);
    --color-background-blue: light-dark(#b9d7ff, #253c5a);
    --color-border-blue: light-dark(#a1caff, #5aa0f8);
    --color-icon-blue: light-dark(#003978, #88bcff);
    --color-text-blue: light-dark(#003978, #a1caff);
    --color-background-purple: light-dark(#f7d5ff, #4a2f51);
    --color-border-purple: light-dark(#f3bfff, #d885eb);
    --color-icon-purple: light-dark(#5c0e6c, #e496f6);
    --color-text-purple: light-dark(#5c0e6c, #eaacf8);
    --color-background-pink: light-dark(#ffc0d7, #572b3d);
    --color-border-pink: light-dark(#ffc0d7, #fc78b1);
    --color-icon-pink: light-dark(#70003f, #fd92bd);
    --color-text-pink: light-dark(#70003f, #ffa9ca);
    --color-background-gray: light-dark(#e2e2e2, #303030);
    --color-border-gray: light-dark(#d4d4d4, #262626);
    --color-icon-gray: light-dark(#474747, #9e9e9e);
    --color-text-gray: light-dark(#1b1b1b, #d4d4d4);
    --radius-none: 0px;
    --radius-inner: 4px;
    --radius-element: 8px;
    --radius-container: 12px;
    --radius-page: 28px;
    --radius-full: 9999px;
    --shadow-low: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
    --shadow-med: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
    --shadow-high: 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));
    --shadow-inset-hover: inset 0px 0px 0px 2px #0074e24D;
    --shadow-inset-selected: inset 0px 0px 0px 2px #0074e280;
    --shadow-inset-success: inset 0px 0px 0px 2px #2f7d334D;
    --shadow-inset-warning: inset 0px 0px 0px 2px #f8d36a4D;
    --shadow-inset-error: inset 0px 0px 0px 2px #de47454D;
    --radius-chat: 28px;
    --focus-outline-color: #3B3B6B;
    --color-icon-info: var(--color-text-info);
    --color-icon-success: var(--color-text-success);
    --color-icon-warning: var(--color-text-warning);
    --color-icon-error: var(--color-text-error);
    --color-border-info: var(--color-text-info);
    --color-border-success: var(--color-text-success);
    --color-border-warning: var(--color-text-warning);
    --color-border-error: var(--color-text-error);
    --duration-exit: var(--duration-fast);
    --astryx-theme-neutral-color-status-fill-accent: light-dark(#0074e2, #6d9cfe);
  }
[data-astryx-theme="cacc"] {
    font-family: var(--font-family-body);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="4"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="5"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-level="6"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="body"] {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="large"] {
    font-family: var(--font-family-body);
    font-size: var(--text-large-size);
    line-height: var(--text-large-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="label"] {
    font-family: var(--font-family-body);
    font-size: var(--text-label-size);
    line-height: var(--text-label-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="code"] {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="supporting"] {
    font-family: var(--font-family-body);
    font-size: var(--text-supporting-size);
    line-height: var(--text-supporting-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }
:where([data-astryx-theme="cacc"]) .astryx-item[data-selected="selected"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }
:where([data-astryx-theme="cacc"]) .astryx-tree-list-item[data-selected="selected"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }
:where([data-astryx-theme="cacc"]) .astryx-file-input[data-mode="dropzone"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }
:where([data-astryx-theme="cacc"]) .astryx-citation[data-variant="number"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }
:where([data-astryx-theme="cacc"]) .astryx-button[data-variant="destructive"] {
    background-color: var(--color-error-muted);
    color: var(--color-on-error-muted);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="neutral"] {
    background-color: var(--color-background-gray);
    color: var(--color-text-gray);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="red"] {
    background-color: var(--color-background-red);
    color: var(--color-text-red);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="orange"] {
    background-color: var(--color-background-orange);
    color: var(--color-text-orange);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="yellow"] {
    background-color: var(--color-background-yellow);
    color: var(--color-text-yellow);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="green"] {
    background-color: var(--color-background-green);
    color: var(--color-text-green);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="teal"] {
    background-color: var(--color-background-teal);
    color: var(--color-text-teal);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="cyan"] {
    background-color: var(--color-background-cyan);
    color: var(--color-text-cyan);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="blue"] {
    background-color: var(--color-background-blue);
    color: var(--color-text-blue);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="purple"] {
    background-color: var(--color-background-purple);
    color: var(--color-text-purple);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="pink"] {
    background-color: var(--color-background-pink);
    color: var(--color-text-pink);
  }
:where([data-astryx-theme="cacc"]) .astryx-badge[data-variant="gray"] {
    background-color: var(--color-background-gray);
    color: var(--color-text-gray);
  }
:where([data-astryx-theme="cacc"]) .astryx-segmented-control {
    padding: var(--spacing-1);
    --_segmented-control-padding: var(--spacing-1);
  }
:where([data-astryx-theme="cacc"]) .astryx-segmented-control-item[data-size="sm"] {
    height: calc(var(--size-element-sm) - 8px);
  }
:where([data-astryx-theme="cacc"]) .astryx-segmented-control-item[data-size="md"] {
    height: calc(var(--size-element-md) - 8px);
  }
:where([data-astryx-theme="cacc"]) .astryx-segmented-control-item[data-size="lg"] {
    height: calc(var(--size-element-lg) - 8px);
  }
:where([data-astryx-theme="cacc"]) .astryx-segmented-control-item[data-selected="selected"] {
    box-shadow: none;
  }
:where([data-astryx-theme="cacc"]) .astryx-switch {
    --color-background-gray: var(--color-border-emphasized);
  }
:where([data-astryx-theme="cacc"]) .astryx-progress-bar {
    --color-background-muted: var(--color-border-emphasized);
  }
:where([data-astryx-theme="cacc"]) .astryx-card {
    --astryx-card-padding: var(--spacing-3);
  }
:where([data-astryx-theme="cacc"]) .astryx-section {
    --astryx-section-padding: var(--spacing-3);
  }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="primary"] { color: var(--color-text-primary); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="accent"] { color: var(--color-text-accent); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-color="inherit"] { color: inherit; }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-color="inherit"] { color: inherit; }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="base"] { font-size: var(--font-size-base); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }
:where([data-astryx-theme="cacc"]) .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }
:where([data-astryx-theme="cacc"]) .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
@scope ([data-astryx-theme="cacc"]) to ([data-astryx-theme]) {
  :scope {
    --font-size-4xs: 0.375rem;
    --font-size-3xs: 0.5rem;
    --font-size-2xs: 0.5625rem;
    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.4375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.0625rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.4286;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.3913;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-semibold);
    --text-heading-3-leading: 1.4737;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-semibold);
    --text-heading-4-leading: 1.5;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.5385;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.4545;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.5;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.4737;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.5;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.5;
    --text-supporting-size: var(--font-size-sm);
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.5385;
    --text-display-1-size: var(--font-size-5xl);
    --text-display-1-weight: var(--font-weight-normal);
    --text-display-1-leading: 1.25;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.3;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.2121;
    --duration-fast-min: 95ms;
    --duration-fast: 125ms;
    --duration-fast-max: 165ms;
    --duration-medium-min: 225ms;
    --duration-medium: 300ms;
    --duration-medium-max: 400ms;
    --duration-slow-min: 525ms;
    --duration-slow: 700ms;
    --duration-slow-max: 935ms;
    --_astryx-pre-tempo-duration-fast-min: 95ms;
    --_astryx-pre-tempo-duration-fast: 125ms;
    --_astryx-pre-tempo-duration-fast-max: 165ms;
    --_astryx-pre-tempo-duration-medium-min: 225ms;
    --_astryx-pre-tempo-duration-medium: 300ms;
    --_astryx-pre-tempo-duration-medium-max: 400ms;
    --_astryx-pre-tempo-duration-slow-min: 525ms;
    --_astryx-pre-tempo-duration-slow: 700ms;
    --_astryx-pre-tempo-duration-slow-max: 935ms;
    --_astryx-motion-tempo: 1;
    --font-family-body: "Kiwi Maru", sans-serif;
    --font-family-heading: "Kiwi Maru", sans-serif;
    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-syntax-keyword: light-dark(#6b187c, #efa8ff);
    --color-syntax-string: light-dark(#0b5615, #a4d6a3);
    --color-syntax-comment: light-dark(#525252, #b9b9b9);
    --color-syntax-number: light-dark(#733100, #ffb37e);
    --color-syntax-function: light-dark(#00458c, #a1caff);
    --color-syntax-type: light-dark(#6b187c, #efa8ff);
    --color-syntax-variable: light-dark(#111111, #e2e2e2);
    --color-syntax-operator: light-dark(#525252, #b9b9b9);
    --color-syntax-constant: light-dark(#733100, #ffb37e);
    --color-syntax-tag: light-dark(#8a0011, #ffaea7);
    --color-syntax-attribute: light-dark(#584400, #eec448);
    --color-syntax-property: light-dark(#005348, #90d7c8);
    --color-syntax-punctuation: light-dark(#525252, #b9b9b9);
    --color-syntax-background: light-dark(#ffffff, #111111);
    --color-syntax-added: color-mix(in srgb, var(--color-success-muted) 25%, transparent);
    --color-syntax-removed: color-mix(in srgb, var(--color-error-muted) 25%, transparent);
    --color-syntax-diff-header: transparent;
    --color-syntax-added-marker: var(--color-syntax-punctuation);
    --color-syntax-removed-marker: var(--color-syntax-punctuation);
    --color-background-surface: #FFFFFF;
    --color-background-body: #FFFFFF;
    --color-background-card: #FFFFFF;
    --color-background-popover: light-dark(#ffffff, #1b1b1b);
    --color-background-muted: #3B3B6B0B;
    --color-accent: #D24848;
    --color-accent-muted: #3B3B6B14;
    --color-neutral: #3B3B6B1A;
    --color-overlay: light-dark(#00000080, #000000CC);
    --color-overlay-hover: #3B3B6B0C;
    --color-overlay-pressed: #3B3B6B19;
    --color-text-primary: #191919;
    --color-text-secondary: #3B3B6B;
    --color-text-disabled: light-dark(#919191, #525252);
    --color-text-accent: #3B3B6B;
    --color-on-dark: #ffffff;
    --color-on-light: #111111;
    --color-on-accent: #FFFFFF;
    --color-on-success: light-dark(#ffffff, #111111);
    --color-on-error: light-dark(#ffffff, #111111);
    --color-on-warning: #111111;
    --color-info: light-dark(#0074e2, #6d9cfe);
    --color-info-muted: light-dark(#b9d7ff, #88bcff3D);
    --color-on-info: light-dark(#ffffff, #111111);
    --color-text-info: light-dark(#0067ce, #a1caff);
    --color-text-success: light-dark(#2f7d33, #90ca90);
    --color-text-warning: light-dark(#836700, #eec448);
    --color-text-error: light-dark(#c0262c, #ffaea7);
    --color-on-info-muted: light-dark(#003978, #a1caff);
    --color-on-success-muted: light-dark(#00490b, #90ca90);
    --color-on-warning-muted: light-dark(#4b3900, #eec448);
    --color-on-error-muted: light-dark(#76000c, #ffaea7);
    --color-icon-accent: #3B3B6B;
    --color-icon-primary: #3B3B6B;
    --color-icon-secondary: #3B3B6B;
    --color-icon-disabled: light-dark(#919191, #525252);
    --color-success: light-dark(#198100, #64af4c);
    --color-warning: #ffce2f;
    --color-error: light-dark(#c9303a, #ff705d);
    --color-success-muted: light-dark(#bce0bb, #90ca903D);
    --color-error-muted: light-dark(#ffc4be, #ff98903D);
    --color-warning-muted: light-dark(#fae19e, #e2b6233D);
    --color-border: #3B3B6B33;
    --color-border-emphasized: #3B3B6B66;
    --color-skeleton: light-dark(#f1f1f1, #525252);
    --color-shadow: light-dark(#0000001A, #0000004D);
    --color-tint-hover: #3B3B6B;
    --color-background-red: light-dark(#ffc4be, #5b2b28);
    --color-border-red: light-dark(#ffaea7, #fa6762);
    --color-icon-red: light-dark(#76000c, #ff9890);
    --color-text-red: light-dark(#76000c, #ffaea7);
    --color-background-orange: light-dark(#ffc7a1, #503424);
    --color-border-orange: light-dark(#ffc7a1, #df843f);
    --color-icon-orange: light-dark(#622700, #ff9e55);
    --color-text-orange: light-dark(#622700, #ffb37e);
    --color-background-yellow: light-dark(#fae19e, #453a1c);
    --color-border-yellow: light-dark(#e3c36c, #c29900);
    --color-icon-yellow: light-dark(#4b3900, #e2b623);
    --color-text-yellow: light-dark(#4b3900, #eec448);
    --color-background-green: light-dark(#bce0bb, #2b422b);
    --color-border-green: light-dark(#aad4a9, #6ab26b);
    --color-icon-green: light-dark(#00490b, #90ca90);
    --color-text-green: light-dark(#00490b, #90ca90);
    --color-background-teal: light-dark(#a9e2d6, #28413c);
    --color-border-teal: light-dark(#90d7c8, #4fb1a0);
    --color-icon-teal: light-dark(#00463d, #81c9bb);
    --color-text-teal: light-dark(#00463d, #90d7c8);
    --color-background-cyan: light-dark(#9ae2f4, #274046);
    --color-border-cyan: light-dark(#85d5e9, #49adc4);
    --color-icon-cyan: light-dark(#004351, #71c7dd);
    --color-text-cyan: light-dark(#004351, #85d5e9);
    --color-background-blue: light-dark(#b9d7ff, #253c5a);
    --color-border-blue: light-dark(#a1caff, #5aa0f8);
    --color-icon-blue: light-dark(#003978, #88bcff);
    --color-text-blue: light-dark(#003978, #a1caff);
    --color-background-purple: light-dark(#f7d5ff, #4a2f51);
    --color-border-purple: light-dark(#f3bfff, #d885eb);
    --color-icon-purple: light-dark(#5c0e6c, #e496f6);
    --color-text-purple: light-dark(#5c0e6c, #eaacf8);
    --color-background-pink: light-dark(#ffc0d7, #572b3d);
    --color-border-pink: light-dark(#ffc0d7, #fc78b1);
    --color-icon-pink: light-dark(#70003f, #fd92bd);
    --color-text-pink: light-dark(#70003f, #ffa9ca);
    --color-background-gray: light-dark(#e2e2e2, #303030);
    --color-border-gray: light-dark(#d4d4d4, #262626);
    --color-icon-gray: light-dark(#474747, #9e9e9e);
    --color-text-gray: light-dark(#1b1b1b, #d4d4d4);
    --radius-none: 0px;
    --radius-inner: 4px;
    --radius-element: 8px;
    --radius-container: 12px;
    --radius-page: 28px;
    --radius-full: 9999px;
    --shadow-low: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
    --shadow-med: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
    --shadow-high: 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));
    --shadow-inset-hover: inset 0px 0px 0px 2px #0074e24D;
    --shadow-inset-selected: inset 0px 0px 0px 2px #0074e280;
    --shadow-inset-success: inset 0px 0px 0px 2px #2f7d334D;
    --shadow-inset-warning: inset 0px 0px 0px 2px #f8d36a4D;
    --shadow-inset-error: inset 0px 0px 0px 2px #de47454D;
    --radius-chat: 28px;
    --focus-outline-color: #3B3B6B;
    --color-icon-info: var(--color-text-info);
    --color-icon-success: var(--color-text-success);
    --color-icon-warning: var(--color-text-warning);
    --color-icon-error: var(--color-text-error);
    --color-border-info: var(--color-text-info);
    --color-border-success: var(--color-text-success);
    --color-border-warning: var(--color-text-warning);
    --color-border-error: var(--color-text-error);
    --duration-exit: var(--duration-fast);
    --astryx-theme-neutral-color-status-fill-accent: light-dark(#0074e2, #6d9cfe);
  }

  :scope {
    font-family: var(--font-family-body);
  }

  .astryx-heading[data-level="1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }

  .astryx-heading[data-level="2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }

  .astryx-heading[data-level="3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }

  .astryx-heading[data-level="4"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }

  .astryx-heading[data-level="5"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }

  .astryx-heading[data-level="6"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }

  .astryx-heading[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

  .astryx-heading[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }

  .astryx-heading[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }

  .astryx-text[data-type="body"] {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-leading);
  }

  .astryx-text[data-type="large"] {
    font-family: var(--font-family-body);
    font-size: var(--text-large-size);
    line-height: var(--text-large-leading);
  }

  .astryx-text[data-type="label"] {
    font-family: var(--font-family-body);
    font-size: var(--text-label-size);
    line-height: var(--text-label-leading);
  }

  .astryx-text[data-type="code"] {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }

  .astryx-text[data-type="supporting"] {
    font-family: var(--font-family-body);
    font-size: var(--text-supporting-size);
    line-height: var(--text-supporting-leading);
  }

  .astryx-text[data-type="display-1"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-1-size);
    line-height: var(--text-display-1-leading);
  }

  .astryx-text[data-type="display-2"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-2-size);
    line-height: var(--text-display-2-leading);
  }

  .astryx-text[data-type="display-3"] {
    font-family: var(--font-family-heading);
    font-size: var(--text-display-3-size);
    line-height: var(--text-display-3-leading);
  }

  .astryx-item[data-selected="selected"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }

  .astryx-tree-list-item[data-selected="selected"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }

  .astryx-file-input[data-mode="dropzone"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }

  .astryx-citation[data-variant="number"] {
    --color-text-secondary: light-dark(#474747, #c6c6c6);
  }

  .astryx-button[data-variant="destructive"] {
    background-color: var(--color-error-muted);
    color: var(--color-on-error-muted);
  }

  .astryx-badge[data-variant="neutral"] {
    background-color: var(--color-background-gray);
    color: var(--color-text-gray);
  }

  .astryx-badge[data-variant="red"] {
    background-color: var(--color-background-red);
    color: var(--color-text-red);
  }

  .astryx-badge[data-variant="orange"] {
    background-color: var(--color-background-orange);
    color: var(--color-text-orange);
  }

  .astryx-badge[data-variant="yellow"] {
    background-color: var(--color-background-yellow);
    color: var(--color-text-yellow);
  }

  .astryx-badge[data-variant="green"] {
    background-color: var(--color-background-green);
    color: var(--color-text-green);
  }

  .astryx-badge[data-variant="teal"] {
    background-color: var(--color-background-teal);
    color: var(--color-text-teal);
  }

  .astryx-badge[data-variant="cyan"] {
    background-color: var(--color-background-cyan);
    color: var(--color-text-cyan);
  }

  .astryx-badge[data-variant="blue"] {
    background-color: var(--color-background-blue);
    color: var(--color-text-blue);
  }

  .astryx-badge[data-variant="purple"] {
    background-color: var(--color-background-purple);
    color: var(--color-text-purple);
  }

  .astryx-badge[data-variant="pink"] {
    background-color: var(--color-background-pink);
    color: var(--color-text-pink);
  }

  .astryx-badge[data-variant="gray"] {
    background-color: var(--color-background-gray);
    color: var(--color-text-gray);
  }

  .astryx-segmented-control {
    padding: var(--spacing-1);
    --_segmented-control-padding: var(--spacing-1);
  }

  .astryx-segmented-control-item[data-size="sm"] {
    height: calc(var(--size-element-sm) - 8px);
  }

  .astryx-segmented-control-item[data-size="md"] {
    height: calc(var(--size-element-md) - 8px);
  }

  .astryx-segmented-control-item[data-size="lg"] {
    height: calc(var(--size-element-lg) - 8px);
  }

  .astryx-segmented-control-item[data-selected="selected"] {
    box-shadow: none;
  }

  .astryx-switch {
    --color-background-gray: var(--color-border-emphasized);
  }

  .astryx-progress-bar {
    --color-background-muted: var(--color-border-emphasized);
  }

  .astryx-card {
    --astryx-card-padding: var(--spacing-3);
  }

  .astryx-section {
    --astryx-section-padding: var(--spacing-3);
  }

  .astryx-text[data-color="primary"] { color: var(--color-text-primary); }

  .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }

  .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }

  .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }

  .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }

  .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }

  .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }

  .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }

  .astryx-text[data-color="accent"] { color: var(--color-text-accent); }

  .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }

  .astryx-text[data-color="inherit"] { color: inherit; }

  .astryx-heading[data-color="inherit"] { color: inherit; }

  .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }

  .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }

  .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }

  .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }

  .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }

  .astryx-text[data-size="base"] { font-size: var(--font-size-base); }

  .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }

  .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }

  .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }

  .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }

  .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }

  .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }

  .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }

  .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }

  .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
}
}

@layer astryx-theme {
@media (width < 1024px) and (pointer: coarse) {
  /* @scope に対応しないブラウザ向けの写し（tools/css.mjs） */
[data-astryx-theme="cacc"] {
    --font-size-4xs: 0.4375rem;
    --font-size-3xs: 0.5rem;
    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 2.625rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.3846;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.4545;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-semibold);
    --text-heading-3-leading: 1.4737;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-semibold);
    --text-heading-4-leading: 1.5;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.4286;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.6667;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.5;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.4737;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.5;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.5;
    --text-supporting-size: var(--font-size-sm);
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.4286;
    --text-display-1-size: var(--font-size-5xl);
    --text-display-1-weight: var(--font-weight-normal);
    --text-display-1-leading: 1.2381;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.2222;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.4667;
    --font-family-body: "Kiwi Maru", sans-serif;
    --font-family-heading: "Kiwi Maru", sans-serif;
    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
@scope ([data-astryx-theme="cacc"]) to ([data-astryx-theme]) {
    :scope {
    --font-size-4xs: 0.4375rem;
    --font-size-3xs: 0.5rem;
    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1875rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.625rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 2.625rem;
    --text-heading-1-size: var(--font-size-2xl);
    --text-heading-1-weight: var(--font-weight-semibold);
    --text-heading-1-leading: 1.3846;
    --text-heading-2-size: var(--font-size-xl);
    --text-heading-2-weight: var(--font-weight-semibold);
    --text-heading-2-leading: 1.4545;
    --text-heading-3-size: var(--font-size-lg);
    --text-heading-3-weight: var(--font-weight-semibold);
    --text-heading-3-leading: 1.4737;
    --text-heading-4-size: var(--font-size-base);
    --text-heading-4-weight: var(--font-weight-semibold);
    --text-heading-4-leading: 1.5;
    --text-heading-5-size: var(--font-size-sm);
    --text-heading-5-weight: var(--font-weight-semibold);
    --text-heading-5-leading: 1.4286;
    --text-heading-6-size: var(--font-size-xs);
    --text-heading-6-weight: var(--font-weight-semibold);
    --text-heading-6-leading: 1.6667;
    --text-body-size: var(--font-size-base);
    --text-body-weight: var(--font-weight-normal);
    --text-body-leading: 1.5;
    --text-large-size: var(--font-size-lg);
    --text-large-weight: var(--font-weight-semibold);
    --text-large-leading: 1.4737;
    --text-label-size: var(--font-size-base);
    --text-label-weight: var(--font-weight-medium);
    --text-label-leading: 1.5;
    --text-code-size: var(--font-size-base);
    --text-code-weight: var(--font-weight-normal);
    --text-code-leading: 1.5;
    --text-supporting-size: var(--font-size-sm);
    --text-supporting-weight: var(--font-weight-normal);
    --text-supporting-leading: 1.4286;
    --text-display-1-size: var(--font-size-5xl);
    --text-display-1-weight: var(--font-weight-normal);
    --text-display-1-leading: 1.2381;
    --text-display-2-size: var(--font-size-4xl);
    --text-display-2-weight: var(--font-weight-normal);
    --text-display-2-leading: 1.2222;
    --text-display-3-size: var(--font-size-3xl);
    --text-display-3-weight: var(--font-weight-normal);
    --text-display-3-leading: 1.4667;
    --font-family-body: "Kiwi Maru", sans-serif;
    --font-family-heading: "Kiwi Maru", sans-serif;
    --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  }
}
}

@layer astryx-theme {
/* @scope に対応しないブラウザ向けの写し（tools/css.mjs） */
:where([data-astryx-theme="cacc"]) [data-astryx-media="dark"] {
    color-scheme: dark;
    --color-text-primary: var(--color-on-dark);
    --color-icon-primary: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
  }
:where([data-astryx-theme="cacc"]) [data-astryx-media="light"] {
    color-scheme: light;
    --color-text-primary: var(--color-on-light);
    --color-icon-primary: var(--color-on-light);
    --color-accent: var(--color-on-light);
  }
@scope ([data-astryx-theme="cacc"]) to ([data-astryx-theme]) {
  [data-astryx-media="dark"] {
    color-scheme: dark;
    --color-text-primary: var(--color-on-dark);
    --color-icon-primary: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
  }

  [data-astryx-media="light"] {
    color-scheme: light;
    --color-text-primary: var(--color-on-light);
    --color-icon-primary: var(--color-on-light);
    --color-accent: var(--color-on-light);
  }
}
}

/* Astryx の部品にない、このサイトだけの形。色と間隔はトークンを使う */
html, body { background: #FFFFFF; color: #191919; }
h1, h2, h3 { font-weight: 500 !important; }
/* 真ん中の値は画面の幅（vw）で決まるので、ブラウザの文字の大きさにも追従させる。
   既定の 16px では (1rem - 16px) が 0 で 3.4vw のまま。20px なら 1280px 幅で 1.25 倍（2.72 = 43.52 ÷ 16） */
.hero h1 { font-size: clamp(1.6875rem, calc(3.4vw + (1rem - 16px) * 2.72), 2.75rem); line-height: 1.45; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--spacing-6, 24px); }
.band { padding-block: 72px; position: relative; }
.pale { background: var(--color-background-muted); }
.measure { max-width: 46em; }
.hero { position: relative; padding-block: 56px 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 48px; row-gap: 20px; grid-template-rows: auto auto auto auto 1fr; padding-bottom: 32px; }
.hero-grid > * { grid-column: 1; }
.hero-grid > .rings { grid-column: 2; grid-row: 1 / 6; align-self: center; }
.catch { font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 500; }
.origin { font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 500; }
.rings { width: 100%; max-width: 480px; height: auto; display: block; margin-inline: auto; }
/* 図（SVG）の中の文字 .ring-text は px のまま残す。viewBox の縮尺で図ごと縮むので、rem にすると、
   ブラウザの文字を大きくした人の図では文字だけが大きくなり、輪からはみ出す。同じ内容は図の外の本文にもある（REQ-21） */
.ring-text { font-size: 17px; font-family: "Kiwi Maru", sans-serif; }
.ring-text .en { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 20px; }
.ring-text .center { font-size: 26px; }
.wave { display: block; width: 100%; height: 56px; }
.contact { text-align: center; padding-top: 32px; }
/* 赤地の白文字は 18px 以上の太字だけ（白地の赤は明るさの差 4.41 のため） */
.cta, .cta-nav { font-weight: 700 !important; }
.cta { font-size: 1.1875rem !important; min-height: 52px; padding-inline: 28px !important; }
.cta-nav { font-size: 1.125rem !important; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.axis { padding-left: 22px; border-left: 3px solid #3B3B6B; }
.axis-career { border-left-color: #CCAF60; }
.axis-counseling { border-left-color: #D24848; }
.quals { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quals.cols { display: block; columns: 2; column-gap: 24px; }
.quals.cols li { break-inside: avoid; margin-bottom: 4px; }
.year { white-space: nowrap; }
.quals .astryx-text { font-size: 0.875rem; }
.post-row { display: flex; gap: 16px; align-items: baseline; }
.post-date { white-space: nowrap; flex: none; }
.post-title { flex: 1; min-width: 0; }
.row-title { text-decoration: underline; text-underline-offset: 3px; }
.row-title-plain { text-decoration: none; }
.after-list { margin-top: 24px; }
.limit { max-width: 46em; display: block; }
/* 1〜2 字だけが次の行に落ちるのを防ぐ（語の区切りで折る） */
main h1, main h2, main h3, main p, main li { word-break: auto-phrase; text-wrap: pretty; }
.foot { border-top: 1px solid var(--color-border); padding-block: 28px; }
a:hover { text-decoration: underline; text-decoration-color: #3B3B6B; }
/* メニュー（REQ-23）：収まらない幅でだけ、右の塊を 2 行目へ折り返す。ロゴの塊は文字の幅より縮めない（重なりを防ぐ） */
nav[aria-label="メインメニュー"] { flex-wrap: wrap; }
nav[aria-label="メインメニュー"] > div:first-child { min-width: max-content; }
nav[aria-label="メインメニュー"] > div:last-child { flex-shrink: 1; min-width: 0; max-width: 100%; }
.nav-items { flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero-grid, .grid-1-2 { grid-template-columns: 1fr; }
  .hero-grid > .rings { grid-column: 1; grid-row: auto; }
  .band { padding-block: 48px; }
}
@media (max-width: 600px) {
  /* メニューは折り返して全項目を見せる。HTML の順と見た目の順をそろえる */
  nav[aria-label="メインメニュー"] { flex-wrap: wrap !important; height: auto !important; min-height: 0 !important; align-content: flex-start; padding-block: 6px; }
  nav[aria-label="メインメニュー"] > div:first-child { flex: 1 1 100%; min-height: 36px; }
  nav[aria-label="メインメニュー"] > div:last-child { flex: 1 1 100%; width: 100%; min-width: 0; justify-content: flex-start; }
  .nav-items { flex-wrap: wrap; width: 100%; max-width: 100%; row-gap: 2px; }
  .cta-nav { font-size: 1.125rem !important; }
  .hero { padding-top: 8px; }
  .hero-grid { row-gap: 10px; }
  .hero .catch { font-size: 0.9375rem; }
  .hero h1 { font-size: 1.5625rem; }
  .hero .rings { max-width: 250px; }
  .hero .ring-text { font-size: 24px; } .hero .ring-text .en { font-size: 25px; } .hero .ring-text .center { font-size: 28px; }
  .hero .lead { font-size: 0.875rem; line-height: 1.6; }
  .quals.cols { columns: 1; }
  .post-row { flex-direction: column; gap: 2px; }
}

/* 動き：輪が描かれる 1 回と、ゆっくり流れる波。動きを減らす設定では動かさない */
@media (prefers-reduced-motion: no-preference) {
  .rings .ring { stroke-dasharray: 820; stroke-dashoffset: 820; animation: ring-draw 1.6s ease-out 0.2s 1 forwards; }
  .rings .ring-2 { animation-delay: 0.5s; }
  .rings .ring-3 { animation-delay: 0.8s; }
  .wave path { animation: wave-flow 24s linear infinite; }
}
/* 波の動きを止める部品（REQ-22）。スクリプトを使わず、チェックボックスと :has() で 2 か所の波を今の位置で止める */
body:has(.wave-pause:checked) .wave path { animation-play-state: paused; }
.wave-control { display: flex; justify-content: flex-end; }
.wave-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 8px; font-size: 0.875rem; color: #3B3B6B; cursor: pointer; }
.wave-pause { width: 24px; height: 24px; margin: 0; accent-color: #3B3B6B; }
.wave-pause:focus-visible { outline: 2px solid #3B3B6B; outline-offset: 2px; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes wave-flow { from { transform: translateX(0); } to { transform: translateX(-1440px); } }
@media (prefers-reduced-motion: reduce) {
  .rings .ring, .wave path { animation: none; stroke-dashoffset: 0; }
  /* 波は最初から止まっているので、止める部品は出さない */
  .wave-control { display: none; }
}
/* :has() に対応しないブラウザでは押しても止まらないので、部品を出さず、波も最初から止める（WCAG 2.2.2） */
@supports not selector(:has(*)) { .wave-control { display: none; } .wave path { animation: none; } }
/* 高さの低いスマートフォン（667px など）でも、最初の画面に相談ボタンを収める */
@media (max-width: 600px) and (max-height: 720px) {
  /* 図を小さくする分、図の中の文字を大きくし、表示上 12px 以上を保つ */
  .hero .rings { max-width: 200px; }
  .hero .ring-text { font-size: 30px; } .hero .ring-text .en { font-size: 30px; } .hero .ring-text .center { font-size: 32px; }
  .hero-grid { row-gap: 6px; }
}

nav a:focus-visible { outline-color: #3B3B6B; }