@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 900;
  font-stretch: 150%;
  font-display: swap;
  src: url("fonts/anybody-extra-expanded-black-latin_0.3.2") format("woff2");
}

:root {
  --app-font-sans: "Inter", "Segoe UI", sans-serif;
  --app-font-mono: "IBM Plex Mono", monospace;
  --app-text-overline-size: 0.625rem;
  --app-text-overline-line: 1.2;
  --app-text-title-lg-size: 1.25rem;
  --app-text-title-lg-line: 1.1;
  --app-text-title-md-size: 1rem;
  --app-text-title-md-line: 1.2;
  --app-text-title-sm-size: 0.875rem;
  --app-text-title-sm-line: 1.25;
  --app-text-body-size: 0.9375rem;
  --app-text-body-line: 1.5;
  --app-text-body-sm-size: 0.8125rem;
  --app-text-body-sm-line: 1.45;
  --app-text-meta-size: 0.75rem;
  --app-text-meta-line: 1.35;
  --app-text-code-size: 0.75rem;
  --app-text-code-line: 1.4;
  --app-text-chip-size: 0.75rem;
  --app-text-chip-line: 1;
  --app-color-brand-blue: #0088c2;
  --app-color-brand-yellow: #ffff00;
  --app-color-brand-coral: #ff8462;
  --app-color-brand-teal: #008080;
  --app-color-heading-text: #00658f;
  --app-color-highlight-text: #6f6200;
  --app-color-highlight-text-inverse: var(--app-color-brand-yellow);
  --app-color-shell: #003f5a;
  --app-color-shell-2: #0076a8;
  --app-color-shell-3: var(--app-color-brand-coral);
  --app-color-shell-edge: rgba(255, 255, 255, 0.22);
  --app-color-shell-text: #ffffff;
  --app-color-ribbon-top: #ffffcc;
  --app-color-ribbon-bottom: #ffff00;
  --app-color-workspace: #f5fafc;
  --app-color-surface: #ffffff;
  --app-color-surface-soft: #fbfdfe;
  --app-color-surface-muted: #eaf6fa;
  --app-color-surface-inset: #dceff6;
  --app-color-text: #123744;
  --app-color-text-soft: #365968;
  --app-color-text-muted: #647e89;
  --app-color-text-inverse: #ffffff;
  --app-color-border: #cce4ed;
  --app-color-border-strong: #84bed2;
  --app-color-divider: rgba(0, 63, 90, 0.14);
  --app-color-accent: var(--app-color-brand-yellow);
  --app-color-accent-hover: #f1f100;
  --app-color-accent-strong: #b5b500;
  --app-color-accent-soft: #ffffc7;
  --app-color-on-accent: #123744;
  --app-color-nav-surface: #00658f;
  --app-color-nav-item: transparent;
  --app-color-nav-hover: rgba(255, 255, 255, 0.12);
  --app-color-nav-active: var(--app-color-brand-coral);
  --app-color-nav-active-border: #ffb29c;
  --app-color-nav-text: #ffffff;
  --app-color-nav-text-muted: rgba(255, 255, 255, 0.76);
  --app-color-gold: var(--app-color-brand-yellow);
  --app-color-gold-soft: #ffffc7;
  --app-color-gold-strong: #b5b500;
  --app-color-silver: #b8dce8;
  --app-color-silver-soft: #eef8fb;
  --app-color-silver-strong: #72adc2;
  --app-color-copper: var(--app-color-brand-coral);
  --app-color-copper-soft: #ffe2da;
  --app-color-copper-strong: #d65e40;
  --app-color-danger: #d94a48;
  --app-color-danger-soft: #ffe0df;
  --app-color-success: var(--app-color-brand-teal);
  --app-color-success-soft: #d8f0f0;
  --app-color-warning: var(--app-color-brand-yellow);
  --app-color-warning-soft: #ffffcc;
  --app-color-info: var(--app-color-brand-blue);
  --app-color-info-soft: #d9f1fb;
  --app-color-focus: #ff8462;
  --app-color-selection: rgba(255, 132, 98, 0.24);
  --app-color-overlay: rgba(0, 63, 90, 0.42);
  --app-shadow-sm: 0 2px 6px rgba(0, 63, 90, 0.08);
  --app-shadow-md: 0 12px 28px rgba(0, 63, 90, 0.12);
  --app-shadow-lg: 0 24px 64px rgba(0, 63, 90, 0.2);
  --app-shadow-surface-raised: 0 12px 34px rgba(0, 63, 90, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --app-shadow-card-subtle: 0 3px 14px rgba(0, 63, 90, 0.07), 0 1px 0 rgba(255, 255, 255, 0.78) inset;
  --app-field-height: 44px;
  --app-field-radius: 12px;
  --app-field-surface: var(--app-color-surface);
  --app-field-surface-hover: var(--app-color-surface-soft);
  --app-field-surface-disabled: var(--app-color-surface-inset);
  --app-field-border: var(--app-color-border-strong);
  --app-field-border-invalid: var(--app-color-danger);
  --app-field-text: var(--app-color-text);
  --app-field-text-muted: var(--app-color-text-muted);
  --app-field-icon: var(--app-color-text-soft);
  --app-field-shadow: var(--app-shadow-sm);
  --app-field-focus-border: var(--app-color-copper);
  --app-field-focus-shadow: 0 0 0 3px var(--app-color-copper-soft);
  --app-field-invalid-shadow: 0 0 0 1px var(--app-color-danger) inset;
  --app-field-disabled-opacity: 0.65;
  --app-button-height: 42px;
  --app-button-radius: 999px;
  --app-button-padding-x: 18px;
  --app-button-light-bg: var(--app-color-surface);
  --app-button-light-bg-hover: var(--app-color-surface-soft);
  --app-button-light-border: var(--app-color-border-strong);
  --app-button-light-text: var(--app-color-text);
  --app-button-dark-bg: var(--app-color-brand-blue);
  --app-button-dark-bg-hover: var(--app-color-shell-2);
  --app-button-dark-border: var(--app-color-shell-2);
  --app-button-dark-text: var(--app-color-text-inverse);
  --app-button-light-disabled-bg: var(--app-color-surface-inset);
  --app-button-light-disabled-border: var(--app-color-border);
  --app-button-light-disabled-text: var(--app-color-text-muted);
  --app-button-dark-disabled-bg: var(--app-color-info-soft);
  --app-button-dark-disabled-border: var(--app-color-border-strong);
  --app-button-dark-disabled-text: var(--app-color-text-muted);
  --app-color-anon-background: #f7f4ed;
  --app-color-anon-muted: #647e89;
  --app-color-anon-status: #365968;
  --app-shadow-anon-button: 0 1px 2px rgba(0, 63, 90, 0.08);
  --app-shadow-anon-button-hover: 0 4px 12px rgba(0, 63, 90, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-color-heading-text: var(--app-color-highlight-text-inverse);
    --app-color-highlight-text: var(--app-color-highlight-text-inverse);
    --app-color-anon-background: #0c141b;
    --app-color-anon-muted: #aeb8b5;
    --app-color-anon-status: #e7eeec;
    --app-shadow-anon-button: 0 0 0 1px rgba(255, 255, 255, 0.16);
    --app-shadow-anon-button-hover: 0 0 0 1px rgba(0, 136, 194, 0.36), 0 5px 16px rgba(0, 88, 128, 0.28);
  }
}

* { box-sizing: border-box; }
::selection { background: var(--app-color-selection); }
html, body, #app { min-height: 100%; margin: 0; }
body { font-family: var(--app-font-sans); color: var(--app-color-text); background: var(--app-color-workspace); cursor: default; }
button, input { font: inherit; }
:where(a[href], button, select, summary, label, input[type="button"], input[type="checkbox"], input[type="color"], input[type="date"], input[type="file"], input[type="radio"], input[type="range"], input[type="reset"], input[type="submit"], [role="button"], [role="link"]) { cursor: pointer; }
:where(input:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], textarea, [contenteditable]:not([contenteditable="false"])) { cursor: text; }
:where(button, input, select, textarea)[disabled] { cursor: default; }
.app-type-overline { font-size: var(--app-text-overline-size); line-height: var(--app-text-overline-line); letter-spacing: .14em; text-transform: uppercase; font-weight: 750; }
.app-type-title-lg { font-size: var(--app-text-title-lg-size); line-height: var(--app-text-title-lg-line); font-weight: 700; }
.app-type-title-md { font-size: var(--app-text-title-md-size); line-height: var(--app-text-title-md-line); font-weight: 650; }
.app-type-title-sm { font-size: var(--app-text-title-sm-size); line-height: var(--app-text-title-sm-line); font-weight: 650; }
.app-type-body { font-size: var(--app-text-body-size); line-height: var(--app-text-body-line); }
.app-type-body-sm { font-size: var(--app-text-body-sm-size); line-height: var(--app-text-body-sm-line); font-weight: 500; }
.app-type-meta { font-size: var(--app-text-meta-size); line-height: var(--app-text-meta-line); font-weight: 500; }
.app-type-code { font-family: var(--app-font-mono); font-size: var(--app-text-code-size); line-height: var(--app-text-code-line); font-weight: 500; }
.app-type-chip { font-size: var(--app-text-chip-size); line-height: var(--app-text-chip-line); font-weight: 700; letter-spacing: .02em; }
.app-tone-text { color: var(--app-color-text); }
.app-tone-text-soft { color: var(--app-color-text-soft); }
.app-tone-text-muted { color: var(--app-color-text-muted); }
.app-tone-text-inverse { color: var(--app-color-text-inverse); }
.app-tone-text-soft-inverse { color: rgba(255, 255, 255, 0.92); }
.app-tone-text-muted-inverse { color: #ffffff; }
.app-tone-danger { color: var(--app-color-danger); }
.app-tone-success { color: var(--app-color-success); }

.rementas-menu-app-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin: -1px;
  background: url("rementasicon32_0.3.2") center / contain no-repeat;
}

.hy3-view { min-width: 0; min-height: 100%; }
.hy3-view__surface { min-width: 0; min-height: 100%; padding: 20px; display: grid; gap: 18px; align-content: start; }
.hy3-view__hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
.hy3-view__hero-copy,
.hy3-view__panel-copy { min-width: 0; display: grid; gap: 6px; }
.hy3-view__hero-copy { max-width: 920px; }
.hy3-view__title { margin: 0; }
.hy3-view__intro { margin: 8px 0 0; }
.hy3-view__stats,
.hy3-view__chips,
.hy3-view__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hy3-view__stat,
.hy3-view__toolbar,
.hy3-view__section,
.hy3-view__panel,
.hy3-view__status { background: var(--app-color-surface); border: 1px solid var(--app-color-border); box-shadow: var(--app-shadow-card-subtle); }
.hy3-view__stat { display: flex; flex-direction: column; gap: 4px; min-width: 132px; padding: 12px 16px; border-radius: 12px; }
.hy3-view__toolbar,
.hy3-view__section,
.hy3-view__panel,
.hy3-view__status { border-radius: 14px; }
.hy3-view__toolbar { padding: 18px; }
.hy3-view__section,
.hy3-view__panel { display: grid; gap: 14px; padding: 18px; min-width: 0; overflow: visible; }
.hy3-view__panel-head,
.hy3-view__section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hy3-view__panel-body,
.hy3-view__section-body { display: grid; gap: 14px; }
.hy3-view__chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--app-color-border); background: var(--app-color-surface-inset); white-space: nowrap; }
.hy3-view__inner-surface { background: var(--app-color-surface-soft); border: 1px solid var(--app-color-border); border-radius: 12px; }

body #page_dev .page_dev__main:empty {
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 18%, rgba(0, 136, 194, 0.13), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(255, 132, 98, 0.15), transparent 30%),
    var(--app-color-workspace);
}

body #page_dev .page_dev__main:empty::before {
  content: "Choose a development tool";
  color: var(--app-color-shell);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-weight: 750;
}

body #page_dev .page_dev__main:empty::after {
  content: "Palette, components, data tools and Git are available from the sidebar.";
  max-width: 460px;
  color: var(--app-color-text-muted);
  font-size: var(--app-text-body-size);
  line-height: var(--app-text-body-line);
}

body #page_auth .left-menu__item.is-active,
body #page_auth .left-menu__item.is-active .left-menu__icon,
body #page_auth .left-menu__item.is-active .left-menu__label {
  color: #000000;
}

body #page_dev .left-menu__item.is-active,
body #page_dev .left-menu__item.is-active .left-menu__icon,
body #page_dev .left-menu__item.is-active .left-menu__label,
body #page_dev .dev-dash-header .hy3-chip--copper {
  color: var(--app-color-shell);
}

@media (max-width: 760px) {
  .hy3-view__surface { padding: 12px; }
  body #page_dev .page_dev__main:empty { padding: 18px; }
}