/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -0.035em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 0.25rem;
    --color-paper: light-dark(#ffffff, #1c1d1f);
    --color-ground: light-dark(#f4f4f1, #121314);
    --color-hover: light-dark(#fafaf8, #232427);
    --color-press: light-dark(#ededea, #2a2b2e);
    --color-raised: light-dark(#ffffff, #3a3c40);
    --color-ink: light-dark(#141615, #ecece8);
    --color-ink-2: light-dark(#3c403e, #b9bbb7);
    --color-muted: light-dark(#616563, #979995);
    --color-faint: light-dark(#8a8e8b, #8a8d89);
    --color-line: light-dark(#e3e4e0, #303235);
    --color-line-2: light-dark(#d1d3cf, #3e4043);
    --color-green: light-dark(#0f6e47, #5cc48a);
    --color-green-soft: light-dark(#e4f2ea, rgb(92 196 138 / 0.12));
    --color-green-light: #7fd1a6;
    --color-red: light-dark(#b0291e, #ff7a6e);
    --color-red-soft: light-dark(#fbeae7, rgb(255 122 110 / 0.1));
    --color-blue: light-dark(#2b59e0, #7497ff);
    --color-blue-soft: light-dark(#eaeffc, rgb(116 151 255 / 0.12));
    --color-amber: light-dark(#946405, #f0b43c);
    --color-amber-line: light-dark(#e3a826, #f0b43c);
    --color-amber-soft: light-dark(#fcf3de, rgb(240 180 60 / 0.14));
    --color-code: #141615;
    --color-code-ink: #e6e9e7;
    --color-code-dim: #8d9590;
    --font-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --text-2xs: 0.6875rem;
    --text-2xs--line-height: 1rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.125rem;
    --text-sm: 0.8125rem;
    --text-sm--line-height: 1.25rem;
    --text-base: 0.875rem;
    --text-base--line-height: 1.375rem;
    --text-md: 0.9375rem;
    --text-md--line-height: 1.5rem;
    --text-lg: 1rem;
    --text-lg--line-height: 1.5rem;
    --text-xl: 1.125rem;
    --text-xl--line-height: 1.625rem;
    --text-2xl: 1.375rem;
    --text-2xl--line-height: 1.75rem;
    --text-3xl: 1.75rem;
    --text-3xl--line-height: 2.125rem;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 2.5rem;
    --text-5xl: 3rem;
    --text-5xl--line-height: 3.125rem;
    --text-6xl: 4rem;
    --text-6xl--line-height: 4rem;
    --text-7xl: 5.25rem;
    --text-7xl--line-height: 5.25rem;
    --tracking-tightest: -0.045em;
    --container-page: 77.5rem;
    --color-shade: light-dark(rgb(20 20 18 / 0.04), rgb(0 0 0 / 0.4));
    --color-shade-2: light-dark(rgb(20 20 18 / 0.06), rgb(0 0 0 / 0.45));
    --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .-inset-1\.5 {
    inset: calc(var(--spacing) * -1.5);
  }
  .-inset-2 {
    inset: calc(var(--spacing) * -2);
  }
  .-inset-3 {
    inset: calc(var(--spacing) * -3);
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-auto {
    inset: auto;
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-x-1 {
    inset-inline: calc(var(--spacing) * 1);
  }
  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }
  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }
  .inset-x-5 {
    inset-inline: calc(var(--spacing) * 5);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-13 {
    top: calc(var(--spacing) * 13);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-2\.5 {
    bottom: calc(var(--spacing) * 2.5);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-full {
    bottom: 100%;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .isolate {
    isolation: isolate;
  }
  .-z-1 {
    z-index: calc(1 * -1);
  }
  .z-2 {
    z-index: 2;
  }
  .z-3 {
    z-index: 3;
  }
  .z-5 {
    z-index: 5;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-21 {
    z-index: 21;
  }
  .z-22 {
    z-index: 22;
  }
  .z-25 {
    z-index: 25;
  }
  .z-28 {
    z-index: 28;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-46 {
    z-index: 46;
  }
  .z-60 {
    z-index: 60;
  }
  .order-first {
    order: -9999;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-0\.5 {
    margin: calc(var(--spacing) * 0.5);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }
  .-mx-3\.5 {
    margin-inline: calc(var(--spacing) * -3.5);
  }
  .-mx-4\.5 {
    margin-inline: calc(var(--spacing) * -4.5);
  }
  .mx-0\.75 {
    margin-inline: calc(var(--spacing) * 0.75);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-3 {
    margin-block: calc(var(--spacing) * -3);
  }
  .my-auto {
    margin-block: auto;
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-1\.5 {
    margin-top: calc(var(--spacing) * -1.5);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-10 {
    margin-top: calc(var(--spacing) * -10);
  }
  .-mt-16 {
    margin-top: calc(var(--spacing) * -16);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-0\.75 {
    margin-top: calc(var(--spacing) * 0.75);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-4\.5 {
    margin-top: calc(var(--spacing) * 4.5);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mt-px {
    margin-top: 1px;
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-0\.75 {
    margin-right: calc(var(--spacing) * 0.75);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-2\.5 {
    margin-bottom: calc(var(--spacing) * -2.5);
  }
  .-mb-17 {
    margin-bottom: calc(var(--spacing) * -17);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .aspect-1\/2 {
    aspect-ratio: 1/2;
  }
  .aspect-3\/4 {
    aspect-ratio: 3/4;
  }
  .aspect-4\/3 {
    aspect-ratio: 4/3;
  }
  .aspect-16\/10 {
    aspect-ratio: 16/10;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-1\.75 {
    width: calc(var(--spacing) * 1.75);
    height: calc(var(--spacing) * 1.75);
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .size-2\.25 {
    width: calc(var(--spacing) * 2.25);
    height: calc(var(--spacing) * 2.25);
  }
  .size-2\.75 {
    width: calc(var(--spacing) * 2.75);
    height: calc(var(--spacing) * 2.75);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-5\.5 {
    width: calc(var(--spacing) * 5.5);
    height: calc(var(--spacing) * 5.5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-6\.5 {
    width: calc(var(--spacing) * 6.5);
    height: calc(var(--spacing) * 6.5);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-7\.5 {
    width: calc(var(--spacing) * 7.5);
    height: calc(var(--spacing) * 7.5);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-9\.5 {
    width: calc(var(--spacing) * 9.5);
    height: calc(var(--spacing) * 9.5);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-1\/2 {
    height: calc(1/2 * 100%);
  }
  .h-1\/3 {
    height: calc(1/3 * 100%);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-2\/5 {
    height: calc(2/5 * 100%);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-3\/5 {
    height: calc(3/5 * 100%);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .h-4\/5 {
    height: calc(4/5 * 100%);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6\.5 {
    height: calc(var(--spacing) * 6.5);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-7\.5 {
    height: calc(var(--spacing) * 7.5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-8\.5 {
    height: calc(var(--spacing) * 8.5);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-9\.5 {
    height: calc(var(--spacing) * 9.5);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-10\.5 {
    height: calc(var(--spacing) * 10.5);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-11\.5 {
    height: calc(var(--spacing) * 11.5);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-12\.5 {
    height: calc(var(--spacing) * 12.5);
  }
  .h-13 {
    height: calc(var(--spacing) * 13);
  }
  .h-17 {
    height: calc(var(--spacing) * 17);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-140 {
    height: calc(var(--spacing) * 140);
  }
  .h-full {
    height: 100%;
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }
  .min-h-21 {
    min-height: calc(var(--spacing) * 21);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }
  .min-h-84 {
    min-height: calc(var(--spacing) * 84);
  }
  .min-h-140 {
    min-height: calc(var(--spacing) * 140);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\/2 {
    width: calc(1/2 * 100%);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-1\/4 {
    width: calc(1/4 * 100%);
  }
  .w-1\/6 {
    width: calc(1/6 * 100%);
  }
  .w-2\/5 {
    width: calc(2/5 * 100%);
  }
  .w-3\/4 {
    width: calc(3/4 * 100%);
  }
  .w-4\/5 {
    width: calc(4/5 * 100%);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-68 {
    width: calc(var(--spacing) * 68);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-75 {
    width: calc(var(--spacing) * 75);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-88 {
    width: calc(var(--spacing) * 88);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-110 {
    width: calc(var(--spacing) * 110);
  }
  .w-130 {
    width: calc(var(--spacing) * 130);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-0 {
    max-width: calc(var(--spacing) * 0);
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-2xs {
    max-width: var(--container-2xs);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-30 {
    max-width: calc(var(--spacing) * 30);
  }
  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }
  .max-w-50 {
    max-width: calc(var(--spacing) * 50);
  }
  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }
  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }
  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }
  .max-w-88 {
    max-width: calc(var(--spacing) * 88);
  }
  .max-w-95 {
    max-width: calc(var(--spacing) * 95);
  }
  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }
  .max-w-100 {
    max-width: calc(var(--spacing) * 100);
  }
  .max-w-104 {
    max-width: calc(var(--spacing) * 104);
  }
  .max-w-105 {
    max-width: calc(var(--spacing) * 105);
  }
  .max-w-112 {
    max-width: calc(var(--spacing) * 112);
  }
  .max-w-115 {
    max-width: calc(var(--spacing) * 115);
  }
  .max-w-117 {
    max-width: calc(var(--spacing) * 117);
  }
  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }
  .max-w-130 {
    max-width: calc(var(--spacing) * 130);
  }
  .max-w-136 {
    max-width: calc(var(--spacing) * 136);
  }
  .max-w-140 {
    max-width: calc(var(--spacing) * 140);
  }
  .max-w-150 {
    max-width: calc(var(--spacing) * 150);
  }
  .max-w-152 {
    max-width: calc(var(--spacing) * 152);
  }
  .max-w-160 {
    max-width: calc(var(--spacing) * 160);
  }
  .max-w-190 {
    max-width: calc(var(--spacing) * 190);
  }
  .max-w-200 {
    max-width: calc(var(--spacing) * 200);
  }
  .max-w-240 {
    max-width: calc(var(--spacing) * 240);
  }
  .max-w-260 {
    max-width: calc(var(--spacing) * 260);
  }
  .max-w-275 {
    max-width: calc(var(--spacing) * 275);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-page {
    max-width: var(--container-page);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }
  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }
  .min-w-45 {
    min-width: calc(var(--spacing) * 45);
  }
  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }
  .min-w-180 {
    min-width: calc(var(--spacing) * 180);
  }
  .min-w-200 {
    min-width: calc(var(--spacing) * 200);
  }
  .min-w-240 {
    min-width: calc(var(--spacing) * 240);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-auto {
    flex: auto;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .basis-0 {
    flex-basis: calc(var(--spacing) * 0);
  }
  .basis-48 {
    flex-basis: calc(var(--spacing) * 48);
  }
  .basis-56 {
    flex-basis: calc(var(--spacing) * 56);
  }
  .basis-60 {
    flex-basis: calc(var(--spacing) * 60);
  }
  .basis-full {
    flex-basis: 100%;
  }
  .-rotate-3 {
    rotate: calc(3deg * -1);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-text {
    cursor: text;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-content-center {
    place-content: center;
  }
  .place-items-center {
    place-items: center;
  }
  .content-start {
    align-content: flex-start;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-center {
    justify-items: center;
  }
  .justify-items-end {
    justify-items: end;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-1\.75 {
    gap: calc(var(--spacing) * 1.75);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-4\.5 {
    gap: calc(var(--spacing) * 4.5);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-px {
    gap: 1px;
  }
  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }
  .gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-line > :not(:last-child)) {
    border-color: var(--color-line);
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .justify-self-center {
    justify-self: center;
  }
  .justify-self-end {
    justify-self: end;
  }
  .justify-self-start {
    justify-self: start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: var(--radius);
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-sm {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-green\/30 {
    border-color: color-mix(in srgb, light-dark(#0f6e47, #5cc48a) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-green\/30 {
      border-color: color-mix(in oklab, var(--color-green) 30%, transparent);
    }
  }
  .border-line\/70 {
    border-color: color-mix(in srgb, light-dark(#e3e4e0, #303235) 70%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-line\/70 {
      border-color: color-mix(in oklab, var(--color-line) 70%, transparent);
    }
  }
  .border-paper\/15 {
    border-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 15%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-paper\/15 {
      border-color: color-mix(in oklab, var(--color-paper) 15%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-amber-line {
    border-color: var(--color-amber-line);
  }
  .border-blue {
    border-color: var(--color-blue);
  }
  .border-faint {
    border-color: var(--color-faint);
  }
  .border-ink {
    border-color: var(--color-ink);
  }
  .border-line {
    border-color: var(--color-line);
  }
  .border-line-2 {
    border-color: var(--color-line-2);
  }
  .border-paper {
    border-color: var(--color-paper);
  }
  .border-red {
    border-color: var(--color-red);
  }
  .border-transparent {
    border-color: transparent;
  }
  .bg-black\/35 {
    background-color: color-mix(in srgb, #000 35%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/35 {
      background-color: color-mix(in oklab, var(--color-black) 35%, transparent);
    }
  }
  .bg-ink\/15 {
    background-color: color-mix(in srgb, light-dark(#141615, #ecece8) 15%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-ink\/15 {
      background-color: color-mix(in oklab, var(--color-ink) 15%, transparent);
    }
  }
  .bg-paper\/10 {
    background-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 10%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-paper\/10 {
      background-color: color-mix(in oklab, var(--color-paper) 10%, transparent);
    }
  }
  .bg-paper\/80 {
    background-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 80%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-paper\/80 {
      background-color: color-mix(in oklab, var(--color-paper) 80%, transparent);
    }
  }
  .bg-paper\/88 {
    background-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 88%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-paper\/88 {
      background-color: color-mix(in oklab, var(--color-paper) 88%, transparent);
    }
  }
  .bg-paper\/90 {
    background-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 90%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-paper\/90 {
      background-color: color-mix(in oklab, var(--color-paper) 90%, transparent);
    }
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-amber {
    background-color: var(--color-amber);
  }
  .bg-amber-line {
    background-color: var(--color-amber-line);
  }
  .bg-amber-soft {
    background-color: var(--color-amber-soft);
  }
  .bg-blue {
    background-color: var(--color-blue);
  }
  .bg-blue-soft {
    background-color: var(--color-blue-soft);
  }
  .bg-code {
    background-color: var(--color-code);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-green {
    background-color: var(--color-green);
  }
  .bg-green-light {
    background-color: var(--color-green-light);
  }
  .bg-green-soft {
    background-color: var(--color-green-soft);
  }
  .bg-ground {
    background-color: var(--color-ground);
  }
  .bg-hover {
    background-color: var(--color-hover);
  }
  .bg-ink {
    background-color: var(--color-ink);
  }
  .bg-ink-2 {
    background-color: var(--color-ink-2);
  }
  .bg-line {
    background-color: var(--color-line);
  }
  .bg-line-2 {
    background-color: var(--color-line-2);
  }
  .bg-paper {
    background-color: var(--color-paper);
  }
  .bg-press {
    background-color: var(--color-press);
  }
  .bg-raised {
    background-color: var(--color-raised);
  }
  .bg-red {
    background-color: var(--color-red);
  }
  .bg-red-soft {
    background-color: var(--color-red-soft);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .object-left {
    object-position: left;
  }
  .object-right {
    object-position: right;
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-5\.5 {
    padding: calc(var(--spacing) * 5.5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-1\.25 {
    padding-inline: calc(var(--spacing) * 1.25);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-2\.25 {
    padding-inline: calc(var(--spacing) * 2.25);
  }
  .px-2\.75 {
    padding-inline: calc(var(--spacing) * 2.75);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-3\.25 {
    padding-inline: calc(var(--spacing) * 3.25);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-4\.5 {
    padding-inline: calc(var(--spacing) * 4.5);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-5\.5 {
    padding-inline: calc(var(--spacing) * 5.5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-0\.75 {
    padding-block: calc(var(--spacing) * 0.75);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-1\.25 {
    padding-block: calc(var(--spacing) * 1.25);
  }
  .py-1\.75 {
    padding-block: calc(var(--spacing) * 1.75);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-2\.75 {
    padding-block: calc(var(--spacing) * 2.75);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-4\.5 {
    padding-block: calc(var(--spacing) * 4.5);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-22 {
    padding-block: calc(var(--spacing) * 22);
  }
  .py-26 {
    padding-block: calc(var(--spacing) * 26);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-4\.5 {
    padding-top: calc(var(--spacing) * 4.5);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }
  .pt-28 {
    padding-top: calc(var(--spacing) * 28);
  }
  .pt-38 {
    padding-top: calc(var(--spacing) * 38);
  }
  .pr-0\.5 {
    padding-right: calc(var(--spacing) * 0.5);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-3\.5 {
    padding-right: calc(var(--spacing) * 3.5);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-4\.5 {
    padding-bottom: calc(var(--spacing) * 4.5);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }
  .pb-22 {
    padding-bottom: calc(var(--spacing) * 22);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-1\.25 {
    padding-left: calc(var(--spacing) * 1.25);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-7\.5 {
    padding-left: calc(var(--spacing) * 7.5);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .font-code {
    font-family: var(--font-code);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .font-text {
    font-family: var(--font-text);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-2xs {
    font-size: var(--text-2xs);
    line-height: var(--tw-leading, var(--text-2xs--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-md {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-5\.75 {
    --tw-leading: calc(var(--spacing) * 5.75);
    line-height: calc(var(--spacing) * 5.75);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-6\.25 {
    --tw-leading: calc(var(--spacing) * 6.25);
    line-height: calc(var(--spacing) * 6.25);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-tightest {
    --tw-tracking: var(--tracking-tightest);
    letter-spacing: var(--tracking-tightest);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-balance {
    text-wrap: balance;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-paper\/60 {
    color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-paper\/60 {
      color: color-mix(in oklab, var(--color-paper) 60%, transparent);
    }
  }
  .text-paper\/70 {
    color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 70%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-paper\/70 {
      color: color-mix(in oklab, var(--color-paper) 70%, transparent);
    }
  }
  .text-paper\/75 {
    color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 75%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-paper\/75 {
      color: color-mix(in oklab, var(--color-paper) 75%, transparent);
    }
  }
  .text-paper\/80 {
    color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 80%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-paper\/80 {
      color: color-mix(in oklab, var(--color-paper) 80%, transparent);
    }
  }
  .text-paper\/85 {
    color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 85%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-paper\/85 {
      color: color-mix(in oklab, var(--color-paper) 85%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-amber {
    color: var(--color-amber);
  }
  .text-amber-line {
    color: var(--color-amber-line);
  }
  .text-blue {
    color: var(--color-blue);
  }
  .text-code-dim {
    color: var(--color-code-dim);
  }
  .text-code-ink {
    color: var(--color-code-ink);
  }
  .text-faint {
    color: var(--color-faint);
  }
  .text-green {
    color: var(--color-green);
  }
  .text-green-light {
    color: var(--color-green-light);
  }
  .text-ground {
    color: var(--color-ground);
  }
  .text-ink {
    color: var(--color-ink);
  }
  .text-ink-2 {
    color: var(--color-ink-2);
  }
  .text-line-2 {
    color: var(--color-line-2);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .text-paper {
    color: var(--color-paper);
  }
  .text-red {
    color: var(--color-red);
  }
  .text-red-soft {
    color: var(--color-red-soft);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-line-2 {
    text-decoration-color: var(--color-line-2);
  }
  .underline-offset-3 {
    text-underline-offset: 3px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-55 {
    opacity: 55%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-85 {
    opacity: 85%;
  }
  .shadow-card {
    --tw-shadow: 0 18px 40px -16px var(--tw-shadow-color, rgb(10 12 11 / 0.5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-edge {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--color-line));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-float {
    --tw-shadow: 0 40px 80px -40px var(--tw-shadow-color, rgb(18 20 19 / 0.3));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lift {
    --tw-shadow: 0 28px 56px -18px var(--tw-shadow-color, rgb(10 12 11 / 0.45));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-panel {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, var(--color-shade)), 0 6px 22px var(--tw-shadow-color, var(--color-shade-2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-snap {
    --tw-ease: var(--ease-snap);
    transition-timing-function: var(--ease-snap);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  @media (hover: hover) {
    .group-hover\:visible:is(:where(.group):hover *) {
      visibility: visible;
    }
  }
  @media (hover: hover) {
    .group-hover\:ml-1\.5:is(:where(.group):hover *) {
      margin-left: calc(var(--spacing) * 1.5);
    }
  }
  @media (hover: hover) {
    .group-hover\:max-w-24:is(:where(.group):hover *) {
      max-width: calc(var(--spacing) * 24);
    }
  }
  @media (hover: hover) {
    .group-hover\:text-ink:is(:where(.group):hover *) {
      color: var(--color-ink);
    }
  }
  @media (hover: hover) {
    .group-hover\:text-ink-2:is(:where(.group):hover *) {
      color: var(--color-ink-2);
    }
  }
  .group-focus\:visible:is(:where(.group):focus *) {
    visibility: visible;
  }
  .group-focus\:ml-1\.5:is(:where(.group):focus *) {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .group-focus\:max-w-24:is(:where(.group):focus *) {
    max-width: calc(var(--spacing) * 24);
  }
  .first\:pl-4:first-child {
    padding-left: calc(var(--spacing) * 4);
  }
  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .odd\:bg-hover:nth-child(odd) {
    background-color: var(--color-hover);
  }
  .focus-within\:border-ink:focus-within {
    border-color: var(--color-ink);
  }
  .focus-within\:text-ink:focus-within {
    color: var(--color-ink);
  }
  .focus-within\:shadow-focus:focus-within {
    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--color-green-soft));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  @media (hover: hover) {
    .hover\:border-faint:hover {
      border-color: var(--color-faint);
    }
  }
  @media (hover: hover) {
    .hover\:border-ink:hover {
      border-color: var(--color-ink);
    }
  }
  @media (hover: hover) {
    .hover\:border-ink-2:hover {
      border-color: var(--color-ink-2);
    }
  }
  @media (hover: hover) {
    .hover\:border-line-2:hover {
      border-color: var(--color-line-2);
    }
  }
  @media (hover: hover) {
    .hover\:bg-ground\/60:hover {
      background-color: color-mix(in srgb, light-dark(#f4f4f1, #121314) 60%, transparent);
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-ground\/60:hover {
        background-color: color-mix(in oklab, var(--color-ground) 60%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .hover\:bg-paper\/10:hover {
      background-color: color-mix(in srgb, light-dark(#ffffff, #1c1d1f) 10%, transparent);
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-paper\/10:hover {
        background-color: color-mix(in oklab, var(--color-paper) 10%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .hover\:bg-ground:hover {
      background-color: var(--color-ground);
    }
  }
  @media (hover: hover) {
    .hover\:bg-hover:hover {
      background-color: var(--color-hover);
    }
  }
  @media (hover: hover) {
    .hover\:bg-ink-2:hover {
      background-color: var(--color-ink-2);
    }
  }
  @media (hover: hover) {
    .hover\:bg-line:hover {
      background-color: var(--color-line);
    }
  }
  @media (hover: hover) {
    .hover\:bg-paper:hover {
      background-color: var(--color-paper);
    }
  }
  @media (hover: hover) {
    .hover\:bg-press:hover {
      background-color: var(--color-press);
    }
  }
  @media (hover: hover) {
    .hover\:bg-red-soft:hover {
      background-color: var(--color-red-soft);
    }
  }
  @media (hover: hover) {
    .hover\:text-code-ink:hover {
      color: var(--color-code-ink);
    }
  }
  @media (hover: hover) {
    .hover\:text-ink:hover {
      color: var(--color-ink);
    }
  }
  @media (hover: hover) {
    .hover\:text-paper:hover {
      color: var(--color-paper);
    }
  }
  @media (hover: hover) {
    .hover\:text-red:hover {
      color: var(--color-red);
    }
  }
  @media (hover: hover) {
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
  @media (hover: hover) {
    .hover\:decoration-ink:hover {
      text-decoration-color: var(--color-ink);
    }
  }
  @media (hover: hover) {
    .hover\:opacity-75:hover {
      opacity: 75%;
    }
  }
  @media (hover: hover) {
    .hover\:opacity-88:hover {
      opacity: 88%;
    }
  }
  .focus\:border-ink:focus {
    border-color: var(--color-ink);
  }
  .focus\:text-ink:focus {
    color: var(--color-ink);
  }
  .focus\:shadow-focus:focus {
    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--color-green-soft));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:border-ink:focus-visible {
    border-color: var(--color-ink);
  }
  .focus-visible\:shadow-focus:focus-visible {
    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--color-green-soft));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .disabled\:cursor-default:disabled {
    cursor: default;
  }
  .disabled\:bg-amber-soft:disabled {
    background-color: var(--color-amber-soft);
  }
  .disabled\:bg-hover:disabled {
    background-color: var(--color-hover);
  }
  .disabled\:bg-paper:disabled {
    background-color: var(--color-paper);
  }
  .disabled\:bg-press:disabled {
    background-color: var(--color-press);
  }
  .disabled\:bg-transparent:disabled {
    background-color: transparent;
  }
  .disabled\:text-muted:disabled {
    color: var(--color-muted);
  }
  .disabled\:opacity-30:disabled {
    opacity: 30%;
  }
  .disabled\:opacity-35:disabled {
    opacity: 35%;
  }
  .disabled\:opacity-45:disabled {
    opacity: 45%;
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  .disabled\:opacity-60:disabled {
    opacity: 60%;
  }
  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 40rem) {
    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }
  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }
  @media (min-width: 40rem) {
    .sm\:flex {
      display: flex;
    }
  }
  @media (min-width: 40rem) {
    .sm\:hidden {
      display: none;
    }
  }
  @media (min-width: 40rem) {
    .sm\:inline {
      display: inline;
    }
  }
  @media (min-width: 40rem) {
    .sm\:inline-flex {
      display: inline-flex;
    }
  }
  @media (min-width: 40rem) {
    .sm\:w-2\/5 {
      width: calc(2/5 * 100%);
    }
  }
  @media (min-width: 40rem) {
    .sm\:w-62\.5 {
      width: calc(var(--spacing) * 62.5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:w-72 {
      width: calc(var(--spacing) * 72);
    }
  }
  @media (min-width: 40rem) {
    .sm\:w-auto {
      width: auto;
    }
  }
  @media (min-width: 40rem) {
    .sm\:max-w-105 {
      max-width: calc(var(--spacing) * 105);
    }
  }
  @media (min-width: 40rem) {
    .sm\:flex-none {
      flex: none;
    }
  }
  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 40rem) {
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 40rem) {
    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 40rem) {
    .sm\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  @media (min-width: 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }
  @media (min-width: 40rem) {
    .sm\:items-baseline {
      align-items: baseline;
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-1\.5 {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-7 {
      gap: calc(var(--spacing) * 7);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-x-5 {
      column-gap: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 40rem) {
    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 40rem) {
    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 40rem) {
    .sm\:px-2\.5 {
      padding-inline: calc(var(--spacing) * 2.5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:px-4\.5 {
      padding-inline: calc(var(--spacing) * 4.5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 40rem) {
    .sm\:px-9 {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  @media (min-width: 40rem) {
    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  @media (min-width: 40rem) {
    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 40rem) {
    .sm\:py-9 {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  @media (min-width: 40rem) {
    .sm\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  @media (min-width: 40rem) {
    .sm\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 40rem) {
    .sm\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:pb-5 {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 40rem) {
    .sm\:pb-6 {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 48rem) {
    .md\:top-1\/4 {
      top: calc(1/4 * 100%);
    }
  }
  @media (min-width: 48rem) {
    .md\:top-13 {
      top: calc(var(--spacing) * 13);
    }
  }
  @media (min-width: 48rem) {
    .md\:bottom-3\.5 {
      bottom: calc(var(--spacing) * 3.5);
    }
  }
  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 48rem) {
    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }
  }
  @media (min-width: 48rem) {
    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }
  @media (min-width: 48rem) {
    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 48rem) {
    .md\:mx-auto {
      margin-inline: auto;
    }
  }
  @media (min-width: 48rem) {
    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  @media (min-width: 48rem) {
    .md\:mr-auto {
      margin-right: auto;
    }
  }
  @media (min-width: 48rem) {
    .md\:ml-8 {
      margin-left: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 48rem) {
    .md\:block {
      display: block;
    }
  }
  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
  }
  @media (min-width: 48rem) {
    .md\:grid {
      display: grid;
    }
  }
  @media (min-width: 48rem) {
    .md\:hidden {
      display: none;
    }
  }
  @media (min-width: 48rem) {
    .md\:inline {
      display: inline;
    }
  }
  @media (min-width: 48rem) {
    .md\:inline-flex {
      display: inline-flex;
    }
  }
  @media (min-width: 48rem) {
    .md\:size-2\.25 {
      width: calc(var(--spacing) * 2.25);
      height: calc(var(--spacing) * 2.25);
    }
  }
  @media (min-width: 48rem) {
    .md\:h-9 {
      height: calc(var(--spacing) * 9);
    }
  }
  @media (min-width: 48rem) {
    .md\:h-10 {
      height: calc(var(--spacing) * 10);
    }
  }
  @media (min-width: 48rem) {
    .md\:h-148 {
      height: calc(var(--spacing) * 148);
    }
  }
  @media (min-width: 48rem) {
    .md\:h-auto {
      height: auto;
    }
  }
  @media (min-width: 48rem) {
    .md\:w-65 {
      width: calc(var(--spacing) * 65);
    }
  }
  @media (min-width: 48rem) {
    .md\:w-88 {
      width: calc(var(--spacing) * 88);
    }
  }
  @media (min-width: 48rem) {
    .md\:w-104 {
      width: calc(var(--spacing) * 104);
    }
  }
  @media (min-width: 48rem) {
    .md\:w-112 {
      width: calc(var(--spacing) * 112);
    }
  }
  @media (min-width: 48rem) {
    .md\:w-120 {
      width: calc(var(--spacing) * 120);
    }
  }
  @media (min-width: 48rem) {
    .md\:max-w-80 {
      max-width: calc(var(--spacing) * 80);
    }
  }
  @media (min-width: 48rem) {
    .md\:max-w-lg {
      max-width: var(--container-lg);
    }
  }
  @media (min-width: 48rem) {
    .md\:min-w-32 {
      min-width: calc(var(--spacing) * 32);
    }
  }
  @media (min-width: 48rem) {
    .md\:min-w-220 {
      min-width: calc(var(--spacing) * 220);
    }
  }
  @media (min-width: 48rem) {
    .md\:min-w-fit {
      min-width: fit-content;
    }
  }
  @media (min-width: 48rem) {
    .md\:flex-1 {
      flex: 1;
    }
  }
  @media (min-width: 48rem) {
    .md\:flex-initial {
      flex: 0 auto;
    }
  }
  @media (min-width: 48rem) {
    .md\:flex-none {
      flex: none;
    }
  }
  @media (min-width: 48rem) {
    .md\:basis-0 {
      flex-basis: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  @media (min-width: 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }
  @media (min-width: 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-1\.75 {
      gap: calc(var(--spacing) * 1.75);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 48rem) {
    .md\:gap-14 {
      gap: calc(var(--spacing) * 14);
    }
  }
  @media (min-width: 48rem) {
    .md\:rounded-none {
      border-radius: 0;
    }
  }
  @media (min-width: 48rem) {
    .md\:rounded-l-none {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  @media (min-width: 48rem) {
    .md\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  @media (min-width: 48rem) {
    .md\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  @media (min-width: 48rem) {
    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }
  }
  @media (min-width: 48rem) {
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-2\.5 {
      padding-inline: calc(var(--spacing) * 2.5);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 48rem) {
    .md\:px-9 {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  @media (min-width: 48rem) {
    .md\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  @media (min-width: 48rem) {
    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  @media (min-width: 48rem) {
    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  @media (min-width: 48rem) {
    .md\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 48rem) {
    .md\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }
  }
  @media (min-width: 48rem) {
    .md\:pr-12 {
      padding-right: calc(var(--spacing) * 12);
    }
  }
  @media (min-width: 48rem) {
    .md\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 48rem) {
    .md\:pb-7 {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  @media (min-width: 48rem) {
    .md\:pl-2\.5 {
      padding-left: calc(var(--spacing) * 2.5);
    }
  }
  @media (min-width: 48rem) {
    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  @media (min-width: 48rem) {
    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  @media (min-width: 48rem) {
    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  @media (min-width: 48rem) {
    .md\:whitespace-pre {
      white-space: pre;
    }
  }
  @media (min-width: 48rem) {
    .md\:opacity-0 {
      opacity: 0%;
    }
  }
  @media (min-width: 48rem) {
    @media (hover: hover) {
      .md\:group-hover\:opacity-100:is(:where(.group):hover *) {
        opacity: 100%;
      }
    }
  }
  @media (min-width: 48rem) {
    .md\:focus-within\:opacity-100:focus-within {
      opacity: 100%;
    }
  }
  @media (min-width: 64rem) {
    .lg\:absolute {
      position: absolute;
    }
  }
  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }
  }
  @media (min-width: 64rem) {
    .lg\:inset-x-8 {
      inset-inline: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 64rem) {
    .lg\:top-8 {
      top: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 64rem) {
    .lg\:top-16 {
      top: calc(var(--spacing) * 16);
    }
  }
  @media (min-width: 64rem) {
    .lg\:top-25 {
      top: calc(var(--spacing) * 25);
    }
  }
  @media (min-width: 64rem) {
    .lg\:top-28 {
      top: calc(var(--spacing) * 28);
    }
  }
  @media (min-width: 64rem) {
    .lg\:-right-14 {
      right: calc(var(--spacing) * -14);
    }
  }
  @media (min-width: 64rem) {
    .lg\:bottom-8 {
      bottom: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 64rem) {
    .lg\:left-8 {
      left: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 64rem) {
    .lg\:order-first {
      order: -9999;
    }
  }
  @media (min-width: 64rem) {
    .lg\:order-none {
      order: 0;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }
  }
  @media (min-width: 64rem) {
    .lg\:col-start-9 {
      grid-column-start: 9;
    }
  }
  @media (min-width: 64rem) {
    .lg\:row-span-2 {
      grid-row: span 2 / span 2;
    }
  }
  @media (min-width: 64rem) {
    .lg\:m-0 {
      margin: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 64rem) {
    .lg\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  @media (min-width: 64rem) {
    .lg\:mt-20 {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  @media (min-width: 64rem) {
    .lg\:-mr-2 {
      margin-right: calc(var(--spacing) * -2);
    }
  }
  @media (min-width: 64rem) {
    .lg\:-mr-16 {
      margin-right: calc(var(--spacing) * -16);
    }
  }
  @media (min-width: 64rem) {
    .lg\:ml-1 {
      margin-left: calc(var(--spacing) * 1);
    }
  }
  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex {
      display: flex;
    }
  }
  @media (min-width: 64rem) {
    .lg\:hidden {
      display: none;
    }
  }
  @media (min-width: 64rem) {
    .lg\:inline {
      display: inline;
    }
  }
  @media (min-width: 64rem) {
    .lg\:inline-flex {
      display: inline-flex;
    }
  }
  @media (min-width: 64rem) {
    .lg\:h-52 {
      height: calc(var(--spacing) * 52);
    }
  }
  @media (min-width: 64rem) {
    .lg\:h-72 {
      height: calc(var(--spacing) * 72);
    }
  }
  @media (min-width: 64rem) {
    .lg\:w-55 {
      width: calc(var(--spacing) * 55);
    }
  }
  @media (min-width: 64rem) {
    .lg\:w-84 {
      width: calc(var(--spacing) * 84);
    }
  }
  @media (min-width: 64rem) {
    .lg\:w-auto {
      width: auto;
    }
  }
  @media (min-width: 64rem) {
    .lg\:max-w-md {
      max-width: var(--container-md);
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex-1 {
      flex: 1;
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex-5 {
      flex: 5;
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex-8 {
      flex: 8;
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex-none {
      flex: none;
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .lg\:flex-col {
      flex-direction: column;
    }
  }
  @media (min-width: 64rem) {
    .lg\:items-center {
      align-items: center;
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-14 {
      gap: calc(var(--spacing) * 14);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-22 {
      gap: calc(var(--spacing) * 22);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-x-10 {
      column-gap: calc(var(--spacing) * 10);
    }
  }
  @media (min-width: 64rem) {
    .lg\:gap-x-12 {
      column-gap: calc(var(--spacing) * 12);
    }
  }
  @media (min-width: 64rem) {
    .lg\:self-start {
      align-self: flex-start;
    }
  }
  @media (min-width: 64rem) {
    .lg\:overflow-visible {
      overflow: visible;
    }
  }
  @media (min-width: 64rem) {
    .lg\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  @media (min-width: 64rem) {
    .lg\:border-l-2 {
      border-left-style: var(--tw-border-style);
      border-left-width: 2px;
    }
  }
  @media (min-width: 64rem) {
    .lg\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 64rem) {
    .lg\:p-7 {
      padding: calc(var(--spacing) * 7);
    }
  }
  @media (min-width: 64rem) {
    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 64rem) {
    .lg\:p-9 {
      padding: calc(var(--spacing) * 9);
    }
  }
  @media (min-width: 64rem) {
    .lg\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:px-11 {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  @media (min-width: 64rem) {
    .lg\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  @media (min-width: 64rem) {
    .lg\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  @media (min-width: 64rem) {
    .lg\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }
  }
  @media (min-width: 64rem) {
    .lg\:py-36 {
      padding-block: calc(var(--spacing) * 36);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pt-5 {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pt-10 {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pt-36 {
      padding-top: calc(var(--spacing) * 36);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pt-50 {
      padding-top: calc(var(--spacing) * 50);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pb-1\.5 {
      padding-bottom: calc(var(--spacing) * 1.5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pb-5 {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pb-20 {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pb-32 {
      padding-bottom: calc(var(--spacing) * 32);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  @media (min-width: 64rem) {
    .lg\:pl-12 {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  @media (min-width: 64rem) {
    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:leading-relaxed {
      --tw-leading: var(--leading-relaxed);
      line-height: var(--leading-relaxed);
    }
  }
  @media (min-width: 80rem) {
    .xl\:block {
      display: block;
    }
  }
  @media (min-width: 80rem) {
    .xl\:hidden {
      display: none;
    }
  }
  @media (min-width: 80rem) {
    .xl\:inline {
      display: inline;
    }
  }
  @media (min-width: 80rem) {
    .xl\:gap-20 {
      gap: calc(var(--spacing) * 20);
    }
  }
  @media (min-width: 80rem) {
    .xl\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
  @media (min-width: 80rem) {
    .xl\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }
  }
  @media (min-width: 80rem) {
    .xl\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  @media (min-width: 80rem) {
    .xl\:py-44 {
      padding-block: calc(var(--spacing) * 44);
    }
  }
  @media (min-width: 80rem) {
    .xl\:pt-40 {
      padding-top: calc(var(--spacing) * 40);
    }
  }
  @media (min-width: 80rem) {
    .xl\:pb-32 {
      padding-bottom: calc(var(--spacing) * 32);
    }
  }
  @media (min-width: 80rem) {
    .xl\:pb-40 {
      padding-bottom: calc(var(--spacing) * 40);
    }
  }
  @media (min-width: 80rem) {
    .xl\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  @media (min-width: 80rem) {
    .xl\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@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-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer components {
/* base.css */
/* Shared by every Fairpage page: what the utilities cannot say. */

::selection { background: var(--color-ink); color: #fff; }
:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

/* Entrance: an element rises into place. --i staggers siblings by 50ms. */
@keyframes fp-enter { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: fp-enter .8s calc(var(--i, 0) * 50ms) cubic-bezier(.16, 1, .3, 1) both; }
}

/* A photo's lower edge darkened so a card or caption on it stays legible. */
.scrim { position: relative; }
.scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(10 12 11 / 0) 55%, rgb(10 12 11 / .35)); }

/* Selects draw their own chevron, inset like an input's text, instead of the
   browser's arrow against the edge. currentColor is not available in a data
   URL, so the chevron is the muted grey on light and dark alike. A select
   with padding utilities says its own right padding (pr-7 or more): the
   utilities win over this rule. */
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23858a86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem;
}

/* Checkboxes and radios in the ink colour, not the browser's blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-ink); }

/* Placeholder text in the palette's muted grey, readable on paper. */
::placeholder { color: var(--color-muted); opacity: 1; }

/* Strips that scroll sideways without a scrollbar under them. */
.quiet-scroll { scrollbar-width: none; }
.quiet-scroll::-webkit-scrollbar { display: none; }

/* chrome.css */
/* Fairpage's own pages (sites, account, a site's pages, the editor and the
   CMS) put `chrome` on <html>: they follow the reader's light or dark
   setting, or the choice made with the theme button (public/_fp/theme.js sets
   data-theme). Their colour tokens are light-dark() values in theme.css,
   which follow the color-scheme set here; the marketing pages stay light. */
.chrome { color-scheme: light dark; }
.chrome[data-theme="light"] { color-scheme: light; }
.chrome[data-theme="dark"] { color-scheme: dark; }

/* The theme button shows what it switches to. */
.chrome .theme-to-light { display: none; }
.chrome[data-theme="dark"] .theme-to-light { display: block; }
.chrome[data-theme="dark"] .theme-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .chrome:not([data-theme="light"]) .theme-to-light { display: block; }
  .chrome:not([data-theme="light"]) .theme-to-dark { display: none; }
}


/* cms.css */
/* From tablet width the sidebar stays under the top bar (h-13, 3.25rem) while
   the list scrolls, and scrolls on its own when the collections outgrow it. */
@media (min-width: 48rem) {
  .cms-sidebar { position: sticky; top: 3.25rem; align-self: flex-start; max-height: calc(100vh - 3.25rem); overflow-y: auto; }
}

/* A collection's list: fixed column widths from the header (status, dates,
   numbers), the name and text columns sharing the rest. The utilities have
   no table-layout. */
.cms-list { table-layout: fixed; }

/* A richtext field as it will read (cms-richtext): headings, lists, quotes
   and links inside a contenteditable, which utilities cannot reach. */
.cms-prose { line-height: 1.6; }
.cms-prose > * + * { margin-top: 0.625rem; }
.cms-prose h2 { font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 600; margin-top: 1rem; }
.cms-prose h3 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 600; margin-top: 0.875rem; }
.cms-prose h2:first-child, .cms-prose h3:first-child { margin-top: 0; }
.cms-prose ul { list-style: disc; padding-left: 1.25rem; }
.cms-prose ol { list-style: decimal; padding-left: 1.25rem; }
.cms-prose li + li { margin-top: 0.25rem; }
.cms-prose blockquote { border-left: 3px solid var(--color-line-2); padding-left: 0.875rem; color: var(--color-ink-2); }
.cms-prose a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 2px; }
.cms-prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-press); border-radius: 4px; padding: 0 0.25em; }
.cms-prose:empty::before { content: "Write here"; color: var(--color-faint); }

/* A list of photos alone (cms-repeater): as many columns as its own width
   holds at 7rem or more, which breakpoints cannot say inside a form. */
.cms-photos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

/* A record's status (the content form): its select marked by a dot, green
   and tinted once published. */
.cms-status-dot { background: var(--color-faint); }
.cms-status select { background-color: var(--color-paper); border-color: var(--color-line-2); }
.cms-status select:focus { border-color: var(--color-ink); }
.cms-status:has(option[value="published"]:checked) .cms-status-dot { background: var(--color-green); }
.cms-status:has(option[value="published"]:checked) select { background-color: var(--color-green-soft); border-color: color-mix(in srgb, var(--color-green) 45%, transparent); }

/* A row's View page and More menus are <details>: no marker, and a chevron
   turns while its menu is open. */
.fp-menu-open summary::-webkit-details-marker { display: none; }
.fp-menu-open[open] summary { background: var(--color-press); color: var(--color-ink); }
.fp-menu-open[open] summary .fp-chevron { rotate: 180deg; }

/* A collection's list on a phone: the name and status columns only, so it
   fits without scrolling sideways. */
@media (width < 48rem) {
  .cms-list .cms-minor { display: none; }
}

/* editor.css */
/* The editor (app/components/fp-editor.x.html). */

/* The canvas: the draft page in an iframe below the top bar (52px), 12px
   from the window's other edges. loadCanvas replaces the frame and keeps only its id, so it is styled
   by id; an iframe does not stretch between insets, hence the calc() sizes. */
#fp-canvas-frame {
  position: fixed; top: 52px; left: 12px;
  width: calc(100% - 24px); height: calc(100% - 64px);
  display: block; border: 0; border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--color-line), 0 1px 2px var(--color-shade), 0 16px 36px -18px var(--color-shade-2);
  transition: opacity .2s ease-out;
}
/* A page on its way in, after a page switch or a followed link. */
html.fp-loading #fp-canvas-frame { opacity: .55; }
/* The phone view: 390 by at most 844 CSS pixels, an iPhone's, in a thin
   bezel drawn from the chrome's own surfaces. */
html.fp-phone #fp-canvas-frame {
  top: 68px; left: 50%; width: 390px; height: min(844px, calc(100% - 92px)); margin-left: -195px;
  border-radius: 30px;
  box-shadow: 0 0 0 1px var(--color-line-2), 0 0 0 7px var(--color-paper), 0 0 0 8px var(--color-line),
    0 28px 56px -24px var(--color-shade-2);
}
/* Below md the canvas goes full width, to the window's bottom. */
@media (max-width: 47.99rem) {
  #fp-canvas-frame { left: 0; width: 100%; height: calc(100% - 52px); border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  #fp-canvas-frame { transition: none; }
}

/* The pages and usage popovers stay inside the window. */
.fp-pop { max-height: calc(100vh - 80px); }

/* The publish and discard dialogs, opened with showModal(). A display class
   would show a closed dialog, so the column is set here, while it is open.
   The browser's own max-width and max-height keep it inside the window. */
.fp-dialog[open] { display: flex; flex-direction: column; }
.fp-dialog::backdrop { background: rgb(0 0 0 / .35); }

/* The spinner beside an AI turn's current step. */
.fp-spin {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--color-amber-line); border-right-color: transparent;
  animation: fp-spin .8s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fp-spin { animation: none; }
}

/* Behind a picture in the Image panel: a light check, so a transparent PNG
   reads as one. */
.fp-checker {
  background-color: var(--color-hover);
  background-image: conic-gradient(var(--color-press) 25%, transparent 0 50%, var(--color-press) 0 75%, transparent 0);
  background-size: 16px 16px;
}

/* An example section's preview in Add a section: the section at a desktop
   width, shrunk to the card by the editor once it has loaded. */
.fp-section-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 600px;
  border: 0;
  transform: scale(0.3);
  transform-origin: 0 0;
  pointer-events: none;
}
.fp-section-thumb { transition: height .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .fp-section-thumb { transition: none; } }

/* home.css */
/* The home page (routes/index.x.html, app/components/fp-home-demo.x.html):
   what its utilities cannot say. */

.home { scroll-behavior: smooth; scroll-padding-top: 4.5rem; scrollbar-color: var(--color-line-2) var(--color-paper); }

/* The hero: a silk shader (public/_fp/home/hero.js) over warm white, which fades
   in once drawn; the gradient under it shows without WebGL. Its headline is
   centred, and three of the templates rise from under it into the fold. */
.home body { font-family: var(--font-text); }
/* The bar at the top is clear over the hero and frosts over in the first
   3rem of scrolling. Without scroll-driven animation it is always frosted. */
@keyframes nav-clear { from { border-color: transparent; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports (animation-timeline: scroll()) { .home-nav { animation: nav-clear linear both; animation-timeline: scroll(root); animation-range: 0 3rem; } }
/* On screens wider than a laptop's the page grows with the window instead of
   stopping at its column: the root size steps from 16px at 1440px wide to
   22px at 2560px, and everything set in rem, the page's width included,
   follows. Steps, not a size that follows every pixel, so a window being
   resized restyles the page only as it crosses one. */
@media (min-width: 1600px) { html.home { font-size: 17px; } }
@media (min-width: 1800px) { html.home { font-size: 18px; } }
@media (min-width: 2000px) { html.home { font-size: 19px; } }
@media (min-width: 2200px) { html.home { font-size: 20px; } }
@media (min-width: 2400px) { html.home { font-size: 21px; } }
@media (min-width: 2560px) { html.home { font-size: 22px; } }
.hero { background: radial-gradient(70% 60% at 50% 100%, #e7e9ec, rgb(231 233 236 / 0) 70%), #fafaf9; }
.hero-gl { opacity: 0; transition: opacity 2s cubic-bezier(.16, 1, .3, 1); }
.hero-gl.on { opacity: 1; }

/* Headings are set in Instrument Sans, with the phrase that carries them in
   Instrument Serif italic. The two have the same x-height, so the serif is
   only a hair larger, as italic hairlines read a little small. The hero's
   sans is a little lighter, as 500 reads heavier at its size, and its
   serif takes the silk's tint (--tint, set by public/_fp/home/hero.js from
   the template under the pointer) mixed into the ink, as the serif has no
   lighter weight to calm it with. */
.hero-title, .display { font-family: var(--font-text); font-weight: 500; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance; }
.hero-title { max-width: 13ch; font-size: clamp(2.75rem, 5.6vw, 5.25rem); line-height: 1; }
.hero-title em { color: color-mix(in oklab, var(--tint) 65%, var(--color-ink)); }
/* The silk in the letters, worked like metal: the tint mixed into the ink
   from 45% (--d) to 88% (--m), with two narrow glints of it lightened
   a little (--h), drifting slowly and leaning towards the pointer (--px, 0 to
   1, from hero.js). The flagship's platinum gives polished steel, a warm
   tint champagne. --tint, --px and --drift are registered so they ease
   rather than jump; --tint starts at the flagship's. */
@property --tint { syntax: "<color>"; inherits: true; initial-value: #a4a9b0; }
@property --px { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --drift { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero { transition: --tint 1.2s cubic-bezier(.16, 1, .3, 1), --px 1.6s cubic-bezier(.16, 1, .3, 1); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-title em { --d: color-mix(in oklab, var(--tint) 45%, var(--color-ink)); --m: color-mix(in oklab, var(--tint) 88%, var(--color-ink)); --h: color-mix(in oklab, var(--tint) 72%, #fff); margin: 0 -.08em; padding: 0 .08em; background: linear-gradient(100deg, var(--d) 0%, var(--m) 12%, var(--h) 19%, var(--m) 26%, var(--d) 40%, var(--m) 52%, var(--h) 60%, var(--m) 68%, var(--d) 82%, var(--m) 100%) calc((var(--drift) * .6 + var(--px) * .4) * 100%) 50% / 320% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@keyframes hero-drift { to { --drift: 1; } }
@media (prefers-reduced-motion: no-preference) { .hero-title em { animation: hero-drift 18s ease-in-out infinite alternate; } }
.hero-title em, .display em { font-family: var(--font-serif); font-size: 1.01em; font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 0; }
/* A section's heading beside its text: on a large screen the accent takes
   the second line, so the heading is two lines against the text's three. */
@media (min-width: 1024px) { .split em { display: block; line-height: inherit; } }

.morph-frame { box-shadow: 0 1px 0 rgb(20 20 19 / .04), 0 40px 80px -40px rgb(20 20 19 / .45); }

/* Templates under the hero's headline, each shown whole: one in a browser
   frame, and to each side, lower and behind it, one more, or two on a wide
   screen. The fan is as tall as its tallest frame after it rises, with room
   for the shadows. Sized in the fan's width (cqw), so they keep their places
   at any window size. As
   the page scrolls out of the hero the middle one rises and the two beside
   it move apart. */
.hero-fan { container-type: inline-size; position: relative; max-width: 120rem; height: 80cqw; margin-inline: auto; }
.fan-frame { --x: 0cqw; --y: 0cqw; position: absolute; top: 0; left: 50%; width: var(--w); translate: calc(-50% + var(--x)) var(--y); overflow: hidden; border-radius: 1rem; background: var(--color-paper); box-shadow: 0 1px 0 rgb(20 20 19 / .04), 0 40px 80px -40px rgb(20 20 19 / .45); }
.fan-c .tpl { aspect-ratio: 16 / 10; }
.fan-c { --w: 84cqw; z-index: 2; }
.fan-l1, .fan-r1 { --w: 60cqw; --y: 6cqw; z-index: 1; }
.fan-l1 { --x: -62cqw; }
.fan-r1 { --x: 62cqw; }
.fan-l2, .fan-r2 { display: none; }
@media (min-width: 768px) {
  .hero-fan { height: 47cqw; }
  .fan-c { --w: 58cqw; }
  .fan-l1, .fan-r1 { --w: 38cqw; --y: 5cqw; }
  .fan-l1 { --x: -40cqw; }
  .fan-r1 { --x: 40cqw; }
}
@media (min-width: 1280px) {
  .hero-fan { height: 40cqw; }
  .fan-c { --w: 50cqw; z-index: 3; }
  .fan-l1, .fan-r1 { --w: 32cqw; --y: 5cqw; z-index: 2; }
  .fan-l1 { --x: -33cqw; }
  .fan-r1 { --x: 33cqw; }
  .fan-l2, .fan-r2 { display: block; --w: 24cqw; --y: 11cqw; z-index: 1; }
  .fan-l2 { --x: -54cqw; }
  .fan-r2 { --x: 54cqw; }
}
@keyframes fan-c { to { translate: -50% -3cqw; } }
@keyframes fan-side { to { translate: calc(-50% + var(--x) * 1.12) calc(var(--y) - 1cqw); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .fan-frame { animation: fan-side linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    .fan-c { animation-name: fan-c; }
  }
}

/* The templates: two rows of them, small and framed, drifting in opposite
   directions behind a round panel with the section's heading. Each row holds
   its six templates twice and moves by half its width, so it loops without a
   seam; the gap is also at its end, so both halves are the same width. A row
   stops while the pointer or focus is in it, and with reduced motion the
   rows are swiped instead. On phones the heading sits above the rows. */
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; gap: 1rem; width: max-content; padding-right: 1rem; animation: mq 90s linear infinite; }
.mq-right { animation-direction: reverse; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq { to { translate: -50% 0; } }
.mq-card { flex: none; width: 17rem; padding: .375rem; border-radius: 1.125rem; background: var(--color-ground); box-shadow: 0 0 0 1px var(--color-line); cursor: pointer; transition: box-shadow .3s; }
.mq-card .tpl { aspect-ratio: 16 / 10; border-radius: .75rem; }
.mq-card:hover { box-shadow: 0 0 0 1px var(--color-line-2), 0 24px 48px -28px rgb(20 20 19 / .35); }
@media (min-width: 768px) {
  .mq-track { gap: 1.25rem; padding-right: 1.25rem; }
  .mq-card { width: 26rem; padding: .5rem; border-radius: 1.375rem; }
  .tpl-badge { position: absolute; top: 50%; left: 50%; z-index: 2; justify-content: center; width: 20rem; height: 20rem; border-radius: 50%; background: var(--color-paper); box-shadow: 0 0 0 .625rem rgb(255 255 255 / .6), 0 0 0 calc(.625rem + 1px) var(--color-line), 0 50px 100px -40px rgb(20 20 19 / .45); translate: -50% -50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; scrollbar-width: none; }
  .mq-track { animation: none; }
}

/* What would otherwise be plugins, as a row of cards, each with a small
   picture of the feature at work. On a large screen the section holds still
   while the page scrolls and the row moves left across it, one pixel for
   each scrolled; the pin is as tall as the row is wider than the window.
   Elsewhere, or without scroll-driven animation, the row is swiped. */
.plug-track { overflow-x: auto; padding-inline: 1.125rem; scroll-snap-type: x mandatory; scroll-padding-inline: 1.125rem; }
.plug-card { width: min(84vw, 23rem); scroll-snap-align: start; }
@media (min-width: 768px) { .plug-track { padding-inline: 2rem; scroll-padding-inline: 2rem; } }
@media (min-width: 1024px) {
  .plug-card { width: 25rem; }
  .plug-track { padding-inline: max(3rem, (100vw - 77.5rem) / 2 + 3rem); }
}
@keyframes plug-slide { to { translate: calc(100vw - 100%) 0; } }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plug-pin { height: calc(100svh + 8 * 25rem + 7 * 1.25rem + 2 * max(3rem, (100vw - 77.5rem) / 2 + 3rem) - 100vw); view-timeline: --plug block; }
    .plug-panel { position: sticky; top: 4.25rem; display: flex; flex-direction: column; justify-content: center; height: calc(100svh - 4.25rem); overflow: hidden; }
    .plug-track { width: max-content; overflow: visible; animation: plug-slide linear both; animation-timeline: --plug; animation-range: contain 0% contain 100%; }
  }
}

/* The waitlist field: an email and its button in one white capsule. */
.join-box { box-shadow: 0 0 0 1px var(--color-line), 0 18px 40px -24px rgb(20 20 19 / .25); }
.join-box:focus-within { box-shadow: 0 0 0 1.5px var(--color-ink), 0 18px 40px -24px rgb(20 20 19 / .25); }
/* The hero's waitlist starts as its button alone and opens into the
   capsule (public/_fp/home/join.js). The capsule always has its open width
   (--w is the field's); closed, it is clipped to the button and moved left
   by half the field, so the button sits in the middle. Opening animates
   only transform and clip-path, never the layout. The clip reaches 3rem
   past the capsule so its shadow shows. */
.join-box.fold { --w: min(16rem, 100vw - 14.5rem); background: transparent; box-shadow: none; transform: translateX(calc(var(--w) / -2 - .125rem)); clip-path: inset(0 0 0 calc(var(--w) + .25rem) round 999px); transition: transform .55s cubic-bezier(.16, 1, .3, 1), clip-path .55s cubic-bezier(.16, 1, .3, 1), background-color .4s, box-shadow .4s; }
.join-box.fold.open { background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-line), 0 18px 40px -24px rgb(20 20 19 / .25); transform: none; clip-path: inset(-3rem round 999px); }
.join-box.fold.open:focus-within { box-shadow: 0 0 0 1.5px var(--color-ink), 0 18px 40px -24px rgb(20 20 19 / .25); }
.join-input { width: var(--w); margin-right: .25rem; padding-inline: 1rem; opacity: 0; transition: opacity .3s; }
.open .join-input { opacity: 1; transition-delay: .15s; }
/* On a phone the open button reads Join, which leaves the field all but
   10rem of the window. */
@media (max-width: 639px) { .join-box.fold { --w: min(16rem, 100vw - 10rem); } .join-box.fold.open .join-more { display: none; } }
@media (prefers-reduced-motion: reduce) { .join-box.fold, .join-input { transition: none; } }

/* The styleguide demo (app/components/fp-home-brand.x.html): Salon Oro's
   own colours, each dark enough for white text. */
.sw-terra, .acc-terra .acc-btn { background-color: #a4543a; }
.sw-olive, .acc-olive .acc-btn { background-color: #5d6b3a; }
.sw-espresso, .acc-espresso .acc-btn { background-color: #3b302a; }
.acc-terra .acc-text { color: #a4543a; }
.acc-olive .acc-text { color: #5d6b3a; }
.acc-espresso .acc-text { color: #3b302a; }
.oro-head { font-family: "Syne", var(--font-text); font-weight: 500; letter-spacing: -.04em; }
@keyframes home-refuse { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) { .acc-refused { animation: home-refuse .4s ease-in-out; } }

/* The demo's example site, Northside Pilates, in its own design (the
   template t-north in app/styles/templates.css): Fraunces in white over the
   studio, the week's classes on a card. */
.np { background: #2a302b; color: #1e2a23; }
.np-shade { background: linear-gradient(180deg, rgb(20 28 23 / .45), rgb(20 28 23 / 0) 26%, rgb(20 28 23 / .1) 48%, rgb(20 28 23 / .72)); }
.np-serif, .np-logo { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 300; letter-spacing: -.03em; }
.np-logo { font-weight: 400; letter-spacing: -.02em; }
.np-mark { width: 1.0625rem; height: 1.0625rem; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 2px currentColor; }
.np-tag { border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.np-card { background: #efe9e0; box-shadow: 0 24px 48px -20px rgb(20 28 23 / .55); }
.np-label { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.np-row { display: grid; grid-template-columns: 5.25rem 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgb(30 42 35 / .12); font-variant-numeric: tabular-nums; }
.np-row > :first-child { opacity: .6; }
.np-row > :nth-child(2) { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.np-row.demo-flash { margin: 0 -8px; padding: 9px 8px; border-radius: 6px; }
.np-spots { padding: 1px 8px; border-radius: 99px; background: #dfe7da; color: #3c5a47; font-size: .6875rem; font-weight: 500; }
.np-full { background: rgb(30 42 35 / .08); color: rgb(30 42 35 / .55); }
.np-notice { background: #1e2a23; color: #efe9e0; }
.demo-caret::after { content: ""; display: inline-block; width: 2px; height: 1.0625rem; margin-left: 2px; vertical-align: -3px; background: var(--color-green-light); animation: home-blink 1s steps(1) infinite; }

/* The Content example (app/components/fp-home-content.x.html): the entry's
   form slides in beside the page, and away once saved. */
.cx-panel { transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
/* Below the page on phones and tablets, the form stays open while the
   entry is picked and saved, so the section never changes height. */
@media (min-width: 1024px) { .cx-panel.off { opacity: 0; transform: translateX(28px); pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .cx-panel { transition: none; } }

/* A page of an example site that shows a list from Content, drawn in
   container units so it scales as one piece. The entry just added is
   marked on the page as it is in the list. */
.cp { container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; }
.cp-in { height: 100%; padding: 3.4cqw 5.5cqw; font-size: 1.55cqw; line-height: 1.4; }
.cp-nav { display: flex; align-items: center; gap: 3cqw; font-size: 1.5cqw; }
.cp-nav span { opacity: .7; }
.cp-logo { margin-right: auto; font-size: 1.9cqw; }
.cp-h { margin-top: 5cqw; font-size: 6cqw; line-height: 1; letter-spacing: -.02em; }
.cp-sub { margin-top: 1.2cqw; opacity: .7; }
/* Each in its template's face and colours (app/styles/templates.css). */
.cp-rye { background: #f4ead8; color: #3b2418; }
.cp-rye .cp-logo, .cp-rye .cp-h { font-family: "Rozha One", Georgia, serif; font-weight: 400; letter-spacing: -.015em; }
.cp-lenta .cp-logo, .cp-lenta .cp-h { font-family: "Spectral", Georgia, serif; }
.cp-menu { margin-top: 3.5cqw; max-width: 58%; font-size: 1.9cqw; }
.cp-photo { position: absolute; right: 5.5cqw; bottom: 5cqw; width: 30%; height: 62%; object-fit: cover; border-radius: 1cqw; }
.cp-rye .cp-in { position: relative; }
.cp-menu li { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.3cqw .8cqw; border-top: 1px solid rgb(58 42 30 / .15); }
.cp-lenta { background: #eef0ea; color: #25302a; }
.cp-lenta .cp-logo { font-style: italic; font-weight: 400; letter-spacing: -.03em; }
.cp-lenta .cp-h { font-weight: 300; letter-spacing: -.03em; }
.cp-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-top: 4cqw; }
.cp-week div { display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw; border-radius: 1cqw; background: #fff; font-size: 1.6cqw; }
.cp-week b { font-size: 2cqw; font-weight: 600; }
.cp-maren { background: #f7f4ef; color: #26221e; }
.cp-maren .cp-h { font-family: "Newsreader", Georgia, serif; font-weight: 300; letter-spacing: -.03em; }
.cp-maren .cp-logo { letter-spacing: .2em; text-transform: uppercase; font-weight: 500; font-size: 1.6cqw; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 4cqw; }
.cp-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cp-grid figcaption { margin-top: 1cqw; font-size: 1.5cqw; opacity: .75; }

/* The built-in section's cards: each picture on a stage of faint dots. */
.bi-stage { background-image: radial-gradient(rgb(20 22 21 / .08) 1px, transparent 1px); background-size: 14px 14px; }
.bi-stage-dark { background-color: rgb(255 255 255 / .05); background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 14px 14px; }

.faq summary::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; }
.faq details[open] summary svg { rotate: 45deg; }

.closing-shade::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 55% at 0% 100%, rgb(10 12 11 / .55), rgb(10 12 11 / 0)), linear-gradient(90deg, rgb(10 12 11 / .8) 0%, rgb(10 12 11 / .5) 55%, rgb(10 12 11 / .12)); }
@media (max-width: 767px) { .closing-shade::before { background: linear-gradient(0deg, rgb(10 12 11 / .55), rgb(10 12 11 / 0) 60%), rgb(10 12 11 / .6); } }

/* Scrolling: the large photos drift slower than the page. Without
   scroll-driven animation, or with reduced motion, the page is complete and
   still. */
@keyframes home-blink { 50% { opacity: 0; } }
@keyframes home-flash { from { background-color: #bfe3cf; } }
@keyframes home-drift { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }
@media (prefers-reduced-motion: no-preference) {
  .demo-flash { animation: home-flash .8s cubic-bezier(.16, 1, .3, 1); }
  @supports (animation-timeline: view()) {
    .home-drift img { animation: home-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .home { scroll-behavior: auto; }
  .demo-caret::after { animation: none; }
}

/* The moving demo (app/components/fp-home-switch.x.html): a bakery's old
   site as such sites look, plugins' newsletter box included, and the
   template it moves into, faded in over it once it is published. */
.old { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #ececec; color: #333; font-family: Arial, Helvetica, sans-serif; }
.old-top { padding: 3cqw; background: #7a1f2b; color: #fff; font: 700 4.6cqw/1 "Times New Roman", Times, serif; text-align: center; letter-spacing: .02em; }
.old-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .6cqw 2.6cqw; padding: 1.4cqw; border-bottom: 1px solid #c8c8c8; background: #f8f8f8; color: #1a4fb5; font-size: 1.8cqw; text-decoration: underline; }
.old-body { display: grid; grid-template-columns: 2fr 1fr; gap: 3cqw; padding: 3cqw; }
.old-main img { width: 100%; height: 26cqw; object-fit: cover; border: .6cqw solid #fff; box-shadow: 0 0 0 1px #bbb; filter: saturate(1.5) contrast(1.12); }
.old-main p { margin-top: 1cqw; font-size: 1.8cqw; line-height: 1.45; }
.old-main .old-t { margin-top: 2cqw; color: #7a1f2b; font: 700 3.2cqw/1.1 "Times New Roman", Times, serif; }
.old-side { align-self: start; padding: 1.8cqw; border: 1px solid #c8c8c8; background: #fff; font-size: 1.7cqw; }
.old-side b { display: block; margin: -1.8cqw -1.8cqw 1.4cqw; padding: .9cqw 1.8cqw; background: #7a1f2b; color: #fff; }
.old-side span { display: block; margin-top: 1cqw; color: #1a4fb5; text-decoration: underline; }
.old-pop { position: absolute; right: 2.4cqw; bottom: 2.4cqw; width: 36cqw; padding: 2cqw 2.4cqw; border: 2px solid #e2b007; background: #fff8d6; box-shadow: 0 1cqw 3cqw rgb(0 0 0 / .25); font-size: 1.7cqw; }
.old-pop b { display: block; margin-bottom: .6cqw; font-size: 2cqw; }
.old-pop i { position: absolute; top: .6cqw; right: 1.2cqw; font-style: normal; font-size: 2.4cqw; color: #777; }
.tpl.sw-new { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transform: scale(1.02); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.sw-new.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sw-new { transition: none; } }
/* While the parts come across, a band of light reads down the old site. */
.sw-scan { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / 0) 60%) 0 0 / 100% 250% no-repeat; transition: opacity .4s; pointer-events: none; }
.sw-scan.on { opacity: 1; animation: sw-scan 1.6s linear infinite; }
@keyframes sw-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sw-scan.on { animation: none; opacity: 0; } }

/* iOS Safari still lets a page be panned sideways when only body hides its
   overflow; clip on both, which also keeps position: sticky working. */
html.home, html.home body { overflow-x: clip; }

/* A typed command keeps the space of its whole line, so lines that wrap on
   phones do not push the terminal taller as they are typed. */
.t-rest { visibility: hidden; }
.dev-demo .t-line.typing .t-rest::before { content: ""; visibility: visible; display: inline-block; width: .55em; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--color-code-ink); animation: home-blink 1s steps(1) infinite; }

/* The Content example's pages on phones: the same sites laid out for a
   narrow screen, so their text stays readable. */
@media (max-width: 767px) {
  .cp { aspect-ratio: 4 / 3; }
  .cp-in { padding: 5cqw 6cqw; font-size: 3.2cqw; }
  .cp-nav { font-size: 3cqw; gap: 4cqw; }
  .cp-logo { font-size: 3.6cqw; }
  .cp-h { margin-top: 6cqw; font-size: 10cqw; }
  .cp-photo { display: none; }
  .cp-menu { max-width: none; margin-top: 5cqw; font-size: 3.6cqw; }
  .cp-menu li { padding: 2.2cqw 1cqw; }
  .cp-week { grid-template-columns: repeat(2, 1fr); gap: 2.4cqw; margin-top: 5cqw; }
  .cp-week div { gap: 1.2cqw; padding: 2.6cqw; border-radius: 2cqw; font-size: 3.2cqw; }
  .cp-week b { font-size: 3.6cqw; }
  .cp-week div:nth-child(n + 3) { display: none; }
  .cp-maren .cp-logo { font-size: 3cqw; }
  .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 4cqw; margin-top: 6cqw; }
  .cp-grid figure:nth-child(3) { display: none; }
  .cp-grid img { aspect-ratio: 1; }
  .cp-grid figcaption { margin-top: 2cqw; font-size: 3.2cqw; }
}

/* Keyboard focus, drawn in the page's ink rather than the browser's blue. */
.home :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
/* A field draws its own focus: the waitlist's capsule, the login card and
   the bordered inputs of the other sign-in pages. */
.home input:focus-visible { outline: none; }
.home .closing-shade :focus-visible, .home .bg-ink :focus-visible { outline-color: var(--color-paper); }

/* The hero's silk fades into the ground of the section under it, behind
   the templates, so the two have no edge between them. */
.hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 60%; background: linear-gradient(rgb(244 244 241 / 0), var(--color-ground) 85%); pointer-events: none; }

/* The gallery opens a template larger, in a dialog, with its second page. */
.tpl-dialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-3xl); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 50px 100px -40px rgb(20 20 19 / .5); overflow: auto; }
.tpl-dialog::backdrop { background: rgb(20 20 19 / .45); backdrop-filter: blur(6px); }
.tpl-dialog[open] { animation: home-dialog .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes home-dialog { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.tpl-stage .tpl { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transition: opacity .5s cubic-bezier(.16, 1, .3, 1); }
.tpl-stage .tpl.on { opacity: 1; }
.tpl-tab { color: var(--color-ink-2); }
.tpl-tab:hover { background: var(--color-ground); }
.tpl-tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }

/* The designers' terminal: public/_fp/home/designers.js plays it, and the site
   beside it goes from an empty draft (s0) to built (s1), previewed (s2)
   and live (s3). Without the script it shows the end. */
.dev-skel, .dev-site, .dev-live { transition: opacity .6s cubic-bezier(.16, 1, .3, 1); }
.dev-site, .dev-live { opacity: 0; }
.s1 .dev-site, .s3 .dev-live { opacity: 1; }
.s1 .dev-skel { opacity: 0; }
.dev-demo .t-line { display: block; }
.dev-demo .t-line.off { visibility: hidden; }


/* The waitlist's Turnstile widget (Waitlist), which Cloudflare's script finds
   by this class. Interaction-only: it takes no room until it asks for a click. */
.cf-turnstile:empty { display: none; }

/* The editor demo's examples are a row to swipe through on phones. */
@media (max-width: 767px) { .snap-row { scroll-snap-type: x mandatory; scroll-padding-inline: 18px; } .snap-row > * { scroll-snap-align: start; } }

/* pages.css */
/* What the backend pages need and the utilities cannot say. */

/* Figures that line up in columns and do not shift as they change. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* A sticky bar that blurs the page scrolling under it. */
.frost { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }

/* On <html>: in-page links land below the sticky bar. */
.anchor-scroll { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  .anchor-scroll { scroll-behavior: smooth; }
}

/* On <details>: its summary gives way to what it reveals, such as the
   button that confirms a removal. */
details.reveal[open] > summary { display: none; }

/* On <details>: a section folded behind its summary, whose chevron turns
   when it opens. */
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary .disclosure-mark { transition: rotate 150ms ease; }
details.disclosure[open] > summary .disclosure-mark { rotate: 90deg; }

/* An error page on a site's host: the visitor's own system font, since
   Fairpage's is not the site's. */
.site-error { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* The sign-in pages, on the home hero's warm ground. */
.auth-ground { background: radial-gradient(70% 60% at 0% 100%, #efe7da, rgb(239 231 218 / 0) 70%), #fbfaf7; }
.auth-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(20 20 19 / .06); pointer-events: none; }
/* Email and password in one card, ringed as the waitlist field is. */
.auth-fields { box-shadow: 0 0 0 1px var(--color-line), 0 18px 40px -24px rgb(20 20 19 / .25); transition: box-shadow .2s; }
.auth-fields:focus-within { box-shadow: 0 0 0 1px var(--color-ink-2), 0 18px 40px -24px rgb(20 20 19 / .25); }
.auth-fields input:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); transition: background-color 600000s 0s; }

/* A terms or policy page: its Markdown, as headings, paragraphs and lists. */
.legal > p, .legal > ul, .legal > ol { margin-top: 1rem; color: var(--color-ink-2); }
.legal > h2 { margin-top: 2.5rem; font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: 600; letter-spacing: -0.02em; }
.legal > h3 { margin-top: 1.75rem; font-size: var(--text-xl); line-height: var(--text-xl--line-height); font-weight: 600; }
.legal > h1 + p { margin-top: 0.75rem; color: var(--color-muted); }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal ol { list-style: decimal; padding-left: 1.25rem; }
.legal li + li { margin-top: 0.375rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--color-ink); font-weight: 600; }

/* templates.css */
/* The home page's example sites (app/components/fp-home-tpl.x.html). Each
   is drawn in container units, so 1cqw is a hundredth of its frame's width
   whatever the frame. A page starts at the top: nav 6.5cqw and a first
   screen to 62.5cqw fill a 16:10 frame, and a 4:3 frame shows the start of
   what comes next. Each template sets its colours and display face as
   variables; .tp-h reads them for both its pages. Off screen a template is
   not laid out (content-visibility), and keeps its size by its ratio. */

.tpl { --bg: #fff; --fg: #1d1d1b; --acc: var(--fg); --on-acc: var(--bg); --disp: Georgia, serif; content-visibility: auto; container-type: inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-text); text-align: left; }
.tpl .in { position: absolute; inset: 0 0 auto; font-size: 1.45cqw; line-height: 1.5; }
.tpl p, .tpl ul, .tpl ol { margin: 0; padding: 0; list-style: none; }
.tpl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpl nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 2.6cqw; height: 6.5cqw; padding: 0 4cqw; font-size: 1.25cqw; white-space: nowrap; }
.tpl nav b { margin-right: auto; font-size: 1.9cqw; font-weight: 600; }
.tpl nav b em { font-style: italic; }
.tpl nav .on { text-decoration: underline; text-decoration-thickness: .1cqw; text-underline-offset: .55cqw; }
.tp-navc { display: grid !important; grid-template-columns: 1fr auto 1fr; }
.tp-navc b { margin: 0 !important; }
.tp-navc > :last-child { justify-self: end; }
.tp-ln { display: flex; gap: 2.6cqw; }
.tp-ph { overflow: hidden; }
.tp-u { text-decoration: underline; text-decoration-thickness: .1cqw; text-underline-offset: .55cqw; }
.tp-btn { display: inline-flex; flex: none; align-items: center; height: 3.6cqw; padding: 0 2.2cqw; border-radius: 99px; background: var(--acc); color: var(--on-acc); font-size: 1.25cqw; font-weight: 500; white-space: nowrap; }
.tp-k { font-size: 1cqw; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .62; }
.tp-h { font-family: var(--disp); font-weight: var(--dw, 400); font-stretch: var(--ds, 100%); text-transform: var(--dt, none); letter-spacing: var(--dl, -.02em); line-height: .98; text-wrap: balance; }
.tp-h em { font-style: italic; }
.tp-sub { margin-top: 2cqw !important; font-size: 1.6cqw; opacity: .78; text-wrap: pretty; }

/* A photo that fills the first screen under the nav, darkened at the
   edges the words sit on. */
.tp-bleed { position: absolute; inset: 0 0 auto; height: 62.5cqw; }
.tp-bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 12 9 / .5), rgb(16 12 9 / 0) 24%, rgb(16 12 9 / 0) 50%, rgb(16 12 9 / .6)); }
.tp-bar { display: grid; place-items: center; height: 3cqw; background: var(--fg); color: var(--bg); font-size: 1cqw; letter-spacing: .06em; }
.tp-tick { display: flex; gap: 3cqw; overflow: hidden; padding: 1.7cqw 4cqw; background: var(--acc); color: var(--on-acc); white-space: nowrap; }
.tp-tick span + span::before { content: ""; display: inline-block; width: .7cqw; height: .7cqw; margin-right: 3cqw; border-radius: 50%; background: currentColor; vertical-align: .25em; }
.tp-dot { position: absolute; display: grid; place-items: center; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--acc); color: var(--on-acc); text-align: center; line-height: 1; }

/* A template's second page: its title and a list beside a photo. */
.tp-p2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; height: 68.5cqw; padding: 3cqw 4cqw 4cqw; }
.tp-p2 .tp-tx { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-bottom: 4cqw; }
.tp-p2 .tp-h { font-size: 5.6cqw; }
.tp-p2 .tp-btn, .tp-p2 .tp-u { margin-top: 3.6cqw; }
.tp-lst { align-self: stretch; margin-top: 3.6cqw !important; font-size: 1.55cqw; }
.tp-lst li { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.5cqw 0; border-top: .1cqw solid color-mix(in srgb, currentColor 22%, transparent); font-variant-numeric: tabular-nums; }
.tp-lst li:last-child { border-bottom: .1cqw solid color-mix(in srgb, currentColor 22%, transparent); }
.tp-lst li span + span { opacity: .7; }
.tp-p2 .tp-ph { border-radius: var(--r, 0); }

/* Atelier Orla: Bodoni on cream, the rings under an arch with the ring's
   name beside it. Bodoni Moda is drawn at a text optical size at every
   size, so its hairlines hold up in a small frame. */
.t-orla { --bg: #f3eee6; --fg: #2b2420; --acc: #2b2420; --on-acc: #f3eee6; --disp: "Bodoni Moda", Didot, Georgia, serif; --dw: 450; --r: 22cqw 22cqw 0 0; font-optical-sizing: none; font-variation-settings: "opsz" 18; background: var(--bg); color: var(--fg); }
.t-orla nav b { font-family: var(--disp); font-size: 1.75cqw; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.tp-pill { padding: .8cqw 1.8cqw; border: .1cqw solid currentColor; border-radius: 99px; }
.tp-eye { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.05cqw; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.tp-eye::before { content: ""; width: 3.5cqw; height: .1cqw; background: currentColor; }
.t-orla .tp-hero { position: relative; display: grid; grid-template-columns: 1fr 34cqw; gap: 7cqw; height: 56cqw; padding: 2.5cqw 9cqw 0 5cqw; }
.t-orla .tp-hero .tp-tx { align-self: center; padding-bottom: 2cqw; }
.t-orla .tp-hero .tp-h { margin-top: 2.4cqw; font-size: 6.4cqw; line-height: 1; letter-spacing: -.025em; }
.t-orla .tp-hero .tp-sub { max-width: 31cqw; }
.tp-cta { display: flex; align-items: center; gap: 2.6cqw; margin-top: 3.4cqw !important; }
.t-orla .tp-btn { height: 4cqw; padding: 0 2.6cqw; letter-spacing: .03em; }
.tp-facts { display: flex; gap: 2.4cqw; margin-top: 4.4cqw !important; padding-top: 1.8cqw; border-top: .1cqw solid color-mix(in srgb, currentColor 18%, transparent); font-size: 1.05cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.t-orla .tp-hero .tp-ph { border-radius: 17cqw 17cqw 0 0; }
.tp-cap { position: absolute; right: 33cqw; bottom: 6cqw; z-index: 2; display: grid; gap: .5cqw; min-width: 17cqw; padding: 1.8cqw 2.4cqw; background: var(--bg); box-shadow: 0 2cqw 4cqw -2cqw rgb(43 36 32 / .35); font-size: 1.1cqw; }
.tp-cap b { font-family: var(--disp); font-size: 2cqw; font-weight: 500; font-style: italic; }
.tp-cap span { opacity: .65; letter-spacing: .04em; }
.tp-side { position: absolute; right: 3.4cqw; bottom: 4cqw; writing-mode: vertical-rl; font-size: .95cqw; letter-spacing: .22em; text-transform: uppercase; opacity: .55; }
.t-orla .tp-nx { padding: 5cqw 4cqw; background: var(--fg); color: var(--bg); font-family: var(--disp); font-size: 3.2cqw; text-align: center; }
.t-orla .tp-nx em { font-style: italic; }
.t-orla .tp-p2 .tp-h { margin-top: 2cqw; }

/* Casa Tamariz: the room to the edges, Cormorant over it, and the booking bar
   every hotel site has. */
.t-tamariz { --bg: #f4eee4; --fg: #2e2620; --dw: 300; --dl: -.01em; --disp: "Cormorant Garamond", Garamond, Georgia, serif; --r: .6cqw; background: var(--bg); color: var(--fg); }
.t-tamariz:not(.pg2) nav { color: #fff; }
.t-tamariz nav b { font-family: var(--disp); font-size: 2.3cqw; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.t-tamariz:not(.pg2) nav .tp-btn { background: transparent; box-shadow: inset 0 0 0 .1cqw rgb(255 255 255 / .75); color: #fff; }
.t-tamariz .tp-hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56cqw; padding-bottom: 10cqw; color: #fff; text-align: center; }
.t-tamariz .tp-hero .tp-h { font-size: 8.6cqw; font-weight: 400; line-height: .92; text-shadow: 0 .2cqw 4cqw rgb(0 0 0 / .3); }
.t-tamariz .tp-bleed::after { background: radial-gradient(60% 45% at 50% 42%, rgb(16 12 9 / .38), rgb(16 12 9 / 0)), linear-gradient(180deg, rgb(16 12 9 / .5), rgb(16 12 9 / .12) 26%, rgb(16 12 9 / .12) 55%, rgb(16 12 9 / .55)); }
.t-tamariz .tp-hero .tp-sub { font-size: 1.8cqw; opacity: .92; }
.tp-book { position: absolute; bottom: 4.5cqw; left: 50%; display: flex; align-items: center; padding: .8cqw; translate: -50% 0; border-radius: .7cqw; background: #fff; color: var(--fg); text-align: left; box-shadow: 0 2cqw 4cqw -2cqw rgb(0 0 0 / .45); }
.tp-book > span:not(.tp-btn) { padding: .2cqw 2.6cqw; border-right: .1cqw solid rgb(46 38 32 / .14); font-size: 1.3cqw; white-space: nowrap; }
.tp-book i { display: block; font-size: .9cqw; font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.tp-book .tp-btn { height: 4.4cqw; margin-left: 1cqw; border-radius: .45cqw; }
.t-tamariz .tp-nx { padding: 5cqw 4cqw; font-family: var(--disp); font-size: 3.4cqw; font-style: italic; font-weight: 300; text-align: center; }

/* Bar Ostra: the name as a poster in condensed Archivo, tonight's wines
   running under it. */
.t-ostra { --bg: #15110d; --fg: #f1e6d2; --acc: #e2583c; --on-acc: #15110d; --dw: 800; --ds: 72%; --dt: uppercase; --dl: -.005em; --disp: "Archivo", "Arial Narrow", sans-serif; --r: .6cqw; background: var(--bg); color: var(--fg); }
.t-ostra nav b { font-family: var(--disp); font-size: 1.9cqw; font-stretch: 72%; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tp-hours { padding-left: 2.6cqw; border-left: .1cqw solid rgb(241 230 210 / .25); opacity: .72; }
.t-ostra .tp-hero { position: relative; height: 56cqw; padding: 0 4cqw; }
.tp-word { font-family: var(--disp); line-height: .8; white-space: nowrap; }
.t-ostra .tp-word { margin-left: -.5cqw; font-size: 22.5cqw; font-stretch: 62%; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.t-ostra .tp-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4cqw; height: 31cqw; margin-top: 3.2cqw; }
.t-ostra .tp-row .tp-ph { border-radius: .6cqw; }
.t-ostra .tp-row .tp-tx { align-self: end; }
.t-ostra .tp-row .tp-h { font-size: 4cqw; line-height: .92; }
.t-ostra .tp-btn { border-radius: .4cqw; font-size: 1.1cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.t-ostra .tp-row .tp-btn { margin-top: 2.6cqw; }
.t-ostra .tp-dot { top: 15.5cqw; right: 6cqw; font-family: var(--disp); font-size: 1.8cqw; font-stretch: 72%; font-weight: 800; text-transform: uppercase; rotate: -12deg; }
.t-ostra .tp-tick { font-family: var(--disp); font-size: 1.8cqw; font-stretch: 72%; font-weight: 700; text-transform: uppercase; }

/* Lenta Yoga: Spectral Light, the room to the right edge and today's
   classes over it. */
.t-lenta { --bg: #eef0ea; --fg: #25302a; --acc: #56735f; --on-acc: #fff; --dw: 300; --dl: -.03em; --disp: "Spectral", Georgia, serif; --r: 2cqw; background: var(--bg); color: var(--fg); }
.t-lenta nav b { font-family: var(--disp); font-size: 2.7cqw; font-style: italic; font-weight: 400; letter-spacing: -.03em; }
.t-lenta .tp-h em { color: var(--acc); }
.t-lenta .tp-hero { position: relative; display: grid; grid-template-columns: 1fr 43cqw; height: 56cqw; }
.t-lenta .tp-hero .tp-tx { align-self: center; padding: 0 4cqw 9cqw; }
.t-lenta .tp-hero .tp-h { font-size: 7.8cqw; line-height: .98; }
.t-lenta .tp-hero .tp-sub { max-width: 30cqw; }
.t-lenta .tp-hero .tp-btn { margin-top: 3cqw; }
.t-lenta .tp-hero .tp-ph { border-radius: 2.4cqw 0 0 0; }
.t-lenta .tp-card { position: absolute; bottom: 5cqw; left: 44cqw; width: 23cqw; padding: 1.8cqw 2cqw 1cqw; border-radius: 1.2cqw; background: #fff; font-size: 1.25cqw; box-shadow: 0 2cqw 4cqw -2cqw rgb(37 48 42 / .35); }
.t-lenta .tp-card .tp-k { margin-bottom: .6cqw; }
.t-lenta .tp-card p + p { display: flex; gap: 1.4cqw; padding: .9cqw 0; border-top: .1cqw solid rgb(37 48 42 / .1); }
.t-lenta .tp-card span { opacity: .55; font-variant-numeric: tabular-nums; }
.t-lenta .tp-card i { margin-left: auto; color: var(--acc); font-style: normal; }
.t-lenta .tp-nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4cqw; padding: 4.5cqw 4cqw; font-size: 1.35cqw; }
.t-lenta .tp-nx b { display: block; margin-bottom: .4cqw; font-family: var(--disp); font-size: 2.6cqw; font-style: italic; font-weight: 300; letter-spacing: -.02em; }

/* Low Kiln: Archivo at its widest, a seal turning on the beans, and the
   shop under the first screen. */
.t-kiln { --bg: #ece2d0; --fg: #2a1d15; --acc: #c4552b; --on-acc: #fff6ea; --dw: 800; --ds: 125%; --dt: uppercase; --dl: -.03em; --disp: "Archivo", Arial, sans-serif; --r: 1cqw; background: var(--bg); color: var(--fg); }
.t-kiln nav { height: 6cqw; }
.t-kiln nav b { font-family: var(--disp); font-size: 2cqw; font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.t-kiln .tp-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; height: 53.5cqw; padding: 1cqw 4cqw 4cqw; }
.t-kiln .tp-hero .tp-tx { align-self: end; }
.t-kiln .tp-hero .tp-h { font-size: 6.9cqw; line-height: .9; }
.t-kiln .tp-hero .tp-sub { max-width: 32cqw; opacity: .85; }
.t-kiln .tp-hero .tp-btn { margin-top: 2.8cqw; }
.t-kiln .tp-hero .tp-ph { border-radius: 1cqw; }
.tp-seal { position: absolute; top: 3.5cqw; left: calc(50% - 5cqw); width: 14cqw; height: 14cqw; fill: var(--fg); font-family: var(--disp); font-size: 9.2px; font-stretch: 125%; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .tp-seal { animation: tp-turn 24s linear infinite; } }
@keyframes tp-turn { to { rotate: 360deg; } }
.t-kiln .tp-nx { padding: 4cqw 4cqw; }
.t-kiln .tp-nx .tp-k { opacity: 1; }
.tp-bags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 1.6cqw; }
.tp-bags p { height: 22cqw; padding: 2cqw; border-radius: 1cqw; font-size: 1.3cqw; }
.tp-bags b { display: block; font-family: var(--disp); font-size: 3cqw; font-stretch: 125%; font-weight: 800; line-height: 1; text-transform: uppercase; }
.tp-bags .b1 { background: var(--acc); color: var(--on-acc); }
.tp-bags .b2 { background: #2f4a3a; color: #e9efe6; }
.tp-bags .b3 { background: var(--fg); color: var(--bg); }

/* Maren Holt: the couple to the edges and one line in Newsreader at its
   display size. */
.t-maren { --bg: #f7f4ef; --fg: #26221e; --dw: 300; --dl: -.03em; --disp: "Newsreader", Georgia, serif; background: var(--bg); color: var(--fg); }
.t-maren:not(.pg2) nav { color: #fff; }
.t-maren nav b { font-size: 1.5cqw; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
.t-maren .tp-hero { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; height: 56cqw; padding: 0 4cqw 4.5cqw; color: #fff; }
.t-maren .tp-hero .tp-h { font-size: 9.6cqw; line-height: .88; }
.tp-meta { display: flex; flex-direction: column; align-items: flex-end; max-width: 24cqw; font-size: 1.35cqw; text-align: right; }
.t-maren .tp-meta .tp-btn { margin-top: 1.8cqw; background: transparent; box-shadow: inset 0 0 0 .1cqw #fff; color: #fff; }
.t-maren .tp-nx { position: relative; padding: 5cqw 4cqw; text-align: center; }
.t-maren .tp-nx p:first-child { font-family: var(--disp); font-size: 3.6cqw; font-style: italic; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.t-maren .tp-nx .tp-k { margin-top: 1.4cqw; }

/* Rye & Salt: Rozha One on flour, and the day's bread
   running in rust. */
.t-rye { --bg: #f4ead8; --fg: #3b2418; --acc: #a84d27; --on-acc: #fff4e6; --dl: -.015em; --disp: "Rozha One", Georgia, serif; --r: 2.4cqw; background: var(--bg); color: var(--fg); }
.t-rye nav b { font-family: var(--disp); font-size: 2.4cqw; font-weight: 400; letter-spacing: -.01em; }
.t-rye nav b em { color: var(--acc); font-style: normal; }
.t-rye .tp-hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; height: 56cqw; padding: 1.5cqw 4cqw 4cqw; }
.t-rye .tp-hero .tp-tx { align-self: center; }
.t-rye .tp-hero .tp-h { font-size: 6.4cqw; line-height: .98; }
.tp-hrs { margin-top: 3.4cqw !important; font-size: 1.3cqw; line-height: 1.75; font-variant-numeric: tabular-nums; }
.tp-hrs span { display: inline-block; width: 8cqw; font-weight: 600; }
.t-rye .tp-hero .tp-ph { border-radius: 2.4cqw; }
.t-rye .tp-dot { top: 4cqw; left: calc(52.4% - 5.5cqw); font-family: var(--disp); font-size: 2cqw; rotate: 10deg; }
.t-rye .tp-tick { font-family: var(--disp); font-size: 2cqw; }

/* Salon Oro: Syne, the name in terra as large as the column takes, and
   the words under it at the foot of the photo. */
.t-oro { --bg: #f6efe6; --fg: #3b302a; --acc: #a4543a; --on-acc: #fff; --dw: 500; --dl: -.045em; --disp: "Syne", var(--font-text); --r: 1.4cqw; background: var(--bg); color: var(--fg); }
.t-oro nav b { font-family: var(--disp); font-size: 2.3cqw; font-weight: 700; letter-spacing: -.05em; }
.t-oro nav .tp-btn { background: transparent; box-shadow: inset 0 0 0 .12cqw currentColor; color: var(--fg); }
.t-oro .tp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 36cqw; gap: 6cqw; height: 56cqw; padding: 2cqw 4cqw 4cqw; }
.t-oro .tp-hero .tp-tx { display: flex; flex-direction: column; align-items: flex-start; }
.t-oro .tp-word { margin: -1.2cqw 0 0 -1.1cqw; color: var(--acc); font-size: 21cqw; font-weight: 800; letter-spacing: -.065em; }
.t-oro .tp-hero .tp-h { margin-top: auto; font-size: 4.6cqw; line-height: 1; }
.t-oro .tp-hero .tp-sub { max-width: 30cqw; }
.t-oro .tp-hero .tp-btn { margin-top: 2.6cqw; }
.t-oro .tp-hero .tp-ph { position: relative; border-radius: 1.4cqw; }
.t-oro .tp-chip { top: auto; bottom: 2cqw; background: rgb(246 239 230 / .94); }
.t-oro .tp-chip::before { background: var(--acc); }
.t-oro .tp-nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4cqw; padding: 3.6cqw 4cqw; background: var(--acc); color: var(--on-acc); font-size: 1.5cqw; }
.t-oro .tp-nx p { display: flex; justify-content: space-between; padding-top: 1.2cqw; border-top: .1cqw solid rgb(255 255 255 / .4); }

/* Studio Fenn: Instrument Serif in capitals, one word in italic, and the
   projects by number. */
.t-fenn { --bg: #e3e4d6; --fg: #2d3226; --dt: uppercase; --dl: -.01em; --disp: "Instrument Serif", Georgia, serif; background: var(--bg); color: var(--fg); }
.t-fenn .tp-h em { text-transform: lowercase; }
.t-fenn nav b { font-family: var(--disp); font-size: 2.3cqw; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.t-fenn .tp-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5cqw; height: 68.5cqw; padding: 1.5cqw 4cqw 4cqw; }
.t-fenn .tp-hero .tp-tx { padding-top: 5cqw; }
.t-fenn .tp-hero .tp-h { font-size: 7.8cqw; line-height: .9; }
.t-fenn .tp-hero .tp-sub { max-width: 28cqw; }
.tp-idx { margin-top: 4.5cqw !important; font-size: 1.35cqw; }
.tp-idx li { display: flex; gap: 2cqw; padding: 1.2cqw 0; border-top: .1cqw solid rgb(45 50 38 / .25); }
.tp-idx span { opacity: .5; font-variant-numeric: tabular-nums; }

/* Salvia: a shop. Young Serif centred beside the shelf, and the range
   under it. */
.t-salvia { --bg: #e9e5dd; --fg: #262521; --dl: -.02em; --disp: "Young Serif", Georgia, serif; background: var(--bg); color: var(--fg); }
.t-salvia nav { height: 6cqw; }
.t-salvia nav b { font-family: var(--disp); font-size: 2.5cqw; font-weight: 400; }
.t-salvia .tp-h em { font-style: normal; opacity: .5; }
.t-salvia .tp-btn { border-radius: .3cqw; letter-spacing: .04em; }
.t-salvia .tp-hero { display: grid; grid-template-columns: 1.15fr 1fr; height: 53.5cqw; }
.t-salvia .tp-hero .tp-tx { display: flex; flex-direction: column; align-items: center; align-self: center; padding: 0 6cqw 2cqw; text-align: center; }
.t-salvia .tp-hero .tp-h { font-size: 4.9cqw; line-height: 1.04; }
.t-salvia .tp-hero .tp-btn { height: 4cqw; margin-top: 3cqw; padding: 0 3cqw; }
.t-salvia .tp-nx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 3cqw 4cqw; }
.t-salvia .tp-nx .tp-ph { aspect-ratio: 4 / 5; }
.t-salvia .tp-nx p { display: flex; justify-content: space-between; margin-top: 1cqw; font-size: 1.25cqw; }
.t-salvia .c1 { object-position: 0 50%; }
.t-salvia .c2 { object-position: 58% 50%; }
.t-salvia .c3 { scale: 1.9; transform-origin: 46% 30%; }
.t-salvia .c4 { scale: 1.7; transform-origin: 30% 92%; }

/* Hedge & Rose: DM Serif on deep green, a rose ampersand behind it. */
.t-hedge { --bg: #1f3427; --fg: #efe8da; --acc: #e3b3a7; --on-acc: #1f3427; --dl: -.015em; --disp: "DM Serif Display", Georgia, serif; background: var(--bg); color: var(--fg); }
.t-hedge .tp-h em, .t-hedge nav b em { color: var(--acc); }
.t-hedge nav b { font-family: var(--disp); font-size: 2.4cqw; font-weight: 400; }
.t-hedge .tp-hero { position: relative; display: grid; grid-template-columns: 1fr 42cqw; gap: 4cqw; height: 68.5cqw; overflow: hidden; padding: 0 0 0 4cqw; }
.tp-amp { position: absolute; top: -12cqw; left: 26cqw; color: var(--acc); font-family: "DM Serif Display", Georgia, serif; font-size: 66cqw; font-style: italic; line-height: 1; opacity: .2; pointer-events: none; }
.t-hedge .tp-hero .tp-tx { position: relative; padding-top: 10cqw; }
.t-hedge .tp-hero .tp-h { font-size: 7.6cqw; line-height: .98; }
.t-hedge .tp-hero .tp-sub { max-width: 32cqw; }
.t-hedge .tp-hero .tp-btn { margin-top: 3cqw; }

/* Northside: Fraunces, soft and light, in white over the studio, with the
   week's classes on a card beside it. */
.t-north { --bg: #efe9e0; --fg: #1e2a23; --acc: #4f6d5a; --on-acc: #fff; --dw: 300; --dl: -.03em; --disp: "Fraunces", Georgia, serif; --r: 1.6cqw; font-variation-settings: "SOFT" 100, "opsz" 144; background: var(--bg); color: var(--fg); }
.t-north nav b { display: flex; align-items: center; gap: .9cqw; font-family: var(--disp); font-size: 2.3cqw; font-weight: 400; letter-spacing: -.02em; }
.t-north nav b i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 .18cqw currentColor; }
.t-north:not(.pg2) nav { color: #fff; }
.t-north:not(.pg2) nav .tp-btn { background: #fff; color: var(--fg); }
.t-north .tp-bleed::after { background: linear-gradient(180deg, rgb(20 28 23 / .42), rgb(20 28 23 / 0) 28%, rgb(20 28 23 / .08) 50%, rgb(20 28 23 / .66)); }
.t-north .tp-hero { position: relative; display: grid; grid-template-columns: 1fr 28cqw; gap: 6cqw; align-items: end; height: 56cqw; padding: 0 4cqw 4.5cqw; color: #fff; }
.tp-tag { display: inline-block; padding: .7cqw 1.6cqw; border: .1cqw solid rgb(255 255 255 / .35); border-radius: 99px; background: rgb(255 255 255 / .14); font-size: 1.15cqw; -webkit-backdrop-filter: blur(1cqw); backdrop-filter: blur(1cqw); }
.t-north .tp-hero .tp-h { margin-top: 2.2cqw; font-size: 6.2cqw; line-height: 1; }
.t-north .tp-hero .tp-sub { max-width: 36cqw; opacity: .85; }
.tp-week { padding: 2cqw 2.2cqw 1cqw; border-radius: 1.6cqw; background: var(--bg); color: var(--fg); font-size: 1.3cqw; box-shadow: 0 2cqw 5cqw -2cqw rgb(20 28 23 / .5); }
.tp-week .tp-k { margin-bottom: .8cqw; }
.tp-week p + p { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw 0; border-top: .1cqw solid rgb(30 42 35 / .12); }
.tp-week span { width: 8cqw; opacity: .6; font-variant-numeric: tabular-nums; }
.tp-week i { margin-left: auto; padding: .3cqw 1cqw; border-radius: 99px; background: #dfe7da; color: #3c5a47; font-size: 1.05cqw; font-style: normal; }
.tp-week i.full { background: rgb(30 42 35 / .08); color: rgb(30 42 35 / .55); }
.t-north .tp-nx { padding: 3.4cqw 4cqw; background: var(--acc); color: #fff; font-family: var(--disp); font-size: 2.6cqw; font-weight: 300; text-align: center; }
.t-north .tp-nx em { font-style: italic; }
/* A status on a photo (Salon Oro). */
.tp-chip { position: absolute; top: 2cqw; left: 2cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: .9cqw 1.6cqw; border-radius: 99px; background: rgb(244 242 236 / .94); font-size: 1.2cqw; }
.tp-chip::before { content: ""; width: .9cqw; height: .9cqw; border-radius: 50%; background: #3f9a62; }

/* Halvar: a furniture shop. The room to the edges, the name across the
   wall in Unbounded, notes pinned to the chair, the offers running in
   black and the shop under it. */
.t-halvar { --bg: #f4f2ee; --fg: #1d1f1c; --acc: #1d1f1c; --on-acc: #fff; --dl: -.02em; --disp: "Unbounded", var(--font-text); background: var(--bg); color: var(--fg); }
.t-halvar:not(.pg2) nav { display: grid; grid-template-columns: 1fr auto 1fr; color: #fff; font-size: 1.1cqw; letter-spacing: .08em; text-transform: uppercase; }
.t-halvar nav b { font-family: var(--disp); font-size: 1.9cqw; font-weight: 500; letter-spacing: -.02em; text-transform: none; }
.t-halvar nav > :last-child { justify-self: end; }
.t-halvar .tp-btn { border-radius: .3cqw; font-size: 1.05cqw; letter-spacing: .08em; text-transform: uppercase; }
.t-halvar .tp-bleed::after { background: linear-gradient(180deg, rgb(12 16 13 / .45), rgb(12 16 13 / .1) 22%, rgb(12 16 13 / 0) 50%, rgb(12 16 13 / .55)); }
.t-halvar .tp-hero { position: relative; z-index: 1; height: 56cqw; color: #fff; }
.t-halvar .tp-word { margin-top: .5cqw; font-size: 17.6cqw; font-weight: 400; letter-spacing: -.035em; text-align: center; text-transform: uppercase; }
.tp-spot { position: absolute; display: flex; align-items: center; gap: .8cqw; font-size: 1.1cqw; white-space: nowrap; }
.tp-spot i { width: 1.5cqw; height: 1.5cqw; border: .15cqw solid #fff; border-radius: 50%; background: radial-gradient(circle, #fff 32%, transparent 36%); }
.tp-spot s { width: 6cqw; height: .1cqw; background: rgb(255 255 255 / .8); }
.t-halvar .s1 { top: 26cqw; right: calc(100% - 26cqw); }
.t-halvar .s2 { top: 33cqw; left: 54.5cqw; }
.t-halvar .tp-hero .tp-tx { position: absolute; bottom: 4cqw; left: 4cqw; }
.t-halvar .tp-tag { padding: .5cqw 1.3cqw; font-size: 1cqw; }
.t-halvar .tp-hero .tp-h { margin-top: 1.4cqw; font-size: 3.4cqw; line-height: 1.05; }
.t-halvar .tp-cta { gap: 2cqw; margin-top: 2.2cqw !important; font-size: 1.4cqw; }
.t-halvar .tp-hero .tp-btn { height: 4cqw; background: #fff; color: var(--fg); }
.tp-arr { position: absolute; right: 4cqw; bottom: 4.6cqw; display: flex; gap: 1cqw; }
.tp-arr span { display: grid; place-items: center; width: 3.6cqw; height: 2.4cqw; border: .1cqw solid rgb(255 255 255 / .7); border-radius: 99px; font-size: 1.2cqw; }
.tp-arr .on { background: #fff; color: var(--fg); }
.t-halvar .tp-tick { justify-content: center; padding: 1.5cqw 4cqw; font-size: 1cqw; letter-spacing: .1em; text-transform: uppercase; }
.t-halvar .tp-nx { padding: 4.5cqw 4cqw; background: #fff; }
.t-halvar .tp-nx .tp-h { font-size: 3cqw; text-align: center; }
.tp-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-top: 3cqw; }
.tp-cats > div { padding: 1.4cqw 1.4cqw 1.6cqw; border: .1cqw solid #e7e4de; border-radius: .4cqw; }
.tp-cats .tp-ph { aspect-ratio: 1; }
.tp-cats p { margin-top: 1.2cqw !important; font-size: 1.3cqw; text-align: center; }
.t-halvar .c1 { object-position: 50% 92%; scale: 1.8; transform-origin: 50% 66%; }
.t-halvar .c2 { scale: 1.15; transform-origin: 50% 60%; }
.t-halvar .c3 { scale: 1.5; }
.t-halvar .c4 { scale: 3; transform-origin: 50% 78%; }
.t-halvar .tp-p2 .tp-h { font-size: 4.6cqw; }

/* Okun: a fashion label. Teal from the studio backdrop, the model to the
   right, the line in heavy Archivo in blush with one word cut from the
   cobalt suit, and the season's number in Instrument Serif. */
.t-okun { --bg: #0b5f68; --fg: #f6ede6; --acc: #efbccb; --on-acc: #1c2b2c; --dw: 800; --dt: uppercase; --dl: -.045em; --disp: "Archivo", var(--font-text); --r: .4cqw; background: var(--bg); color: var(--fg); }
.t-okun nav { font-size: 1.15cqw; letter-spacing: .02em; text-transform: uppercase; }
.t-okun nav b { font-family: var(--disp); font-size: 2.4cqw; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.tp-model { position: absolute; top: 0; right: 0; width: 52cqw; height: 62.5cqw; }
.tp-model img { object-position: 50% 28%; }
.tp-model::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg), rgb(11 95 104 / 0) 30%), linear-gradient(180deg, rgb(4 40 44 / .35), rgb(4 40 44 / 0) 20%, rgb(4 40 44 / 0) 75%, rgb(4 40 44 / .45)); }
.t-okun .tp-hero { position: relative; z-index: 1; height: 56cqw; padding: 0 4cqw; }
.t-okun .tp-hero .tp-tx { padding-top: 8cqw; }
.t-okun .tp-k { font-size: 1.2cqw; letter-spacing: .02em; text-transform: none; opacity: .9; }
.t-okun .tp-hero .tp-h { margin-top: 1.6cqw; color: var(--acc); font-size: 10.4cqw; line-height: .84; }
.tp-fill { background: url(/_fp/home/tpl/okun-3.webp) 62% 64% / 150% auto; -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-okun .tp-u { display: inline-block; margin-top: 4cqw; font-size: 1.3cqw; font-weight: 500; text-transform: uppercase; }
.tp-num { position: absolute; right: 4cqw; bottom: 6.4cqw; font-family: "Instrument Serif", Georgia, serif; font-size: 17cqw; font-style: italic; line-height: .8; opacity: .4; }
.tp-foot { position: absolute; inset: auto 4cqw 3.6cqw; display: flex; gap: 3cqw; font-size: 1.15cqw; text-transform: uppercase; }
.tp-ss { margin-left: auto; }
.t-okun .tp-nx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 4cqw; background: #efe7dc; color: #1c2b2c; }
.t-okun .tp-nx .tp-ph { aspect-ratio: 3 / 4; }
.t-okun .tp-nx p { display: flex; justify-content: space-between; margin-top: 1.2cqw !important; font-size: 1.2cqw; font-weight: 600; text-transform: uppercase; }
.t-okun .tp-nx p span { font-weight: 400; text-transform: none; opacity: .7; }
.t-okun .tp-p2 .tp-h { margin-top: 1.4cqw; color: var(--acc); font-size: 6.4cqw; line-height: .88; }
.t-okun .tp-btn { border-radius: .3cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Big Fold: Inter Tight at its heaviest on violet, the shop's name under a
   slice held up to it, a mint nav pill and the specials in a grid of
   coloured panels on a white frame. */
.t-fold { --bg: #fff; --fg: #1b1340; --acc: #7a22ff; --on-acc: #fff; --dw: 900; --dt: uppercase; --dl: -.045em; --disp: "Inter Tight", var(--font-text); --r: 1.6cqw; background: var(--bg); color: var(--fg); }
.t-fold .in { padding: 1cqw; }
.t-fold nav { height: 4.4cqw; margin: 1.4cqw 1.4cqw 0; padding: 0 2.4cqw; border-radius: 99px; background: #96f0aa; font-size: 1.2cqw; font-weight: 600; }
.t-fold nav b { font-family: var(--disp); font-size: 1.9cqw; font-weight: 900; letter-spacing: .04em; }
.t-fold nav .on { text-decoration: none; opacity: .55; }
.t-fold .tp-btn { font-weight: 700; }
.t-fold .tp-hero { position: relative; height: 60.5cqw; margin-top: -5.8cqw; overflow: hidden; border-radius: var(--r); background: var(--acc); color: #fff; }
.t-fold .tp-word { position: absolute; top: 15cqw; left: 0; right: 9cqw; display: flex; flex-direction: column; align-items: center; font-size: 19cqw; font-kerning: none; font-weight: 900; letter-spacing: -.035em; line-height: .82; text-transform: uppercase; }
.t-fold .tp-cut { position: absolute; top: 14cqw; right: -5cqw; width: 37cqw; height: auto; rotate: -9deg; filter: drop-shadow(0 2.4cqw 2.4cqw rgb(40 0 90 / .35)); }
.t-fold .tp-dot { top: 37cqw; left: 14cqw; width: 12.5cqw; height: 12.5cqw; background: #ff8fdc; color: var(--acc); font-family: var(--disp); font-size: 1.75cqw; font-weight: 800; outline: .14cqw dashed var(--acc); outline-offset: -.9cqw; rotate: -14deg; }
.t-fold .tp-foot { inset: auto 3cqw 2.8cqw; align-items: center; gap: 2.4cqw; font-size: 1.2cqw; line-height: 1.4; text-transform: none; }
.t-fold .tp-foot .tp-btn { background: #fff; color: var(--acc); }
.t-fold .tp-nx { display: grid; grid-template-columns: 1.75fr 1fr; grid-template-rows: 29cqw 22cqw; gap: 1cqw; margin-top: 1cqw; }
.t-fold .tp-nx > div { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: var(--r); padding: 4cqw 3cqw 0; text-align: center; font-size: 1.2cqw; }
.t-fold .tp-nx .tp-h { font-size: 3.2cqw; letter-spacing: -.035em; text-transform: none; }
.t-fold .tp-nx p + p { margin-top: 1cqw; opacity: .75; }
.t-fold .n1 { justify-content: center; padding: 0 !important; color: #fff; }
.t-fold .n1 img { position: absolute; inset: 0; }
.t-fold .n1 .tp-h { position: relative; font-size: 6cqw; }
.t-fold .n2 { background: #96f0aa; }
.t-fold .n2 img { width: 21cqw; height: auto; margin-top: 2cqw; }
.t-fold .n3 { grid-column: 1; justify-content: center; padding-top: 0 !important; background: #3a2a22; color: #fbe9d6; }
.t-fold .n4 { justify-content: center; padding-top: 0 !important; background: #ff8fdc; }
.t-fold .tp-p2 .tp-h { font-size: 7cqw; }

/* Ombra: Cormorant on a photo of light through leaves, framed in near
   black, with the house's promises under it in gold line icons. */
.t-ombra { --bg: #0f0e0c; --fg: #ece6dc; --acc: #fff; --on-acc: #0f0e0c; --gold: #c9a063; --disp: "Cormorant Garamond", Georgia, serif; --dw: 400; --dl: -.015em; --r: .3cqw; background: var(--bg); color: var(--fg); }
.t-ombra .in { padding: 0 2cqw; }
.t-ombra nav { padding: 0 3cqw; font-size: 1.2cqw; }
.t-ombra nav b { color: var(--gold); font-family: var(--disp); font-size: 3cqw; font-style: italic; font-weight: 500; letter-spacing: 0; }
.t-ombra nav .on { text-decoration-color: var(--gold); }
.t-ombra .tp-btn { height: 3.2cqw; padding: 0 1.8cqw; border-radius: .4cqw; font-size: 1.1cqw; }
.t-ombra .tp-hero { position: relative; height: 54cqw; color: #2a231c; }
.t-ombra .tp-hero .tp-ph { position: absolute; inset: 0; }
.t-ombra .tp-hero img { object-position: 50% 70%; filter: brightness(1.1) sepia(.2) saturate(1.1); }
.t-ombra .tp-hero .tp-tx { position: absolute; top: 15cqw; left: 6cqw; max-width: 38cqw; }
.t-ombra .tp-k { font-size: 1.05cqw; letter-spacing: .12em; opacity: .8; }
.t-ombra .tp-hero .tp-h { margin-top: 2cqw; font-size: 6.6cqw; line-height: 1.02; }
.t-ombra .tp-hero .tp-sub { max-width: 31cqw; font-size: 1.5cqw; line-height: 1.6; opacity: .85; }
.t-ombra .tp-nx { padding-bottom: 4cqw; }
.tp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 3.6cqw 4cqw 4cqw; text-align: center; }
.tp-feats p { display: flex; flex-direction: column; align-items: center; }
.tp-feats svg { width: 3.4cqw; height: 3.4cqw; fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-feats b { margin-top: 1.4cqw; font-size: 1.25cqw; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tp-feats span { max-width: 17cqw; margin-top: .8cqw; font-size: 1.1cqw; line-height: 1.5; opacity: .62; }
.tp-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding-top: 4cqw; border-top: .1cqw solid rgb(236 230 220 / .14); }
.tp-prods .tp-ph { aspect-ratio: 4 / 5; border-radius: var(--r); }
.tp-prods p { display: flex; justify-content: space-between; margin-top: 1.4cqw !important; font-family: var(--disp); font-size: 2cqw; }
.tp-prods p span { color: var(--gold); font-family: var(--font-text); font-size: 1.2cqw; }
.t-ombra .tp-p2 .tp-k { color: var(--gold); opacity: 1; }
.t-ombra .tp-p2 .tp-h { margin-top: 1.6cqw; font-size: 6cqw; }
.t-ombra .tp-p2 .tp-h em { color: var(--gold); }

/* Orvel: Montserrat over a photograph of white silk, the name set across
   the page between the photograph and the speaker cut out of it, so the
   speaker floats in front of the letters. Both layers are drawn from the
   top of the same box, so they line up at any width. */
.t-orvel { --bg: #f1ede6; --fg: #1d1d1c; --acc: #1d1d1c; --on-acc: #fff; --dw: 700; --dt: uppercase; --dl: .01em; --disp: "Montserrat", var(--font-text); --r: .4cqw; background: var(--bg); color: var(--fg); }
.t-orvel .tp-bleed { top: 0; height: 66.7cqw; }
.t-orvel .tp-bleed::after { content: none; }
.t-orvel .tp-front { z-index: 2; }
.t-orvel nav { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 5cqw; font-size: 1cqw; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.t-orvel nav b { font-family: var(--disp); font-size: 1.9cqw; font-weight: 700; letter-spacing: .26em; }
.t-orvel nav .tp-ln { gap: 4cqw; }
.t-orvel nav .tp-pill { justify-self: end; padding: .6cqw 2.2cqw; }
.t-orvel .tp-hero { position: relative; height: 56cqw; }
.t-orvel .tp-hero .tp-bleed { top: -6.5cqw; }
.t-orvel .tp-word { position: absolute; top: 2cqw; left: 0; right: 0; z-index: 1; color: #232322; font-size: 23cqw; font-weight: 700; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.t-orvel .tp-line { position: absolute; top: 21.5cqw; left: 10.5cqw; z-index: 1; font-size: 1.3cqw; font-weight: 600; }
.t-orvel .tp-foot { z-index: 3; inset: auto 5cqw 3.4cqw; justify-content: space-between; align-items: center; font-size: 1.1cqw; font-weight: 500; line-height: 1.5; text-transform: none; }
.t-orvel .tp-foot > :last-child { text-align: right; }
.tp-down { width: 3.4cqw; height: 2cqw; border: .12cqw solid currentColor; border-radius: 99px; background: linear-gradient(45deg, transparent 46%, currentColor 46% 54%, transparent 54%) 42% 55% / .9cqw .9cqw no-repeat, linear-gradient(-45deg, transparent 46%, currentColor 46% 54%, transparent 54%) 58% 55% / .9cqw .9cqw no-repeat; }
.t-orvel .tp-nx { position: relative; z-index: 1; padding: 7cqw 2cqw 4cqw; background: var(--bg); text-align: center; }
.t-orvel .tp-nx .tp-h { font-size: 3cqw; }
.t-orvel .tp-nx .tp-sub { margin-top: 1cqw !important; font-size: 1.2cqw; }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin: 4cqw 6cqw 0; font-size: 1.2cqw; line-height: 1.75; }
.tp-cols p:first-child { position: relative; text-align: right; }
.tp-cols p:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; right: -2cqw; width: .12cqw; background: currentColor; }
.tp-cols p:last-child { text-align: left; }
.t-orvel .tp-row { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 2.4cqw; margin-top: 5cqw; }
.t-orvel .tp-row .tp-ph { height: 16cqw; border-radius: var(--r); }
.t-orvel .tp-p2 .tp-h { font-size: 4.6cqw; }
.t-orvel .tp-p2 .tp-ph { border-radius: var(--r); }
.t-orvel .tp-p2 img { object-position: 45% 50%; }

/* Tarn: Outfit on pale grey, one bottle in front of a white disc, the
   range listed beside it. */
.t-tarn { --bg: #f2f3f4; --fg: #17191b; --acc: #17191b; --on-acc: #fff; --dw: 500; --dl: -.03em; --disp: "Outfit", var(--font-text); --r: 1.4cqw; background: var(--bg); color: var(--fg); }
.t-tarn nav { padding: 0 8cqw; font-size: 1.25cqw; font-weight: 500; }
.t-tarn nav b { margin-right: 4cqw; font-family: var(--disp); font-size: 2.1cqw; font-weight: 600; letter-spacing: -.02em; }
.t-tarn nav .tp-ln { gap: 3.6cqw; }
.t-tarn nav .tp-pill { margin-left: auto; padding: 1.2cqw 3.2cqw; border: 0; background: #fff; box-shadow: 0 1cqw 2.4cqw rgb(0 0 0 / .06); font-weight: 600; }
.t-tarn .tp-hero { position: relative; height: 56cqw; }
.t-tarn .tp-hero .tp-tx { position: absolute; top: 7cqw; left: 8cqw; width: 30cqw; }
.t-tarn .tp-hero .tp-h { font-size: 5.8cqw; line-height: 1; }
.t-tarn .tp-hero .tp-sub { max-width: 25cqw; margin-top: 2.4cqw !important; font-size: 1.3cqw; line-height: 1.7; }
.t-tarn .tp-cta { display: flex; align-items: center; gap: 3cqw; margin-top: 3.4cqw !important; }
.t-tarn .tp-btn { height: 4cqw; padding: 0 3cqw; font-size: 1.15cqw; }
.tp-play { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: conic-gradient(from 90deg at 46% 50%, transparent 0 0) , #fff; box-shadow: 0 0 0 .9cqw rgb(255 255 255 / .55), 0 1cqw 2cqw rgb(0 0 0 / .06); position: relative; }
.tp-play::after { content: ""; position: absolute; top: calc(50% - .6cqw); left: calc(50% - .35cqw); border-left: 1cqw solid var(--fg); border-top: .6cqw solid transparent; border-bottom: .6cqw solid transparent; }
.tp-disc { position: absolute; top: 8cqw; left: 50%; width: 21cqw; height: 40cqw; border-radius: 0 20cqw 20cqw 0; background: #fff; }
.t-tarn .tp-cut { position: absolute; top: 2.5cqw; left: calc(50% - 8cqw); width: 16cqw; height: auto; filter: drop-shadow(1.6cqw 1.6cqw 1.6cqw rgb(0 0 0 / .14)); }
.tp-menu { position: absolute; top: 12cqw; right: 0; width: 20cqw; }
.tp-menu li { padding: 1.8cqw 0; border-bottom: .1cqw solid rgb(0 0 0 / .09); font-size: 1.05cqw; line-height: 1.5; opacity: .9; }
.tp-menu li:last-child { border: 0; }
.tp-menu b { display: block; margin-bottom: .5cqw; font-family: var(--disp); font-size: 1.75cqw; font-weight: 500; letter-spacing: -.01em; }
.t-tarn .tp-foot { inset: auto 8cqw 2.6cqw; align-items: flex-start; gap: 0; font-size: 1.2cqw; line-height: 1.7; text-transform: none; }
.t-tarn .tp-foot > :nth-child(2) { width: 24cqw; margin-left: 24cqw; }
.tp-mouse { display: flex; align-items: center; gap: 1.2cqw; font-size: .9cqw; font-weight: 600; opacity: .55; }
.tp-mouse::before { content: ""; width: 1.2cqw; height: 2cqw; border: .12cqw solid currentColor; border-radius: 99px; }
.tp-more { display: flex; align-items: center; gap: 3cqw; margin-left: auto; line-height: 1.3; opacity: .7; }
.tp-more i { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #fff; font-style: normal; }
.t-tarn .tp-nx { display: grid; grid-template-columns: 30cqw 1fr; gap: 5cqw; align-items: center; padding: 4cqw 8cqw; background: #fff; }
.t-tarn .tp-nx .tp-ph { aspect-ratio: 4 / 5; border-radius: var(--r); }
.t-tarn .tp-nx .tp-h { font-size: 4.4cqw; }
.t-tarn .tp-nx .tp-sub { max-width: 30cqw; }
.tp-sw { display: flex; align-items: center; gap: 1cqw; margin-top: 2.6cqw !important; font-size: 1.6cqw; font-weight: 500; }
.tp-sw i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #d4c2a8; }
.tp-sw i:nth-child(2) { background: #9aa58e; }
.tp-sw i:nth-child(3) { background: #3d4043; }
.tp-sw span { margin-left: 2cqw; }
.t-tarn .tp-p2 .tp-h { font-size: 5.6cqw; }
.t-tarn .tp-p2 .tp-ph { border-radius: var(--r); }

/* Tallow & Oak: a furniture shop's front page kept calm. Young Serif for
   the name, on a black block hanging from the nav, and for the headings;
   a sand ticker of offers; the banner's wall left empty for the headline;
   the newest pieces as cards with their names under the photos. */
.t-tallow { --bg: #fbf9f5; --fg: #1d1b18; --acc: #1d1b18; --on-acc: #fbf9f5; --sand: #efe8dc; --cream: #f7f1e6; --disp: "Young Serif", Georgia, serif; --dw: 400; --dl: -.015em; --r: 1cqw; background: var(--bg); color: var(--fg); }
.t-tallow nav { display: grid; grid-template-columns: 1fr auto 1fr; height: 5.6cqw; padding: 0 3.4cqw; font-size: 1.15cqw; font-weight: 500; }
.t-tallow nav .tp-ln { gap: 2.6cqw; }
.t-tallow nav .on { text-decoration-thickness: .12cqw; }
.t-tallow nav b { display: grid; place-items: center; align-self: start; height: 7.6cqw; margin: 0; padding: 0 3cqw; background: var(--fg); color: var(--cream); font-family: var(--disp); font-size: 2.3cqw; font-weight: 400; letter-spacing: -.01em; }
.t-tallow nav > :last-child { justify-self: end; align-items: center; }
.t-tallow .tp-btn { height: 3cqw; padding: 0 1.6cqw; font-size: 1.05cqw; font-weight: 600; }
.t-tallow .tp-tick { justify-content: space-between; gap: 0; padding: .95cqw 3.4cqw; background: var(--sand); color: var(--fg); font-size: 1.02cqw; }
.t-tallow .tp-tick span + span::before { width: .6cqw; height: .6cqw; margin-right: 3.4cqw; border-radius: 0; rotate: 45deg; background: #b08d62; vertical-align: .2em; }
.t-tallow .tp-tick span:nth-child(3) { margin-left: 24cqw; }
.t-tallow .tp-tick span:nth-child(3)::before { content: none; }
.t-tallow .tp-hero { position: relative; height: 36cqw; color: var(--cream); text-align: center; }
.t-tallow .tp-hero .tp-ph { position: absolute; inset: 0; }
.t-tallow .tp-hero .tp-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(20 32 36 / .38), rgb(20 32 36 / .08) 62%); }
.t-tallow .tp-hero img { object-position: 50% 100%; }
.t-tallow .tp-hero .tp-tx { position: relative; padding-top: 5.4cqw; }
.t-tallow .tp-k { font-size: 1.05cqw; letter-spacing: .18em; opacity: .85; }
.t-tallow .tp-hero .tp-h { margin-top: 1.4cqw; font-size: 6cqw; line-height: 1; }
.t-tallow .tp-hero .tp-sub { margin-top: 1.4cqw !important; font-size: 1.5cqw; opacity: .9; }
.t-tallow .tp-cta { display: flex; justify-content: center; gap: 1.2cqw; margin-top: 2.6cqw !important; }
.t-tallow .tp-cta .tp-btn { height: 3.8cqw; padding: 0 2.4cqw; background: var(--cream); color: var(--fg); font-size: 1.15cqw; }
.t-tallow .tp-cta .tp-ghost { background: transparent; box-shadow: inset 0 0 0 .12cqw var(--cream); color: var(--cream); }
.tp-arw { position: absolute; top: calc(50% - 2cqw); width: 4cqw; height: 4cqw; border-radius: 50%; background: rgb(247 241 230 / .2); box-shadow: inset 0 0 0 .1cqw rgb(247 241 230 / .5); -webkit-backdrop-filter: blur(.6cqw); backdrop-filter: blur(.6cqw); }
.tp-arw::after { content: ""; position: absolute; top: calc(50% - .5cqw); left: calc(50% - .3cqw); width: 1cqw; height: 1cqw; border-top: .14cqw solid var(--cream); border-left: .14cqw solid var(--cream); rotate: -45deg; }
.tp-arw.l { left: 2.4cqw; }
.tp-arw.r { right: 2.4cqw; }
.tp-arw.r::after { left: calc(50% - .75cqw); rotate: 135deg; }
.tp-dots { position: absolute; bottom: 2cqw; left: 0; right: 0; display: flex; justify-content: center; gap: .8cqw; }
.tp-dots i { width: .7cqw; height: .7cqw; border-radius: 50%; background: rgb(247 241 230 / .45); }
.tp-dots .on { width: 2.4cqw; border-radius: 99px; background: var(--cream); }
.t-tallow .tp-nx { padding: 3.6cqw 3.4cqw 4cqw; }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; }
.t-tallow .tp-head .tp-h { font-size: 2.8cqw; }
.t-tallow .tp-head .tp-u { font-size: 1.15cqw; font-weight: 500; }
.tp-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; margin-top: 2.2cqw; }
.tp-cards > div { padding: .8cqw .8cqw 1.4cqw; border-radius: var(--r); background: var(--sand); }
.tp-cards .tp-ph { position: relative; height: 17cqw; border-radius: .6cqw; }
.tp-cards i { position: absolute; top: .8cqw; left: .8cqw; padding: .25cqw .8cqw; border-radius: 99px; background: #9c3d22; color: #fff; font-size: .85cqw; font-style: normal; font-weight: 600; }
.tp-cards p { display: flex; flex-direction: column; gap: .3cqw; margin-top: 1.2cqw !important; padding: 0 .4cqw; font-size: .95cqw; line-height: 1.3; }
.tp-cards b { font-family: var(--disp); font-size: 1.3cqw; font-weight: 400; }
.tp-cards span { opacity: .6; }
.tp-cards .tp-pr { margin-top: .8cqw; font-size: 1.15cqw; font-weight: 600; opacity: 1; }
.tp-cards s { font-weight: 400; opacity: .5; }
.t-tallow .tp-p2 .tp-k { color: #9c3d22; }
.t-tallow .tp-p2 .tp-h { margin-top: 1.4cqw; font-size: 5.6cqw; }
.t-tallow .tp-p2 .tp-ph { border-radius: var(--r); }

/* Hobb: Barlow in lowercase on white ruled into faint columns, one kettle
   cut out on the right and a slide count beside it. */
.t-hobb { --bg: #f7f7f6; --fg: #202124; --acc: #202124; --on-acc: #fff; --dw: 700; --dl: -.01em; --disp: "Barlow", var(--font-text); --r: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(0 0 0 / .045) 0 12.5%), radial-gradient(60% 50% at 72% 30%, #fff, transparent), var(--bg); color: var(--fg); }
.t-hobb nav { display: grid; grid-template-columns: 1fr auto 1fr; height: 7cqw; padding: 0 4cqw; font-size: 1.1cqw; }
.t-hobb nav b { margin: 0; font-family: var(--font-text); font-size: 1.9cqw; font-weight: 400; letter-spacing: -.01em; }
.t-hobb nav strong { font-weight: 700; }
.t-hobb nav .tp-ln { justify-self: end; align-items: center; gap: 2.6cqw; }
.tp-burger { width: 2.4cqw; height: .9cqw; border-top: .18cqw solid currentColor; border-bottom: .18cqw solid currentColor; clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 40%, 70% 100%, 0 100%); }
.tp-find { position: relative; width: 1.1cqw; height: 1.1cqw; border: .18cqw solid currentColor; border-radius: 50%; }
.tp-find::after { content: ""; position: absolute; right: -.55cqw; bottom: -.45cqw; width: .55cqw; height: .18cqw; background: currentColor; rotate: 45deg; }
.t-hobb .tp-hero { position: relative; height: 55.5cqw; }
.t-hobb .tp-hero .tp-h { position: absolute; top: 11cqw; left: 9cqw; font-size: 5.4cqw; line-height: 1.14; }
.t-hobb .tp-row { position: absolute; top: 35.5cqw; left: 9cqw; display: grid; grid-template-columns: 17cqw 19cqw; align-items: center; }
.tp-how { display: flex; align-items: center; gap: 3cqw; font-size: 1.2cqw; font-weight: 500; }
.tp-sq { position: relative; width: 4.4cqw; height: 4.4cqw; background: var(--fg); }
.tp-sq::after { content: ""; position: absolute; top: calc(50% - .55cqw); left: calc(50% - .35cqw); border-left: .9cqw solid #fff; border-top: .55cqw solid transparent; border-bottom: .55cqw solid transparent; }
.t-hobb .tp-row .tp-sub { margin: 0 !important; font-size: 1.05cqw; line-height: 1.9; opacity: .6; }
.t-hobb .tp-cut { position: absolute; top: 14cqw; right: 8.5cqw; width: 40cqw; height: auto; filter: drop-shadow(0 2.4cqw 2cqw rgb(0 0 0 / .12)); }
.tp-prog { position: absolute; top: 17cqw; right: 3.4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; font-size: .85cqw; font-weight: 600; }
.tp-prog i { width: .1cqw; height: 13cqw; background: currentColor; opacity: .5; }
.tp-soc { position: absolute; right: 8cqw; bottom: 3.6cqw; display: flex; gap: 2.6cqw; font-size: 1cqw; font-weight: 500; }
.t-hobb .tp-nx { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2cqw; padding: 3cqw 9cqw 5cqw; background: #fff; }
.t-hobb .tp-nx .tp-ph { height: 30cqw; }
.t-hobb .tp-nx p { display: flex; justify-content: space-between; margin-top: 1.4cqw !important; font-size: 1.1cqw; }
.t-hobb .tp-nx b { font-family: var(--disp); font-size: 1.6cqw; font-weight: 700; }
.t-hobb .tp-nx span { opacity: .6; }
.t-hobb .tp-btn { border-radius: 0; }
.t-hobb .tp-p2 .tp-h { font-size: 6cqw; }

/* Kerf: one chair's page, the shop in a narrow condensed Archivo, the
   chair cut out in the middle between its options and its photos, and an
   orange that is used only to buy. */
.t-kerf { --bg: #f4f4f3; --fg: #1b1b1b; --acc: #ef6a1f; --on-acc: #fff; --dw: 800; --ds: 72%; --dt: uppercase; --dl: -.005em; --disp: "Archivo", var(--font-text); --r: 0; background: var(--bg); color: var(--fg); }
.t-kerf nav { height: 5.4cqw; padding: 0 0 0 4cqw; gap: 0; border-bottom: .1cqw solid #e2e2e0; background: #fff; font-size: .82cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.t-kerf nav b { margin-right: 4cqw; font-family: var(--disp); font-size: 1.6cqw; font-weight: 800; letter-spacing: .06em; }
.t-kerf nav > .tp-ln:nth-of-type(1) { gap: 3.6cqw; }
.t-kerf nav > .tp-ln:last-child { align-self: stretch; gap: 0; margin-left: auto; letter-spacing: 0; text-transform: none; }
.t-kerf nav > .tp-ln:last-child span { display: grid; place-items: center; padding: 0 2.2cqw; border-left: .1cqw solid #e2e2e0; font-weight: 500; }
.t-kerf nav .on { text-decoration-color: var(--acc); }
.t-kerf .tp-crumb { display: flex; gap: 1.2cqw; padding: 1.6cqw 4cqw 0; font-size: .85cqw; opacity: .6; }
.tp-crumb span + span::before { content: "/"; margin-right: 1.2cqw; }
.tp-crumb span:last-child { opacity: .6; }
.t-kerf .tp-hero { position: relative; height: 53cqw; }
.t-kerf .tp-nx { padding: 1cqw 0 5cqw; }
.t-kerf .tp-hero .tp-tx { position: absolute; top: 2cqw; left: 4cqw; width: 27cqw; }
.t-kerf .tp-tag { border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; display: inline-block; padding: .3cqw .9cqw; background: var(--fg); color: #fff; font-size: .8cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.t-kerf .tp-hero .tp-h { margin-top: 1.2cqw; font-size: 6cqw; line-height: .95; }
.tp-rate { display: flex; align-items: center; gap: 1cqw; margin-top: 1.2cqw !important; font-size: .9cqw; }
.tp-rate i { color: #f2a41c; font-style: normal; letter-spacing: .1em; }
.tp-fin { margin-top: .8cqw !important; font-size: .9cqw; }
.tp-fin u { color: var(--acc); text-decoration: none; font-weight: 600; }
.t-kerf .tp-k { margin-top: 1.8cqw !important; font-size: 1.05cqw; font-weight: 600; letter-spacing: .06em; opacity: 1; }
.tp-opts { margin-top: 1cqw !important; font-size: .95cqw; }
.tp-opts li { display: flex; align-items: center; gap: 1cqw; padding: 1cqw 0; border-bottom: .1cqw solid #e2e2e0; }
.tp-opts span { width: 8cqw; opacity: .6; }
.tp-opts b { flex: 1; font-weight: 600; }
.tp-opts i { width: 1.8cqw; height: 1.8cqw; border-radius: .2cqw; background: #8a8987; }
.tp-opts .sw2 { background: #5a3420; }
.tp-opts em { font-style: normal; font-weight: 600; }
.tp-opts .tp-tot { flex: none; margin-left: auto; font-size: 1.5cqw; font-weight: 800; }
.tp-buy { display: flex; gap: 1cqw; margin-top: 1.6cqw !important; }
.t-kerf .tp-btn { flex: 1; justify-content: center; height: 3.8cqw; border-radius: 0; font-size: 1.05cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tp-heart { display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; background: #fff; box-shadow: inset 0 0 0 .1cqw #e2e2e0; font-size: 1.6cqw; }
.t-kerf .tp-hero .tp-sub { margin-top: .8cqw !important; font-size: .95cqw; line-height: 1.6; opacity: .7; }
.t-kerf .tp-cut { position: absolute; top: 1cqw; left: 33cqw; width: 44cqw; height: auto; filter: drop-shadow(0 2.4cqw 1.6cqw rgb(0 0 0 / .16)); }
.tp-thumbs { position: absolute; top: 2.6cqw; right: 4cqw; display: grid; grid-template-columns: repeat(3, 4.8cqw); gap: .7cqw; }
.tp-thumbs > * { position: relative; width: 4.8cqw; height: 4.8cqw; overflow: hidden; background: #fff; }
.tp-thumbs img { transform-origin: 50% 50%; }
.tp-thumbs .g2 { object-position: 0 30%; scale: 1.8; transform-origin: 20% 40%; }
.tp-thumbs .g5 { scale: 1.6; transform-origin: 60% 55%; }
.tp-thumbs .g6 { scale: 2.2; transform-origin: 75% 90%; }
.tp-thumbs .g7 { scale: 1.5; transform-origin: 30% 30%; }
.tp-thumbs .g8 { filter: grayscale(.3); scale: 1.3; }
.tp-thumbs b { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; font-size: 1.1cqw; font-weight: 600; }
.tp-dims { position: absolute; top: 22cqw; right: 4cqw; width: 15.8cqw; background: #fff; box-shadow: 0 1.4cqw 3cqw rgb(0 0 0 / .07); font-size: 1.1cqw; font-weight: 600; }
.tp-perks { display: grid; margin: 0 4cqw !important; grid-template-columns: repeat(3, 1fr); padding-top: 2.4cqw; border-top: .1cqw solid #e2e2e0; font-size: .95cqw; }
.tp-perks b { display: block; margin-bottom: .3cqw; font-family: var(--disp); font-size: 1.3cqw; font-stretch: 72%; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tp-perks span:has(b) { opacity: 1; color: rgb(27 27 27 / .6); }
.tp-perks b { color: var(--fg); }
.tp-dims li { padding: 1.5cqw 1.6cqw; border-bottom: .1cqw solid #ececea; }
.tp-dims li:last-child { border: 0; }
.tp-dims span { display: block; margin-bottom: .4cqw; font-size: .8cqw; font-weight: 400; opacity: .6; }
.t-kerf .tp-p2 .tp-k { margin: 0 !important; color: var(--acc); }
.t-kerf .tp-p2 .tp-h { margin-top: 1.2cqw; font-size: 5.6cqw; }
.t-kerf .tp-p2 .tp-btn { flex: none; }

/* Tove: the home page's flagship, kept to a headline and a chair. Barlow
   in lowercase on a cool pale grey, a soft light behind the shell chair,
   and the warm oak as the only colour on the page. Under the first screen,
   the chair in a room, its edge up close and its other two colours. */
.t-tove { --bg: #eef0f2; --fg: #1b1d20; --acc: #1b1d20; --on-acc: #f4f5f6; --dw: 700; --dl: -.02em; --disp: "Barlow", var(--font-text); --r: 0; background: radial-gradient(48% 62% at 73% 40%, #fbfbfc, rgb(251 251 252 / 0)), var(--bg); color: var(--fg); }
.t-tove nav { display: grid; grid-template-columns: 1fr auto 1fr; height: 7cqw; padding: 0 6cqw; font-size: 1.1cqw; }
.t-tove nav .tp-ln { gap: 2.6cqw; }
.t-tove nav > :last-child { justify-self: end; }
.t-tove nav b { margin: 0; font-family: var(--font-text); font-size: 1.9cqw; font-weight: 400; letter-spacing: -.015em; }
.t-tove nav strong { font-weight: 700; }
.t-tove .tp-hero { position: relative; height: 55.5cqw; }
.t-tove .tp-hero .tp-tx { position: absolute; top: 13.5cqw; left: 6cqw; }
.t-tove .tp-hero .tp-h { font-size: 5cqw; line-height: 1.1; }
.t-tove .tp-hero .tp-sub { max-width: 30cqw; margin-top: 3cqw !important; font-size: 1.3cqw; line-height: 1.7; opacity: .6; }
.t-tove .tp-hero .tp-u { display: inline-block; margin-top: 3cqw; font-size: 1.2cqw; font-weight: 600; text-decoration-thickness: .12cqw; text-underline-offset: .7cqw; }
.t-tove .tp-floor { position: absolute; top: 42cqw; left: 60cqw; width: 28cqw; height: 3.6cqw; border-radius: 50%; background: radial-gradient(closest-side, rgb(30 36 44 / .2), rgb(30 36 44 / 0)); }
.t-tove .tp-cut { position: absolute; top: 5.5cqw; left: 57cqw; width: 34cqw; height: auto; }
.tp-var { position: absolute; top: 48.5cqw; left: 60cqw; width: 28cqw; display: flex; justify-content: space-between; font-size: 1.05cqw; }
.tp-var span { opacity: .55; }
.tp-var b { font-weight: 600; }
.t-tove .tp-nx { padding: 6cqw; background: #f8f9fa; }
.t-tove .tp-intro .tp-h { max-width: 46cqw; font-size: 3.2cqw; line-height: 1.12; }
.tp-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 1.6cqw; margin-top: 4cqw; }
.tp-grid > * { height: 26cqw; }
.g-vars { position: relative; display: flex; align-items: center; justify-content: center; background: #eef0f2; }
.g-vars img { width: 46%; height: auto; object-fit: contain; }
.g-vars img + img { margin-left: -8%; }
.g-vars p { position: absolute; left: 1.6cqw; bottom: 1.4cqw; font-size: 1cqw; opacity: .6; }
.t-tove .tp-btn { border-radius: 0; }
.t-tove .tp-p2 .tp-k { margin-bottom: 1.4cqw !important; font-size: 1cqw; font-weight: 600; letter-spacing: .14em; opacity: .5; }
.t-tove .tp-p2 .tp-h { font-size: 5.4cqw; }
.t-tove .tp-p2 img, .tp-grid .tp-ph:first-child img { object-position: 74% 50%; }

}