/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --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-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-950: oklch(26.6% .065 152.934);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-950: oklch(27.7% .046 192.524);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-sky-950: oklch(29.3% .066 243.157);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-950: oklch(27.1% .105 12.094);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-3xl: 48rem;
    --container-5xl: 64rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --leading-snug: 1.375;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --font-latin: "Nunito", "Noto Sans TC", sans-serif;
    --color-ink: #3f2a1a;
    --shadow-clay: 0 4px 0 #3f2a1a14,
    0 10px 18px -6px #3f2a1a29,
    inset 0 1px 0 #ffffffb8;
    --shadow-clay-active: 0 2px 0 #3f2a1a1a,
    0 4px 10px -4px #3f2a1a24,
    inset 0 1px 0 #ffffff73;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-3 {
    inset: calc(var(--spacing) * 3);
  }

  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }

  .inset-x-\[16\%\] {
    inset-inline: 16%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-\[10\%\] {
    top: 10%;
  }

  .top-\[18\%\] {
    top: 18%;
  }

  .top-\[22\%\] {
    top: 22%;
  }

  .top-\[54\%\] {
    top: 54%;
  }

  .top-\[58\%\] {
    top: 58%;
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-\[30\%\] {
    bottom: 30%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-\[18\%\] {
    left: 18%;
  }

  .left-\[28\%\] {
    left: 28%;
  }

  .left-\[68\%\] {
    left: 68%;
  }

  .left-\[74\%\] {
    left: 74%;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-\[1\.618rem\] {
    margin-top: 1.618rem;
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-\[0\.618rem\] {
    margin-bottom: .618rem;
  }

  .mb-\[1\.618rem\] {
    margin-bottom: 1.618rem;
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .max-h-dvh {
    max-height: 100dvh;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .w-0 {
    width: 0;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-full {
    width: 100%;
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-\[46\%\] {
    max-width: 46%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }

  .min-w-11 {
    min-width: calc(var(--spacing) * 11);
  }

  .min-w-12 {
    min-width: calc(var(--spacing) * 12);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[1\.618\] {
    flex: 1.618;
  }

  .flex-\[1\] {
    flex: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .touch-none {
    touch-action: none;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .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;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-\[0\.618rem\] {
    gap: .618rem;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[1\.618rem\] {
    border-radius: 1.618rem;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[28px\] {
    border-radius: 28px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-emerald-300 {
    background-color: var(--color-emerald-300);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }

  .bg-orange-200 {
    background-color: var(--color-orange-200);
  }

  .bg-orange-300 {
    background-color: var(--color-orange-300);
  }

  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }

  .bg-rose-100 {
    background-color: var(--color-rose-100);
  }

  .bg-rose-300 {
    background-color: var(--color-rose-300);
  }

  .bg-sky-200 {
    background-color: var(--color-sky-200);
  }

  .bg-sky-300 {
    background-color: var(--color-sky-300);
  }

  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }

  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }

  .bg-slate-950\/25 {
    background-color: #02061840;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-950\/25 {
      background-color: color-mix(in oklab, var(--color-slate-950) 25%, transparent);
    }
  }

  .bg-slate-950\/30 {
    background-color: #0206184d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-950\/30 {
      background-color: color-mix(in oklab, var(--color-slate-950) 30%, transparent);
    }
  }

  .bg-teal-100 {
    background-color: var(--color-teal-100);
  }

  .bg-teal-300 {
    background-color: var(--color-teal-300);
  }

  .bg-teal-400 {
    background-color: var(--color-teal-400);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/30 {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/30 {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .bg-white\/80 {
    background-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/80 {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .bg-white\/85 {
    background-color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/85 {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: 0;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-\[0\.618rem\] {
    padding: .618rem;
  }

  .p-\[1\.618rem\] {
    padding: 1.618rem;
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .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);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-\[max\(0\.9rem\,env\(safe-area-inset-left\)\)\] {
    padding-inline: max(.9rem, env(safe-area-inset-left));
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .\!pt-0 {
    padding-top: 0 !important;
  }

  .pt-\[max\(0\.75rem\,env\(safe-area-inset-top\)\)\] {
    padding-top: max(.75rem, env(safe-area-inset-top));
  }

  .pr-\[max\(0\.9rem\,env\(safe-area-inset-right\)\)\] {
    padding-right: max(.9rem, env(safe-area-inset-right));
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-\[max\(1\.618rem\,env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(1.618rem, env(safe-area-inset-bottom));
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .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-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--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-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[clamp\(1\.8rem\,8vmin\,2\.8rem\)\] {
    font-size: clamp(1.8rem, 8vmin, 2.8rem);
  }

  .text-\[clamp\(3rem\,16vmin\,5\.5rem\)\] {
    font-size: clamp(3rem, 16vmin, 5.5rem);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .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);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-amber-900 {
    color: var(--color-amber-900);
  }

  .text-amber-950 {
    color: var(--color-amber-950);
  }

  .text-green-950 {
    color: var(--color-green-950);
  }

  .text-orange-50 {
    color: var(--color-orange-50);
  }

  .text-orange-200 {
    color: var(--color-orange-200);
  }

  .text-orange-200\/80 {
    color: #ffd7a8cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-orange-200\/80 {
      color: color-mix(in oklab, var(--color-orange-200) 80%, transparent);
    }
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-orange-600 {
    color: var(--color-orange-600);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-rose-950 {
    color: var(--color-rose-950);
  }

  .text-sky-800 {
    color: var(--color-sky-800);
  }

  .text-sky-950 {
    color: var(--color-sky-950);
  }

  .text-teal-950 {
    color: var(--color-teal-950);
  }

  .text-white {
    color: var(--color-white);
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-55 {
    opacity: .55;
  }

  .shadow-\[0_8px_0_rgba\(91\,58\,41\,0\.12\)\] {
    --tw-shadow: 0 8px 0 var(--tw-shadow-color, #5b3a291f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_0_rgba\(91\,58\,41\,0\.12\)\] {
    --tw-shadow: 0 10px 0 var(--tw-shadow-color, #5b3a291f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + 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-green-600 {
    --tw-ring-color: var(--color-green-600);
  }

  .ring-orange-400 {
    --tw-ring-color: var(--color-orange-400);
  }

  .ring-sky-400 {
    --tw-ring-color: var(--color-sky-400);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  @media (min-width: 40rem) {
    .sm\:inset-x-4 {
      inset-inline: calc(var(--spacing) * 4);
    }

    .sm\:top-3 {
      top: calc(var(--spacing) * 3);
    }

    .sm\:top-4 {
      top: calc(var(--spacing) * 4);
    }

    .sm\:right-3 {
      right: calc(var(--spacing) * 3);
    }

    .sm\:bottom-3 {
      bottom: calc(var(--spacing) * 3);
    }

    .sm\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }

    .sm\:left-3 {
      left: calc(var(--spacing) * 3);
    }

    .sm\:left-4 {
      left: calc(var(--spacing) * 4);
    }

    .sm\:mt-2 {
      margin-top: calc(var(--spacing) * 2);
    }

    .sm\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .sm\:h-6 {
      height: calc(var(--spacing) * 6);
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .sm\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .sm\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .sm\:min-h-12 {
      min-height: calc(var(--spacing) * 12);
    }

    .sm\:w-6 {
      width: calc(var(--spacing) * 6);
    }

    .sm\:w-10 {
      width: calc(var(--spacing) * 10);
    }

    .sm\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .sm\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .sm\:min-w-10 {
      min-width: calc(var(--spacing) * 10);
    }

    .sm\:min-w-14 {
      min-width: calc(var(--spacing) * 14);
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:rounded-\[28px\] {
      border-radius: 28px;
    }

    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:text-8xl {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body, #root {
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 100dvh;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#root::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.page-main-scroll, .station-rail, .header-faces, .chip-rail {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-main-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.station-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.header-faces::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.chip-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html:has(.lesson-lock), body:has(.lesson-lock) {
  height: 100dvh;
  overflow: hidden;
}

.page-shell {
  max-width: 64rem;
  min-height: 100dvh;
  padding-inline: max(.9rem, env(safe-area-inset-left)) max(.9rem, env(safe-area-inset-right));
  padding-top: max(.75rem, env(safe-area-inset-top));
  flex-direction: column;
  margin-inline: auto;
  display: flex;
}

.page-shell-wide {
  max-width: 72rem;
}

.page-main {
  flex: 1.618 auto;
  min-height: 0;
}

.page-main-scroll {
  margin-inline: -.2rem;
  padding: .45rem .2rem .9rem;
  overflow: auto;
}

.page-dock {
  padding: .95rem .35rem max(1.25rem, env(safe-area-inset-bottom));
  gap: .75rem;
  margin-inline: -.35rem;
  display: flex;
}

.page-pager {
  gap: .75rem;
  padding: .55rem .35rem .2rem;
  display: flex;
}

.display-title {
  font-size: clamp(1.618rem, 1.1rem + 2.2vw, 2.618rem);
  line-height: 1.1;
}

.word-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: .55rem .45rem .85rem;
  display: grid;
}

.path-word-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  padding: .25rem .15rem .6rem;
  display: grid;
}

@media (min-width: 36rem) {
  .path-word-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .path-word-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.path-word-tile {
  aspect-ratio: 1;
  border-radius: 1rem;
  width: 100%;
  min-height: 0;
}

.path-word-tile .word-star {
  width: 1.35rem;
  height: 1.35rem;
  top: .2rem;
  right: .2rem;
}

@media (min-width: 36rem) {
  .word-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .word-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .word-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.word-tile {
  aspect-ratio: 1;
  border-radius: 1.618rem;
  min-height: 7.5rem;
}

.word-star {
  z-index: 10;
  object-fit: contain;
  filter: drop-shadow(0 2px #3f2a1a26);
  background: none;
  width: 2.8rem;
  height: 2.8rem;
  position: absolute;
  top: .45rem;
  right: .45rem;
}

.star-bank {
  align-items: center;
  gap: .35rem;
  min-height: 4.2rem;
  padding-right: .4rem;
  display: flex;
}

.star-bank-img {
  object-fit: contain;
  background: none;
  width: 5.8rem;
  height: 5.8rem;
}

.star-bank-meta {
  flex-direction: column;
  gap: .15rem;
  display: flex;
}

.star-bank-meta > span {
  color: #ea580c;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
}

.star-bank-today {
  color: #c2410c;
  font-size: .72rem;
  font-weight: 800;
}

.station-pill-count {
  white-space: nowrap;
  margin-left: auto;
  font-size: .82rem;
  font-weight: 900;
}

.word-tile-locked {
  filter: grayscale(.35);
}

.word-tile-lock {
  z-index: 20;
  border-radius: inherit;
  color: #fff7ed;
  background: #3f2a1a6b;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  display: flex;
  position: absolute;
  inset: 0;
}

.station-rail {
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  gap: .7rem;
  margin-inline: -.4rem;
  padding: .55rem .4rem .95rem;
  display: flex;
  overflow: auto hidden;
}

.station-rail.is-dragging {
  cursor: grabbing;
}

.station-rail.is-dragging .station-pill {
  pointer-events: none;
}

.header-faces, .chip-rail {
  -webkit-overflow-scrolling: touch;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
  overflow: auto hidden;
}

.header-faces {
  flex: 1;
  justify-content: flex-end;
  margin: -.15rem -.1rem 0;
  padding: .45rem .2rem .75rem;
}

.chip-rail {
  margin-inline: -.35rem;
  padding: .45rem .35rem .8rem;
}

.station-pill {
  text-align: left;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: .4rem;
  min-width: 8.2rem;
  min-height: 4rem;
  padding-inline: 1rem;
  display: flex;
}

.station-pill-arrive {
  color: #fff7ed;
  background: #fb923c;
}

.station-pill-open {
  color: #7c2d12;
  background: #fff;
}

.station-pill-done {
  color: #14532d;
  box-shadow: 0 0 0 4px #22c55e, var(--shadow-clay);
  background: #86efac;
}

.station-pill-locked {
  color: #78716c;
  background: #e7e5e4;
}

.clay:disabled, .clay[aria-disabled="true"] {
  box-shadow: var(--shadow-clay);
  transform: none;
}

.quiz-grid {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  width: min(100%, 36rem);
  height: min(52dvh, 28rem);
  padding: .35rem .15rem .7rem;
  display: grid;
}

@supports (width: 1cqi) {
  .phi-slot .quiz-grid {
    width: min(100cqi, 161.8cqb);
    height: min(100cqb, 61.8047cqi);
  }
}

@media (orientation: landscape) and (max-height: 56rem) {
  .page-head-extra {
    display: none;
  }

  .display-title {
    font-size: 1.618rem;
  }
}

.phi-slot, .film-slot {
  flex: auto;
  place-items: center;
  width: 100%;
  min-height: 0;
  padding: .5rem .3rem .85rem;
  display: grid;
  overflow: hidden;
  container-type: size;
}

.phi-wide {
  aspect-ratio: 1.618;
  width: min(100%, 1.618 * min(70dvh, 28rem));
  max-width: 100%;
}

.check-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  width: min(100%, 42rem);
  height: min(100%, 22rem);
  max-height: 100%;
  padding: .35rem .15rem .7rem;
  display: grid;
}

.check-row > * {
  min-width: 0;
  min-height: 0;
}

@supports (width: 1cqi) {
  .phi-slot .phi-wide {
    width: min(100cqi, 161.8cqb);
    max-height: 100cqb;
  }

  .phi-slot .check-row {
    --check-card: min(calc((100cqi - 1.7rem) / 3), 100cqb);
    width: min(100cqi, calc(var(--check-card) * 3 + 1.7rem));
    height: min(100cqb, var(--check-card));
  }
}

.film-stage {
  aspect-ratio: 4 / 3;
  width: min(100%, 1.33333 * min(52dvh, 22rem));
  max-width: 100%;
  position: relative;
}

.film-stage.clay {
  box-shadow: none;
  filter: drop-shadow(0 4px #3f2a1a14) drop-shadow(0 10px 14px #3f2a1a24);
}

@supports (width: 1cqi) {
  .film-slot .film-stage {
    width: min(100cqi, 133.333cqb);
    max-height: 100cqb;
  }
}

.gate-screen {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: max(.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: radial-gradient(circle at 18% 12%, var(--gate-tint) 0 16%, transparent 17%), radial-gradient(circle at 86% 10%, var(--gate-sky) 0 14%, transparent 15%), linear-gradient(180deg, var(--gate-sky) 0%, #fff7ed 58%, var(--gate-tint) 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

@supports (color: color-mix(in lab, red, red)) {
  .gate-screen {
    background: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--gate-tint) 80%, white) 0 16%, transparent 17%), radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--gate-sky) 90%, white) 0 14%, transparent 15%), linear-gradient(180deg, var(--gate-sky) 0%, #fff7ed 58%, var(--gate-tint) 100%);
  }
}

.gate-cheer {
  object-fit: contain;
  width: min(46vw, 13.5rem);
  height: min(46vw, 13.5rem);
  animation: .7s cubic-bezier(.34, 1.4, .64, 1) gate-pop;
}

.gate-yell {
  color: #c2410c;
  text-shadow: 0 3px #fff7edb3;
  margin: .35rem 0 0;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
}

.gate-hanzi {
  color: #3f2a1a;
  margin: .2rem 0 0;
  font-size: clamp(5.5rem, 24vw, 9rem);
  font-weight: 900;
  line-height: .95;
}

.gate-hanzi-mid {
  font-size: clamp(4rem, 18vw, 6.5rem);
}

.gate-hanzi-long {
  font-size: clamp(3rem, 14vw, 5rem);
}

.gate-station {
  color: #9a3412;
  margin: .25rem 0 0;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 900;
}

.gate-ask {
  text-align: center;
  color: #0c4a6e;
  max-width: 22rem;
  margin: .45rem 0 0;
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  font-weight: 900;
  line-height: 1.2;
}

.gate-actions {
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  width: min(28rem, 100%);
  margin-top: 1rem;
  display: flex;
}

.gate-actions-pair {
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  display: grid;
}

.gate-cta-next {
  color: #9a3412;
  background: #fff;
}

.gate-cta {
  color: #fff7ed;
  background: #fb923c;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 5.6rem;
  padding-inline: 1rem;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  font-weight: 900;
  display: flex;
}

.gate-cta img {
  object-fit: cover;
  background: #fff7ed;
  border-radius: 999px;
  width: 3.6rem;
  height: 3.6rem;
}

.gate-cta-pic {
  border-radius: 1.618rem;
  flex-direction: column;
  gap: .3rem;
  min-height: 8.4rem;
  padding: .7rem .55rem .8rem;
}

.gate-cta-pic img {
  width: 4.6rem;
  height: 4.6rem;
}

.gate-cta-hold {
  isolation: isolate;
  color: #134e4a;
  background: #5eead4;
  position: relative;
}

.gate-cta-fill {
  z-index: 0;
  border-radius: inherit;
  background: #2dd4bf;
  position: absolute;
  inset: 0 auto 0 0;
}

.gate-cta-label {
  z-index: 1;
  position: relative;
}

.gate-quiet {
  color: #78716c;
  min-height: 2.4rem;
  font-size: .95rem;
  font-weight: 800;
}

@keyframes gate-pop {
  from {
    opacity: 0;
    transform: scale(.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-cheer {
    animation: none;
  }
}

@media (max-height: 700px) {
  .gate-cheer {
    width: min(32vw, 8.5rem);
    height: min(32vw, 8.5rem);
  }

  .gate-cta-pic {
    min-height: 6.8rem;
    padding: .45rem .4rem .55rem;
  }

  .gate-cta-pic img {
    width: 3.6rem;
    height: 3.6rem;
  }

  .gate-hanzi {
    font-size: clamp(3.6rem, 16vw, 6rem);
  }

  .gate-cta {
    min-height: 4.6rem;
  }
}

body {
  color: var(--color-ink);
  font-family: var(--font-sans);
  background: radial-gradient(circle at 15% 10%, #fde68a 0 14%, #0000 15%), radial-gradient(circle at 88% 8%, #bae6fd 0 12%, #0000 13%), radial-gradient(circle at 70% 90%, #bbf7d0 0 16%, #0000 17%), linear-gradient(#e0f2fe 0%, #fff7ed 45%, #ffe4e6 100%);
  margin: 0;
}

button, a {
  cursor: pointer;
}

button:focus-visible, a:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #ea580c;
}

.latin {
  font-family: var(--font-latin);
}

.meet-face {
  container-type: size;
}

.meet-face-1 {
  font-size: min(88cqb, 90cqi);
}

.meet-face-2 {
  font-size: min(62cqb, 78cqi);
}

.meet-face-3 {
  font-size: min(42cqb, 56cqi);
}

.check-face-1 {
  font-size: min(72cqb, 72cqi);
}

.check-face-2 {
  font-size: min(42cqb, 36cqi);
}

.check-face-3 {
  font-size: min(32cqb, 28cqi);
}

.clay {
  box-shadow: var(--shadow-clay);
  border: 2px solid #ffffffd6;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}

.clay:hover {
  transform: translateY(-1px);
}

.clay:active {
  box-shadow: var(--shadow-clay-active);
  transform: translateY(3px);
}

.clay[aria-pressed="true"] {
  box-shadow: var(--shadow-clay-active);
  transform: translateY(2px);
}

.stroke-sheet {
  box-shadow: var(--shadow-clay);
  touch-action: none;
  overscroll-behavior: none;
  background: #fffdf8;
  border: 2px solid #ffffffd6;
}

.mizi-grid {
  background-color: #fff7ed;
  background-image: linear-gradient(#fdba74, #fdba74), linear-gradient(#fdba74, #fdba74), linear-gradient(to bottom right, #0000 calc(50% - .7px), #fed7aa calc(50% - .7px) calc(50% + .7px), #0000 calc(50% + .7px)), linear-gradient(to bottom left, #0000 calc(50% - .7px), #fed7aa calc(50% - .7px) calc(50% + .7px), #0000 calc(50% + .7px)), linear-gradient(#fed7aa, #fed7aa), linear-gradient(#fed7aa, #fed7aa);
  background-position: center, center, center, center, top, 0;
  background-repeat: no-repeat;
  background-size: 1.5px 100%, 100% 1.5px, 100% 100%, 100% 100%, 100% 1.5px, 1.5px 100%;
  box-shadow: inset 0 0 0 1.5px #fdba74;
}

.stroke-host, .stroke-host svg, .stroke-host canvas {
  touch-action: none;
}

.stroke-host svg {
  display: block;
}

@keyframes bob {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes drift {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(12px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }

  50% {
    opacity: .85;
    transform: scaleY(1.12);
  }
}

@keyframes raindrop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(140px);
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-40px);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.anim-bob {
  animation: 3.2s ease-in-out infinite bob;
}

.anim-drift {
  animation: 6s ease-in-out infinite drift;
}

.anim-flicker {
  transform-origin: bottom;
  animation: .8s ease-in-out infinite flicker;
}

.anim-wave {
  animation: 4s linear infinite wave;
}

.anim-pop {
  animation: .42s cubic-bezier(.22, 1.2, .36, 1) pop-in;
}

.anim-spin-slow {
  animation: 16s linear infinite spin-slow;
}

.scene-playing .rain {
  animation: 1.4s linear infinite raindrop;
}

.scene-playing .progress-fill {
  animation: 9s linear forwards progress;
}

.progress-fill-evo {
  width: 0%;
}

.evo-playing .progress-fill-evo {
  animation: progress var(--evo-ms, 20s) linear forwards;
}

.evo-morph {
  transition: opacity var(--evo-fade, 1.2s) ease-in-out, transform var(--evo-fade, 1.2s) ease-in-out;
}

.evo-caption {
  animation: .38s cubic-bezier(.22, 1.2, .36, 1) pop-in;
}

.evo-wordbar {
  animation: .48s cubic-bezier(.22, 1.2, .36, 1) rise-in;
}

.evo-ink path[fill="none"], .evo-ink line, .evo-ink polyline {
  stroke-dasharray: 220;
  animation: 1.05s ease-out both ink-draw;
}

@keyframes ink-draw {
  from {
    stroke-dashoffset: 220px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wf-bob {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 0 -8px;
  }
}

@keyframes wf-drift {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 12px;
  }
}

@keyframes wf-drive {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 18px;
  }
}

@keyframes wf-wag {
  0%, 100% {
    rotate: -8deg;
  }

  50% {
    rotate: 10deg;
  }
}

@keyframes wf-jump {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 0 -18px;
  }
}

@keyframes wf-glow {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }

  50% {
    opacity: .88;
    scale: 1.08;
  }
}

@keyframes wf-fly {
  0%, 100% {
    translate: 0;
  }

  50% {
    translate: 20px -10px;
  }
}

@keyframes wf-steam {
  0% {
    opacity: .7;
    translate: 0;
  }

  100% {
    opacity: 0;
    translate: 0 -16px;
  }
}

@keyframes wf-rain {
  0% {
    opacity: 0;
    translate: 0 -20px;
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 0 140px;
  }
}

@keyframes wf-wave {
  0% {
    translate: 0;
  }

  100% {
    translate: -40px;
  }
}

@keyframes wf-spin {
  to {
    rotate: 360deg;
  }
}

.word-film-playing .wf-bob {
  animation: 2.2s ease-in-out infinite wf-bob;
}

.word-film-playing .wf-drift {
  animation: 3.4s ease-in-out infinite wf-drift;
}

.word-film-playing .wf-drive {
  animation: 2.8s ease-in-out infinite wf-drive;
}

.word-film-playing .wf-wag {
  transform-origin: 50% 80%;
  animation: .7s ease-in-out infinite wf-wag;
}

.word-film-playing .wf-jump {
  animation: 1.1s ease-in-out infinite wf-jump;
}

.word-film-playing .wf-glow {
  animation: 1.6s ease-in-out infinite wf-glow;
}

.word-film-playing .wf-fly {
  animation: 2.4s ease-in-out infinite wf-fly;
}

.word-film-playing .wf-steam {
  animation: 1.8s ease-out infinite wf-steam;
}

.word-film-playing .wf-rain {
  animation: 1.3s linear infinite wf-rain;
}

.word-film-playing .wf-wave {
  animation: 3.6s linear infinite wf-wave;
}

.word-film-playing .wf-spin {
  animation: 8s linear infinite wf-spin;
}

@keyframes ken-burns {
  0% {
    transform: scale(1) translate(0);
  }

  50% {
    transform: scale(1.14) translate(-2.2%, -1.4%);
  }

  100% {
    transform: scale(1.1) translate(1.6%, 2%);
  }
}

.film-ken-playing .film-ken-media {
  transform-origin: center;
  animation: 9s ease-in-out infinite alternate ken-burns;
}

.film-lyric {
  pointer-events: none;
  text-align: center;
  background: linear-gradient(to top, #0f172a9e, #0f172a00);
  padding: 2.6rem .75rem 1.15rem;
  position: absolute;
  inset: auto 0 0;
}

.film-lyric-line {
  color: #fff;
  text-shadow: 0 2px #0f172a8c, 0 8px 18px #0f172a66;
  font-size: clamp(1.7rem, 7.2vmin, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
}

@keyframes path-glow {
  0%, 100% {
    box-shadow: var(--shadow-clay), 0 0 0 0 #fbbf2466;
  }

  50% {
    box-shadow: var(--shadow-clay), 0 0 0 7px #fbbf2400;
  }
}

@keyframes card-flip-in {
  0% {
    opacity: 0;
    transform: rotateY(-70deg) scale(.86);
  }

  100% {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

.path-glow {
  animation: 1.8s ease-out infinite path-glow;
}

.card-flip-in {
  animation: .52s cubic-bezier(.22, 1.2, .36, 1) card-flip-in;
}

@keyframes sparkle {
  0%, 100% {
    opacity: .2;
    transform: scale(.4) rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }
}

.evo-sparkle {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #fbbf24;
  width: 14px;
  height: 14px;
  animation: 1.1s ease-in-out infinite sparkle;
  position: absolute;
}

.evo-sparkle:nth-child(2) {
  animation-delay: .2s;
}

.evo-sparkle:nth-child(3) {
  animation-delay: .45s;
}

.evo-sparkle:nth-child(4) {
  animation-delay: .7s;
}

@media (prefers-reduced-motion: reduce) {
  .anim-bob, .anim-drift, .anim-flicker, .anim-wave, .anim-spin-slow, .scene-playing .rain, .scene-playing .progress-fill, .evo-playing .progress-fill-evo, .evo-sparkle, .word-film-playing .wf-bob, .word-film-playing .wf-drift, .word-film-playing .wf-drive, .word-film-playing .wf-wag, .word-film-playing .wf-jump, .word-film-playing .wf-glow, .word-film-playing .wf-fly, .word-film-playing .wf-steam, .word-film-playing .wf-rain, .word-film-playing .wf-wave, .word-film-playing .wf-spin, .film-ken-playing .film-ken-media, .path-glow, .card-flip-in, .evo-ink path[fill="none"], .evo-ink line {
    animation: none;
  }

  .evo-morph {
    transition: none;
  }
}

.app-dialog-back {
  z-index: 50;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #1c0c056b;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.app-dialog {
  background: #fffdf8;
  border-radius: 1.618rem;
  width: min(28rem, 100%);
  max-height: min(36rem, 82dvh);
  padding: 1.25rem 1.15rem 1.1rem;
  overflow: auto;
}

.app-dialog-title {
  color: #7c2d12;
  margin-bottom: .55rem;
  font-size: 1.65rem;
  font-weight: 900;
}

.app-dialog-lead {
  color: #9a3412;
  margin-bottom: .65rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
}

.app-dialog-line {
  color: #92400e;
  margin-bottom: .45rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
}

.app-dialog-actions {
  gap: .55rem;
  margin-top: 1rem;
  display: grid;
}

.auth-tabs {
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  display: grid;
}

.auth-tab {
  border-radius: 999px;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 900;
}

.path-parent-ask {
  box-shadow: var(--shadow-clay);
}

.parent-page {
  z-index: 60;
  padding: max(.6rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
  background: #fff7ed;
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.parent-page-bar {
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
  display: flex;
}

.parent-page-bar p {
  font-size: 1.35rem;
}

.parent-page-back {
  color: #78350f;
  background: #fff;
  height: 2.5rem;
  padding-inline: 1rem;
  font-size: .9rem;
  font-weight: 900;
}

.parent-page-main {
  width: min(64rem, 100%);
  min-height: 0;
  box-shadow: var(--shadow-clay);
  background: #fffdf8;
  border-radius: 1.4rem;
  flex: 1;
  margin-inline: auto;
  padding: .8rem .85rem 1rem;
  overflow: auto;
}

.parent-page-body {
  gap: .85rem;
  display: grid;
}

.parent-toolbar {
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .7rem;
  display: flex;
}

.parent-tool {
  color: #78350f;
  background: #fff7ed;
  flex: 5.4rem;
  max-width: 9.5rem;
  min-height: 2.5rem;
  padding-inline: .7rem;
  font-size: .82rem;
  font-weight: 900;
}

.parent-tool-edit {
  color: #fff;
  background: #fb923c;
  flex: 6.5rem;
  max-width: 11rem;
}

.parent-tool-en {
  color: #082f49;
  background: #e0f2fe;
  flex: 7rem;
  max-width: 12rem;
}

.parent-tool-on {
  color: #fff;
  background: #fb923c;
}

.parent-how {
  background: #fff7ed;
  border-radius: 1rem;
  margin-bottom: .7rem;
  padding: .65rem .75rem;
}

.parent-how-title {
  color: #431407;
  margin-bottom: .25rem;
  font-size: .82rem;
  font-weight: 900;
}

.parent-how p, .parent-rules p {
  color: #9a3412;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.45;
}

.parent-rules {
  background: #fff7ed;
  border-radius: 1rem;
  margin-bottom: .7rem;
  padding: .65rem .75rem;
}

.parent-rule-row {
  color: #7c2d12;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
}

.parent-rule-step {
  align-items: center;
  gap: .4rem;
  display: flex;
}

.parent-rule-btn {
  color: #7c2d12;
  background: #fff;
  width: 2.2rem;
  min-height: 2.2rem;
  font-size: 1.1rem;
  font-weight: 900;
}

.parent-rule-rates {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .25rem;
  display: flex;
}

.parent-rule-rate {
  color: #7c2d12;
  background: #fff;
  min-height: 2.1rem;
  padding-inline: .45rem;
  font-size: .72rem;
  font-weight: 900;
}

.parent-rule-rate-on {
  color: #fff;
  background: #fb923c;
}

.parent-rule-need {
  margin-top: .45rem;
}

.parent-station-grid {
  gap: .25rem;
  margin-top: .55rem;
  display: grid;
}

.parent-station-row {
  color: #7c2d12;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 800;
  display: grid;
}

.parent-station-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.parent-station-stars {
  color: #ea580c;
}

.parent-station-state {
  color: #9a3412;
}

.parent-kids {
  min-width: 0;
}

.parent-kid-list {
  gap: .6rem;
  display: grid;
}

.parent-kid {
  background: #fff7ed;
  border-radius: 1.15rem;
  padding: .6rem .65rem .7rem;
}

.parent-kid-on {
  box-shadow: inset 0 0 0 2px #38bdf88c;
}

.parent-kid .parent-input {
  background: #fff;
}

.parent-kid-head {
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
  display: flex;
}

.parent-kid-face {
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
}

.parent-kid-name {
  flex: 7rem;
  min-width: 6rem;
  max-width: 13rem;
}

.parent-kid-photo, .parent-kid-drop {
  flex-shrink: 0;
  height: 2.5rem;
  padding-inline: .75rem;
  font-size: .8rem;
  font-weight: 900;
}

.parent-kid-photo {
  color: #082f49;
  background: #e0f2fe;
}

.parent-kid-drop {
  color: #92400e;
  background: #fff;
}

.parent-kid-drop-on {
  color: #fff;
  background: #fb923c;
}

.parent-field-row {
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem .55rem;
  display: flex;
}

.parent-field {
  gap: .2rem;
  display: grid;
}

.parent-field > span {
  color: #78350f;
  font-size: .72rem;
  font-weight: 900;
}

.parent-input {
  background: #fff7ed;
  border-radius: 999px;
  outline: none;
  height: 2.5rem;
  padding-inline: .85rem;
  font-size: .92rem;
  font-weight: 800;
}

.parent-field-name {
  width: min(16rem, 100%);
}

.parent-field-dob, .parent-input.parent-field-dob {
  width: 10.6rem;
  max-width: 100%;
}

.parent-field-sex {
  width: auto;
}

.parent-field-err {
  color: #c2410c;
  margin-top: .4rem;
  font-size: .75rem;
  font-weight: 800;
}

.parent-add {
  margin-top: .55rem;
}

.parent-add-name {
  flex: 7rem;
  min-width: 6.2rem;
  max-width: 11rem;
}

.parent-add-go, .parent-add-open, .parent-first-go {
  color: #fff;
  background: #fb923c;
  min-height: 2.5rem;
  padding-inline: 1rem;
  font-size: .85rem;
  font-weight: 900;
}

.parent-add-open {
  color: #92400e;
  background: #fff;
  width: auto;
  margin-top: .55rem;
}

.parent-first {
  width: min(24rem, 100%);
  margin: .4rem auto 0;
}

.parent-first-title {
  color: #431407;
  font-size: 1.25rem;
  font-weight: 900;
}

.parent-first-hint {
  color: #9a3412;
  margin: .25rem 0 .7rem;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.45;
}

.parent-first .parent-field-name {
  width: 100%;
  margin-bottom: .55rem;
}

.parent-first-go {
  width: 100%;
  min-height: 2.75rem;
  margin-top: .75rem;
  font-size: 1rem;
}

.parent-report {
  background: #fff7ed;
  border-radius: 1rem;
  margin-bottom: .7rem;
  padding: .7rem .75rem;
}

.parent-report-head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .75rem;
  display: flex;
}

.parent-report-title {
  color: #431407;
  flex: 8rem;
  font-size: .82rem;
  font-weight: 900;
}

.parent-report-today {
  color: #ea580c;
  font-size: 1rem;
  font-weight: 900;
}

.parent-report-week {
  color: #9a3412;
  font-size: .72rem;
  font-weight: 800;
}

.parent-account {
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  display: flex;
}

.parent-account-email {
  color: #9a3412;
  overflow-wrap: anywhere;
  flex: 10rem;
  min-width: 0;
  font-size: .72rem;
  font-weight: 800;
}

.parent-account-btn, .parent-account-out {
  min-height: 2.4rem;
  padding-inline: .9rem;
  font-size: .8rem;
  font-weight: 900;
}

.parent-account-btn {
  color: #082f49;
  background: #e0f2fe;
  width: 100%;
}

.parent-account-out {
  color: #78350f;
  background: #fff;
}

@media (max-width: 30rem) {
  .parent-tool {
    flex: calc(50% - .25rem);
    max-width: none;
  }
}

@media (min-width: 52rem) {
  .parent-page-body {
    grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 19rem);
    align-items: start;
  }

  .parent-col-side {
    position: sticky;
    top: 0;
  }
}

.mbti-cta {
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
  display: flex;
}

.mbti-tag {
  letter-spacing: .05em;
  color: #9a3412;
  background: #fff;
  border-radius: 999px;
  padding: .2rem .5rem;
  font-size: .72rem;
  font-weight: 900;
}

.mbti-overlay {
  z-index: 80;
  background: #3f2a1a59;
  place-items: center;
  padding: 1rem;
  display: grid;
  position: fixed;
  inset: 0;
}

.mbti-sheet {
  width: min(24rem, 100%);
  max-height: 100%;
  box-shadow: var(--shadow-clay);
  background: #fffdf8;
  border-radius: 1.4rem;
  padding: 1rem 1rem 1.1rem;
  overflow: auto;
}

.mbti-head {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.mbti-close {
  color: #78350f;
  background: #fff7ed;
  border-radius: 999px;
  flex-shrink: 0;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  font-size: .9rem;
  font-weight: 900;
  display: grid;
}

.mbti-title {
  color: #431407;
  font-size: 1.05rem;
  font-weight: 900;
}

.mbti-hint {
  color: #9a3412;
  margin: .2rem 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
}

.mbti-note {
  color: #92400e;
  background: #fef3c7;
  border-radius: .75rem;
  margin: .25rem 0 .55rem;
  padding: .45rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
}

.mbti-progress-row {
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .3rem;
  display: flex;
}

.mbti-progress {
  color: #c2410c;
  margin-bottom: .5rem;
  font-size: .72rem;
  font-weight: 800;
}

.mbti-axis {
  color: #431407;
  font-size: .72rem;
  font-weight: 900;
}

.mbti-tip {
  color: #9a3412;
  margin-bottom: .5rem;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
}

.mbti-q {
  color: #431407;
  margin-bottom: .6rem;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.4;
}

.mbti-options {
  gap: .45rem;
  margin-bottom: .75rem;
  display: grid;
}

.mbti-option {
  color: #431407;
  text-align: left;
  background: #fff7ed;
  border-radius: 1rem;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  font-size: .85rem;
  font-weight: 800;
}

.mbti-option-on {
  color: #fff;
  background: #fb923c;
}

.mbti-actions {
  gap: .5rem;
  display: flex;
}

.mbti-btn {
  color: #78350f;
  background: #fff;
  border-radius: 999px;
  flex: 1;
  min-height: 2.6rem;
  font-size: .85rem;
  font-weight: 900;
}

.mbti-btn:disabled {
  opacity: .45;
}

.mbti-btn-go {
  color: #fff;
  background: #fb923c;
}

.mbti-result {
  justify-items: center;
  gap: .45rem;
  margin: .6rem 0 .8rem;
  display: grid;
}

.mbti-result-face {
  object-fit: cover;
  border-radius: 999px;
  width: 5.5rem;
  height: 5.5rem;
}

.mbti-type {
  color: #431407;
  font-size: 1.1rem;
  font-weight: 900;
}

.mbti-blurb {
  color: #9a3412;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
}

.mbti-breakdown {
  gap: .35rem;
  width: 100%;
  margin-top: .5rem;
  display: grid;
}

.mbti-axis-row {
  grid-template-columns: 3.6rem 1fr 3.6rem;
  align-items: center;
  gap: .5rem;
  display: grid;
}

.mbti-pole {
  color: #78350f;
  text-align: center;
  font-size: .7rem;
  font-weight: 900;
}

.mbti-bar {
  background: #fde68a;
  border-radius: 999px;
  height: .55rem;
  overflow: hidden;
}

.mbti-bar-fill {
  background: #fb923c;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.mbti-undetermined {
  color: #92400e;
  text-align: center;
  background: #fef3c7;
  border-radius: .6rem;
  margin-top: .35rem;
  padding: .3rem .55rem;
  font-size: .72rem;
  font-weight: 800;
}

.path-edit-bar {
  gap: .4rem;
  margin-top: .5rem;
  display: grid;
}

.path-edit-hint {
  text-align: center;
  color: #c2410c;
  font-size: .95rem;
  font-weight: 900;
}

.path-edit-actions {
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  display: grid;
}

.path-word-tile-edit {
  box-shadow: inset 0 0 0 2px #fb923c8c;
}

.avatar-pick {
  gap: .65rem;
  margin: .65rem 0 .35rem;
  display: grid;
}

.photo-pick {
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.photo-pick input[type="file"] {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px;
  position: absolute;
  inset: 0;
}

.avatar-sex {
  gap: .35rem;
  width: max-content;
  display: flex;
}

.avatar-sex-btn {
  border-radius: 999px;
  min-width: 3.1rem;
  min-height: 2.5rem;
  padding-inline: .85rem;
  font-size: .9rem;
  font-weight: 900;
}

.avatar-pick-label {
  color: #9a3412;
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 900;
}

.avatar-pick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  gap: .6rem;
  display: grid;
}

.avatar-pick-item {
  border-radius: 1.1rem;
  justify-items: center;
  gap: .2rem;
  width: min(4.7rem, 100%);
  padding: .22rem .15rem .3rem;
  display: grid;
}

.avatar-pick-face {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  width: 100%;
}

.avatar-pick-type {
  letter-spacing: .04em;
  color: #9a3412;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
}

@media (min-width: 40rem) {
  .avatar-pick-item {
    width: min(5.1rem, 100%);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@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: 0;
}

@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-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}