/* Generated from packages/shared/src/design.ts. Do not edit. */
[data-busy] { position: relative; cursor: progress; }
  a[data-busy] { display: inline-block; }
  button[data-busy]:disabled { opacity: 1; }
  [data-busy] > .st-busy-label { visibility: hidden; }
  [data-busy] > .st-busy-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: st-button-spin .7s linear infinite;
  }
  @keyframes st-button-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    [data-busy] > .st-busy-spinner { animation: none; }
  }

  :root {
    color-scheme: light;
    --st-text: #303a45;
    --st-text-secondary: #596673;
    --st-text-muted: #65727e;
    --st-border: #e1e8ee;
    --st-tide: #b9dfff;
    --st-surface: #ffffff;
    --st-serif: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --st-control-field-bg: #ffffff;
    --st-control-field-bg-hover: #f7fafd;
    --st-control-field-border: #e1e8ee;
    --st-control-field-border-strong: #aebfcd;
    --st-control-field-fg: #303a45;
    --st-control-field-shadow: none;
    --st-control-field-focus-bg: rgba(255,255,255,.98);
    --st-control-field-focus-border: rgba(154,201,236,.72);
    --st-control-field-focus-shadow: 0 0 0 3px rgba(235,248,255,.88), 0 0 0 5px rgba(154,201,236,.24);
    --st-control-picker-bg: rgba(248,253,255,.98);
    --st-control-picker-border: rgba(35,103,142,.28);
    --st-control-picker-shadow: 0 18px 46px rgba(26,77,108,.20), inset 0 1px 0 rgba(255,255,255,.88);
    --st-control-picker-icon: #596673;
    --st-control-option-bg: #f7fafd;
    --st-control-option-hover-bg: rgba(154,201,236,.12);
    --st-control-option-selected-bg: #eaf5ff;
    --st-control-option-selected-fg: #303a45;
    --st-control-button-bg: #ffffff;
    --st-control-button-fg: #47525e;
    --st-control-button-border: #e1e8ee;
    --st-control-primary-bg: #b9dfff;
    --st-control-primary-fg: #303a45;
    --st-control-primary-border: #b9dfff;
    --st-control-danger-bg: #fff0ef;
    --st-control-danger-fg: #a64e48;
    --st-control-danger-border: rgba(166,78,72,.34);
  }
  * { box-sizing: border-box; }


  .st-gloss { display: grid; gap: 3px; min-width: 0; }
  .st-gloss__src {
    font-family: var(--st-serif);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    color: #65727e;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .st-gloss__src:empty { display: none; }
  .st-gloss__dst {
    font-size: 14px;
    line-height: 1.55;
    color: #303a45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .st-gloss--lg .st-gloss__src { font-size: 13px; }
  .st-gloss--lg .st-gloss__dst { font-size: 15px; font-weight: 640; }

  .st-gloss--wrap .st-gloss__src,
  .st-gloss--wrap .st-gloss__dst { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }


  .st-num {
    font-family: var(--st-serif);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.01em;
  }
  :lang(ja) { --st-locale-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
  :lang(ko) { --st-locale-font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
  body:lang(ja), body:lang(ko) { font-family: var(--st-locale-font); }
  body:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
  input, select, textarea, button, pre, code { font-family: var(--st-locale-font, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); text-shadow: none; }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea,
  select {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--st-control-field-border);
    border-radius: 8px;
    background-color: var(--st-control-field-bg);
    color: var(--st-control-field-fg);
    box-shadow: var(--st-control-field-shadow);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover:not(:disabled),
  select:hover:not(:disabled),
  textarea:hover:not(:disabled) {
    border-color: var(--st-control-field-border-strong);
    background-color: var(--st-control-field-bg-hover);
  }
  input:not([type="radio"]):focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--st-control-field-focus-border) !important;
    background-color: var(--st-control-field-focus-bg) !important;
    box-shadow: var(--st-control-field-focus-shadow) !important;
  }
  input::placeholder, textarea::placeholder { color: #65727e; }

  input.st-input--center { text-align: center; }
  input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #7bb9e4; cursor: pointer; }
  input[type="radio"]:focus-visible { outline: 2px solid #82bfeb; outline-offset: 3px; }
  input[type="radio"]:disabled { cursor: not-allowed; opacity: .55; }
  @media (max-width: 620px) {
    input, select, textarea { font-size: 16px !important; }
  }
  select {
    padding-inline-end: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  select option { background: var(--st-control-option-bg); color: var(--st-control-field-fg); }

  select.st-select--center { text-align: center; text-align-last: center; }
  select.st-select--center option { text-align: start; text-align-last: auto; }

  select.st-select--nav {
    min-height: 44px;
    align-items: center;
    padding: 8px 10px;
    border-color: transparent;
    background-color: transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
  }
  @supports (appearance: base-select) {
    select,
    ::picker(select) {
      appearance: base-select;
    }
    select::picker-icon { color: var(--st-control-picker-icon); }

    select.st-select--center {
      position: relative;
      align-items: center;
      justify-content: center;
      padding-inline: 32px;
    }
    select.st-select--center::picker-icon {
      position: absolute;
      inset-inline-end: 12px;
      margin-inline-start: 0;
    }
    ::picker(select) {
      margin-block-start: 7px;
      padding: 6px;
      border: 1px solid var(--st-control-picker-border);
      border-radius: 14px;
      background: var(--st-control-picker-bg);
      box-shadow: var(--st-control-picker-shadow);
      color: var(--st-control-field-fg);
    }
    select.st-select--nav::picker(select) {

      max-block-size: min(24rem, calc(100dvh - 6rem));
    }
    select option {
      min-height: 38px;
      padding: 9px 12px;
      border-radius: 10px;
      background: transparent;
      color: var(--st-control-field-fg);
      cursor: pointer;
    }
    select option:hover,
    select option:focus-visible {
      background: var(--st-control-option-hover-bg);
    }
    select option:checked {
      background: var(--st-control-option-selected-bg);
      color: var(--st-control-option-selected-fg);
    }
    select option::checkmark { color: currentColor; }
  }

  input[type="range"] {
    appearance: none;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid #e1e8ee;
    border-radius: 999px;
    background:
      linear-gradient(90deg, rgba(154,201,236,.62) var(--st-slider-fill, 0%), transparent var(--st-slider-fill, 0%)),
      #ffffff;
    box-shadow: inset 0 1px 2px rgba(23,84,118,.10);
  }
  input[type="range"]::-moz-range-track {
    height: 6px;
    border: 1px solid #e1e8ee;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(23,84,118,.10);
  }
  input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(154,201,236,.62);
  }
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;

    margin-top: -5px;
    border: 1px solid rgba(80,97,112,.5);
    border-radius: 50%;
    background: #b9dfff;
    box-shadow: 0 1px 3px rgba(80,97,112,.28), inset 0 1px 0 rgba(255,255,255,.38);
    transition: transform .14s ease, box-shadow .14s ease;
  }
  input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(80,97,112,.5);
    border-radius: 50%;
    background: #b9dfff;
    box-shadow: 0 1px 3px rgba(80,97,112,.28), inset 0 1px 0 rgba(255,255,255,.38);
  }
  input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }

  input[type="range"]:focus, input[type="range"]:focus-visible {
    outline: none;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
  input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(237,247,251,.9), 0 0 0 5px rgba(154,201,236,.34);
  }
  input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(237,247,251,.9), 0 0 0 5px rgba(154,201,236,.34);
  }
  input[type="range"]:disabled { cursor: not-allowed; opacity: .55; }

  input[type="range"].st-range--timeline { height: 28px; }
  input[type="range"].st-range--timeline::-webkit-slider-runnable-track {
    height: 2px;
    border: 0;
    background: linear-gradient(90deg, #b9dfff var(--st-slider-fill, 0%), rgba(33,96,132,.18) var(--st-slider-fill, 0%));
    box-shadow: none;
  }
  input[type="range"].st-range--timeline::-moz-range-track {
    height: 2px;
    border: 0;
    background: rgba(33,96,132,.18);
    box-shadow: none;
  }
  input[type="range"].st-range--timeline::-moz-range-progress { height: 2px; background: #b9dfff; }
  input[type="range"].st-range--timeline::-webkit-slider-thumb {
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border: 0;
    opacity: 0;
    box-shadow: none;
    transition: opacity .15s ease;
  }
  input[type="range"].st-range--timeline::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border: 0;
    opacity: 0;
    box-shadow: none;
  }
  input[type="range"].st-range--timeline:hover::-webkit-slider-thumb,
  input[type="range"].st-range--timeline:focus-visible::-webkit-slider-thumb { opacity: 1; transform: none; }
  input[type="range"].st-range--timeline:hover::-moz-range-thumb,
  input[type="range"].st-range--timeline:focus-visible::-moz-range-thumb { opacity: 1; }
  input[type="range"].st-range--timeline:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(237,247,251,.9), 0 0 0 5px rgba(154,201,236,.34);
  }
  input[type="range"].st-range--timeline:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(237,247,251,.9), 0 0 0 5px rgba(154,201,236,.34);
  }
  input[type="checkbox"] {
    appearance: none;
    display: inline-grid;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    place-content: center;
    border: 1px solid rgba(80,97,112,.38);
    border-radius: 7px;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(80,97,112,.08);
    color: #303a45;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  input[type="checkbox"]::before {
    width: 10px;
    height: 8px;
    background: currentColor;
    clip-path: polygon(14% 42%, 0 61%, 39% 100%, 100% 22%, 82% 6%, 38% 69%);
    content: "";
    transform: scale(.45);
    opacity: 0;
    transition: transform .14s ease, opacity .14s ease;
  }
  input[type="checkbox"]:hover:not(:disabled) {
    border-color: rgba(154,201,236,.68);
    background-color: rgba(255,255,255,.98);
  }
  input[type="checkbox"]:checked {
    border-color: #b9dfff;
    background-color: #b9dfff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 5px rgba(80,97,112,.20);
  }
  input[type="checkbox"]:checked::before {
    transform: scale(1);
    opacity: 1;
  }
  input[type="checkbox"]:focus,
  input[type="checkbox"]:focus-visible {
    border-color: #b9dfff !important;
    background-color: rgba(255,255,255,.98) !important;
    box-shadow: 0 0 0 3px rgba(237,247,251,.9), 0 0 0 5px rgba(154,201,236,.30) !important;
    outline: 0;
  }
  input[type="checkbox"]:checked:focus,
  input[type="checkbox"]:checked:focus-visible {
    background-color: #b9dfff !important;
  }
  input[type="checkbox"]:disabled {
    border-color: rgba(80,97,112,.20);
    background-color: rgba(220,235,243,.68);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .58;
  }
  input[type="file"] {
    min-height: 46px;
    padding: 5px 7px;
    background: #ffffff;
    color: #596673;
    border: 1px solid #aebfcd;
    border-radius: 8px;
    cursor: pointer;
  }
  input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-inline-end: 12px;
    padding: 7px 13px;
    background: #b9dfff;
    color: #303a45;
    border: 0;
    border-radius: 6px;
    font: 650 13px/1.2 "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
  }
  input[type="file"]:hover::file-selector-button { background: #cfe9ff; }
  button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--st-button-border, var(--st-control-button-border));
    border-radius: 8px;
    background: var(--st-button-bg, var(--st-control-button-bg));
    box-shadow: var(--st-button-shadow, none);
    color: var(--st-button-fg, var(--st-control-button-fg));
    font-size: 14px;
    font-weight: 620;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color 140ms cubic-bezier(.22,1,.36,1), border-color 140ms cubic-bezier(.22,1,.36,1), color 140ms cubic-bezier(.22,1,.36,1), opacity 140ms cubic-bezier(.22,1,.36,1);
  }
  button[data-tone="primary"],
  button[aria-pressed="true"] {
    --st-button-bg: var(--st-control-primary-bg);
    --st-button-fg: var(--st-control-primary-fg);
    --st-button-border: var(--st-control-primary-border);
    --st-button-shadow: none;
  }
  button[data-tone="danger"] {
    --st-button-bg: var(--st-control-danger-bg);
    --st-button-fg: var(--st-control-danger-fg);
    --st-button-border: var(--st-control-danger-border);
    --st-button-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  }

  .button.button--primary,
  .payment-page button[data-tone="primary"] {
    --st-button-bg: #dff0f8;
    --st-button-fg: #303a45;
    --st-button-border: #bfdbe9;
    --st-button-shadow: 0 4px 12px rgba(31,100,139,.12);
    background: var(--st-button-bg);
    color: var(--st-button-fg);
    border-color: var(--st-button-border);
    box-shadow: var(--st-button-shadow);
    text-shadow: none;
  }
  .button.button--primary::before { content: none; }
  .button.button--primary:hover,
  .payment-page button[data-tone="primary"]:hover:not(:disabled) {
    --st-button-bg: #d3eaf5;
    --st-button-border: #a9cddd;
  }
  button[data-compact="true"] {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #65727e;
  }
  button[data-compact="true"]:hover:not(:disabled) {
    background: #fff0ef;
    color: #a64e48;
  }
  button:hover:not(:disabled) { border-color: #a6cfe9; }

  button[data-variant="pill"] {
    --st-button-bg: #eef7ff;
    --st-button-border: #cde5f6;
    --st-button-fg: #303a45;
    --st-button-shadow: none;
    border-radius: 999px;
  }
  button[data-variant="pill"]:hover:not(:disabled) {
    --st-button-bg: #dceeff;
    --st-button-border: #add4ef;
  }

  .auth-page .au-btn {
    min-height: 50px;
    border: 1px solid #bfdbe9;
    border-radius: 14px;
    background: #dff0f8;
    color: #303a45;
    box-shadow: 0 4px 12px rgba(31,100,139,.10);
    font: 650 15px/1.35 "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-decoration: none;
  }
  .auth-page .au-btn:hover:not(:disabled) { background: #d3eaf5; border-color: #a9cddd; }

  button[data-provider="google"] {
    --st-button-bg: #fff;
    --st-button-border: #747775;
    --st-button-fg: #1f1f1f;
    --st-button-shadow: none;
    min-height: 44px;
    padding: 12px;
    border-radius: 14px;
    font: 500 14px/20px "Google Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  button[data-provider="google"]:hover:not(:disabled) { --st-button-bg: #f8faff; border-color: #747775; }
  .auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: 50px; }
  .auth-page input[aria-invalid="true"], .auth-page .au-field.is-bad input { border-color: #a64e48; }
  .auth-page button[data-password-toggle] {
    min-height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #596673;
    box-shadow: none;
  }
  .auth-page button[data-password-toggle]:hover { background: #eef7ff; color: #303a45; }

  button[data-variant="quiet"] {
    --st-button-bg: transparent;
    --st-button-border: transparent;
    --st-button-fg: #596673;
    --st-button-shadow: none;
    font-weight: 500;
  }
  button[data-variant="quiet"]:hover:not(:disabled) { background: #f7fafd; border-color: #e1e8ee; color: #303a45; }
  button[data-variant="tab"] {
    position: relative;
    --st-button-bg: transparent;
    --st-button-border: transparent;
    --st-button-fg: #596673;
    --st-button-shadow: none;
    border: 0;
    border-radius: 0;
    font-weight: 500;
    padding: 12px 4px 16px;
  }
  button[data-variant="tab"]::after { content: ""; position: absolute; bottom: 0; left: 4px; right: 4px; height: 3px; background: transparent; border-radius: 2px 2px 0 0; }
  button[data-variant="tab"][aria-pressed="true"] { --st-button-fg: #303a45; font-weight: 650; }
  button[data-variant="tab"][aria-pressed="true"]::after { background: #b9dfff; }
  button[data-variant="tab"]:hover:not(:disabled) { --st-button-fg: #303a45; background: #f7fafd; }

  button[data-fable-look-option] {
    --st-button-bg: transparent;
    --st-button-border: transparent;
    --st-button-shadow: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
  }
  button[data-fable-look-option]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sw);
    border: 1px solid rgba(255,255,255,.5);
  }
  button[data-fable-look-option][aria-pressed="true"]::before {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  button:active:not(:disabled) { filter: brightness(.98); }
  button:disabled { opacity: .55; cursor: not-allowed; }
  button[data-icon-button] { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; font-size: 22px; }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #a64e48; }
  textarea { white-space: pre-wrap; overflow: auto; resize: vertical; line-height: 1.6; }
  summary { cursor: pointer; }
  summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #b9dfff; outline-offset: 3px; border-radius: 4px; }
  @media (pointer: coarse) {
    button, button[data-compact="true"], button[data-icon-button] { min-width: 44px; min-height: 44px; }
    input[type="range"] { height: 44px; }
  }
  button:focus-visible, a:focus-visible {
    outline: 2px solid rgba(154,201,236,.82);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(229,247,255,.78);
  }
  ::selection { background: rgba(154,201,236,.22); color: #303a45; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(154,201,236,.30); border-radius: 999px; border: 2px solid rgba(237,247,251,.78); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(154,201,236,.46); }
  progress { accent-color: #303a45; }
  a { color: #47525e; }

  @keyframes st-skel-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .st-skel {
    border-radius: 6px;
    background-color: rgba(154,201,236,.10);
    background-image: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 80%);
    background-size: 200% 100%;
    animation: st-skel-sheen 1.5s ease-in-out infinite;

    pointer-events: none;
  }
  .st-skel + .st-skel { margin-top: 8px; }

  .st-skel--line { height: 12px; width: var(--st-skel-w, 100%); }
  .st-skel--row { height: 34px; }
  .st-skel--block { height: 64px; }
  @keyframes st-fade-in { from { opacity: .65; } to { opacity: 1; } }
  .st-fade-in { animation: st-fade-in 160ms cubic-bezier(.22,1,.36,1); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }