/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .min-h-\[280px\] {
    min-height: 280px;
  }
  .min-h-\[410px\] {
    min-height: 410px;
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-52 {
    min-width: calc(var(--spacing) * 52);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-none {
    list-style-type: none;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[var\(--radius\)\] {
    border-radius: var(--radius);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }
  .border-white\/80 {
    border-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-\[var\(--muted\)\] {
    background-color: var(--muted);
  }
  .bg-\[var\(--primary\)\] {
    background-color: var(--primary);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/70 {
    background-color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[clamp\(2\.45rem\,8vw\,4\.3rem\)\] {
    font-size: clamp(2.45rem, 8vw, 4.3rem);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-\[1\.02\] {
    --tw-leading: 1.02;
    line-height: 1.02;
  }
  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[-0\.055em\] {
    --tw-tracking: -0.055em;
    letter-spacing: -0.055em;
  }
  .tracking-\[\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-\[var\(--primary\)\] {
    color: var(--primary);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .shadow-\[0_18px_55px_rgba\(15\,23\,42\,\.10\)\] {
    --tw-shadow: 0 18px 55px var(--tw-shadow-color, rgba(15,23,42,.10));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow\)\] {
    --tw-shadow: var(--shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-slate-200\/70 {
    --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
    }
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .group-hover\:bg-\[var\(--primary\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: var(--primary);
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .placeholder\:text-slate-400 {
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:border-\[color\:var\(--primary\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--primary);
      }
    }
  }
  .hover\:border-\[var\(--primary\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--primary);
      }
    }
  }
  .hover\:bg-\[var\(--muted\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--muted);
      }
    }
  }
  .hover\:text-\[var\(--foreground\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--foreground);
      }
    }
  }
  .hover\:text-\[var\(--primary\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--primary);
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .focus\:border-\[var\(--primary\)\] {
    &:focus {
      border-color: var(--primary);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-\[color\:var\(--ring\)\] {
    &:focus {
      --tw-ring-color: var(--ring);
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-\[var\(--ring\)\] {
    &:focus-visible {
      --tw-ring-color: var(--ring);
    }
  }
  .focus-visible\:outline-none {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .disabled\:pointer-events-none {
    &:disabled {
      pointer-events: none;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:min-h-\[330px\] {
    @media (width >= 40rem) {
      min-height: 330px;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-7 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:pt-10 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .sm\:leading-8 {
    @media (width >= 40rem) {
      --tw-leading: calc(var(--spacing) * 8);
      line-height: calc(var(--spacing) * 8);
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1fr_260px\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 260px;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:py-10 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .md\:py-12 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:min-h-\[430px\] {
    @media (width >= 64rem) {
      min-height: 430px;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1\.1fr_\.9fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.1fr .9fr;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
}
:root {
  --primary: #2563eb;
  --primary-2: #0f766e;
  --accent: #7c3aed;
  --surface: #ffffff;
  --background: #f8fafc;
  --foreground: #0f172a;
  --muted: #f1f5f9;
  --border: #e2e8f0;
  --ring: rgba(37,99,235,.18);
  --radius: 20px;
  --shadow: 0 10px 34px rgba(15,23,42,.065);
  --font: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-family: var(--font);
  background: var(--background);
  color: var(--foreground);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  text-rendering: optimizeLegibility;
}
a {
  text-decoration: none;
  color: inherit;
}
button,input,textarea,select {
  font: inherit;
}
[hidden] {
  display: none !important;
}
.site-shell {
  min-height: 100vh;
}
.site-header {
  background: color-mix(in srgb,white 88%,transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand-mark {
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow: 0 8px 22px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 22px color-mix(in srgb,var(--primary) 25%,transparent);
  }
}
.menu-lines,.menu-lines:before,.menu-lines:after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  position: relative;
}
.menu-lines:before {
  position: absolute;
  top: -5px;
}
.menu-lines:after {
  position: absolute;
  top: 5px;
}
.mobile-menu summary::-webkit-details-marker {
  display: none;
}
.hero-panel {
  background: linear-gradient(180deg,var(--primary),var(--background));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg,color-mix(in srgb,var(--primary) 5%,white),color-mix(in srgb,var(--background) 92%,white));
  }
  isolation: isolate;
}
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(to right,var(--primary) 1px,transparent 1px),linear-gradient(to bottom,var(--primary) 1px,transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(to right,color-mix(in srgb,var(--primary) 8%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--primary) 8%,transparent) 1px,transparent 1px);
  }
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom,rgba(0,0,0,.8),transparent 84%);
}
.hero-panel:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 24% 14%,var(--primary),transparent 31%),radial-gradient(circle at 79% 28%,var(--accent),transparent 27%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 24% 14%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 31%),radial-gradient(circle at 79% 28%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 27%);
  }
}
.hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(3px);
  opacity: .42;
  z-index: -1;
}
.hero-orb-a {
  width: 260px;
  height: 260px;
  right: 8%;
  top: 14%;
  background: radial-gradient(circle,var(--primary),transparent 68%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle,color-mix(in srgb,var(--primary) 24%,white),transparent 68%);
  }
}
.hero-orb-b {
  width: 180px;
  height: 180px;
  right: 30%;
  bottom: 0;
  background: radial-gradient(circle,var(--primary-2),transparent 68%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle,color-mix(in srgb,var(--primary-2) 20%,white),transparent 68%);
  }
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--primary) 12%,transparent);
  }
}
.hero-title-accent {
  background: linear-gradient(112deg,var(--foreground) 22%,var(--primary) 62%,var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-search {
  transition: transform .2s ease,box-shadow .2s ease;
}
.hero-search:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 22px 65px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 22px 65px color-mix(in srgb,var(--primary) 14%,transparent);
  }
}
.quick-chip {
  transition: transform .18s ease,border-color .18s ease,color .18s ease;
}
.quick-chip:hover {
  transform: translateY(-1px);
}
.hero-showcase {
  perspective: 900px;
}
.showcase-ring {
  position: absolute;
  inset: 6% 8% 4% 12%;
  border: 1px solid var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--primary) 16%,transparent);
  }
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: inset 0 0 80px var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 80px color-mix(in srgb,var(--primary) 5%,transparent);
  }
}
.demo-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(360px,80%);
  padding: 17px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px rgba(15,23,42,.11);
  transform: rotate(var(--r,0deg));
  animation: floatCard 6s ease-in-out infinite;
}
.demo-card-0 {
  top: 3%;
  left: 5%;
  --r: -3deg;
}
.demo-card-1 {
  top: 35%;
  right: 0;
  --r: 2deg;
  animation-delay: -2s;
}
.demo-card-2 {
  bottom: 4%;
  left: 11%;
  --r: -1.5deg;
  animation-delay: -4s;
}
.demo-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  flex: none;
  border-radius: 15px;
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,white),color-mix(in srgb,var(--primary-2) 14%,white));
  }
  font-weight: 900;
  color: var(--primary);
}
.floating-answer {
  position: absolute;
  right: 12%;
  bottom: 28%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 15px;
  background: #0f172a;
  color: white;
  box-shadow: 0 15px 40px rgba(15,23,42,.2);
  transform: rotate(4deg);
}
.floating-answer span,.floating-answer small {
  font-size: 10px;
  color: #94a3b8;
}
.floating-answer strong {
  font-size: 13px;
}
@keyframes floatCard {
  0%,100% {
    translate: 0 0;
    rotate: var(--r);
  }
  50% {
    translate: 0 -9px;
    rotate: var(--r);
  }
}
.category-rail {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-rail::-webkit-scrollbar {
  display: none;
}
.category-pill.is-active {
  background: var(--foreground);
  border-color: var(--foreground);
  color: white;
}
.calc-card {
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
}
.calc-card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my),var(--primary),transparent 72%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--primary) 10%,transparent),transparent 72%);
  }
  transition: opacity .25s ease;
}
.calc-card:hover:before {
  opacity: 1;
}
.card-shine {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--primary),transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 50%,transparent),transparent);
  }
  opacity: 0;
  transition: opacity .25s;
}
.calc-card:hover .card-shine {
  opacity: 1;
}
.trust-strip {
  background: linear-gradient(140deg,white,var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(140deg,white,color-mix(in srgb,var(--primary) 3%,white));
  }
}
body[data-layout="soft"] .calc-card {
  border-radius: 28px;
}
body[data-layout="compact"] .calc-card {
  border-radius: 14px;
  box-shadow: none;
}
body[data-card="flat"] .calc-card {
  box-shadow: none;
}
body[data-hero="minimal"] .hero-grid-pattern,body[data-hero="minimal"] .hero-orb,body[data-hero="minimal"] .hero-panel:after {
  display: none;
}
body[data-hero="minimal"] .hero-panel {
  background: var(--background);
}
body[data-hero="aurora"] .hero-panel:after {
  background: radial-gradient(circle at 20% 15%,var(--primary),transparent 32%),radial-gradient(circle at 76% 22%,var(--accent),transparent 28%),radial-gradient(circle at 55% 86%,var(--primary-2),transparent 24%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 20% 15%,color-mix(in srgb,var(--primary) 19%,transparent),transparent 32%),radial-gradient(circle at 76% 22%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 28%),radial-gradient(circle at 55% 86%,color-mix(in srgb,var(--primary-2) 13%,transparent),transparent 24%);
  }
}
@media (max-width:639px) {
  .hero-grid-pattern {
    background-size: 32px 32px;
    opacity: .7;
  }
  .hero-orb-a {
    width: 180px;
    height: 180px;
    right: -70px;
    top: 6%;
  }
  .hero-orb-b {
    display: none;
  }
  .hero-search {
    border-radius: 18px;
  }
  .calc-card {
    border-radius: 20px !important;
  }
  .trust-strip {
    border-radius: 22px;
  }
  .site-header {
    backdrop-filter: blur(14px);
  }
}
@media (hover:none) {
  .calc-card:hover {
    transform: none;
  }
  .calc-card:before,.card-shine {
    display: none;
  }
  .quick-chip:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .demo-float-card {
    animation: none;
  }
  .calc-card,.quick-chip,.hero-search {
    transition: none;
  }
}
.easy-calc {
  border-radius: 28px;
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
}
.easy-calc-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 22px 14px;
}
.easy-calc-body {
  padding: 12px 22px 22px;
}
.easy-step-badge {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--primary) 12%,white);
  }
  color: var(--primary);
  font-weight: 900;
}
.easy-input-zone {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(180deg,#fff,color-mix(in srgb,var(--muted) 45%,white));
  }
  padding: 18px;
}
.easy-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--foreground);
}
.easy-field-help {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 650;
  color: #64748b;
}
.easy-result-zone {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
  border: 2px solid var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  }
  border-radius: 22px;
  background: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--primary) 5%,white);
  }
  padding: 18px;
}
.easy-answer {
  margin-top: 3px;
  font-size: clamp(1.8rem,7vw,2.75rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.easy-help {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  border-radius: 15px;
  background: #fffbeb;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #57534e;
}
.easy-help strong {
  white-space: nowrap;
  color: #92400e;
}
.easy-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.easy-presets>span {
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
}
.easy-presets button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 800;
  color: #475569;
}
.easy-presets button:hover,.easy-presets button:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}
.easy-result-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.easy-result-grid>div {
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
}
.easy-result-grid span,.easy-result-grid b {
  display: block;
}
.easy-result-grid span {
  font-size: 11px;
  color: #64748b;
}
.easy-result-grid b {
  margin-top: 3px;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.easy-how {
  display: grid;
  gap: 10px;
}
.easy-how-item {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}
.easy-how-num {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: var(--foreground);
  color: #fff;
  font-weight: 900;
}
.easy-how-item b {
  display: block;
  font-size: 14px;
}
.easy-how-item span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}
body[data-large-controls="true"] input,body[data-large-controls="true"] select {
  min-height: 54px;
  font-size: 17px;
}
body[data-large-controls="true"] .category-pill {
  min-height: 44px;
}
body[data-easy="true"] .calc-card p {
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width:639px) {
  .easy-calc {
    border-radius: 22px;
  }
  .easy-calc-head {
    padding: 18px 16px 12px;
  }
  .easy-calc-body {
    padding: 10px 16px 18px;
  }
  .easy-input-zone,.easy-result-zone {
    padding: 15px;
    border-radius: 18px;
  }
  .easy-help {
    flex-direction: column;
    gap: 3px;
  }
  .easy-result-grid {
    grid-template-columns: 1fr;
  }
  .easy-presets {
    gap: 7px;
  }
  .easy-presets button {
    min-height: 44px;
  }
  .easy-step-badge {
    width: 32px;
    height: 32px;
  }
}
body[data-show-examples="false"] .easy-presets {
  display: none;
}
body[data-plain-language="false"] .easy-help {
  display: none;
}
body[data-easy="false"] .easy-step-badge {
  background: var(--muted);
  color: #64748b;
}
.hero-illustration-wrap {
  isolation: isolate;
}
.hero-image-halo {
  position: absolute;
  inset: 10% 4% 0;
  border-radius: 48% 52% 45% 55%;
  background: radial-gradient(circle at 50% 45%,var(--primary),transparent 62%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--primary) 16%,white),transparent 62%);
  }
  filter: blur(1px);
  z-index: -1;
}
.hero-illustration {
  display: block;
  width: min(100%,610px);
  margin: auto;
  align-self: end;
  filter: drop-shadow(0 24px 32px rgba(15,23,42,.10));
}
.hero-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hero-bubble {
  position: absolute;
  border: 1px solid var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--primary) 14%,white);
  }
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  color: var(--foreground);
}
.hero-bubble-a {
  top: 13%;
  left: 4%;
  transform: rotate(-4deg);
}
.hero-bubble-b {
  right: 2%;
  top: 32%;
  transform: rotate(4deg);
  color: var(--primary);
}
.scene-card {
  will-change: transform;
}
.scene-art-box {
  display: grid;
  place-items: center;
  min-height: 220px;
  background: linear-gradient(160deg,var(--primary),var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(160deg,color-mix(in srgb,var(--primary) 5%,white),color-mix(in srgb,var(--muted) 75%,white));
  }
  overflow: hidden;
}
.scene-art {
  display: block;
  width: min(82%,300px);
  margin: 12px auto 0;
}
.scene-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.scene-card:hover .scene-art img {
  transform: scale(1.025);
}
.calculator-intro {
  background: linear-gradient(145deg,#fff,var(--primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg,#fff,color-mix(in srgb,var(--primary) 3%,white));
  }
}
.calculator-art-wrap {
  display: grid;
  place-items: center;
  min-height: 210px;
  border-radius: 24px;
  background: linear-gradient(150deg,var(--primary),var(--muted));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(150deg,color-mix(in srgb,var(--primary) 6%,white),color-mix(in srgb,var(--muted) 80%,white));
  }
  overflow: hidden;
}
.calculator-art {
  display: block;
  width: min(100%,250px);
}
.calculator-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(15,23,42,.07));
}
.future-scene {
  min-height: 112px;
}
.future-art-box {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  flex: none;
  border-radius: 20px;
  background: white;
  overflow: hidden;
}
.future-art {
  display: block;
  width: 82px;
}
.future-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width:1023px) {
  .hero-illustration-wrap {
    min-height: 300px;
    margin-top: -6px;
  }
  .hero-illustration {
    width: min(86vw,460px);
  }
  .hero-bubble-a {
    left: 9%;
    top: 14%;
  }
  .hero-bubble-b {
    right: 9%;
    top: 34%;
  }
}
@media (max-width:639px) {
  .hero-illustration-wrap {
    min-height: 235px;
    margin-top: 2px;
  }
  .hero-illustration {
    width: min(92vw,330px);
  }
  .hero-bubble {
    padding: 7px 10px;
    font-size: 11px;
  }
  .hero-bubble-a {
    left: 1%;
    top: 10%;
  }
  .hero-bubble-b {
    right: 0;
    top: 31%;
  }
  .scene-art-box {
    min-height: 178px;
  }
  .scene-art {
    width: min(76%,230px);
  }
  .calculator-intro {
    padding-bottom: 14px;
  }
  .calculator-art-wrap {
    min-height: 155px;
  }
  .calculator-art {
    width: min(70vw,190px);
  }
  .future-scene {
    align-items: flex-start;
  }
  .future-art-box {
    width: 70px;
    height: 70px;
    border-radius: 16px;
  }
  .future-art {
    width: 66px;
  }
}
@media (hover:none) {
  .scene-card:hover {
    transform: none;
  }
  .scene-card:hover .scene-art img {
    transform: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .scene-card,.scene-art img {
    transition: none;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}

/* CalcBean friendly homepage v0.5 */
html{scroll-behavior:smooth}body{background:var(--background);color:var(--foreground)}
.calcbean-header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-color:#e9eef3;box-shadow:0 2px 16px rgba(29,78,216,.04)}
.calcbean-brand{text-decoration:none}.bean-logo{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff8df,#fff);border:2px solid #f1e7c9;box-shadow:0 8px 20px rgba(21,128,61,.13);font-size:12px;color:#553a2e;font-weight:900;line-height:1}.bean-logo i:before,.bean-logo i:after{content:"";position:absolute;top:-10px;width:18px;height:12px;background:#4caf50;border-radius:100% 0 100% 0}.bean-logo i:before{left:9px;transform:rotate(30deg)}.bean-logo i:after{right:9px;transform:scaleX(-1) rotate(30deg)}.bean-logo b{font-size:11px;letter-spacing:-2px;transform:translateY(2px)}
.header-icon-btn,.header-soft-btn,.header-main-btn{height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-weight:800;text-decoration:none;white-space:nowrap}.header-icon-btn{width:42px;border:1px solid #e6ebf0;background:#fff;font-size:23px}.header-soft-btn{padding:0 14px;background:#f7f9fb;border:1px solid #edf1f5;font-size:13px}.header-main-btn{padding:0 17px;background:linear-gradient(135deg,#2686ff,#1e6de8);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.2);font-size:13px}
.calcbean-home{overflow:hidden}.bean-hero{min-height:455px;background:linear-gradient(180deg,#dff4ff 0%,#eefaff 49%,#f9fff2 100%);border-color:#dbeee0}.bean-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.94) 0 7%,transparent 7.2%),radial-gradient(circle at 28% 8%,rgba(255,255,255,.7) 0 5%,transparent 5.2%),radial-gradient(circle at 74% 12%,rgba(255,255,255,.74) 0 6%,transparent 6.2%);opacity:.8}.bean-hills{position:absolute;left:-8%;right:-8%;bottom:-95px;height:230px;border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-1deg)}.bean-hills-a{background:#c8ef9b;bottom:-132px;left:-20%;right:30%;opacity:.92}.bean-hills-b{background:#9cdb79;bottom:-165px;left:28%;right:-20%;opacity:.72}.bean-sky-clouds{position:absolute;inset:0;background:radial-gradient(ellipse at 8% 25%,rgba(255,255,255,.82) 0 5%,transparent 5.5%),radial-gradient(ellipse at 34% 20%,rgba(255,255,255,.62) 0 4%,transparent 4.5%);pointer-events:none}.bean-kicker{display:inline-flex;align-items:center;border-radius:999px;background:#fff;padding:7px 12px;border:1px solid rgba(22,163,74,.13);box-shadow:0 8px 22px rgba(21,128,61,.08);font-size:12px;font-weight:900;color:#15803d}.bean-kicker:before{content:"●";font-size:9px;color:#22c55e;margin-right:7px}.bean-hero-title{font-size:clamp(2.5rem,6vw,4.25rem);font-weight:950;line-height:1.02;letter-spacing:-.065em;color:#0d1b33}.bean-hero-title strong{color:#199b49;text-shadow:0 4px 0 rgba(255,255,255,.75)}
.bean-search{display:flex;align-items:center;gap:8px;background:#fff;padding:7px 7px 7px 14px;border:2px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 16px 38px rgba(15,76,129,.15),0 0 0 1px #dbe7ef}.bean-search:focus-within{box-shadow:0 18px 42px rgba(22,163,74,.17),0 0 0 3px rgba(34,197,94,.15)}.bean-search-icon{font-size:25px;color:#193a70;font-weight:900}.bean-search input{min-width:0;flex:1;height:50px;border:0;outline:none;background:transparent;font-size:15px;font-weight:700;color:#172033}.bean-search input::placeholder{color:#9ba8b8;font-weight:650}.bean-search button{height:48px;min-width:122px;border-radius:16px;background:linear-gradient(135deg,#29b957,#16a34a);color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(22,163,74,.22);cursor:pointer}.bean-search button:hover{transform:translateY(-1px)}
.bean-query-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.bean-query-row>span{font-size:12px;color:#607086;font-weight:900;margin-right:2px}.bean-query-row a,.bean-query-row button{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid #e6edf2;color:#42516a;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(15,23,42,.05);cursor:pointer}.bean-query-row a:hover,.bean-query-row button:hover{color:#15803d;border-color:#b9e2c5}.bean-note-card{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:16px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);font-size:13px;color:#294354;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.bean-hero-art{min-height:330px;display:flex;align-items:flex-end;justify-content:center}.bean-hero-picture{width:min(100%,530px);display:block;filter:drop-shadow(0 22px 28px rgba(30,64,175,.12));transform:translateY(26px)}.bean-hero-picture img{width:100%;max-height:405px;object-fit:contain}.bean-talk{position:absolute;background:#fff;border-radius:26px;padding:11px 15px;font-size:12px;font-weight:800;color:#374151;box-shadow:0 12px 28px rgba(15,23,42,.11);line-height:1.45}.bean-talk:after{content:"";position:absolute;width:13px;height:13px;background:#fff;transform:rotate(45deg)}.bean-talk b{color:#16833d}.bean-talk-a{right:5px;top:20px}.bean-talk-a:after{bottom:-6px;left:24px}.bean-talk-b{right:-8px;bottom:46px}.bean-talk-b:after{bottom:-6px;right:26px}
.bean-category-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));overflow:hidden;background:#fff;border:1px solid #e4ebf0;border-radius:24px;padding:9px;box-shadow:0 18px 45px rgba(28,58,90,.13)}.bean-category-tile{min-width:0;min-height:112px;border:0;border-right:1px solid #edf1f4;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:17px;cursor:pointer;text-decoration:none;padding:9px 5px;transition:.18s ease;color:#16213a}.bean-category-tile:last-child{border-right:0}.bean-category-tile:hover{background:#f7fbf7;transform:translateY(-2px)}.bean-category-icon{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#f4fbff,#fff);display:grid;place-items:center;font-size:29px;box-shadow:inset 0 0 0 1px #eff3f7}.bean-category-tile b{font-size:13px;font-weight:950}.bean-category-tile small{max-width:100%;font-size:10px;color:#8a97a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bean-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px}.bean-section-head h2{font-size:clamp(1.45rem,3vw,2rem);font-weight:950;letter-spacing:-.045em;color:#0e1d37}.bean-section-head p{margin-top:4px;color:#8793a4;font-size:13px;font-weight:650}.bean-section-head>a{font-size:13px;font-weight:900;color:#16833d}.bean-section-head.compact h2{font-size:1.55rem}
.bean-popular-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.bean-popular-card{text-align:left;border:1px solid #e6edf1;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 24px rgba(22,50,80,.07);cursor:pointer;transition:.18s ease;text-decoration:none;color:#13213a;min-width:0}.bean-popular-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(22,50,80,.12);border-color:#cfe8d5}.bean-popular-art{height:118px;background:linear-gradient(180deg,#f8fbff,#f4fff6);overflow:hidden;display:flex;align-items:center;justify-content:center}.bean-popular-picture{width:100%;height:100%}.bean-popular-picture img{width:100%;height:100%;object-fit:contain;padding:4px}.bean-popular-body{padding:13px}.bean-popular-body h3{font-size:14px;font-weight:950;letter-spacing:-.02em}.bean-popular-body p{height:42px;overflow:hidden;margin-top:6px;color:#7a8798;font-size:11px;line-height:1.65}.bean-popular-body span{display:inline-flex;margin-top:10px;color:#13a34d;font-size:11px;font-weight:900}.bean-coming-card{opacity:.83}.bean-coming-badge{display:inline-flex;padding:3px 7px;border-radius:999px;background:#fff3cd;color:#a16207;font-size:9px;font-weight:900;margin-bottom:5px}
.bean-easy-panel,.bean-cta-panel{border-radius:24px;border:1px solid #e3ebf2;box-shadow:0 12px 30px rgba(30,64,100,.07)}.bean-easy-panel{padding:24px;background:linear-gradient(135deg,#edf8ff,#f7fbff)}.bean-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}.bean-steps>div{min-height:118px;position:relative;border-radius:18px;background:#fff;padding:19px 14px 13px;text-align:center;box-shadow:0 8px 20px rgba(55,90,120,.06)}.bean-steps>div>span{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#2b7df5;color:#fff;font-weight:950}.bean-steps>div:nth-of-type(2)>span{background:#28b24f}.bean-steps>div:nth-of-type(3)>span{background:#ff7b25}.bean-steps i{display:block;font-style:normal;font-size:30px;color:#2a7cf0;line-height:1;margin-bottom:10px}.bean-steps b{display:block;font-size:13px;font-weight:950}.bean-steps small{display:block;margin-top:5px;color:#8491a2;font-size:10px;line-height:1.5}.bean-steps>em{font-style:normal;color:#2d82ee;font-size:26px;font-weight:900}
.bean-cta-panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:220px;padding:25px;background:linear-gradient(135deg,#f8fff1,#efffe8)}.bean-cta-panel:after{content:"";position:absolute;width:180px;height:180px;right:-55px;bottom:-70px;border-radius:50%;background:rgba(125,211,95,.18)}.bean-cta-panel>div:first-child{position:relative;z-index:2;max-width:54%}.bean-cta-panel p{font-size:12px;font-weight:850;color:#3f6d4b}.bean-cta-panel h2{margin-top:4px;font-size:1.5rem;font-weight:950;letter-spacing:-.04em}.bean-cta-panel mark{background:#fde68a;padding:0 3px;border-radius:5px}.bean-cta-panel span{display:block;margin-top:10px;color:#6f806f;font-size:12px;line-height:1.7}.bean-cta-panel a{display:inline-flex;margin-top:15px;padding:10px 14px;border-radius:14px;background:#20a845;color:#fff;font-size:12px;font-weight:900}.bean-cta-mascot{position:absolute;z-index:1;right:18px;bottom:18px;width:146px;height:146px;display:block}.bean-cta-picture{display:block;width:146px;height:146px;border-radius:22px;overflow:hidden;box-shadow:0 12px 28px rgba(15,23,42,.14);background:#fff}.bean-cta-picture img{display:block;width:146px;height:146px;object-fit:cover;object-position:center;border-radius:22px}
.bean-all-calcs{border-top:1px solid #edf1f4}.bean-all-top{display:flex;align-items:end;justify-content:space-between;gap:18px}.bean-all-top>div:first-child>span{font-size:11px;font-weight:950;color:#16a34a;letter-spacing:.08em}.bean-all-top h2{font-size:1.65rem;font-weight:950;letter-spacing:-.04em;margin-top:4px}.bean-all-top p{font-size:12px;color:#8895a5;margin-top:5px}.bean-filter-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.bean-filter-row button{padding:8px 11px;border-radius:999px;border:1px solid #e1e8ee;background:#fff;font-size:11px;font-weight:850;color:#68768a;cursor:pointer}.bean-filter-row button.is-active{background:#173354;color:#fff;border-color:#173354}.bean-all-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bean-tool-card{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:13px;min-height:112px;padding:13px;border-radius:20px;border:1px solid #e5ecf1;background:#fff;box-shadow:0 8px 20px rgba(21,51,80,.05);text-decoration:none;color:#13213a;transition:.18s ease}.bean-tool-card:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(21,51,80,.1)}.bean-tool-icon{width:78px;height:78px;border-radius:16px;background:#f3faf5;overflow:hidden;display:grid;place-items:center}.bean-tool-picture,.bean-tool-picture img{width:100%;height:100%;object-fit:contain}.bean-tool-card small{font-size:10px;color:#16a34a;font-weight:900}.bean-tool-card h3{font-size:14px;font-weight:950;margin-top:2px}.bean-tool-card p{font-size:11px;color:#7c899a;margin-top:5px}.bean-tool-card>span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#e6f9ed;color:#16a34a;font-weight:950}.bean-empty{margin-top:20px;text-align:center;padding:28px;border:1px dashed #d9e4ea;border-radius:20px;background:#fff}.bean-empty p{color:#8492a4;font-size:12px;margin-top:5px}
.bean-trust{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e6edf1;border-radius:18px;box-shadow:0 7px 20px rgba(32,62,86,.05);overflow:hidden}.bean-trust>div{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 12px;border-right:1px solid #edf1f4;font-size:21px}.bean-trust>div:last-child{border-right:0}.bean-trust span{display:flex;flex-direction:column}.bean-trust b{font-size:11px;font-weight:950}.bean-trust small{font-size:9px;color:#8b97a7;margin-top:2px}
.bean-toast{position:fixed;left:50%;bottom:26px;z-index:100;transform:translate(-50%,20px);padding:12px 17px;border-radius:999px;background:#17243a;color:#fff;font-size:13px;font-weight:800;box-shadow:0 15px 40px rgba(15,23,42,.25);opacity:0;pointer-events:none;transition:.2s}.bean-toast.is-show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1023px){.bean-category-grid{grid-template-columns:repeat(5,1fr);gap:3px}.bean-category-tile{border-right:0}.bean-popular-grid{grid-template-columns:repeat(3,1fr)}.bean-all-grid{grid-template-columns:repeat(2,1fr)}.bean-hero-art{min-height:290px}.bean-hero-picture{max-width:440px}}
@media(max-width:767px){.bean-hero{min-height:auto}.bean-hero .relative.mx-auto.grid{padding-bottom:74px}.bean-hero-title{font-size:clamp(2.45rem,12vw,3.55rem)}.bean-hero-art{min-height:265px;margin-top:-8px}.bean-hero-picture{transform:translateY(18px);max-width:390px}.bean-talk-a{right:4px;top:0}.bean-talk-b{display:none}.bean-search{padding:6px 6px 6px 11px;border-radius:19px}.bean-search input{height:45px;font-size:14px}.bean-search button{height:43px;min-width:89px;border-radius:14px;font-size:12px}.bean-query-row>span{width:100%}.bean-note-card{display:none}.bean-category-wrap{margin-top:-44px}.bean-category-grid{display:flex;overflow-x:auto;justify-content:flex-start;gap:7px;padding:8px;border-radius:20px;scrollbar-width:none}.bean-category-grid::-webkit-scrollbar{display:none}.bean-category-tile{flex:0 0 82px;min-height:91px;padding:7px 4px}.bean-category-icon{width:41px;height:41px;font-size:24px}.bean-category-tile b{font-size:11px}.bean-category-tile small{font-size:8px}.bean-popular-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:5px;scrollbar-width:none}.bean-popular-grid::-webkit-scrollbar{display:none}.bean-popular-card{flex:0 0 74%;scroll-snap-align:start}.bean-popular-art{height:140px}.bean-steps{grid-template-columns:1fr;gap:9px}.bean-steps>em{display:none}.bean-steps>div{min-height:102px;padding-left:63px;text-align:left;display:flex;flex-direction:column;justify-content:center}.bean-steps i{position:absolute;left:20px;bottom:15px;margin:0;font-size:25px}.bean-steps>div>span{left:14px;top:13px}.bean-cta-panel{min-height:235px;padding-bottom:118px}.bean-cta-panel>div:first-child{max-width:100%}.bean-cta-mascot{width:118px;height:118px;right:12px;bottom:14px}.bean-cta-picture,.bean-cta-picture img{width:118px;height:118px;border-radius:18px}.bean-all-top{align-items:flex-start;flex-direction:column}.bean-filter-row{justify-content:flex-start}.bean-all-grid{grid-template-columns:1fr}.bean-trust{grid-template-columns:1fr 1fr}.bean-trust>div{justify-content:flex-start;border-right:0;border-bottom:1px solid #edf1f4}.bean-trust>div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:480px){.bean-hero-title{font-size:2.65rem}.bean-hero-picture{max-width:330px}.bean-hero-art{min-height:235px}.bean-talk{font-size:10px;padding:9px 11px}.bean-talk-a{right:-1px;top:-2px}.bean-search button{min-width:78px;padding:0 10px}.bean-search input::placeholder{font-size:12px}.bean-popular-card{flex-basis:82%}.bean-easy-panel,.bean-cta-panel{padding:18px}.bean-cta-panel h2{font-size:1.25rem}.bean-cta-panel>div:first-child{max-width:68%}.bean-trust{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bean-popular-card,.bean-category-tile,.bean-tool-card,.bean-search button{transition:none!important}}
/* Structural fallbacks for the friendly homepage. Keep these independent of Tailwind build output. */
.bean-hero>.relative.mx-auto.grid{display:grid;max-width:72rem;margin:0 auto;padding:40px 16px 96px;gap:16px}
.bean-category-wrap{max-width:72rem;margin:-64px auto 0;padding-left:16px;padding-right:16px}
#easy-guide{display:grid;max-width:72rem;margin-left:auto;margin-right:auto;padding:32px 16px;gap:16px}
.bean-all-calcs,.calcbean-home>section.mx-auto{max-width:72rem;margin-left:auto;margin-right:auto}
.calcbean-header nav a{color:#536176}
@media(min-width:640px){.bean-hero>.relative.mx-auto.grid{padding-top:48px;padding-bottom:102px}.bean-category-wrap{margin-top:-70px}}
@media(min-width:1024px){.bean-hero>.relative.mx-auto.grid{grid-template-columns:1.04fr .96fr;align-items:center;padding-top:38px;padding-bottom:96px}.bean-hero-art{min-height:385px}#easy-guide{grid-template-columns:1.45fr .85fr}}
@media(min-width:1024px){.calcbean-header nav[aria-label="주 메뉴"]{display:flex!important;flex:1;align-items:center;justify-content:center;gap:4px}.calcbean-header details.mobile-menu{display:none!important}}

/* v0.6 convenience-first calculator controls */
.easy-mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px;padding:5px;border-radius:16px;background:#eef2f7}
.easy-mode-tabs button{min-height:46px;border:0;border-radius:12px;background:transparent;padding:9px 12px;font-size:14px;font-weight:900;color:#64748b}
.easy-mode-tabs button.is-selected{background:#fff;color:var(--primary);box-shadow:0 5px 14px rgba(15,23,42,.09)}
.quick-select-block{margin-top:14px;border:1px solid #e7edf3;border-radius:18px;background:#fff;padding:14px}
.quick-select-block:first-of-type{margin-top:0}
.quick-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.quick-title b{font-size:14px}.quick-title span{font-size:11px;font-weight:750;color:#94a3b8}
.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.quick-grid button{min-width:0;min-height:62px;border:1px solid #dfe7ee;border-radius:14px;background:#f9fbfd;padding:8px 5px;color:#334155;transition:.16s}
.quick-grid button strong,.quick-grid button small{display:block;overflow-wrap:anywhere}.quick-grid button strong{font-size:15px}.quick-grid button small{margin-top:2px;font-size:10px;color:#8491a1}
.quick-grid button:hover,.quick-grid button:focus-visible,.quick-grid button.is-selected{border-color:var(--primary);background:#effaf3;color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--ring)}
.quick-grid-pyeong{grid-template-columns:repeat(7,minmax(0,1fr))}.compact-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.direct-entry{display:flex;align-items:end;gap:12px;margin-top:16px;border-top:1px dashed #dce3eb;padding-top:14px}.direct-entry-label{flex:none;padding-bottom:15px;font-size:12px;font-weight:900;color:#64748b}
.input-unit-wrap{position:relative}.input-unit-wrap input,.direct-details input{width:100%;min-height:54px;border:1px solid var(--border);border-radius:14px;background:#fff;padding:12px 52px 12px 14px;font-size:18px;font-weight:800;outline:none}.input-unit-wrap input:focus,.direct-details input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.input-unit-wrap b{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:14px;color:#64748b}
.apartment-note{margin:14px 0 0;border-radius:14px;background:#fff;padding:11px 12px;font-size:12px;line-height:1.65;color:#64748b}.apartment-note b{color:#334155}
.loan-quick-stack{display:grid;gap:12px}.direct-details{margin-top:14px;border-radius:15px;background:#f8fafc;padding:4px 14px 14px}.direct-details summary{cursor:pointer;min-height:46px;display:flex;align-items:center;font-size:13px;font-weight:900;color:#475569}.direct-details input{padding-right:14px}
@media(max-width:760px){.quick-grid,.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-grid-pyeong{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-grid button{min-height:58px}.direct-entry{align-items:stretch;flex-direction:column;gap:5px}.direct-entry-label{padding-bottom:0}.quick-title{align-items:flex-start;flex-direction:column;gap:1px}}
@media(max-width:380px){.quick-grid,.compact-grid,.quick-grid-pyeong{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.7 menu pages and banner-first homepage */
.bean-hero-image-wrap{padding-bottom:6px}
.bean-top-banner{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:#dff3ff;box-shadow:var(--shadow)}
.bean-top-banner picture,.bean-top-banner img,.bean-top-banner-picture img{display:block;width:100%;height:auto}
.bean-top-search-card{max-width:50rem;margin:-24px auto 0;position:relative;z-index:3;padding:18px 18px 20px;border:1px solid var(--border);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 20px 50px rgba(15,23,42,.08)}.bean-top-search-card .bean-search{width:100%;max-width:none}.managed-ad-slot{width:min(100%,72rem);margin:18px auto;padding:0 16px;text-align:center}.managed-ad-slot:empty{display:none}
.bean-search-copy{margin-top:10px;font-size:15px;line-height:1.8;color:#475569;font-weight:700}
.menu-page-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.menu-page-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease}
.menu-page-card:hover{transform:translateY(-2px);box-shadow:0 18px 30px rgba(15,23,42,.08)}
.menu-page-card img{width:100%;aspect-ratio:16/7;object-fit:cover;background:#eaf3f8}
.menu-page-card div{padding:15px 16px 17px}
.menu-page-card strong{display:block;font-size:18px;font-weight:900;color:#0f172a}
.menu-page-card span{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:#64748b}
.menu-hero-banner{overflow:hidden;border:1px solid var(--border);border-radius:30px;background:#e9f5ff;box-shadow:var(--shadow)}
.menu-hero-banner img{display:block;width:100%;height:auto}
.menu-page-copy{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:18px;padding:22px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.menu-copy-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:#ecfdf5;color:var(--primary);font-size:12px;font-weight:900}
.menu-page-copy h1{margin-top:10px;font-size:34px;line-height:1.2;font-weight:900;color:#0f172a}
.menu-page-copy p{margin-top:10px;max-width:48rem;font-size:15px;line-height:1.85;color:#64748b}
.menu-copy-actions{display:flex;flex-wrap:wrap;gap:10px}
.menu-copy-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:16px;background:var(--primary);color:#fff;font-size:14px;font-weight:900;box-shadow:0 10px 24px rgba(22,163,74,.18)}
.menu-copy-actions a.is-soft{background:#f1f5f9;color:#334155;box-shadow:none}
.menu-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.menu-chip-row a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#475569;font-size:14px;font-weight:800}
.menu-chip-row a.is-active{border-color:var(--primary);background:#effaf3;color:var(--primary)}
.menu-featured-calc,.menu-related-calcs{margin-top:28px}
.menu-section-head h2{font-size:26px;font-weight:900;color:#0f172a}.menu-section-head p{margin-top:6px;color:#64748b}
.easy-calc .grid label{display:block}
.easy-calc .grid label input{width:100%;min-height:52px;margin-top:7px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff;font-size:17px;font-weight:800;outline:none}
.easy-calc .grid label input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
@media(max-width:960px){.menu-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-page-copy{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.bean-top-search-card{margin-top:-10px;padding:16px}.menu-page-grid{grid-template-columns:1fr}.menu-page-copy{padding:18px}.menu-page-copy h1{font-size:28px}.menu-copy-actions{width:100%}.menu-copy-actions a{flex:1}}

/* v0.10 salary/work calculators */
.wage-fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wage-fact-grid>div{min-width:0;border:1px solid #dfe7ee;border-radius:16px;background:#f8fbfd;padding:14px}
.wage-fact-grid span,.wage-fact-grid small{display:block;color:#64748b;font-size:11px;font-weight:800}
.wage-fact-grid strong{display:block;margin:5px 0 3px;color:#0f172a;font-size:19px;font-weight:950;letter-spacing:-.03em}
.salary-check{display:flex!important;align-items:flex-start;gap:10px;margin-top:15px;padding:13px 14px;border:1px solid #dce7df;border-radius:14px;background:#f2fbf5;color:#334155;font-size:13px;font-weight:800}
.salary-check input{width:20px!important;height:20px!important;min-height:0!important;margin:0!important;padding:0!important;accent-color:var(--primary);flex:none}
.easy-calc select{width:100%;min-height:52px;margin-top:7px;border:1px solid var(--border);border-radius:14px;background:#fff;padding:10px 14px;font-size:16px;font-weight:800;outline:none}
.easy-calc select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.salary-standard-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;padding:16px;border:1px solid #cfe7d7;border-radius:22px;background:linear-gradient(135deg,#effcf3,#f8fcff)}
.salary-standard-card>div{border-radius:16px;background:#fff;padding:14px 16px}
.salary-standard-card span,.salary-standard-card small{display:block;color:#64748b;font-size:12px;font-weight:800}
.salary-standard-card b{display:block;margin:5px 0;color:#0f7a3d;font-size:21px;font-weight:950}
.salary-standard-card p{grid-column:1/-1;margin:0;padding:4px 4px 0;color:#5b6878;font-size:12px;line-height:1.7}
@media(max-width:760px){.wage-fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.salary-standard-card{grid-template-columns:1fr}}
.salary-source-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 4px 0}
.salary-source-row span{font-size:12px;font-weight:900;color:#475569}
.salary-source-row a{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid #d9e5dd;border-radius:999px;background:#fff;color:#2f6d4a;font-size:11px;font-weight:800}

/* v1.1 home spacing fix: keep search panel from covering category buttons */
.calcbean-home > .bean-category-wrap{
  margin-top:0 !important;
  position:relative;
  z-index:2;
}
.calcbean-home .bean-top-search-card{
  margin-bottom:0;
}
@media (max-width:760px){
  .calcbean-home > .bean-category-wrap{margin-top:0 !important;}
}

/* v1.2 home search width balance fix */
.calcbean-home .bean-top-search-card{
  padding-left:16px;
  padding-right:16px;
}
.calcbean-home .bean-top-search-card .bean-search{
  width:100%;
  max-width:none !important;
}
@media (min-width: 768px){
  .calcbean-home .bean-top-search-card{
    padding-left:20px;
    padding-right:20px;
  }
}

/* v1.3 home search card width fix: shrink the white search panel itself */
.calcbean-home .bean-top-search-card{
  width:min(100%, 50rem);
  max-width:50rem;
  margin-left:auto;
  margin-right:auto;
  padding-left:18px;
  padding-right:18px;
}
.calcbean-home .bean-top-search-card .bean-search{
  width:100%;
  max-width:none !important;
}
@media (max-width:760px){
  .calcbean-home .bean-top-search-card{
    width:100%;
    max-width:none;
    padding-left:14px;
    padding-right:14px;
  }
}

/* v1.3.3 home search vertical position: visibly overlap the hero */
.calcbean-home .bean-top-search-card{
  margin-top:-24px !important;
  margin-bottom:-48px !important;
  position:relative;
  z-index:6;
  transform:translateY(-48px);
}
@media (max-width:760px){
  .calcbean-home .bean-top-search-card{
    margin-top:-16px !important;
    margin-bottom:-18px !important;
    transform:translateY(-18px);
  }
}