/*! 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-border-style: solid;
      --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-outline-style: solid;
      --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: -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-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-bg: var(--color-bg);
    --color-surface: #150d1f;
    --color-muted: var(--color-muted);
    --color-accent: var(--color-accent);
    --color-accent-contrast: var(--color-accent-contrast);
    --color-line: var(--color-line);
    --color-gold: var(--color-gold);
    --color-gold-text: var(--color-gold-text);
    --color-ornament: var(--color-ornament);
    --color-open: #2fd27a;
    --color-closed: var(--color-closed);
    --font-body: var(--font-body);
    --font-display: var(--font-display)
  }
}

@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]) {
    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
  }

  html {
    background-color: var(--paper);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    color-scheme: light;
    scrollbar-color: var(--hair-strong) var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    line-height: 1.6
  }

  body {
    min-height: 100dvh;
    font-family: var(--font-body);
    overflow-x: clip
  }

  html {
    overflow-x: clip
  }

  :lang(th) body {
    line-height: 1.7
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius)
  }

  .lacquer :focus-visible {
    outline-color: var(--gold-on-dark)
  }

  ::selection {
    background: var(--shu)
  }

  @supports (color:color-mix(in lab, red, red)) {
    ::selection {
      background: color-mix(in oklab, var(--shu) 22%, var(--paper))
    }
  }

  ::selection {
    color: var(--ink)
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse
  }

  .invisible {
    visibility: hidden
  }

  .visible {
    visibility: visible
  }

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

  .\!fixed {
    position: fixed !important
  }

  .absolute {
    position: absolute
  }

  .fixed {
    position: fixed
  }

  .relative {
    position: relative
  }

  .static {
    position: static
  }

  .sticky {
    position: sticky
  }

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

  .block {
    display: block
  }

  .contents {
    display: contents
  }

  .flex {
    display: flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .inline {
    display: inline
  }

  .table {
    display: table
  }

  .aspect-\[3\/4\] {
    aspect-ratio: 3/4
  }

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

  .w-full {
    width: 100%
  }

  .max-w-\(--col-text\) {
    max-width: var(--col-text)
  }

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

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

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

  .flex-col {
    flex-direction: column
  }

  .items-start {
    align-items: flex-start
  }

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

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

  .rounded {
    border-radius: .25rem
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .object-cover {
    object-fit: cover
  }

  .object-\[45\%_62\%\] {
    object-position: 45% 62%
  }

  .object-\[50\%_60\%\] {
    object-position: 50% 60%
  }

  .object-\[55\%_50\%\] {
    object-position: 55% 50%
  }

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

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

  .text-muted {
    color: var(--color-muted)
  }

  .lowercase {
    text-transform: lowercase
  }

  .underline {
    text-decoration-line: underline
  }

  .ring {
    --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)
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
  }

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

  @media (width>=40rem) {
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }
  }

  @media (width>=48rem) {
    .md\:hidden {
      display: none
    }

    .md\:flex-row {
      flex-direction: row
    }

    .md\:items-center {
      align-items: center
    }

    .md\:justify-between {
      justify-content: space-between
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6)
    }
  }

  @media (width>=64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }
  }

  @media (scripting:none) {
    .noscript\:hidden {
      display: none
    }
  }
}

@layer components.primitives {
  .kinari {
    --color-bg: var(--paper-2);
    background-color: var(--paper-2)
  }

  .lacquer {
    --color-bg: var(--lacquer);
    --color-surface: #5a1423;
    --color-text: var(--on-dark);
    --color-muted: var(--on-dark-2);
    --color-line: #d7c4ff42;
    --color-line-strong: #f3eefa66;
    --color-accent-text: #ff7ab8;
    --color-gold: var(--gold-on-dark);
    --color-gold-text: var(--gold-on-dark);
    --color-ornament: var(--gold-leaf);
    --color-open: #3fbf6f;
    --color-closed: var(--on-dark-2);
    background-color: var(--lacquer);
    --rim: var(--gold-leaf-58);
    --rim-foot: var(--rim);
    --rim-inset: 8px;
    background-image: linear-gradient(var(--rim), var(--rim)), linear-gradient(var(--rim-foot), var(--rim-foot)), radial-gradient(90% 70% at 12% 0%, #2a0d3dd9 0%, #2a0d3d00 62%), radial-gradient(70% 60% at 100% 100%, #28060e8c 0%, #28060e00 70%), url(lacquer-flecks.C18Zw2c1.svg);
    background-size: 100% 1px, 100% 1px, auto, auto, 260px 260px;
    background-position: 0 var(--rim-inset), 0 calc(100% - var(--rim-inset)), 0 0, 0 0, 0 0;
    color: var(--color-text);
    color-scheme: dark;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat
  }

  .section,
  .home-section {
    padding-block: var(--section);
    position: relative
  }

  .section--tight,
  .home-section--tight {
    padding-block: var(--section-tight)
  }

  .section--major,
  .home-section--major {
    padding-block: calc(var(--section) * 1.15)
  }

  :is(.section, .home-section):not(.kinari, .lacquer)+:is(.section, .home-section):not(.kinari, .lacquer) {
    padding-top: 0
  }

  :is(.kinari, .lacquer) {
    padding-block: var(--band);
    position: relative
  }

  .section-first {
    padding-top: 0
  }

  .wrap {
    width: 100%;
    max-width: calc(var(--col) + 2 * var(--gutter));
    padding-inline: var(--gutter);
    margin-inline: auto
  }

  .wrap-text {
    max-width: var(--col-text)
  }

  .font-display {
    font-family: var(--font-display);
    letter-spacing: -.012em
  }

  .display-1,
  .display-2,
  .display-3,
  .stat,
  .stat-lg {
    font-family: var(--font-display);
    letter-spacing: -.012em;
    text-wrap: balance;
    font-weight: 500
  }

  .display-1 {
    font-size: var(--step-4);
    line-height: 1.04
  }

  .display-2 {
    font-size: var(--step-3);
    line-height: 1.08
  }

  .display-3 {
    font-size: var(--step-2);
    line-height: 1.18
  }

  .stat {
    font-variant-numeric: lining-nums tabular-nums;
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    line-height: 1
  }

  .stat-lg {
    font-size: var(--step-5);
    letter-spacing: -.02em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-gold);
    line-height: 1
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) :is(h1, h2, h3, .display-1, .display-2, .display-3, .font-display) {
    letter-spacing: 0;
    line-height: 1.3
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .display-1 {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem)
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .display-2 {
    font-size: clamp(1.625rem, 1.4rem + 1.2vw, 2.5rem)
  }

  .lead {
    font-size: var(--step-1);
    color: var(--color-muted);
    text-wrap: pretty;
    max-width: 34em;
    line-height: 1.5
  }

  .num {
    font-variant-numeric: lining-nums tabular-nums
  }

  .muted {
    color: var(--color-muted)
  }

  .label {
    font-family: var(--font-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    align-items: center;
    gap: .6em;
    font-size: .78125rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex
  }

  .label>.brand-sakura {
    width: .95em;
    height: .95em;
    color: var(--color-ornament);
    flex: none
  }

  .label--quiet {
    color: var(--color-muted)
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .label {
    font-family: var(--font-body);
    letter-spacing: .04em;
    text-transform: none;
    font-size: .8125rem
  }

  .prose-venue {
    max-width: var(--col-text)
  }

  .prose-venue :where(p, ul, ol) {
    margin-block: .85em;
    line-height: 1.7
  }

  .prose-venue>p:first-of-type {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--color-text);
    text-wrap: pretty;
    line-height: 1.5
  }

  .prose-venue :where(h2) {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-2);
    margin-block: 1.5em .5em;
    line-height: 1.18
  }

  .prose-venue :where(h3) {
    margin-block: 1.2em .4em;
    font-size: 1.125rem;
    font-weight: 600
  }

  .prose-venue :where(ul) {
    padding-left: 1.25rem;
    list-style: outside
  }

  .prose-venue :where(a) {
    color: var(--color-text);
    text-decoration: underline 1px;
    -webkit-text-decoration-color: var(--color-ornament);
    -webkit-text-decoration-color: var(--color-ornament);
    text-decoration-color: var(--color-ornament);
    text-underline-offset: .25em;
    transition: text-decoration-color .16s, color .16s
  }

  .prose-venue :where(a:hover) {
    color: var(--color-accent-text);
    -webkit-text-decoration-color: var(--color-accent);
    -webkit-text-decoration-color: var(--color-accent);
    text-decoration-color: var(--color-accent)
  }

  :lang(th) .prose-venue>p:first-of-type {
    line-height: 1.7
  }

  .btn {
    border-radius: var(--radius);
    min-height: 3rem;
    font-family: var(--font-body);
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;
    border: 1px solid #0000;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.4rem;
    font-size: .9875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .16s, border-color .16s, color .16s, filter .16s;
    display: inline-flex
  }

  .btn>svg:not(.arrow) {
    flex: none;
    width: 1.25rem;
    height: 1.25rem
  }

  .btn-lg {
    min-height: 3.5rem;
    padding-inline: 1.75rem;
    font-size: 1.0625rem
  }

  .btn-sm {
    min-height: 2.75rem;
    padding: .5rem 1.1rem;
    font-size: .9375rem
  }

  .btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-contrast)
  }

  .btn-primary:hover {
    background: var(--color-accent-press)
  }

  .btn-secondary,
  .btn-ghost {
    border-color: var(--color-line-strong);
    color: var(--color-text);
    background: 0 0
  }

  .btn-secondary:hover,
  .btn-ghost:hover {
    border-color: var(--color-text)
  }

  .btn-quiet,
  .link {
    color: var(--color-text);
    text-decoration: underline 1px;
    -webkit-text-decoration-color: var(--color-ornament);
    -webkit-text-decoration-color: var(--color-ornament);
    text-decoration-color: var(--color-ornament);
    text-underline-offset: .3em;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    transition: text-decoration-color .16s, color .16s;
    display: inline-flex
  }

  .btn-quiet {
    min-height: 2.75rem;
    padding-inline: 0
  }

  .link {
    position: relative
  }

  .link:after {
    content: "";
    position: absolute;
    inset: -.75rem -.375rem
  }

  .btn-quiet:hover,
  .link:hover {
    -webkit-text-decoration-color: var(--color-accent);
    -webkit-text-decoration-color: var(--color-accent);
    text-decoration-color: var(--color-accent)
  }

  .arrow,
  .btn .arrow,
  .service-from svg {
    width: 1rem;
    height: 1rem;
    transition: transform .26s var(--ease-out);
    flex: none
  }

  :is(.btn, .link, .btn-quiet, .service-row, .course):hover :is(.arrow, .service-from svg) {
    transform: translate(4px)
  }

  .channel-card {
    border: 1px solid var(--ch-border, transparent);
    border-radius: var(--radius);
    background: var(--ch-bg);
    min-height: 4.25rem;
    color: var(--ch-fg);
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    transition: filter .16s;
    display: flex
  }

  .channel-card:hover {
    filter: brightness(1.05)
  }

  .channel-card-mark {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem
  }

  .channel-card-name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    display: block
  }

  .channel-card-hint {
    margin-top: .1rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    display: block
  }

  .channel-card-go {
    opacity: .6;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem
  }

  .btn-channel {
    background: var(--ch-bg);
    color: var(--ch-fg);
    border-color: var(--ch-border, transparent)
  }

  .btn-channel:hover {
    filter: brightness(1.05)
  }

  .btn-channel>svg {
    color: var(--ch-mark)
  }

  .btn-channel-outline {
    border-color: var(--ch-border);
    color: var(--ch-fg);
    background: 0 0
  }

  .btn-channel-outline:hover {
    border-color: var(--color-text)
  }

  .status-chip {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    align-items: center;
    gap: .55rem;
    min-height: 2.25rem;
    padding: .35rem .8rem .35rem .7rem;
    display: inline-flex
  }

  @supports (color:color-mix(in lab, red, red)) {
    .status-chip {
      background: color-mix(in oklab, var(--color-bg) 70%, var(--color-surface))
    }
  }

  .status-chip {
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25
  }

  .lacquer .status-chip {
    background: #0000002e
  }

  .status-chip .dot {
    background: var(--color-muted);
    border-radius: 50%;
    flex: none;
    width: .55rem;
    height: .55rem;
    position: relative
  }

  .status-chip[data-open=true] .dot {
    background: var(--color-open)
  }

  .status-chip[data-open=true] .dot:after {
    content: "";
    border: 1.5px solid var(--color-open);
    opacity: 0;
    animation: live-pulse 2.4s var(--ease-out) infinite;
    border-radius: 50%;
    position: absolute;
    inset: -4px
  }

  .status-chip[data-open=false] .dot {
    background: var(--color-closed)
  }

  @keyframes live-pulse {
    0% {
      opacity: .9;
      transform: scale(.6)
    }

    to {
      opacity: 0;
      transform: scale(1.7)
    }
  }

  .skip-link {
    z-index: 100;
    border-radius: var(--radius);
    background: var(--shu);
    color: var(--paper);
    padding: .6rem 1rem;
    font-weight: 600;
    position: absolute;
    top: -100px;
    left: 1rem
  }

  .skip-link:focus {
    top: .75rem
  }

  .section-head {
    gap: .9rem;
    display: grid;
    position: relative
  }

  .section-head-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: .75rem 2rem;
    display: flex
  }

  .section-head :is(h2, h3) {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-3);
    letter-spacing: -.012em;
    text-wrap: balance;
    line-height: 1.08
  }

  .section-head h3 {
    font-size: var(--step-2)
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .section-head h2 {
    font-size: clamp(1.625rem, 1.4rem + 1.2vw, 2.5rem)
  }

  .section-head-link {
    flex: none
  }

  .section-head>.tate {
    display: none;
    position: absolute;
    top: .2rem;
    left: calc(-1*clamp(2.5rem, 4vw, 4.5rem))
  }

  @media (width>=1280px) {
    .section-head>.tate {
      display: block
    }
  }

  .section-head--centred {
    text-align: center;
    justify-items: center
  }

  .section-head--centred .section-head-row {
    justify-content: center
  }

  .section-head+.section-lead {
    margin-top: 1rem
  }

  .pledge {
    max-width: var(--col-text)
  }

  .pledge>p:first-of-type {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-1);
    text-wrap: balance;
    line-height: 1.35
  }

  .pledge>p+p {
    color: var(--color-muted);
    margin-top: .4rem;
    font-size: .9375rem;
    line-height: 1.5
  }

  .notice-banner {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    display: flex
  }

  .notice-banner .dot {
    background: var(--color-ornament);
    flex: none;
    width: .45rem;
    height: .45rem;
    margin-top: .55em;
    transform: rotate(45deg)
  }

  .notice-banner .notice-until {
    color: var(--color-muted);
    margin-top: .125rem;
    font-size: .8125rem;
    display: block
  }

  .hours-summary {
    line-height: 1.5
  }

  .hours-summary .range {
    font-family: var(--font-display);
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 500
  }

  .hours-summary .sub {
    color: var(--color-muted);
    font-size: .875rem;
    display: block
  }

  [data-live-last][hidden],
  [data-live-range][hidden] {
    display: none
  }

  .stars {
    letter-spacing: .15em;
    color: var(--color-line);
    white-space: nowrap;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
    position: relative
  }

  .stars>span {
    color: var(--color-gold);
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden
  }

  .stars-lg {
    font-size: 1.5rem
  }

  .venue-icon {
    color: var(--color-gold-text);
    flex: none
  }

  .brand-mark {
    vertical-align: -.18em;
    flex: none;
    display: inline-block
  }

  .google-cite {
    align-items: center;
    gap: .5rem;
    display: inline-flex
  }

  .addr-seg {
    display: inline-block
  }

  .sakura-list>li {
    align-items: baseline;
    gap: .6rem;
    display: flex
  }

  .sakura-list .brand-sakura {
    width: .85rem;
    height: .85rem;
    color: var(--color-ornament);
    flex: none;
    transform: translateY(.1rem)
  }
}

@layer components.tracks {
  :root {
    --sakura-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50 46C37 41 29 22 38 6c7.5-3 7.5-3 12 3.5C54.5 3 54.5 3 62 6c9 16 1 35-12 40m3.8 2.8c.7-14 16.3-27.4 34.3-23.8 5.2 6.2 5.2 6.2.4 12.5 7.6 2.3 7.6 2.3 7 10.3-12.4 13.5-33 11.8-41.7 1m-1.4 4.4c13.4-3.6 31 7.1 33.2 25.3-4.3 6.9-4.3 6.9-11.8 4.3.2 7.9.2 7.9-7.6 9.9C49.5 85 44.8 64.9 52.4 53.2m-4.7 0C55.2 65 50.4 85 33.8 92.7c-7.9-2-7.9-2-7.7-10-7.5 2.7-7.5 2.7-11.8-4.2 2.2-18.2 19.8-28.9 33.3-25.3m-1.5-4.4c-8.8 10.8-29.3 12.5-41.7-1-.6-8-.6-8 7-10.3-4.8-6.3-4.8-6.3.4-12.5 18-3.6 33.6 9.9 34.3 23.8m3.8-3.2a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 1 0 0-8.8%22/%3E%3C/svg%3E")
  }

  :is(.frame-tokonoma, .tokonoma-mat, .people-card picture, .people-card>.aspect-\[3\/4\]) {
    --mat: 10px;
    --bloom: 1.125rem;
    --open: calc(var(--bloom) * .5 + .4rem);
    padding: var(--mat);
    background: linear-gradient(var(--color-gold) 0 0) right top / calc(100% - var(--open)) 1px no-repeat, linear-gradient(var(--color-gold) 0 0) right top / 1px 100% no-repeat, linear-gradient(var(--color-gold) 0 0) left bottom / 100% 1px no-repeat, linear-gradient(var(--color-gold) 0 0) left bottom / 1px calc(100% - var(--open)) no-repeat, var(--color-bg);
    display: block;
    position: relative
  }

  :is(.frame-tokonoma, .tokonoma-mat, .people-card picture, .people-card>.aspect-\[3\/4\]):before {
    content: "";
    z-index: 3;
    width: var(--bloom);
    height: var(--bloom);
    pointer-events: none;
    background: var(--color-ornament);
    -webkit-mask: var(--sakura-mask) center / contain no-repeat;
    -webkit-mask: var(--sakura-mask) center / contain no-repeat;
    -webkit-mask: var(--sakura-mask) center / contain no-repeat;
    mask: var(--sakura-mask) center / contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    translate: -50% -50%;
    rotate: -8deg
  }

  @media (width<=479px) {
    :is(.frame-tokonoma, .tokonoma-mat, .people-card picture, .people-card>.aspect-\[3\/4\]) {
      --mat: 7px;
      --bloom: 1rem
    }
  }

  .frame-plain {
    --open: 0px
  }

  .frame-plain:before {
    content: none
  }

  .frame-tokonoma img,
  .tokonoma-mat img {
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block
  }

  :is(.frame-tokonoma, .tokonoma-mat) picture {
    display: block;
    overflow: hidden
  }

  :is(.frame-tokonoma, .tokonoma-mat) img {
    transition: scale .9s var(--ease-out)
  }

  @media (hover:hover) {
    :is(.frame-tokonoma, .tokonoma-mat):hover img {
      scale: 1.035
    }
  }

  .photo-grade,
  .photo-grade img {
    filter: saturate(.9)contrast(1.03)sepia(.06)
  }

  :root {
    --deckle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 6%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 6V5.3L5.9 4.1L14.2 3.8L19.3 3.4L25 4L31.7 2.2L38.4 2.7L48.7 2.8L57.5 3L66 3.2L76.1 3.4L82.5 1.4L87.6 1.8L93.5 2.3L100.9 0.8L107.7 0.5L114.3 0.5L120.2 1.8L129.8 2.1L140.6 3.3L146.5 3.8L153.1 3.7L164 3.4L173.3 3.1L181.4 2.8L191.1 2.9L197.5 4.4L207 5.2L213 4.4L220.8 4.5L226.6 4.1L236.3 3.4L243.2 2.8L249.7 2.6L255.1 2L263.8 0.7L272.6 0.9L280.2 2L285.5 2.8L294.3 2.5L304.9 2.1L315.3 2.7L321.4 2.1L330.9 1.7L340.5 2.7L351.3 3.9L357.4 3.8L362.4 3.9L372.1 5.2L382.8 3.9L389.6 4.6L398.1 3.4L408.8 3.5L415.4 3.3L422.2 3.6L427.3 4.4L436.9 3.2L445.1 4.1L450.2 3.4L456.3 3.4L463.4 2.1L469.9 2.3L477.6 0.5L488.3 0.5L494.6 1.8L501.7 2.1L510.6 1.9L521.3 2.9L529.9 2.8L540.3 3.4L549.5 3.5L557.9 3.4L566.9 3.2L572.2 2.8L577.9 3.8L588.2 5L600 5.3V6Z%22/%3E%3C/svg%3E")
  }

  .kinari:before,
  .kinari:after {
    content: "";
    pointer-events: none;
    background-color: var(--color-bg);
    height: 6px;
    -webkit-mask-image: var(--deckle);
    -webkit-mask-image: var(--deckle);
    -webkit-mask-image: var(--deckle);
    mask-image: var(--deckle);
    position: absolute;
    left: 0;
    right: 0;
    -webkit-mask-size: 600px 100%;
    mask-size: 600px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x
  }

  .kinari:before {
    bottom: calc(100% - 1px)
  }

  .kinari:after {
    top: calc(100% - 1px);
    transform: scaleY(-1);
    -webkit-mask-position: 233px 0;
    mask-position: 233px 0
  }

  .nameplate {
    --np-cell: 4rem;
    --np-pad: 1.1rem;
    --np-gap: .35rem;
    -webkit-user-select: none;
    user-select: none;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    display: inline-grid
  }

  .nameplate-plate,
  .nameplate-yomi {
    grid-auto-rows: var(--np-cell);
    row-gap: var(--np-gap);
    padding-block: var(--np-pad);
    display: grid
  }

  .nameplate-plate {
    border: 1px solid var(--color-gold);
    place-items: center;
    padding-inline: 1rem
  }

  @supports (color:color-mix(in lab, red, red)) {
    .nameplate-plate {
      border: 1px solid color-mix(in oklab, var(--color-gold) 72%, transparent)
    }
  }

  .nameplate-plate {
    outline: 1px solid var(--color-gold)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .nameplate-plate {
      outline: 1px solid color-mix(in oklab, var(--color-gold) 38%, transparent)
    }
  }

  .nameplate-plate {
    outline-offset: -5px;
    background: var(--color-surface);
    font-family: var(--font-tate);
    color: var(--color-text);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1
  }

  .nameplate-yomi {
    border-block: 1px solid #0000
  }

  .nameplate-yomi>span {
    font-family: var(--font-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gold-text);
    align-items: center;
    gap: .8rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    display: flex
  }

  .nameplate-yomi>span:before {
    content: "";
    background: var(--color-gold);
    width: 2.25rem;
    height: 1px
  }

  @supports (color:color-mix(in lab, red, red)) {
    .nameplate-yomi>span:before {
      background: color-mix(in oklab, var(--color-gold) 70%, transparent)
    }
  }

  .tate {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-tate);
    letter-spacing: .42em;
    color: var(--color-gold-text);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1
  }

  .ornament,
  .ornament img {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
  }

  .brand-ring {
    color: var(--color-ornament);
    display: block
  }

  .brand-seal {
    color: var(--color-accent);
    display: block
  }

  .lacquer .brand-seal {
    color: var(--seal-on-dark)
  }

  .brand-sakura {
    color: var(--color-ornament);
    display: inline-block
  }

  .brand-wordmark {
    color: var(--color-gold);
    display: block
  }

  .divider {
    color: var(--color-ornament);
    align-items: center;
    gap: 1rem;
    display: flex
  }

  .divider:before,
  .divider:after {
    content: "";
    opacity: .7;
    background: currentColor;
    flex: 1;
    height: 1px
  }

  .divider .brand-sakura {
    width: 1rem;
    height: 1rem
  }

  .ring-draw-stroke {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1px
  }

  .is-in .ring-draw-stroke,
  .brand-ring.is-in .ring-draw-stroke {
    animation: ring-draw 2.2s var(--ease-out) forwards
  }

  @keyframes ring-draw {
    to {
      stroke-dashoffset: 0
    }
  }

  .seal-stamp {
    opacity: 0;
    transform: scale(1.12)rotate(-4deg)
  }

  .is-in .seal-stamp,
  .seal-stamp.is-in {
    animation: .52s cubic-bezier(.2, .9, .3, 1.15) 1.25s forwards seal-stamp
  }

  @keyframes seal-stamp {
    0% {
      opacity: 0;
      transform: scale(1.14)rotate(-4deg)
    }

    60% {
      opacity: 1
    }

    to {
      opacity: 1;
      transform: scale(1)rotate(-2deg)
    }
  }

  @property --ink-reveal {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%
  }

  .js [data-ink]:not(.is-in) {
    opacity: 0;
    filter: blur(5px);
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%))
  }

  .js [data-ink].is-in {
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    -webkit-mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    mask-image: radial-gradient(circle at 30% 45%, #000 var(--ink-reveal), transparent calc(var(--ink-reveal) + 18%));
    animation: ink-bleed 1.1s var(--ease-ink) both;
    animation-delay: var(--d, 0s);
    -webkit-mask-clip: no-clip;
    mask-clip: no-clip
  }

  @keyframes ink-bleed {
    0% {
      opacity: 0;
      filter: blur(5px);
      --ink-reveal: 0%
    }

    60% {
      opacity: 1
    }

    to {
      opacity: 1;
      filter: blur();
      --ink-reveal: 140%
    }
  }

  .js [data-ink].is-in.ink-done {
    filter: none;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none
  }

  .no-js .ring-draw-stroke {
    stroke-dashoffset: 0
  }

  .no-js .seal-stamp {
    opacity: 1;
    transform: rotate(-2deg)
  }

  @media (prefers-reduced-motion:reduce) {
    .ring-draw-stroke {
      stroke-dashoffset: 0 !important;
      animation: none !important
    }

    .seal-stamp {
      opacity: 1 !important;
      animation: none !important;
      transform: rotate(-2deg) !important
    }

    .js [data-ink],
    .js [data-ink]:not(.is-in) {
      opacity: 1 !important;
      filter: none !important;
      animation: none !important;
      -webkit-mask-image: none !important;
      mask-image: none !important
    }

    .status-chip .dot:after {
      display: none;
      animation: none !important
    }
  }

  :root {
    --nav-h: 4rem
  }

  @media (width>=1180px) {
    :root {
      --nav-h: 4.75rem
    }
  }

  html {
    scroll-padding-top: calc(var(--nav-h) + .75rem)
  }

  html.nav-open {
    overflow: hidden
  }

  .mnav {
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--gold-leaf);
    position: sticky;
    top: 0
  }

  @supports (color:color-mix(in lab, red, red)) {
    .mnav {
      border-bottom: 1px solid color-mix(in oklab, var(--gold-leaf) 45%, transparent)
    }
  }

  .mnav:after {
    content: "";
    background: var(--gold-leaf);
    transform-origin: 0;
    pointer-events: none;
    height: 2px;
    position: absolute;
    inset: auto 0 -1px;
    transform: scaleX(0)
  }

  @supports (animation-timeline:scroll()) {
    .mnav:after {
      animation: linear both mnav-thread
    }

    :root .mnav:after {
      animation-timeline: scroll(root)
    }
  }

  @keyframes mnav-thread {
    to {
      transform: scaleX(1)
    }
  }

  .mnav-row {
    height: var(--nav-h);
    align-items: center;
    gap: .5rem;
    display: flex
  }

  @media (width>=400px) {
    .mnav-row {
      gap: .75rem
    }
  }

  .mnav-brand {
    z-index: 1;
    flex: none;
    align-items: center;
    min-height: 2.75rem;
    margin-right: auto;
    display: inline-flex;
    position: relative
  }

  .mnav-logo {
    --logo-top-scale: 1.4;
    transform-origin: 0 0;
    filter: drop-shadow(0 1px 2px #f3eefa29);
    width: auto;
    height: 3.375rem
  }

  @media (width>=1180px) {
    .mnav-logo {
      --logo-top-scale: 1.6;
      height: 4rem
    }
  }

  @supports (animation-timeline:scroll()) {
    @media (prefers-reduced-motion:no-preference) {
      .mnav>.mnav-row>.mnav-brand .mnav-logo {
        animation: linear both mnav-logo-settle
      }

      :root .mnav>.mnav-row>.mnav-brand .mnav-logo {
        animation-timeline: scroll(root);
        animation-range: 0 7rem
      }
    }
  }

  @keyframes mnav-logo-settle {
    0% {
      transform: scale(var(--logo-top-scale))
    }

    to {
      transform: none
    }
  }

  .mnav-links {
    display: none
  }

  @media (width>=1180px) {
    .mnav-links {
      margin-right: .5rem;
      display: block
    }

    .mnav-links>ul {
      align-items: center;
      gap: .1rem;
      display: flex
    }
  }

  .mnav-link {
    min-height: 2.75rem;
    font-family: var(--font-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    border-bottom: 1px solid #0000;
    align-items: center;
    gap: .3rem;
    padding: 0 .65rem;
    font-size: .78rem;
    font-weight: 600;
    list-style: none;
    transition: color .16s, border-color .16s;
    display: inline-flex
  }

  .mnav-link::-webkit-details-marker {
    display: none
  }

  .mnav-link:hover {
    color: var(--shu-text)
  }

  .mnav-link[aria-current=page],
  .mnav-link[data-current] {
    color: var(--shu-text);
    border-bottom-color: var(--shu)
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .mnav-link {
    font-family: var(--font-body);
    letter-spacing: .02em;
    text-transform: none;
    font-size: .9375rem;
    font-weight: 600
  }

  .mnav-caret {
    width: .7rem;
    height: .7rem;
    transition: transform .2s var(--ease-out);
    flex: none
  }

  details[open]>summary .mnav-caret {
    transform: rotate(180deg)
  }

  .mnav-group {
    position: relative
  }

  .mnav-group>details>summary {
    list-style: none
  }

  .mnav-panel {
    border: 1px solid var(--hair);
    background: var(--color-surface);
    min-width: 18rem;
    box-shadow: var(--shadow-panel);
    padding: .5rem;
    position: absolute;
    top: calc(100% + .6rem);
    left: 0
  }

  .mnav-panel-link {
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    min-height: 2.75rem;
    padding: .55rem .75rem;
    font-size: .975rem;
    font-weight: 500;
    display: flex
  }

  .mnav-panel-link:hover {
    background: var(--paper-2)
  }

  .mnav-panel-link[aria-current=page] {
    color: var(--shu-text)
  }

  .mnav-panel-price {
    color: var(--gold-ink);
    white-space: nowrap;
    font-size: .875rem
  }

  .mnav-tools {
    flex: none;
    align-items: center;
    gap: .5rem;
    display: flex
  }

  @media (width>=400px) {
    .mnav-tools {
      gap: .625rem
    }
  }

  .mnav-lang {
    position: relative
  }

  .mnav-lang>summary {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-family: var(--font-label);
    letter-spacing: .12em;
    color: var(--ink);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    padding: 0 .55rem;
    font-size: .78rem;
    font-weight: 600;
    list-style: none;
    transition: border-color .16s;
    display: inline-flex
  }

  .mnav-lang>summary::-webkit-details-marker {
    display: none
  }

  .mnav-lang>summary:hover,
  .mnav-lang[open]>summary {
    border-color: var(--hair-strong)
  }

  @media (width<=359px) {
    .mnav-lang .mnav-caret {
      display: none
    }
  }

  .mnav-lang-list {
    z-index: 60;
    border: 1px solid var(--hair);
    background: var(--color-surface);
    min-width: 12rem;
    box-shadow: var(--shadow-panel);
    padding: .4rem;
    position: absolute;
    top: calc(100% + .5rem);
    right: 0
  }

  .mnav-lang-list :is(a, span[aria-current]) {
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    padding: .45rem .7rem;
    font-size: .975rem;
    display: flex
  }

  .mnav-lang-list a:hover {
    background: var(--paper-2)
  }

  .mnav-lang-list [aria-current] {
    color: var(--shu-text);
    font-weight: 600
  }

  .mnav-lang-list .flag-icon,
  .mnav-lang-list svg {
    width: 1.25rem;
    height: auto;
    box-shadow: 0 0 0 1px var(--hair);
    border-radius: 1px;
    flex: none
  }

  .mnav-lang-name {
    flex: 1
  }

  .mnav-lang-list small {
    font-family: var(--font-label);
    letter-spacing: .14em;
    color: var(--muted, var(--ink-2));
    font-size: .6875rem
  }

  .mnav-cta {
    display: none
  }

  @media (width>=768px) {
    .mnav-cta {
      display: inline-flex
    }
  }

  .mnav-drawer-root>summary {
    list-style: none
  }

  .mnav-drawer-root>summary::-webkit-details-marker {
    display: none
  }

  .mnav-menu {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--ink);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    font-size: .9rem;
    font-weight: 600;
    display: inline-flex
  }

  .mnav-menu:hover {
    border-color: var(--hair-strong)
  }

  .mnav-burger {
    border-block: 1.5px solid;
    width: 1rem;
    height: .6rem;
    display: block;
    position: relative
  }

  @media (width<=359px) {
    .mnav-menu {
      padding: 0
    }

    .mnav-menu-label {
      display: none
    }
  }

  @media (width>=1180px) {
    .mnav-drawer-root {
      display: none
    }
  }

  .mnav-drawer {
    z-index: 70;
    overscroll-behavior: contain;
    background: var(--paper);
    flex-direction: column;
    display: flex;
    position: fixed;
    inset: 0;
    overflow-y: auto
  }

  .mnav-drawer>.mnav-row {
    border-bottom: 1px solid var(--gold-leaf);
    flex: none
  }

  @supports (color:color-mix(in lab, red, red)) {
    .mnav-drawer>.mnav-row {
      border-bottom: 1px solid color-mix(in oklab, var(--gold-leaf) 45%, transparent)
    }
  }

  .mnav-close {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ink);
    cursor: pointer;
    place-items: center;
    display: inline-grid
  }

  .mnav-close svg {
    width: 1.125rem;
    height: 1.125rem
  }

  .no-js .mnav-drawer-root[open]>summary {
    z-index: 71;
    background: var(--paper);
    position: relative
  }

  .no-js .mnav-drawer-root[open] .mnav-menu-label {
    display: none
  }

  .no-js .mnav-drawer-root[open] .mnav-menu {
    width: 2.75rem;
    padding: 0
  }

  .no-js .mnav-drawer-root[open] .mnav-burger {
    border: 0;
    width: 1.125rem;
    height: 1.125rem
  }

  .no-js .mnav-drawer-root[open] .mnav-burger:before,
  .no-js .mnav-drawer-root[open] .mnav-burger:after {
    content: "";
    background: currentColor;
    border-radius: 1px;
    width: 1.35rem;
    height: 1.75px;
    position: absolute;
    top: 50%;
    left: 50%
  }

  .no-js .mnav-drawer-root[open] .mnav-burger:before {
    transform: translate(-50%, -50%)rotate(45deg)
  }

  .no-js .mnav-drawer-root[open] .mnav-burger:after {
    transform: translate(-50%, -50%)rotate(-45deg)
  }

  .no-js .mnav-close {
    visibility: hidden
  }

  .mnav-drawer-body {
    padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom));
    align-content: start;
    gap: 1.75rem;
    display: grid
  }

  .mnav-drawer-body>.status-chip {
    justify-self: start
  }

  .mnav-drawer-nav {
    border-top: 1px solid var(--hair)
  }

  .mnav-drawer-nav a {
    border-bottom: 1px solid var(--hair);
    min-height: 3.25rem;
    font-family: var(--font-display);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem 1rem;
    padding: .65rem 0;
    font-size: 1.625rem;
    line-height: 1.2;
    display: flex
  }

  .mnav-drawer-nav a[aria-current=page] {
    color: var(--shu-text)
  }

  .mnav-drawer-nav small {
    font-family: var(--font-body);
    color: var(--gold-ink);
    font-size: .875rem
  }

  :is(:lang(ja), :lang(zh), :lang(ko)) .mnav-drawer-nav a {
    font-size: 1.375rem
  }

  :lang(th) .mnav-drawer-nav a {
    font-size: 1.375rem;
    line-height: 1.4
  }

  .mnav-drawer-channels {
    gap: .6rem;
    display: grid
  }

  @media (width>=560px) {
    .mnav-drawer-channels {
      grid-template-columns: 1fr 1fr
    }
  }

  .mfoot {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2rem;
    position: relative;
    overflow: clip
  }

  @media (width<=767px) {
    .mfoot {
      padding-bottom: calc(2rem + var(--contact-bar-h) + env(safe-area-inset-bottom))
    }
  }

  .mfoot {
    --rim-foot: transparent
  }

  .mfoot-grid {
    gap: 2.5rem;
    display: grid;
    position: relative
  }

  @media (width>=640px) {
    .mfoot-grid {
      grid-template-columns: 1fr 1fr
    }

    .mfoot-brand {
      grid-column: 1/-1
    }
  }

  @media (width>=1024px) {
    .mfoot-grid {
      grid-template-columns: 5fr 2.5fr 2.5fr 3fr;
      gap: 3rem
    }

    .mfoot-brand {
      grid-column: auto
    }
  }

  .mfoot-logo-link {
    display: inline-block
  }

  .mfoot-logo {
    filter: drop-shadow(0 0 1.25rem #e0218a52);
    width: min(100%, 15rem);
    height: auto;
    display: block
  }

  .mfoot address {
    color: var(--color-muted);
    margin-top: 1.5rem;
    font-style: normal;
    line-height: 1.6
  }

  .mfoot h2 {
    font-family: var(--font-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-gold-text);
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 600
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .mfoot h2 {
    font-family: var(--font-body);
    letter-spacing: .04em;
    text-transform: none;
    font-size: .8125rem
  }

  .mfoot-hours .range {
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1.25;
    display: block
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .mfoot-hours .range {
    font-size: 1.25rem;
    line-height: 1.4
  }

  .mfoot-hours .sub {
    margin-top: .35rem
  }

  .mfoot-pages {
    gap: .15rem;
    display: grid
  }

  .mfoot-pages a {
    align-items: center;
    min-height: 2.75rem;
    transition: color .16s;
    display: inline-flex
  }

  @media (width<=639px) {
    .mfoot-pages {
      grid-template-columns: 1fr 1fr;
      gap: 0 1.5rem
    }
  }

  .mfoot-pages a:hover,
  .mfoot-pages a[aria-current=page] {
    color: var(--gold-on-dark)
  }

  .mfoot-chips {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex
  }

  .mfoot-chip {
    border-radius: var(--radius);
    min-height: 2.75rem;
    color: var(--ch-fg);
    border: 1px solid #f3eefa47;
    align-items: center;
    gap: .45rem;
    padding: 0 .85rem;
    font-size: .875rem;
    font-weight: 600;
    transition: border-color .16s;
    display: inline-flex
  }

  .mfoot-chip:hover {
    border-color: var(--on-dark)
  }

  .mfoot-chip-mark {
    flex: none;
    width: 1.125rem;
    height: 1.125rem
  }

  .mfoot-map {
    max-width: 17rem;
    margin-top: 1.5rem
  }

  .mfoot-line {
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    font-size: .8125rem;
    display: flex;
    position: relative
  }

  .mfoot-line a:not(.footer-badge) {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-line);
    -webkit-text-decoration-color: var(--color-line);
    text-decoration-color: var(--color-line);
    text-underline-offset: .25em;
    position: relative
  }

  .mfoot-line a:not(.footer-badge):after {
    content: "";
    position: absolute;
    inset: -.75rem -.375rem
  }

  .mfoot-line a:not(.footer-badge):hover {
    -webkit-text-decoration-color: var(--gold-on-dark);
    -webkit-text-decoration-color: var(--gold-on-dark);
    text-decoration-color: var(--gold-on-dark)
  }

  .mfoot .link {
    color: var(--color-text)
  }

  .lb-able {
    cursor: zoom-in
  }

  .lb-able:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -3px
  }

  @media (hover:hover) {
    .lb-frame:hover .lb-able {
      outline: 1px solid var(--color-gold);
      outline-offset: -1px
    }
  }

  .lb-frame-rel {
    position: relative
  }

  .lb-hint {
    z-index: 1;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    width: 2rem;
    height: 2rem;
    color: var(--color-text);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    inset-block-start: .625rem;
    inset-inline-end: .625rem
  }

  @media (hover:hover) {
    .lb-hint {
      opacity: 0;
      transition: opacity .16s var(--ease-out)
    }

    .lb-frame:hover .lb-hint,
    .lb-frame:focus-within .lb-hint {
      opacity: 1
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .lb-hint {
      transition: none
    }
  }

  html.lb-locked {
    padding-right: var(--lb-sbw, 0);
    overflow: hidden
  }

  .lb {
    --color-text: var(--on-dark);
    --color-muted: var(--on-dark-2);
    --lb-scrim: #2a0a12;
    --lb-chrome: var(--on-dark)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .lb {
      --lb-chrome: color-mix(in srgb, var(--on-dark) 10%, transparent)
    }
  }

  .lb {
    --lb-chrome-hover: var(--on-dark)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .lb {
      --lb-chrome-hover: color-mix(in srgb, var(--on-dark) 20%, transparent)
    }
  }

  .lb {
    overscroll-behavior: contain;
    background: var(--lb-scrim);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    color: var(--color-text);
    opacity: 0;
    transition: opacity .18s var(--ease-out), overlay .18s allow-discrete, display .18s allow-discrete;
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    inset: 0
  }

  .lb::backdrop {
    background: var(--lacquer)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .lb::backdrop {
      background: color-mix(in srgb, var(--lacquer) 70%, #1a0409)
    }
  }

  .lb :focus-visible {
    outline-color: var(--gold-on-dark)
  }

  .lb[open] {
    opacity: 1;
    grid-template-rows: auto minmax(0, 1fr) auto;
    display: grid
  }

  @starting-style {
    .lb[open] {
      opacity: 0
    }
  }

  .lb-top {
    width: 100%;
    max-width: var(--col);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-inline: auto;
    padding: .75rem 1rem;
    display: flex
  }

  .lb-counter {
    color: var(--gold-on-dark);
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-size: .875rem;
    line-height: 1.2
  }

  .lb-btn {
    border-radius: var(--radius);
    background: var(--lb-chrome);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-text);
    cursor: pointer;
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex
  }

  .lb-btn:hover {
    background: var(--lb-chrome-hover)
  }

  .lb-btn[hidden] {
    display: none
  }

  .lb-stage {
    overscroll-behavior: contain;
    place-items: center;
    min-height: 0;
    padding: 0 1rem;
    display: grid;
    overflow: auto
  }

  .lb-zoom {
    cursor: zoom-in;
    background: 0 0;
    border: 0;
    max-width: 100%;
    padding: 0;
    line-height: 0;
    display: block
  }

  .lb-img {
    object-fit: contain;
    border-radius: var(--radius);
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 11rem);
    display: block
  }

  .lb-stage.is-fit .lb-zoom {
    cursor: default
  }

  .lb-stage.is-zoomed {
    place-items: start center
  }

  .lb-stage.is-zoomed .lb-zoom {
    cursor: zoom-out;
    max-width: none
  }

  .lb-stage.is-zoomed .lb-img {
    cursor: zoom-out;
    max-width: none;
    max-height: none
  }

  .lb-foot {
    width: 100%;
    max-width: var(--col);
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-inline: auto;
    display: grid
  }

  .lb-caption {
    text-align: center;
    color: var(--color-text);
    text-wrap: pretty;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5
  }

  .lb-caption[hidden] {
    display: none
  }

  @media (width>=768px) {

    .lb-top,
    .lb-foot {
      padding-inline: 1.5rem
    }

    .lb-caption {
      font-size: 1rem
    }
  }

  @keyframes lb-slide-r {
    0% {
      opacity: 0;
      transform: translate(2.5%)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  @keyframes lb-slide-l {
    0% {
      opacity: 0;
      transform: translate(-2.5%)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  .lb-img.is-in-r {
    animation: lb-slide-r .2s var(--ease-out) both
  }

  .lb-img.is-in-l {
    animation: lb-slide-l .2s var(--ease-out) both
  }

  @media (prefers-reduced-motion:reduce) {
    .lb {
      transition: none
    }

    .lb-img.is-in-r,
    .lb-img.is-in-l {
      animation: none
    }
  }

  .photo-figure--overlay {
    position: relative
  }

  .photo-figure--overlay>figcaption {
    max-width: none;
    color: var(--on-dark);
    background: var(--lacquer);
    margin: 0;
    padding: 1.125rem 1.25rem;
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0
  }

  @supports (color:color-mix(in lab, red, red)) {
    .photo-figure--overlay>figcaption {
      background: color-mix(in srgb, var(--lacquer) 78%, transparent)
    }
  }

  .photo-figure--overlay>figcaption {
    border-end-end-radius: var(--radius);
    border-end-start-radius: var(--radius)
  }

  .photo-figure--overlay>figcaption strong {
    color: var(--on-dark)
  }

  @media (width<=767px) {
    .photo-bleed.photo-figure--overlay>figcaption {
      border-radius: 0
    }
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
  }

  .gallery[data-cols="1"] {
    grid-template-columns: minmax(0, 1fr)
  }

  @media (width>=640px) {
    .gallery {
      gap: 1rem
    }

    .gallery[data-cols="3"],
    .gallery[data-cols="4"],
    .gallery[data-cols="6"] {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }
  }

  @media (width>=1024px) {
    .gallery[data-cols="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .gallery[data-cols="6"] {
      grid-template-columns: repeat(6, minmax(0, 1fr))
    }
  }

  .gallery>li,
  .gallery figure {
    margin: 0
  }

  .gallery img {
    object-fit: cover;
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    display: block
  }

  .gallery[data-ratio=portrait] img {
    aspect-ratio: 3/4
  }

  .gallery[data-ratio=landscape] img {
    aspect-ratio: 4/3
  }

  .gallery[data-ratio=square] img {
    aspect-ratio: 1
  }

  .gallery figcaption {
    color: var(--color-muted);
    margin-top: .5rem;
    font-size: .875rem;
    line-height: 1.45
  }

  @layer components {
    .price-band {
      isolation: isolate;
      --peony-w: clamp(5.5rem, 3rem + 9vw, 15rem);
      --peony-out: clamp(1rem, .5rem + 1.5vw, 2.5rem);
      --edge: max(var(--gutter), calc((100vw - var(--col)) / 2));
      --peony-clear: max(0px, calc(var(--peony-w) - var(--peony-out) - var(--edge) + 1rem));
      position: relative;
      overflow: clip
    }

    .price-band>.wrap {
      z-index: 1;
      position: relative
    }

    .price-band-peony {
      z-index: 0;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      right: calc(-1 * var(--peony-out));
      width: var(--peony-w);
      opacity: .96;
      height: auto;
      position: absolute;
      top: -1rem
    }

    .price-band-peony img {
      width: 100%;
      height: auto
    }

    .price-band-head {
      padding-right: var(--peony-clear);
      align-items: end;
      gap: 1.5rem 3rem;
      display: grid
    }

    .price-band:not(.price-band--split) .price-band-head {
      min-height: max(0px, calc(var(--peony-w) * 1.2 - 1rem - var(--band) - clamp(2rem, 1.4rem + 2vw, 3rem) + .5rem))
    }

    @media (width>=900px) {
      .price-band-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem)
      }
    }

    .price-band--split .price-band-intro>.section-head {
      padding-right: var(--peony-clear)
    }

    @media (width>=1024px) {
      .price-band--split {
        --peony-w: clamp(8rem, 4rem + 6vw, 12rem)
      }

      .price-band--split .price-band-intro>.section-head {
        padding-right: 0
      }

      .price-band--split .price-band-peony {
        top: auto;
        bottom: -1.5rem
      }

      .price-band--split>.wrap {
        padding-bottom: max(0px, calc(var(--peony-w) * 1.2 - 1.5rem - var(--band) + 1.25rem))
      }
    }

    .pledge {
      align-items: center;
      gap: 1.1rem;
      max-width: 30rem;
      display: flex
    }

    .mon {
      border: 1px solid var(--color-ornament, #e0218a);
      width: 3.25rem;
      height: 3.25rem;
      box-shadow: inset 0 0 0 3px var(--color-bg), inset 0 0 0 3.75px var(--color-ornament, #e0218a);
      color: var(--color-ornament, #e0218a);
      border-radius: 50%;
      flex: none;
      place-items: center;
      display: grid;
      position: relative
    }

    .mon>.brand-sakura {
      width: 52%;
      height: 52%;
      transform: rotate(-8deg)
    }

    .pledge-text {
      font-family: var(--font-display);
      font-size: var(--step-1, clamp(1.125rem, 1.06rem + .35vw, 1.3125rem));
      color: var(--color-text);
      line-height: 1.38
    }

    .pledge-text small {
      font-family: var(--font-body);
      color: var(--color-muted);
      margin-top: .3rem;
      font-size: .875rem;
      line-height: 1.5;
      display: block
    }

    .courses {
      border-top: 1px solid var(--color-line);
      margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
      display: grid
    }

    @media (width>=640px) {
      .courses {
        grid-template-columns: repeat(min(var(--courses-n, 2), 2), minmax(0, 1fr))
      }
    }

    @media (width>=1100px) {
      .courses {
        grid-template-columns: repeat(min(var(--courses-n, 4), 4), minmax(0, 1fr))
      }
    }

    .courses[data-cols="1"] {
      max-width: 28rem
    }

    @media (width>=640px) {
      .courses[data-cols="2"] {
        max-width: 50rem
      }
    }

    .course-col {
      border-bottom: 1px solid var(--color-line);
      align-content: start;
      gap: .25rem;
      min-width: 0;
      padding: 1.6rem 0 1.85rem;
      display: grid
    }

    @media (width>=640px) {
      .course-col {
        border-left: 1px solid var(--color-line);
        padding-inline: 1.5rem
      }

      .course-col:nth-child(odd) {
        border-left: 0;
        padding-left: 0
      }
    }

    @media (width>=1100px) {
      .courses:not([data-cols="1"]):not([data-cols="2"]) .course-col {
        border-left: 1px solid var(--color-line);
        padding-inline: 1.75rem
      }

      .courses:not([data-cols="1"]):not([data-cols="2"]) .course-col:nth-child(4n+1) {
        border-left: 0;
        padding-left: 0
      }
    }

    .course-table {
      border-collapse: collapse;
      width: 100%
    }

    .course-table caption {
      text-align: start;
      caption-side: top;
      padding-bottom: .9rem
    }

    .course-table caption>* {
      display: block
    }

    .course-name {
      font-family: var(--font-display);
      letter-spacing: -.01em;
      color: var(--color-text);
      text-wrap: balance;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1.18
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .course-name {
      letter-spacing: 0;
      font-size: 1.375rem;
      line-height: 1.3
    }

    .course-name a {
      color: inherit;
      text-decoration: none;
      position: relative
    }

    .course-name a:after {
      content: "";
      position: absolute;
      inset: -.375rem 0
    }

    .course-name-sub {
      font-family: var(--font-body);
      letter-spacing: .01em;
      color: var(--color-muted);
      margin-top: .3rem;
      font-size: .875rem;
      font-weight: 500;
      line-height: 1.35;
      display: block
    }

    .course-name a:hover {
      text-decoration: underline 1px;
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      text-decoration-color: var(--color-ornament, #e0218a);
      text-underline-offset: .22em
    }

    @media (width>=1100px) {
      .courses:not([data-cols="1"]):not([data-cols="2"]) .course-name {
        min-height: 2.36em
      }
    }

    .course-note {
      color: var(--color-muted);
      margin-top: .35rem;
      font-size: .9rem;
      line-height: 1.45
    }

    .courses--notes .course-note {
      min-height: 2.9em
    }

    .course-table tbody th,
    .course-table tbody td {
      vertical-align: baseline;
      padding: .5rem 0
    }

    .course-table tbody th {
      text-align: start;
      width: 100%;
      font-weight: 400
    }

    .course-table tbody td {
      text-align: end;
      white-space: nowrap;
      padding-left: .6rem
    }

    .course-dur {
      color: var(--color-muted);
      align-items: baseline;
      gap: .6rem;
      font-size: .9375rem;
      display: flex
    }

    .course-dur:after {
      content: "";
      border-bottom: 1px dotted var(--color-gold-text, #c4a6ff);
      flex: 1;
      min-width: 1rem
    }

    @supports (color:color-mix(in lab, red, red)) {
      .course-dur:after {
        border-bottom: 1px dotted color-mix(in oklab, var(--color-gold-text, #c4a6ff) 60%, transparent)
      }
    }

    .course-dur:after {
      transform: translateY(-.28em)
    }

    .course-price {
      font-family: var(--font-display);
      letter-spacing: -.01em;
      color: var(--color-gold);
      font-variant-numeric: lining-nums tabular-nums;
      align-items: baseline;
      font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
      font-weight: 700;
      line-height: 1;
      display: inline-flex
    }

    .course-baht:has(+[data-price-none]) {
      display: none
    }

    .course-baht {
      color: var(--color-muted);
      align-self: flex-start;
      margin: .12em .14em 0 0;
      font-size: .5em;
      font-weight: 500
    }

    .course-price--none {
      color: var(--color-muted);
      font-weight: 500
    }

    .course-2s {
      color: var(--color-muted);
      font-variant-numeric: tabular-nums;
      margin-top: .3rem;
      font-size: .875rem;
      display: block
    }

    .price-2s-tag {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      letter-spacing: .06em;
      color: var(--color-gold-text, #c4a6ff);
      margin-right: .35rem;
      padding: .05rem .35rem;
      font-size: .6875rem;
      font-weight: 700;
      display: inline-block
    }

    .course-tag {
      font-family: var(--font-label);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--color-accent-text);
      margin-top: .35rem;
      font-size: .6875rem;
      font-weight: 600;
      display: block
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .course-tag {
      font-family: var(--font-body);
      letter-spacing: .04em;
      text-transform: none
    }

    .course-chips {
      flex-wrap: wrap;
      gap: .4rem;
      margin-top: 1rem;
      padding: 0;
      list-style: none;
      display: flex
    }

    .course-chips li {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      max-width: 100%;
      font-family: var(--font-label);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--color-gold-text, #c4a6ff);
      align-items: center;
      gap: .4rem;
      padding: .3rem .55rem;
      font-size: .75rem;
      font-weight: 600;
      line-height: 1.35;
      display: inline-flex
    }

    .course-chips li svg {
      color: var(--color-gold-text, #c4a6ff);
      flex: none
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .course-chips li {
      font-family: var(--font-body);
      letter-spacing: .02em;
      text-transform: none;
      font-size: .8125rem
    }

    .price-foot {
      color: var(--color-muted);
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: .75rem 2rem;
      margin-top: 1.75rem;
      font-size: .875rem;
      display: flex
    }

    .price-foot-meta {
      flex-wrap: wrap;
      gap: .25rem 1.25rem;
      display: flex
    }

    .price-key {
      color: var(--color-muted);
      max-width: 40rem;
      margin-top: 1rem;
      font-size: .8125rem
    }

    .pay-line {
      color: var(--color-muted);
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem 1.25rem;
      font-size: .875rem;
      display: flex
    }

    .pay-line b {
      font-family: var(--font-label);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--color-gold-text, #c4a6ff);
      font-size: .72rem;
      font-weight: 600
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .pay-line b {
      font-family: var(--font-body);
      letter-spacing: .04em;
      text-transform: none;
      font-size: .8125rem
    }

    .pay-line span {
      align-items: center;
      gap: .45rem;
      display: inline-flex
    }

    .pay-line span:before {
      content: "";
      background: var(--color-ornament, #e0218a);
      flex: none;
      width: .36rem;
      height: .36rem;
      transform: rotate(45deg)
    }

    .included {
      border-top: 1px solid var(--color-line);
      margin-top: 2rem;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .included {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem
      }
    }

    @media (width>=1024px) {
      .included {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 2rem
      }
    }

    .included li {
      border-bottom: 1px solid var(--color-line);
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: .75rem;
      padding: 1.15rem 0;
      display: grid
    }

    .included li>svg,
    .included li>.included-mark {
      width: 1.375rem;
      height: 1.375rem;
      color: var(--color-gold-text, #c4a6ff);
      margin-top: .1rem
    }

    .included .included-mark {
      color: var(--color-ornament, #e0218a);
      padding: .2rem
    }

    .included-text {
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.35
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .included-text {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5
    }

    .notes {
      gap: 0;
      max-width: 58rem;
      margin-top: 1.75rem;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=900px) {
      .notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem
      }
    }

    .notes li {
      border-top: 1px solid var(--color-line);
      color: var(--color-text);
      grid-template-columns: auto 1fr;
      gap: .75rem;
      padding: .9rem 0;
      display: grid
    }

    .notes li svg {
      width: .85rem;
      height: .85rem;
      color: var(--color-ornament, #e0218a);
      margin-top: .35em
    }

    .price-asks {
      gap: 1rem;
      margin-top: 2rem;
      display: grid
    }

    @media (width>=768px) {
      .price-asks {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))
      }
    }

    .price-ask-name {
      font-family: var(--font-display);
      margin-bottom: .6rem;
      font-size: 1.375rem
    }

    .price-ask-name a {
      color: inherit
    }

    .price-board-wrap {
      margin-top: 2rem
    }

    .price-board-scroll {
      overflow-x: auto
    }

    .price-board {
      border-collapse: collapse;
      font-variant-numeric: lining-nums tabular-nums;
      width: 100%
    }

    .price-board th,
    .price-board td {
      border-bottom: 1px solid var(--color-line);
      text-align: start;
      vertical-align: top;
      padding: .8rem .9rem
    }

    .price-board thead th {
      font-weight: 500
    }

    .price-board-line-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      display: block
    }

    .price-board-line-name a {
      color: inherit
    }

    .price-board-line-note,
    .price-board-corner-label {
      color: var(--color-muted);
      font-size: .8125rem;
      display: block
    }

    .price-board-unit {
      font-family: var(--font-display);
      color: var(--color-gold);
      display: block
    }

    .price-board-line-includes {
      color: var(--color-gold-text, #c4a6ff);
      gap: .25rem;
      margin-top: .4rem;
      padding: 0;
      font-size: .8125rem;
      list-style: none;
      display: grid
    }

    .price-board-line-includes li {
      align-items: center;
      gap: .35rem;
      display: flex
    }

    .price-board-dur {
      color: var(--color-muted);
      white-space: nowrap;
      font-weight: 400
    }

    .price-board-price {
      font-family: var(--font-display);
      color: var(--color-gold);
      font-size: 1.5rem;
      font-weight: 700
    }

    .price-board-cell--none,
    .price-board-price--none {
      color: var(--color-muted)
    }

    .price-board-2s {
      color: var(--color-muted);
      margin-top: .25rem;
      font-size: .8125rem;
      display: block
    }

    .price-extras {
      color: var(--color-muted);
      margin-top: 1.25rem;
      font-size: .9375rem
    }

    .price-extras .link {
      color: inherit
    }

    .phero {
      isolation: isolate;
      padding-block: clamp(1.5rem, 1rem + 2.4vw, 3.75rem) clamp(2.5rem, 1.6rem + 3.2vw, 5rem);
      position: relative;
      overflow: clip
    }

    .phero--compact {
      padding-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem)
    }

    .phero-grid {
      align-items: center;
      gap: 2rem;
      display: grid
    }

    @media (width>=900px) {
      .phero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem
      }
    }

    .phero-text {
      z-index: 2;
      align-content: center;
      gap: 1.1rem;
      min-width: 0;
      display: grid;
      position: relative
    }

    .phero-text h1 {
      margin: 0
    }

    :lang(en) .phero-text h1 {
      max-width: 19ch;
      font-size: clamp(2.125rem, 1.6rem + 2.5vw, 3.875rem)
    }

    .phero-text .lead {
      max-width: 36rem;
      margin: .15rem 0 0
    }

    .crumbs {
      font-size: var(--step--1, .8125rem);
      color: var(--color-muted);
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      display: flex
    }

    .crumbs a {
      color: inherit;
      text-decoration: none
    }

    .crumbs a:hover {
      color: var(--color-text);
      text-decoration: underline;
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      text-decoration-color: var(--color-ornament, #e0218a);
      text-underline-offset: .2em
    }

    .crumbs [aria-current] {
      color: var(--color-text)
    }

    .phero-art {
      aspect-ratio: 1;
      pointer-events: none;
      justify-self: center;
      width: min(100%, 20rem);
      position: relative
    }

    .phero-ring {
      width: 100%;
      height: 100%;
      color: var(--color-ornament, #e0218a);
      position: absolute;
      inset: 0
    }

    .phero-art .phero-peony {
      z-index: 2;
      width: 54%;
      height: auto;
      position: absolute;
      top: -5%;
      left: -8%
    }

    .phero-seal {
      width: auto;
      height: 27%;
      color: var(--color-accent);
      z-index: 3;
      position: absolute;
      bottom: 21%;
      right: 21%
    }

    .phero-art .phero-tate {
      z-index: 3;
      font-size: 1rem;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%)
    }

    @media (width<=899px) {
      .phero--art .phero-art {
        z-index: 0;
        top: .25rem;
        right: calc(-.5 * var(--gutter, 1rem));
        justify-self: auto;
        width: 6.25rem;
        position: absolute
      }

      .phero--art .phero-seal,
      .phero--art .phero-tate {
        display: none
      }

      .phero--art .crumbs,
      .phero--art .phero-text>.label {
        padding-right: 6.25rem
      }
    }

    .phero-visual {
      aspect-ratio: 1;
      justify-self: center;
      width: min(100%, 28rem);
      position: relative
    }

    .phero-visual .phero-ring {
      width: 112%;
      height: 112%;
      inset: -6%
    }

    .phero-window {
      z-index: 2;
      width: 62%;
      margin: 0;
      position: absolute;
      top: 8.65%;
      left: 19%;
      box-shadow: 0 1.25rem 2.5rem -1.5rem #160a2473
    }

    .phero-window img {
      aspect-ratio: 3/4
    }

    .phero-window--wide {
      width: 82.7%;
      top: 19%;
      left: 8.65%
    }

    .phero-window--wide img {
      aspect-ratio: 4/3
    }

    .phero-visual .phero-peony {
      z-index: 4;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      width: 41%;
      height: auto;
      position: absolute;
      top: -5%;
      left: -11%
    }

    .phero-visual:has(.phero-window--wide) .phero-peony {
      width: 37%;
      top: 2%;
      left: -11%
    }

    .phero-visual .phero-tate {
      z-index: 3;
      position: absolute;
      top: 37%;
      left: 8.5%
    }

    @media (width<=899px) {
      .phero-visual {
        width: min(86%, 22rem);
        margin-block: 1.25rem .5rem
      }

      .phero-visual .phero-tate {
        display: none
      }

      .phero--mark .phero-visual {
        z-index: 0;
        top: .5rem;
        right: calc(.25 * var(--gutter, 1rem));
        justify-self: auto;
        width: 6.75rem;
        margin: 0;
        position: absolute
      }

      .phero--mark .phero-window {
        --mat: 4px;
        box-shadow: 0 .5rem 1rem -.6rem #160a2473
      }

      .phero--mark .crumbs,
      .phero--mark .phero-text>.label {
        padding-right: 7.25rem
      }
    }

    .phero-logo {
      aspect-ratio: 1;
      width: min(100%, 22rem);
      box-shadow: 0 0 0 1px var(--gold-leaf-58), 0 1.25rem 2.5rem -1.5rem #160a2459, 0 0 3.5rem .25rem var(--wash-pink-70);
      border-radius: 50%;
      justify-self: center;
      overflow: hidden
    }

    .phero-logo img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      display: block
    }

    @media (width<=899px) {
      .phero--logo .phero-logo {
        z-index: 0;
        top: .5rem;
        right: calc(.25 * var(--gutter, 1rem));
        width: 5.5rem;
        box-shadow: 0 0 0 1px var(--gold-leaf-58), 0 .5rem 1rem -.6rem #160a2466;
        justify-self: auto;
        margin: 0;
        position: absolute
      }

      .phero--logo .crumbs,
      .phero--logo .phero-text>.label {
        padding-right: 6.5rem
      }
    }

    .svc-facts-wrap {
      margin-top: calc(-1*clamp(.75rem, .4rem + 1.4vw, 2rem))
    }

    .svc-facts {
      border-top: 1px solid var(--color-line);
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .svc-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem
      }
    }

    @media (width>=1024px) {
      .svc-facts[data-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 0
      }
    }

    .svc-facts li {
      border-bottom: 1px solid var(--color-line);
      align-items: center;
      gap: .8rem;
      padding: 1rem 0;
      font-weight: 500;
      line-height: 1.35;
      display: flex
    }

    .svc-facts li svg {
      color: var(--color-gold-text, #c4a6ff);
      flex: none
    }

    .svc-fact-gap {
      flex: none;
      width: 22px
    }

    @media (width>=1024px) {
      .svc-facts[data-count="4"] li {
        border-bottom: 0;
        padding: 1.15rem 1.25rem
      }

      .svc-facts[data-count="4"] li:first-child {
        padding-left: 0
      }

      .svc-facts[data-count="4"] li+li {
        border-left: 1px solid var(--color-line)
      }

      .svc-facts[data-count="4"] {
        border-bottom: 1px solid var(--color-line)
      }
    }

    .steps {
      gap: 1.75rem 2.75rem;
      margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=768px) {
      .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media (width>=1100px) {
      .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .steps[data-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }
    }

    .steps>li {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 1rem;
      display: grid
    }

    .steps-no {
      background: var(--color-accent);
      width: 2.75rem;
      height: 2.75rem;
      color: var(--color-accent-contrast);
      font-family: var(--font-tate, serif);
      border-radius: 3px 4px 3px 5px;
      place-items: center;
      font-size: 1.25rem;
      line-height: 1;
      display: grid
    }

    .steps-title {
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.25;
      display: block
    }

    .steps>li p {
      color: var(--color-muted);
      margin: .35rem 0 0
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .steps-title {
      font-size: 1.125rem;
      line-height: 1.4
    }

    .price-band-split {
      gap: 2rem 4rem;
      display: grid
    }

    @media (width>=1024px) {
      .price-band-split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start
      }
    }

    .price-band-intro {
      align-content: start;
      gap: 1.5rem;
      display: grid
    }

    .price-band-intro .link {
      color: var(--color-text)
    }

    @media (width>=1024px) {
      .price-band-board.courses {
        margin-top: 0
      }
    }

    .svc-room {
      align-items: center;
      gap: 2rem 4rem;
      display: grid
    }

    @media (width>=900px) {
      .svc-room {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
      }
    }

    .svc-room-text {
      align-content: center;
      gap: 1.25rem;
      display: grid
    }

    .svc-room-blurb {
      font-family: var(--font-display);
      font-size: var(--step-1, 1.25rem);
      color: var(--color-text);
      max-width: 30rem;
      margin: 0;
      line-height: 1.45
    }

    .qa {
      border-top: 1px solid var(--color-line);
      margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem)
    }

    @media (width>=900px) {
      .section>.wrap:not(.faq-group)>.qa {
        border-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        column-gap: 3.5rem;
        display: grid
      }

      .section>.wrap:not(.faq-group)>.qa>details:nth-child(-n+2) {
        border-top: 1px solid var(--color-line)
      }
    }

    .qa details {
      border-bottom: 1px solid var(--color-line)
    }

    .qa summary {
      cursor: pointer;
      min-height: 2.75rem;
      font-family: var(--font-display);
      color: var(--color-text);
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      padding: 1.05rem 0;
      font-size: 1.1875rem;
      font-weight: 500;
      line-height: 1.32;
      list-style: none;
      display: flex
    }

    .qa summary::-webkit-details-marker {
      display: none
    }

    .qa summary:after {
      content: "";
      border-right: 1.5px solid var(--color-gold);
      border-bottom: 1.5px solid var(--color-gold);
      width: .6rem;
      height: .6rem;
      transition: transform .2s var(--ease-out, ease-out);
      flex: none;
      margin-right: .2rem;
      transform: translateY(-.2rem)rotate(45deg)
    }

    .qa details[open]>summary:after {
      transform: translateY(.1rem)rotate(225deg)
    }

    .qa summary:hover {
      color: var(--color-accent-text)
    }

    .qa details>p {
      max-width: 36rem;
      color: var(--color-muted);
      margin: 0;
      padding: 0 0 1.25rem
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .qa summary {
      font-size: 1.0625rem;
      line-height: 1.5
    }

    :lang(th) .qa details>p {
      line-height: 1.75
    }

    .alcove {
      position: relative
    }

    .alcove-base {
      color: var(--color-ornament, #e0218a);
      justify-content: center;
      align-items: center;
      margin-top: 1.5rem;
      display: flex;
      position: relative
    }

    .alcove-base:before {
      content: "";
      background: var(--color-gold);
      opacity: .55;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0
    }

    .alcove-base svg {
      box-sizing: content-box;
      background: var(--color-bg);
      width: 1rem;
      height: 1rem;
      padding: 0 .6rem;
      position: relative
    }

    .alcove-note {
      max-width: 40rem;
      color: var(--color-muted);
      flex-wrap: wrap;
      align-items: baseline;
      gap: .25rem .6rem;
      margin: 1.25rem 0 0;
      font-size: .9375rem;
      display: flex
    }

    .alcove-note b {
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: 1.0625rem;
      font-weight: 500
    }

    .room-facts {
      border-top: 1px solid var(--color-line);
      margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .room-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem
      }
    }

    @media (width>=1024px) {
      .room-facts[data-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 2rem
      }
    }

    .room-facts li {
      border-bottom: 1px solid var(--color-line);
      grid-template-columns: auto minmax(0, 1fr);
      align-content: start;
      gap: .3rem .85rem;
      padding: 1.25rem 0 1.4rem;
      display: grid
    }

    .room-facts li>svg {
      color: var(--color-gold-text, #c4a6ff);
      grid-row: span 2;
      margin-top: .1rem
    }

    .room-facts .room-facts-mark {
      box-sizing: border-box;
      width: 1.5rem;
      height: 1.5rem;
      color: var(--color-ornament, #e0218a);
      padding: .3rem
    }

    .room-facts b {
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: 1.1875rem;
      font-weight: 500;
      line-height: 1.3
    }

    .room-facts span {
      color: var(--color-muted);
      font-size: .9375rem
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .room-facts b {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.45
    }

    .room-types {
      gap: 3rem;
      margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
      display: grid
    }

    @media (width>=900px) {
      .room-types[data-count="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5rem
      }
    }

    .room-type {
      border-top: 1px solid var(--color-gold);
      align-content: start;
      gap: .9rem;
      padding-top: 1.5rem;
      display: grid
    }

    .room-type-no {
      border: 1px solid var(--color-gold);
      place-items: center;
      width: 2rem;
      height: 2rem;
      display: grid
    }

    @supports (color:color-mix(in lab, red, red)) {
      .room-type-no {
        border: 1px solid color-mix(in oklab, var(--color-gold) 70%, transparent)
      }
    }

    .room-type-no {
      font-family: var(--font-tate, serif);
      color: var(--color-gold-text, #c4a6ff);
      border-radius: 2px 3px;
      font-size: 1rem;
      line-height: 1
    }

    .room-type-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      margin: 0;
      line-height: 1.2
    }

    .room-type-blurb {
      color: var(--color-muted);
      max-width: 34rem;
      margin: 0
    }

    .room-type-facts {
      flex-wrap: wrap;
      gap: .5rem 1.4rem;
      margin: .35rem 0 0;
      padding: 0;
      font-size: .9375rem;
      font-weight: 500;
      list-style: none;
      display: flex
    }

    .room-type-facts li {
      align-items: center;
      gap: .45rem;
      display: inline-flex
    }

    .room-type-facts svg {
      color: var(--color-gold-text, #c4a6ff);
      flex: none;
      width: 18px;
      height: 18px
    }

    .room-type-facts .brand-sakura {
      width: .8rem;
      height: .8rem;
      color: var(--color-ornament, #e0218a)
    }

    .findus-grid {
      gap: 2rem 3rem;
      margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
      display: grid
    }

    .findus-facts {
      align-content: start;
      gap: 2rem 3rem;
      display: grid
    }

    @media (width>=900px) {
      .findus-facts {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
      }
    }

    .addr-block .label,
    .spot .label {
      align-items: center;
      gap: .5rem;
      margin: 0 0 .75rem;
      display: inline-flex
    }

    .addr-block .label svg {
      color: var(--color-accent)
    }

    .addr {
      font-style: normal;
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
      line-height: 1.3;
      display: grid
    }

    .addr-name {
      color: var(--color-muted);
      font-size: .75em;
      font-family: var(--font-body);
      letter-spacing: .01em;
      margin-bottom: .2rem;
      font-weight: 600
    }

    .addr small {
      font-family: var(--font-body);
      color: var(--color-muted);
      margin-top: .6rem;
      font-size: .9375rem;
      line-height: 1.5
    }

    .addr-th {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      background: var(--color-surface);
      gap: .35rem;
      margin: 1.1rem 0 0;
      padding: .9rem 1rem 1rem;
      display: grid
    }

    .addr-th-tag {
      letter-spacing: .04em;
      color: var(--color-gold-text, #c4a6ff);
      font-size: .75rem;
      font-weight: 600
    }

    .addr-th>span[lang=th] {
      color: var(--color-text);
      font-family: system-ui, -apple-system, Thonburi, Leelawadee UI, Noto Sans Thai, sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.6
    }

    .addr-note {
      color: var(--color-muted);
      max-width: 30rem;
      margin: 1rem 0 0;
      font-size: .9375rem
    }

    .spot-list {
      border-top: 1px solid var(--color-line);
      margin: 0;
      padding: 0;
      list-style: none
    }

    .spot-list li {
      border-bottom: 1px solid var(--color-line);
      grid-template-columns: auto minmax(0, 1fr);
      gap: .65rem;
      padding: .6rem 0;
      font-size: .9375rem;
      display: grid
    }

    .spot-list svg {
      width: .8rem;
      height: .8rem;
      color: var(--color-ornament, #e0218a);
      margin-top: .35em
    }

    .transit {
      margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem)
    }

    .transit-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      margin: 0;
      line-height: 1.2
    }

    .transit-list {
      border-top: 1px solid var(--color-line);
      margin: 1.25rem 0 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=900px) {
      .transit-list[data-count="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .transit-list[data-count="2"],
      .transit-list[data-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    .transit-list li {
      border-bottom: 1px solid var(--color-line);
      padding: 1.2rem 0 1.35rem
    }

    @media (width>=900px) {
      .transit-list li {
        border-bottom: 0;
        border-left: 1px solid var(--color-line);
        padding-inline: 1.5rem
      }

      .transit-list li:first-child {
        border-left: 0;
        padding-left: 0
      }
    }

    .transit-from {
      font-family: var(--font-display);
      color: var(--color-text);
      align-items: center;
      gap: .6rem;
      font-size: 1.1875rem;
      font-weight: 500;
      line-height: 1.3;
      display: flex
    }

    .transit-from svg {
      flex: none
    }

    .transit-list p {
      color: var(--color-muted);
      margin: .5rem 0 0
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .transit-from {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.45
    }

    .live-split {
      gap: 3rem 4rem;
      display: grid
    }

    @media (width>=900px) {
      .live-split {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start
      }
    }

    .map-lead {
      margin-top: .9rem
    }

    .findus-map,
    .live-hours .hours-table {
      margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem)
    }

    .hours-table {
      gap: 1.25rem;
      max-width: 34rem;
      display: grid
    }

    .hours-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      margin: 0
    }

    .hours-summary {
      gap: .3rem;
      margin: 0;
      display: grid
    }

    .hours-summary .range {
      font-family: var(--font-display);
      color: var(--color-text);
      font-variant-numeric: lining-nums tabular-nums;
      font-size: clamp(1.5rem, 1.3rem + .9vw, 2.125rem);
      font-weight: 500;
      line-height: 1.15
    }

    .hours-summary .sub,
    .hours-last {
      color: var(--color-muted);
      font-size: .9375rem
    }

    .hours-week {
      border-collapse: collapse;
      width: 100%;
      font-size: .9375rem
    }

    .hours-week th,
    .hours-week td {
      border-bottom: 1px solid var(--color-line);
      text-align: start;
      color: var(--color-muted);
      vertical-align: baseline;
      padding: .6rem 0;
      font-weight: 400
    }

    .hours-week tr:first-child>* {
      border-top: 1px solid var(--color-line)
    }

    .hours-week td {
      text-align: end;
      font-variant-numeric: tabular-nums
    }

    .hours-week tr[data-highlight]>* {
      color: var(--color-text);
      font-weight: 600
    }

    .hours-week .tag {
      letter-spacing: .02em;
      color: var(--color-accent-text);
      align-items: center;
      gap: .4rem;
      margin-left: .7rem;
      font-size: .75rem;
      font-weight: 600;
      display: inline-flex
    }

    .hours-week .tag:before {
      content: "";
      background: var(--color-accent);
      border-radius: 50%;
      width: .45rem;
      height: .45rem
    }

    .hours-special-head {
      font-family: var(--font-label);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--color-gold-text, #c4a6ff);
      margin: .5rem 0 0;
      font-size: .75rem;
      font-weight: 600
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .hours-special-head {
      font-family: var(--font-body);
      letter-spacing: .04em;
      text-transform: none;
      font-size: .8125rem
    }

    .hours-note {
      color: var(--color-muted);
      font-size: .8125rem;
      display: block
    }

    .faq-index {
      margin-top: .5rem
    }

    .faq-index ul {
      flex-wrap: wrap;
      gap: .5rem;
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex
    }

    .faq-index a {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      min-height: 2.75rem;
      color: var(--color-text);
      background: var(--color-bg);
      align-items: center;
      gap: .55rem;
      padding: .4rem .8rem;
      font-size: .9375rem;
      font-weight: 500;
      text-decoration: none;
      display: inline-flex
    }

    @supports (color:color-mix(in lab, red, red)) {
      .faq-index a {
        background: color-mix(in oklab, var(--color-bg) 60%, var(--color-surface))
      }
    }

    .faq-index a:hover {
      border-color: var(--color-text)
    }

    .faq-index-no {
      font-family: var(--font-tate, serif);
      color: var(--color-accent-text);
      font-size: .9375rem
    }

    .faq-groups {
      gap: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);
      display: grid
    }

    .faq-group {
      gap: 1rem 3.5rem;
      display: grid
    }

    @media (width>=900px) {
      .faq-group {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        align-items: start
      }
    }

    .faq-group-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      align-items: center;
      gap: .85rem;
      margin: 0;
      line-height: 1.22;
      display: flex
    }

    @media (width>=900px) {
      .faq-group-title {
        top: calc(var(--nav-h, 4.75rem) + 1.5rem);
        padding-top: .6rem;
        position: sticky
      }
    }

    .faq-group-no {
      background: var(--color-accent);
      width: 2.25rem;
      height: 2.25rem;
      color: var(--color-accent-contrast);
      font-family: var(--font-tate, serif);
      border-radius: 3px 4px 3px 5px;
      flex: none;
      place-items: center;
      font-size: 1.0625rem;
      line-height: 1;
      display: grid
    }

    .faq-group .qa {
      margin-top: 0
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .faq-group-title {
      line-height: 1.35
    }

    .lineup-notice:not(:has(.notice-banner)) {
      display: none
    }

    .lineup-notice {
      margin-bottom: 1.5rem
    }

    .lineup-today [data-list] {
      gap: 2.75rem 1.25rem !important;
      margin-top: 2.25rem !important
    }

    @media (width>=1024px) {
      .lineup-today [data-list] {
        gap: 3rem 2rem !important
      }
    }

    @media (width>=1280px) {
      .lineup-today [data-list] {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important
      }
    }

    .ask-grid {
      align-items: center;
      gap: 1.75rem 4rem;
      display: grid
    }

    @media (width>=900px) {
      .ask-grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr)
      }
    }

    .ask-grid .lead {
      margin-top: 1rem
    }

    .ask-actions {
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
      display: flex
    }

    .ask-actions .btn {
      min-height: 3.5rem;
      padding-inline: 1.75rem;
      font-size: 1.0625rem
    }

    @media (width>=900px) {
      .ask-actions {
        justify-content: flex-end
      }
    }

    .lineup-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.75rem 1.25rem;
      margin: 2.25rem 0 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .lineup-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }
    }

    @media (width>=1024px) {
      .lineup-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3rem 2rem
      }
    }

    @media (width>=1280px) {
      .lineup-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr))
      }
    }

    .lineup-gallery {
      columns: 2;
      column-gap: 1.25rem;
      margin: 2.25rem 0 0;
      padding: 0;
      list-style: none
    }

    @media (width>=640px) {
      .lineup-gallery {
        columns: 3
      }
    }

    @media (width>=1024px) {
      .lineup-gallery {
        columns: 4;
        column-gap: 2rem
      }
    }

    .lineup-gallery>li {
      break-inside: avoid;
      margin-bottom: 2rem
    }

    .lineup-gallery>.people-card picture img {
      aspect-ratio: auto;
      height: auto
    }

    .lineup-empty {
      margin-top: 2rem
    }

    .lineup-meta {
      max-width: var(--col-text, 40rem);
      color: var(--color-muted);
      gap: .25rem;
      margin-top: 2rem;
      font-size: .875rem;
      display: grid
    }

    .lineup-meta p {
      margin: 0
    }

    .lineup-how {
      border-top: 1px solid var(--color-line);
      margin-top: clamp(3rem, 2.4rem + 2.4vw, 4.75rem);
      padding-top: clamp(2rem, 1.6rem + 1.6vw, 3rem)
    }

    .lineup-how-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      margin: 0
    }

    .lineup-prose {
      margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem)
    }

    .empty-panel {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      background: var(--color-bg);
      justify-items: start;
      gap: .6rem;
      max-width: 40rem;
      padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
      display: grid
    }

    @supports (color:color-mix(in lab, red, red)) {
      .empty-panel {
        background: color-mix(in oklab, var(--color-bg) 55%, var(--color-surface))
      }
    }

    .lacquer .empty-panel {
      background: var(--color-bg)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .lacquer .empty-panel {
        background: color-mix(in oklab, var(--color-bg) 82%, black)
      }
    }

    .empty-panel-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      color: var(--color-text);
      margin: 0;
      line-height: 1.2
    }

    .empty-panel-text {
      color: var(--color-muted);
      margin: 0
    }

    .empty-panel-actions {
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: .75rem;
      display: flex
    }

    .notice-banner {
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      background: var(--color-surface);
      color: var(--color-text);
      align-items: baseline;
      gap: .75rem;
      margin: 0;
      padding: .9rem 1.1rem;
      font-weight: 500;
      display: flex
    }

    .notice-banner .dot {
      background: var(--color-accent);
      border-radius: 50%;
      flex: none;
      width: .55rem;
      height: .55rem;
      transform: translateY(-.1em)
    }

    .notice-until {
      color: var(--color-muted);
      margin-top: .15rem;
      font-size: .875rem;
      font-weight: 400;
      display: block
    }

    .letter {
      background: var(--color-surface);
      border: 1px solid var(--color-gold);
      padding: clamp(1.75rem, 1rem + 3.2vw, 4.25rem) clamp(1.25rem, .5rem + 3.6vw, 4.25rem);
      position: relative
    }

    @supports (color:color-mix(in lab, red, red)) {
      .letter {
        border: 1px solid color-mix(in oklab, var(--color-gold) 72%, transparent)
      }
    }

    .letter {
      outline: 1px solid var(--color-gold)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .letter {
        outline: 1px solid color-mix(in oklab, var(--color-gold) 38%, transparent)
      }
    }

    .letter {
      outline-offset: -9px
    }

    .letter-tate {
      display: none;
      position: absolute;
      top: clamp(1.75rem, 1rem + 3.2vw, 4.25rem);
      left: calc(-1*clamp(2.5rem, 4vw, 4.5rem))
    }

    @media (width>=1280px) {
      .letter-tate {
        display: block
      }
    }

    .cta-copy {
      align-content: start;
      justify-items: start;
      gap: 1rem;
      display: grid
    }

    .cta-title,
    .cta-copy .lead {
      margin: 0
    }

    .cta-walkin {
      border-top: 1px solid var(--color-line);
      color: var(--color-muted);
      max-width: 30rem;
      margin: 0;
      padding-top: 1rem;
      font-size: .9375rem
    }

    .letter-seal {
      width: auto;
      height: clamp(2.75rem, 2.3rem + 1.3vw, 3.6rem);
      margin-top: .5rem
    }

    .letter .cta-walkin {
      align-self: stretch;
      max-width: none
    }

    .letter .contact-qr {
      border-top: 1px solid var(--color-line);
      padding-top: 1.25rem
    }

    .letter .payment-strip {
      border-top: 1px dotted var(--color-gold-text);
      padding-top: 1rem
    }

    @supports (color:color-mix(in lab, red, red)) {
      .letter .payment-strip {
        border-top: 1px dotted color-mix(in oklab, var(--color-gold-text) 45%, transparent)
      }
    }

    .closing-grid {
      gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
      display: grid
    }

    @media (width>=900px) {
      .closing-grid:has(.invite) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem)
      }
    }

    .invite {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 1rem clamp(1.25rem, .8rem + 1.5vw, 2rem);
      display: grid
    }

    .invite-window {
      --mat: 5px;
      --bloom: .9375rem;
      width: clamp(5rem, 4rem + 3vw, 7.25rem)
    }

    .invite-glass {
      aspect-ratio: 3/4;
      background-color: var(--lacquer, #160a24);
      background-image: radial-gradient(90% 70% at 20% 10%, #2a0d3de6 0%, #2a0d3d00 70%), url(lacquer-flecks.C18Zw2c1.svg);
      background-size: auto, 130px 130px;
      place-items: center;
      display: grid
    }

    .invite-tate {
      color: var(--gold-on-dark, #d7c4ff);
      letter-spacing: .32em;
      font-size: clamp(.875rem, .75rem + .4vw, 1.0625rem)
    }

    .invite-copy {
      justify-items: start;
      gap: .85rem;
      min-width: 0;
      display: grid
    }

    .invite-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.625rem);
      text-wrap: balance;
      margin: 0;
      line-height: 1.2
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .invite-title {
      line-height: 1.35
    }

    .invite-note {
      color: var(--color-muted);
      margin: 0;
      font-size: .875rem
    }

    .invite-btn {
      margin-top: .25rem
    }

    .xindex-label {
      margin: 0 0 .75rem
    }

    .xindex-list {
      border-top: 1px solid var(--color-line);
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=900px) {
      .closing-grid:not(:has(.invite)) .xindex-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(2rem, 1rem + 3vw, 4rem)
      }
    }

    .xindex-link {
      border-bottom: 1px solid var(--color-line);
      min-height: 3.5rem;
      color: var(--color-text);
      align-items: baseline;
      gap: .9rem;
      padding: .95rem .1rem .95rem 0;
      text-decoration: none;
      display: flex
    }

    .xindex-no {
      border: 1px solid var(--color-gold);
      flex: none;
      align-self: center;
      place-items: center;
      width: 1.75rem;
      height: 1.75rem;
      display: grid
    }

    @supports (color:color-mix(in lab, red, red)) {
      .xindex-no {
        border: 1px solid color-mix(in oklab, var(--color-gold) 70%, transparent)
      }
    }

    .xindex-no {
      font-family: var(--font-tate, serif);
      color: var(--color-gold-text, #c4a6ff);
      border-radius: 2px 3px;
      font-size: .9375rem;
      line-height: 1
    }

    .xindex-link:hover .xindex-no {
      border-color: var(--color-accent);
      color: var(--color-accent-text)
    }

    .xindex-name {
      min-width: 0;
      font-family: var(--font-display);
      font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.4375rem);
      font-weight: 500;
      line-height: 1.25;
      transition: color .16s
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .xindex-name {
      font-size: 1.1875rem;
      line-height: 1.4
    }

    .xindex-leader {
      border-bottom: 1px dotted var(--color-gold-text, #c4a6ff);
      flex: 1;
      min-width: 1.5rem
    }

    @supports (color:color-mix(in lab, red, red)) {
      .xindex-leader {
        border-bottom: 1px dotted color-mix(in oklab, var(--color-gold-text, #c4a6ff) 55%, transparent)
      }
    }

    .xindex-leader {
      transform: translateY(-.3em)
    }

    .xindex-link .arrow {
      color: var(--color-gold-text, #c4a6ff);
      align-self: center
    }

    .xindex-link:hover .xindex-name {
      color: var(--color-accent-text)
    }

    .xindex-link:hover .arrow {
      transform: translate(4px)
    }

    .google-cite {
      max-width: 46rem;
      color: var(--color-muted);
      align-items: flex-start;
      gap: .5rem;
      margin: .9rem 0 0;
      font-size: .9375rem;
      display: flex
    }

    .google-cite svg {
      flex: none;
      margin-top: .18em
    }

    .prose-venue {
      max-width: var(--col-text, 40rem)
    }

    .prose-after {
      margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem)
    }

    .prose-venue :where(h2) {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-2, 1.5rem);
      color: var(--color-text);
      margin: 2.25rem 0 .75rem;
      line-height: 1.22
    }

    .prose-venue :where(h2:first-child) {
      margin-top: 0
    }

    .prose-venue :where(h3) {
      font-family: var(--font-display);
      margin: 1.75rem 0 .5rem;
      font-size: 1.25rem;
      font-weight: 500
    }

    .prose-venue :where(p, ul, ol) {
      color: var(--color-text);
      margin: 0 0 1em
    }

    .prose-venue :where(ul) {
      padding-left: 1.1rem;
      list-style: outside
    }

    .prose-venue :where() {
      color: var(--color-ornament, #e0218a)
    }

    .prose-venue :where(a) {
      color: inherit;
      text-decoration: underline 1px;
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      text-decoration-color: var(--color-ornament, #e0218a);
      text-underline-offset: .22em
    }

    .prose-venue :where(a:hover) {
      -webkit-text-decoration-color: var(--color-accent);
      -webkit-text-decoration-color: var(--color-accent);
      text-decoration-color: var(--color-accent);
      color: var(--color-accent-text)
    }

    :lang(th) .prose-venue :where(p, li) {
      line-height: 1.75
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .prose-venue :where(h2, h3) {
      line-height: 1.4
    }

    .lost {
      isolation: isolate;
      padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 6.5rem);
      position: relative;
      overflow: clip
    }

    .lost:before {
      content: "";
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(40% 44% at 52% 40%, var(--wash-pink-70, #e0218ab3) 0%, transparent 70%), radial-gradient(34% 40% at 64% 70%, var(--wash-aqua-75, #5b2bffbf) 0%, transparent 72%);
      filter: blur(8px);
      opacity: .9;
      position: absolute;
      inset: -10% 35% -10% -20%
    }

    @media (width<=899px) {
      .lost:before {
        inset: -10% -30% 45%
      }
    }

    .lost-grid {
      align-items: center;
      gap: 2.5rem;
      display: grid
    }

    @media (width>=900px) {
      .lost-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 4rem
      }
    }

    .lost-art {
      aspect-ratio: 1;
      pointer-events: none;
      justify-self: center;
      width: min(76%, 22rem);
      position: relative
    }

    .lost-ring {
      width: 100%;
      height: 100%;
      color: var(--color-ornament, #e0218a);
      z-index: 2;
      position: absolute;
      inset: 0
    }

    .lost-water {
      aspect-ratio: 4/3;
      z-index: 1;
      isolation: isolate;
      width: 52%;
      position: absolute;
      top: 30.5%;
      left: 24%;
      overflow: hidden
    }

    .lost-water img {
      object-fit: cover;
      object-position: 52% 50%;
      filter: grayscale()contrast(1.75)brightness(1.12);
      width: 100%;
      height: 100%;
      display: block
    }

    .lost-water:before {
      content: "";
      z-index: 1;
      background: var(--gold-on-dark, #d7c4ff);
      mix-blend-mode: multiply;
      position: absolute;
      inset: 0
    }

    .lost-water:after {
      content: "";
      z-index: 2;
      background: var(--lacquer, #160a24);
      mix-blend-mode: lighten;
      position: absolute;
      inset: 0
    }

    .lost-seal {
      width: auto;
      height: 21%;
      color: var(--color-accent);
      z-index: 3;
      position: absolute;
      bottom: 17%;
      right: 15%
    }

    .lost-tate {
      z-index: 3;
      font-size: 1rem;
      position: absolute;
      top: 36%;
      left: 12.5%
    }

    .lost-text {
      justify-items: start;
      gap: 1.1rem;
      display: grid
    }

    .lost-text h1 {
      margin: 0
    }

    :lang(en) .lost-text h1 {
      max-width: 14ch
    }

    .lost-text .lead {
      max-width: 32rem;
      margin: 0
    }

    .lost-links {
      flex-wrap: wrap;
      gap: .75rem 1.75rem;
      margin: .75rem 0 0;
      padding: 0;
      list-style: none;
      display: flex
    }

    .lost-links .link {
      min-height: 2.75rem
    }

    .lost-cta {
      margin: .5rem 0 0
    }

    .lost-langs {
      flex-wrap: wrap;
      align-items: center;
      gap: .25rem 1rem;
      margin: 1rem 0 0;
      font-size: .9375rem;
      display: flex
    }

    .lost-langs-label {
      color: var(--color-muted);
      font-size: .875rem
    }

    .lost-langs a {
      min-height: 2.75rem;
      color: var(--color-text);
      text-decoration: underline;
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      -webkit-text-decoration-color: var(--color-ornament, #e0218a);
      text-decoration-color: var(--color-ornament, #e0218a);
      text-underline-offset: .22em;
      align-items: center;
      display: inline-flex
    }

    .lm,
    .venue-map-canvas,
    .locator-frame {
      --lm-paper: #140c1d;
      --lm-block: #1e1430;
      --lm-thin: #241838;
      --lm-minor: #3a2c52;
      --lm-mid: #4a3866;
      --lm-major: #5c4880;
      --lm-ink: #f3eefa;
      --lm-ink-2: #b8abc9;
      --lm-pin: #c8102e
    }

    .lm {
      background: var(--lm-paper);
      width: 100%;
      height: 100%;
      display: block
    }

    .lm-frame {
      width: 100%;
      height: 100%;
      display: block
    }

    .lm-block {
      fill: var(--lm-block)
    }

    .lm-road {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .lm-thin {
      stroke: var(--lm-thin);
      stroke-width: 1.4px
    }

    .lm-minor {
      stroke: var(--lm-minor);
      stroke-width: 3.4px
    }

    .lm-mid {
      stroke: var(--lm-mid);
      stroke-width: 5px
    }

    .lm-major {
      stroke: var(--lm-major);
      stroke-width: 8.5px
    }

    .lm-rail {
      fill: none;
      stroke-width: 2px;
      stroke-linecap: round
    }

    .lm-bts {
      stroke: #6cbe45
    }

    .lm-mrt {
      stroke: #1e4fa1;
      stroke-dasharray: 6 5
    }

    .lm-labels text {
      font-family: var(--font-body);
      paint-order: stroke;
      stroke: var(--lm-paper);
      stroke-width: 4.5px;
      stroke-linejoin: round
    }

    .lm-street {
      fill: var(--lm-ink-2);
      letter-spacing: .06em;
      text-anchor: middle;
      text-transform: uppercase;
      font-size: 12.5px;
      font-weight: 500
    }

    .lm-place {
      fill: var(--lm-ink-2);
      text-anchor: middle;
      font-size: 12px;
      font-weight: 500
    }

    .lm-stop circle {
      stroke: var(--lm-paper);
      stroke-width: 2.5px
    }

    .lm-stop.is-bts circle {
      fill: #6cbe45
    }

    .lm-stop.is-mrt circle {
      fill: #1e4fa1
    }

    .lm-stop text {
      fill: var(--lm-ink);
      font-size: 13px;
      font-weight: 600
    }

    .lm-pin-ring {
      fill: none;
      stroke: var(--lm-pin);
      stroke-width: 2px;
      opacity: .7
    }

    .lm-pin-dot {
      fill: var(--lm-pin);
      stroke: var(--lm-paper);
      stroke-width: 2.5px
    }

    .lm-pin text {
      fill: var(--lm-ink);
      letter-spacing: .04em;
      text-anchor: middle;
      stroke-width: 5.5px;
      font-size: 16px;
      font-weight: 700
    }

    .lm-mini .lm-minor {
      stroke-width: 3px
    }

    .lm-mini .lm-mid {
      stroke-width: 4.6px
    }

    .lm-mini .lm-major {
      stroke-width: 8px
    }

    .lm-mini .lm-street,
    .lm-mini .lm-stop text {
      font-size: 14px
    }

    .venue-map {
      margin: 0
    }

    .venue-map-canvas {
      aspect-ratio: 4/3;
      border: 1px solid var(--color-gold);
      background: var(--color-bg);
      padding: 10px;
      transition: border-color .16s;
      display: block;
      position: relative;
      overflow: hidden
    }

    .lacquer .venue-map-canvas {
      border-color: var(--color-ornament, #e0218a)
    }

    .venue-map-canvas:hover {
      border-color: var(--color-text)
    }

    .venue-map-canvas:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px
    }

    @media (width>=768px) {
      .venue-map--full .venue-map-canvas {
        aspect-ratio: 16/9
      }
    }

    .venue-map-cue {
      border: 1px solid var(--lm-minor);
      border-radius: var(--radius);
      background: var(--lm-paper);
      color: var(--lm-ink);
      align-items: center;
      gap: .5rem;
      padding: .45rem .7rem;
      font-size: .8125rem;
      font-weight: 600;
      line-height: 1;
      display: inline-flex;
      position: absolute;
      bottom: 1.1rem;
      right: 1.1rem
    }

    .venue-map-canvas.is-live .venue-map-cue {
      display: none
    }

    .venue-map-frame {
      background: var(--lm-paper);
      border: 0;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      position: absolute;
      inset: 10px
    }

    .venue-map-credit {
      color: var(--color-muted);
      margin-top: .6rem;
      font-size: .75rem;
      line-height: 1.5
    }

    .venue-map-canvas.is-live+.venue-map-credit {
      display: none
    }

    .venue-map-actions {
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem 1.5rem;
      margin-top: 1.5rem;
      display: flex
    }

    .venue-map--footer {
      max-width: 21.5rem;
      margin-top: 1.25rem
    }

    .venue-map--footer .venue-map-canvas {
      aspect-ratio: 3/2;
      padding: 6px
    }

    .venue-map--footer .venue-map-frame {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      inset: 6px
    }

    .venue-map--footer .venue-map-cue {
      gap: .375rem;
      padding: .3rem .5rem;
      font-size: .6875rem;
      bottom: .6rem;
      right: .6rem
    }

    .venue-map--footer .venue-map-credit {
      margin-top: .45rem;
      font-size: .6875rem
    }

    .g-reviews,
    .g-review-grid,
    .g-review-wall,
    .rating {
      --g-card: #150d1f;
      --g-ink: #f3eefa;
      --g-muted: #b8abc9;
      --g-star: #fbbc04;
      --g-star-off: #3a2c52
    }

    .rating {
      text-align: center;
      justify-items: center;
      gap: .85rem;
      display: grid
    }

    .rating-figure {
      aspect-ratio: 1;
      place-items: center;
      width: clamp(11rem, 8rem + 9vw, 15.5rem);
      display: grid;
      position: relative
    }

    .rating-ring {
      width: 100%;
      height: 100%;
      color: var(--color-ornament, #e0218a);
      position: absolute;
      inset: 0
    }

    .rating-num {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--step-5, clamp(3.25rem, 2.2rem + 5vw, 6.5rem));
      letter-spacing: -.02em;
      color: var(--color-gold);
      font-variant-numeric: lining-nums;
      margin: 0;
      line-height: 1;
      position: relative
    }

    .rating-stars {
      letter-spacing: .16em;
      color: var(--color-gold);
      margin: 0;
      font-size: 1.375rem;
      line-height: 1;
      display: inline-block;
      position: relative
    }

    @supports (color:color-mix(in lab, red, red)) {
      .rating-stars {
        color: color-mix(in oklab, var(--color-gold) 28%, transparent)
      }
    }

    .rating-stars>span {
      white-space: nowrap;
      color: var(--color-gold);
      position: absolute;
      inset: 0 auto 0 0;
      overflow: hidden
    }

    .rating-cite {
      text-align: start;
      justify-content: center;
      margin-top: 0
    }

    .rating-links {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: .75rem 1.75rem;
      margin: .5rem 0 0;
      display: flex
    }

    .rating-cards {
      text-align: start;
      width: 100%;
      margin-top: 2.5rem
    }

    .g-review-grid {
      gap: 1rem;
      margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .g-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem
      }
    }

    @media (width>=1024px) {
      .g-review-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }
    }

    .g-review-grid>li {
      display: flex
    }

    .g-review-wall {
      column-gap: 1.25rem;
      margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
      padding: 0;
      list-style: none
    }

    @media (width>=640px) {
      .g-review-wall {
        columns: 2
      }
    }

    @media (width>=1024px) {
      .g-review-wall {
        columns: 3
      }
    }

    .g-review-wall>li {
      break-inside: avoid;
      margin-bottom: 1.25rem;
      display: flex
    }

    .g-review {
      background: var(--g-card);
      color: var(--g-ink);
      border: 1px solid var(--color-line);
      font-family: Roboto, Arial, var(--font-body);
      border-radius: 8px;
      flex-direction: column;
      flex: 1;
      gap: .75rem;
      padding: 1.1rem 1.2rem 1.3rem;
      display: flex
    }

    .g-review-head {
      align-items: center;
      gap: .75rem;
      display: flex
    }

    .g-avatar {
      background: var(--g-muted);
      width: 2.375rem;
      height: 2.375rem;
      color: var(--g-card);
      font-family: var(--font-body);
      border-radius: 50%;
      flex: none;
      place-items: center;
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1;
      display: grid
    }

    .g-review-who {
      min-width: 0
    }

    .g-review-name {
      overflow-wrap: anywhere;
      margin: 0;
      font-size: .9375rem;
      font-weight: 500;
      line-height: 1.3
    }

    .g-review-meta {
      color: var(--g-muted);
      font-variant-numeric: tabular-nums;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
      margin: .15rem 0 0;
      font-size: .8125rem;
      display: flex
    }

    .g-stars {
      letter-spacing: .04em;
      color: var(--g-star-off);
      font-size: .875rem;
      line-height: 1;
      display: inline-block;
      position: relative
    }

    .g-stars>span {
      white-space: nowrap;
      color: var(--g-star);
      position: absolute;
      inset: 0 auto 0 0;
      overflow: hidden
    }

    .g-review-text {
      margin: 0
    }

    .g-review-text p {
      white-space: pre-line;
      text-wrap: pretty;
      margin: 0;
      font-size: .9375rem;
      line-height: 1.55
    }

    .g-review-text:lang(th) p {
      line-height: 1.7
    }

    .leave {
      align-items: center;
      gap: 2rem 4rem;
      display: grid
    }

    @media (width>=900px) {
      .leave {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
      }
    }

    .leave-copy {
      align-content: start;
      gap: 1.1rem;
      display: grid
    }

    .leave-copy .lead,
    .leave-copy p {
      margin: 0
    }

    .review-qr {
      border: 1px solid var(--color-gold);
      background: var(--color-bg);
      justify-items: center;
      gap: .75rem;
      width: min(100%, 15rem);
      margin: 0;
      padding: 1rem 1rem .9rem;
      display: grid
    }

    @media (width>=900px) {
      .leave .review-qr {
        justify-self: end
      }
    }

    .review-qr img {
      background: #fff;
      width: 100%;
      max-width: 12rem;
      height: auto;
      padding: 8px;
      display: block
    }

    .review-qr .google-cite {
      margin: 0;
      font-size: .875rem
    }

    .photo-grade {
      filter: saturate(.9)contrast(1.03)sepia(.06)
    }

    .photo-frame {
      min-width: 0;
      margin: 0
    }

    .tokonoma-mat img {
      width: 100%;
      height: auto;
      aspect-ratio: var(--frame-ratio, 4 / 3);
      object-fit: cover;
      object-position: var(--frame-pos, 50% 50%);
      background: var(--color-surface);
      display: block
    }

    .photo-cap {
      color: var(--color-muted);
      flex-wrap: wrap;
      align-items: baseline;
      gap: .2rem .6rem;
      margin-top: .8rem;
      font-size: .875rem;
      line-height: 1.5;
      display: flex
    }

    .photo-cap b {
      font-family: var(--font-display);
      color: var(--color-text);
      font-size: 1.0625rem;
      font-weight: 500
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .photo-cap b {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600
    }

    .photo-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .875rem;
      display: grid
    }

    .photo-row>.photo-frame:first-child,
    .photo-row>.photo-frame:last-child:nth-child(2n) {
      grid-column: 1/-1
    }

    .photo-row .tokonoma-mat img {
      aspect-ratio: var(--frame-ratio, 3 / 4)
    }

    .photo-row>.photo-frame:first-child .tokonoma-mat img {
      aspect-ratio: var(--frame-ratio, 4 / 3)
    }

    @media (width>=768px) {
      .photo-row {
        grid-template-columns: repeat(var(--photo-row-n, 3), minmax(0, 1fr));
        gap: 1.25rem
      }

      .photo-row>.photo-frame:first-child,
      .photo-row>.photo-frame:last-child:nth-child(2n) {
        grid-column: auto
      }

      .photo-row>.photo-frame:first-child .tokonoma-mat img {
        aspect-ratio: var(--frame-ratio, 3 / 4)
      }
    }

    .photo-diptych {
      gap: 1.75rem;
      display: grid
    }

    .photo-frame--wide .tokonoma-mat img {
      aspect-ratio: var(--frame-ratio, 4 / 3)
    }

    .photo-frame--tall .tokonoma-mat img {
      aspect-ratio: var(--frame-ratio, 3 / 4)
    }

    @media (width<=899px) {
      .photo-frame--tall {
        justify-self: end;
        width: min(72%, 22rem)
      }
    }

    @media (width>=900px) {
      .photo-diptych {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        gap: 2rem
      }

      .photo-frame--wide {
        grid-column: 1/span 8
      }

      .photo-frame--tall {
        grid-column: 9/span 4;
        margin-top: 5rem
      }
    }

    .gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid
    }

    @media (width>=640px) {
      .gallery[data-cols="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .gallery[data-cols="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .gallery[data-cols="6"] {
        grid-template-columns: repeat(6, minmax(0, 1fr))
      }
    }

    .gallery[data-cols="1"] {
      grid-template-columns: 1fr
    }

    .gallery .tokonoma-mat img {
      aspect-ratio: 4/3;
      object-fit: cover
    }

    .gallery[data-ratio=portrait] .tokonoma-mat img {
      aspect-ratio: 3/4
    }

    .gallery[data-ratio=square] .tokonoma-mat img {
      aspect-ratio: 1
    }

    .gallery[data-ratio=auto] .tokonoma-mat img {
      aspect-ratio: auto
    }

    .room-cards {
      gap: 1.25rem;
      display: grid
    }

    @media (width>=640px) {
      .room-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1.25rem, .75rem + 1.5vw, 2rem)
      }
    }

    .room-card {
      background: #2a1d20;
      border-radius: 1.5rem;
      min-width: 0;
      margin: 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1.25rem 2.5rem -1.75rem #160a248c
    }

    .room-card img {
      aspect-ratio: 3/4;
      object-fit: cover;
      width: 100%;
      height: auto;
      display: block
    }

    .room-card:after {
      content: "";
      z-index: 1;
      pointer-events: none;
      border: 1px solid #ffffff8c;
      border-radius: 1rem;
      position: absolute;
      inset: .875rem
    }

    .room-card-cap {
      z-index: 2;
      color: #fffaf4;
      background: linear-gradient(#180e1000, #180e1073 45%, #180e10c7);
      gap: .35rem;
      padding: 4.5rem clamp(1.5rem, 1.1rem + 1vw, 2rem) clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
      display: grid;
      position: absolute;
      inset: auto 0 0
    }

    .room-card-cap b {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem);
      font-weight: 500;
      line-height: 1.1
    }

    :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .room-card-cap b {
      font-family: var(--font-body);
      font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
      font-weight: 600
    }

    .room-card-cap span {
      color: #fffaf4eb;
      font-size: .9375rem;
      line-height: 1.5
    }
  }

  .hero {
    isolation: isolate;
    padding-block: clamp(1.25rem, .8rem + 3vw, 4.5rem) clamp(2.75rem, 1.5rem + 3.5vw, 5rem);
    position: relative;
    overflow: clip
  }

  .hero:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(38% 42% at 58% 38%, var(--wash-pink-70) 0%, transparent 70%), radial-gradient(34% 40% at 72% 72%, var(--wash-aqua-75) 0%, transparent 72%);
    filter: blur(8px);
    opacity: .9;
    position: absolute;
    inset: -10% -20% -10% 30%
  }

  @media (width<=899px) {
    .hero:before {
      inset: -6% -30% 45%
    }
  }

  .hero-grid {
    align-items: center;
    gap: 1.5rem;
    display: grid
  }

  @media (width>=900px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
      gap: clamp(2rem, 1rem + 2.5vw, 3.5rem)
    }
  }

  .hero-text {
    z-index: 6;
    align-content: center;
    gap: 1.35rem;
    min-width: 0;
    display: grid;
    position: relative
  }

  .hero-h1 {
    max-width: 20ch;
    font-family: var(--font-display);
    letter-spacing: -.014em;
    text-wrap: balance;
    font-size: clamp(2.375rem, 1.8rem + 2.8vw, 4rem);
    font-weight: 500;
    line-height: 1.04
  }

  .hero-h1 em {
    color: var(--color-accent-text);
    font-style: normal
  }

  @media (width>=400px) and (width<=899px),
  (width>=1180px) {
    :lang(en) .hero-h1 em {
      white-space: nowrap
    }
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .hero-h1 {
    letter-spacing: 0;
    max-width: 18ch;
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    line-height: 1.3
  }

  :is(:lang(ja), :lang(zh), :lang(ko)) .hero-h1 {
    max-width: 12.5em
  }

  .hero-lead {
    max-width: 33em
  }

  .hero-ticks {
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    font-size: .9375rem;
    font-weight: 500;
    display: flex
  }

  .hero-ticks li {
    align-items: center;
    gap: .5rem;
    display: inline-flex
  }

  .hero-tick {
    width: 1.15rem;
    height: 1.15rem;
    fill: var(--color-accent);
    color: var(--color-accent-contrast);
    flex: none
  }

  .hero-ctas {
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem .85rem;
    margin-top: .25rem;
    display: flex
  }

  .hero-directions {
    min-height: 2.75rem;
    margin-left: .4rem
  }

  .hero-brand {
    text-align: center;
    justify-items: center;
    gap: clamp(1rem, .75rem + .8vw, 1.5rem);
    display: grid
  }

  .hero-brand-label {
    font-family: var(--font-label, var(--font-display));
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    font-size: .8125rem;
    font-weight: 600
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .hero-brand-label {
    font-family: var(--font-body);
    letter-spacing: .08em;
    font-size: .9375rem
  }

  .hero-brand-disc {
    aspect-ratio: 1;
    width: min(100%, 28rem);
    box-shadow: 0 0 0 1px var(--gold-leaf-58), 0 1.5rem 3rem -1.5rem #160a2459, 0 0 4rem .5rem var(--wash-pink-70);
    border-radius: 50%;
    overflow: hidden
  }

  .hero-brand-disc img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
  }

  @media (width<=899px) {
    .hero-brand {
      order: -1;
      margin-block: .25rem .5rem
    }

    .hero-brand-disc {
      width: min(76vw, 20rem)
    }

    .hero-status {
      font-size: .8125rem
    }
  }

  @media (width<=359px) {
    .hero-status {
      gap: .45rem;
      padding-inline: .55rem .65rem;
      font-size: .75rem
    }
  }

  .home-today-inner {
    position: relative
  }

  .home-tate {
    top: .2rem;
    left: calc(var(--gutter) - clamp(2.5rem, 4vw, 4.5rem));
    display: none;
    position: absolute
  }

  @media (width>=1280px) {
    .home-tate {
      display: block
    }
  }

  .home-today-label {
    margin-bottom: .9rem
  }

  @media (width>=640px) {
    .home-today on-today [data-list] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important
    }
  }

  .home-today on-today h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-3);
    letter-spacing: -.012em;
    line-height: 1.08
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .home-today on-today h2 {
    letter-spacing: 0;
    font-size: clamp(1.625rem, 1.4rem + 1.2vw, 2.5rem);
    line-height: 1.3
  }

  .home-today on-today [data-message] {
    margin-top: 1.5rem;
    font-size: .9375rem
  }

  .home-today on-today [data-message] a {
    -webkit-text-decoration-color: var(--color-ornament);
    -webkit-text-decoration-color: var(--color-ornament);
    text-decoration-color: var(--color-ornament)
  }

  .home-today-foot {
    border-top: 1px solid var(--color-line);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
    padding-top: 1.5rem;
    display: flex
  }

  .home-today-foot p {
    max-width: 38rem;
    color: var(--color-muted);
    font-size: .875rem
  }

  .home-today-foot .btn {
    margin-left: auto
  }

  .home-today:has([data-message]:not(.hidden)) .home-today-foot p {
    display: none
  }

  .home-contact-blurb {
    margin-top: 1.25rem
  }

  .menu-spread {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem)
  }

  .menu-lines {
    border-top: 1px solid var(--color-line);
    display: grid
  }

  @media (width>=900px) {
    .menu-lines {
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem)
    }
  }

  .menu-line {
    border-bottom: 1px solid var(--color-line);
    align-content: start;
    gap: .6rem;
    padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem);
    display: grid
  }

  .menu-line h3 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem);
    font-weight: 500;
    line-height: 1.15
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .menu-line h3 {
    font-family: var(--font-body);
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
    font-weight: 600
  }

  .menu-line p {
    color: var(--color-muted);
    text-wrap: pretty;
    max-width: 38em
  }

  .menu-line-link {
    justify-self: start;
    margin-top: .15rem
  }

  .home-room-cards {
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem)
  }

  .rooms-copy {
    gap: 1.75rem;
    margin-top: clamp(2.5rem, 1.75rem + 2vw, 3.5rem);
    display: grid
  }

  @media (width>=900px) {
    .rooms-copy {
      grid-template-columns: 5fr 7fr;
      align-items: start;
      gap: 4rem
    }
  }

  .rooms-blurb {
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-wrap: pretty;
    line-height: 1.5
  }

  :lang(th) .rooms-blurb {
    line-height: 1.7
  }

  .rooms-facts {
    border-top: 1px solid var(--color-line);
    display: grid
  }

  @media (width>=640px) {
    .rooms-facts {
      grid-template-columns: 1fr 1fr;
      column-gap: 2.5rem
    }
  }

  .rooms-facts>li {
    border-bottom: 1px solid var(--color-line);
    padding-block: 1rem;
    font-weight: 500
  }

  .home-prices .price-band-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start
  }

  .home-prices .pledge {
    max-width: 34rem
  }

  .home-prices .board-note {
    color: var(--color-muted);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 2rem;
    margin-top: 1.75rem;
    font-size: .875rem;
    display: flex
  }

  .home-rating {
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem)
  }

  .find-grid {
    gap: 2rem;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    display: grid
  }

  @media (width>=900px) {
    .find-grid {
      grid-template-columns: 7fr 5fr;
      align-items: start;
      gap: 3.5rem
    }
  }

  .find-addr {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-style: normal;
    line-height: 1.3
  }

  .find-addr small {
    font-family: var(--font-body);
    color: var(--color-muted);
    margin-top: .6rem;
    font-size: .9375rem;
    line-height: 1.5;
    display: block
  }

  :lang(th) .find-addr {
    line-height: 1.45
  }

  .find-routes {
    gap: .9rem;
    margin-top: 1.5rem;
    display: grid
  }

  .find-routes li {
    gap: .15rem;
    padding-left: 1rem;
    display: grid;
    position: relative
  }

  .find-routes li:before {
    content: "";
    background: var(--color-ornament);
    width: .35rem;
    height: .35rem;
    position: absolute;
    top: .55em;
    left: 0;
    transform: rotate(45deg)
  }

  .find-routes b {
    font-weight: 600
  }

  .find-routes span {
    color: var(--color-muted);
    font-size: .9375rem
  }

  .find-hours {
    margin-top: 1.75rem
  }

  @media (width<=899px) {
    .find-hours.hours-board--uniform:has(.range:not([hidden])) .hours-week {
      display: none
    }
  }

  .find-cta {
    margin-top: 1.75rem
  }

  .home-faq-list {
    border-top: 1px solid var(--color-line);
    margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    display: grid
  }

  @media (width>=900px) {
    .home-faq-list {
      grid-template-columns: 1fr 1fr;
      column-gap: 3.5rem
    }
  }

  .home-faq-list details {
    border-bottom: 1px solid var(--color-line)
  }

  .home-faq-list summary {
    min-height: 2.75rem;
    font-family: var(--font-display);
    cursor: pointer;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 0;
    font-size: 1.25rem;
    line-height: 1.3;
    list-style: none;
    display: flex
  }

  :is(:lang(ja), :lang(zh), :lang(ko)) .home-faq-list summary {
    font-size: 1.125rem
  }

  :lang(th) .home-faq-list summary {
    font-size: 1.125rem;
    line-height: 1.45
  }

  .home-faq-list summary {
    transition: color .16s
  }

  .home-faq-list summary:hover {
    color: var(--color-accent-text)
  }

  .home-faq-list summary::-webkit-details-marker {
    display: none
  }

  .home-faq-list summary:after {
    content: "";
    border-right: 1.5px solid var(--color-gold);
    border-bottom: 1.5px solid var(--color-gold);
    width: .6rem;
    height: .6rem;
    transition: transform .2s var(--ease-out);
    flex: none;
    transform: rotate(45deg)translateY(-.2rem)
  }

  .home-faq-list details[open] summary:after {
    transform: rotate(225deg)
  }

  .home-faq-list details p {
    max-width: 36rem;
    color: var(--color-muted);
    padding-bottom: 1.25rem
  }

  .channel-cards {
    gap: .6rem;
    display: grid
  }

  .channel-cards--1 {
    max-width: 28rem
  }

  @media (width>=480px) {
    .channel-cards--2 {
      grid-template-columns: 1fr 1fr
    }

    .channel-cards--2>li[data-kind=call] {
      grid-column: 1/-1
    }
  }

  .channel-card:hover .arrow {
    transform: translate(4px)
  }

  .payment-strip {
    color: var(--color-muted);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    font-size: .875rem;
    display: flex
  }

  .payment-head {
    font-family: var(--font-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: .78125rem;
    font-weight: 600
  }

  :is(:lang(th), :lang(ja), :lang(zh), :lang(ko)) .payment-head {
    font-family: var(--font-body);
    letter-spacing: .04em;
    text-transform: none;
    font-size: .8125rem
  }

  .payment-list {
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    display: flex
  }

  .payment-item {
    color: var(--color-text);
    align-items: center;
    gap: .45rem;
    display: inline-flex
  }

  .payment-item:before {
    content: "";
    background: var(--color-ornament);
    flex: none;
    width: .35rem;
    height: .35rem;
    transform: rotate(45deg)
  }

  .payment-note {
    color: var(--color-muted);
    flex-basis: 100%;
    font-size: .8125rem
  }

  .contact-qr {
    display: none
  }

  @media (width>=1024px) {
    .contact-qr {
      display: block
    }
  }

  .contact-qr>.label {
    color: var(--color-muted)
  }

  .qr-list {
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: 1rem;
    display: flex
  }

  .qr-item {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    display: flex
  }

  .qr-plate {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #fff;
    width: 9rem;
    height: 9rem;
    padding: .5rem;
    display: block;
    position: relative
  }

  .qr-code {
    width: 100%;
    height: 100%;
    display: block
  }

  .qr-badge {
    background: var(--ch-bg);
    border: 3px solid #fff;
    border-radius: 999px;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    margin: auto;
    display: grid;
    position: absolute;
    inset: 0
  }

  .qr-badge-mark {
    width: 1.05rem;
    height: 1.05rem
  }

  .qr-plate--own {
    padding: .25rem
  }

  .qr-plate--own .qr-code {
    object-fit: contain
  }

  .qr-name {
    color: var(--color-muted);
    font-size: .875rem;
    font-weight: 600
  }

  .qr-hint {
    max-width: 22rem;
    color: var(--color-muted);
    margin-top: .75rem;
    font-size: .8125rem
  }

  .contact-grid {
    gap: 1.5rem;
    display: grid
  }

  @media (width>=900px) {
    .contact-grid {
      grid-template-columns: 5fr 7fr;
      grid-template-areas: "copy reach" "qr pay";
      align-items: start;
      gap: 1.5rem 4rem
    }

    .contact-grid>.contact-copy {
      grid-area: copy
    }

    .contact-grid>.contact-reach {
      grid-area: reach
    }

    .contact-grid>.contact-qr {
      grid-area: qr;
      margin-top: 1rem
    }

    .home-contact .contact-grid {
      grid-template-areas: "copy reach" ".pay" "qr qr"
    }

    .home-contact .qr-list {
      gap: 2rem 3rem
    }

    .home-contact .qr-plate {
      width: 10.5rem;
      height: 10.5rem
    }

    .contact-grid>.payment-strip {
      grid-area: pay
    }

    .contact-grid.letter-grid {
      grid-template: "copy reach" "copy pay" 1fr"qr qr" /minmax(0, 5fr) minmax(0, 7fr);
      gap: 1.25rem clamp(2.5rem, 1rem + 3vw, 4.5rem)
    }

    .letter-grid>.contact-copy {
      flex-direction: column;
      align-items: flex-start;
      height: 100%;
      display: flex
    }

    .letter-grid>.contact-copy .letter-seal {
      margin-top: auto
    }

    .letter-grid>.payment-strip {
      align-self: start
    }
  }

  @media (width>=1024px) {
    .letter-grid>.contact-qr {
      grid-template-rows: auto 1fr;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
      column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
      margin-top: 1rem;
      display: grid
    }

    .letter-grid>.contact-qr>.label {
      grid-area: 1/1
    }

    .letter-grid>.contact-qr>.qr-hint {
      grid-area: 2/1;
      margin-top: .5rem
    }

    .letter-grid>.contact-qr>.qr-list {
      grid-area: 1/2/span 2;
      margin-top: 0
    }
  }

  .cbar {
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--paper);
    border-top: 1px solid var(--gold-leaf);
    position: fixed;
    inset: auto 0 0
  }

  @supports (color:color-mix(in lab, red, red)) {
    .cbar {
      border-top: 1px solid color-mix(in oklab, var(--gold-leaf) 55%, transparent)
    }
  }

  .cbar>ul {
    grid-template-columns: repeat(var(--cbar-n, 4), minmax(0, 1fr));
    height: var(--contact-bar-h);
    display: grid
  }

  .cbar-cell {
    background: var(--ch-bg);
    height: 100%;
    color: var(--ch-fg);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    padding-inline: .25rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.15;
    display: flex
  }

  .cbar-cell+.cbar-cell,
  li+li>.cbar-cell {
    border-left: 1px solid var(--hair)
  }

  .cbar-cell--primary {
    border-left: 0
  }

  .cbar-mark {
    flex: none;
    width: 1.375rem;
    height: 1.375rem
  }

  .cbar-cell>span {
    overflow-wrap: anywhere;
    max-width: 100%
  }

  @media (width>=768px) {
    .cbar {
      display: none
    }
  }

  .footer-badge {
    margin-inline-start: auto;
    line-height: 0
  }

  .footer-badge img {
    opacity: .92;
    width: 8.75rem;
    height: auto;
    transition: opacity .16s
  }

  .footer-badge:hover img,
  .footer-badge:focus-visible img {
    opacity: 1
  }

  on-today [data-list] {
    gap: 2.75rem 1.25rem !important;
    margin-top: 2.5rem !important
  }

  @media (width>=640px) {
    on-today [data-list] {
      column-gap: 1.75rem !important
    }
  }

  @media (width>=1024px) {
    on-today [data-list] {
      gap: 3.25rem 2.5rem !important;
      margin-top: 3rem !important
    }
  }

  .people-card {
    background: 0 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    container-type: inline-size
  }

  .people-card>figure {
    gap: 1.1rem;
    margin: 0;
    display: grid
  }

  .people-card :is(picture, .aspect-\[3\/4\]) {
    --mat: 6px;
    --bloom: 1rem
  }

  .people-card picture>img {
    object-fit: cover;
    background: var(--color-surface);
    width: 100%;
    height: auto;
    display: block
  }

  :is(on-today, .lineup-grid) .people-card picture>img {
    aspect-ratio: 3/4
  }

  @media (hover:hover) {
    .people-card:hover .nm {
      color: var(--color-accent-text)
    }
  }

  @media (width<=639px) {
    on-today .people-card--row:nth-child(n+3) {
      display: none
    }
  }

  @media (width>=640px) and (width<=1023px) {
    on-today .people-card--row:nth-child(n+4) {
      display: none
    }
  }

  @media (width>=1024px) {
    on-today .people-card--row:nth-child(n+5) {
      display: none
    }
  }

  @media (width>=1280px) {
    .lineup-today on-today .people-card--row:nth-child(5) {
      display: block
    }
  }

  .people-cap--ask,
  .people-cap {
    border: 0;
    gap: .85rem;
    padding: 0;
    font-size: .875rem;
    display: grid
  }

  .people-cap-text {
    text-align: center;
    justify-items: center;
    gap: .55rem;
    min-width: 0;
    display: grid
  }

  .people-cap-text:after {
    content: "";
    background: var(--color-ornament);
    width: 1.5rem;
    height: 1px
  }

  .people-cap .nm,
  .people-cap-text .nm {
    font-family: var(--font-display);
    letter-spacing: .01em;
    color: var(--color-text);
    overflow-wrap: anywhere;
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.15;
    transition: color .16s
  }

  .people-cap .langs {
    color: var(--color-muted);
    font-size: .8125rem
  }

  .people-cap-text:not(:has(.nm:not(.sr-only))) {
    display: none
  }

  .ask-btn {
    border-radius: var(--radius);
    background: var(--ch-bg);
    width: 100%;
    min-height: 2.75rem;
    color: var(--ch-fg);
    font: inherit;
    letter-spacing: .015em;
    text-align: center;
    cursor: pointer;
    border: 0;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.15;
    transition: filter .16s;
    display: flex
  }

  .ask-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ch-mark, currentColor);
    flex: none
  }

  .ask-btn svg path {
    stroke-width: 1.5px
  }

  .ask-btn:hover {
    filter: brightness(1.05)
  }

  .ask-btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px
  }

  .ask-btn-short {
    display: none
  }

  :lang(ja) .ask-btn {
    word-break: auto-phrase
  }

  .ask-btn>span {
    text-wrap: balance
  }

  @container (width<=9.75rem) {
    .ask-btn-long {
      display: none
    }

    .ask-btn-short {
      display: inline
    }
  }

  .ask-sheet {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--color-surface);
    width: min(28rem, 100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    color: var(--color-text);
    box-shadow: var(--shadow-panel);
    overscroll-behavior: contain;
    margin: auto;
    padding: 1.5rem;
    overflow-y: auto
  }

  .ask-sheet::backdrop {
    background: var(--ink)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .ask-sheet::backdrop {
      background: color-mix(in srgb, var(--ink) 62%, transparent)
    }
  }

  @media (width<=639px) {
    .ask-sheet {
      width: 100vw;
      max-width: 100vw;
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
      border-width: 1px 0 0;
      margin: auto 0 0
    }
  }

  .ask-sheet h2,
  .ask-sheet .ask-sheet-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--step-2);
    line-height: 1.18
  }

  .ask-sheet-head {
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    display: flex
  }

  .ask-sheet-close {
    border-radius: var(--radius);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-muted);
    flex: none;
    place-items: center;
    margin: -.5rem -.5rem 0 0;
    display: inline-grid
  }

  .ask-sheet-close:hover {
    color: var(--color-text)
  }

  .ask-sheet-lead {
    color: var(--color-muted);
    margin-top: .5rem;
    font-size: .9375rem;
    line-height: 1.5
  }

  .ask-sheet-msg {
    border: 1px dashed var(--hair-strong);
    border-radius: var(--radius);
    background: var(--paper);
    -webkit-user-select: all;
    user-select: all;
    overflow-wrap: anywhere;
    margin-top: 1rem;
    padding: .75rem .875rem;
    font-size: .9375rem;
    line-height: 1.5
  }

  .ask-sheet-apps {
    gap: .5rem;
    margin-top: 1rem;
    display: grid
  }

  .ask-sheet-app {
    justify-content: flex-start;
    width: 100%
  }

  .ask-sheet-note {
    color: var(--color-muted);
    margin-top: .75rem;
    font-size: .8125rem;
    line-height: 1.45
  }

  .ask-sheet-note[data-ask-copied] {
    color: var(--color-gold-text)
  }

  .people-card figure:has(>.photo-count) {
    position: relative
  }

  .photo-count {
    z-index: 2;
    pointer-events: none;
    color: #170f22;
    font-variant-numeric: tabular-nums;
    background: #180e109e;
    border-radius: 999px;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem .2rem .4rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-start: .5rem
  }

  .people-tag {
    color: var(--color-muted);
    text-align: center;
    text-wrap: balance;
    margin-top: .15rem;
    font-size: .8125rem;
    line-height: 1.4
  }

  .people-tag[hidden] {
    display: none
  }
}

@font-face {
  font-family: Miki Mincho;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/miki-mincho-500.woff2)format("woff2");
  unicode-range: U+??, U+2010-2027, U+2030-203A, U+20AC, U+E3F, U+2116, U+2190-2197
}

@font-face {
  font-family: Miki Mincho;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/miki-mincho-700.woff2)format("woff2");
  unicode-range: U+??, U+2010-2027, U+2030-203A, U+20AC, U+E3F, U+2116, U+2190-2197
}

@font-face {
  font-family: Miki Tate;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/miki-mincho-jp.woff2)format("woff2");
  unicode-range: U+30??, U+4E00-9FFF
}

@font-face {
  font-family: Miki Caps;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/miki-caps.woff2)format("woff2");
  unicode-range: U+20-7E, U+B7, U+2013-2014, U+2019, U+E3F
}

:root {
  --paper: #0b0710;
  --paper-2: #120a1a;
  --ink: #f3eefa;
  --ink-2: #b8abc9;
  --hair: #2a1f38;
  --hair-strong: #4a3866;
  --shu: #c8102e;
  --shu-press: #a50c25;
  --shu-text: #ff4d8d;
  --wine: #3b0d4a;
  --lacquer: #160a24;
  --on-dark: #f3eefa;
  --on-dark-2: #c4b5dc;
  --gold-leaf: #e0218a;
  --gold: #9b6bff;
  --gold-ink: #c4a6ff;
  --gold-on-dark: #d7c4ff;
  --wash-pink: #e0218a;
  --wash-aqua: #5b2bff;
  --wash-pink-70: #e0218a33;
  --wash-aqua-75: #5b2bff33;
  --gold-leaf-58: #e0218a94;
  --seal-on-dark: #e0218a;
  --color-bg: var(--paper);
  --color-surface: #150d1f;
  --color-text: var(--ink);
  --color-muted: var(--ink-2);
  --color-accent: var(--shu);
  --color-accent-press: var(--shu-press);
  --color-accent-contrast: var(--paper);
  --color-accent-text: var(--shu-text);
  --color-line: var(--hair);
  --color-line-strong: var(--hair-strong);
  --color-gold: var(--gold);
  --color-gold-text: var(--gold-ink);
  --color-ornament: var(--gold-leaf);
  --color-open: #1e8a4a;
  --color-closed: var(--ink-2);
  --font-display: "Miki Mincho", "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --font-label: "Miki Caps", "Miki Mincho", Georgia, serif;
  --font-caps: var(--font-label);
  --font-tate: "Miki Tate", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + .35vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.24rem + .65vw, 1.75rem);
  --step-3: clamp(1.875rem, 1.55rem + 1.55vw, 2.875rem);
  --step-4: clamp(2.375rem, 1.75rem + 3vw, 4.5rem);
  --step-5: clamp(3.25rem, 2.2rem + 5vw, 6.5rem);
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --col: 74rem;
  --col-text: 40rem;
  --col-max: 96rem;
  --section: clamp(4rem, 2.6rem + 5vw, 7.5rem);
  --section-tight: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  --band: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  --radius: 2px;
  --contact-bar-h: 4rem;
  --shadow-panel: 0 24px 60px -24px #000000cc;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-ink: cubic-bezier(.22, .8, .24, 1)
}

:lang(ja) {
  --font-display: "Miki Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-body: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif;
  line-break: strict
}

:lang(zh) {
  --font-display: "Miki Mincho", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  line-break: strict
}

:lang(ko) {
  --font-display: "Miki Mincho", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif
}

:lang(th) {
  --font-display: "Miki Mincho", "Noto Serif Thai", Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --font-body: system-ui, -apple-system, Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif
}

:lang(ko) {
  word-break: keep-all;
  overflow-wrap: anywhere
}

:lang(ja) :is(h1, h2, h3, dt) {
  word-break: auto-phrase;
  overflow-wrap: anywhere
}

:lang(ja) :is(h1, h2, h3, summary, .display-1, .display-2, .display-3, .course-name, .xindex-name, .invite-title, .steps-title) {
  font-feature-settings: "palt" 1
}

:lang(ja) summary {
  word-break: auto-phrase;
  text-wrap: pretty
}

:is(:lang(zh), :lang(ko)) summary {
  text-wrap: pretty
}

@view-transition {
  navigation: auto
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.22, .8, .24, 1)
}

@media (prefers-reduced-motion:reduce) {
  @view-transition {
    navigation: none
  }

  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important
  }
}

@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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

@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-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

@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
}

/* Fox 33 lounge theme: finishing touches */
.ask-btn {
  --ch-bg: #6d2cff !important;
  --ch-fg: #ffffff !important;
  --ch-mark: #ffffff !important;
  --ch-knockout: #6d2cff !important;
  background-image: linear-gradient(120deg, #5b2bff, #b01fd8 60%, #e0218a) !important;
  box-shadow: 0 10px 30px -12px #b01fd8aa;
  transition: filter .2s, box-shadow .2s
}

.ask-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 12px 36px -10px #e0218acc
}

body {
  background-image: radial-gradient(60rem 40rem at 85% -10%, #5b2bff1f, transparent 70%), radial-gradient(50rem 36rem at -10% 30%, #e0218a14, transparent 70%);
  background-attachment: fixed
}

::selection {
  background: #e0218a;
  color: #fff
}

img.fox-logo {
  filter: drop-shadow(0 0 18px #6d2cff66)
}

.people-card:hover img,
.room-card:hover img {
  filter: brightness(1.05)
}

/* Fox 33 page banners: lounge photo behind every page hero */
.hero[data-banner],
.phero[data-banner] {
  background-color: #0b0710;
  background-image: linear-gradient(90deg, #0b0710f5 0%, #0b0710d9 38%, #0b071080 70%, #0b071059 100%), linear-gradient(180deg, #0b071000 55%, #0b0710 100%), var(--banner);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat
}

[data-banner="1"] {
  --banner: url(../images/lounge-1.webp)
}

[data-banner="2"] {
  --banner: url(../images/lounge-2.webp)
}

[data-banner="3"] {
  --banner: url(../images/lounge-3.webp)
}

[data-banner="4"] {
  --banner: url(../images/lounge-4.webp)
}

.hero[data-banner]:before {
  opacity: .55
}

.hero[data-banner] .hero-brand-disc,
.phero[data-banner] .phero-logo {
  background: radial-gradient(circle at 50% 40%, #2a1240e6, #0b0710f2 70%);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px #e0218a80, 0 0 4rem .5rem #6d2cff55, 0 1.5rem 3rem -1.5rem #000
}

@media (max-width:767px) {

  .hero[data-banner],
  .phero[data-banner] {
    background-image: linear-gradient(180deg, #0b0710cc 0%, #0b0710e6 60%, #0b0710 100%), var(--banner)
  }
}

/* Fox 33 romantic premium layer: plum-to-wine gradient base, rose-gold accents, glass sections */
:root {
  --paper: #1a0a22;
  --paper-2: #24102e;
  --color-surface: #2a1236;
  --ink: #fbeef6;
  --ink-2: #d6bccd;
  --on-dark: #fbeef6;
  --on-dark-2: #e0c6d6;
  --hair: #4a2350;
  --hair-strong: #6e3a74;
  --gold-leaf: #ff5fa2;
  --gold: #c79bff;
  --gold-ink: #f2b8cf;
  --gold-on-dark: #f7d7c6;
  --shu: #d4145a;
  --shu-press: #b0104a;
  --shu-text: #ff7fb2;
  --seal-on-dark: #ff5fa2;
  --gold-leaf-58: #ff5fa28c;
  --wash-pink-70: #ff4d8d40;
  --wash-aqua-75: #7b3cff38;
  --romance: linear-gradient(115deg, #7b3cff 0%, #c42b9a 48%, #ff4d7d 100%);
  --champagne: linear-gradient(100deg, #fff4f8 0%, #ffd0e2 45%, #f7d7c6 75%, #e6d4ff 100%);
}

html {
  background-color: #1a0a22;
  background-image:
    radial-gradient(70rem 50rem at 100% 0%, #7b3cff33, transparent 60%),
    radial-gradient(60rem 45rem at 0% 35%, #ff4d8d26, transparent 62%),
    radial-gradient(70rem 50rem at 100% 75%, #c42b9a26, transparent 60%),
    linear-gradient(180deg, #1c0a26 0%, #2a0b2f 30%, #230a2c 55%, #2c0c2a 80%, #16081d 100%) !important;
  background-attachment: fixed !important
}

body {
  background-image: none !important
}

/* alternate sections: frosted glass instead of flat fill */
.kinari {
  background-color: #ffffff08 !important;
  background-image: radial-gradient(60% 80% at 50% 0%, #ff4d8d14, transparent 70%);
  border-block: 1px solid #ff8cc01f;
  backdrop-filter: blur(2px)
}

.kinari:before,
.kinari:after {
  display: none !important
}

/* price band: deep wine to violet */
.lacquer {
  background-color: #2a0a2c !important;
  background-image: radial-gradient(70% 90% at 0% 0%, #ff4d8d33, transparent 60%), radial-gradient(60% 80% at 100% 100%, #7b3cff40, transparent 60%), linear-gradient(135deg, #3b0b33 0%, #2a0b3c 55%, #170826 100%), url(lacquer-flecks.C18Zw2c1.svg) !important;
  background-size: auto, auto, auto, 130px 130px !important
}

/* header glass */
.mnav {
  background: #1a0a22b8 !important;
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid #ff8cc026
}

.cbar {
  background: #1a0a22e6 !important;
  backdrop-filter: blur(12px)
}

/* page banners: plum overlay instead of black */
.hero[data-banner],
.phero[data-banner] {
  background-color: transparent !important;
  background-image:
    linear-gradient(90deg, #1c0a26f2 0%, #2a0b2fd1 40%, #3b0b3373 72%, #1c0a2640 100%),
    radial-gradient(60% 80% at 80% 50%, #c42b9a33, transparent 70%),
    linear-gradient(180deg, #1c0a2600 55%, #1c0a26 100%), var(--banner) !important
}

.hero[data-banner] .hero-brand-disc,
.phero[data-banner] .phero-logo {
  background: radial-gradient(circle at 50% 35%, #3d1150f0, #1c0a26f5 72%) !important;
  box-shadow: 0 0 0 1px #ff8cc080, 0 0 0 8px #ff5fa214, 0 0 5rem 1rem #c42b9a40, 0 2rem 3rem -1.5rem #000 !important
}

/* headings: champagne rose sheen */
.hero-h1,
.phero h1,
h1#page-title {
  background: var(--champagne);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero-h1 *,
.phero h1 * {
  color: inherit
}

/* buttons: romance gradient */
.btn-primary {
  background-image: var(--romance) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 30px -12px #ff4d7daa
}

.btn-primary:hover {
  filter: brightness(1.1)
}

.btn-ghost {
  border-color: #ff8cc066 !important;
  background: #ffffff08
}

.ask-btn {
  background-image: var(--romance) !important
}

/* cards: soft glass */
.g-reviews,
.g-review-grid,
.g-review-wall,
.rating {
  --g-card: #2a12368c;
  --g-ink: #fbeef6;
  --g-muted: #d6bccd;
  --g-star-off: #4a2350
}

.g-review {
  backdrop-filter: blur(6px);
  border-color: #ff8cc026 !important
}

.people-card:hover {
  filter: drop-shadow(0 0 18px #ff4d8d33)
}

::selection {
  background: #ff4d8d;
  color: #fff
}

/* Fox 33 banner art: arched lounge window with rose and glass chip (replaces logo circle) */
.fox-arch {
  position: relative;
  justify-self: center;
  width: min(100%, 22rem);
  aspect-ratio: 4/5;
  margin: 1rem 1.5rem 1.5rem
}

.hero .fox-arch {
  width: min(100%, 25rem)
}

.fox-arch:before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px 999px 30px 30px;
  border: 1px solid #f7c6d980;
  box-shadow: 0 0 0 1px #ff5fa21a, 0 0 60px -10px #ff4d8d66;
  pointer-events: none
}

.fox-arch:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, #1c0a2600 45%, #1c0a26b3 100%), radial-gradient(80% 50% at 50% 0%, #ff4d8d26, transparent 70%);
  pointer-events: none
}

.fox-arch-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 18px 18px;
  outline: 1px solid #ffffff4d;
  outline-offset: -12px;
  box-shadow: 0 0 0 1px #ff8cc099, 0 2.5rem 4rem -2rem #000, 0 0 6rem -1rem #c42b9a66
}

.fox-arch-rose {
  position: absolute;
  z-index: 3;
  width: 42%;
  height: auto;
  left: -18%;
  bottom: -8%;
  filter: drop-shadow(0 12px 18px #0009);
  pointer-events: none;
  animation: fox-sway 7s ease-in-out infinite alternate
}

.fox-arch-chip {
  position: absolute;
  z-index: 3;
  right: -12%;
  bottom: 14%;
  display: grid;
  gap: .2rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: #2a1236b8;
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid #ff8cc059;
  box-shadow: 0 16px 36px -16px #000
}

.fox-arch-kicker {
  font-family: var(--font-label);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #f2b8cf
}

.fox-arch-line {
  font-size: .8125rem;
  color: #fbeef6;
  white-space: nowrap
}

@keyframes fox-sway {
  from {
    transform: rotate(-4deg) translateY(0)
  }

  to {
    transform: rotate(3deg) translateY(-6px)
  }
}

@media (prefers-reduced-motion:reduce) {
  .fox-arch-rose {
    animation: none
  }
}

@media (max-width:767px) {
  .fox-arch {
    width: min(70vw, 16rem);
    margin-inline: auto
  }

  .fox-arch-chip {
    right: -6%
  }

  .fox-arch-line {
    white-space: normal
  }
}
/* ===== Theme options (html[data-theme]) ===== */
/* 1. Blush Light: ivory and blush, plum text, rose accents */
:root[data-theme="blush"]{--paper:#fbf4f2;--paper-2:#f7e8ec;--color-surface:#fffafb;--ink:#2b1630;--ink-2:#6e5670;--hair:#ecd6de;--hair-strong:#d8b4c4;--shu:#c2185b;--shu-press:#a3134c;--shu-text:#b0144f;--gold-leaf:#d9467f;--gold:#8a4bd6;--gold-ink:#9a3d6b;--gold-on-dark:#ffd9e6;--on-dark:#fff4f7;--on-dark-2:#f1cfdc;--wash-pink-70:#f7c6d866;--wash-aqua-75:#d9c8ff55;--gold-leaf-58:#d9467f66;--seal-on-dark:#ff7aa8}
html[data-theme="blush"]{background-color:#fbf4f2!important;background-image:radial-gradient(60rem 40rem at 100% 0%,#f3c6d866,transparent 60%),radial-gradient(50rem 36rem at 0% 45%,#e3d4ff55,transparent 62%),linear-gradient(180deg,#fdf7f5 0%,#f9ecef 45%,#fbf4f2 100%)!important}
html[data-theme="blush"] .kinari{background-color:#ffffff99!important;background-image:radial-gradient(60% 80% at 50% 0%,#f7c6d855,transparent 70%);border-block:1px solid #ecd6de}
html[data-theme="blush"] .mnav{background:#fbf4f2d9!important;border-bottom:1px solid #ecd6de}
html[data-theme="blush"] .cbar{background:#fbf4f2f2!important}
html[data-theme="blush"] .hero[data-banner],html[data-theme="blush"] .phero[data-banner]{background-image:linear-gradient(90deg,#2b1630e6 0%,#3a1838c4 42%,#3a183866 75%,#2b163033 100%),linear-gradient(180deg,#fbf4f200 70%,#fbf4f2 100%),var(--banner)!important;--ink:#fff4f7;--ink-2:#f1cfdc;--color-text:#fff4f7;--color-muted:#f1cfdc;color:#fff4f7}
html[data-theme="blush"] .g-reviews,html[data-theme="blush"] .g-review-grid,html[data-theme="blush"] .rating{--g-card:#ffffff;--g-ink:#2b1630;--g-muted:#6e5670;--g-star-off:#ecd6de}
html[data-theme="blush"] .room-card-cap,html[data-theme="blush"] .room-card-cap span{color:#fff}

/* 2. Noir Magenta: true black, silver type, one magenta accent */
:root[data-theme="noir"]{--paper:#09090b;--paper-2:#0f0f12;--color-surface:#141418;--ink:#f3f1ee;--ink-2:#a8a4ab;--hair:#24232a;--hair-strong:#3a3842;--shu:#e6007e;--shu-press:#c0006a;--shu-text:#ff4fa3;--gold-leaf:#e6007e;--gold:#c9c6d0;--gold-ink:#d9d5de;--gold-on-dark:#f3f1ee;--on-dark:#f3f1ee;--on-dark-2:#bdb8c0;--wash-pink-70:#e6007e33;--wash-aqua-75:#6d2cff26;--gold-leaf-58:#e6007e80;--seal-on-dark:#e6007e;--romance:linear-gradient(115deg,#e6007e,#b0108f);--champagne:linear-gradient(100deg,#ffffff 0%,#e9e6ee 55%,#c9c6d0 100%)}
html[data-theme="noir"]{background-color:#09090b!important;background-image:radial-gradient(55rem 38rem at 100% 0%,#e6007e14,transparent 60%),radial-gradient(50rem 36rem at 0% 70%,#6d2cff10,transparent 60%),linear-gradient(180deg,#0b0b0e,#09090b)!important}
html[data-theme="noir"] .kinari{background-color:#ffffff05!important;background-image:none;border-block:1px solid #ffffff0f}
html[data-theme="noir"] .lacquer{background-image:radial-gradient(60% 80% at 100% 0%,#e6007e1f,transparent 60%),linear-gradient(180deg,#121014,#0b0a0d),url(lacquer-flecks.C18Zw2c1.svg)!important;background-color:#0b0a0d!important}
html[data-theme="noir"] .mnav{background:#09090bcc!important;border-bottom:1px solid #ffffff12}
html[data-theme="noir"] .cbar{background:#09090bf2!important}
html[data-theme="noir"] .hero[data-banner],html[data-theme="noir"] .phero[data-banner]{background-image:linear-gradient(90deg,#09090bf2 0%,#09090bc7 42%,#09090b59 75%,#09090b26 100%),linear-gradient(180deg,#09090b00 60%,#09090b 100%),var(--banner)!important}
html[data-theme="noir"] .g-reviews,html[data-theme="noir"] .g-review-grid,html[data-theme="noir"] .rating{--g-card:#141418;--g-ink:#f3f1ee;--g-muted:#a8a4ab;--g-star-off:#3a3842}
html[data-theme="noir"] .fox-arch-chip{background:#141418cc;border-color:#ffffff26}
html[data-theme="noir"] .fox-arch:before{border-color:#ffffff40;box-shadow:0 0 60px -10px #e6007e55}

/* 3. Velvet & Champagne: wine red like the sofas, champagne-gold accents */
:root[data-theme="velvet"]{--paper:#17060a;--paper-2:#1f080e;--color-surface:#280b12;--ink:#fbf0e8;--ink-2:#d8bcb3;--hair:#42161f;--hair-strong:#6a2a33;--shu:#b8102c;--shu-press:#960d24;--shu-text:#f0c987;--gold-leaf:#e3b96f;--gold:#d6ad62;--gold-ink:#e9c98f;--gold-on-dark:#f3d9a4;--on-dark:#fbf0e8;--on-dark-2:#e0c6bb;--wash-pink-70:#b8102c40;--wash-aqua-75:#e3b96f26;--gold-leaf-58:#e3b96f80;--seal-on-dark:#e3b96f;--romance:linear-gradient(115deg,#f3d9a4 0%,#d6ad62 55%,#b98a3e 100%);--champagne:linear-gradient(100deg,#fff6ea 0%,#f3d9a4 55%,#e2b874 100%)}
html[data-theme="velvet"]{background-color:#17060a!important;background-image:radial-gradient(60rem 40rem at 100% 0%,#b8102c33,transparent 60%),radial-gradient(50rem 36rem at 0% 55%,#e3b96f14,transparent 60%),linear-gradient(180deg,#1c070c 0%,#22080f 45%,#16050a 100%)!important}
html[data-theme="velvet"] .kinari{background-color:#ffffff06!important;background-image:radial-gradient(60% 80% at 50% 0%,#b8102c1f,transparent 70%);border-block:1px solid #e3b96f1f}
html[data-theme="velvet"] .lacquer{background-image:radial-gradient(70% 90% at 0% 0%,#b8102c55,transparent 60%),linear-gradient(135deg,#3a0812,#22060c 60%,#14040a),url(lacquer-flecks.C18Zw2c1.svg)!important;background-color:#22060c!important}
html[data-theme="velvet"] .mnav{background:#17060acc!important;border-bottom:1px solid #e3b96f26}
html[data-theme="velvet"] .cbar{background:#17060af2!important}
html[data-theme="velvet"] .hero[data-banner],html[data-theme="velvet"] .phero[data-banner]{background-image:linear-gradient(90deg,#17060af2 0%,#22080fc9 42%,#3a081266 75%,#17060a33 100%),linear-gradient(180deg,#17060a00 60%,#17060a 100%),var(--banner)!important}
html[data-theme="velvet"] .btn-primary,html[data-theme="velvet"] .ask-btn{color:#2a0a10!important;--ch-fg:#2a0a10!important;--ch-mark:#2a0a10!important}
html[data-theme="velvet"] .g-reviews,html[data-theme="velvet"] .g-review-grid,html[data-theme="velvet"] .rating{--g-card:#280b12;--g-ink:#fbf0e8;--g-muted:#d8bcb3;--g-star-off:#42161f}
html[data-theme="velvet"] .fox-arch:before{border-color:#e3b96f80;box-shadow:0 0 60px -10px #b8102c66}
html[data-theme="velvet"] .fox-arch-chip{background:#280b12cc;border-color:#e3b96f59}
html[data-theme="velvet"] .fox-arch-kicker{color:#e9c98f}

/* keep the facts strip above the page banner it overlaps */
.svc-facts-wrap{position:relative;z-index:2}